@allxsmith/bestax-bulma 5.30.0 → 5.32.0

package/dist/esm/components/Dropdown.js

@@ -7,6 +7,7 @@ import { withSubComponents } from '../helpers/withSubComponents.js';
 import { isEventInside, getActiveElementInTree } from '../helpers/shadowDom.js';
 import { omitAttrs, ANCHOR_ONLY_ATTRS } from '../helpers/anchorAttrs.js';
 import { buttonType } from '../helpers/buttonType.js';
+import { useMenuKeys, enabledMenuItems } from '../helpers/useMenuKeys.js';
 
 /**
  * Checks if code is running in a browser environment.
@@ -21,6 +22,19 @@ const isBrowser$1 = (win, doc) => typeof win !== 'undefined' && typeof doc !== '
 /**
  * The `Dropdown` component provides Bulma's versatile dropdown menu for your Bulma React UI.
  *
+ * Down, Enter and Space on the trigger open the menu on its first enabled
+ * item, and Up opens it on its last. On the trigger of a menu that's already
+ * open, Down and Up move focus to its first and last item. In the menu, the
+ * arrow keys, Home and End move between the items, and Enter and Space run
+ * the focused one the way a click does. Typing a letter moves to the next
+ * item whose text starts with it, skipping disabled ones, and letters typed
+ * in quick succession add up to one search. Typing searches once focus is in
+ * the menu, so a letter typed on the trigger does nothing. Escape closes the
+ * menu and focuses the trigger, and Tab closes it and lets focus move on.
+ * Anything focusable in the menu that isn't an item, such as a field, keeps
+ * its own keys apart from Escape and Tab. For a panel built around fields,
+ * use `Popover`.
+ *
  * @function
  * @param {DropdownProps} props - Props for the Dropdown component.
  * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the root dropdown element.
@@ -31,6 +45,8 @@ const DropdownComponent = forwardRef(function DropdownComponent({ label, childre
     const [active, setActive] = useState(!!activeProp);
     const dropdownRef = useRef(null);
     const triggerRef = useRef(null);
+    const menuRef = useRef(null);
+    const menuKeys = useMenuKeys();
     const pendingFocusRef = useRef(null);
     // Cleanup returned by a consumer's callback ref on attach, held until detach.
     const consumerCleanupRef = useRef(null);
@@ -118,29 +134,23 @@ const DropdownComponent = forwardRef(function DropdownComponent({ label, childre
             }
         }
     };
-    const getMenuItems = () => {
-        /* istanbul ignore next: dropdownRef.current is never null once mounted */
-        if (!dropdownRef.current)
-            return [];
-        return Array.from(
-        // Every menu-item role, so an item a caller gives `menuitemcheckbox`
-        // or `menuitemradio` (a filter or sort menu) stays reachable.
-        dropdownRef.current.querySelectorAll('[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]')).filter(el => !el.hasAttribute('disabled') &&
-            el.getAttribute('aria-disabled') !== 'true');
+    const focusEdgeItem = (edge) => {
+        const items = enabledMenuItems(menuRef.current);
+        items[edge === 'first' ? 0 : items.length - 1]?.focus();
     };
