@workday/canvas-kit-react 5.3.0-next.18 → 5.3.0-next.32

package/popup/lib/hooks/useTransferOnFullscreenExit.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import screenfull from 'screenfull';
+
+import {PopupModel} from './usePopupModel';
+import {PopupStack} from '@workday/canvas-kit-popup-stack';
+
+/**
+ * Makes the popup transfer to fullscreen when fullscreen is exited. Without this hook, the popup
+ * would not operate correctly with other popups on the screen.
+ *
+ * Don't use this in conjunction with a hook that will close the popup when exiting fullscreen.
+ * Doing so would open the popup when the intention was to close it.
+ */
+export const useTransferOnFullscreenExit = (model: PopupModel, elemProps = {}) => {
+  const handler = React.useCallback(
+    event => {
+      if (!screenfull.isFullscreen && model.state.stackRef.current) {
+        PopupStack.transferToCurrentContext({
+          element: model.state.stackRef.current,
+          owner: model.state.targetRef.current!,
+        });
+      }
+    },
+    [model.state.stackRef, model.state.targetRef]
+  );
+
+  const visible = model.state.visibility !== 'hidden';
+
+  React.useEffect(() => {
+    if (!visible) {
+      return;
+    }
+    if (screenfull.isEnabled) {
+      screenfull.on('change', handler);
+      return () => {
+        screenfull.off('change', handler);
+      };
+    }
+    return;
+  }, [handler, visible]);
+
+  return elemProps;
+};

package/radio/lib/Radio.tsx

