@allxsmith/bestax-bulma 5.26.6 → 5.27.1

package/dist/esm/components/Dropdown.js

@@ -0,0 +1,362 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
+import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+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';
+
+/**
+ * Checks if code is running in a browser environment.
+ * @deprecated Dropdown's internal SSR guard, exported by accident; it will
+ * be removed in the next major. Check `typeof window !== 'undefined' &&
+ * typeof document !== 'undefined'` instead.
+ * @param win - Window object.
+ * @param doc - Document object.
+ * @returns {boolean} True if in browser, false otherwise.
+ */
+const isBrowser$1 = (win, doc) => typeof win !== 'undefined' && typeof doc !== 'undefined';
+/**
+ * The `Dropdown` component provides Bulma's versatile dropdown menu for your Bulma React UI.
+ *
+ * @function
+ * @param {DropdownProps} props - Props for the Dropdown component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the root dropdown element.
+ * @returns {JSX.Element} The rendered dropdown.
+ * @see {@link https://bulma.io/documentation/components/dropdown/ | Bulma Dropdown documentation}
+ */
+const DropdownComponent = forwardRef(function DropdownComponent({ label, children, className, menuClassName, active: activeProp, up, right, hoverable, disabled, onActiveChange, closeOnClick = true, id, ...props }, ref) {
+    const [active, setActive] = useState(!!activeProp);
+    const dropdownRef = useRef(null);
+    const triggerRef = useRef(null);
+    const pendingFocusRef = useRef(null);
+    // Cleanup returned by a consumer's callback ref on attach, held until detach.
+    const consumerCleanupRef = useRef(null);
+    const setRefs = useCallback((node) => {
+        dropdownRef.current =
+            node;
+        if (typeof ref === 'function') {
+            // React 19 lets a callback ref return a cleanup function and detaches
+            // by running it instead of calling the ref with `null`; React 18
+            // discards the return value entirely. Returning it from here would be
+            // a React-19-only contract, so instead we hold the cleanup and run it
+            // ourselves on detach — a consumer's cleanup ref then behaves the same
+            // on both majors of the CI matrix.
+            if (node === null) {
+                const consumerCleanup = consumerCleanupRef.current;
+                consumerCleanupRef.current = null;
+                if (consumerCleanup) {
+                    consumerCleanup();
+                }
+                else {
+                    ref(null);
+                }
+                return;
+            }
+            const cleanup = ref(node);
+            consumerCleanupRef.current =
+                typeof cleanup === 'function' ? cleanup : null;
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    // Generate Bulma classes with prefix
+    const bulmaClasses = usePrefixedClassNames('dropdown', {
+        'is-active': active,
+        'is-up': up,
+        'is-right': right,
+        'is-hoverable': hoverable,
+        'is-disabled': disabled,
+    });
+    const buttonClass = usePrefixedClassNames('button');
+    // Controlled mode support: mirror the controlled `active` prop into local
+    // state. This is an intentional external-prop sync (controlled/uncontrolled
+    // hybrid); behavior is covered by tests and certified in-browser.
+    useEffect(() => {
+        // eslint-disable-next-line react-hooks/set-state-in-effect -- syncing to controlled prop
+        if (typeof activeProp === 'boolean')
+            setActive(activeProp);
+    }, [activeProp]);
+    // SSR-safe outside click
+    useEffect(() => {
+        if (!active)
+            return;
+        if (!isBrowser$1(window, document))
+            return;
+        const handleClick = (e) => {
+            if (!isEventInside(e, dropdownRef.current)) {
+                setActive(false);
+                onActiveChange?.(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClick);
+        return () => document.removeEventListener('mousedown', handleClick);
+    }, [active, onActiveChange]);
+    const handleToggle = () => {
+        /* istanbul ignore next: guard is enforced by button[disabled] at the DOM level */
+        if (disabled)
+            return;
+        const newActive = !active;
+        setActive(newActive);
+        onActiveChange?.(newActive);
+    };
+    const handleMenuClick = (e) => {
+        if (closeOnClick) {
+            setActive(false);
+            onActiveChange?.(false);
+            // Closing hides the item that has focus, and the browser drops focus
+            // to the page when that happens. Hand it back to the trigger, as
+            // Escape does. An item that moved focus somewhere else keeps it there.
+            // The menu around this content is what a click between items focuses.
+            const menu = e.currentTarget.parentElement;
+            if (menu.contains(getActiveElementInTree(e.currentTarget))) {
+                triggerRef.current?.focus();
+            }
+        }
+    };
+    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');
+    };
+    // 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.
+    useEffect(() => {
+        if (!active || !pendingFocusRef.current)
+            return;
+        const items = getMenuItems();
+        if (items.length) {
+            const index = pendingFocusRef.current === 'first' ? 0 : items.length - 1;
+            items[index].focus();
+        }
+        pendingFocusRef.current = null;
+    }, [active]);
+    const handleTriggerKeyDown = (e) => {
+        if (disabled)
+            return;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                pendingFocusRef.current = 'first';
+                if (!active) {
+                    setActive(true);
+                    onActiveChange?.(true);
+                }
+                else {
+                    const items = getMenuItems();
+                    if (items.length)
+                        items[0].focus();
+                    pendingFocusRef.current = null;
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                pendingFocusRef.current = 'last';
+                if (!active) {
+                    setActive(true);
+                    onActiveChange?.(true);
+                }
+                else {
+                    const items = getMenuItems();
+                    if (items.length)
+                        items[items.length - 1].focus();
+                    pendingFocusRef.current = null;
+                }
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                // A held key sends a keydown per auto-repeat. Running an item hands
+                // focus back here, so without this a held Enter would reopen the
+                // menu and run whichever item it focused next.
+                if (e.repeat)
+                    break;
+                if (!active) {
+                    pendingFocusRef.current = 'first';
+                    setActive(true);
+                    onActiveChange?.(true);
+                }
+                else {
+                    setActive(false);
+                    onActiveChange?.(false);
+                }
+                break;
+            case 'Escape':
+                if (active) {
+                    e.preventDefault();
+                    setActive(false);
+                    onActiveChange?.(false);
+                }
+                break;
+        }
+    };
+    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.
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            setActive(false);
+            onActiveChange?.(false);
+            triggerRef.current?.focus();
+            return;
+        }
+        if (e.key === 'Tab') {
+            setActive(false);
+            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;
+            }
+        }
+    };
+    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, 
+                // 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 }) })] }));
+});
+/**
+ * The anchor's attributes, minus the one a `<button>` legitimately takes.
+ *
+ * `type` stays: `as="button"` is a supported form and `type="submit"` is valid
+ * there, so stripping it would remove a working attribute. A `<div>` takes no
+ * `type`, so it gets the whole `ANCHOR_ONLY_ATTRS` set instead. The set is
+ * chosen by the rendered tag because that is where the reason lives (#692).
+ *
+ * Neither set withholds `rel`, which `Level.Item` does: React declares `rel` on
+ * `HTMLAttributes` for every element, so withholding it would diverge from
+ * React's own typing, the call #641 recorded for `Navbar.Link`. Level
+ * withholds it anyway, because it always has.
+ */
+const STRIP_FROM_BUTTON = (() => {
+    const { type: _type, ...rest } = ANCHOR_ONLY_ATTRS;
+    return rest;
+})();
+/**
+ * Bulma Dropdown item.
+ *
+ * @function
+ * @param {DropdownItemProps} props - Props for the DropdownItem component.
+ * @returns {JSX.Element} The rendered dropdown item.
+ */
+const DropdownItem = ((itemProps) => {
+    const { children, active, className, as: Component = 'a', ...props } = itemProps;
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    // The anchor's attributes reach an anchor and nothing else — `<div href>` and
+    // `<button target>` are invalid HTML. The same rule Menu applies, for the same
+    // reason: the type now derives these from `as`, and deriving them must not
+    // quietly widen where they land. The type stops a direct caller; this stops a
+    // plain-JS one, a loose `{...props}` spread, and the genericity a wrapping HOC
+    // erases.
+    //
+    // The whole link set, not `href` alone: they all arrive together under
+    // `as="a"`. Menu strips `href` only, because its `as` is open and a flat set
+    // would delete attributes legal on the element a caller named.
+    //
+    // `bestax-migrate` tracks the same question from the other side, per attribute
+    // per element (`LINK_ATTR_ELEMENTS`) rather than as one set — so the two lists
+    // are not interchangeable and neither derives from the other.
+    //
+    // Menu's condition also admits a custom component and a custom element, which
+    // own their prop contracts. Here the set follows the tag: an `<a>` keeps all
+    // of them, a `<button>` keeps `type`, and any other `as` keeps none of them.
+    const forwarded = Component === 'a'
+        ? rest
+        : Component === 'button'
+            ? omitAttrs(rest, STRIP_FROM_BUTTON)
+            : omitAttrs(rest, ANCHOR_ONLY_ATTRS);
+    return (jsx(Component, { className: classNames(usePrefixedClassNames('dropdown-item', {
+            'is-active': active,
+        }), bulmaHelperClasses, className), "data-testid": "dropdown-item", ...forwarded, 
+        // After `forwarded` for the same reason as `role` and `type` below: a
+        // spread carrying `tabIndex: undefined` would otherwise erase the
+        // default. The item keeps its menu role and its place in the arrow-key
+        // order, but a `<div>` or an anchor without an `href` cannot take focus
+        // without a tabindex, so the arrow keys stall on it.
+        tabIndex: forwarded.tabIndex ?? 0, 
+        // After `forwarded` for the same reason as `type` below: a spread
+        // carrying `role: undefined` would otherwise erase the default, and an
+        // item with no role drops out of the menu and its arrow-key order.
+        role: forwarded.role ?? 'menuitem', ...(Component === 'button'
+            ? { type: buttonType(forwarded.type) }
+            : {}), children: children }));
+});
+/**
+ * Bulma Dropdown divider.
+ *
+ * @function
+ * @returns {JSX.Element} The rendered divider element.
+ */
+const DropdownDivider = () => (jsx("hr", { className: usePrefixedClassNames('dropdown-divider') }));
+/** Bulma Dropdown component with Item and Divider sub-components. */
+const Dropdown = withSubComponents(DropdownComponent, {
+    Item: DropdownItem,
+    Divider: DropdownDivider,
+}, 'Dropdown');
+
+export { Dropdown, DropdownDivider, DropdownItem, isBrowser$1 as isBrowser };
+//# sourceMappingURL=Dropdown.js.map

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

@@ -0,0 +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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"}

package/dist/esm/components/Loading.js

@@ -0,0 +1,87 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+import { useScrollLock } from '../helpers/scrollLock.js';
+
+/**
+ * The `Loading` component provides a loading overlay with a spinner animation.
+ *
+ * @function
+ * @param {LoadingProps} props - Props for the Loading component.
+ * @returns {JSX.Element | null} The rendered loading overlay or null if not active.
+ *
+ * @example
+ * // Full page loading
+ * <Loading active isFullPage />
+ *
+ * @example
+ * // Container loading with message
+ * <div style={{ position: 'relative', height: '200px' }}>
+ *   <Loading active>Loading data...</Loading>
+ * </div>
+ *
+ * @example
+ * // With color variant
+ * <Loading active color="primary" />
+ *
+ * @example
+ * // With cancel functionality
+ * <Loading
+ *   active={isLoading}
+ *   canCancel
+ *   onCancel={() => setIsLoading(false)}
+ * />
+ */
+const Loading = ({ active = false, isFullPage = false, size, color, canCancel = false, onCancel, children, className, overlayClassName, iconClassName, indicator, overlay, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    // Generate Bulma classes with prefix
+    const loadingClasses = usePrefixedClassNames('loading', {
+        'is-active': active,
+        'is-full-page': isFullPage,
+        'is-cancelable': canCancel,
+        [`is-${overlay}`]: !!overlay,
+        [`is-${color}`]: !!color,
+    });
+    const iconClasses = usePrefixedClassNames('loading-icon', {
+        [`is-${size}`]: size,
+    });
+    // Combine classes
+    const combinedClasses = classNames(loadingClasses, bulmaHelperClasses, className);
+    const combinedOverlayClasses = classNames(usePrefixedClassNames('loading-overlay'), overlayClassName);
+    const combinedIconClasses = classNames(iconClasses, iconClassName);
+    const loadingContentClass = usePrefixedClassNames('loading-content');
+    const loadingIconCustomClass = usePrefixedClassNames('loading-icon-custom');
+    const loadingTextClass = usePrefixedClassNames('loading-text');
+    const loadingCancelClass = usePrefixedClassNames('loading-cancel');
+    // Handle cancel click
+    const handleOverlayClick = () => {
+        if (canCancel && onCancel) {
+            onCancel();
+        }
+    };
+    // Handle escape key
+    React.useEffect(() => {
+        if (!active || !canCancel || !onCancel)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                onCancel();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [active, canCancel, onCancel]);
+    // Prevent body scroll when full page loading is active. Ref-counted through
+    // the shared helper so an overlapping Modal/Dialog/Sidebar doesn't have its
+    // lock cleared when this one releases.
+    useScrollLock(isFullPage && active);
+    if (!active) {
+        return null;
+    }
+    return (jsxs("div", { className: combinedClasses, role: "alert", "aria-busy": "true", "aria-label": "Loading", ...rest, children: [jsx("div", { className: combinedOverlayClasses, onClick: handleOverlayClick, "aria-hidden": "true" }), jsxs("div", { className: loadingContentClass, children: [indicator ? (jsx("span", { className: loadingIconCustomClass, children: indicator })) : (jsx("span", { className: combinedIconClasses })), children && jsx("div", { className: loadingTextClass, children: children }), canCancel && (jsx("button", { type: "button", className: loadingCancelClass, onClick: onCancel, "aria-label": "Cancel loading", children: "Cancel" }))] })] }));
+};
+
+export { Loading };
+//# sourceMappingURL=Loading.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.js","sources":["../../../src/components/Loading.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useScrollLock } from '../helpers/scrollLock';\n\n/**\n * Overlay opacity levels for the Loading background.\n */\nexport type LoadingOverlay = 'light' | 'dark' | 'opaque';\n\n/**\n * Color variants for the Loading spinner.\n */\nexport type LoadingColor =\n  'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n\n/**\n * Props for the Loading component.\n * @extraProp {React.ReactNode} [children] - Content to display below the spinner.\n * @extraProp {string} [className] - Additional CSS classes.\n */\nexport interface LoadingProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size' | 'overlay'> {\n  /** Whether the loading overlay is visible. */\n  active?: boolean;\n  /** Cover the entire viewport. */\n  isFullPage?: boolean;\n  /** Size of the loading spinner. */\n  size?: 'small' | 'medium' | 'large';\n  /** Color variant for the spinner. Default is light grey. */\n  color?: LoadingColor;\n  /** Show a cancel button and allow closing. */\n  canCancel?: boolean;\n  /** Callback when cancel is triggered. */\n  onCancel?: () => void;\n  /** Additional classes for the overlay. */\n  overlayClassName?: string;\n  /** Additional classes for the spinner icon. */\n  iconClassName?: string;\n  /** Custom loading indicator element. */\n  indicator?: React.ReactNode;\n  /** Style of the loading overlay. */\n  overlay?: LoadingOverlay;\n}\n\n/**\n * The `Loading` component provides a loading overlay with a spinner animation.\n *\n * @function\n * @param {LoadingProps} props - Props for the Loading component.\n * @returns {JSX.Element | null} The rendered loading overlay or null if not active.\n *\n * @example\n * // Full page loading\n * <Loading active isFullPage />\n *\n * @example\n * // Container loading with message\n * <div style={{ position: 'relative', height: '200px' }}>\n *   <Loading active>Loading data...</Loading>\n * </div>\n *\n * @example\n * // With color variant\n * <Loading active color=\"primary\" />\n *\n * @example\n * // With cancel functionality\n * <Loading\n *   active={isLoading}\n *   canCancel\n *   onCancel={() => setIsLoading(false)}\n * />\n */\nexport const Loading: React.FC<LoadingProps> = ({\n  active = false,\n  isFullPage = false,\n  size,\n  color,\n  canCancel = false,\n  onCancel,\n  children,\n  className,\n  overlayClassName,\n  iconClassName,\n  indicator,\n  overlay,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n\n  // Generate Bulma classes with prefix\n  const loadingClasses = usePrefixedClassNames('loading', {\n    'is-active': active,\n    'is-full-page': isFullPage,\n    'is-cancelable': canCancel,\n    [`is-${overlay}`]: !!overlay,\n    [`is-${color}`]: !!color,\n  });\n\n  const iconClasses = usePrefixedClassNames('loading-icon', {\n    [`is-${size}`]: size,\n  });\n\n  // Combine classes\n  const combinedClasses = classNames(\n    loadingClasses,\n    bulmaHelperClasses,\n    className\n  );\n  const combinedOverlayClasses = classNames(\n    usePrefixedClassNames('loading-overlay'),\n    overlayClassName\n  );\n  const combinedIconClasses = classNames(iconClasses, iconClassName);\n  const loadingContentClass = usePrefixedClassNames('loading-content');\n  const loadingIconCustomClass = usePrefixedClassNames('loading-icon-custom');\n  const loadingTextClass = usePrefixedClassNames('loading-text');\n  const loadingCancelClass = usePrefixedClassNames('loading-cancel');\n\n  // Handle cancel click\n  const handleOverlayClick = () => {\n    if (canCancel && onCancel) {\n      onCancel();\n    }\n  };\n\n  // Handle escape key\n  React.useEffect(() => {\n    if (!active || !canCancel || !onCancel) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        onCancel();\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [active, canCancel, onCancel]);\n\n  // Prevent body scroll when full page loading is active. Ref-counted through\n  // the shared helper so an overlapping Modal/Dialog/Sidebar doesn't have its\n  // lock cleared when this one releases.\n  useScrollLock(isFullPage && active);\n\n  if (!active) {\n    return null;\n  }\n\n  return (\n    <div\n      className={combinedClasses}\n      role=\"alert\"\n      aria-busy=\"true\"\n      aria-label=\"Loading\"\n      {...rest}\n    >\n      <div\n        className={combinedOverlayClasses}\n        onClick={handleOverlayClick}\n        aria-hidden=\"true\"\n      />\n      <div className={loadingContentClass}>\n        {indicator ? (\n          <span className={loadingIconCustomClass}>{indicator}</span>\n        ) : (\n          <span className={combinedIconClasses} />\n        )}\n        {children && <div className={loadingTextClass}>{children}</div>}\n        {canCancel && (\n          <button\n            type=\"button\"\n            className={loadingCancelClass}\n            onClick={onCancel}\n            aria-label=\"Cancel loading\"\n          >\n            Cancel\n          </button>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Loading;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}