@allxsmith/bestax-bulma 5.29.0 → 5.30.0

package/dist/esm/components/ContextMenu.js

@@ -0,0 +1,244 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, cloneElement } from 'react';
+import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+import { withSubComponents } from '../helpers/withSubComponents.js';
+import { Portal } from '../helpers/portal.js';
+import { useConfig } from '../helpers/Config.js';
+import { useClientLayoutEffect } from '../helpers/useClientLayoutEffect.js';
+import { getDeepestActiveElement, isEventInside } from '../helpers/shadowDom.js';
+import { warnOnce } from '../helpers/devWarnings.js';
+import { useContextMenuTrigger } from '../helpers/useContextMenuTrigger.js';
+import { useMenuKeys, enabledMenuItems, MENU_ITEM_SELECTOR, isEnabledMenuItem } from '../helpers/useMenuKeys.js';
+import { DropdownDivider, DropdownItem } from './Dropdown.js';
+
+/**
+ * Where the menu goes along one axis, from the point at `at`: after it when
+ * there's room, before it when there's room there instead, and otherwise
+ * moved in until it fits in `room`.
+ */
+function placeAlong(at, size, room) {
+    if (at + size <= room)
+        return { start: at, flip: false };
+    if (at - size >= 0)
+        return { start: at, flip: true };
+    return { start: Math.max(0, room - size), flip: false };
+}
+/** Runs the trigger's own handler, then the context menu's. */
+function chain(own, ours) {
+    return event => {
+        own?.(event);
+        ours(event);
+    };
+}
+/**
+ * The `ContextMenu` component opens a menu of actions where you right-click an element, such as a table row or a card, or long press it on a touch screen.
+ *
+ * Shift+F10 and the context menu key open it too, where the browser fires
+ * `contextmenu` for them, which Windows and Linux do. The menu is Dropdown's
+ * markup, portaled into the `portalContainer` a `ConfigProvider` sets, or
+ * the end of the trigger's own document's `<body>`, so it never has server
+ * markup. It opens below and to the right of the point, flips above or to
+ * the left where there's no room, moves in where it fits neither way, and
+ * scrolls inside when it's taller than the viewport. It doesn't follow the
+ * trigger, since scrolling closes it. Inside a `Modal` or a shadow root,
+ * point `portalContainer` inside it, so screen readers that honor
+ * `aria-modal` reach the menu and the shadow root's styles apply.
+ *
+ * Opening moves focus to the first enabled item. The arrow keys, Home, End
+ * and typing move between items, and Enter and Space activate one. Escape,
+ * Tab, an item, a press outside, scrolling, resizing and the window losing
+ * focus close it, handing focus back to what had it unless an item moved it
+ * somewhere else. For a menu opened from a button use `Dropdown`.
+ *
+ * @function
+ * @param {ContextMenuProps} props - Props for the ContextMenu component.
+ * @returns {JSX.Element} The trigger, and the menu while open.
+ *
+ * @example
+ * <ContextMenu
+ *   aria-label="Actions for report.pdf"
+ *   trigger={<Box>report.pdf</Box>}
+ * >
+ *   <ContextMenu.Item as="button">Rename</ContextMenu.Item>
+ *   <ContextMenu.Divider />
+ *   <ContextMenu.Item as="button">Delete</ContextMenu.Item>
+ * </ContextMenu>
+ */
+const ContextMenuComponent = ({ trigger, children, onOpenChange, closeOnClick = true, disabled = false, className, onKeyDown, onClick, onContextMenu, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const { portalContainer } = useConfig();
+    const [menu, setMenu] = useState(null);
+    // Turning `disabled` on closes it.
+    if (disabled && menu)
+        setMenu(null);
+    const open = menu !== null;
+    const doc = menu?.doc;
+    const placed = menu?.placed;
+    const boxRef = useRef(null);
+    const menuRef = useRef(null);
+    const openerRef = useRef(null);
+    const reportedRef = useRef(false);
+    const menuKeys = useMenuKeys();
+    const named = Boolean(props['aria-label'] || props['aria-labelledby']);
+    const handlers = useContextMenuTrigger({
+        disabled,
+        onOpen: (point, triggerNode) => {
+            const ownerDoc = triggerNode.ownerDocument;
+            openerRef.current = getDeepestActiveElement(ownerDoc);
+            setMenu({ point, doc: ownerDoc });
+        },
+    });
+    // Measured once per opening, before it paints, against what a fixed box
+    // resolves against: the root element's client area, which leaves out a
+    // classic scrollbar. `useAnchoredPosition` and Tooltip read innerWidth and
+    // innerHeight, which count it. A menu pinned to the viewport's edge would
+    // sit under the scrollbar by that much, so this reads the narrower box.
+    useClientLayoutEffect(() => {
+        const menuNode = menuRef.current;
+        if (!menu || menu.placed || !menuNode)
+            return;
+        const root = menuNode.ownerDocument.documentElement;
+        const { width, height } = menuNode.getBoundingClientRect();
+        const x = placeAlong(menu.point.x, width, root.clientWidth);
+        const y = placeAlong(menu.point.y, height, root.clientHeight);
+        setMenu({
+            ...menu,
+            placed: { left: x.start, top: y.start, right: x.flip, up: y.flip },
+        });
+    }, [menu]);
+    const isPlaced = Boolean(placed);
+    // What closes it while it's open, and focus back on closing. Nothing
+    // listens while it's closed.
+    useEffect(() => {
+        const box = boxRef.current;
+        const menuNode = menuRef.current;
+        if (!doc || !box || !menuNode)
+            return undefined;
+        const view = doc.defaultView;
+        // What had focus when it opened. This runs once per opening, so opening
+        // again at a new point while it's open keeps it.
+        const opener = openerRef.current;
+        const close = () => setMenu(null);
+        const closeOutside = (event) => {
+            if (!isEventInside(event, box))
+                close();
+        };
+        doc.addEventListener('pointerdown', closeOutside, true);
+        view.addEventListener('resize', close);
+        view.addEventListener('blur', close);
+        return () => {
+            doc.removeEventListener('pointerdown', closeOutside, true);
+            view.removeEventListener('resize', close);
+            view.removeEventListener('blur', close);
+            // Back to what had focus while the menu still has it, or it dropped to
+            // <body> when the menu left. An item that put it somewhere else, such
+            // as a Modal or a rename field, keeps it there.
+            const now = getDeepestActiveElement(doc);
+            if (!now || now === doc.body || menuNode.contains(now))
+                opener?.focus();
+        };
+    }, [doc]);
+    // Focus in, and closing on scroll, once it's placed. Placed, it's inside
+    // the viewport, so its first item has nothing to scroll into view, and
+    // `preventScroll` makes sure: a scroll the focus caused would close it as
+    // it opened. Opening again at a new point places it again, and leaves
+    // focus where it is in the menu.
+    useEffect(() => {
+        const box = boxRef.current;
+        const menuNode = menuRef.current;
+        if (!doc || !isPlaced || !box || !menuNode)
+            return undefined;
+        if (!menuNode.contains(getDeepestActiveElement(doc))) {
+            menuKeys.reset();
+            (enabledMenuItems(menuNode)[0] ?? menuNode).focus({
+                preventScroll: true,
+            });
+        }
+        const closeOutside = (event) => {
+            if (!isEventInside(event, box))
+                setMenu(null);
+        };
+        doc.addEventListener('scroll', closeOutside, true);
+        return () => doc.removeEventListener('scroll', closeOutside, true);
+    }, [doc, isPlaced, menuKeys]);
+    // Before paint, so what the caller does with it, such as highlighting the
+    // row, shows with the menu rather than a frame behind it.
+    useClientLayoutEffect(() => {
+        if (open === reportedRef.current)
+            return;
+        reportedRef.current = open;
+        onOpenChange?.(open);
+    });
+    useEffect(() => {
+        if (open && !named) {
+            warnOnce('ContextMenu:unnamed', '[bestax-bulma] <ContextMenu> opened a menu with no accessible ' +
+                'name. Pass aria-label or aria-labelledby.');
+        }
+    }, [open, named]);
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        // The menu has the keyboard while focus is in it. React brings its keys
+        // up the tree to wherever the ContextMenu sits, where a table that moves
+        // between rows on the arrow keys, or a Popover or a Modal waiting for
+        // Escape, would take them too.
+        event.stopPropagation();
+        if (event.key === 'Escape' || event.key === 'Tab') {
+            // Tab would go on from the end of <body>, past the rest of the page.
+            event.preventDefault();
+            setMenu(null);
+            return;
+        }
+        menuKeys.onKeyDown(event);
+    };
+    const handleClick = (event) => {
+        onClick?.(event);
+        if (!closeOnClick)
+            return;
+        const item = event.target.closest(MENU_ITEM_SELECTOR);
+        if (item && isEnabledMenuItem(item))
+            setMenu(null);
+    };
+    const handleContextMenu = (event) => {
+        onContextMenu?.(event);
+        // No other menu over this one: not the browser's, and not a trigger's
+        // that React brings the event up to.
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    const own = trigger.props;
+    const triggerClass = usePrefixedClassNames('context-menu');
+    const clonedTrigger = cloneElement(trigger, {
+        className: classNames(own.className, !disabled && triggerClass) || undefined,
+        onContextMenu: chain(own.onContextMenu, handlers.onContextMenu),
+        onPointerDown: chain(own.onPointerDown, handlers.onPointerDown),
+        onPointerMove: chain(own.onPointerMove, handlers.onPointerMove),
+        onPointerUp: chain(own.onPointerUp, handlers.onPointerUp),
+        onPointerCancel: chain(own.onPointerCancel, handlers.onPointerCancel),
+        onTouchEnd: chain(own.onTouchEnd, handlers.onTouchEnd),
+    });
+    const boxClasses = usePrefixedClassNames('context-menu-content', 'dropdown', {
+        'is-active': true,
+        'is-up': placed?.up,
+        'is-right': placed?.right,
+    });
+    const menuClasses = classNames(usePrefixedClassNames('dropdown-menu'), bulmaHelperClasses, className);
+    const contentClasses = usePrefixedClassNames('dropdown-content');
+    return (jsxs(Fragment, { children: [clonedTrigger, menu && (jsx(Portal, { container: portalContainer || menu.doc.body, children: jsx("div", { ref: boxRef, className: boxClasses, style: {
+                        top: placed?.top ?? menu.point.y,
+                        left: placed?.left ?? menu.point.x,
+                    }, children: jsx("div", { ...rest, ref: menuRef, role: "menu", tabIndex: -1, className: menuClasses, onKeyDown: handleKeyDown, onClick: handleClick, onContextMenu: handleContextMenu, children: jsx("div", { className: contentClasses, children: children }) }) }) }))] }));
+};
+/**
+ * ContextMenu with Item and Divider sub-components, which are `Dropdown.Item`
+ * and `Dropdown.Divider`, so items written for a Dropdown work here
+ * unchanged.
+ */
+const ContextMenu = withSubComponents(ContextMenuComponent, {
+    Item: DropdownItem,
+    Divider: DropdownDivider,
+}, 'ContextMenu');
+
+export { ContextMenu };
+//# sourceMappingURL=ContextMenu.js.map

package/dist/esm/components/ContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.js","sources":["../../../src/components/ContextMenu.tsx"],"sourcesContent":["import React, { cloneElement, useEffect, useRef, useState } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { Portal } from '../helpers/portal';\nimport { useConfig } from '../helpers/Config';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\nimport { getDeepestActiveElement, isEventInside } from '../helpers/shadowDom';\nimport { warnOnce } from '../helpers/devWarnings';\nimport {\n  useContextMenuTrigger,\n  type ContextMenuPoint,\n  type ContextMenuTriggerHandlers,\n} from '../helpers/useContextMenuTrigger';\nimport {\n  enabledMenuItems,\n  isEnabledMenuItem,\n  MENU_ITEM_SELECTOR,\n  useMenuKeys,\n} from '../helpers/useMenuKeys';\nimport { DropdownDivider, DropdownItem } from './Dropdown';\n\n/**\n * Props for the ContextMenu component. `className`, `id`, `aria-label`, the\n * other HTML attributes and the helper props land on the menu\n * (`role=\"menu\"`). The trigger keeps its own.\n * @extraProp {string} [aria-label] - The menu's accessible name, such as \"Actions for report.pdf\". There's no button to borrow a name from, so pass this or `aria-labelledby`, and a development build warns when the menu opens with neither.\n * @extraProp {string} [className] - Additional classes for the menu (`role=\"menu\"`). The trigger keeps its own.\n */\nexport interface ContextMenuProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'children'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /**\n   * The element a right-click, Shift+F10, the context menu key or a long\n   * press opens the menu from: a table row, a card, an image. It's cloned,\n   * not wrapped, so a row stays a row, which means it has to be a single\n   * element that passes `className` and the `onContextMenu`,\n   * `onPointerDown`, `onPointerMove`, `onPointerUp`, `onPointerCancel` and\n   * `onTouchEnd` handlers to its DOM node. Its own handlers for those run\n   * first, and one that calls `preventDefault()` on `contextmenu` keeps the\n   * menu closed. A `ContextMenu` inside it opens instead of this one.\n   *\n   * It gets no ARIA and no tab stop, since it can be any element and a\n   * right-click isn't an activation. Keyboard users reach it through\n   * something focusable inside it, such as the row's own `Dropdown` button,\n   * or a `tabIndex={0}` you give it, and press Shift+F10 or the context menu\n   * key there. It gets `-webkit-touch-callout: none`, so iOS doesn't put its\n   * own callout for a link or an image over the menu. A long press still\n   * selects text the way it does anywhere, so give a region where it\n   * shouldn't `interaction=\"unselectable\"`.\n   */\n  trigger: React.ReactElement;\n  /**\n   * The menu's items: `ContextMenu.Item` and `ContextMenu.Divider`, the same\n   * components as `Dropdown.Item` and `Dropdown.Divider`. Every action in it\n   * needs a visible way in as well, such as a `Dropdown` on the same row:\n   * nothing tells a screen reader user the menu is there, and on macOS only\n   * VoiceOver opens it from the keyboard.\n   */\n  children: React.ReactNode;\n  /**\n   * Called with `true` when the menu opens and `false` when it closes,\n   * whatever closed it, such as for highlighting the row whose menu is open.\n   * Nothing fires after ContextMenu unmounts. There's no `open` prop to go\n   * with it: a menu opened from code has no point to open at.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Close the menu when an item is clicked, or activated with Enter or\n   * Space. A click on a divider or between items leaves it open either way.\n   */\n  closeOnClick?: boolean;\n  /**\n   * Leave the trigger to the browser: a right-click shows the browser's own\n   * menu, a long press does what it does anywhere, and an open menu closes.\n   */\n  disabled?: boolean;\n}\n\n/** Where the menu goes once it's measured. */\ninterface Placement {\n  /** The box's corner in the viewport, which the menu hangs from. */\n  top: number;\n  left: number;\n  /** The menu sits above the box rather than below it. */\n  up: boolean;\n  /** The menu sits to the left of the box rather than to its right. */\n  right: boolean;\n}\n\n/** An open menu. */\ninterface OpenMenu {\n  point: ContextMenuPoint;\n  /** The trigger's document, where presses and scrolling are watched. */\n  doc: Document;\n  /** Unset until the menu is measured, which happens before it paints. */\n  placed?: Placement;\n}\n\n/**\n * Where the menu goes along one axis, from the point at `at`: after it when\n * there's room, before it when there's room there instead, and otherwise\n * moved in until it fits in `room`.\n */\nfunction placeAlong(\n  at: number,\n  size: number,\n  room: number\n): { start: number; flip: boolean } {\n  if (at + size <= room) return { start: at, flip: false };\n  if (at - size >= 0) return { start: at, flip: true };\n  return { start: Math.max(0, room - size), flip: false };\n}\n\n/** Runs the trigger's own handler, then the context menu's. */\nfunction chain<E>(\n  own: ((event: E) => void) | undefined,\n  ours: (event: E) => void\n): (event: E) => void {\n  return event => {\n    own?.(event);\n    ours(event);\n  };\n}\n\n/**\n * The `ContextMenu` component opens a menu of actions where you right-click an element, such as a table row or a card, or long press it on a touch screen.\n *\n * Shift+F10 and the context menu key open it too, where the browser fires\n * `contextmenu` for them, which Windows and Linux do. The menu is Dropdown's\n * markup, portaled into the `portalContainer` a `ConfigProvider` sets, or\n * the end of the trigger's own document's `<body>`, so it never has server\n * markup. It opens below and to the right of the point, flips above or to\n * the left where there's no room, moves in where it fits neither way, and\n * scrolls inside when it's taller than the viewport. It doesn't follow the\n * trigger, since scrolling closes it. Inside a `Modal` or a shadow root,\n * point `portalContainer` inside it, so screen readers that honor\n * `aria-modal` reach the menu and the shadow root's styles apply.\n *\n * Opening moves focus to the first enabled item. The arrow keys, Home, End\n * and typing move between items, and Enter and Space activate one. Escape,\n * Tab, an item, a press outside, scrolling, resizing and the window losing\n * focus close it, handing focus back to what had it unless an item moved it\n * somewhere else. For a menu opened from a button use `Dropdown`.\n *\n * @function\n * @param {ContextMenuProps} props - Props for the ContextMenu component.\n * @returns {JSX.Element} The trigger, and the menu while open.\n *\n * @example\n * <ContextMenu\n *   aria-label=\"Actions for report.pdf\"\n *   trigger={<Box>report.pdf</Box>}\n * >\n *   <ContextMenu.Item as=\"button\">Rename</ContextMenu.Item>\n *   <ContextMenu.Divider />\n *   <ContextMenu.Item as=\"button\">Delete</ContextMenu.Item>\n * </ContextMenu>\n */\nconst ContextMenuComponent: React.FC<ContextMenuProps> = ({\n  trigger,\n  children,\n  onOpenChange,\n  closeOnClick = true,\n  disabled = false,\n  className,\n  onKeyDown,\n  onClick,\n  onContextMenu,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n  const { portalContainer } = useConfig();\n  const [menu, setMenu] = useState<OpenMenu | null>(null);\n  // Turning `disabled` on closes it.\n  if (disabled && menu) setMenu(null);\n  const open = menu !== null;\n  const doc = menu?.doc;\n  const placed = menu?.placed;\n\n  const boxRef = useRef<HTMLDivElement>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const openerRef = useRef<Element | null>(null);\n  const reportedRef = useRef(false);\n  const menuKeys = useMenuKeys();\n  const named = Boolean(props['aria-label'] || props['aria-labelledby']);\n\n  const handlers = useContextMenuTrigger({\n    disabled,\n    onOpen: (point, triggerNode) => {\n      const ownerDoc = triggerNode.ownerDocument;\n      openerRef.current = getDeepestActiveElement(ownerDoc);\n      setMenu({ point, doc: ownerDoc });\n    },\n  });\n\n  // Measured once per opening, before it paints, against what a fixed box\n  // resolves against: the root element's client area, which leaves out a\n  // classic scrollbar. `useAnchoredPosition` and Tooltip read innerWidth and\n  // innerHeight, which count it. A menu pinned to the viewport's edge would\n  // sit under the scrollbar by that much, so this reads the narrower box.\n  useClientLayoutEffect(() => {\n    const menuNode = menuRef.current;\n    if (!menu || menu.placed || !menuNode) return;\n    const root = menuNode.ownerDocument.documentElement;\n    const { width, height } = menuNode.getBoundingClientRect();\n    const x = placeAlong(menu.point.x, width, root.clientWidth);\n    const y = placeAlong(menu.point.y, height, root.clientHeight);\n    setMenu({\n      ...menu,\n      placed: { left: x.start, top: y.start, right: x.flip, up: y.flip },\n    });\n  }, [menu]);\n  const isPlaced = Boolean(placed);\n\n  // What closes it while it's open, and focus back on closing. Nothing\n  // listens while it's closed.\n  useEffect(() => {\n    const box = boxRef.current;\n    const menuNode = menuRef.current;\n    if (!doc || !box || !menuNode) return undefined;\n    const view = doc.defaultView as Window;\n    // What had focus when it opened. This runs once per opening, so opening\n    // again at a new point while it's open keeps it.\n    const opener = openerRef.current as HTMLElement | null;\n    const close = () => setMenu(null);\n    const closeOutside = (event: Event) => {\n      if (!isEventInside(event, box)) close();\n    };\n    doc.addEventListener('pointerdown', closeOutside, true);\n    view.addEventListener('resize', close);\n    view.addEventListener('blur', close);\n    return () => {\n      doc.removeEventListener('pointerdown', closeOutside, true);\n      view.removeEventListener('resize', close);\n      view.removeEventListener('blur', close);\n      // Back to what had focus while the menu still has it, or it dropped to\n      // <body> when the menu left. An item that put it somewhere else, such\n      // as a Modal or a rename field, keeps it there.\n      const now = getDeepestActiveElement(doc);\n      if (!now || now === doc.body || menuNode.contains(now)) opener?.focus();\n    };\n  }, [doc]);\n\n  // Focus in, and closing on scroll, once it's placed. Placed, it's inside\n  // the viewport, so its first item has nothing to scroll into view, and\n  // `preventScroll` makes sure: a scroll the focus caused would close it as\n  // it opened. Opening again at a new point places it again, and leaves\n  // focus where it is in the menu.\n  useEffect(() => {\n    const box = boxRef.current;\n    const menuNode = menuRef.current;\n    if (!doc || !isPlaced || !box || !menuNode) return undefined;\n    if (!menuNode.contains(getDeepestActiveElement(doc))) {\n      menuKeys.reset();\n      (enabledMenuItems(menuNode)[0] ?? menuNode).focus({\n        preventScroll: true,\n      });\n    }\n    const closeOutside = (event: Event) => {\n      if (!isEventInside(event, box)) setMenu(null);\n    };\n    doc.addEventListener('scroll', closeOutside, true);\n    return () => doc.removeEventListener('scroll', closeOutside, true);\n  }, [doc, isPlaced, menuKeys]);\n\n  // Before paint, so what the caller does with it, such as highlighting the\n  // row, shows with the menu rather than a frame behind it.\n  useClientLayoutEffect(() => {\n    if (open === reportedRef.current) return;\n    reportedRef.current = open;\n    onOpenChange?.(open);\n  });\n\n  useEffect(() => {\n    if (open && !named) {\n      warnOnce(\n        'ContextMenu:unnamed',\n        '[bestax-bulma] <ContextMenu> opened a menu with no accessible ' +\n          'name. Pass aria-label or aria-labelledby.'\n      );\n    }\n  }, [open, named]);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    // The menu has the keyboard while focus is in it. React brings its keys\n    // up the tree to wherever the ContextMenu sits, where a table that moves\n    // between rows on the arrow keys, or a Popover or a Modal waiting for\n    // Escape, would take them too.\n    event.stopPropagation();\n    if (event.key === 'Escape' || event.key === 'Tab') {\n      // Tab would go on from the end of <body>, past the rest of the page.\n      event.preventDefault();\n      setMenu(null);\n      return;\n    }\n    menuKeys.onKeyDown(event);\n  };\n\n  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    onClick?.(event);\n    if (!closeOnClick) return;\n    const item = (event.target as Element).closest(MENU_ITEM_SELECTOR);\n    if (item && isEnabledMenuItem(item)) setMenu(null);\n  };\n\n  const handleContextMenu = (event: React.MouseEvent<HTMLDivElement>) => {\n    onContextMenu?.(event);\n    // No other menu over this one: not the browser's, and not a trigger's\n    // that React brings the event up to.\n    event.preventDefault();\n    event.stopPropagation();\n  };\n\n  const own = trigger.props as Partial<ContextMenuTriggerHandlers> & {\n    className?: string;\n  };\n  const triggerClass = usePrefixedClassNames('context-menu');\n  const clonedTrigger = cloneElement(\n    trigger as React.ReactElement<Record<string, unknown>>,\n    {\n      className:\n        classNames(own.className, !disabled && triggerClass) || undefined,\n      onContextMenu: chain(own.onContextMenu, handlers.onContextMenu),\n      onPointerDown: chain(own.onPointerDown, handlers.onPointerDown),\n      onPointerMove: chain(own.onPointerMove, handlers.onPointerMove),\n      onPointerUp: chain(own.onPointerUp, handlers.onPointerUp),\n      onPointerCancel: chain(own.onPointerCancel, handlers.onPointerCancel),\n      onTouchEnd: chain(own.onTouchEnd, handlers.onTouchEnd),\n    }\n  );\n\n  const boxClasses = usePrefixedClassNames('context-menu-content', 'dropdown', {\n    'is-active': true,\n    'is-up': placed?.up,\n    'is-right': placed?.right,\n  });\n  const menuClasses = classNames(\n    usePrefixedClassNames('dropdown-menu'),\n    bulmaHelperClasses,\n    className\n  );\n  const contentClasses = usePrefixedClassNames('dropdown-content');\n\n  return (\n    <>\n      {clonedTrigger}\n      {menu && (\n        <Portal container={portalContainer || menu.doc.body}>\n          <div\n            ref={boxRef}\n            className={boxClasses}\n            style={{\n              top: placed?.top ?? menu.point.y,\n              left: placed?.left ?? menu.point.x,\n            }}\n          >\n            <div\n              {...rest}\n              ref={menuRef}\n              role=\"menu\"\n              tabIndex={-1}\n              className={menuClasses}\n              onKeyDown={handleKeyDown}\n              onClick={handleClick}\n              onContextMenu={handleContextMenu}\n            >\n              <div className={contentClasses}>{children}</div>\n            </div>\n          </div>\n        </Portal>\n      )}\n    </>\n  );\n};\n\n/**\n * ContextMenu with Item and Divider sub-components, which are `Dropdown.Item`\n * and `Dropdown.Divider`, so items written for a Dropdown work here\n * unchanged.\n */\nexport const ContextMenu = withSubComponents(\n  ContextMenuComponent,\n  {\n    Item: DropdownItem,\n    Divider: DropdownDivider,\n  },\n  'ContextMenu'\n);\n\nexport default ContextMenu;\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}

package/dist/esm/components/HoverCard.js

@@ -6,17 +6,10 @@ import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
 import { Portal } from '../helpers/portal.js';
 import { useIsHydrated } from '../helpers/useIsHydrated.js';
 import { useAnchoredPosition, marginGap } from '../helpers/useAnchoredPosition.js';
-import { useHoverOpen } from '../helpers/useHoverOpen.js';
+import { useHoverOpen, chain } from '../helpers/useHoverOpen.js';
 import { isTabbableKind } from '../helpers/useFocusTrap.js';
 import { isDev, warnOnce } from '../helpers/devWarnings.js';
 
-/** Runs the caller's handler on the wrapper, then the hover card's. */
-function chain(own, ours) {
-    return event => {
-        own?.(event);
-        ours(event);
-    };
-}
 /**
  * The `HoverCard` component shows a card previewing what's behind a link or a button while the pointer rests on it or keyboard focus is on it.
  *
@@ -41,7 +34,7 @@ function chain(own, ours) {
  */
 const HoverCard = ({ trigger, children, open: controlledOpen, defaultOpen = false, onOpenChange, openDelay = 600, closeDelay = 300, position = 'bottom-left', appendToBody = false, openOnTap = false, className, contentClassName, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const { onPointerEnter, onPointerLeave, onPointerDown, onPointerUp, onFocus, onBlur, ...attrs } = rest;
+    const { onPointerEnter, onPointerOver, onPointerLeave, onPointerDown, onPointerUp, onFocus, onBlur, ...attrs } = rest;
     const rootRef = useRef(null);
     const cardRef = useRef(null);
     const cardId = `${useId()}-card`;
@@ -114,7 +107,7 @@ const HoverCard = ({ trigger, children, open: controlledOpen, defaultOpen = fals
         [`is-${resolved.position}`]: true,
         'is-portal': appendToBody,
     }), contentClassName);
-    return (jsxs("span", { className: rootClasses, ...attrs, onPointerEnter: chain(onPointerEnter, hover.onPointerEnter), onPointerLeave: chain(onPointerLeave, hover.onPointerLeave), onFocus: chain(onFocus, hover.onFocus), onBlur: chain(onBlur, hover.onBlur), onPointerDown: chain(onPointerDown, hover.onPointerDown), onPointerUp: chain(onPointerUp, hover.onPointerUp), ref: rootRef, children: [clonedTrigger, isOpen && (jsx(Portal, { disabled: !appendToBody, children: jsx("div", { ref: cardRef, id: cardId, className: cardClasses, style: appendToBody
+    return (jsxs("span", { className: rootClasses, ...attrs, onPointerEnter: chain(onPointerEnter, hover.onPointerEnter), onPointerOver: chain(onPointerOver, hover.onPointerOver), onPointerLeave: chain(onPointerLeave, hover.onPointerLeave), onFocus: chain(onFocus, hover.onFocus), onBlur: chain(onBlur, hover.onBlur), onPointerDown: chain(onPointerDown, hover.onPointerDown), onPointerUp: chain(onPointerUp, hover.onPointerUp), ref: rootRef, children: [clonedTrigger, isOpen && (jsx(Portal, { disabled: !appendToBody, children: jsx("div", { ref: cardRef, id: cardId, className: cardClasses, style: appendToBody
                         ? {
                             position: 'fixed',
                             top: resolved.top,

package/dist/esm/components/HoverCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.js","sources":["../../../src/components/HoverCard.tsx"],"sourcesContent":["import React, {\n  cloneElement,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { Portal } from '../helpers/portal';\nimport { useIsHydrated } from '../helpers/useIsHydrated';\nimport { marginGap, useAnchoredPosition } from '../helpers/useAnchoredPosition';\nimport { useHoverOpen } from '../helpers/useHoverOpen';\nimport { isTabbableKind } from '../helpers/useFocusTrap';\nimport { isDev, warnOnce } from '../helpers/devWarnings';\nimport type { PickerPosition } from '../form/_pickerInternals/pickerTypes';\n\n/**\n * Where the card opens against its trigger: below (`bottom-*`) or above\n * (`top-*`), lined up with the trigger's left or right edge. `auto` picks the\n * one that keeps the card in the viewport, preferring below and lined up on\n * the left. The same union `Popover` and the date and time pickers take.\n */\nexport type HoverCardPosition = PickerPosition;\n\n/**\n * Props for the HoverCard component. `className`, `id`, the other HTML\n * attributes and the helper props land on the `span` around the trigger, not\n * on the card; `contentClassName` reaches the card.\n * @extraProp {string} [className] - Additional classes for the `span` around the trigger. The card takes `contentClassName`.\n */\nexport interface HoverCardProps\n  extends\n    Omit<React.HTMLAttributes<HTMLSpanElement>, 'color' | 'children'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /**\n   * The element the card previews, such as a link or a `Button`. The element\n   * itself has to take focus, so keyboard users can open the card too: a\n   * link inside a `<span>` doesn't do, since focus comes back to the trigger\n   * and its ARIA is on it. HoverCard gives it no role and no tab stop, since\n   * it can't know what the element is, and a development build warns when\n   * it can't take focus: use a link or a button, or give the element\n   * `tabIndex={0}`. A disabled button can't take focus either. HoverCard adds\n   * `aria-expanded` and `aria-controls`, both naming the card only while it\n   * is on the page, so it has to be a single element that passes those to\n   * its DOM node. Its own click and keys stay its own, and the card doesn't\n   * toggle on them, except Escape while the card is open, which closes the\n   * card before the trigger sees it.\n   */\n  trigger: React.ReactElement;\n  /**\n   * The card's content: a preview whose links and buttons are fine, but not a\n   * form, which belongs in a `Popover`. The card pads itself, so content goes\n   * straight in.\n   */\n  children?: React.ReactNode;\n  /**\n   * Controlled open state. When set, hover, focus and Escape only report\n   * through `onOpenChange`, so an action inside the card can close it. While\n   * the card is open, Escape is reported, and when focus is in the card, on\n   * its trigger or nowhere, the key stops there even if you keep the card\n   * open, so a `Modal` around it doesn't close from the keyboard until the\n   * card does.\n   */\n  open?: boolean;\n  /**\n   * Initial open state when uncontrolled. A card that starts open stays open\n   * until the pointer or focus has been and gone, or Escape closes it.\n   * @defaultValue false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Called with the state asked for: when `openDelay` or `closeDelay` runs\n   * out, and right away on Escape. Fires in both controlled and uncontrolled\n   * use. An Escape it reports stops at the card when focus is in the card,\n   * on its trigger or nowhere, so nothing around it sees that key. With\n   * focus anywhere else, the card still closes and the key goes on to\n   * whatever has focus.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * How long the pointer or keyboard focus waits on the trigger before the\n   * card opens, in milliseconds.\n   * @defaultValue 600\n   */\n  openDelay?: number;\n  /**\n   * How long the card stays after the pointer and focus have left the trigger\n   * and the card, in milliseconds. It is the time the pointer has to cross\n   * the gap between the trigger and the card: with `0` the card closes as the\n   * pointer leaves the trigger, before the pointer can reach it.\n   * @defaultValue 300\n   */\n  closeDelay?: number;\n  /**\n   * Where the card opens against the trigger.\n   * @defaultValue 'bottom-left'\n   */\n  position?: HoverCardPosition;\n  /**\n   * Render the card through `Portal`, into the `portalContainer` a\n   * `ConfigProvider` sets, `document.body` by default, fixed to the viewport,\n   * so an ancestor's `overflow`, `transform` or stacking context can't clip\n   * it. A trigger in running text needs it too, since the card's block\n   * content can't sit inside a `<p>`. The card then shows from the commit\n   * after hydration, never in server markup, and it sits in the Tab order\n   * where its container is. At the end of `<body>`, the default, Tab reaches\n   * it only after the rest of the page, and focus leaving the trigger on the\n   * way closes it, so keyboard users can open it, read it and close it with\n   * Escape, and whatever it links to has to be reachable from the page as\n   * well. It is measured against the trigger when it opens and on resize and\n   * scroll, so it doesn't follow content that changes size while it is open.\n   * Theming variables set on an ancestor of the trigger reach it only when its\n   * container is inside that ancestor.\n   * @defaultValue false\n   */\n  appendToBody?: boolean;\n  /**\n   * Open the card with a tap on a touch screen. Touch has no hover, so\n   * without this a phone or tablet never opens the card. With it, a tap on\n   * the trigger opens the card at once, and it stays until a second tap on\n   * the trigger, a tap outside the trigger and the card, or Escape. The tap\n   * still does whatever the trigger does, so turn this on only for a trigger\n   * with no tap action of its own, such as a `Button` with no `onClick`: on\n   * a link, the first tap would follow the link rather than show the card.\n   * Mouse and pen work the same either way.\n   * @defaultValue false\n   */\n  openOnTap?: boolean;\n  /** Additional classes for the card (`.hover-card-content`). */\n  contentClassName?: string;\n}\n\n/** Runs the caller's handler on the wrapper, then the hover card's. */\nfunction chain<E>(\n  own: ((event: E) => void) | undefined,\n  ours: (event: E) => void\n): (event: E) => void {\n  return event => {\n    own?.(event);\n    ours(event);\n  };\n}\n\n/**\n * The `HoverCard` component shows a card previewing what's behind a link or a button while the pointer rests on it or keyboard focus is on it.\n *\n * Nothing moves focus when the card opens, and nothing traps it. In place,\n * the card comes right after the trigger, so Tab goes from the trigger into\n * its links and tabbing past them closes it. The pointer can move onto the\n * card, Escape closes it from anywhere, and by default touch doesn't open it,\n * so tapping the trigger just does what the trigger does. `openOnTap` opens\n * it with a tap, for a trigger with no tap action of its own. For hints with nothing to\n * click use `Tooltip`, and for content opened on purpose, such as a form,\n * use `Popover`.\n *\n * @function\n * @param {HoverCardProps} props - Props for the HoverCard component.\n * @returns {JSX.Element} The trigger in its wrapper, and the card while open.\n *\n * @example\n * <HoverCard trigger={<a href=\"/people/ada\">Ada Lovelace</a>}>\n *   <Title as=\"p\" size=\"6\">Ada Lovelace</Title>\n *   <SubTitle as=\"p\" size=\"6\">Analytical Engine team</SubTitle>\n * </HoverCard>\n */\nexport const HoverCard: React.FC<HoverCardProps> = ({\n  trigger,\n  children,\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  openDelay = 600,\n  closeDelay = 300,\n  position = 'bottom-left',\n  appendToBody = false,\n  openOnTap = false,\n  className,\n  contentClassName,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n  const {\n    onPointerEnter,\n    onPointerLeave,\n    onPointerDown,\n    onPointerUp,\n    onFocus,\n    onBlur,\n    ...attrs\n  } = rest;\n  const rootRef = useRef<HTMLSpanElement>(null);\n  const cardRef = useRef<HTMLDivElement>(null);\n  const cardId = `${useId()}-card`;\n\n  const isControlled = controlledOpen !== undefined;\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isOpen = controlledOpen ?? internalOpen;\n\n  const requestOpen = useCallback(\n    (next: boolean) => {\n      onOpenChange?.(next);\n      if (!isControlled) setInternalOpen(next);\n    },\n    [isControlled, onOpenChange]\n  );\n\n  // A portaled card has no server markup, so it only exists from the commit\n  // after hydration, and nothing measures it before then.\n  const hydrated = useIsHydrated();\n  const cardMounted = isOpen && (hydrated || !appendToBody);\n\n  const resolved = useAnchoredPosition(rootRef, cardRef, {\n    active: cardMounted,\n    position,\n    fixed: appendToBody,\n    // The gap comes from `--bulma-hover-card-offset` in the stylesheet, so\n    // the coordinates leave it out and `auto` reads it off the card.\n    offset: 0,\n    styledGap: marginGap,\n  });\n\n  // The trigger renders first inside the wrapper. Read when needed rather\n  // than held, so a trigger that remounted is still the one found.\n  const triggerRef = useMemo(\n    () => ({\n      get current() {\n        const first = (rootRef.current as HTMLSpanElement).firstElementChild;\n        return first && first !== cardRef.current\n          ? (first as HTMLElement)\n          : null;\n      },\n    }),\n    []\n  );\n\n  const hover = useHoverOpen({\n    open: isOpen,\n    onOpenChange: requestOpen,\n    openDelay,\n    closeDelay,\n    triggerRef,\n    floatingRef: cardRef,\n    openOnTap,\n  });\n\n  // A trigger that can't take focus leaves keyboard users no way to open the\n  // card. It has to be the trigger element itself, not something inside it,\n  // since focus comes back to it and its ARIA is on it. Judged by what the\n  // element is rather than by its styles, which can hide it for now. After\n  // every commit, since the trigger can change, and only in development.\n  useEffect(() => {\n    if (!isDev()) return;\n    const triggerNode = triggerRef.current;\n    if (!triggerNode) return;\n    if (!triggerNode.matches(':disabled') && isTabbableKind(triggerNode)) {\n      return;\n    }\n    warnOnce(\n      'HoverCard:unfocusable-trigger',\n      \"[bestax-bulma] <HoverCard> has a trigger that can't take focus, so \" +\n        \"keyboard users can't open the card. Use a link or a button as the \" +\n        'trigger, or give it tabIndex={0}.'\n    );\n  });\n\n  // Expanded only while the card is on the page, so a portaled card that\n  // waits for hydration isn't announced before it exists.\n  const clonedTrigger = cloneElement(\n    trigger as React.ReactElement<Record<string, unknown>>,\n    {\n      'aria-expanded': cardMounted,\n      'aria-controls': cardMounted ? cardId : undefined,\n    }\n  );\n\n  const rootClasses = classNames(\n    usePrefixedClassNames('hover-card', { 'is-active': cardMounted }),\n    bulmaHelperClasses,\n    className\n  );\n  const cardClasses = classNames(\n    usePrefixedClassNames('hover-card-content', {\n      [`is-${resolved.position}`]: true,\n      'is-portal': appendToBody,\n    }),\n    contentClassName\n  );\n\n  return (\n    // The ref after the spread: React 19 hands a function component a `ref`\n    // prop like any other, and the wrapper has to stay ours. The card is in\n    // the wrapper's React tree even when portaled, so the hover and focus\n    // handlers here hear from both.\n    <span\n      className={rootClasses}\n      {...attrs}\n      onPointerEnter={chain(onPointerEnter, hover.onPointerEnter)}\n      onPointerLeave={chain(onPointerLeave, hover.onPointerLeave)}\n      onFocus={chain(onFocus, hover.onFocus)}\n      onBlur={chain(onBlur, hover.onBlur)}\n      onPointerDown={chain(onPointerDown, hover.onPointerDown)}\n      onPointerUp={chain(onPointerUp, hover.onPointerUp)}\n      ref={rootRef}\n    >\n      {clonedTrigger}\n      {isOpen && (\n        <Portal disabled={!appendToBody}>\n          <div\n            ref={cardRef}\n            id={cardId}\n            className={cardClasses}\n            style={\n              appendToBody\n                ? {\n                    position: 'fixed',\n                    top: resolved.top,\n                    left: resolved.left,\n                  }\n                : undefined\n            }\n          >\n            {children}\n          </div>\n        </Portal>\n      )}\n    </span>\n  );\n};\n\nexport default HoverCard;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"HoverCard.js","sources":["../../../src/components/HoverCard.tsx"],"sourcesContent":["import React, {\n  cloneElement,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { Portal } from '../helpers/portal';\nimport { useIsHydrated } from '../helpers/useIsHydrated';\nimport { marginGap, useAnchoredPosition } from '../helpers/useAnchoredPosition';\nimport { chain, useHoverOpen } from '../helpers/useHoverOpen';\nimport { isTabbableKind } from '../helpers/useFocusTrap';\nimport { isDev, warnOnce } from '../helpers/devWarnings';\nimport type { PickerPosition } from '../form/_pickerInternals/pickerTypes';\n\n/**\n * Where the card opens against its trigger: below (`bottom-*`) or above\n * (`top-*`), lined up with the trigger's left or right edge. `auto` picks the\n * one that keeps the card in the viewport, preferring below and lined up on\n * the left. The same union `Popover` and the date and time pickers take.\n */\nexport type HoverCardPosition = PickerPosition;\n\n/**\n * Props for the HoverCard component. `className`, `id`, the other HTML\n * attributes and the helper props land on the `span` around the trigger, not\n * on the card; `contentClassName` reaches the card.\n * @extraProp {string} [className] - Additional classes for the `span` around the trigger. The card takes `contentClassName`.\n */\nexport interface HoverCardProps\n  extends\n    Omit<React.HTMLAttributes<HTMLSpanElement>, 'color' | 'children'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /**\n   * The element the card previews, such as a link or a `Button`. The element\n   * itself has to take focus, so keyboard users can open the card too: a\n   * link inside a `<span>` doesn't do, since focus comes back to the trigger\n   * and its ARIA is on it. HoverCard gives it no role and no tab stop, since\n   * it can't know what the element is, and a development build warns when\n   * it can't take focus: use a link or a button, or give the element\n   * `tabIndex={0}`. A disabled button can't take focus either. HoverCard adds\n   * `aria-expanded` and `aria-controls`, both naming the card only while it\n   * is on the page, so it has to be a single element that passes those to\n   * its DOM node. Its own click and keys stay its own, and the card doesn't\n   * toggle on them, except Escape while the card is open, which closes the\n   * card before the trigger sees it.\n   */\n  trigger: React.ReactElement;\n  /**\n   * The card's content: a preview whose links and buttons are fine, but not a\n   * form, which belongs in a `Popover`. The card pads itself, so content goes\n   * straight in.\n   */\n  children?: React.ReactNode;\n  /**\n   * Controlled open state. When set, hover, focus and Escape only report\n   * through `onOpenChange`, so an action inside the card can close it. While\n   * the card is open, Escape is reported, and when focus is in the card, on\n   * its trigger or nowhere, the key stops there even if you keep the card\n   * open, so a `Modal` around it doesn't close from the keyboard until the\n   * card does.\n   */\n  open?: boolean;\n  /**\n   * Initial open state when uncontrolled. A card that starts open stays open\n   * until the pointer or focus has been and gone, or Escape closes it.\n   * @defaultValue false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Called with the state asked for: when `openDelay` or `closeDelay` runs\n   * out, and right away on Escape. Fires in both controlled and uncontrolled\n   * use. An Escape it reports stops at the card when focus is in the card,\n   * on its trigger or nowhere, so nothing around it sees that key. With\n   * focus anywhere else, the card still closes and the key goes on to\n   * whatever has focus.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * How long the pointer or keyboard focus waits on the trigger before the\n   * card opens, in milliseconds.\n   * @defaultValue 600\n   */\n  openDelay?: number;\n  /**\n   * How long the card stays after the pointer and focus have left the trigger\n   * and the card, in milliseconds. It is the time the pointer has to cross\n   * the gap between the trigger and the card: with `0` the card closes as the\n   * pointer leaves the trigger, before the pointer can reach it.\n   * @defaultValue 300\n   */\n  closeDelay?: number;\n  /**\n   * Where the card opens against the trigger.\n   * @defaultValue 'bottom-left'\n   */\n  position?: HoverCardPosition;\n  /**\n   * Render the card through `Portal`, into the `portalContainer` a\n   * `ConfigProvider` sets, `document.body` by default, fixed to the viewport,\n   * so an ancestor's `overflow`, `transform` or stacking context can't clip\n   * it. A trigger in running text needs it too, since the card's block\n   * content can't sit inside a `<p>`. The card then shows from the commit\n   * after hydration, never in server markup, and it sits in the Tab order\n   * where its container is. At the end of `<body>`, the default, Tab reaches\n   * it only after the rest of the page, and focus leaving the trigger on the\n   * way closes it, so keyboard users can open it, read it and close it with\n   * Escape, and whatever it links to has to be reachable from the page as\n   * well. It is measured against the trigger when it opens and on resize and\n   * scroll, so it doesn't follow content that changes size while it is open.\n   * Theming variables set on an ancestor of the trigger reach it only when its\n   * container is inside that ancestor.\n   * @defaultValue false\n   */\n  appendToBody?: boolean;\n  /**\n   * Open the card with a tap on a touch screen. Touch has no hover, so\n   * without this a phone or tablet never opens the card. With it, a tap on\n   * the trigger opens the card at once, and it stays until a second tap on\n   * the trigger, a tap outside the trigger and the card, or Escape. The tap\n   * still does whatever the trigger does, so turn this on only for a trigger\n   * with no tap action of its own, such as a `Button` with no `onClick`: on\n   * a link, the first tap would follow the link rather than show the card.\n   * Mouse and pen work the same either way.\n   * @defaultValue false\n   */\n  openOnTap?: boolean;\n  /** Additional classes for the card (`.hover-card-content`). */\n  contentClassName?: string;\n}\n\n/**\n * The `HoverCard` component shows a card previewing what's behind a link or a button while the pointer rests on it or keyboard focus is on it.\n *\n * Nothing moves focus when the card opens, and nothing traps it. In place,\n * the card comes right after the trigger, so Tab goes from the trigger into\n * its links and tabbing past them closes it. The pointer can move onto the\n * card, Escape closes it from anywhere, and by default touch doesn't open it,\n * so tapping the trigger just does what the trigger does. `openOnTap` opens\n * it with a tap, for a trigger with no tap action of its own. For hints with nothing to\n * click use `Tooltip`, and for content opened on purpose, such as a form,\n * use `Popover`.\n *\n * @function\n * @param {HoverCardProps} props - Props for the HoverCard component.\n * @returns {JSX.Element} The trigger in its wrapper, and the card while open.\n *\n * @example\n * <HoverCard trigger={<a href=\"/people/ada\">Ada Lovelace</a>}>\n *   <Title as=\"p\" size=\"6\">Ada Lovelace</Title>\n *   <SubTitle as=\"p\" size=\"6\">Analytical Engine team</SubTitle>\n * </HoverCard>\n */\nexport const HoverCard: React.FC<HoverCardProps> = ({\n  trigger,\n  children,\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  openDelay = 600,\n  closeDelay = 300,\n  position = 'bottom-left',\n  appendToBody = false,\n  openOnTap = false,\n  className,\n  contentClassName,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n  const {\n    onPointerEnter,\n    onPointerOver,\n    onPointerLeave,\n    onPointerDown,\n    onPointerUp,\n    onFocus,\n    onBlur,\n    ...attrs\n  } = rest;\n  const rootRef = useRef<HTMLSpanElement>(null);\n  const cardRef = useRef<HTMLDivElement>(null);\n  const cardId = `${useId()}-card`;\n\n  const isControlled = controlledOpen !== undefined;\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isOpen = controlledOpen ?? internalOpen;\n\n  const requestOpen = useCallback(\n    (next: boolean) => {\n      onOpenChange?.(next);\n      if (!isControlled) setInternalOpen(next);\n    },\n    [isControlled, onOpenChange]\n  );\n\n  // A portaled card has no server markup, so it only exists from the commit\n  // after hydration, and nothing measures it before then.\n  const hydrated = useIsHydrated();\n  const cardMounted = isOpen && (hydrated || !appendToBody);\n\n  const resolved = useAnchoredPosition(rootRef, cardRef, {\n    active: cardMounted,\n    position,\n    fixed: appendToBody,\n    // The gap comes from `--bulma-hover-card-offset` in the stylesheet, so\n    // the coordinates leave it out and `auto` reads it off the card.\n    offset: 0,\n    styledGap: marginGap,\n  });\n\n  // The trigger renders first inside the wrapper. Read when needed rather\n  // than held, so a trigger that remounted is still the one found.\n  const triggerRef = useMemo(\n    () => ({\n      get current() {\n        const first = (rootRef.current as HTMLSpanElement).firstElementChild;\n        return first && first !== cardRef.current\n          ? (first as HTMLElement)\n          : null;\n      },\n    }),\n    []\n  );\n\n  const hover = useHoverOpen({\n    open: isOpen,\n    onOpenChange: requestOpen,\n    openDelay,\n    closeDelay,\n    triggerRef,\n    floatingRef: cardRef,\n    openOnTap,\n  });\n\n  // A trigger that can't take focus leaves keyboard users no way to open the\n  // card. It has to be the trigger element itself, not something inside it,\n  // since focus comes back to it and its ARIA is on it. Judged by what the\n  // element is rather than by its styles, which can hide it for now. After\n  // every commit, since the trigger can change, and only in development.\n  useEffect(() => {\n    if (!isDev()) return;\n    const triggerNode = triggerRef.current;\n    if (!triggerNode) return;\n    if (!triggerNode.matches(':disabled') && isTabbableKind(triggerNode)) {\n      return;\n    }\n    warnOnce(\n      'HoverCard:unfocusable-trigger',\n      \"[bestax-bulma] <HoverCard> has a trigger that can't take focus, so \" +\n        \"keyboard users can't open the card. Use a link or a button as the \" +\n        'trigger, or give it tabIndex={0}.'\n    );\n  });\n\n  // Expanded only while the card is on the page, so a portaled card that\n  // waits for hydration isn't announced before it exists.\n  const clonedTrigger = cloneElement(\n    trigger as React.ReactElement<Record<string, unknown>>,\n    {\n      'aria-expanded': cardMounted,\n      'aria-controls': cardMounted ? cardId : undefined,\n    }\n  );\n\n  const rootClasses = classNames(\n    usePrefixedClassNames('hover-card', { 'is-active': cardMounted }),\n    bulmaHelperClasses,\n    className\n  );\n  const cardClasses = classNames(\n    usePrefixedClassNames('hover-card-content', {\n      [`is-${resolved.position}`]: true,\n      'is-portal': appendToBody,\n    }),\n    contentClassName\n  );\n\n  return (\n    // The ref after the spread: React 19 hands a function component a `ref`\n    // prop like any other, and the wrapper has to stay ours. The card is in\n    // the wrapper's React tree even when portaled, so the hover and focus\n    // handlers here hear from both.\n    <span\n      className={rootClasses}\n      {...attrs}\n      onPointerEnter={chain(onPointerEnter, hover.onPointerEnter)}\n      onPointerOver={chain(onPointerOver, hover.onPointerOver)}\n      onPointerLeave={chain(onPointerLeave, hover.onPointerLeave)}\n      onFocus={chain(onFocus, hover.onFocus)}\n      onBlur={chain(onBlur, hover.onBlur)}\n      onPointerDown={chain(onPointerDown, hover.onPointerDown)}\n      onPointerUp={chain(onPointerUp, hover.onPointerUp)}\n      ref={rootRef}\n    >\n      {clonedTrigger}\n      {isOpen && (\n        <Portal disabled={!appendToBody}>\n          <div\n            ref={cardRef}\n            id={cardId}\n            className={cardClasses}\n            style={\n              appendToBody\n                ? {\n                    position: 'fixed',\n                    top: resolved.top,\n                    left: resolved.left,\n                  }\n                : undefined\n            }\n          >\n            {children}\n          </div>\n        </Portal>\n      )}\n    </span>\n  );\n};\n\nexport default HoverCard;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/Tooltip.js

@@ -1,12 +1,23 @@
 /* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect, useLayoutEffect, useCallback } from 'react';
+import { useState, useRef, useLayoutEffect } from 'react';
 import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
 import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+import { useHoverOpen, chain } from '../helpers/useHoverOpen.js';
 
 /**
  * The `Tooltip` component displays helpful information when users hover over or focus on an element.
  *
+ * Hovering the trigger or giving it keyboard focus shows it. Touch doesn't,
+ * unless `openOnTap` is on, and neither does focus a click or a tap brings,
+ * so tapping the trigger just does what the trigger does. The pointer can
+ * move onto a shown tooltip. Escape hides it wherever focus is, without
+ * moving the pointer or focus, and it stays hidden until one of them leaves
+ * the trigger and comes back, or, with `openOnTap`, until the next tap on
+ * the trigger. The key always goes on too, to whatever has focus or a
+ * `Modal` or `Popover` around it, since a tooltip only adds to what's
+ * there.
+ *
  * @function
  * @param {TooltipProps} props - Props for the Tooltip component.
  * @returns {JSX.Element} The rendered tooltip wrapper.
@@ -29,59 +40,32 @@ import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
  *   <span>?</span>
  * </Tooltip>
  */
-const Tooltip = ({ label, content, position = 'top', color, size, active: alwaysActive, multiline = false, animated = true, square = false, dashed = false, delay = 0, closeDelay = 0, children, className, tooltipClassName, ...props }) => {
+const Tooltip = ({ label, content, position = 'top', color, size, active: alwaysActive, multiline = false, animated = true, square = false, dashed = false, delay = 0, closeDelay = 0, openOnTap = false, children, className, tooltipClassName, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const { onPointerEnter, onPointerOver, onPointerLeave, onPointerDown, onPointerUp, onFocus, onBlur, ...attrs } = rest;
     const [isVisible, setIsVisible] = useState(false);
-    const [isHovering, setIsHovering] = useState(false);
     const [resolvedPosition, setResolvedPosition] = useState(position === 'auto' ? 'top' : position);
     const [contentStyle, setContentStyle] = useState({});
-    const openTimeoutRef = useRef(null);
-    const closeTimeoutRef = useRef(null);
     const wrapperRef = useRef(null);
     const contentRef = useRef(null);
-    // Clear timeouts on unmount
-    useEffect(() => {
-        return () => {
-            if (openTimeoutRef.current) {
-                clearTimeout(openTimeoutRef.current);
-            }
-            if (closeTimeoutRef.current) {
-                clearTimeout(closeTimeoutRef.current);
-            }
-        };
-    }, []);
-    // Handle delayed visibility
-    useEffect(() => {
-        if (isHovering) {
-            if (closeTimeoutRef.current) {
-                clearTimeout(closeTimeoutRef.current);
-                closeTimeoutRef.current = null;
-            }
-            if (delay > 0) {
-                openTimeoutRef.current = setTimeout(() => {
-                    setIsVisible(true);
-                }, delay);
-            }
-            else {
-                // eslint-disable-next-line react-hooks/set-state-in-effect -- show immediately on hover when no delay
-                setIsVisible(true);
-            }
-        }
-        else {
-            if (openTimeoutRef.current) {
-                clearTimeout(openTimeoutRef.current);
-                openTimeoutRef.current = null;
-            }
-            if (closeDelay > 0) {
-                closeTimeoutRef.current = setTimeout(() => {
-                    setIsVisible(false);
-                }, closeDelay);
-            }
-            else {
-                setIsVisible(false);
-            }
-        }
-    }, [isHovering, delay, closeDelay]);
+    const hover = useHoverOpen({
+        // The pointer and focus as they are. `active` shows it on top of that, so
+        // dropping `active` leaves it shown while the pointer or focus holds it.
+        // An ask to close can come while it's already hidden, which is no change.
+        open: isVisible,
+        onOpenChange: setIsVisible,
+        openDelay: delay,
+        closeDelay,
+        // The wrapper stands in for the trigger. It holds only the children and
+        // the tooltip, and nothing in the tooltip takes focus, so focus anywhere
+        // in it is focus on the trigger.
+        triggerRef: wrapperRef,
+        floatingRef: contentRef,
+        // Escape hides it and carries on, so a control in the trigger, or a
+        // Modal around it, still gets the key.
+        consumeEscape: false,
+        openOnTap,
+    });
     // Auto-placement and overflow correction
     useLayoutEffect(() => {
         const isAuto = position === 'auto';
@@ -170,21 +154,12 @@ const Tooltip = ({ label, content, position = 'top', color, size, active: always
             setContentStyle(style);
         });
     }, [position, resolvedPosition, isVisible, alwaysActive, label, content]);
-    const handleMouseEnter = useCallback(() => {
-        setIsHovering(true);
-    }, []);
-    const handleMouseLeave = useCallback(() => {
-        setIsHovering(false);
-    }, []);
-    const handleFocus = useCallback(() => {
-        setIsHovering(true);
-    }, []);
-    const handleBlur = useCallback(() => {
-        setIsHovering(false);
-    }, []);
     // Generate Bulma classes
     const tooltipClasses = usePrefixedClassNames('tooltip', {
         'is-active': alwaysActive || isVisible,
+        // Open by the pointer, focus or a tap, rather than shown by `active`
+        // alone: only then does the tooltip, and the gap to it, take the pointer.
+        'is-open': isVisible,
         [`is-${resolvedPosition}`]: resolvedPosition,
         [`is-${color}`]: color,
         [`is-${size}`]: size,
@@ -195,7 +170,7 @@ const Tooltip = ({ label, content, position = 'top', color, size, active: always
     });
     const combinedClasses = classNames(tooltipClasses, bulmaHelperClasses, className);
     const combinedTooltipClasses = usePrefixedClassNames('tooltip-content', tooltipClassName);
-    return (jsxs("span", { ref: wrapperRef, className: combinedClasses, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, ...(label ? { 'data-tooltip': label } : {}), ...rest, children: [children, jsx("span", { ref: contentRef, className: combinedTooltipClasses, role: "tooltip", "aria-hidden": !isVisible && !alwaysActive, style: Object.keys(contentStyle).length > 0 ? contentStyle : undefined, children: content || label })] }));
+    return (jsxs("span", { ref: wrapperRef, className: combinedClasses, onPointerEnter: chain(onPointerEnter, hover.onPointerEnter), onPointerOver: chain(onPointerOver, hover.onPointerOver), onPointerLeave: chain(onPointerLeave, hover.onPointerLeave), onFocus: chain(onFocus, hover.onFocus), onBlur: chain(onBlur, hover.onBlur), onPointerDown: chain(onPointerDown, hover.onPointerDown), onPointerUp: chain(onPointerUp, hover.onPointerUp), ...(label ? { 'data-tooltip': label } : {}), ...attrs, children: [children, jsx("span", { ref: contentRef, className: combinedTooltipClasses, role: "tooltip", "aria-hidden": !isVisible && !alwaysActive, style: Object.keys(contentStyle).length > 0 ? contentStyle : undefined, children: content || label })] }));
 };
 
 export { Tooltip };