@@ -28,7 +28,7 @@ export interface RadioProps extends Themeable {
   disabled?: boolean;
   /**
    * The HTML `id` of the underlying radio input element. This is required if `label` is defined as a non-empty string.
-   * @default A uniquely generated id by uuid()
+   * @default A uniquely generated id
    */
   id?: string;
   /**

package/switch/lib/Switch.tsx

@@ -25,7 +25,7 @@ export interface SwitchProps extends Themeable {
   disabled?: boolean;
   /**
    * The HTML `id` of the underlying checkbox input element.
-   * @default A uniquely generated id by uuid()
+   * @default A uniquely generated id
    */
   id?: string;
   /**

package/tabs/lib/menu/MenuList.tsx

@@ -36,10 +36,9 @@ export const MenuList = createComponent('div')({
       <Stack
         as={Element}
         background={commonColors.background}
-        borderRadius="m"
+        borderRadius="zero"
         padding="zero"
-        marginY="zero"
-        marginX="xxs"
+        marginY="xxs"
         spacing="zero"
         overflowY="auto"
         flexDirection={localModel.state.orientation === 'vertical' ? 'column' : 'row'}

package/tabs/lib/overflow/useOverflowModel.tsx

@@ -92,6 +92,8 @@ export function getHiddenIds(
       // at least the selected item and overflow target fit. Update our itemWidth with the sum
       itemWidth += itemWidthCache[selectedKey] + overflowTargetWidth;
     }
+  } else {
+    itemWidth += overflowTargetWidth;
   }
 
   for (const key in itemWidthCache) {
@@ -166,12 +168,32 @@ export const useOverflowModel = <T extends unknown>(
       itemWidthCacheRef.current = {...itemWidthCacheRef.current, [id]: width};
 
       setItemWidthCache(itemWidthCacheRef.current);
+
+      const ids = getHiddenIds(
+        containerWidthRef.current,
+        overflowTargetWidthRef.current,
+        itemWidthCacheRef.current,
+        state.selectedIds
+      );
+
+      setHiddenIds(ids);
     },
     removeItemWidth({id}) {
       const newCache = {...itemWidthCacheRef.current};
       delete newCache[id];
       itemWidthCacheRef.current = newCache;
       setItemWidthCache(itemWidthCacheRef.current);
+
+      const ids = getHiddenIds(
+        containerWidthRef.current,
+        overflowTargetWidthRef.current,
+        itemWidthCacheRef.current,
+        state.selectedIds !== 'all'
+          ? state.selectedIds.filter(sId => id !== sId)
+          : state.selectedIds
+      );
+
+      setHiddenIds(ids);
     },
     addHiddenKey({id}) {
       setHiddenIds(ids => ids.concat(id));

package/tabs/lib/overflow/useOverflowTarget.tsx

@@ -35,7 +35,7 @@ export const useOverflowTarget = createHook(
     return {
       ref: elementRef,
       'aria-hidden': isHidden,
-      tabIndex: -1,
+      tabIndex: isHidden ? -1 : 0,
       style: isHidden ? hiddenStyle : {},
     };
   }

package/tooltip/lib/Tooltip.tsx

@@ -44,6 +44,14 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
    * @default 'label'
    */
   type?: 'label' | 'describe' | 'muted';
+  /**
+   * Amount of time (in ms) to delay before showing the tooltip
+   */
+  showDelay?: number;
+  /**
+   * Amount of time (in ms) to delay before hiding the tooltip
+   */
+  hideDelay?: number;
 }
 
 function mergeCallbacks<T extends {[key: string]: any}>(
@@ -66,10 +74,17 @@ export const Tooltip = ({
   placement = 'top',
   title,
   children,
+  showDelay = 300,
+  hideDelay = 100,
   ...elemProps
 }: TooltipProps) => {
   const titleText = innerText(title);
-  const {targetProps, popperProps, tooltipProps} = useTooltip({type, titleText});
+  const {targetProps, popperProps, tooltipProps} = useTooltip({
+    type,
+    titleText,
+    showDelay,
+    hideDelay,
+  });
 
   return (
     <React.Fragment>

package/tooltip/lib/useTooltip.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import uuid from 'uuid/v4';
 import {
   useCloseOnEscape,
   useAlwaysCloseOnOutsideClick,
   usePopupModel,
+  useCloseOnFullscreenExit,
 } from '@workday/canvas-kit-react/popup';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
 
 const useIntentTimer = (fn: Function, waitMs: number = 0): {start(): void; clear(): void} => {
   const timer = React.useRef() as React.MutableRefObject<number | undefined>;
@@ -54,6 +55,8 @@ const isInteractiveElement = (element: Element) => {
 export function useTooltip<T extends Element = Element>({
   type = 'label',
   titleText = '',
+  showDelay = 300,
+  hideDelay = 100,
 }: {
   /**
    * Determines the tooltip type for accessibility.
@@ -76,17 +79,30 @@ export function useTooltip<T extends Element = Element>({
    * The content of the `aria-label` if `type` is `label.
    */
   titleText?: string;
+  /**
+   * Amount of time (in ms) to delay before showing the tooltip
+   */
+  showDelay?: number;
+  /**
+   * Amount of time (in ms) to delay before hiding the tooltip
+   */
+  hideDelay?: number;
 } = {}) {
   const mouseDownRef = React.useRef(false); // use to prevent newly focused from making tooltip flash
   const popupModel = usePopupModel();
   const [anchorElement, setAnchorElement] = React.useState<T | null>(null);
-  const [id] = React.useState(() => uuid());
+  const id = useUniqueId();
+  const intentTimerHide = useIntentTimer(popupModel.events.hide, hideDelay);
+  const intentTimerShow = useIntentTimer(popupModel.events.show, showDelay);
 
-  const intentTimer = useIntentTimer(popupModel.events.hide, 100);
+  const onHide = () => {
+    intentTimerHide.start();
+    intentTimerShow.clear();
+  };
 
   const onOpen = () => {
-    popupModel.events.show();
-    intentTimer.clear();
+    intentTimerShow.start();
+    intentTimerHide.clear();
   };
 
   const onOpenFromTarget = (event: React.SyntheticEvent) => {
@@ -111,6 +127,7 @@ export function useTooltip<T extends Element = Element>({
 
   useCloseOnEscape(popupModel);
   useAlwaysCloseOnOutsideClick(popupModel);
+  useCloseOnFullscreenExit(popupModel);
 
   const visible = popupModel.state.visibility !== 'hidden';
 
@@ -122,10 +139,10 @@ export function useTooltip<T extends Element = Element>({
       // This will replace the accessible name of the target element
       'aria-label': type === 'label' ? titleText : undefined,
       onMouseEnter: onOpenFromTarget,
-      onMouseLeave: intentTimer.start,
+      onMouseLeave: onHide,
       onMouseDown,
       onFocus,
-      onBlur: intentTimer.start,
+      onBlur: onHide,
     },
     /** Mix these properties into the `Popper` component */
     popperProps: {
@@ -138,7 +155,7 @@ export function useTooltip<T extends Element = Element>({
       id: type === 'describe' && visible ? id : undefined,
       role: 'tooltip',
       onMouseEnter: onOpen,
-      onMouseLeave: intentTimer.start,
+      onMouseLeave: onHide,
     },
   };
 }

package/ts3.5/dist/commonjs/checkbox/lib/Checkbox.d.ts

@@ -13,7 +13,7 @@ export interface CheckboxProps extends Themeable {
     disabled?: boolean;
     /**
      * The HTML `id` of the underlying checkbox input element. This is required if `label` is defined as a non-empty string.
-     * @default A uniquely generated id by uuid()
+     * @default A uniquely generated id
      */
     id?: string;
     /**

package/ts3.5/dist/commonjs/common/lib/utils/index.d.ts

@@ -10,6 +10,7 @@ export * from './useMount';
 export * from './components';
 export * from './models';
 export * from './elements';
+export * from './useIsFullscreen';
 export * from './useWindowSize';
 export * from './useResizeObserver';
 export * from './StaticStates';

package/ts3.5/dist/commonjs/common/lib/utils/useIsFullscreen.d.ts

@@ -0,0 +1,2 @@
+export declare const useIsFullscreen: () => boolean;
+//# sourceMappingURL=useIsFullscreen.d.ts.map

package/ts3.5/dist/commonjs/common/lib/utils/useUniqueId.d.ts

@@ -1,3 +1,12 @@
+/**
+ * Generates a unique and HTML5 compliant identifier every time it is called. Internally it uses a 4
+ * character random seed starting with a letter. This seed is unique to each instance of this
+ * package meaning different versions of Canvas Kit on the page will have a different seed. Each
+ * call will use a Base 36 string (10 numbers + 26 letters) based on an incremented number. The
+ * incremented number always starts at 0 and can be reset for testing purposes using
+ * [resetUniqueIdCount](#resetuniqueidcount). [setUniqueSeed](#setuniqueseed) can also be used for
+ * testing or server side rendering to get the same results during hydration.
+ */
 export declare const generateUniqueId: () => string;
 /**
  * Generate a unique ID if one is not provided. The generated ID will be stable across renders
@@ -10,4 +19,23 @@ export declare const useUniqueId: (id?: string | undefined) => string;
  * TODO: Remove in major release
  */
 export declare const uniqueId: (id?: string | undefined) => string;
+/**
+ * Update the seed used by the id generator. This is useful for snapshot tests to help stabilize ids
+ * generated each run. This could also be used for server-side hydration - if you choose the same
+ * seed for server and set that on the client before components are rendered, the ids generated will
+ * be the same.
+ * @example
+ * // set in a script tag from the server
+ * setSeed(window.__ID_SEED); // set in a script tag from the server
+ *
+ * // jest setup
+ * before(() => {
+ *   setSeed('a')
+ * })
+ */
+export declare const setUniqueSeed: (s: string) => void;
+/**
+ * This should only be called for tests in an `beforeEach`
+ */
+export declare const resetUniqueIdCount: () => void;
 //# sourceMappingURL=useUniqueId.d.ts.map

package/ts3.5/dist/commonjs/popup/lib/hooks/index.d.ts

@@ -2,6 +2,7 @@ export * from './useAlwaysCloseOnOutsideClick';
 export * from './useAssistiveHideSiblings';
 export * from './useBringToTopOnClick';
 export * from './useCloseOnEscape';
+export * from './useCloseOnFullscreenExit';
 export * from './useCloseOnOutsideClick';
 export * from './useDisableBodyScroll';
 export * from './useFocusRedirect';
@@ -15,4 +16,6 @@ export * from './usePopupPopper';
 export * from './usePopupStack';
 export * from './usePopupTarget';
 export * from './useReturnFocus';
+export * from './useTransferOnFullscreenEnter';
+export * from './useTransferOnFullscreenExit';
 //# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/commonjs/popup/lib/hooks/useCloseOnFullscreenExit.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Closes the popup when fullscreen is exited. Entering/exiting fullscreen changes the context of
+ * the entire screen. This should be added to popup types that are very context sensitive like
+ * Tooltips.
+ */
+export declare const useCloseOnFullscreenExit: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
+//# sourceMappingURL=useCloseOnFullscreenExit.d.ts.map

package/ts3.5/dist/commonjs/popup/lib/hooks/useReturnFocus.d.ts

@@ -3,7 +3,7 @@
  * `useInitialFocus`. This should be used with `useFocusRedirect` or `useFocusTrap` for a complete
  * focus management solution.
  *
- * This should ble used on popup elements that use `useInitialFocus`.
+ * This should be used on popup elements that use `useInitialFocus`.
  */
 export declare const useReturnFocus: (model: import("../../../common").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
 //# sourceMappingURL=useReturnFocus.d.ts.map

package/ts3.5/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Makes the popup transfer to the fullscreen element when fullscreen is entered. Without this, the
+ * popup would seem to disappear because the popup container element is not a child of the
+ * fullscreen element.
+ *
+ * Don't use this in conjunction with a hook that will close the popup when entering fullscreen.
+ * Doing so would open the popup when the intention was to close it.
+ */
+export declare const useTransferOnFullscreenEnter: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
+//# sourceMappingURL=useTransferOnFullscreenEnter.d.ts.map

package/ts3.5/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenExit.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Makes the popup transfer to fullscreen when fullscreen is exited. Without this hook, the popup
+ * would not operate correctly with other popups on the screen.
+ *
+ * Don't use this in conjunction with a hook that will close the popup when exiting fullscreen.
+ * Doing so would open the popup when the intention was to close it.
+ */
+export declare const useTransferOnFullscreenExit: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
+//# sourceMappingURL=useTransferOnFullscreenExit.d.ts.map

package/ts3.5/dist/commonjs/radio/lib/Radio.d.ts

@@ -13,7 +13,7 @@ export interface RadioProps extends Themeable {
     disabled?: boolean;
     /**
      * The HTML `id` of the underlying radio input element. This is required if `label` is defined as a non-empty string.
-     * @default A uniquely generated id by uuid()
+     * @default A uniquely generated id
      */
     id?: string;
     /**

package/ts3.5/dist/commonjs/switch/lib/Switch.d.ts

@@ -13,7 +13,7 @@ export interface SwitchProps extends Themeable {
     disabled?: boolean;
     /**
      * The HTML `id` of the underlying checkbox input element.
-     * @default A uniquely generated id by uuid()
+     * @default A uniquely generated id
      */
     id?: string;
     /**

package/ts3.5/dist/commonjs/tooltip/lib/Tooltip.d.ts

@@ -37,6 +37,14 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * @default 'label'
      */
     type?: 'label' | 'describe' | 'muted';
+    /**
+     * Amount of time (in ms) to delay before showing the tooltip
+     */
+    showDelay?: number;
+    /**
+     * Amount of time (in ms) to delay before hiding the tooltip
+     */
+    hideDelay?: number;
 }
-export declare const Tooltip: ({ type, placement, title, children, ...elemProps }: TooltipProps) => JSX.Element;
+export declare const Tooltip: ({ type, placement, title, children, showDelay, hideDelay, ...elemProps }: TooltipProps) => JSX.Element;
 //# sourceMappingURL=Tooltip.d.ts.map

package/ts3.5/dist/commonjs/tooltip/lib/useTooltip.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
  * Convenience hook for creating components with tooltips. It will return an object of properties to mix
  * into a target, popper and tooltip
  */
-export declare function useTooltip<T extends Element = Element>({ type, titleText, }?: {
+export declare function useTooltip<T extends Element = Element>({ type, titleText, showDelay, hideDelay, }?: {
     /**
      * Determines the tooltip type for accessibility.
      *
@@ -25,6 +25,14 @@ export declare function useTooltip<T extends Element = Element>({ type, titleTex
      * The content of the `aria-label` if `type` is `label.
      */
     titleText?: string;
+    /**
+     * Amount of time (in ms) to delay before showing the tooltip
+     */
+    showDelay?: number;
+    /**
+     * Amount of time (in ms) to delay before hiding the tooltip
+     */
+    hideDelay?: number;
 }): {
     /** Mix these properties into the target element. **Must be an Element** */
     targetProps: {

package/ts3.5/dist/es6/checkbox/lib/Checkbox.d.ts

@@ -13,7 +13,7 @@ export interface CheckboxProps extends Themeable {
     disabled?: boolean;
     /**
      * The HTML `id` of the underlying checkbox input element. This is required if `label` is defined as a non-empty string.
-     * @default A uniquely generated id by uuid()
+     * @default A uniquely generated id
      */
     id?: string;
     /**

package/ts3.5/dist/es6/common/lib/utils/index.d.ts

@@ -10,6 +10,7 @@ export * from './useMount';
 export * from './components';
 export * from './models';
 export * from './elements';
+export * from './useIsFullscreen';
 export * from './useWindowSize';
 export * from './useResizeObserver';
 export * from './StaticStates';

package/ts3.5/dist/es6/common/lib/utils/useIsFullscreen.d.ts

@@ -0,0 +1,2 @@
+export declare const useIsFullscreen: () => boolean;
+//# sourceMappingURL=useIsFullscreen.d.ts.map

package/ts3.5/dist/es6/common/lib/utils/useUniqueId.d.ts

@@ -1,3 +1,12 @@
+/**
+ * Generates a unique and HTML5 compliant identifier every time it is called. Internally it uses a 4
+ * character random seed starting with a letter. This seed is unique to each instance of this
+ * package meaning different versions of Canvas Kit on the page will have a different seed. Each
+ * call will use a Base 36 string (10 numbers + 26 letters) based on an incremented number. The
+ * incremented number always starts at 0 and can be reset for testing purposes using
+ * [resetUniqueIdCount](#resetuniqueidcount). [setUniqueSeed](#setuniqueseed) can also be used for
+ * testing or server side rendering to get the same results during hydration.
+ */
 export declare const generateUniqueId: () => string;
 /**
  * Generate a unique ID if one is not provided. The generated ID will be stable across renders
@@ -10,4 +19,23 @@ export declare const useUniqueId: (id?: string | undefined) => string;
  * TODO: Remove in major release
  */
 export declare const uniqueId: (id?: string | undefined) => string;
+/**
+ * Update the seed used by the id generator. This is useful for snapshot tests to help stabilize ids
+ * generated each run. This could also be used for server-side hydration - if you choose the same
+ * seed for server and set that on the client before components are rendered, the ids generated will
+ * be the same.
+ * @example
+ * // set in a script tag from the server
+ * setSeed(window.__ID_SEED); // set in a script tag from the server
+ *
+ * // jest setup
+ * before(() => {
+ *   setSeed('a')
+ * })
+ */
+export declare const setUniqueSeed: (s: string) => void;
+/**
+ * This should only be called for tests in an `beforeEach`
+ */
+export declare const resetUniqueIdCount: () => void;
 //# sourceMappingURL=useUniqueId.d.ts.map

package/ts3.5/dist/es6/popup/lib/hooks/index.d.ts

@@ -2,6 +2,7 @@ export * from './useAlwaysCloseOnOutsideClick';
 export * from './useAssistiveHideSiblings';
 export * from './useBringToTopOnClick';
 export * from './useCloseOnEscape';
+export * from './useCloseOnFullscreenExit';
 export * from './useCloseOnOutsideClick';
 export * from './useDisableBodyScroll';
 export * from './useFocusRedirect';
@@ -15,4 +16,6 @@ export * from './usePopupPopper';
 export * from './usePopupStack';
 export * from './usePopupTarget';
 export * from './useReturnFocus';
+export * from './useTransferOnFullscreenEnter';
+export * from './useTransferOnFullscreenExit';
 //# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/es6/popup/lib/hooks/useCloseOnFullscreenExit.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Closes the popup when fullscreen is exited. Entering/exiting fullscreen changes the context of
+ * the entire screen. This should be added to popup types that are very context sensitive like
+ * Tooltips.
+ */
+export declare const useCloseOnFullscreenExit: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
+//# sourceMappingURL=useCloseOnFullscreenExit.d.ts.map

package/ts3.5/dist/es6/popup/lib/hooks/useReturnFocus.d.ts

@@ -3,7 +3,7 @@
  * `useInitialFocus`. This should be used with `useFocusRedirect` or `useFocusTrap` for a complete
  * focus management solution.
  *
- * This should ble used on popup elements that use `useInitialFocus`.
+ * This should be used on popup elements that use `useInitialFocus`.
  */
 export declare const useReturnFocus: (model: import("../../../common").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
 //# sourceMappingURL=useReturnFocus.d.ts.map

package/ts3.5/dist/es6/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Makes the popup transfer to the fullscreen element when fullscreen is entered. Without this, the
+ * popup would seem to disappear because the popup container element is not a child of the
+ * fullscreen element.
+ *
+ * Don't use this in conjunction with a hook that will close the popup when entering fullscreen.
+ * Doing so would open the popup when the intention was to close it.
+ */
+export declare const useTransferOnFullscreenEnter: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
+//# sourceMappingURL=useTransferOnFullscreenEnter.d.ts.map

package/ts3.5/dist/es6/popup/lib/hooks/useTransferOnFullscreenExit.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Makes the popup transfer to fullscreen when fullscreen is exited. Without this hook, the popup
+ * would not operate correctly with other popups on the screen.
+ *
+ * Don't use this in conjunction with a hook that will close the popup when exiting fullscreen.
+ * Doing so would open the popup when the intention was to close it.
+ */
+export declare const useTransferOnFullscreenExit: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
+//# sourceMappingURL=useTransferOnFullscreenExit.d.ts.map

package/ts3.5/dist/es6/radio/lib/Radio.d.ts

@@ -13,7 +13,7 @@ export interface RadioProps extends Themeable {
     disabled?: boolean;
     /**
      * The HTML `id` of the underlying radio input element. This is required if `label` is defined as a non-empty string.
-     * @default A uniquely generated id by uuid()
+     * @default A uniquely generated id
      */
     id?: string;
     /**

package/ts3.5/dist/es6/switch/lib/Switch.d.ts

@@ -13,7 +13,7 @@ export interface SwitchProps extends Themeable {
     disabled?: boolean;
     /**
      * The HTML `id` of the underlying checkbox input element.
-     * @default A uniquely generated id by uuid()
+     * @default A uniquely generated id
      */
     id?: string;
     /**

package/ts3.5/dist/es6/tooltip/lib/Tooltip.d.ts

@@ -37,6 +37,14 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * @default 'label'
      */
     type?: 'label' | 'describe' | 'muted';
+    /**
+     * Amount of time (in ms) to delay before showing the tooltip
+     */
+    showDelay?: number;
+    /**
+     * Amount of time (in ms) to delay before hiding the tooltip
+     */
+    hideDelay?: number;
 }
-export declare const Tooltip: ({ type, placement, title, children, ...elemProps }: TooltipProps) => JSX.Element;
+export declare const Tooltip: ({ type, placement, title, children, showDelay, hideDelay, ...elemProps }: TooltipProps) => JSX.Element;
 //# sourceMappingURL=Tooltip.d.ts.map

package/ts3.5/dist/es6/tooltip/lib/useTooltip.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
  * Convenience hook for creating components with tooltips. It will return an object of properties to mix
  * into a target, popper and tooltip
  */
-export declare function useTooltip<T extends Element = Element>({ type, titleText, }?: {
+export declare function useTooltip<T extends Element = Element>({ type, titleText, showDelay, hideDelay, }?: {
     /**
      * Determines the tooltip type for accessibility.
      *
@@ -25,6 +25,14 @@ export declare function useTooltip<T extends Element = Element>({ type, titleTex
      * The content of the `aria-label` if `type` is `label.
      */
     titleText?: string;
+    /**
+     * Amount of time (in ms) to delay before showing the tooltip
+     */
+    showDelay?: number;
+    /**
+     * Amount of time (in ms) to delay before hiding the tooltip
+     */
+    hideDelay?: number;
 }): {
     /** Mix these properties into the target element. **Must be an Element** */
     targetProps: {