@box/blueprint-web 9.13.1 → 9.14.0

package/lib-esm/card-tooltip-v2/card-tooltip-v2.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import * as Ariakit from '@ariakit/react';
 import clsx from 'clsx';
-import { forwardRef, useLayoutEffect, useCallback } from 'react';
+import { forwardRef, useRef, useLayoutEffect, useCallback } from 'react';
 import { Card } from '../card/card.js';
 import { composeEventHandlers } from '../utils/composeEventHandlers.js';
 import styles from './card-tooltip-v2.module.js';
@@ -27,14 +27,16 @@ const CardTooltipV2 = /*#__PURE__*/forwardRef((props, ref) => {
     hideOnInteractOutside,
     placement = 'bottom',
     elevation = 'dropshadow-3',
+    addDelayOnFocus,
     ...contentProps
   } = props;
+  const SHOW_TIMEOUT = 300;
   const tooltipStore = Ariakit.useTooltipStore({
     open,
     setOpen,
     defaultOpen,
     placement,
-    showTimeout: 300,
+    showTimeout: SHOW_TIMEOUT,
     hideTimeout: 0,
     skipTimeout
   });
@@ -42,6 +44,7 @@ const CardTooltipV2 = /*#__PURE__*/forwardRef((props, ref) => {
   const contentId = Ariakit.useStoreState(tooltipStore, state => state.contentElement?.id);
   const mounted = Ariakit.useStoreState(tooltipStore, 'mounted');
   const isOpen = Ariakit.useStoreState(tooltipStore, 'open');
+  const focusTimeout = useRef(0);
   useLayoutEffect(() => {
     if (mounted && !isOpen) {
       // Make sure that tooltip disappears instantly after it is closed.
@@ -65,6 +68,18 @@ const CardTooltipV2 = /*#__PURE__*/forwardRef((props, ref) => {
     }
     return true;
   }, [hideOnInteractOutside, tooltipStore]);
+  const handleOnFocusVisibleWithDelay = event => {
+    event.preventDefault();
+    event.currentTarget.setAttribute('data-focus-visible', 'true');
+    focusTimeout.current = window.setTimeout(() => {
+      tooltipStore?.setAnchorElement(event.currentTarget);
+      tooltipStore?.show();
+    }, SHOW_TIMEOUT);
+  };
+  const handleBlur = event => {
+    event.currentTarget.removeAttribute('data-focus-visible');
+    window.clearTimeout(focusTimeout.current);
+  };
   return jsxs(Ariakit.TooltipProvider, {
     store: tooltipStore,
     children: [jsx(Ariakit.TooltipAnchor, {
@@ -72,7 +87,11 @@ const CardTooltipV2 = /*#__PURE__*/forwardRef((props, ref) => {
         'aria-describedby': contentId
       }),
       onClick: tooltipStore.hide,
-      render: children
+      render: children,
+      ...(addDelayOnFocus && {
+        onFocusVisible: handleOnFocusVisibleWithDelay,
+        onBlur: handleBlur
+      })
     }), jsx(Ariakit.Tooltip, {
       ...contentProps,
       ...(hideTooltipOnContentClick && {

package/lib-esm/card-tooltip-v2/types.d.ts

@@ -2,6 +2,11 @@ import { type TooltipProps, type TooltipStoreProps } from '@ariakit/react';
 import { type ReactElement, type ReactNode } from 'react';
 import { type CardProps } from '../card/types';
 export interface CardTooltipV2Props extends Omit<TooltipProps, 'content' | 'ref'> {
+    /**
+     * If true, the tooltip will be opened with delay when user focuses on the anchor. Be mindful that are accessibility concerns when using this prop. It should only be used in cases where the content is purely decorative and does not convey important information that needs to be accessible to screen readers or assistive technologies.
+     * @default false
+     */
+    addDelayOnFocus?: boolean;
     /** The anchor for the tooltip. */
     children: ReactElement;
     /** The content of the tooltip. */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "9.13.1",
+    "version": "9.14.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -62,7 +62,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "3a062f738a3b587842c3341c613e19ece483f879",
+    "gitHead": "0861d779ab8438a8210aa09902b92b389837462a",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {