@allxsmith/bestax-bulma 5.67.9 → 5.67.11

package/dist/esm/components/ContextMenu.js

@@ -38,8 +38,8 @@ function chain(own, ours) {
  * 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, so it never has server markup: into the
- * `portalContainer` a `ConfigProvider` sets, else the `Modal`, `Dialog` or
- * `Command.Dialog` it's in, where screen readers that honor the dialog's
+ * `portalContainer` a `ConfigProvider` sets, else the overlay it's in that
+ * takes its popups, such as a `Modal`, where screen readers that honor its
  * `aria-modal` reach it, else the end of the trigger's own document's
  * `<body>`. 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

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

@@ -1 +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, usePopupContainer } from '../helpers/portal';\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, so it never has server markup: into the\n * `portalContainer` a `ConfigProvider` sets, else the `Modal`, `Dialog` or\n * `Command.Dialog` it's in, where screen readers that honor the dialog's\n * `aria-modal` reach it, else the end of the trigger's own document's\n * `<body>`. 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 shadow root, point\n * `portalContainer` inside it, so 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 popupContainer = usePopupContainer();\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={popupContainer || 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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"}
+{"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, usePopupContainer } from '../helpers/portal';\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, so it never has server markup: into the\n * `portalContainer` a `ConfigProvider` sets, else the overlay it's in that\n * takes its popups, such as a `Modal`, where screen readers that honor its\n * `aria-modal` reach it, else the end of the trigger's own document's\n * `<body>`. 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 shadow root, point\n * `portalContainer` inside it, so 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 popupContainer = usePopupContainer();\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={popupContainer || 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.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 { PopupPortal } 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. Left out, it opens below and\n   * lines up with the trigger's start edge, which is its right edge on a\n   * right-to-left page, so a trigger at the start of the line doesn't push\n   * the card off the screen. A corner you pass stays physical, so\n   * `bottom-left` lines up the left edges on either page.\n   * @defaultValue 'bottom-left'\n   */\n  position?: HoverCardPosition;\n  /**\n   * Render the card through `Portal`, into the `portalContainer` a\n   * `ConfigProvider` sets, else the `Modal`, `Dialog` or `Command.Dialog`\n   * it's in, else `document.body`, fixed to the viewport, so an ancestor's\n   * `overflow`, `transform` or stacking context can't clip it. A trigger in\n   * running text needs it too, since the card's block content can't sit\n   * inside a `<p>`. The card then shows from the commit after hydration,\n   * never in server markup, and it sits in the Tab order where its container\n   * is. At the end of `<body>` or of a dialog, Tab reaches it only after the\n   * rest of the page or the dialog, and focus leaving the trigger on the way\n   * 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. Theming variables set on an ancestor of the trigger reach it only\n   * when its 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,\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      // The default lines up with the trigger's inline start, so the\n      // stylesheet moves it to the right edge on a right-to-left page.\n      'is-start-aligned': position === undefined,\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        <PopupPortal 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        </PopupPortal>\n      )}\n    </span>\n  );\n};\n\nexport default HoverCard;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;AA0IA;;;;;;;;;;;;;;;;;;;;;AAqBG;MACU,SAAS,GAA6B,CAAC,EAClD,OAAO,EACP,QAAQ,EACR,IAAI,EAAE,cAAc,EACpB,WAAW,GAAG,KAAK,EACnB,YAAY,EACZ,SAAS,GAAG,GAAG,EACf,UAAU,GAAG,GAAG,EAChB,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,gBAAgB,EAChB,GAAG,KAAK,EACT,KAAI;IACH,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC;IAC3D,MAAM,EACJ,cAAc,EACd,aAAa,EACb,cAAc,EACd,aAAa,EACb,WAAW,EACX,OAAO,EACP,MAAM,EACN,GAAG,KAAK,EACT,GAAG,IAAI;AACR,IAAA,MAAM,OAAO,GAAG,MAAM,CAAkB,IAAI,CAAC;AAC7C,IAAA,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC;AAC5C,IAAA,MAAM,MAAM,GAAG,CAAA,EAAG,KAAK,EAAE,OAAO;AAEhC,IAAA,MAAM,YAAY,GAAG,cAAc,KAAK,SAAS;IACjD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC;AAC7D,IAAA,MAAM,MAAM,GAAG,cAAc,IAAI,YAAY;AAE7C,IAAA,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,IAAa,KAAI;AAChB,QAAA,YAAY,GAAG,IAAI,CAAC;AACpB,QAAA,IAAI,CAAC,YAAY;YAAE,eAAe,CAAC,IAAI,CAAC;AAC1C,IAAA,CAAC,EACD,CAAC,YAAY,EAAE,YAAY,CAAC,CAC7B;;;AAID,IAAA,MAAM,QAAQ,GAAG,aAAa,EAAE;IAChC,MAAM,WAAW,GAAG,MAAM,KAAK,QAAQ,IAAI,CAAC,YAAY,CAAC;AAEzD,IAAA,MAAM,QAAQ,GAAG,mBAAmB,CAAC,OAAO,EAAE,OAAO,EAAE;AACrD,QAAA,MAAM,EAAE,WAAW;QACnB,QAAQ;AACR,QAAA,KAAK,EAAE,YAAY;;;AAGnB,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,SAAS,EAAE,SAAS;AACrB,KAAA,CAAC;;;AAIF,IAAA,MAAM,UAAU,GAAG,OAAO,CACxB,OAAO;AACL,QAAA,IAAI,OAAO,GAAA;AACT,YAAA,MAAM,KAAK,GAAI,OAAO,CAAC,OAA2B,CAAC,iBAAiB;AACpE,YAAA,OAAO,KAAK,IAAI,KAAK,KAAK,OAAO,CAAC;AAChC,kBAAG;kBACD,IAAI;QACV,CAAC;KACF,CAAC,EACF,EAAE,CACH;IAED,MAAM,KAAK,GAAG,YAAY,CAAC;AACzB,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,YAAY,EAAE,WAAW;QACzB,SAAS;QACT,UAAU;QACV,UAAU;AACV,QAAA,WAAW,EAAE,OAAO;QACpB,SAAS;AACV,KAAA,CAAC;;;;;;IAOF,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,KAAK,EAAE;YAAE;AACd,QAAA,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO;AACtC,QAAA,IAAI,CAAC,WAAW;YAAE;AAClB,QAAA,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,cAAc,CAAC,WAAW,CAAC,EAAE;YACpE;QACF;QACA,QAAQ,CACN,+BAA+B,EAC/B,qEAAqE;YACnE,oEAAoE;AACpE,YAAA,mCAAmC,CACtC;AACH,IAAA,CAAC,CAAC;;;AAIF,IAAA,MAAM,aAAa,GAAG,YAAY,CAChC,OAAsD,EACtD;AACE,QAAA,eAAe,EAAE,WAAW;QAC5B,eAAe,EAAE,WAAW,GAAG,MAAM,GAAG,SAAS;AAClD,KAAA,CACF;AAED,IAAA,MAAM,WAAW,GAAG,UAAU,CAC5B,qBAAqB,CAAC,YAAY,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC,EACjE,kBAAkB,EAClB,SAAS,CACV;AACD,IAAA,MAAM,WAAW,GAAG,UAAU,CAC5B,qBAAqB,CAAC,oBAAoB,EAAE;AAC1C,QAAA,CAAC,MAAM,QAAQ,CAAC,QAAQ,CAAA,CAAE,GAAG,IAAI;;;QAGjC,kBAAkB,EAAE,QAAQ,KAAK,SAAS;AAC1C,QAAA,WAAW,EAAE,YAAY;KAC1B,CAAC,EACF,gBAAgB,CACjB;IAED,QAKEA,IAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,WAAW,EAAA,GAClB,KAAK,EACT,cAAc,EAAE,KAAK,CAAC,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,EAC3D,aAAa,EAAE,KAAK,CAAC,aAAa,EAAE,KAAK,CAAC,aAAa,CAAC,EACxD,cAAc,EAAE,KAAK,CAAC,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,EAC3D,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,EACtC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EACnC,aAAa,EAAE,KAAK,CAAC,aAAa,EAAE,KAAK,CAAC,aAAa,CAAC,EACxD,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,WAAW,CAAC,EAClD,GAAG,EAAE,OAAO,aAEX,aAAa,EACb,MAAM,KACLC,GAAA,CAAC,WAAW,EAAA,EAAC,QAAQ,EAAE,CAAC,YAAY,EAAA,QAAA,EAClCA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,OAAO,EACZ,EAAE,EAAE,MAAM,EACV,SAAS,EAAE,WAAW,EACtB,KAAK,EACH;AACE,0BAAE;AACE,4BAAA,QAAQ,EAAE,OAAO;4BACjB,GAAG,EAAE,QAAQ,CAAC,GAAG;4BACjB,IAAI,EAAE,QAAQ,CAAC,IAAI;AACpB;0BACD,SAAS,EAAA,QAAA,EAGd,QAAQ,GACL,EAAA,CACM,CACf,CAAA,EAAA,CACI;AAEX;;"}
+{"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 { PopupPortal } 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. Left out, it opens below and\n   * lines up with the trigger's start edge, which is its right edge on a\n   * right-to-left page, so a trigger at the start of the line doesn't push\n   * the card off the screen. A corner you pass stays physical, so\n   * `bottom-left` lines up the left edges on either page.\n   * @defaultValue 'bottom-left'\n   */\n  position?: HoverCardPosition;\n  /**\n   * Render the card through `Portal`, into the `portalContainer` a\n   * `ConfigProvider` sets, else the overlay it's in that takes its popups,\n   * such as a `Modal`, else `document.body`, fixed to the viewport, so an\n   * ancestor's `overflow`, `transform` or stacking context can't clip it. A\n   * trigger in running text needs it too, since the card's block content\n   * can't sit inside a `<p>`. The card then shows from the commit after\n   * hydration, never in server markup, and it sits in the Tab order where its\n   * container is. At the end of `<body>` or of an overlay, Tab reaches it\n   * only after the rest of the page or the overlay, and focus leaving the\n   * trigger on the way closes it, so keyboard users can open it, read it and\n   * close it with Escape, and whatever it links to has to be reachable from\n   * the page as well. Theming variables set on an ancestor of the trigger reach it only\n   * when its 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,\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      // The default lines up with the trigger's inline start, so the\n      // stylesheet moves it to the right edge on a right-to-left page.\n      'is-start-aligned': position === undefined,\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        <PopupPortal 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        </PopupPortal>\n      )}\n    </span>\n  );\n};\n\nexport default HoverCard;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;AA0IA;;;;;;;;;;;;;;;;;;;;;AAqBG;MACU,SAAS,GAA6B,CAAC,EAClD,OAAO,EACP,QAAQ,EACR,IAAI,EAAE,cAAc,EACpB,WAAW,GAAG,KAAK,EACnB,YAAY,EACZ,SAAS,GAAG,GAAG,EACf,UAAU,GAAG,GAAG,EAChB,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,gBAAgB,EAChB,GAAG,KAAK,EACT,KAAI;IACH,MAAM,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC;IAC3D,MAAM,EACJ,cAAc,EACd,aAAa,EACb,cAAc,EACd,aAAa,EACb,WAAW,EACX,OAAO,EACP,MAAM,EACN,GAAG,KAAK,EACT,GAAG,IAAI;AACR,IAAA,MAAM,OAAO,GAAG,MAAM,CAAkB,IAAI,CAAC;AAC7C,IAAA,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC;AAC5C,IAAA,MAAM,MAAM,GAAG,CAAA,EAAG,KAAK,EAAE,OAAO;AAEhC,IAAA,MAAM,YAAY,GAAG,cAAc,KAAK,SAAS;IACjD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC;AAC7D,IAAA,MAAM,MAAM,GAAG,cAAc,IAAI,YAAY;AAE7C,IAAA,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,IAAa,KAAI;AAChB,QAAA,YAAY,GAAG,IAAI,CAAC;AACpB,QAAA,IAAI,CAAC,YAAY;YAAE,eAAe,CAAC,IAAI,CAAC;AAC1C,IAAA,CAAC,EACD,CAAC,YAAY,EAAE,YAAY,CAAC,CAC7B;;;AAID,IAAA,MAAM,QAAQ,GAAG,aAAa,EAAE;IAChC,MAAM,WAAW,GAAG,MAAM,KAAK,QAAQ,IAAI,CAAC,YAAY,CAAC;AAEzD,IAAA,MAAM,QAAQ,GAAG,mBAAmB,CAAC,OAAO,EAAE,OAAO,EAAE;AACrD,QAAA,MAAM,EAAE,WAAW;QACnB,QAAQ;AACR,QAAA,KAAK,EAAE,YAAY;;;AAGnB,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,SAAS,EAAE,SAAS;AACrB,KAAA,CAAC;;;AAIF,IAAA,MAAM,UAAU,GAAG,OAAO,CACxB,OAAO;AACL,QAAA,IAAI,OAAO,GAAA;AACT,YAAA,MAAM,KAAK,GAAI,OAAO,CAAC,OAA2B,CAAC,iBAAiB;AACpE,YAAA,OAAO,KAAK,IAAI,KAAK,KAAK,OAAO,CAAC;AAChC,kBAAG;kBACD,IAAI;QACV,CAAC;KACF,CAAC,EACF,EAAE,CACH;IAED,MAAM,KAAK,GAAG,YAAY,CAAC;AACzB,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,YAAY,EAAE,WAAW;QACzB,SAAS;QACT,UAAU;QACV,UAAU;AACV,QAAA,WAAW,EAAE,OAAO;QACpB,SAAS;AACV,KAAA,CAAC;;;;;;IAOF,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,KAAK,EAAE;YAAE;AACd,QAAA,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO;AACtC,QAAA,IAAI,CAAC,WAAW;YAAE;AAClB,QAAA,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,cAAc,CAAC,WAAW,CAAC,EAAE;YACpE;QACF;QACA,QAAQ,CACN,+BAA+B,EAC/B,qEAAqE;YACnE,oEAAoE;AACpE,YAAA,mCAAmC,CACtC;AACH,IAAA,CAAC,CAAC;;;AAIF,IAAA,MAAM,aAAa,GAAG,YAAY,CAChC,OAAsD,EACtD;AACE,QAAA,eAAe,EAAE,WAAW;QAC5B,eAAe,EAAE,WAAW,GAAG,MAAM,GAAG,SAAS;AAClD,KAAA,CACF;AAED,IAAA,MAAM,WAAW,GAAG,UAAU,CAC5B,qBAAqB,CAAC,YAAY,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC,EACjE,kBAAkB,EAClB,SAAS,CACV;AACD,IAAA,MAAM,WAAW,GAAG,UAAU,CAC5B,qBAAqB,CAAC,oBAAoB,EAAE;AAC1C,QAAA,CAAC,MAAM,QAAQ,CAAC,QAAQ,CAAA,CAAE,GAAG,IAAI;;;QAGjC,kBAAkB,EAAE,QAAQ,KAAK,SAAS;AAC1C,QAAA,WAAW,EAAE,YAAY;KAC1B,CAAC,EACF,gBAAgB,CACjB;IAED,QAKEA,IAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,WAAW,EAAA,GAClB,KAAK,EACT,cAAc,EAAE,KAAK,CAAC,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,EAC3D,aAAa,EAAE,KAAK,CAAC,aAAa,EAAE,KAAK,CAAC,aAAa,CAAC,EACxD,cAAc,EAAE,KAAK,CAAC,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,EAC3D,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,EACtC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EACnC,aAAa,EAAE,KAAK,CAAC,aAAa,EAAE,KAAK,CAAC,aAAa,CAAC,EACxD,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,WAAW,CAAC,EAClD,GAAG,EAAE,OAAO,aAEX,aAAa,EACb,MAAM,KACLC,GAAA,CAAC,WAAW,EAAA,EAAC,QAAQ,EAAE,CAAC,YAAY,EAAA,QAAA,EAClCA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,OAAO,EACZ,EAAE,EAAE,MAAM,EACV,SAAS,EAAE,WAAW,EACtB,KAAK,EACH;AACE,0BAAE;AACE,4BAAA,QAAQ,EAAE,OAAO;4BACjB,GAAG,EAAE,QAAQ,CAAC,GAAG;4BACjB,IAAI,EAAE,QAAQ,CAAC,IAAI;AACpB;0BACD,SAAS,EAAA,QAAA,EAGd,QAAQ,GACL,EAAA,CACM,CACf,CAAA,EAAA,CACI;AAEX;;"}

package/dist/esm/components/Message.js

@@ -34,7 +34,10 @@ const MessageComponent = ({ className, title, textColor, color, bgColor, size, o
     // Built from its parts, the header and body are the article's own
     // children, as Bulma lays them out, so they get no body around them.
     const composed = React.Children.toArray(children).some(child => isElementOf(child, MessageHeader, MessageBody));
-    return (jsxs("article", { className: messageClasses, ...rest, "data-testid": "message", children: [(title || onClose) && (jsxs("div", { className: prefixedClassNames(classPrefix, 'message-header'), children: [title && jsx("span", { children: title }), onClose && (jsx("button", { className: deleteClass, "aria-label": "delete", onClick: onClose, type: "button", "data-testid": "message-close" }))] })), composed
+    // A test id the caller passes wins. It's written after `rest`, since a
+    // spread carrying `data-testid: undefined` would otherwise erase the default.
+    const testId = rest['data-testid'] ?? 'message';
+    return (jsxs("article", { className: messageClasses, ...rest, "data-testid": testId, children: [(title || onClose) && (jsxs("div", { className: prefixedClassNames(classPrefix, 'message-header'), children: [title && jsx("span", { children: title }), onClose && (jsx("button", { className: deleteClass, "aria-label": "delete", onClick: onClose, type: "button", "data-testid": "message-close" }))] })), composed
                 ? children
                 : children && (jsx("div", { className: prefixedClassNames(classPrefix, 'message-body'), "data-testid": "message-body", children: children }))] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Message.js","sources":["../../../src/components/Message.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  classNames,\n  usePrefixedClassNames,\n  prefixedClassNames,\n} from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { isElementOf } from '../helpers/elementType';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { useConfig } from '../helpers/Config';\n\nconst validMessageSizes = ['small', 'medium', 'large'] as const;\n/**\n * Valid size values for the Message component (Bulma message sizes).\n */\nexport type MessageSize = (typeof validMessageSizes)[number];\n\n/**\n * Props for the Message component.\n */\nexport interface MessageProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, 'title'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Title string/node (renders header section). */\n  title?: React.ReactNode;\n  /** Text color for the message (Bulma helper). */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Bulma color modifier for the message. */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** Background color for the message (Bulma helper). */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Size of the message. */\n  size?: MessageSize;\n  /** Callback for the close (\"X\") button. */\n  onClose?: () => void;\n  /**\n   * Body content for the message, wrapped in a `.message-body`. Children that\n   * include a `Message.Header` or `Message.Body` aren't wrapped: they render as\n   * the article's own children, after the header `title` and `onClose` make.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Message` component provides Bulma's flexible notice/message box for your Bulma React UI.\n *\n * @function\n * @param {MessageProps} props - Props for the Message component.\n * @returns {JSX.Element} The rendered message.\n * @see {@link https://bulma.io/documentation/components/message/ | Bulma Message documentation}\n */\nconst MessageComponent: React.FC<MessageProps> = ({\n  className,\n  title,\n  textColor,\n  color,\n  bgColor,\n  size,\n  onClose,\n  children,\n  ...props\n}) => {\n  const { classPrefix } = useConfig();\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  });\n\n  // Generate Bulma classes with prefix\n  const bulmaClasses = usePrefixedClassNames('message', {\n    [`is-${color}`]: color,\n    [`is-${size}`]: size && validMessageSizes.includes(size),\n  });\n  const deleteClass = usePrefixedClassNames('delete');\n\n  const messageClasses = classNames(\n    bulmaClasses,\n    bulmaHelperClasses,\n    className\n  );\n\n  // Built from its parts, the header and body are the article's own\n  // children, as Bulma lays them out, so they get no body around them.\n  const composed = React.Children.toArray(children).some(child =>\n    isElementOf(child, MessageHeader, MessageBody)\n  );\n\n  return (\n    <article className={messageClasses} {...rest} data-testid=\"message\">\n      {(title || onClose) && (\n        <div className={prefixedClassNames(classPrefix, 'message-header')}>\n          {title && <span>{title}</span>}\n          {onClose && (\n            <button\n              className={deleteClass}\n              aria-label=\"delete\"\n              onClick={onClose}\n              type=\"button\"\n              data-testid=\"message-close\"\n            />\n          )}\n        </div>\n      )}\n      {composed\n        ? children\n        : children && (\n            <div\n              className={prefixedClassNames(classPrefix, 'message-body')}\n              data-testid=\"message-body\"\n            >\n              {children}\n            </div>\n          )}\n    </article>\n  );\n};\n\n// Compound components for flexible composition\n\n/**\n * Props for the Message.Header compound component.\n */\nexport interface MessageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Header content (title, close button, etc.). */\n  children?: React.ReactNode;\n}\n\n/**\n * Props for the Message.Body compound component.\n */\nexport interface MessageBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Message body content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Message header compound component. Renders a `.message-header` element.\n *\n * @function\n * @param {MessageHeaderProps} props - Props for the MessageHeader component.\n * @returns {JSX.Element} The rendered message header.\n */\nexport const MessageHeader: React.FC<MessageHeaderProps> = ({\n  className,\n  children,\n  ...props\n}) => (\n  <div\n    className={classNames(usePrefixedClassNames('message-header'), className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\n/**\n * Message body compound component. Renders a `.message-body` element.\n *\n * @function\n * @param {MessageBodyProps} props - Props for the MessageBody component.\n * @returns {JSX.Element} The rendered message body.\n */\nexport const MessageBody: React.FC<MessageBodyProps> = ({\n  className,\n  children,\n  ...props\n}) => (\n  <div\n    className={classNames(usePrefixedClassNames('message-body'), className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\n// Attach compound components\nexport const Message = withSubComponents(\n  MessageComponent,\n  {\n    Header: MessageHeader,\n    Body: MessageBody,\n  },\n  'Message'\n);\n\nexport default Message;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Message.js","sources":["../../../src/components/Message.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  classNames,\n  usePrefixedClassNames,\n  prefixedClassNames,\n} from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { isElementOf } from '../helpers/elementType';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { useConfig } from '../helpers/Config';\n\nconst validMessageSizes = ['small', 'medium', 'large'] as const;\n/**\n * Valid size values for the Message component (Bulma message sizes).\n */\nexport type MessageSize = (typeof validMessageSizes)[number];\n\n/**\n * Props for the Message component.\n */\nexport interface MessageProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, 'title'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Title string/node (renders header section). */\n  title?: React.ReactNode;\n  /** Text color for the message (Bulma helper). */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Bulma color modifier for the message. */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** Background color for the message (Bulma helper). */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Size of the message. */\n  size?: MessageSize;\n  /** Callback for the close (\"X\") button. */\n  onClose?: () => void;\n  /**\n   * Body content for the message, wrapped in a `.message-body`. Children that\n   * include a `Message.Header` or `Message.Body` aren't wrapped: they render as\n   * the article's own children, after the header `title` and `onClose` make.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Message` component provides Bulma's flexible notice/message box for your Bulma React UI.\n *\n * @function\n * @param {MessageProps} props - Props for the Message component.\n * @returns {JSX.Element} The rendered message.\n * @see {@link https://bulma.io/documentation/components/message/ | Bulma Message documentation}\n */\nconst MessageComponent: React.FC<MessageProps> = ({\n  className,\n  title,\n  textColor,\n  color,\n  bgColor,\n  size,\n  onClose,\n  children,\n  ...props\n}) => {\n  const { classPrefix } = useConfig();\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  });\n\n  // Generate Bulma classes with prefix\n  const bulmaClasses = usePrefixedClassNames('message', {\n    [`is-${color}`]: color,\n    [`is-${size}`]: size && validMessageSizes.includes(size),\n  });\n  const deleteClass = usePrefixedClassNames('delete');\n\n  const messageClasses = classNames(\n    bulmaClasses,\n    bulmaHelperClasses,\n    className\n  );\n\n  // Built from its parts, the header and body are the article's own\n  // children, as Bulma lays them out, so they get no body around them.\n  const composed = React.Children.toArray(children).some(child =>\n    isElementOf(child, MessageHeader, MessageBody)\n  );\n\n  // A test id the caller passes wins. It's written after `rest`, since a\n  // spread carrying `data-testid: undefined` would otherwise erase the default.\n  const testId =\n    (rest as { 'data-testid'?: string })['data-testid'] ?? 'message';\n\n  return (\n    <article className={messageClasses} {...rest} data-testid={testId}>\n      {(title || onClose) && (\n        <div className={prefixedClassNames(classPrefix, 'message-header')}>\n          {title && <span>{title}</span>}\n          {onClose && (\n            <button\n              className={deleteClass}\n              aria-label=\"delete\"\n              onClick={onClose}\n              type=\"button\"\n              data-testid=\"message-close\"\n            />\n          )}\n        </div>\n      )}\n      {composed\n        ? children\n        : children && (\n            <div\n              className={prefixedClassNames(classPrefix, 'message-body')}\n              data-testid=\"message-body\"\n            >\n              {children}\n            </div>\n          )}\n    </article>\n  );\n};\n\n// Compound components for flexible composition\n\n/**\n * Props for the Message.Header compound component.\n */\nexport interface MessageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Header content (title, close button, etc.). */\n  children?: React.ReactNode;\n}\n\n/**\n * Props for the Message.Body compound component.\n */\nexport interface MessageBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Message body content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Message header compound component. Renders a `.message-header` element.\n *\n * @function\n * @param {MessageHeaderProps} props - Props for the MessageHeader component.\n * @returns {JSX.Element} The rendered message header.\n */\nexport const MessageHeader: React.FC<MessageHeaderProps> = ({\n  className,\n  children,\n  ...props\n}) => (\n  <div\n    className={classNames(usePrefixedClassNames('message-header'), className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\n/**\n * Message body compound component. Renders a `.message-body` element.\n *\n * @function\n * @param {MessageBodyProps} props - Props for the MessageBody component.\n * @returns {JSX.Element} The rendered message body.\n */\nexport const MessageBody: React.FC<MessageBodyProps> = ({\n  className,\n  children,\n  ...props\n}) => (\n  <div\n    className={classNames(usePrefixedClassNames('message-body'), className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\n// Attach compound components\nexport const Message = withSubComponents(\n  MessageComponent,\n  {\n    Header: MessageHeader,\n    Body: MessageBody,\n  },\n  'Message'\n);\n\nexport default Message;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/Modal.js

@@ -306,10 +306,13 @@ const ModalRoot = forwardRef(function ModalRoot({ active, isActive, onClose, cla
     // automatically, compound users pass their own aria-label/aria-labelledby
     // (both arrive in `rest`, which is spread last and so wins).
     const titleId = modalCardTitle ? generatedTitleId : undefined;
+    // A test id the caller passes wins. It's written after `rest`, since a
+    // spread carrying `data-testid: undefined` would otherwise erase the default.
+    const testId = rest['data-testid'] ?? 'modal';
     let modalElement;
     // If using compound components, render children as-is
     if (hasCompoundComponents) {
-        modalElement = (jsx("div", { className: modalClasses, ref: combinedRef, role: resolvedRole, "aria-modal": resolvedAriaModal, tabIndex: -1, ...rest, "data-testid": "modal", children: children }));
+        modalElement = (jsx("div", { className: modalClasses, ref: combinedRef, role: resolvedRole, "aria-modal": resolvedAriaModal, tabIndex: -1, ...rest, "data-testid": testId, children: children }));
     }
     else {
         // Legacy API: EXPLICIT type wins; fallback to auto detection if not provided
@@ -320,7 +323,7 @@ const ModalRoot = forwardRef(function ModalRoot({ active, isActive, onClose, cla
             isModalCard = false;
         else
             isModalCard = !!modalCardTitle || !!modalCardFoot;
-        modalElement = (jsxs("div", { className: modalClasses, ref: combinedRef, role: resolvedRole, "aria-modal": resolvedAriaModal, "aria-labelledby": titleId, tabIndex: -1, ...rest, "data-testid": "modal", children: [jsx("div", { className: prefixedClassNames(classPrefix, 'modal-background'), onClick: onClose, "data-testid": "modal-background" }), isModalCard ? (jsxs("div", { className: prefixedClassNames(classPrefix, 'modal-card'), children: [modalCardTitle && (jsxs("header", { className: prefixedClassNames(classPrefix, 'modal-card-head'), children: [jsx("p", { id: titleId, className: prefixedClassNames(classPrefix, 'modal-card-title'), children: modalCardTitle }), onClose && (jsx("button", { className: deleteClass, "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close" }))] })), jsx("section", { className: prefixedClassNames(classPrefix, 'modal-card-body'), "data-testid": "modal-body", children: children }), modalCardFoot && (jsx("footer", { className: prefixedClassNames(classPrefix, 'modal-card-foot'), children: modalCardFoot }))] })) : (jsx("div", { className: prefixedClassNames(classPrefix, 'modal-content'), "data-testid": "modal-content", children: children })), (!isModalCard || (!modalCardTitle && onClose)) && onClose && (jsx("button", { className: prefixedClassNames(classPrefix, 'modal-close', 'is-large'), "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close-float" }))] }));
+        modalElement = (jsxs("div", { className: modalClasses, ref: combinedRef, role: resolvedRole, "aria-modal": resolvedAriaModal, "aria-labelledby": titleId, tabIndex: -1, ...rest, "data-testid": testId, children: [jsx("div", { className: prefixedClassNames(classPrefix, 'modal-background'), onClick: onClose, "data-testid": "modal-background" }), isModalCard ? (jsxs("div", { className: prefixedClassNames(classPrefix, 'modal-card'), children: [modalCardTitle && (jsxs("header", { className: prefixedClassNames(classPrefix, 'modal-card-head'), children: [jsx("p", { id: titleId, className: prefixedClassNames(classPrefix, 'modal-card-title'), children: modalCardTitle }), onClose && (jsx("button", { className: deleteClass, "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close" }))] })), jsx("section", { className: prefixedClassNames(classPrefix, 'modal-card-body'), "data-testid": "modal-body", children: children }), modalCardFoot && (jsx("footer", { className: prefixedClassNames(classPrefix, 'modal-card-foot'), children: modalCardFoot }))] })) : (jsx("div", { className: prefixedClassNames(classPrefix, 'modal-content'), "data-testid": "modal-content", children: children })), (!isModalCard || (!modalCardTitle && onClose)) && onClose && (jsx("button", { className: prefixedClassNames(classPrefix, 'modal-close', 'is-large'), "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close-float" }))] }));
     }
     // In both forms, so a `Modal.Close` anywhere inside closes this modal, and
     // a popup anywhere inside portals into it.

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal.tsx"],"sourcesContent":["import React, {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  classNames,\n  usePrefixedClassNames,\n  prefixedClassNames,\n} from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { isElementOf } from '../helpers/elementType';\nimport { buttonType } from '../helpers/buttonType';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { useConfig } from '../helpers/Config';\nimport { useScrollLock } from '../helpers/scrollLock';\nimport {\n  getActiveElementInTree,\n  getDeepestActiveElement,\n} from '../helpers/shadowDom';\nimport { Portal, PortalScope, usePortalProp } from '../helpers/portal';\nimport { useLatestRef } from '../helpers/useLatestRef';\nimport { useOverlayStack } from '../helpers/overlayStack';\nimport { focusTabStop, trapTab } from '../helpers/useFocusTrap';\n\n/**\n * Props for the Modal component.\n * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the root `.modal` element.\n */\nexport interface ModalProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'title'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Whether the modal is open/visible. */\n  active?: boolean;\n  /** Alias for `active`. Whether the modal is open/visible. */\n  isActive?: boolean; // Alias for active\n  /**\n   * Called to ask for the modal to close. The props form calls it from the\n   * background and the close button it renders. In the compound form,\n   * `Modal.Close` calls it unless you give it an `onClick` of your own, and\n   * `Modal.Background` doesn't call it on its own: pass it\n   * `onClick={onClose}` for a click on the background to close the modal.\n   * Escape calls it in both forms unless `closeOnEscape` is `false`.\n   */\n  onClose?: () => void;\n  /** Additional CSS classes for the modal. */\n  className?: string;\n  /** Text color for modal content. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color for modal content. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Title/header for modal-card variant. (Legacy API only) */\n  modalCardTitle?: React.ReactNode;\n  /** Footer for modal-card variant. (Legacy API only) */\n  modalCardFoot?: React.ReactNode;\n  /**\n   * Modal style: `'card'` for modal-card, `'content'` for modal-content. (Legacy API only)\n   * @defaultValue auto\n   */\n  type?: 'card' | 'content';\n  /** Modal body/content or compound components. */\n  children?: React.ReactNode;\n  /**\n   * Close the modal when the Escape key is pressed (calls `onClose`). Only the\n   * topmost open overlay responds, whichever Modal, Dialog, Sidebar or\n   * full-page Loading opened last, so Escape closes one layer at a time. The\n   * modal marks the Escape it closes on as used with `preventDefault()`, and\n   * a Toast waits until no overlay is open. Turned off, a modal on top still\n   * keeps Escape from the layers under it. A popup inside it, such as a\n   * Dropdown's menu or a date picker's calendar, takes its own Escape first,\n   * and so does content that calls `preventDefault()` on it.\n   * @defaultValue true\n   */\n  closeOnEscape?: boolean;\n  /**\n   * Lock page scroll while the modal is active, padding the page by the room\n   * its scrollbar took so the content stays put. An element fixed to the\n   * window's right edge, such as a `fixed` Navbar, isn't padded, and moves by\n   * the scrollbar's width while the page is locked. Ref-counted and shared\n   * with `Dialog`, `Sidebar` and `Loading`, so whichever overlay closes first\n   * does not unlock the page underneath one that is still open.\n   * @defaultValue true\n   */\n  lockScroll?: boolean;\n  /**\n   * Renders the modal into a portal target instead of inline, so it isn't\n   * clipped by an ancestor with `overflow: hidden`, `filter` or `transform`.\n   * `true` portals to the `portalContainer` a `ConfigProvider` sets,\n   * `document.body` by default; a string is used as a\n   * `document.querySelector` selector; an element is used directly. Renders\n   * inline on the server and while hydrating, moving into the portal once the\n   * client takes over, so hydration matches.\n   * @defaultValue false\n   */\n  portal?: boolean | string | HTMLElement;\n}\n\n/**\n * Props for Modal.Background component.\n * @extraProp {React.MouseEventHandler<HTMLDivElement>} [onClick] - Called when the background is clicked. The background doesn't call the modal's `onClose` on its own, so pass `onClick={onClose}` for a click on it to close the modal.\n */\nexport interface ModalBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Content component.\n */\nexport interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Card component.\n */\nexport interface ModalCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Card.Head component.\n */\nexport interface ModalCardHeadProps extends React.HTMLAttributes<HTMLElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Card.Title component.\n */\nexport interface ModalCardTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Card.Body component.\n */\nexport interface ModalCardBodyProps extends React.HTMLAttributes<HTMLElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Card.Foot component.\n */\nexport interface ModalCardFootProps extends React.HTMLAttributes<HTMLElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Close component.\n * @extraProp {'button' | 'submit' | 'reset'} [type='button'] - Button type. Defaults to `'button'`, so a close button inside a form does not submit it. Pass `'submit'` or `'reset'` and yours is used; any other value, or a spread carrying `type: undefined`, renders `'button'`.\n * @extraProp {string} [aria-label='close'] - Accessible name. Pass your own to replace it. An empty one, or a spread carrying `'aria-label': undefined`, keeps the default rather than leaving the button unnamed.\n * @extraProp {React.MouseEventHandler<HTMLButtonElement>} [onClick] - Called when the button is clicked. Without one, the button calls the `onClose` of the `Modal` around it. Yours replaces that rather than running before it, so call `onClose` from it if the button should still close the modal.\n */\nexport interface ModalCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Size of the close button (only applies to 'floating' variant). */\n  size?: 'small' | 'medium' | 'large';\n  /** Button variant. 'delete' (default) for modal card headers, 'floating' for overlay close button. */\n  variant?: 'delete' | 'floating';\n}\n\n// The enclosing modal's `onClose`, for a `Modal.Close` written as a part, so\n// it closes the modal the way the button the props form renders does.\nconst ModalCloseContext = createContext<(() => void) | undefined>(undefined);\n\n/**\n * Modal.Background - Renders the modal background overlay. Pass it\n * `onClick={onClose}` for a click on it to close the modal.\n *\n * @function\n * @param {ModalBackgroundProps} props - Component props.\n * @returns {JSX.Element} Modal background element.\n */\nexport const ModalBackground: React.FC<ModalBackgroundProps> = ({\n  className,\n  ...props\n}) => {\n  const classes = classNames(\n    usePrefixedClassNames('modal-background'),\n    className\n  );\n  return <div className={classes} {...props} />;\n};\n\n/**\n * Modal.Content - Renders modal content wrapper for custom content.\n *\n * @function\n * @param {ModalContentProps} props - Component props.\n * @returns {JSX.Element} Modal content element.\n */\nexport const ModalContent: React.FC<ModalContentProps> = ({\n  className,\n  ...props\n}) => {\n  const classes = classNames(usePrefixedClassNames('modal-content'), className);\n  return <div className={classes} {...props} />;\n};\n\n/**\n * Modal.Card.Head - Renders modal card header section.\n *\n * @function\n * @param {ModalCardHeadProps} props - Component props.\n * @returns {JSX.Element} Modal card header element.\n */\nexport const ModalCardHead: React.FC<ModalCardHeadProps> = ({\n  className,\n  ...props\n}) => {\n  const classes = classNames(\n    usePrefixedClassNames('modal-card-head'),\n    className\n  );\n  return <header className={classes} {...props} />;\n};\n\n/**\n * Modal.Card.Title - Renders modal card title.\n *\n * @function\n * @param {ModalCardTitleProps} props - Component props.\n * @returns {JSX.Element} Modal card title element.\n */\nexport const ModalCardTitle: React.FC<ModalCardTitleProps> = ({\n  className,\n  ...props\n}) => {\n  const classes = classNames(\n    usePrefixedClassNames('modal-card-title'),\n    className\n  );\n  return <p className={classes} {...props} />;\n};\n\n/**\n * Modal.Card.Body - Renders modal card body section.\n *\n * @function\n * @param {ModalCardBodyProps} props - Component props.\n * @returns {JSX.Element} Modal card body element.\n */\nexport const ModalCardBody: React.FC<ModalCardBodyProps> = ({\n  className,\n  ...props\n}) => {\n  const classes = classNames(\n    usePrefixedClassNames('modal-card-body'),\n    className\n  );\n  return <section className={classes} {...props} />;\n};\n\n/**\n * Modal.Card.Foot - Renders modal card footer section.\n *\n * @function\n * @param {ModalCardFootProps} props - Component props.\n * @returns {JSX.Element} Modal card footer element.\n */\nexport const ModalCardFoot: React.FC<ModalCardFootProps> = ({\n  className,\n  ...props\n}) => {\n  const classes = classNames(\n    usePrefixedClassNames('modal-card-foot'),\n    className\n  );\n  return <footer className={classes} {...props} />;\n};\n\n/**\n * Modal.Card - Renders modal card wrapper with compound components.\n * Use with Modal.Card.Head, Modal.Card.Title, Modal.Card.Body, and Modal.Card.Foot.\n *\n * @function\n * @param {ModalCardProps} props - Component props.\n * @returns {JSX.Element} Modal card element.\n */\nconst ModalCardComponent: React.FC<ModalCardProps> = ({\n  className,\n  ...props\n}) => {\n  const classes = classNames(usePrefixedClassNames('modal-card'), className);\n  return <div className={classes} {...props} />;\n};\n\nexport const ModalCard = withSubComponents(ModalCardComponent, {\n  Head: ModalCardHead,\n  Title: ModalCardTitle,\n  Body: ModalCardBody,\n  Foot: ModalCardFoot,\n});\n\n/**\n * Modal.Close - Renders modal close button with two variant styles. It calls\n * the modal's `onClose` unless given an `onClick` of its own.\n *\n * @function\n * @param {ModalCloseProps} props - Component props.\n * @returns {JSX.Element} Close button element.\n *\n * @remarks\n * Supports two variants:\n * - 'delete' (default): For use in modal card headers, renders with 'delete' class\n * - 'floating': For floating overlay close button, renders with 'modal-close' class\n *\n * The size prop only applies to the 'floating' variant.\n */\nexport const ModalClose: React.FC<ModalCloseProps> = ({\n  className,\n  size = 'large',\n  variant = 'delete',\n  onClick,\n  ...props\n}) => {\n  const onClose = useContext(ModalCloseContext);\n  const classes = classNames(\n    usePrefixedClassNames(\n      variant === 'delete' ? 'delete' : 'modal-close',\n      variant === 'floating' && size && { [`is-${size}`]: true }\n    ),\n    className\n  );\n  return (\n    <button\n      className={classes}\n      {...props}\n      // After the spread, reading through it: a key the spread carries with no\n      // value would otherwise erase the default, leaving a nameless button\n      // that submits the form around it. An empty label falls back too: the\n      // button is drawn as an icon, so `''` would leave it unnamed. A caller's\n      // own value still wins; `buttonType` says more.\n      aria-label={props['aria-label'] || 'close'}\n      type={buttonType(props.type)}\n      // A caller's own `onClick` replaces the close rather than running\n      // before it, unlike `Popover.Close`: this button used to close only\n      // through that handler, so a caller already closing there, as with\n      // `onClick={onClose}`, would otherwise close twice.\n      onClick={onClick ?? (onClose && (() => onClose()))}\n    />\n  );\n};\n\n/**\n * The `Modal` component provides an empty, accessible overlay for arbitrary content — for a ready-made confirm or alert, reach for `Dialog` instead.\n *\n * @function\n * @param {ModalProps} props - Props for the Modal component.\n * @returns {JSX.Element} The rendered modal.\n *\n * @example\n * // Legacy API\n * <Modal active={isOpen} onClose={handleClose} modalCardTitle=\"Title\">\n *   Content\n * </Modal>\n *\n * @example\n * // Compound Component API\n * <Modal isActive={isOpen} onClose={handleClose}>\n *   <Modal.Background onClick={handleClose} />\n *   <Modal.Card>\n *     <Modal.Card.Head>\n *       <Modal.Card.Title>Title</Modal.Card.Title>\n *       <Modal.Close />\n *     </Modal.Card.Head>\n *     <Modal.Card.Body>Content</Modal.Card.Body>\n *   </Modal.Card>\n * </Modal>\n *\n * @see {@link https://bulma.io/documentation/components/modal/ | Bulma Modal documentation}\n */\nconst ModalRoot = forwardRef<HTMLDivElement, ModalProps>(function ModalRoot(\n  {\n    active,\n    isActive,\n    onClose,\n    className,\n    textColor,\n    bgColor,\n    modalCardTitle,\n    modalCardFoot,\n    type,\n    children,\n    closeOnEscape = true,\n    lockScroll = true,\n    portal = false,\n    role,\n    'aria-modal': ariaModalProp,\n    ...props\n  },\n  ref\n) {\n  const { classPrefix } = useConfig();\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  });\n\n  // Support both active and isActive props\n  const isModalActive = active ?? isActive ?? false;\n\n  const modalRootRef = useRef<HTMLDivElement>(null);\n\n  // Cleanup returned by a consumer's callback ref on attach, held until detach.\n  const consumerCleanupRef = useRef<(() => void) | null>(null);\n\n  // The root, as state, for the popups inside to portal into: outside it,\n  // its `aria-modal` hides them from screen readers.\n  const [scopeNode, setScopeNode] = useState<HTMLDivElement | null>(null);\n\n  // The forwarded ref and the internal one must both see the node: focus\n  // management and the Tab trap read `modalRootRef`, while consumers expect\n  // their own ref to resolve.\n  const combinedRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      (modalRootRef as React.MutableRefObject<HTMLDivElement | null>).current =\n        node;\n      setScopeNode(node);\n      if (typeof ref === 'function') {\n        // React 19 lets a callback ref return a cleanup function and detaches\n        // by running it instead of calling the ref with `null`; React 18\n        // discards the return value entirely. Returning it from here would be\n        // a React-19-only contract, so instead we hold the cleanup and run it\n        // ourselves on detach — a consumer's cleanup ref then behaves the same\n        // on both majors of the CI matrix. Same shape as `Dropdown`.\n        if (node === null) {\n          const consumerCleanup = consumerCleanupRef.current;\n          consumerCleanupRef.current = null;\n          if (consumerCleanup) {\n            consumerCleanup();\n          } else {\n            ref(null);\n          }\n          return;\n        }\n        const cleanup: unknown = ref(node);\n        consumerCleanupRef.current =\n          typeof cleanup === 'function' ? (cleanup as () => void) : null;\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      }\n    },\n    [ref]\n  );\n  const previouslyFocusedRef = useRef<HTMLElement | null>(null);\n  const generatedTitleId = useId();\n  // A portal has no server-rendered counterpart, so the server render and the\n  // hydrating render stay inline and only move into the portal once we're\n  // past hydration. Moving into the portal, or from one portal target to\n  // another, remounts the modal's subtree, so any effect holding a DOM node\n  // from before the move is holding a detached one. Effects that touch the\n  // modal's nodes key on `isPortaled`, on `portal` and on `defaultTarget`, so\n  // they re-run against the new tree. `defaultTarget` is the configured\n  // `portalContainer` only while it places the modal (portaled with `portal`\n  // set to `true`), so a change to it that moves nothing re-runs nothing.\n  const { isPortaled, container, defaultTarget } = usePortalProp(portal);\n\n  useScrollLock(isModalActive && lockScroll);\n\n  // Read when Escape arrives, so the key listener stays put while `onClose`\n  // changes identity, as an inline one does on every render of the parent.\n  const onCloseRef = useLatestRef(onClose);\n\n  // Joins the stack of open overlays, so the keyboard handling below only\n  // applies while this modal is on top.\n  const isTopmost = useOverlayStack(isModalActive);\n\n  // Escape closes, only for the topmost overlay. The listener is on\n  // `window`, where a keydown arrives last, so everything inside the modal\n  // has had the key first: React's handlers, and `document` listeners added\n  // after this one, such as a date picker's.\n  useEffect(() => {\n    if (!isModalActive) return undefined;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== 'Escape' || !isTopmost()) return;\n      // Something inside already used this Escape, such as a popup that\n      // closed on it, so the modal waits for the next one. One the modal\n      // closes on is marked used, so nothing under it acts on it as well.\n      if (closeOnEscape && onCloseRef.current && !e.defaultPrevented) {\n        e.preventDefault();\n        onCloseRef.current();\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [isModalActive, closeOnEscape, onCloseRef, isTopmost]);\n\n  // Keep Tab within the modal: `aria-modal` hides the rest of the page from\n  // assistive technology, so the keyboard order has to agree. Only while\n  // it's the topmost modal overlay, so an overlay that isn't modal, such as\n  // a Sidebar without an overlay, takes Escape from it but leaves it Tab.\n  // It's the trap `useFocusTrap` sets, so it wraps at the stops Tab really\n  // visits, skipping hidden, inert and closed content, and sends back a Tab\n  // the browser still takes out. On `window` for the same reason as Escape:\n  // a trap inside, such as a portaled popup's, has had the Tab first, and\n  // one it used is left where it put focus. It reads the modal's node as\n  // each key arrives, so a portal move that remounts the node, including one\n  // to a selector that only starts matching while the modal is open, keeps\n  // it trapped.\n  useEffect(() => {\n    if (!isModalActive) return undefined;\n    return trapTab(\n      () => modalRootRef.current,\n      window,\n      () => isTopmost('modal')\n    );\n  }, [isModalActive, isTopmost]);\n\n  // Move focus into the modal on open, restore it on close\n  useEffect(() => {\n    if (!isModalActive) return undefined;\n\n    // The element that had focus, wherever it sits: a portaled modal renders\n    // under `document.body` while its opener can be inside a shadow root.\n    previouslyFocusedRef.current =\n      getDeepestActiveElement() as HTMLElement | null;\n    const node = modalRootRef.current;\n    if (node) focusTabStop(node);\n\n    return () => {\n      // Only hand focus back if this modal still owns it: closing a background\n      // modal must not pull focus out of one that is still open on top. A\n      // removed subtree leaves focus on <body>, which still counts as ours.\n      const activeElement = getActiveElementInTree(node);\n      if (\n        activeElement &&\n        activeElement !== document.body &&\n        !node?.contains(activeElement)\n      ) {\n        return;\n      }\n      previouslyFocusedRef.current?.focus?.();\n    };\n    // `isPortaled` flips once when a hydrated portal modal moves out of the\n    // inline tree, and `portal` or `defaultTarget` changing moves a portaled\n    // one to another target; re-running rebinds focus onto the remounted\n    // nodes. The cleanup above restores focus to the pre-open element first\n    // (the detached subtree has left focus on <body>), so the re-run re-records\n    // the same element and restore-on-close still lands in the right place.\n  }, [isModalActive, isPortaled, portal, defaultTarget]);\n\n  // Check if children contain compound components\n  const hasCompoundComponents = React.Children.toArray(children).some(child =>\n    isElementOf(child, ModalBackground, ModalContent, ModalCard, ModalClose)\n  );\n\n  // Generate Bulma classes with prefix\n  const bulmaClasses = usePrefixedClassNames('modal', {\n    'is-active': isModalActive,\n  });\n  const deleteClass = usePrefixedClassNames('delete');\n\n  const modalClasses = classNames(bulmaClasses, bulmaHelperClasses, className);\n\n  const resolvedRole = role ?? (isModalActive ? 'dialog' : undefined);\n  const resolvedAriaModal =\n    ariaModalProp ??\n    (isModalActive && resolvedRole !== 'presentation' ? 'true' : undefined);\n  // A dialog needs an accessible name: the legacy card title is wired up\n  // automatically, compound users pass their own aria-label/aria-labelledby\n  // (both arrive in `rest`, which is spread last and so wins).\n  const titleId = modalCardTitle ? generatedTitleId : undefined;\n\n  let modalElement: React.ReactElement;\n\n  // If using compound components, render children as-is\n  if (hasCompoundComponents) {\n    modalElement = (\n      <div\n        className={modalClasses}\n        ref={combinedRef}\n        role={resolvedRole}\n        aria-modal={resolvedAriaModal}\n        tabIndex={-1}\n        {...rest}\n        data-testid=\"modal\"\n      >\n        {children}\n      </div>\n    );\n  } else {\n    // Legacy API: EXPLICIT type wins; fallback to auto detection if not provided\n    let isModalCard: boolean;\n    if (type === 'card') isModalCard = true;\n    else if (type === 'content') isModalCard = false;\n    else isModalCard = !!modalCardTitle || !!modalCardFoot;\n\n    modalElement = (\n      <div\n        className={modalClasses}\n        ref={combinedRef}\n        role={resolvedRole}\n        aria-modal={resolvedAriaModal}\n        aria-labelledby={titleId}\n        tabIndex={-1}\n        {...rest}\n        data-testid=\"modal\"\n      >\n        <div\n          className={prefixedClassNames(classPrefix, 'modal-background')}\n          onClick={onClose}\n          data-testid=\"modal-background\"\n        />\n        {isModalCard ? (\n          <div className={prefixedClassNames(classPrefix, 'modal-card')}>\n            {modalCardTitle && (\n              <header\n                className={prefixedClassNames(classPrefix, 'modal-card-head')}\n              >\n                <p\n                  id={titleId}\n                  className={prefixedClassNames(\n                    classPrefix,\n                    'modal-card-title'\n                  )}\n                >\n                  {modalCardTitle}\n                </p>\n                {onClose && (\n                  <button\n                    className={deleteClass}\n                    aria-label=\"close\"\n                    onClick={onClose}\n                    type=\"button\"\n                    data-testid=\"modal-close\"\n                  />\n                )}\n              </header>\n            )}\n            <section\n              className={prefixedClassNames(classPrefix, 'modal-card-body')}\n              data-testid=\"modal-body\"\n            >\n              {children}\n            </section>\n            {modalCardFoot && (\n              <footer\n                className={prefixedClassNames(classPrefix, 'modal-card-foot')}\n              >\n                {modalCardFoot}\n              </footer>\n            )}\n          </div>\n        ) : (\n          <div\n            className={prefixedClassNames(classPrefix, 'modal-content')}\n            data-testid=\"modal-content\"\n          >\n            {children}\n          </div>\n        )}\n        {/* Show floating close button for modal-content, or for modal-card when no header */}\n        {(!isModalCard || (!modalCardTitle && onClose)) && onClose && (\n          <button\n            className={prefixedClassNames(\n              classPrefix,\n              'modal-close',\n              'is-large'\n            )}\n            aria-label=\"close\"\n            onClick={onClose}\n            type=\"button\"\n            data-testid=\"modal-close-float\"\n          />\n        )}\n      </div>\n    );\n  }\n\n  // In both forms, so a `Modal.Close` anywhere inside closes this modal, and\n  // a popup anywhere inside portals into it.\n  modalElement = (\n    <ModalCloseContext.Provider value={onClose}>\n      <PortalScope node={scopeNode}>{modalElement}</PortalScope>\n    </ModalCloseContext.Provider>\n  );\n\n  return (\n    <Portal disabled={!isPortaled} container={container}>\n      {modalElement}\n    </Portal>\n  );\n});\n\nexport const Modal = withSubComponents(\n  ModalRoot,\n  {\n    Background: ModalBackground,\n    Content: ModalContent,\n    Card: ModalCard,\n    Close: ModalClose,\n  },\n  'Modal'\n);\nexport default Modal;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal.tsx"],"sourcesContent":["import React, {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  classNames,\n  usePrefixedClassNames,\n  prefixedClassNames,\n} from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { isElementOf } from '../helpers/elementType';\nimport { buttonType } from '../helpers/buttonType';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { useConfig } from '../helpers/Config';\nimport { useScrollLock } from '../helpers/scrollLock';\nimport {\n  getActiveElementInTree,\n  getDeepestActiveElement,\n} from '../helpers/shadowDom';\nimport { Portal, PortalScope, usePortalProp } from '../helpers/portal';\nimport { useLatestRef } from '../helpers/useLatestRef';\nimport { useOverlayStack } from '../helpers/overlayStack';\nimport { focusTabStop, trapTab } from '../helpers/useFocusTrap';\n\n/**\n * Props for the Modal component.\n * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the root `.modal` element.\n */\nexport interface ModalProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'title'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Whether the modal is open/visible. */\n  active?: boolean;\n  /** Alias for `active`. Whether the modal is open/visible. */\n  isActive?: boolean; // Alias for active\n  /**\n   * Called to ask for the modal to close. The props form calls it from the\n   * background and the close button it renders. In the compound form,\n   * `Modal.Close` calls it unless you give it an `onClick` of your own, and\n   * `Modal.Background` doesn't call it on its own: pass it\n   * `onClick={onClose}` for a click on the background to close the modal.\n   * Escape calls it in both forms unless `closeOnEscape` is `false`.\n   */\n  onClose?: () => void;\n  /** Additional CSS classes for the modal. */\n  className?: string;\n  /** Text color for modal content. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Background color for modal content. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Title/header for modal-card variant. (Legacy API only) */\n  modalCardTitle?: React.ReactNode;\n  /** Footer for modal-card variant. (Legacy API only) */\n  modalCardFoot?: React.ReactNode;\n  /**\n   * Modal style: `'card'` for modal-card, `'content'` for modal-content. (Legacy API only)\n   * @defaultValue auto\n   */\n  type?: 'card' | 'content';\n  /** Modal body/content or compound components. */\n  children?: React.ReactNode;\n  /**\n   * Close the modal when the Escape key is pressed (calls `onClose`). Only the\n   * topmost open overlay responds, whichever Modal, Dialog, Sidebar or\n   * full-page Loading opened last, so Escape closes one layer at a time. The\n   * modal marks the Escape it closes on as used with `preventDefault()`, and\n   * a Toast waits until no overlay is open. Turned off, a modal on top still\n   * keeps Escape from the layers under it. A popup inside it, such as a\n   * Dropdown's menu or a date picker's calendar, takes its own Escape first,\n   * and so does content that calls `preventDefault()` on it.\n   * @defaultValue true\n   */\n  closeOnEscape?: boolean;\n  /**\n   * Lock page scroll while the modal is active, padding the page by the room\n   * its scrollbar took so the content stays put. A `fixed` Navbar, the toast\n   * and notification stacks and an Affix stay put too. The padding doesn't\n   * reach an element of your own fixed to the window's edge, which moves by\n   * the scrollbar's width unless it adds\n   * `var(--bulma-scroll-lock-offset-right, 0px)` to its `right` (the `-left`\n   * one to its `left`), which the lock sets on `<html>` while it's on.\n   * Ref-counted and shared with `Dialog`, `Sidebar` and `Loading`, so\n   * whichever overlay closes first does not unlock the page underneath one\n   * that is still open.\n   * @defaultValue true\n   */\n  lockScroll?: boolean;\n  /**\n   * Renders the modal into a portal target instead of inline, so it isn't\n   * clipped by an ancestor with `overflow: hidden`, `filter` or `transform`.\n   * `true` portals to the `portalContainer` a `ConfigProvider` sets,\n   * `document.body` by default; a string is used as a\n   * `document.querySelector` selector; an element is used directly. Renders\n   * inline on the server and while hydrating, moving into the portal once the\n   * client takes over, so hydration matches.\n   * @defaultValue false\n   */\n  portal?: boolean | string | HTMLElement;\n}\n\n/**\n * Props for Modal.Background component.\n * @extraProp {React.MouseEventHandler<HTMLDivElement>} [onClick] - Called when the background is clicked. The background doesn't call the modal's `onClose` on its own, so pass `onClick={onClose}` for a click on it to close the modal.\n */\nexport interface ModalBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Content component.\n */\nexport interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Card component.\n */\nexport interface ModalCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Card.Head component.\n */\nexport interface ModalCardHeadProps extends React.HTMLAttributes<HTMLElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Card.Title component.\n */\nexport interface ModalCardTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Card.Body component.\n */\nexport interface ModalCardBodyProps extends React.HTMLAttributes<HTMLElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Card.Foot component.\n */\nexport interface ModalCardFootProps extends React.HTMLAttributes<HTMLElement> {\n  /** Additional CSS classes. */\n  className?: string;\n}\n\n/**\n * Props for Modal.Close component.\n * @extraProp {'button' | 'submit' | 'reset'} [type='button'] - Button type. Defaults to `'button'`, so a close button inside a form does not submit it. Pass `'submit'` or `'reset'` and yours is used; any other value, or a spread carrying `type: undefined`, renders `'button'`.\n * @extraProp {string} [aria-label='close'] - Accessible name. Pass your own to replace it. An empty one, or a spread carrying `'aria-label': undefined`, keeps the default rather than leaving the button unnamed.\n * @extraProp {React.MouseEventHandler<HTMLButtonElement>} [onClick] - Called when the button is clicked. Without one, the button calls the `onClose` of the `Modal` around it. Yours replaces that rather than running before it, so call `onClose` from it if the button should still close the modal.\n */\nexport interface ModalCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Size of the close button (only applies to 'floating' variant). */\n  size?: 'small' | 'medium' | 'large';\n  /** Button variant. 'delete' (default) for modal card headers, 'floating' for overlay close button. */\n  variant?: 'delete' | 'floating';\n}\n\n// The enclosing modal's `onClose`, for a `Modal.Close` written as a part, so\n// it closes the modal the way the button the props form renders does.\nconst ModalCloseContext = createContext<(() => void) | undefined>(undefined);\n\n/**\n * Modal.Background - Renders the modal background overlay. Pass it\n * `onClick={onClose}` for a click on it to close the modal.\n *\n * @function\n * @param {ModalBackgroundProps} props - Component props.\n * @returns {JSX.Element} Modal background element.\n */\nexport const ModalBackground: React.FC<ModalBackgroundProps> = ({\n  className,\n  ...props\n}) => {\n  const classes = classNames(\n    usePrefixedClassNames('modal-background'),\n    className\n  );\n  return <div className={classes} {...props} />;\n};\n\n/**\n * Modal.Content - Renders modal content wrapper for custom content.\n *\n * @function\n * @param {ModalContentProps} props - Component props.\n * @returns {JSX.Element} Modal content element.\n */\nexport const ModalContent: React.FC<ModalContentProps> = ({\n  className,\n  ...props\n}) => {\n  const classes = classNames(usePrefixedClassNames('modal-content'), className);\n  return <div className={classes} {...props} />;\n};\n\n/**\n * Modal.Card.Head - Renders modal card header section.\n *\n * @function\n * @param {ModalCardHeadProps} props - Component props.\n * @returns {JSX.Element} Modal card header element.\n */\nexport const ModalCardHead: React.FC<ModalCardHeadProps> = ({\n  className,\n  ...props\n}) => {\n  const classes = classNames(\n    usePrefixedClassNames('modal-card-head'),\n    className\n  );\n  return <header className={classes} {...props} />;\n};\n\n/**\n * Modal.Card.Title - Renders modal card title.\n *\n * @function\n * @param {ModalCardTitleProps} props - Component props.\n * @returns {JSX.Element} Modal card title element.\n */\nexport const ModalCardTitle: React.FC<ModalCardTitleProps> = ({\n  className,\n  ...props\n}) => {\n  const classes = classNames(\n    usePrefixedClassNames('modal-card-title'),\n    className\n  );\n  return <p className={classes} {...props} />;\n};\n\n/**\n * Modal.Card.Body - Renders modal card body section.\n *\n * @function\n * @param {ModalCardBodyProps} props - Component props.\n * @returns {JSX.Element} Modal card body element.\n */\nexport const ModalCardBody: React.FC<ModalCardBodyProps> = ({\n  className,\n  ...props\n}) => {\n  const classes = classNames(\n    usePrefixedClassNames('modal-card-body'),\n    className\n  );\n  return <section className={classes} {...props} />;\n};\n\n/**\n * Modal.Card.Foot - Renders modal card footer section.\n *\n * @function\n * @param {ModalCardFootProps} props - Component props.\n * @returns {JSX.Element} Modal card footer element.\n */\nexport const ModalCardFoot: React.FC<ModalCardFootProps> = ({\n  className,\n  ...props\n}) => {\n  const classes = classNames(\n    usePrefixedClassNames('modal-card-foot'),\n    className\n  );\n  return <footer className={classes} {...props} />;\n};\n\n/**\n * Modal.Card - Renders modal card wrapper with compound components.\n * Use with Modal.Card.Head, Modal.Card.Title, Modal.Card.Body, and Modal.Card.Foot.\n *\n * @function\n * @param {ModalCardProps} props - Component props.\n * @returns {JSX.Element} Modal card element.\n */\nconst ModalCardComponent: React.FC<ModalCardProps> = ({\n  className,\n  ...props\n}) => {\n  const classes = classNames(usePrefixedClassNames('modal-card'), className);\n  return <div className={classes} {...props} />;\n};\n\nexport const ModalCard = withSubComponents(ModalCardComponent, {\n  Head: ModalCardHead,\n  Title: ModalCardTitle,\n  Body: ModalCardBody,\n  Foot: ModalCardFoot,\n});\n\n/**\n * Modal.Close - Renders modal close button with two variant styles. It calls\n * the modal's `onClose` unless given an `onClick` of its own.\n *\n * @function\n * @param {ModalCloseProps} props - Component props.\n * @returns {JSX.Element} Close button element.\n *\n * @remarks\n * Supports two variants:\n * - 'delete' (default): For use in modal card headers, renders with 'delete' class\n * - 'floating': For floating overlay close button, renders with 'modal-close' class\n *\n * The size prop only applies to the 'floating' variant.\n */\nexport const ModalClose: React.FC<ModalCloseProps> = ({\n  className,\n  size = 'large',\n  variant = 'delete',\n  onClick,\n  ...props\n}) => {\n  const onClose = useContext(ModalCloseContext);\n  const classes = classNames(\n    usePrefixedClassNames(\n      variant === 'delete' ? 'delete' : 'modal-close',\n      variant === 'floating' && size && { [`is-${size}`]: true }\n    ),\n    className\n  );\n  return (\n    <button\n      className={classes}\n      {...props}\n      // After the spread, reading through it: a key the spread carries with no\n      // value would otherwise erase the default, leaving a nameless button\n      // that submits the form around it. An empty label falls back too: the\n      // button is drawn as an icon, so `''` would leave it unnamed. A caller's\n      // own value still wins; `buttonType` says more.\n      aria-label={props['aria-label'] || 'close'}\n      type={buttonType(props.type)}\n      // A caller's own `onClick` replaces the close rather than running\n      // before it, unlike `Popover.Close`: this button used to close only\n      // through that handler, so a caller already closing there, as with\n      // `onClick={onClose}`, would otherwise close twice.\n      onClick={onClick ?? (onClose && (() => onClose()))}\n    />\n  );\n};\n\n/**\n * The `Modal` component provides an empty, accessible overlay for arbitrary content — for a ready-made confirm or alert, reach for `Dialog` instead.\n *\n * @function\n * @param {ModalProps} props - Props for the Modal component.\n * @returns {JSX.Element} The rendered modal.\n *\n * @example\n * // Legacy API\n * <Modal active={isOpen} onClose={handleClose} modalCardTitle=\"Title\">\n *   Content\n * </Modal>\n *\n * @example\n * // Compound Component API\n * <Modal isActive={isOpen} onClose={handleClose}>\n *   <Modal.Background onClick={handleClose} />\n *   <Modal.Card>\n *     <Modal.Card.Head>\n *       <Modal.Card.Title>Title</Modal.Card.Title>\n *       <Modal.Close />\n *     </Modal.Card.Head>\n *     <Modal.Card.Body>Content</Modal.Card.Body>\n *   </Modal.Card>\n * </Modal>\n *\n * @see {@link https://bulma.io/documentation/components/modal/ | Bulma Modal documentation}\n */\nconst ModalRoot = forwardRef<HTMLDivElement, ModalProps>(function ModalRoot(\n  {\n    active,\n    isActive,\n    onClose,\n    className,\n    textColor,\n    bgColor,\n    modalCardTitle,\n    modalCardFoot,\n    type,\n    children,\n    closeOnEscape = true,\n    lockScroll = true,\n    portal = false,\n    role,\n    'aria-modal': ariaModalProp,\n    ...props\n  },\n  ref\n) {\n  const { classPrefix } = useConfig();\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  });\n\n  // Support both active and isActive props\n  const isModalActive = active ?? isActive ?? false;\n\n  const modalRootRef = useRef<HTMLDivElement>(null);\n\n  // Cleanup returned by a consumer's callback ref on attach, held until detach.\n  const consumerCleanupRef = useRef<(() => void) | null>(null);\n\n  // The root, as state, for the popups inside to portal into: outside it,\n  // its `aria-modal` hides them from screen readers.\n  const [scopeNode, setScopeNode] = useState<HTMLDivElement | null>(null);\n\n  // The forwarded ref and the internal one must both see the node: focus\n  // management and the Tab trap read `modalRootRef`, while consumers expect\n  // their own ref to resolve.\n  const combinedRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      (modalRootRef as React.MutableRefObject<HTMLDivElement | null>).current =\n        node;\n      setScopeNode(node);\n      if (typeof ref === 'function') {\n        // React 19 lets a callback ref return a cleanup function and detaches\n        // by running it instead of calling the ref with `null`; React 18\n        // discards the return value entirely. Returning it from here would be\n        // a React-19-only contract, so instead we hold the cleanup and run it\n        // ourselves on detach — a consumer's cleanup ref then behaves the same\n        // on both majors of the CI matrix. Same shape as `Dropdown`.\n        if (node === null) {\n          const consumerCleanup = consumerCleanupRef.current;\n          consumerCleanupRef.current = null;\n          if (consumerCleanup) {\n            consumerCleanup();\n          } else {\n            ref(null);\n          }\n          return;\n        }\n        const cleanup: unknown = ref(node);\n        consumerCleanupRef.current =\n          typeof cleanup === 'function' ? (cleanup as () => void) : null;\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      }\n    },\n    [ref]\n  );\n  const previouslyFocusedRef = useRef<HTMLElement | null>(null);\n  const generatedTitleId = useId();\n  // A portal has no server-rendered counterpart, so the server render and the\n  // hydrating render stay inline and only move into the portal once we're\n  // past hydration. Moving into the portal, or from one portal target to\n  // another, remounts the modal's subtree, so any effect holding a DOM node\n  // from before the move is holding a detached one. Effects that touch the\n  // modal's nodes key on `isPortaled`, on `portal` and on `defaultTarget`, so\n  // they re-run against the new tree. `defaultTarget` is the configured\n  // `portalContainer` only while it places the modal (portaled with `portal`\n  // set to `true`), so a change to it that moves nothing re-runs nothing.\n  const { isPortaled, container, defaultTarget } = usePortalProp(portal);\n\n  useScrollLock(isModalActive && lockScroll);\n\n  // Read when Escape arrives, so the key listener stays put while `onClose`\n  // changes identity, as an inline one does on every render of the parent.\n  const onCloseRef = useLatestRef(onClose);\n\n  // Joins the stack of open overlays, so the keyboard handling below only\n  // applies while this modal is on top.\n  const isTopmost = useOverlayStack(isModalActive);\n\n  // Escape closes, only for the topmost overlay. The listener is on\n  // `window`, where a keydown arrives last, so everything inside the modal\n  // has had the key first: React's handlers, and `document` listeners added\n  // after this one, such as a date picker's.\n  useEffect(() => {\n    if (!isModalActive) return undefined;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== 'Escape' || !isTopmost()) return;\n      // Something inside already used this Escape, such as a popup that\n      // closed on it, so the modal waits for the next one. One the modal\n      // closes on is marked used, so nothing under it acts on it as well.\n      if (closeOnEscape && onCloseRef.current && !e.defaultPrevented) {\n        e.preventDefault();\n        onCloseRef.current();\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [isModalActive, closeOnEscape, onCloseRef, isTopmost]);\n\n  // Keep Tab within the modal: `aria-modal` hides the rest of the page from\n  // assistive technology, so the keyboard order has to agree. Only while\n  // it's the topmost modal overlay, so an overlay that isn't modal, such as\n  // a Sidebar without an overlay, takes Escape from it but leaves it Tab.\n  // It's the trap `useFocusTrap` sets, so it wraps at the stops Tab really\n  // visits, skipping hidden, inert and closed content, and sends back a Tab\n  // the browser still takes out. On `window` for the same reason as Escape:\n  // a trap inside, such as a portaled popup's, has had the Tab first, and\n  // one it used is left where it put focus. It reads the modal's node as\n  // each key arrives, so a portal move that remounts the node, including one\n  // to a selector that only starts matching while the modal is open, keeps\n  // it trapped.\n  useEffect(() => {\n    if (!isModalActive) return undefined;\n    return trapTab(\n      () => modalRootRef.current,\n      window,\n      () => isTopmost('modal')\n    );\n  }, [isModalActive, isTopmost]);\n\n  // Move focus into the modal on open, restore it on close\n  useEffect(() => {\n    if (!isModalActive) return undefined;\n\n    // The element that had focus, wherever it sits: a portaled modal renders\n    // under `document.body` while its opener can be inside a shadow root.\n    previouslyFocusedRef.current =\n      getDeepestActiveElement() as HTMLElement | null;\n    const node = modalRootRef.current;\n    if (node) focusTabStop(node);\n\n    return () => {\n      // Only hand focus back if this modal still owns it: closing a background\n      // modal must not pull focus out of one that is still open on top. A\n      // removed subtree leaves focus on <body>, which still counts as ours.\n      const activeElement = getActiveElementInTree(node);\n      if (\n        activeElement &&\n        activeElement !== document.body &&\n        !node?.contains(activeElement)\n      ) {\n        return;\n      }\n      previouslyFocusedRef.current?.focus?.();\n    };\n    // `isPortaled` flips once when a hydrated portal modal moves out of the\n    // inline tree, and `portal` or `defaultTarget` changing moves a portaled\n    // one to another target; re-running rebinds focus onto the remounted\n    // nodes. The cleanup above restores focus to the pre-open element first\n    // (the detached subtree has left focus on <body>), so the re-run re-records\n    // the same element and restore-on-close still lands in the right place.\n  }, [isModalActive, isPortaled, portal, defaultTarget]);\n\n  // Check if children contain compound components\n  const hasCompoundComponents = React.Children.toArray(children).some(child =>\n    isElementOf(child, ModalBackground, ModalContent, ModalCard, ModalClose)\n  );\n\n  // Generate Bulma classes with prefix\n  const bulmaClasses = usePrefixedClassNames('modal', {\n    'is-active': isModalActive,\n  });\n  const deleteClass = usePrefixedClassNames('delete');\n\n  const modalClasses = classNames(bulmaClasses, bulmaHelperClasses, className);\n\n  const resolvedRole = role ?? (isModalActive ? 'dialog' : undefined);\n  const resolvedAriaModal =\n    ariaModalProp ??\n    (isModalActive && resolvedRole !== 'presentation' ? 'true' : undefined);\n  // A dialog needs an accessible name: the legacy card title is wired up\n  // automatically, compound users pass their own aria-label/aria-labelledby\n  // (both arrive in `rest`, which is spread last and so wins).\n  const titleId = modalCardTitle ? generatedTitleId : undefined;\n  // A test id the caller passes wins. It's written after `rest`, since a\n  // spread carrying `data-testid: undefined` would otherwise erase the default.\n  const testId = (rest as { 'data-testid'?: string })['data-testid'] ?? 'modal';\n\n  let modalElement: React.ReactElement;\n\n  // If using compound components, render children as-is\n  if (hasCompoundComponents) {\n    modalElement = (\n      <div\n        className={modalClasses}\n        ref={combinedRef}\n        role={resolvedRole}\n        aria-modal={resolvedAriaModal}\n        tabIndex={-1}\n        {...rest}\n        data-testid={testId}\n      >\n        {children}\n      </div>\n    );\n  } else {\n    // Legacy API: EXPLICIT type wins; fallback to auto detection if not provided\n    let isModalCard: boolean;\n    if (type === 'card') isModalCard = true;\n    else if (type === 'content') isModalCard = false;\n    else isModalCard = !!modalCardTitle || !!modalCardFoot;\n\n    modalElement = (\n      <div\n        className={modalClasses}\n        ref={combinedRef}\n        role={resolvedRole}\n        aria-modal={resolvedAriaModal}\n        aria-labelledby={titleId}\n        tabIndex={-1}\n        {...rest}\n        data-testid={testId}\n      >\n        <div\n          className={prefixedClassNames(classPrefix, 'modal-background')}\n          onClick={onClose}\n          data-testid=\"modal-background\"\n        />\n        {isModalCard ? (\n          <div className={prefixedClassNames(classPrefix, 'modal-card')}>\n            {modalCardTitle && (\n              <header\n                className={prefixedClassNames(classPrefix, 'modal-card-head')}\n              >\n                <p\n                  id={titleId}\n                  className={prefixedClassNames(\n                    classPrefix,\n                    'modal-card-title'\n                  )}\n                >\n                  {modalCardTitle}\n                </p>\n                {onClose && (\n                  <button\n                    className={deleteClass}\n                    aria-label=\"close\"\n                    onClick={onClose}\n                    type=\"button\"\n                    data-testid=\"modal-close\"\n                  />\n                )}\n              </header>\n            )}\n            <section\n              className={prefixedClassNames(classPrefix, 'modal-card-body')}\n              data-testid=\"modal-body\"\n            >\n              {children}\n            </section>\n            {modalCardFoot && (\n              <footer\n                className={prefixedClassNames(classPrefix, 'modal-card-foot')}\n              >\n                {modalCardFoot}\n              </footer>\n            )}\n          </div>\n        ) : (\n          <div\n            className={prefixedClassNames(classPrefix, 'modal-content')}\n            data-testid=\"modal-content\"\n          >\n            {children}\n          </div>\n        )}\n        {/* Show floating close button for modal-content, or for modal-card when no header */}\n        {(!isModalCard || (!modalCardTitle && onClose)) && onClose && (\n          <button\n            className={prefixedClassNames(\n              classPrefix,\n              'modal-close',\n              'is-large'\n            )}\n            aria-label=\"close\"\n            onClick={onClose}\n            type=\"button\"\n            data-testid=\"modal-close-float\"\n          />\n        )}\n      </div>\n    );\n  }\n\n  // In both forms, so a `Modal.Close` anywhere inside closes this modal, and\n  // a popup anywhere inside portals into it.\n  modalElement = (\n    <ModalCloseContext.Provider value={onClose}>\n      <PortalScope node={scopeNode}>{modalElement}</PortalScope>\n    </ModalCloseContext.Provider>\n  );\n\n  return (\n    <Portal disabled={!isPortaled} container={container}>\n      {modalElement}\n    </Portal>\n  );\n});\n\nexport const Modal = withSubComponents(\n  ModalRoot,\n  {\n    Background: ModalBackground,\n    Content: ModalContent,\n    Card: ModalCard,\n    Close: ModalClose,\n  },\n  'Modal'\n);\nexport default Modal;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../../../src/components/Panel.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport {\n  ANCHOR_ONLY_ATTRS,\n  type AnchorOnlyAttributes,\n  omitAttrs,\n} from '../helpers/anchorAttrs';\nimport type { ConstrainedPolymorphicComponentWithoutRef } from '../helpers/polymorphic';\nimport {\n  Icon,\n  IconChildrenProps,\n  IconDeprecatedProps,\n  IconNameProps,\n} from '../elements/Icon';\n\n/**\n * Props for the Panel component.\n */\nexport interface PanelProps\n  extends\n    React.HTMLAttributes<HTMLElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /**\n   * HTML element to render (default: `nav`). A `nav` is a `navigation`\n   * landmark, which suits a panel of links; a panel that is not navigation\n   * takes another tag. Bulma's own colored panels use `article`. A `section`\n   * is a `region` landmark only once it has an accessible name, such as\n   * `aria-labelledby` pointing at the `id` of its `Panel.Heading`.\n   */\n  as?: 'nav' | 'article' | 'section' | 'aside' | 'div';\n  /** Bulma color modifier for the panel. */\n  color?:\n    | 'primary'\n    | 'link'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'black'\n    | 'dark'\n    | 'light'\n    | 'white';\n  /** Additional CSS classes. */\n  className?: string;\n  /** Panel content (usually includes subcomponents). */\n  children?: React.ReactNode;\n}\n\n/**\n * Props for the PanelHeading component.\n */\nexport interface PanelHeadingProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Heading content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Props for the PanelTabs component.\n */\nexport interface PanelTabsProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Tabs content. */\n  children?: React.ReactNode;\n}\n\n/**\n * What `<label>` adds over the attributes every element has (`htmlFor` and\n * `form`), subtracted from React's types the way `AnchorOnlyAttributes` is, so\n * it grows when React's does.\n */\ntype LabelOnlyAttributes = Omit<\n  React.LabelHTMLAttributes<HTMLLabelElement>,\n  keyof React.HTMLAttributes<HTMLLabelElement>\n>;\n\n/**\n * The set withheld from a non-label `Panel.Block`, keyed so it stops compiling\n * until a label attribute React adds is named here.\n */\nconst STRIP_FROM_NON_LABEL: Readonly<Record<keyof LabelOnlyAttributes, true>> =\n  {\n    form: true,\n    htmlFor: true,\n  };\n\n/**\n * The set withheld from a non-anchor `Panel.Block`: the derived anchor-only\n * attributes plus `rel`, which React declares on every element, withheld the\n * way `Level.Item` and `Card.FooterItem` withhold it.\n */\nconst STRIP_FROM_NON_ANCHOR: Readonly<\n  Record<keyof AnchorOnlyAttributes | 'rel', true>\n> = { ...ANCHOR_ONLY_ATTRS, rel: true };\n\n/** A `<div>` block takes neither set. */\nconst STRIP_FROM_DIV: Readonly<\n  Record<keyof AnchorOnlyAttributes | 'rel' | keyof LabelOnlyAttributes, true>\n> = { ...STRIP_FROM_NON_ANCHOR, ...STRIP_FROM_NON_LABEL };\n\n/**\n * The elements a panel block may render as: the tags Bulma's panel markup\n * puts `.panel-block` on.\n */\nexport type PanelBlockElement = 'a' | 'div' | 'label';\n\n/**\n * The PanelBlock component's own props.\n */\nexport interface PanelBlockOwnProps {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Whether the block is active. */\n  active?: boolean;\n  /** Block content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Props for the PanelBlock component. Everything the block does not own\n * follows `as`: the anchor's attributes and an `HTMLAnchorElement`\n * `currentTarget` under the default `'a'`, `htmlFor` under `'label'`, and the\n * shared HTML attributes under any of them.\n *\n * The type parameter defaults to `'a'`, the element a block renders with no\n * `as`, rather than to the whole union the way `DropdownItemProps` does. Before\n * `as` existed this type was the anchor's attributes, so bare\n * `PanelBlockProps` stays exactly that, `href` and anchor-typed handlers\n * included. Write `PanelBlockProps<'div'>` or `PanelBlockProps<'label'>` for\n * the others.\n */\nexport type PanelBlockProps<T extends PanelBlockElement = 'a'> =\n  PanelBlockOwnProps &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof PanelBlockOwnProps | 'as'> & {\n      /**\n       * HTML element to render (default: `a`). Bulma styles a `label` block\n       * as clickable, like an `a`, and a `div` block as static content, such\n       * as a table. The props follow the tag, so the anchor attributes\n       * (`href`, `target`, `download` and the rest) are typed only on an `a`\n       * and `htmlFor` only on a `label`; at runtime the block also drops them,\n       * and `rel`, on the other tags. `Panel.CheckboxBlock`,\n       * `Panel.InputBlock` and `Panel.ButtonBlock` render the usual `label`\n       * and `div` blocks with their contents.\n       */\n      as?: T;\n    };\n\n/**\n * The shape the implementation destructures. The public contract is the\n * generic `PanelBlockProps<T>` above, which the body cannot see through.\n */\ntype PanelBlockImplProps = PanelBlockOwnProps & {\n  as?: PanelBlockElement;\n};\n\n/**\n * Props for the PanelIcon component.\n * Extends IconProps but uses 'panel-icon' as the container class.\n */\nexport type PanelIconProps =\n  | Omit<IconNameProps, 'containerClassName'>\n  | Omit<IconChildrenProps, 'containerClassName'>\n  // `PanelIcon` spreads straight into `<Icon>`, so every member of `IconProps`\n  // reaches it. Enumerating them by hand is what left the deprecated `icon`\n  // path compiling on `Icon` and failing here, with an error naming `children`.\n  | Omit<IconDeprecatedProps, 'containerClassName'>;\n\n/**\n * Props for the PanelInputBlock component.\n */\nexport interface PanelInputBlockProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Input value. */\n  value?: string;\n  /** Input change handler. */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  /** Input placeholder. */\n  placeholder?: string;\n  /** Icon class for left icon (default 'fas fa-search'). */\n  iconClassName?: string;\n}\n\n/**\n * Props for the PanelCheckboxBlock component.\n */\nexport interface PanelCheckboxBlockProps extends Omit<\n  React.LabelHTMLAttributes<HTMLLabelElement>,\n  'onChange'\n> {\n  /** Whether the checkbox is checked. */\n  checked?: boolean;\n  /** Checkbox change handler. */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  /** Label/content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Props for the PanelButtonBlock component.\n */\nexport interface PanelButtonBlockProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Button content. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Panel` component implements Bulma's versatile panel block for React.\n *\n * @function\n * @param {PanelProps} props - Props for the Panel component.\n * @returns {JSX.Element} The rendered panel.\n * @see {@link https://bulma.io/documentation/components/panel/ | Bulma Panel documentation}\n */\nconst PanelComponent: React.FC<PanelProps> = ({\n  as: Tag = 'nav',\n  color,\n  className,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color,\n    ...props,\n  });\n\n  // Generate Bulma classes with prefix\n  const bulmaClasses = usePrefixedClassNames('panel', {\n    [`is-${color}`]: color,\n  });\n\n  const panelClasses = classNames(bulmaClasses, bulmaHelperClasses, className);\n\n  return (\n    <Tag className={panelClasses} {...rest}>\n      {children}\n    </Tag>\n  );\n};\n\n/**\n * Main heading (renders as `<p class=\"panel-heading\">`)\n *\n * @function\n * @param {PanelHeadingProps} props - Props for the PanelHeading component.\n * @returns {JSX.Element} The rendered panel heading.\n */\nexport const PanelHeading: React.FC<PanelHeadingProps> = ({\n  className,\n  children,\n  ...props\n}) => (\n  <p\n    className={classNames(usePrefixedClassNames('panel-heading'), className)}\n    {...props}\n  >\n    {children}\n  </p>\n);\n\n/**\n * Panel tabs (renders as `<p class=\"panel-tabs\">`)\n *\n * @function\n * @param {PanelTabsProps} props - Props for the PanelTabs component.\n * @returns {JSX.Element} The rendered panel tabs.\n */\nexport const PanelTabs: React.FC<PanelTabsProps> = ({\n  className,\n  children,\n  ...props\n}) => (\n  <p\n    className={classNames(usePrefixedClassNames('panel-tabs'), className)}\n    {...props}\n  >\n    {children}\n  </p>\n);\n\n/**\n * Individual panel block (renders as `<a class=\"panel-block\">` unless `as` says otherwise)\n *\n * @function\n * @param {PanelBlockProps} props - Props for the PanelBlock component.\n * @returns {JSX.Element} The rendered panel block.\n */\nexport const PanelBlock = ((blockProps: PanelBlockProps) => {\n  const {\n    as: Tag = 'a',\n    className,\n    active,\n    children,\n    ...props\n  } = blockProps as PanelBlockImplProps;\n  const blockClasses = classNames(\n    usePrefixedClassNames('panel-block', { 'is-active': active }),\n    className\n  );\n  // The anchor's own attributes reach an `<a>` and nothing else, and the\n  // label's a `<label>`; the sets above say which those are. The type already\n  // keeps them off the other tags, so this is for a plain-JS caller, a loose\n  // `{...props}` spread, and the genericity a wrapping HOC erases.\n  const forwarded =\n    Tag === 'a'\n      ? omitAttrs(props, STRIP_FROM_NON_LABEL)\n      : Tag === 'label'\n        ? omitAttrs(props, STRIP_FROM_NON_ANCHOR)\n        : omitAttrs(props, STRIP_FROM_DIV);\n  return (\n    <Tag className={blockClasses} {...forwarded}>\n      {children}\n    </Tag>\n  );\n}) as ConstrainedPolymorphicComponentWithoutRef<\n  PanelBlockOwnProps,\n  PanelBlockElement,\n  'a'\n>;\n\n/**\n * Icon wrapper with panel styling (renders as `<span class=\"panel-icon\">`, containing an\n * `<i/>` when a `name` is given, or the custom node passed as `children`).\n * Accepts all Icon props (`name`, `variant`, `features`, etc.), or `children` for a custom node.\n *\n * @function\n * @param {PanelIconProps} props - Props for the PanelIcon component.\n * @returns {JSX.Element} The rendered panel icon.\n */\nexport const PanelIcon: React.FC<PanelIconProps> = ({\n  className,\n  ...props\n}) => (\n  <Icon\n    containerClassName={classNames(\n      usePrefixedClassNames('panel-icon'),\n      className\n    )}\n    {...props}\n  />\n);\n\n/**\n * Search input with icon (renders as `<div class=\"panel-block\">`)\n *\n * @function\n * @param {PanelInputBlockProps} props - Props for the PanelInputBlock component.\n * @returns {JSX.Element} The rendered panel input block.\n */\nexport const PanelInputBlock: React.FC<PanelInputBlockProps> = ({\n  value,\n  onChange,\n  placeholder,\n  iconClassName = 'fas fa-search',\n  ...props\n}) => {\n  const inputClass = usePrefixedClassNames('input');\n\n  return (\n    <div className={usePrefixedClassNames('panel-block')} {...props}>\n      <p className={usePrefixedClassNames('control', 'has-icons-left')}>\n        <input\n          className={inputClass}\n          type=\"text\"\n          placeholder={placeholder}\n          value={value}\n          onChange={onChange}\n        />\n        <span className={usePrefixedClassNames('icon', 'is-left')}>\n          <i className={iconClassName} aria-hidden=\"true\"></i>\n        </span>\n      </p>\n    </div>\n  );\n};\n\n/**\n * Checkbox block (renders as `<label class=\"panel-block\">`)\n *\n * @function\n * @param {PanelCheckboxBlockProps} props - Props for the PanelCheckboxBlock component.\n * @returns {JSX.Element} The rendered panel checkbox block.\n */\nexport const PanelCheckboxBlock: React.FC<PanelCheckboxBlockProps> = ({\n  checked,\n  onChange,\n  children,\n  ...props\n}) => (\n  <label className={usePrefixedClassNames('panel-block')} {...props}>\n    <input type=\"checkbox\" checked={checked} onChange={onChange} />\n    {children}\n  </label>\n);\n\n/**\n * Call-to-action button (renders as `<div class=\"panel-block\"><button /></div>`)\n *\n * @function\n * @param {PanelButtonBlockProps} props - Props for the PanelButtonBlock component.\n * @returns {JSX.Element} The rendered panel button block.\n */\nexport const PanelButtonBlock: React.FC<PanelButtonBlockProps> = ({\n  children,\n  className,\n  ...props\n}) => (\n  <div className={usePrefixedClassNames('panel-block')}>\n    <button\n      className={classNames(\n        usePrefixedClassNames(\n          'button',\n          'is-link',\n          'is-outlined',\n          'is-fullwidth'\n        ),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  </div>\n);\n\nexport const Panel = withSubComponents(\n  PanelComponent,\n  {\n    Heading: PanelHeading,\n    Tabs: PanelTabs,\n    Block: PanelBlock,\n    Icon: PanelIcon,\n    InputBlock: PanelInputBlock,\n    CheckboxBlock: PanelCheckboxBlock,\n    ButtonBlock: PanelButtonBlock,\n  },\n  'Panel'\n);\n\nexport default Panel;\n"],"names":["STRIP_FROM_NON_ANCHOR","_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Panel.js","sources":["../../../src/components/Panel.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport {\n  ANCHOR_ONLY_ATTRS,\n  type AnchorOnlyAttributes,\n  omitAttrs,\n} from '../helpers/anchorAttrs';\nimport type { ConstrainedPolymorphicComponentWithoutRef } from '../helpers/polymorphic';\nimport {\n  Icon,\n  IconChildrenProps,\n  IconDeprecatedProps,\n  IconNameProps,\n} from '../elements/Icon';\n\n/**\n * Props for the Panel component.\n */\nexport interface PanelProps\n  extends\n    React.HTMLAttributes<HTMLElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /**\n   * HTML element to render (default: `nav`). A `nav` is a `navigation`\n   * landmark, which suits a panel of links; a panel that is not navigation\n   * takes another tag. Bulma's own colored panels use `article`. A `section`\n   * is a `region` landmark only once it has an accessible name, such as\n   * `aria-labelledby` pointing at the `id` of its `Panel.Heading`.\n   */\n  as?: 'nav' | 'article' | 'section' | 'aside' | 'div';\n  /**\n   * Bulma color modifier for the panel. With none, the heading takes the\n   * text color, with its title in the page background's color so it reads on\n   * both schemes. On the dark scheme that title color comes from bestax's\n   * stylesheets: Bulma's CSS alone writes it white on light gray there.\n   */\n  color?:\n    | 'primary'\n    | 'link'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'black'\n    | 'dark'\n    | 'light'\n    | 'white';\n  /** Additional CSS classes. */\n  className?: string;\n  /** Panel content (usually includes subcomponents). */\n  children?: React.ReactNode;\n}\n\n/**\n * Props for the PanelHeading component.\n */\nexport interface PanelHeadingProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Heading content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Props for the PanelTabs component.\n */\nexport interface PanelTabsProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Tabs content. */\n  children?: React.ReactNode;\n}\n\n/**\n * What `<label>` adds over the attributes every element has (`htmlFor` and\n * `form`), subtracted from React's types the way `AnchorOnlyAttributes` is, so\n * it grows when React's does.\n */\ntype LabelOnlyAttributes = Omit<\n  React.LabelHTMLAttributes<HTMLLabelElement>,\n  keyof React.HTMLAttributes<HTMLLabelElement>\n>;\n\n/**\n * The set withheld from a non-label `Panel.Block`, keyed so it stops compiling\n * until a label attribute React adds is named here.\n */\nconst STRIP_FROM_NON_LABEL: Readonly<Record<keyof LabelOnlyAttributes, true>> =\n  {\n    form: true,\n    htmlFor: true,\n  };\n\n/**\n * The set withheld from a non-anchor `Panel.Block`: the derived anchor-only\n * attributes plus `rel`, which React declares on every element, withheld the\n * way `Level.Item` and `Card.FooterItem` withhold it.\n */\nconst STRIP_FROM_NON_ANCHOR: Readonly<\n  Record<keyof AnchorOnlyAttributes | 'rel', true>\n> = { ...ANCHOR_ONLY_ATTRS, rel: true };\n\n/** A `<div>` block takes neither set. */\nconst STRIP_FROM_DIV: Readonly<\n  Record<keyof AnchorOnlyAttributes | 'rel' | keyof LabelOnlyAttributes, true>\n> = { ...STRIP_FROM_NON_ANCHOR, ...STRIP_FROM_NON_LABEL };\n\n/**\n * The elements a panel block may render as: the tags Bulma's panel markup\n * puts `.panel-block` on.\n */\nexport type PanelBlockElement = 'a' | 'div' | 'label';\n\n/**\n * The PanelBlock component's own props.\n */\nexport interface PanelBlockOwnProps {\n  /** Additional CSS classes. */\n  className?: string;\n  /** Whether the block is active. */\n  active?: boolean;\n  /** Block content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Props for the PanelBlock component. Everything the block does not own\n * follows `as`: the anchor's attributes and an `HTMLAnchorElement`\n * `currentTarget` under the default `'a'`, `htmlFor` under `'label'`, and the\n * shared HTML attributes under any of them.\n *\n * The type parameter defaults to `'a'`, the element a block renders with no\n * `as`, rather than to the whole union the way `DropdownItemProps` does. Before\n * `as` existed this type was the anchor's attributes, so bare\n * `PanelBlockProps` stays exactly that, `href` and anchor-typed handlers\n * included. Write `PanelBlockProps<'div'>` or `PanelBlockProps<'label'>` for\n * the others.\n */\nexport type PanelBlockProps<T extends PanelBlockElement = 'a'> =\n  PanelBlockOwnProps &\n    Omit<React.ComponentPropsWithoutRef<T>, keyof PanelBlockOwnProps | 'as'> & {\n      /**\n       * HTML element to render (default: `a`). Bulma styles a `label` block\n       * as clickable, like an `a`, and a `div` block as static content, such\n       * as a table. The props follow the tag, so the anchor attributes\n       * (`href`, `target`, `download` and the rest) are typed only on an `a`\n       * and `htmlFor` only on a `label`; at runtime the block also drops them,\n       * and `rel`, on the other tags. `Panel.CheckboxBlock`,\n       * `Panel.InputBlock` and `Panel.ButtonBlock` render the usual `label`\n       * and `div` blocks with their contents.\n       */\n      as?: T;\n    };\n\n/**\n * The shape the implementation destructures. The public contract is the\n * generic `PanelBlockProps<T>` above, which the body cannot see through.\n */\ntype PanelBlockImplProps = PanelBlockOwnProps & {\n  as?: PanelBlockElement;\n};\n\n/**\n * Props for the PanelIcon component.\n * Extends IconProps but uses 'panel-icon' as the container class.\n */\nexport type PanelIconProps =\n  | Omit<IconNameProps, 'containerClassName'>\n  | Omit<IconChildrenProps, 'containerClassName'>\n  // `PanelIcon` spreads straight into `<Icon>`, so every member of `IconProps`\n  // reaches it. Enumerating them by hand is what left the deprecated `icon`\n  // path compiling on `Icon` and failing here, with an error naming `children`.\n  | Omit<IconDeprecatedProps, 'containerClassName'>;\n\n/**\n * Props for the PanelInputBlock component.\n */\nexport interface PanelInputBlockProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Input value. */\n  value?: string;\n  /** Input change handler. */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  /** Input placeholder. */\n  placeholder?: string;\n  /** Icon class for left icon (default 'fas fa-search'). */\n  iconClassName?: string;\n}\n\n/**\n * Props for the PanelCheckboxBlock component.\n */\nexport interface PanelCheckboxBlockProps extends Omit<\n  React.LabelHTMLAttributes<HTMLLabelElement>,\n  'onChange'\n> {\n  /** Whether the checkbox is checked. */\n  checked?: boolean;\n  /** Checkbox change handler. */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  /** Label/content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Props for the PanelButtonBlock component.\n */\nexport interface PanelButtonBlockProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Button content. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Panel` component implements Bulma's versatile panel block for React.\n *\n * @function\n * @param {PanelProps} props - Props for the Panel component.\n * @returns {JSX.Element} The rendered panel.\n * @see {@link https://bulma.io/documentation/components/panel/ | Bulma Panel documentation}\n */\nconst PanelComponent: React.FC<PanelProps> = ({\n  as: Tag = 'nav',\n  color,\n  className,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color,\n    ...props,\n  });\n\n  // Generate Bulma classes with prefix\n  const bulmaClasses = usePrefixedClassNames('panel', {\n    [`is-${color}`]: color,\n  });\n\n  const panelClasses = classNames(bulmaClasses, bulmaHelperClasses, className);\n\n  return (\n    <Tag className={panelClasses} {...rest}>\n      {children}\n    </Tag>\n  );\n};\n\n/**\n * Main heading (renders as `<p class=\"panel-heading\">`)\n *\n * @function\n * @param {PanelHeadingProps} props - Props for the PanelHeading component.\n * @returns {JSX.Element} The rendered panel heading.\n */\nexport const PanelHeading: React.FC<PanelHeadingProps> = ({\n  className,\n  children,\n  ...props\n}) => (\n  <p\n    className={classNames(usePrefixedClassNames('panel-heading'), className)}\n    {...props}\n  >\n    {children}\n  </p>\n);\n\n/**\n * Panel tabs (renders as `<p class=\"panel-tabs\">`)\n *\n * @function\n * @param {PanelTabsProps} props - Props for the PanelTabs component.\n * @returns {JSX.Element} The rendered panel tabs.\n */\nexport const PanelTabs: React.FC<PanelTabsProps> = ({\n  className,\n  children,\n  ...props\n}) => (\n  <p\n    className={classNames(usePrefixedClassNames('panel-tabs'), className)}\n    {...props}\n  >\n    {children}\n  </p>\n);\n\n/**\n * Individual panel block (renders as `<a class=\"panel-block\">` unless `as` says otherwise)\n *\n * @function\n * @param {PanelBlockProps} props - Props for the PanelBlock component.\n * @returns {JSX.Element} The rendered panel block.\n */\nexport const PanelBlock = ((blockProps: PanelBlockProps) => {\n  const {\n    as: Tag = 'a',\n    className,\n    active,\n    children,\n    ...props\n  } = blockProps as PanelBlockImplProps;\n  const blockClasses = classNames(\n    usePrefixedClassNames('panel-block', { 'is-active': active }),\n    className\n  );\n  // The anchor's own attributes reach an `<a>` and nothing else, and the\n  // label's a `<label>`; the sets above say which those are. The type already\n  // keeps them off the other tags, so this is for a plain-JS caller, a loose\n  // `{...props}` spread, and the genericity a wrapping HOC erases.\n  const forwarded =\n    Tag === 'a'\n      ? omitAttrs(props, STRIP_FROM_NON_LABEL)\n      : Tag === 'label'\n        ? omitAttrs(props, STRIP_FROM_NON_ANCHOR)\n        : omitAttrs(props, STRIP_FROM_DIV);\n  return (\n    <Tag className={blockClasses} {...forwarded}>\n      {children}\n    </Tag>\n  );\n}) as ConstrainedPolymorphicComponentWithoutRef<\n  PanelBlockOwnProps,\n  PanelBlockElement,\n  'a'\n>;\n\n/**\n * Icon wrapper with panel styling (renders as `<span class=\"panel-icon\">`, containing an\n * `<i/>` when a `name` is given, or the custom node passed as `children`).\n * Accepts all Icon props (`name`, `variant`, `features`, etc.), or `children` for a custom node.\n *\n * @function\n * @param {PanelIconProps} props - Props for the PanelIcon component.\n * @returns {JSX.Element} The rendered panel icon.\n */\nexport const PanelIcon: React.FC<PanelIconProps> = ({\n  className,\n  ...props\n}) => (\n  <Icon\n    containerClassName={classNames(\n      usePrefixedClassNames('panel-icon'),\n      className\n    )}\n    {...props}\n  />\n);\n\n/**\n * Search input with icon (renders as `<div class=\"panel-block\">`)\n *\n * @function\n * @param {PanelInputBlockProps} props - Props for the PanelInputBlock component.\n * @returns {JSX.Element} The rendered panel input block.\n */\nexport const PanelInputBlock: React.FC<PanelInputBlockProps> = ({\n  value,\n  onChange,\n  placeholder,\n  iconClassName = 'fas fa-search',\n  ...props\n}) => {\n  const inputClass = usePrefixedClassNames('input');\n\n  return (\n    <div className={usePrefixedClassNames('panel-block')} {...props}>\n      <p className={usePrefixedClassNames('control', 'has-icons-left')}>\n        <input\n          className={inputClass}\n          type=\"text\"\n          placeholder={placeholder}\n          value={value}\n          onChange={onChange}\n        />\n        <span className={usePrefixedClassNames('icon', 'is-left')}>\n          <i className={iconClassName} aria-hidden=\"true\"></i>\n        </span>\n      </p>\n    </div>\n  );\n};\n\n/**\n * Checkbox block (renders as `<label class=\"panel-block\">`)\n *\n * @function\n * @param {PanelCheckboxBlockProps} props - Props for the PanelCheckboxBlock component.\n * @returns {JSX.Element} The rendered panel checkbox block.\n */\nexport const PanelCheckboxBlock: React.FC<PanelCheckboxBlockProps> = ({\n  checked,\n  onChange,\n  children,\n  ...props\n}) => (\n  <label className={usePrefixedClassNames('panel-block')} {...props}>\n    <input type=\"checkbox\" checked={checked} onChange={onChange} />\n    {children}\n  </label>\n);\n\n/**\n * Call-to-action button (renders as `<div class=\"panel-block\"><button /></div>`)\n *\n * @function\n * @param {PanelButtonBlockProps} props - Props for the PanelButtonBlock component.\n * @returns {JSX.Element} The rendered panel button block.\n */\nexport const PanelButtonBlock: React.FC<PanelButtonBlockProps> = ({\n  children,\n  className,\n  ...props\n}) => (\n  <div className={usePrefixedClassNames('panel-block')}>\n    <button\n      className={classNames(\n        usePrefixedClassNames(\n          'button',\n          'is-link',\n          'is-outlined',\n          'is-fullwidth'\n        ),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  </div>\n);\n\nexport const Panel = withSubComponents(\n  PanelComponent,\n  {\n    Heading: PanelHeading,\n    Tabs: PanelTabs,\n    Block: PanelBlock,\n    Icon: PanelIcon,\n    InputBlock: PanelInputBlock,\n    CheckboxBlock: PanelCheckboxBlock,\n    ButtonBlock: PanelButtonBlock,\n  },\n  'Panel'\n);\n\nexport default Panel;\n"],"names":["STRIP_FROM_NON_ANCHOR","_jsx","_jsxs"],"mappings":"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"}