-    // Focus the pending menu item once the menu becomes visible; the item is
-    // unfocusable while `display: none` applies, so this must wait for the
-    // `is-active` class to actually land in the DOM.
+    // Once the menu shows, forget a search typed just before it last closed,
+    // and focus the pending item. The item is unfocusable while
+    // `display: none` applies, so this must wait for the `is-active` class to
+    // actually land in the DOM.
     useEffect(() => {
-        if (!active || !pendingFocusRef.current)
+        if (!active)
             return;
-        const items = getMenuItems();
-        if (items.length) {
-            const index = pendingFocusRef.current === 'first' ? 0 : items.length - 1;
-            items[index].focus();
-        }
+        menuKeys.reset();
+        if (!pendingFocusRef.current)
+            return;
+        focusEdgeItem(pendingFocusRef.current);
         pendingFocusRef.current = null;
-    }, [active]);
+    }, [active, menuKeys]);
     const handleTriggerKeyDown = (e) => {
         if (disabled)
             return;
@@ -153,9 +163,7 @@ const DropdownComponent = forwardRef(function DropdownComponent({ label, childre
                     onActiveChange?.(true);
                 }
                 else {
-                    const items = getMenuItems();
-                    if (items.length)
-                        items[0].focus();
+                    focusEdgeItem('first');
                     pendingFocusRef.current = null;
                 }
                 break;
@@ -167,9 +175,7 @@ const DropdownComponent = forwardRef(function DropdownComponent({ label, childre
                     onActiveChange?.(true);
                 }
                 else {
-                    const items = getMenuItems();
-                    if (items.length)
-                        items[items.length - 1].focus();
+                    focusEdgeItem('last');
                     pendingFocusRef.current = null;
                 }
                 break;
@@ -201,8 +207,10 @@ const DropdownComponent = forwardRef(function DropdownComponent({ label, childre
         }
     };
     const handleMenuKeyDown = (e) => {
-        // Escape and Tab close the menu regardless of whether it has any focusable
-        // items — an empty or all-disabled menu must still honor the close contract.
+        // Closing is Dropdown's: Escape and Tab close the menu from anywhere in
+        // it, a field included, and an empty or all-disabled menu too. Moving
+        // between the items, running them and typeahead are the hook's, which
+        // acts only while focus is on the menu or one of its items.
         if (e.key === 'Escape') {
             e.preventDefault();
             setActive(false);
@@ -215,66 +223,10 @@ const DropdownComponent = forwardRef(function DropdownComponent({ label, childre
             onActiveChange?.(false);
             return;
         }
-        const items = getMenuItems();
-        if (!items.length)
-            return;
-        const currentIndex = items.indexOf(getActiveElementInTree(e.currentTarget));
-        switch (e.key) {
-            case 'ArrowDown': {
-                e.preventDefault();
-                const next = currentIndex >= 0 ? (currentIndex + 1) % items.length : 0;
-                items[next].focus();
-                break;
-            }
-            case 'ArrowUp': {
-                e.preventDefault();
-                const prev = currentIndex >= 0
-                    ? (currentIndex - 1 + items.length) % items.length
-                    : items.length - 1;
-                items[prev].focus();
-                break;
-            }
-            case 'Home':
-                e.preventDefault();
-                items[0].focus();
-                break;
-            case 'End':
-                e.preventDefault();
-                items[items.length - 1].focus();
-                break;
-            case 'Enter':
-            case ' ': {
-                // Activate the focused item by clicking it, so its `onClick` runs and
-                // closing follows `closeOnClick` as it does for the mouse. A caller's
-                // own key handler that prevented the default has claimed the key, and
-                // is left to it rather than followed by a second activation.
-                if (currentIndex < 0 || e.defaultPrevented)
-                    break;
-                const item = items[currentIndex];
-                // Leave the browser's own activation alone, or the item runs twice: a
-                // `<button>` answers both keys, and a link with an `href` answers
-                // Enter. A link does not answer Space, so Space on a link is handled
-                // here too, which also keeps the page from scrolling.
-                if (item.tagName === 'BUTTON')
-                    break;
-                if (e.key === 'Enter' &&
-                    item.tagName === 'A' &&
-                    item.hasAttribute('href')) {
-                    break;
-                }
-                e.preventDefault();
-                // A held key sends a keydown per auto-repeat. Clicking on each would
-                // toggle a checkbox item over and over while `closeOnClick` is off,
-                // so only the first press activates. The default is still prevented
-                // on the repeats above, so a held Space does not scroll the page.
-                if (!e.repeat)
-                    item.click();
-                break;
-            }
-        }
+        menuKeys.onKeyDown(e);
     };
     const dropdownClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxs("div", { className: dropdownClasses, ref: setRefs, id: id, "data-testid": "dropdown-root", ...rest, children: [jsx("div", { className: usePrefixedClassNames('dropdown-trigger'), children: jsxs("button", { ref: triggerRef, className: buttonClass, "aria-haspopup": "true", "aria-controls": id ? `${id}-menu` : undefined, "aria-expanded": active, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, disabled: disabled, type: "button", children: [jsx("span", { children: label }), jsx("span", { className: usePrefixedClassNames('icon', 'is-small'), "aria-hidden": "true", children: jsx("i", { className: "fas fa-angle-down" }) })] }) }), jsx("div", { className: classNames(usePrefixedClassNames('dropdown-menu'), menuClassName), id: id ? `${id}-menu` : undefined, role: "menu", "data-testid": "dropdown-menu", onKeyDown: handleMenuKeyDown, 
+    return (jsxs("div", { className: dropdownClasses, ref: setRefs, id: id, "data-testid": "dropdown-root", ...rest, children: [jsx("div", { className: usePrefixedClassNames('dropdown-trigger'), children: jsxs("button", { ref: triggerRef, className: buttonClass, "aria-haspopup": "true", "aria-controls": id ? `${id}-menu` : undefined, "aria-expanded": active, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, disabled: disabled, type: "button", children: [jsx("span", { children: label }), jsx("span", { className: usePrefixedClassNames('icon', 'is-small'), "aria-hidden": "true", children: jsx("i", { className: "fas fa-angle-down" }) })] }) }), jsx("div", { className: classNames(usePrefixedClassNames('dropdown-menu'), menuClassName), id: id ? `${id}-menu` : undefined, ref: menuRef, role: "menu", "data-testid": "dropdown-menu", onKeyDown: handleMenuKeyDown, 
                 // The menu, not its content, takes focus from a click between items,
                 // so the menu owns nothing focusable but its items.
                 tabIndex: -1, children: jsx("div", { className: usePrefixedClassNames('dropdown-content'), onClick: handleMenuClick, children: children }) })] }));

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../../src/components/Dropdown.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useState,\n  useRef,\n  useEffect,\n} from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { getActiveElementInTree, isEventInside } from '../helpers/shadowDom';\nimport type { ConstrainedPolymorphicComponentWithoutRef } from '../helpers/polymorphic';\nimport {\n  type AnchorOnlyAttributes,\n  ANCHOR_ONLY_ATTRS,\n  omitAttrs,\n} from '../helpers/anchorAttrs';\nimport { buttonType } from '../helpers/buttonType';\n\n/**\n * Checks if code is running in a browser environment.\n * @deprecated Dropdown's internal SSR guard, exported by accident; it will\n * be removed in the next major. Check `typeof window !== 'undefined' &&\n * typeof document !== 'undefined'` instead.\n * @param win - Window object.\n * @param doc - Document object.\n * @returns {boolean} True if in browser, false otherwise.\n */\nexport const isBrowser = (win?: typeof window, doc?: typeof document) =>\n  typeof win !== 'undefined' && typeof doc !== 'undefined';\n\n/**\n * Props for the Dropdown component.\n * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the root dropdown element.\n */\nexport interface DropdownProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, keyof BulmaClassesProps>,\n    BulmaClassesProps {\n  /** The dropdown button/trigger content. */\n  label: React.ReactNode;\n  /** Dropdown menu items and dividers. */\n  children: React.ReactNode;\n  /** Additional CSS classes for root. */\n  className?: string;\n  /** Additional CSS classes for the dropdown menu. */\n  menuClassName?: string;\n  /** Whether the dropdown is open (controlled). */\n  active?: boolean;\n  /** Dropdown menu opens upward. */\n  up?: boolean;\n  /** Menu is right-aligned. */\n  right?: boolean;\n  /** Open on hover instead of click. */\n  hoverable?: boolean;\n  /** Disables the dropdown trigger. */\n  disabled?: boolean;\n  /** Callback when dropdown active state changes. */\n  onActiveChange?: (active: boolean) => void;\n  /** Close dropdown when a menu item is clicked, or activated with Enter or Space. */\n  closeOnClick?: boolean;\n  /** Root element ID (for aria-controls, etc). */\n  id?: string;\n}\n\n/**\n * The `Dropdown` component provides Bulma's versatile dropdown menu for your Bulma React UI.\n *\n * @function\n * @param {DropdownProps} props - Props for the Dropdown component.\n * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the root dropdown element.\n * @returns {JSX.Element} The rendered dropdown.\n * @see {@link https://bulma.io/documentation/components/dropdown/ | Bulma Dropdown documentation}\n */\nconst DropdownComponent = forwardRef<HTMLDivElement, DropdownProps>(\n  function DropdownComponent(\n    {\n      label,\n      children,\n      className,\n      menuClassName,\n      active: activeProp,\n      up,\n      right,\n      hoverable,\n      disabled,\n      onActiveChange,\n      closeOnClick = true,\n      id,\n      ...props\n    },\n    ref\n  ) {\n    const [active, setActive] = useState<boolean>(!!activeProp);\n    const dropdownRef = useRef<HTMLDivElement>(null);\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const pendingFocusRef = useRef<'first' | 'last' | null>(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    const setRefs = useCallback(\n      (node: HTMLDivElement | null) => {\n        (dropdownRef as React.MutableRefObject<HTMLDivElement | null>).current =\n          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.\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\n    const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n\n    // Generate Bulma classes with prefix\n    const bulmaClasses = usePrefixedClassNames('dropdown', {\n      'is-active': active,\n      'is-up': up,\n      'is-right': right,\n      'is-hoverable': hoverable,\n      'is-disabled': disabled,\n    });\n\n    const buttonClass = usePrefixedClassNames('button');\n\n    // Controlled mode support: mirror the controlled `active` prop into local\n    // state. This is an intentional external-prop sync (controlled/uncontrolled\n    // hybrid); behavior is covered by tests and certified in-browser.\n    useEffect(() => {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- syncing to controlled prop\n      if (typeof activeProp === 'boolean') setActive(activeProp);\n    }, [activeProp]);\n\n    // SSR-safe outside click\n    useEffect(() => {\n      if (!active) return;\n\n      if (!isBrowser(window, document)) return;\n\n      const handleClick = (e: MouseEvent) => {\n        if (!isEventInside(e, dropdownRef.current)) {\n          setActive(false);\n          onActiveChange?.(false);\n        }\n      };\n      document.addEventListener('mousedown', handleClick);\n      return () => document.removeEventListener('mousedown', handleClick);\n    }, [active, onActiveChange]);\n\n    const handleToggle = () => {\n      /* istanbul ignore next: guard is enforced by button[disabled] at the DOM level */\n      if (disabled) return;\n\n      const newActive = !active;\n      setActive(newActive);\n      onActiveChange?.(newActive);\n    };\n\n    const handleMenuClick = (e: React.MouseEvent<HTMLDivElement>) => {\n      if (closeOnClick) {\n        setActive(false);\n        onActiveChange?.(false);\n        // Closing hides the item that has focus, and the browser drops focus\n        // to the page when that happens. Hand it back to the trigger, as\n        // Escape does. An item that moved focus somewhere else keeps it there.\n        // The menu around this content is what a click between items focuses.\n        const menu = e.currentTarget.parentElement as HTMLElement;\n        if (menu.contains(getActiveElementInTree(e.currentTarget))) {\n          triggerRef.current?.focus();\n        }\n      }\n    };\n\n    const getMenuItems = (): HTMLElement[] => {\n      /* istanbul ignore next: dropdownRef.current is never null once mounted */\n      if (!dropdownRef.current) return [];\n      return Array.from(\n        // Every menu-item role, so an item a caller gives `menuitemcheckbox`\n        // or `menuitemradio` (a filter or sort menu) stays reachable.\n        dropdownRef.current.querySelectorAll<HTMLElement>(\n          '[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]'\n        )\n      ).filter(\n        el =>\n          !el.hasAttribute('disabled') &&\n          el.getAttribute('aria-disabled') !== 'true'\n      );\n    };\n\n    // Focus the pending menu item once the menu becomes visible; the item is\n    // unfocusable while `display: none` applies, so this must wait for the\n    // `is-active` class to actually land in the DOM.\n    useEffect(() => {\n      if (!active || !pendingFocusRef.current) return;\n      const items = getMenuItems();\n      if (items.length) {\n        const index =\n          pendingFocusRef.current === 'first' ? 0 : items.length - 1;\n        items[index].focus();\n      }\n      pendingFocusRef.current = null;\n    }, [active]);\n\n    const handleTriggerKeyDown = (\n      e: React.KeyboardEvent<HTMLButtonElement>\n    ) => {\n      if (disabled) return;\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault();\n          pendingFocusRef.current = 'first';\n          if (!active) {\n            setActive(true);\n            onActiveChange?.(true);\n          } else {\n            const items = getMenuItems();\n            if (items.length) items[0].focus();\n            pendingFocusRef.current = null;\n          }\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          pendingFocusRef.current = 'last';\n          if (!active) {\n            setActive(true);\n            onActiveChange?.(true);\n          } else {\n            const items = getMenuItems();\n            if (items.length) items[items.length - 1].focus();\n            pendingFocusRef.current = null;\n          }\n          break;\n        case 'Enter':\n        case ' ':\n          e.preventDefault();\n          // A held key sends a keydown per auto-repeat. Running an item hands\n          // focus back here, so without this a held Enter would reopen the\n          // menu and run whichever item it focused next.\n          if (e.repeat) break;\n          if (!active) {\n            pendingFocusRef.current = 'first';\n            setActive(true);\n            onActiveChange?.(true);\n          } else {\n            setActive(false);\n            onActiveChange?.(false);\n          }\n          break;\n        case 'Escape':\n          if (active) {\n            e.preventDefault();\n            setActive(false);\n            onActiveChange?.(false);\n          }\n          break;\n        default:\n          break;\n      }\n    };\n\n    const handleMenuKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      // Escape and Tab close the menu regardless of whether it has any focusable\n      // items — an empty or all-disabled menu must still honor the close contract.\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        setActive(false);\n        onActiveChange?.(false);\n        triggerRef.current?.focus();\n        return;\n      }\n      if (e.key === 'Tab') {\n        setActive(false);\n        onActiveChange?.(false);\n        return;\n      }\n\n      const items = getMenuItems();\n      if (!items.length) return;\n      const currentIndex = items.indexOf(\n        getActiveElementInTree(e.currentTarget) as HTMLElement\n      );\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          const next =\n            currentIndex >= 0 ? (currentIndex + 1) % items.length : 0;\n          items[next].focus();\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          const prev =\n            currentIndex >= 0\n              ? (currentIndex - 1 + items.length) % items.length\n              : items.length - 1;\n          items[prev].focus();\n          break;\n        }\n        case 'Home':\n          e.preventDefault();\n          items[0].focus();\n          break;\n        case 'End':\n          e.preventDefault();\n          items[items.length - 1].focus();\n          break;\n        case 'Enter':\n        case ' ': {\n          // Activate the focused item by clicking it, so its `onClick` runs and\n          // closing follows `closeOnClick` as it does for the mouse. A caller's\n          // own key handler that prevented the default has claimed the key, and\n          // is left to it rather than followed by a second activation.\n          if (currentIndex < 0 || e.defaultPrevented) break;\n          const item = items[currentIndex];\n          // Leave the browser's own activation alone, or the item runs twice: a\n          // `<button>` answers both keys, and a link with an `href` answers\n          // Enter. A link does not answer Space, so Space on a link is handled\n          // here too, which also keeps the page from scrolling.\n          if (item.tagName === 'BUTTON') break;\n          if (\n            e.key === 'Enter' &&\n            item.tagName === 'A' &&\n            item.hasAttribute('href')\n          ) {\n            break;\n          }\n          e.preventDefault();\n          // A held key sends a keydown per auto-repeat. Clicking on each would\n          // toggle a checkbox item over and over while `closeOnClick` is off,\n          // so only the first press activates. The default is still prevented\n          // on the repeats above, so a held Space does not scroll the page.\n          if (!e.repeat) item.click();\n          break;\n        }\n        default:\n          break;\n      }\n    };\n\n    const dropdownClasses = classNames(\n      bulmaClasses,\n      bulmaHelperClasses,\n      className\n    );\n\n    return (\n      <div\n        className={dropdownClasses}\n        ref={setRefs}\n        id={id}\n        data-testid=\"dropdown-root\"\n        {...rest}\n      >\n        <div className={usePrefixedClassNames('dropdown-trigger')}>\n          <button\n            ref={triggerRef}\n            className={buttonClass}\n            aria-haspopup=\"true\"\n            aria-controls={id ? `${id}-menu` : undefined}\n            aria-expanded={active}\n            onClick={handleToggle}\n            onKeyDown={handleTriggerKeyDown}\n            disabled={disabled}\n            type=\"button\"\n          >\n            <span>{label}</span>\n            <span\n              className={usePrefixedClassNames('icon', 'is-small')}\n              aria-hidden=\"true\"\n            >\n              <i className=\"fas fa-angle-down\" />\n            </span>\n          </button>\n        </div>\n        <div\n          className={classNames(\n            usePrefixedClassNames('dropdown-menu'),\n            menuClassName\n          )}\n          id={id ? `${id}-menu` : undefined}\n          role=\"menu\"\n          data-testid=\"dropdown-menu\"\n          onKeyDown={handleMenuKeyDown}\n          // The menu, not its content, takes focus from a click between items,\n          // so the menu owns nothing focusable but its items.\n          tabIndex={-1}\n        >\n          <div\n            className={usePrefixedClassNames('dropdown-content')}\n            onClick={handleMenuClick}\n          >\n            {children}\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\n\n/**\n * The elements a dropdown item may render as. Bulma's dropdown markup names\n * these three and no others, so `as` is a closed set rather than an open\n * `React.ElementType`.\n */\nexport type DropdownItemElement = 'a' | 'div' | 'button';\n\n/**\n * The DropdownItem component's own props.\n */\nexport interface DropdownItemOwnProps extends BulmaClassesProps {\n  /** Whether the item is active. */\n  active?: boolean;\n  /** Additional CSS classes. */\n  className?: string;\n  /** Marks the item as disabled; disabled items are skipped during keyboard navigation. Use with `as=\"button\"` for a native disabled control, or pair with `aria-disabled` on a link. */\n  disabled?: boolean;\n  /** Item content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Props for the DropdownItem component. Everything the item does not own\n * follows `as`: `href`, `target` and `rel` under the default `'a'`, `type` and\n * `form` under `'button'`, and the shared HTML attributes under any of them.\n *\n * Pinning these to `React.HTMLAttributes<HTMLElement>` instead — which is what\n * this type did before — rejected `href` on an anchor and `type` on a button,\n * both of which have always worked at runtime. Same defect as #641, in the\n * narrower shape a constrained `as` takes.\n *\n * **Name the tag you mean.** The type parameter defaults to the whole union, not\n * to the rendered element, so bare `DropdownItemProps` keeps accepting\n * `{ as: 'div' }` the way it always has. The cost is that it is not\n * distributive: `Omit` over a union keeps only the shared keys, so the bare\n * alias carries no `href` even though the component takes one under `as=\"a\"`.\n * Write `DropdownItemProps<'a'>` for the anchor's props. That is the #667 alias\n * limitation Button carries, labelled next-major because closing it is\n * source-breaking, and pinned for this component in\n * `__typetests__/polymorphic.tsx`; the component itself is unaffected.\n */\nexport type DropdownItemProps<\n  T extends DropdownItemElement = DropdownItemElement,\n> = DropdownItemOwnProps &\n  Omit<React.ComponentPropsWithoutRef<T>, keyof DropdownItemOwnProps | 'as'> & {\n    /**\n     * The element type to render.\n     *\n     * `'button'` renders `type=\"button\"` unless you pass `type=\"submit\"` or `type=\"reset\"`, so\n     * an item inside a form does not submit it.\n     */\n    as?: T;\n  };\n\n/**\n * The anchor's attributes, minus the one a `<button>` legitimately takes.\n *\n * `type` stays: `as=\"button\"` is a supported form and `type=\"submit\"` is valid\n * there, so stripping it would remove a working attribute. A `<div>` takes no\n * `type`, so it gets the whole `ANCHOR_ONLY_ATTRS` set instead. The set is\n * chosen by the rendered tag because that is where the reason lives (#692).\n *\n * Neither set withholds `rel`, which `Level.Item` does: React declares `rel` on\n * `HTMLAttributes` for every element, so withholding it would diverge from\n * React's own typing, the call #641 recorded for `Navbar.Link`. Level\n * withholds it anyway, because it always has.\n */\nconst STRIP_FROM_BUTTON: Readonly<\n  Record<Exclude<keyof AnchorOnlyAttributes, 'type'>, true>\n> = (() => {\n  const { type: _type, ...rest } = ANCHOR_ONLY_ATTRS;\n  return rest;\n})();\n\n/**\n * The shape the implementation destructures. The public contract is the generic\n * `DropdownItemProps<T>` above — the body cannot see through `T`.\n */\ntype DropdownItemImplProps = DropdownItemOwnProps & {\n  as?: DropdownItemElement;\n};\n\n/**\n * Bulma Dropdown item.\n *\n * @function\n * @param {DropdownItemProps} props - Props for the DropdownItem component.\n * @returns {JSX.Element} The rendered dropdown item.\n */\nexport const DropdownItem = ((itemProps: DropdownItemProps) => {\n  const {\n    children,\n    active,\n    className,\n    as: Component = 'a',\n    ...props\n  } = itemProps as DropdownItemImplProps;\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n  // The anchor's attributes reach an anchor and nothing else — `<div href>` and\n  // `<button target>` are invalid HTML. The same rule Menu applies, for the same\n  // reason: the type now derives these from `as`, and deriving them must not\n  // quietly widen where they land. The type stops a direct caller; this stops a\n  // plain-JS one, a loose `{...props}` spread, and the genericity a wrapping HOC\n  // erases.\n  //\n  // The whole link set, not `href` alone: they all arrive together under\n  // `as=\"a\"`. Menu strips `href` only, because its `as` is open and a flat set\n  // would delete attributes legal on the element a caller named.\n  //\n  // `bestax-migrate` tracks the same question from the other side, per attribute\n  // per element (`LINK_ATTR_ELEMENTS`) rather than as one set — so the two lists\n  // are not interchangeable and neither derives from the other.\n  //\n  // Menu's condition also admits a custom component and a custom element, which\n  // own their prop contracts. Here the set follows the tag: an `<a>` keeps all\n  // of them, a `<button>` keeps `type`, and any other `as` keeps none of them.\n  const forwarded =\n    Component === 'a'\n      ? rest\n      : Component === 'button'\n        ? omitAttrs(rest, STRIP_FROM_BUTTON)\n        : omitAttrs(rest, ANCHOR_ONLY_ATTRS);\n  return (\n    <Component\n      className={classNames(\n        usePrefixedClassNames('dropdown-item', {\n          'is-active': active,\n        }),\n        bulmaHelperClasses,\n        className\n      )}\n      data-testid=\"dropdown-item\"\n      {...forwarded}\n      // After `forwarded` for the same reason as `role` and `type` below: a\n      // spread carrying `tabIndex: undefined` would otherwise erase the\n      // default. The item keeps its menu role and its place in the arrow-key\n      // order, but a `<div>` or an anchor without an `href` cannot take focus\n      // without a tabindex, so the arrow keys stall on it.\n      tabIndex={(forwarded as { tabIndex?: number }).tabIndex ?? 0}\n      // After `forwarded` for the same reason as `type` below: a spread\n      // carrying `role: undefined` would otherwise erase the default, and an\n      // item with no role drops out of the menu and its arrow-key order.\n      role={(forwarded as { role?: React.AriaRole }).role ?? 'menuitem'}\n      // A menu item inside a form must not submit it. `<button>` defaults to\n      // type=\"submit\", and a filter or sort menu sitting in a form is ordinary.\n      // Dropdown's own trigger sets it, and `Avatar` and `Menu.Item` default it\n      // the same way. A caller's `submit` or `reset` still wins, and anything\n      // else becomes `button`, since HTML reads a value it does not define for\n      // a button as submit too; `buttonType` says more.\n      //\n      // After `forwarded`, reading through it rather than before it: React\n      // treats `type={undefined}` as \"remove the attribute\", and a spread\n      // carrying an absent key is how that arrives. Spreading the default first\n      // let such a spread erase it and restore the submit behaviour, so the\n      // guard only held for callers who passed nothing.\n      {...(Component === 'button'\n        ? { type: buttonType((forwarded as { type?: unknown }).type) }\n        : {})}\n    >\n      {children}\n    </Component>\n  );\n}) as ConstrainedPolymorphicComponentWithoutRef<\n  DropdownItemOwnProps,\n  DropdownItemElement,\n  'a'\n>;\n\n/**\n * Bulma Dropdown divider.\n *\n * @function\n * @returns {JSX.Element} The rendered divider element.\n */\nexport const DropdownDivider: React.FC = () => (\n  <hr className={usePrefixedClassNames('dropdown-divider')} />\n);\n\n/** Bulma Dropdown component with Item and Divider sub-components. */\nexport const Dropdown = withSubComponents(\n  DropdownComponent,\n  {\n    Item: DropdownItem,\n    Divider: DropdownDivider,\n  },\n  'Dropdown'\n);\n\nexport default Dropdown;\n"],"names":["isBrowser","_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sources":["../../../src/components/Dropdown.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useState,\n  useRef,\n  useEffect,\n} from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { getActiveElementInTree, isEventInside } from '../helpers/shadowDom';\nimport type { ConstrainedPolymorphicComponentWithoutRef } from '../helpers/polymorphic';\nimport {\n  type AnchorOnlyAttributes,\n  ANCHOR_ONLY_ATTRS,\n  omitAttrs,\n} from '../helpers/anchorAttrs';\nimport { buttonType } from '../helpers/buttonType';\nimport { enabledMenuItems, useMenuKeys } from '../helpers/useMenuKeys';\n\n/**\n * Checks if code is running in a browser environment.\n * @deprecated Dropdown's internal SSR guard, exported by accident; it will\n * be removed in the next major. Check `typeof window !== 'undefined' &&\n * typeof document !== 'undefined'` instead.\n * @param win - Window object.\n * @param doc - Document object.\n * @returns {boolean} True if in browser, false otherwise.\n */\nexport const isBrowser = (win?: typeof window, doc?: typeof document) =>\n  typeof win !== 'undefined' && typeof doc !== 'undefined';\n\n/**\n * Props for the Dropdown component.\n * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the root dropdown element.\n */\nexport interface DropdownProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, keyof BulmaClassesProps>,\n    BulmaClassesProps {\n  /** The dropdown button/trigger content. */\n  label: React.ReactNode;\n  /** Dropdown menu items and dividers. */\n  children: React.ReactNode;\n  /** Additional CSS classes for root. */\n  className?: string;\n  /** Additional CSS classes for the dropdown menu. */\n  menuClassName?: string;\n  /** Whether the dropdown is open (controlled). */\n  active?: boolean;\n  /** Dropdown menu opens upward. */\n  up?: boolean;\n  /** Menu is right-aligned. */\n  right?: boolean;\n  /** Open on hover instead of click. */\n  hoverable?: boolean;\n  /** Disables the dropdown trigger. */\n  disabled?: boolean;\n  /** Callback when dropdown active state changes. */\n  onActiveChange?: (active: boolean) => void;\n  /** Close dropdown when a menu item is clicked, or activated with Enter or Space. */\n  closeOnClick?: boolean;\n  /** Root element ID (for aria-controls, etc). */\n  id?: string;\n}\n\n/**\n * The `Dropdown` component provides Bulma's versatile dropdown menu for your Bulma React UI.\n *\n * Down, Enter and Space on the trigger open the menu on its first enabled\n * item, and Up opens it on its last. On the trigger of a menu that's already\n * open, Down and Up move focus to its first and last item. In the menu, the\n * arrow keys, Home and End move between the items, and Enter and Space run\n * the focused one the way a click does. Typing a letter moves to the next\n * item whose text starts with it, skipping disabled ones, and letters typed\n * in quick succession add up to one search. Typing searches once focus is in\n * the menu, so a letter typed on the trigger does nothing. Escape closes the\n * menu and focuses the trigger, and Tab closes it and lets focus move on.\n * Anything focusable in the menu that isn't an item, such as a field, keeps\n * its own keys apart from Escape and Tab. For a panel built around fields,\n * use `Popover`.\n *\n * @function\n * @param {DropdownProps} props - Props for the Dropdown component.\n * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the root dropdown element.\n * @returns {JSX.Element} The rendered dropdown.\n * @see {@link https://bulma.io/documentation/components/dropdown/ | Bulma Dropdown documentation}\n */\nconst DropdownComponent = forwardRef<HTMLDivElement, DropdownProps>(\n  function DropdownComponent(\n    {\n      label,\n      children,\n      className,\n      menuClassName,\n      active: activeProp,\n      up,\n      right,\n      hoverable,\n      disabled,\n      onActiveChange,\n      closeOnClick = true,\n      id,\n      ...props\n    },\n    ref\n  ) {\n    const [active, setActive] = useState<boolean>(!!activeProp);\n    const dropdownRef = useRef<HTMLDivElement>(null);\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const menuRef = useRef<HTMLDivElement>(null);\n    const menuKeys = useMenuKeys();\n    const pendingFocusRef = useRef<'first' | 'last' | null>(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    const setRefs = useCallback(\n      (node: HTMLDivElement | null) => {\n        (dropdownRef as React.MutableRefObject<HTMLDivElement | null>).current =\n          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.\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\n    const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n\n    // Generate Bulma classes with prefix\n    const bulmaClasses = usePrefixedClassNames('dropdown', {\n      'is-active': active,\n      'is-up': up,\n      'is-right': right,\n      'is-hoverable': hoverable,\n      'is-disabled': disabled,\n    });\n\n    const buttonClass = usePrefixedClassNames('button');\n\n    // Controlled mode support: mirror the controlled `active` prop into local\n    // state. This is an intentional external-prop sync (controlled/uncontrolled\n    // hybrid); behavior is covered by tests and certified in-browser.\n    useEffect(() => {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- syncing to controlled prop\n      if (typeof activeProp === 'boolean') setActive(activeProp);\n    }, [activeProp]);\n\n    // SSR-safe outside click\n    useEffect(() => {\n      if (!active) return;\n\n      if (!isBrowser(window, document)) return;\n\n      const handleClick = (e: MouseEvent) => {\n        if (!isEventInside(e, dropdownRef.current)) {\n          setActive(false);\n          onActiveChange?.(false);\n        }\n      };\n      document.addEventListener('mousedown', handleClick);\n      return () => document.removeEventListener('mousedown', handleClick);\n    }, [active, onActiveChange]);\n\n    const handleToggle = () => {\n      /* istanbul ignore next: guard is enforced by button[disabled] at the DOM level */\n      if (disabled) return;\n\n      const newActive = !active;\n      setActive(newActive);\n      onActiveChange?.(newActive);\n    };\n\n    const handleMenuClick = (e: React.MouseEvent<HTMLDivElement>) => {\n      if (closeOnClick) {\n        setActive(false);\n        onActiveChange?.(false);\n        // Closing hides the item that has focus, and the browser drops focus\n        // to the page when that happens. Hand it back to the trigger, as\n        // Escape does. An item that moved focus somewhere else keeps it there.\n        // The menu around this content is what a click between items focuses.\n        const menu = e.currentTarget.parentElement as HTMLElement;\n        if (menu.contains(getActiveElementInTree(e.currentTarget))) {\n          triggerRef.current?.focus();\n        }\n      }\n    };\n\n    const focusEdgeItem = (edge: 'first' | 'last') => {\n      const items = enabledMenuItems(menuRef.current as HTMLElement);\n      items[edge === 'first' ? 0 : items.length - 1]?.focus();\n    };\n\n    // Once the menu shows, forget a search typed just before it last closed,\n    // and focus the pending item. The item is unfocusable while\n    // `display: none` applies, so this must wait for the `is-active` class to\n    // actually land in the DOM.\n    useEffect(() => {\n      if (!active) return;\n      menuKeys.reset();\n      if (!pendingFocusRef.current) return;\n      focusEdgeItem(pendingFocusRef.current);\n      pendingFocusRef.current = null;\n    }, [active, menuKeys]);\n\n    const handleTriggerKeyDown = (\n      e: React.KeyboardEvent<HTMLButtonElement>\n    ) => {\n      if (disabled) return;\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault();\n          pendingFocusRef.current = 'first';\n          if (!active) {\n            setActive(true);\n            onActiveChange?.(true);\n          } else {\n            focusEdgeItem('first');\n            pendingFocusRef.current = null;\n          }\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          pendingFocusRef.current = 'last';\n          if (!active) {\n            setActive(true);\n            onActiveChange?.(true);\n          } else {\n            focusEdgeItem('last');\n            pendingFocusRef.current = null;\n          }\n          break;\n        case 'Enter':\n        case ' ':\n          e.preventDefault();\n          // A held key sends a keydown per auto-repeat. Running an item hands\n          // focus back here, so without this a held Enter would reopen the\n          // menu and run whichever item it focused next.\n          if (e.repeat) break;\n          if (!active) {\n            pendingFocusRef.current = 'first';\n            setActive(true);\n            onActiveChange?.(true);\n          } else {\n            setActive(false);\n            onActiveChange?.(false);\n          }\n          break;\n        case 'Escape':\n          if (active) {\n            e.preventDefault();\n            setActive(false);\n            onActiveChange?.(false);\n          }\n          break;\n        default:\n          break;\n      }\n    };\n\n    const handleMenuKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      // Closing is Dropdown's: Escape and Tab close the menu from anywhere in\n      // it, a field included, and an empty or all-disabled menu too. Moving\n      // between the items, running them and typeahead are the hook's, which\n      // acts only while focus is on the menu or one of its items.\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        setActive(false);\n        onActiveChange?.(false);\n        triggerRef.current?.focus();\n        return;\n      }\n      if (e.key === 'Tab') {\n        setActive(false);\n        onActiveChange?.(false);\n        return;\n      }\n\n      menuKeys.onKeyDown(e);\n    };\n\n    const dropdownClasses = classNames(\n      bulmaClasses,\n      bulmaHelperClasses,\n      className\n    );\n\n    return (\n      <div\n        className={dropdownClasses}\n        ref={setRefs}\n        id={id}\n        data-testid=\"dropdown-root\"\n        {...rest}\n      >\n        <div className={usePrefixedClassNames('dropdown-trigger')}>\n          <button\n            ref={triggerRef}\n            className={buttonClass}\n            aria-haspopup=\"true\"\n            aria-controls={id ? `${id}-menu` : undefined}\n            aria-expanded={active}\n            onClick={handleToggle}\n            onKeyDown={handleTriggerKeyDown}\n            disabled={disabled}\n            type=\"button\"\n          >\n            <span>{label}</span>\n            <span\n              className={usePrefixedClassNames('icon', 'is-small')}\n              aria-hidden=\"true\"\n            >\n              <i className=\"fas fa-angle-down\" />\n            </span>\n          </button>\n        </div>\n        <div\n          className={classNames(\n            usePrefixedClassNames('dropdown-menu'),\n            menuClassName\n          )}\n          id={id ? `${id}-menu` : undefined}\n          ref={menuRef}\n          role=\"menu\"\n          data-testid=\"dropdown-menu\"\n          onKeyDown={handleMenuKeyDown}\n          // The menu, not its content, takes focus from a click between items,\n          // so the menu owns nothing focusable but its items.\n          tabIndex={-1}\n        >\n          <div\n            className={usePrefixedClassNames('dropdown-content')}\n            onClick={handleMenuClick}\n          >\n            {children}\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\n\n/**\n * The elements a dropdown item may render as. Bulma's dropdown markup names\n * these three and no others, so `as` is a closed set rather than an open\n * `React.ElementType`.\n */\nexport type DropdownItemElement = 'a' | 'div' | 'button';\n\n/**\n * The DropdownItem component's own props.\n */\nexport interface DropdownItemOwnProps extends BulmaClassesProps {\n  /** Whether the item is active. */\n  active?: boolean;\n  /** Additional CSS classes. */\n  className?: string;\n  /** Marks the item as disabled; disabled items are skipped during keyboard navigation. Use with `as=\"button\"` for a native disabled control, or pair with `aria-disabled` on a link. */\n  disabled?: boolean;\n  /** Item content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Props for the DropdownItem component. Everything the item does not own\n * follows `as`: `href`, `target` and `rel` under the default `'a'`, `type` and\n * `form` under `'button'`, and the shared HTML attributes under any of them.\n *\n * Pinning these to `React.HTMLAttributes<HTMLElement>` instead — which is what\n * this type did before — rejected `href` on an anchor and `type` on a button,\n * both of which have always worked at runtime. Same defect as #641, in the\n * narrower shape a constrained `as` takes.\n *\n * **Name the tag you mean.** The type parameter defaults to the whole union, not\n * to the rendered element, so bare `DropdownItemProps` keeps accepting\n * `{ as: 'div' }` the way it always has. The cost is that it is not\n * distributive: `Omit` over a union keeps only the shared keys, so the bare\n * alias carries no `href` even though the component takes one under `as=\"a\"`.\n * Write `DropdownItemProps<'a'>` for the anchor's props. That is the #667 alias\n * limitation Button carries, labelled next-major because closing it is\n * source-breaking, and pinned for this component in\n * `__typetests__/polymorphic.tsx`; the component itself is unaffected.\n */\nexport type DropdownItemProps<\n  T extends DropdownItemElement = DropdownItemElement,\n> = DropdownItemOwnProps &\n  Omit<React.ComponentPropsWithoutRef<T>, keyof DropdownItemOwnProps | 'as'> & {\n    /**\n     * The element type to render.\n     *\n     * `'button'` renders `type=\"button\"` unless you pass `type=\"submit\"` or `type=\"reset\"`, so\n     * an item inside a form does not submit it.\n     */\n    as?: T;\n  };\n\n/**\n * The anchor's attributes, minus the one a `<button>` legitimately takes.\n *\n * `type` stays: `as=\"button\"` is a supported form and `type=\"submit\"` is valid\n * there, so stripping it would remove a working attribute. A `<div>` takes no\n * `type`, so it gets the whole `ANCHOR_ONLY_ATTRS` set instead. The set is\n * chosen by the rendered tag because that is where the reason lives (#692).\n *\n * Neither set withholds `rel`, which `Level.Item` does: React declares `rel` on\n * `HTMLAttributes` for every element, so withholding it would diverge from\n * React's own typing, the call #641 recorded for `Navbar.Link`. Level\n * withholds it anyway, because it always has.\n */\nconst STRIP_FROM_BUTTON: Readonly<\n  Record<Exclude<keyof AnchorOnlyAttributes, 'type'>, true>\n> = (() => {\n  const { type: _type, ...rest } = ANCHOR_ONLY_ATTRS;\n  return rest;\n})();\n\n/**\n * The shape the implementation destructures. The public contract is the generic\n * `DropdownItemProps<T>` above — the body cannot see through `T`.\n */\ntype DropdownItemImplProps = DropdownItemOwnProps & {\n  as?: DropdownItemElement;\n};\n\n/**\n * Bulma Dropdown item.\n *\n * @function\n * @param {DropdownItemProps} props - Props for the DropdownItem component.\n * @returns {JSX.Element} The rendered dropdown item.\n */\nexport const DropdownItem = ((itemProps: DropdownItemProps) => {\n  const {\n    children,\n    active,\n    className,\n    as: Component = 'a',\n    ...props\n  } = itemProps as DropdownItemImplProps;\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n  // The anchor's attributes reach an anchor and nothing else — `<div href>` and\n  // `<button target>` are invalid HTML. The same rule Menu applies, for the same\n  // reason: the type now derives these from `as`, and deriving them must not\n  // quietly widen where they land. The type stops a direct caller; this stops a\n  // plain-JS one, a loose `{...props}` spread, and the genericity a wrapping HOC\n  // erases.\n  //\n  // The whole link set, not `href` alone: they all arrive together under\n  // `as=\"a\"`. Menu strips `href` only, because its `as` is open and a flat set\n  // would delete attributes legal on the element a caller named.\n  //\n  // `bestax-migrate` tracks the same question from the other side, per attribute\n  // per element (`LINK_ATTR_ELEMENTS`) rather than as one set — so the two lists\n  // are not interchangeable and neither derives from the other.\n  //\n  // Menu's condition also admits a custom component and a custom element, which\n  // own their prop contracts. Here the set follows the tag: an `<a>` keeps all\n  // of them, a `<button>` keeps `type`, and any other `as` keeps none of them.\n  const forwarded =\n    Component === 'a'\n      ? rest\n      : Component === 'button'\n        ? omitAttrs(rest, STRIP_FROM_BUTTON)\n        : omitAttrs(rest, ANCHOR_ONLY_ATTRS);\n  return (\n    <Component\n      className={classNames(\n        usePrefixedClassNames('dropdown-item', {\n          'is-active': active,\n        }),\n        bulmaHelperClasses,\n        className\n      )}\n      data-testid=\"dropdown-item\"\n      {...forwarded}\n      // After `forwarded` for the same reason as `role` and `type` below: a\n      // spread carrying `tabIndex: undefined` would otherwise erase the\n      // default. The item keeps its menu role and its place in the arrow-key\n      // order, but a `<div>` or an anchor without an `href` cannot take focus\n      // without a tabindex, so the arrow keys stall on it.\n      tabIndex={(forwarded as { tabIndex?: number }).tabIndex ?? 0}\n      // After `forwarded` for the same reason as `type` below: a spread\n      // carrying `role: undefined` would otherwise erase the default, and an\n      // item with no role drops out of the menu and its arrow-key order.\n      role={(forwarded as { role?: React.AriaRole }).role ?? 'menuitem'}\n      // A menu item inside a form must not submit it. `<button>` defaults to\n      // type=\"submit\", and a filter or sort menu sitting in a form is ordinary.\n      // Dropdown's own trigger sets it, and `Avatar` and `Menu.Item` default it\n      // the same way. A caller's `submit` or `reset` still wins, and anything\n      // else becomes `button`, since HTML reads a value it does not define for\n      // a button as submit too; `buttonType` says more.\n      //\n      // After `forwarded`, reading through it rather than before it: React\n      // treats `type={undefined}` as \"remove the attribute\", and a spread\n      // carrying an absent key is how that arrives. Spreading the default first\n      // let such a spread erase it and restore the submit behaviour, so the\n      // guard only held for callers who passed nothing.\n      {...(Component === 'button'\n        ? { type: buttonType((forwarded as { type?: unknown }).type) }\n        : {})}\n    >\n      {children}\n    </Component>\n  );\n}) as ConstrainedPolymorphicComponentWithoutRef<\n  DropdownItemOwnProps,\n  DropdownItemElement,\n  'a'\n>;\n\n/**\n * Bulma Dropdown divider.\n *\n * @function\n * @returns {JSX.Element} The rendered divider element.\n */\nexport const DropdownDivider: React.FC = () => (\n  <hr className={usePrefixedClassNames('dropdown-divider')} />\n);\n\n/** Bulma Dropdown component with Item and Divider sub-components. */\nexport const Dropdown = withSubComponents(\n  DropdownComponent,\n  {\n    Item: DropdownItem,\n    Divider: DropdownDivider,\n  },\n  'Dropdown'\n);\n\nexport default Dropdown;\n"],"names":["isBrowser","_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/SegmentedControl.js

@@ -0,0 +1,230 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { jsx } from 'react/jsx-runtime';
+import { createContext, forwardRef, useState, useCallback, useEffect, useContext, useRef } from 'react';
+import { Button } from '../elements/Button.js';
+import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+import { withSubComponents } from '../helpers/withSubComponents.js';
+import { warnOnce } from '../helpers/devWarnings.js';
+import { useClientLayoutEffect } from '../helpers/useClientLayoutEffect.js';
+
+// Not exported, so it stays out of the public API that `index.ts` re-exports.
+const SegmentedControlContext = createContext(null);
+/** Sorts mounted segments into the order they sit in the page. */
+const inDocumentOrder = (a, b) => a.node.compareDocumentPosition(b.node) & Node.DOCUMENT_POSITION_FOLLOWING
+    ? -1
+    : 1;
+/** How far each arrow key moves along the row. */
+const STEPS = {
+    ArrowRight: 1,
+    ArrowDown: 1,
+    ArrowLeft: -1,
+    ArrowUp: -1,
+};
+/**
+ * The segment a key moves to, found among the segments of the same group in
+ * DOM order, skipping disabled ones and wrapping at either end. `undefined`
+ * for a key the group leaves alone, when no enabled segment is left, or when
+ * the segment isn't inside its row in the page, as a portaled one isn't.
+ */
+function segmentFor(current, key) {
+    const group = current.closest('[role="radiogroup"]');
+    if (!group)
+        return undefined;
+    const segments = Array.from(group.querySelectorAll('[role="radio"]'));
+    const enabled = segments.filter(segment => !segment.disabled);
+    if (key === 'Home')
+        return enabled[0];
+    if (key === 'End')
+        return enabled[enabled.length - 1];
+    const step = STEPS[key];
+    if (!step)
+        return undefined;
+    const at = segments.indexOf(current);
+    for (let i = 1; i <= segments.length; i += 1) {
+        const candidate = segments[(at + step * i + segments.length) % segments.length];
+        if (!candidate.disabled)
+            return candidate;
+    }
+    return undefined;
+}
+/**
+ * The `SegmentedControl` component renders a row of buttons where only one can be on, and tells a screen reader it's a radio group.
+ *
+ * It's Bulma's `.buttons.has-addons` row, with the checked segment filled and
+ * marked `is-selected`, the way Bulma's button docs show it. To a screen
+ * reader it's `role="radiogroup"`, with `role="radio"` and `aria-checked` on
+ * each segment, which is how the APG toolbar example marks its alignment
+ * buttons. The keys follow the APG radio group: the row is one tab stop, the
+ * arrow keys move to the next or previous enabled segment and check it,
+ * wrapping at either end, Home and End go to the first and last, and Space
+ * checks the focused segment. Once a segment is checked, one always is.
+ *
+ * It carries no form value. A choice that's sent with a form is `Radios`.
+ *
+ * @function
+ * @param {SegmentedControlProps} props - Props for the SegmentedControl component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the row's `<div>`.
+ * @returns {JSX.Element} The rendered segmented control.
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/radio/ | APG radio group pattern}
+ * @see {@link https://bulma.io/documentation/elements/button/#list-of-buttons | Bulma list of buttons}
+ *
+ * @example
+ * <SegmentedControl aria-label="Text alignment" defaultValue="left">
+ *   <SegmentedControl.Segment value="left">Left</SegmentedControl.Segment>
+ *   <SegmentedControl.Segment value="center">Center</SegmentedControl.Segment>
+ *   <SegmentedControl.Segment value="right">Right</SegmentedControl.Segment>
+ * </SegmentedControl>
+ */
+const SegmentedControlRoot = forwardRef(function SegmentedControl({ value, defaultValue, onChange, color = 'link', size, hasAddons = true, isCentered, isRight, className, children, ...props }, ref) {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    // Controlled vs uncontrolled, as in Tabs and Collapses.
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const checked = isControlled ? (value ?? undefined) : internalValue;
+    const select = (next) => {
+        if (next === checked)
+            return;
+        if (!isControlled)
+            setInternalValue(next);
+        onChange?.(next);
+    };
+    // The segments mount and register from an effect, so the group knows
+    // which can hold the tab stop wherever in the tree they sit.
+    const [segments, setSegments] = useState([]);
+    const register = useCallback((record) => {
+        setSegments(prev => [...prev, record]);
+        return () => setSegments(prev => prev.filter(r => r !== record));
+    }, []);
+    const [focused, setFocused] = useState();
+    // The first enabled segment in the page, sorted when it's read rather
+    // than when a segment registers, so reordered segments are seen too. It's
+    // read after the commit: a render runs before React moves the nodes, so
+    // sorting there would find the old order.
+    const [firstEnabled, setFirstEnabled] = useState();
+    useClientLayoutEffect(() => {
+        const inPage = segments.filter(s => !s.disabled).sort(inDocumentOrder);
+        setFirstEnabled(inPage[0]?.value);
+    }, [segments, children]);
+    // One tab stop for the row (roving tabindex). While focus is in the row
+    // the stop follows it, so Tab leaves from wherever focus is even when a
+    // controlled group hasn't taken the new value. Otherwise it's the checked
+    // segment, or the first enabled one when none is checked or the checked
+    // one is disabled. Before the segments register (the server render and
+    // the first client render) the checked one holds it, so a row with
+    // nothing checked has no stop until the client has rendered.
+    const canHoldStop = (candidate) => segments.some(s => !s.disabled && s.value === candidate);
+    let tabStop;
+    if (canHoldStop(focused))
+        tabStop = focused;
+    else if (segments.length === 0 || canHoldStop(checked))
+        tabStop = checked;
+    else
+        tabStop = firstEnabled;
+    const named = Boolean(rest['aria-label'] || rest['aria-labelledby']);
+    useEffect(() => {
+        if (!named) {
+            warnOnce('SegmentedControl:unnamed', '[bestax-bulma] <SegmentedControl> has no accessible name. Pass ' +
+                'aria-label or aria-labelledby, so a screen reader can say what ' +
+                'the choice is.');
+        }
+    }, [named]);
+    const rowClasses = usePrefixedClassNames('buttons', {
+        'has-addons': hasAddons,
+        'is-centered': isCentered,
+        'is-right': isRight,
+        [`are-${size}`]: size,
+    });
+    // The props are spread first, so the role a screen reader relies on wins
+    // over anything a JavaScript caller or a spread object passes along.
+    return (jsx(SegmentedControlContext.Provider, { value: { checked, tabStop, color, select, setFocused, register }, children: jsx("div", { ...rest, ref: ref, role: "radiogroup", className: classNames(rowClasses, bulmaHelperClasses, className), children: children }) }));
+});
+/**
+ * One option in the row: a `<button role="radio">` that's checked while the group's value is its `value`, filled with the group's `color` and marked `is-selected`.
+ *
+ * @function
+ * @param {SegmentedControlSegmentProps} props - Props for the segment.
+ * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref to the `<button>`.
+ * @returns {JSX.Element} The rendered segment.
+ */
+const Segment = forwardRef(function Segment({ value, isDisabled, disabled, className, onClick, onKeyDown, onFocus, onBlur, ...props }, ref) {
+    const ctx = useContext(SegmentedControlContext);
+    const checked = ctx !== null && ctx.checked === value;
+    const off = Boolean(isDisabled || disabled);
+    // Prefixed like Button's own classes, which a hand-written
+    // `className="is-selected"` could not be under ConfigProvider classPrefix.
+    // Bulma lifts `is-selected` above its neighbours in `.buttons.has-addons`.
+    const selectedClass = usePrefixedClassNames({ 'is-selected': checked });
+    const nodeRef = useRef(null);
+    const setRefs = useCallback((node) => {
+        nodeRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    const register = ctx?.register;
+    useEffect(() => {
+        if (!register) {
+            warnOnce('SegmentedControl.Segment:outside', '[bestax-bulma] <SegmentedControl.Segment> is outside a ' +
+                '<SegmentedControl>, so nothing can check it. Put it inside one.');
+            return undefined;
+        }
+        return register({
+            value,
+            disabled: off,
+            node: nodeRef.current,
+        });
+    }, [register, value, off]);
+    // The caller's onClick runs first, so a `preventDefault()` there keeps
+    // the segment from being checked. A disabled button gets no click.
+    const handleClick = (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented)
+            return;
+        ctx?.select(value);
+    };
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (!ctx ||
+            event.defaultPrevented ||
+            event.altKey ||
+            event.ctrlKey ||
+            event.metaKey) {
+            return;
+        }
+        const target = segmentFor(event.currentTarget, event.key);
+        if (!target)
+            return;
+        event.preventDefault();
+        // The row has taken this key, so nothing above it acts on it too: a
+        // Carousel moves its slide on the arrows from a document listener that
+        // doesn't read `defaultPrevented`. Keys the row leaves alone still bubble.
+        event.stopPropagation();
+        target.focus();
+        // The check follows focus, APG's rule for a radio group outside a
+        // toolbar. It goes through a click on the segment, as a native radio's
+        // does, so its onClick sees it. Inside a toolbar the arrows would move
+        // focus alone; that is the line a toolbar would change.
+        target.click();
+    };
+    const handleFocus = (event) => {
+        onFocus?.(event);
+        ctx?.setFocused(value);
+    };
+    // The segment focus moves to, if any, records itself straight after.
+    const handleBlur = (event) => {
+        onBlur?.(event);
+        ctx?.setFocused(undefined);
+    };
+    // The props are spread first, so what a radio depends on wins over
+    // anything a JavaScript caller or a spread object passes along: it stays
+    // a button, never submits, reports whether it's checked, and the group
+    // decides whether Tab reaches it.
+    return (jsx(Button, { ...props, ref: setRefs, as: "button", type: "button", role: "radio", "aria-checked": checked, tabIndex: ctx ? (ctx.tabStop === value ? 0 : -1) : undefined, isDisabled: off, color: checked ? ctx.color : undefined, className: classNames(selectedClass, className), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur }));
+});
+Segment.displayName = 'SegmentedControl.Segment';
+const SegmentedControl = withSubComponents(SegmentedControlRoot, { Segment }, 'SegmentedControl');
+
+export { SegmentedControl };
+//# sourceMappingURL=SegmentedControl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/SegmentedControl.tsx"],"sourcesContent":["import React, {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Button, type ButtonOwnProps } from '../elements/Button';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport { warnOnce } from '../helpers/devWarnings';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\n\n// Spelled out so the API page can list the values. The tests hold it to\n// ToggleButton's, since the checked segment fills the way a pressed toggle\n// does and for the same reasons.\n/**\n * The fills the checked segment takes: `Button`'s colors, minus `text` and\n * `ghost`, which don't fill, and `white`, `light`, `dark` and `black`, which in\n * one theme or the other fill about as light or dark as an unchecked segment\n * already is. The same set `ToggleButton` takes.\n */\nexport type SegmentedControlColor =\n  'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\n/** A mounted segment, as the group needs to know it for the tab stop. */\ninterface SegmentRecord {\n  value: string;\n  disabled: boolean;\n  node: HTMLButtonElement;\n}\n\ninterface SegmentedControlContextValue {\n  /** The checked segment's value, or `undefined` while none is. */\n  checked: string | undefined;\n  /** The segment that holds `tabIndex={0}`, or `undefined` for none. */\n  tabStop: string | undefined;\n  /** The fill the checked segment takes. */\n  color: SegmentedControlColor;\n  /** Checks a segment, unless it's checked already. */\n  select: (value: string) => void;\n  /** Records which segment has focus, so the tab stop can follow it. */\n  setFocused: (value: string | undefined) => void;\n  register: (record: SegmentRecord) => () => void;\n}\n\n// Not exported, so it stays out of the public API that `index.ts` re-exports.\nconst SegmentedControlContext =\n  createContext<SegmentedControlContextValue | null>(null);\n\n/** Sorts mounted segments into the order they sit in the page. */\nconst inDocumentOrder = (a: SegmentRecord, b: SegmentRecord) =>\n  a.node.compareDocumentPosition(b.node) & Node.DOCUMENT_POSITION_FOLLOWING\n    ? -1\n    : 1;\n\n/** How far each arrow key moves along the row. */\nconst STEPS: Record<string, number> = {\n  ArrowRight: 1,\n  ArrowDown: 1,\n  ArrowLeft: -1,\n  ArrowUp: -1,\n};\n\n/**\n * The segment a key moves to, found among the segments of the same group in\n * DOM order, skipping disabled ones and wrapping at either end. `undefined`\n * for a key the group leaves alone, when no enabled segment is left, or when\n * the segment isn't inside its row in the page, as a portaled one isn't.\n */\nfunction segmentFor(\n  current: HTMLButtonElement,\n  key: string\n): HTMLButtonElement | undefined {\n  const group = current.closest('[role=\"radiogroup\"]');\n  if (!group) return undefined;\n  const segments = Array.from(\n    group.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]')\n  );\n  const enabled = segments.filter(segment => !segment.disabled);\n\n  if (key === 'Home') return enabled[0];\n  if (key === 'End') return enabled[enabled.length - 1];\n\n  const step = STEPS[key];\n  if (!step) return undefined;\n  const at = segments.indexOf(current);\n  for (let i = 1; i <= segments.length; i += 1) {\n    const candidate =\n      segments[(at + step * i + segments.length) % segments.length];\n    if (!candidate.disabled) return candidate;\n  }\n  return undefined;\n}\n\n// ---------------------------------------------------------------------------\n// SegmentedControl (root)\n// ---------------------------------------------------------------------------\n\n/**\n * Props for the SegmentedControl component. The helper props, the other `<div>`\n * attributes and the `ref` all land on the row.\n *\n * @extraProp {string} [aria-label] - Names the group for a screen reader, such as \"Text alignment\". A radio group needs a name, so pass this or `aria-labelledby`, and a development build warns when it has neither.\n * @extraProp {string} [aria-labelledby] - The id of a visible heading or label that names the group, in place of `aria-label`.\n * @extraProp {React.Ref<HTMLDivElement>} [ref] - Ref forwarded to the row's `<div>`.\n */\nexport interface SegmentedControlProps\n  extends\n    Omit<\n      React.HTMLAttributes<HTMLDivElement>,\n      'onChange' | 'defaultValue' | 'color' | 'role'\n    >,\n    Omit<\n      BulmaClassesProps,\n      'color' | 'colorShade' | 'backgroundColor' | 'backgroundColorShade'\n    > {\n  /**\n   * The checked segment's `value`, when you hold the state. Setting it makes\n   * the group controlled: picking a segment only calls `onChange`, and nothing\n   * changes until you pass the new value. `null` checks nothing, with the\n   * tab stop `defaultValue` describes for that. Pick this or `defaultValue`\n   * for the group's lifetime.\n   */\n  value?: string | null;\n  /**\n   * The segment checked to begin with, when the group holds its own state.\n   * Leave it out and nothing is checked until someone picks one, and Tab\n   * lands on the first enabled segment meanwhile. That fallback takes hold\n   * once the row has rendered in the browser: server markup with nothing\n   * checked has no tab stop until then, while a checked segment is the stop\n   * from the server markup on.\n   */\n  defaultValue?: string;\n  /**\n   * Called with the newly checked segment's `value`, whether or not `value`\n   * is set. The arrow keys, Home and End check the segment they move to, so\n   * each of those calls it too: the check follows focus, as in a native radio\n   * group. Pressing the checked segment again doesn't call it, since a\n   * segmented control can't be cleared: one stays checked once one is.\n   */\n  onChange?: (value: string) => void;\n  /**\n   * The checked segment's fill. The others are plain buttons, so the fill is\n   * the difference people see. Takes the same colors as `ToggleButton`, for\n   * the same reason: `white`, `light`, `dark` and `black` fill about as light\n   * or dark as a plain button already is in one theme or the other.\n   */\n  color?: SegmentedControlColor;\n  /** Size of every segment, through Bulma's `are-<size>` on the row. */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Joins the segments into one row with no gap between them, Bulma's\n   * `has-addons`. Set it to `false` for separate buttons.\n   */\n  hasAddons?: boolean;\n  /** Centers the row. */\n  isCentered?: boolean;\n  /** Aligns the row to the right. */\n  isRight?: boolean;\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** The `SegmentedControl.Segment`s, each with a `value` of its own. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `SegmentedControl` component renders a row of buttons where only one can be on, and tells a screen reader it's a radio group.\n *\n * It's Bulma's `.buttons.has-addons` row, with the checked segment filled and\n * marked `is-selected`, the way Bulma's button docs show it. To a screen\n * reader it's `role=\"radiogroup\"`, with `role=\"radio\"` and `aria-checked` on\n * each segment, which is how the APG toolbar example marks its alignment\n * buttons. The keys follow the APG radio group: the row is one tab stop, the\n * arrow keys move to the next or previous enabled segment and check it,\n * wrapping at either end, Home and End go to the first and last, and Space\n * checks the focused segment. Once a segment is checked, one always is.\n *\n * It carries no form value. A choice that's sent with a form is `Radios`.\n *\n * @function\n * @param {SegmentedControlProps} props - Props for the SegmentedControl component.\n * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the row's `<div>`.\n * @returns {JSX.Element} The rendered segmented control.\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/radio/ | APG radio group pattern}\n * @see {@link https://bulma.io/documentation/elements/button/#list-of-buttons | Bulma list of buttons}\n *\n * @example\n * <SegmentedControl aria-label=\"Text alignment\" defaultValue=\"left\">\n *   <SegmentedControl.Segment value=\"left\">Left</SegmentedControl.Segment>\n *   <SegmentedControl.Segment value=\"center\">Center</SegmentedControl.Segment>\n *   <SegmentedControl.Segment value=\"right\">Right</SegmentedControl.Segment>\n * </SegmentedControl>\n */\nconst SegmentedControlRoot = forwardRef<HTMLDivElement, SegmentedControlProps>(\n  function SegmentedControl(\n    {\n      value,\n      defaultValue,\n      onChange,\n      color = 'link',\n      size,\n      hasAddons = true,\n      isCentered,\n      isRight,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) {\n    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });\n\n    // Controlled vs uncontrolled, as in Tabs and Collapses.\n    const isControlled = value !== undefined;\n    const [internalValue, setInternalValue] = useState(defaultValue);\n    const checked = isControlled ? (value ?? undefined) : internalValue;\n\n    const select = (next: string) => {\n      if (next === checked) return;\n      if (!isControlled) setInternalValue(next);\n      onChange?.(next);\n    };\n\n    // The segments mount and register from an effect, so the group knows\n    // which can hold the tab stop wherever in the tree they sit.\n    const [segments, setSegments] = useState<SegmentRecord[]>([]);\n    const register = useCallback((record: SegmentRecord) => {\n      setSegments(prev => [...prev, record]);\n      return () => setSegments(prev => prev.filter(r => r !== record));\n    }, []);\n    const [focused, setFocused] = useState<string | undefined>();\n\n    // The first enabled segment in the page, sorted when it's read rather\n    // than when a segment registers, so reordered segments are seen too. It's\n    // read after the commit: a render runs before React moves the nodes, so\n    // sorting there would find the old order.\n    const [firstEnabled, setFirstEnabled] = useState<string | undefined>();\n    useClientLayoutEffect(() => {\n      const inPage = segments.filter(s => !s.disabled).sort(inDocumentOrder);\n      setFirstEnabled(inPage[0]?.value);\n    }, [segments, children]);\n\n    // One tab stop for the row (roving tabindex). While focus is in the row\n    // the stop follows it, so Tab leaves from wherever focus is even when a\n    // controlled group hasn't taken the new value. Otherwise it's the checked\n    // segment, or the first enabled one when none is checked or the checked\n    // one is disabled. Before the segments register (the server render and\n    // the first client render) the checked one holds it, so a row with\n    // nothing checked has no stop until the client has rendered.\n    const canHoldStop = (candidate: string | undefined) =>\n      segments.some(s => !s.disabled && s.value === candidate);\n    let tabStop: string | undefined;\n    if (canHoldStop(focused)) tabStop = focused;\n    else if (segments.length === 0 || canHoldStop(checked)) tabStop = checked;\n    else tabStop = firstEnabled;\n\n    const named = Boolean(rest['aria-label'] || rest['aria-labelledby']);\n    useEffect(() => {\n      if (!named) {\n        warnOnce(\n          'SegmentedControl:unnamed',\n          '[bestax-bulma] <SegmentedControl> has no accessible name. Pass ' +\n            'aria-label or aria-labelledby, so a screen reader can say what ' +\n            'the choice is.'\n        );\n      }\n    }, [named]);\n\n    const rowClasses = usePrefixedClassNames('buttons', {\n      'has-addons': hasAddons,\n      'is-centered': isCentered,\n      'is-right': isRight,\n      [`are-${size}`]: size,\n    });\n\n    // The props are spread first, so the role a screen reader relies on wins\n    // over anything a JavaScript caller or a spread object passes along.\n    return (\n      <SegmentedControlContext.Provider\n        value={{ checked, tabStop, color, select, setFocused, register }}\n      >\n        <div\n          {...rest}\n          ref={ref}\n          role=\"radiogroup\"\n          className={classNames(rowClasses, bulmaHelperClasses, className)}\n        >\n          {children}\n        </div>\n      </SegmentedControlContext.Provider>\n    );\n  }\n);\n\n// ---------------------------------------------------------------------------\n// SegmentedControl.Segment\n// ---------------------------------------------------------------------------\n\n/**\n * Props for SegmentedControl.Segment. The helper props, the other button\n * attributes and the `ref` all land on the `<button>`.\n *\n * Some of `Button`'s props are left out on purpose. `as`, `type`, `role` and\n * `tabIndex`, since a segment is always a `<button type=\"button\" role=\"radio\">`\n * and the group decides which segment Tab reaches. `color`, which the group\n * sets for the checked segment, and the props that change the fill\n * (`isActive`, `isLight`, `isOutlined`, `isInverted`, `textColor`, `bgColor`\n * and their shades), since each would color it whether checked or not. `size`\n * and the width and shape props, which the row sets for every segment. And\n * `isStatic` and `isLoading`, a segment you couldn't pick.\n *\n * @extraProp {React.Ref<HTMLButtonElement>} [ref] - Ref forwarded to the `<button>`.\n */\nexport interface SegmentedControlSegmentProps\n  extends\n    Omit<\n      ButtonOwnProps,\n      | 'color'\n      | 'size'\n      | 'isActive'\n      | 'isStatic'\n      | 'isLoading'\n      | 'isLight'\n      | 'isOutlined'\n      | 'isInverted'\n      | 'isRounded'\n      | 'isFullwidth'\n      | 'isFullWidth'\n      | 'textColor'\n      | 'bgColor'\n      | 'colorShade'\n      | 'backgroundColorShade'\n    >,\n    Omit<\n      React.ButtonHTMLAttributes<HTMLButtonElement>,\n      | keyof ButtonOwnProps\n      | 'type'\n      | 'value'\n      | 'role'\n      | 'tabIndex'\n      | 'aria-checked'\n      | 'aria-pressed'\n    > {\n  /**\n   * **Required.** What `onChange` reports when this segment is checked, and\n   * what the group's `value` and `defaultValue` name it by. Unique within the\n   * group.\n   */\n  value: string;\n  /**\n   * The label. An icon on its own needs an `aria-label`, so a screen reader\n   * has something to say.\n   */\n  children?: React.ReactNode;\n  /**\n   * Disables the segment, the same as `disabled`: it can't be clicked, the\n   * arrow keys, Home and End skip it, and it never holds the row's tab stop.\n   * A checked one keeps its fill under Bulma's disabled look.\n   */\n  isDisabled?: boolean;\n  /**\n   * Not accepted: `aria-checked` follows the group's value. Declared because\n   * JSX lets a hyphenated attribute through when the props don't name it.\n   * @internal\n   */\n  'aria-checked'?: never;\n  /**\n   * Not accepted: a segment is a radio, which says checked, not pressed.\n   * @internal\n   */\n  'aria-pressed'?: never;\n}\n\n/**\n * One option in the row: a `<button role=\"radio\">` that's checked while the group's value is its `value`, filled with the group's `color` and marked `is-selected`.\n *\n * @function\n * @param {SegmentedControlSegmentProps} props - Props for the segment.\n * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref to the `<button>`.\n * @returns {JSX.Element} The rendered segment.\n */\nconst Segment = forwardRef<HTMLButtonElement, SegmentedControlSegmentProps>(\n  function Segment(\n    {\n      value,\n      isDisabled,\n      disabled,\n      className,\n      onClick,\n      onKeyDown,\n      onFocus,\n      onBlur,\n      ...props\n    },\n    ref\n  ) {\n    const ctx = useContext(SegmentedControlContext);\n    const checked = ctx !== null && ctx.checked === value;\n    const off = Boolean(isDisabled || disabled);\n\n    // Prefixed like Button's own classes, which a hand-written\n    // `className=\"is-selected\"` could not be under ConfigProvider classPrefix.\n    // Bulma lifts `is-selected` above its neighbours in `.buttons.has-addons`.\n    const selectedClass = usePrefixedClassNames({ 'is-selected': checked });\n\n    const nodeRef = useRef<HTMLButtonElement | null>(null);\n    const setRefs = useCallback(\n      (node: HTMLButtonElement | null) => {\n        nodeRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) ref.current = node;\n      },\n      [ref]\n    );\n\n    const register = ctx?.register;\n    useEffect(() => {\n      if (!register) {\n        warnOnce(\n          'SegmentedControl.Segment:outside',\n          '[bestax-bulma] <SegmentedControl.Segment> is outside a ' +\n            '<SegmentedControl>, so nothing can check it. Put it inside one.'\n        );\n        return undefined;\n      }\n      return register({\n        value,\n        disabled: off,\n        node: nodeRef.current as HTMLButtonElement,\n      });\n    }, [register, value, off]);\n\n    // The caller's onClick runs first, so a `preventDefault()` there keeps\n    // the segment from being checked. A disabled button gets no click.\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n      if (event.defaultPrevented) return;\n      ctx?.select(value);\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      onKeyDown?.(event);\n      if (\n        !ctx ||\n        event.defaultPrevented ||\n        event.altKey ||\n        event.ctrlKey ||\n        event.metaKey\n      ) {\n        return;\n      }\n      const target = segmentFor(event.currentTarget, event.key);\n      if (!target) return;\n      event.preventDefault();\n      // The row has taken this key, so nothing above it acts on it too: a\n      // Carousel moves its slide on the arrows from a document listener that\n      // doesn't read `defaultPrevented`. Keys the row leaves alone still bubble.\n      event.stopPropagation();\n      target.focus();\n      // The check follows focus, APG's rule for a radio group outside a\n      // toolbar. It goes through a click on the segment, as a native radio's\n      // does, so its onClick sees it. Inside a toolbar the arrows would move\n      // focus alone; that is the line a toolbar would change.\n      target.click();\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n      onFocus?.(event);\n      ctx?.setFocused(value);\n    };\n\n    // The segment focus moves to, if any, records itself straight after.\n    const handleBlur = (event: React.FocusEvent<HTMLButtonElement>) => {\n      onBlur?.(event);\n      ctx?.setFocused(undefined);\n    };\n\n    // The props are spread first, so what a radio depends on wins over\n    // anything a JavaScript caller or a spread object passes along: it stays\n    // a button, never submits, reports whether it's checked, and the group\n    // decides whether Tab reaches it.\n    return (\n      <Button\n        {...props}\n        ref={setRefs}\n        as=\"button\"\n        type=\"button\"\n        role=\"radio\"\n        aria-checked={checked}\n        tabIndex={ctx ? (ctx.tabStop === value ? 0 : -1) : undefined}\n        isDisabled={off}\n        color={checked ? ctx.color : undefined}\n        className={classNames(selectedClass, className)}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n      />\n    );\n  }\n);\n\nSegment.displayName = 'SegmentedControl.Segment';\n\nexport const SegmentedControl = withSubComponents(\n  SegmentedControlRoot,\n  { Segment },\n  'SegmentedControl'\n);\n\nexport default SegmentedControl;\n"],"names":["_jsx"],"mappings":"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"}