@allxsmith/bestax-bulma 5.67.0 → 5.67.1

package/dist/esm/components/Dropdown.js

@@ -1,7 +1,7 @@
 /* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
+import { forwardRef, useState, useRef, useId, useCallback, useEffect } from 'react';
 import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
 import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
 import { withSubComponents } from '../helpers/withSubComponents.js';
@@ -51,6 +51,12 @@ const DropdownComponent = forwardRef(function DropdownComponent({ label, childre
     const menuRef = useRef(null);
     const menuKeys = useMenuKeys();
     const pendingFocusRef = useRef(null);
+    // The trigger names the menu and the menu is what it controls, so both
+    // need an id whether or not the Dropdown has one.
+    const generatedId = useId();
+    const baseId = id || generatedId;
+    const triggerId = `${baseId}-trigger`;
+    const menuId = `${baseId}-menu`;
     // Cleanup returned by a consumer's callback ref on attach, held until detach.
     const consumerCleanupRef = useRef(null);
     const setRefs = useCallback((node) => {
@@ -240,7 +246,7 @@ const DropdownComponent = forwardRef(function DropdownComponent({ label, childre
         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, ref: menuRef, 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, id: triggerId, className: buttonClass, "aria-haspopup": "true", "aria-controls": menuId, "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: menuId, ref: menuRef, role: "menu", "aria-labelledby": triggerId, "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';\nimport { enabledMenuItems, useMenuKeys } from '../helpers/useMenuKeys';\nimport { useLatestRef } from '../helpers/useLatestRef';\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, though an Escape it calls\n * `preventDefault()` on in its own `onKeyDown` stays its own and leaves the\n * menu open. For a panel built around fields, 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    // Read when a click lands outside, so the listener stays put while\n    // `onActiveChange` changes identity, as an inline one does on every\n    // render of the parent.\n    const onActiveChangeRef = useLatestRef(onActiveChange);\n\n    // SSR-safe outside click\n    useEffect(() => {\n      if (!active) return;\n\n      // Reading `window` or `document` bare throws where neither exists, so\n      // the check is `typeof`, as `isBrowser`'s own note recommends.\n      /* istanbul ignore next: React DOM runs effects only in a browser */\n      if (typeof document === 'undefined') return;\n\n      const handleClick = (e: MouseEvent) => {\n        if (!isEventInside(e, dropdownRef.current)) {\n          setActive(false);\n          onActiveChangeRef.current?.(false);\n        }\n      };\n      document.addEventListener('mousedown', handleClick);\n      return () => document.removeEventListener('mousedown', handleClick);\n    }, [active, onActiveChangeRef]);\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. An Escape\n      // something in the menu already used, such as a field's own list\n      // closing on it, leaves the menu open for the next one.\n      if (e.key === 'Escape') {\n        if (e.defaultPrevented) return;\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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"}
+{"version":3,"file":"Dropdown.js","sources":["../../../src/components/Dropdown.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useId,\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';\nimport { useLatestRef } from '../helpers/useLatestRef';\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  /**\n   * Root element ID. The trigger gets `<id>-trigger` and the menu `<id>-menu`,\n   * which the trigger's `aria-controls` and the menu's `aria-labelledby` point\n   * at. Without one, both ids come from `useId`.\n   */\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, though an Escape it calls\n * `preventDefault()` on in its own `onKeyDown` stays its own and leaves the\n * menu open. For a panel built around fields, 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    // The trigger names the menu and the menu is what it controls, so both\n    // need an id whether or not the Dropdown has one.\n    const generatedId = useId();\n    const baseId = id || generatedId;\n    const triggerId = `${baseId}-trigger`;\n    const menuId = `${baseId}-menu`;\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    // Read when a click lands outside, so the listener stays put while\n    // `onActiveChange` changes identity, as an inline one does on every\n    // render of the parent.\n    const onActiveChangeRef = useLatestRef(onActiveChange);\n\n    // SSR-safe outside click\n    useEffect(() => {\n      if (!active) return;\n\n      // Reading `window` or `document` bare throws where neither exists, so\n      // the check is `typeof`, as `isBrowser`'s own note recommends.\n      /* istanbul ignore next: React DOM runs effects only in a browser */\n      if (typeof document === 'undefined') return;\n\n      const handleClick = (e: MouseEvent) => {\n        if (!isEventInside(e, dropdownRef.current)) {\n          setActive(false);\n          onActiveChangeRef.current?.(false);\n        }\n      };\n      document.addEventListener('mousedown', handleClick);\n      return () => document.removeEventListener('mousedown', handleClick);\n    }, [active, onActiveChangeRef]);\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. An Escape\n      // something in the menu already used, such as a field's own list\n      // closing on it, leaves the menu open for the next one.\n      if (e.key === 'Escape') {\n        if (e.defaultPrevented) return;\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            id={triggerId}\n            className={buttonClass}\n            aria-haspopup=\"true\"\n            aria-controls={menuId}\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={menuId}\n          ref={menuRef}\n          role=\"menu\"\n          aria-labelledby={triggerId}\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/form/Control.js

@@ -29,8 +29,6 @@ const allowedColors = [...validColors, 'inherit', 'current'];
 const Control = React.forwardRef(({ as = 'div', hasIconsLeft, hasIconsRight, isLoading, isExpanded, size, textColor, bgColor, iconLeft, iconRight, iconLeftName, iconLeftSize, iconRightName, iconRightSize, className, children, ...props }, ref) => {
     const Component = (as === 'p' ? 'p' : 'div');
     const { classPrefix } = useConfig();
-    // Remove textColor/bgColor from props before spreading
-    const { textColor: _ignoredTextColor, bgColor: _ignoredBgColor, ...restProps } = props;
     const safeTextColor = allowedColors.includes(textColor)
         ? textColor
         : undefined;
@@ -40,7 +38,7 @@ const Control = React.forwardRef(({ as = 'div', hasIconsLeft, hasIconsRight, isL
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: safeTextColor,
         backgroundColor: safeBgColor,
-        ...restProps,
+        ...props,
     });
     // Prepare icon props for the shortcut. A truthiness test (not `!== undefined`)
     // so a falsy node from the idiomatic `iconLeft={cond && <Node/>}` / `iconLeft={maybe ?? null}`
@@ -69,8 +67,7 @@ const Control = React.forwardRef(({ as = 'div', hasIconsLeft, hasIconsRight, isL
         [`is-${size}`]: !!size,
     });
     const controlClass = classNames(mainClass, bulmaHelperClasses, className);
-    // --- FIX: Spread both restProps (for data-testid, etc) AND rest (from useBulmaClasses) ---
-    return (jsx(ControlProvider, { value: true, children: jsxs(Component, { className: controlClass, ref: ref, ...restProps, ...rest, children: [jsx(ControlLoadingProvider, { value: !!isLoading, children: children }), leftIconValue &&
+    return (jsx(ControlProvider, { value: true, children: jsxs(Component, { className: controlClass, ref: ref, ...rest, children: [jsx(ControlLoadingProvider, { value: !!isLoading, children: children }), leftIconValue &&
                     (isIconProps(leftIconValue) ? (jsx(Icon, { ...leftIconValue, className: prefixedClassNames(classPrefix, 'is-left') })) : (jsx(Icon, { className: prefixedClassNames(classPrefix, 'is-left'), children: leftIconValue }))), rightIconValue &&
                     (isIconProps(rightIconValue) ? (jsx(Icon, { ...rightIconValue, className: prefixedClassNames(classPrefix, 'is-right') })) : (jsx(Icon, { className: prefixedClassNames(classPrefix, 'is-right'), children: rightIconValue })))] }) }));
 });

package/dist/esm/form/Control.js.map

@@ -1 +1 @@
-{"version":3,"file":"Control.js","sources":["../../../src/form/Control.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  classNames,\n  usePrefixedClassNames,\n  prefixedClassNames,\n} from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { Icon, IconProps } from '../elements/Icon';\nimport { isIconProps } from '../elements/iconProps';\nimport { useConfig } from '../helpers/Config';\nimport { ControlProvider } from './FormContext';\nimport { ControlLoadingProvider } from './controlLoading';\n\n/**\n * Props for the Control component.\n */\nexport interface ControlBaseProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Adds left icon container. */\n  hasIconsLeft?: boolean;\n  /** Adds right icon container. */\n  hasIconsRight?: boolean;\n  /**\n   * Shows a loading spinner inside the control.\n   * Under `prefers-reduced-motion: reduce` the spinner stops and stays\n   * drawn (with bestax's CSS loaded).\n   * The spinner sits at the right edge, where a right icon also sits, and the\n   * two overlap; leave the right icon out while loading.\n   */\n  isLoading?: boolean;\n  /** Makes the control expand to fill available space. */\n  isExpanded?: boolean;\n  /** Sets the control size. */\n  size?: 'small' | 'medium' | 'large';\n  /** Sets text color. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Bulma color for the control. */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** Background color. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /**\n   * Icon props for left icon, or a custom node (an inline SVG, a `react-icons` component, …) rendered in place of a class-based glyph.\n   * Bulma gives control icons `pointer-events: none`, so a click lands on\n   * the input and a clickable node placed here never receives one. Put a button beside the input\n   * in its own addon `Control` instead.\n   */\n  iconLeft?: IconProps | React.ReactNode;\n  /**\n   * Icon props for right icon, or a custom node (an inline SVG, a `react-icons` component, …) rendered in place of a class-based glyph.\n   * Bulma gives control icons `pointer-events: none`, so a click lands on\n   * the input and a clickable node placed here never receives one. Put a button beside the input\n   * in its own addon `Control` instead.\n   */\n  iconRight?: IconProps | React.ReactNode;\n  /** Shortcut for left icon name. */\n  iconLeftName?: string;\n  /** Shortcut for left icon size. */\n  iconLeftSize?: 'small' | 'medium' | 'large';\n  /** Shortcut for right icon name. */\n  iconRightName?: string;\n  /** Shortcut for right icon size. */\n  iconRightSize?: 'small' | 'medium' | 'large';\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Content inside the control. */\n  children?: React.ReactNode;\n}\n\n/** Props for the Control component, supporting either `div` or `p` as the root element. */\ntype ControlProps =\n  | ({\n      /** Element type for the control (`div` by default). */\n      as?: 'div';\n    } & ControlBaseProps & {\n        /** Ref for the control element. */\n        ref?: React.Ref<HTMLDivElement>;\n      })\n  | ({\n      /** Element type for the control (`div` by default). */\n      as: 'p';\n    } & Omit<ControlBaseProps, keyof React.HTMLAttributes<HTMLDivElement>> &\n      React.HTMLAttributes<HTMLParagraphElement> & {\n        /** Ref for the control element. */\n        ref?: React.Ref<HTMLParagraphElement>;\n      });\n\nconst allowedColors = [...validColors, 'inherit', 'current'] as const;\n\n/**\n * The `Control` component is a Bulma-styled wrapper for form controls (`Input`, `Select`, `TextArea`, etc.), supporting icons (left/right), loading state, expansion, size, and Bulma helper props for layout and color.\n *\n * @function\n * @param {ControlProps} props - Props for the Control component.\n * @returns {JSX.Element} The rendered control container.\n * @see {@link https://bulma.io/documentation/form/general/#control | Bulma Control documentation}\n *\n * @example\n * // Control with left icon\n * <Control iconLeftName=\"envelope\" iconLeftSize=\"small\">\n *   <input className=\"input\" type=\"email\" placeholder=\"Email\" />\n * </Control>\n */\nexport const Control = React.forwardRef<\n  HTMLDivElement | HTMLParagraphElement,\n  ControlProps\n>(\n  (\n    {\n      as = 'div',\n      hasIconsLeft,\n      hasIconsRight,\n      isLoading,\n      isExpanded,\n      size,\n      textColor,\n      bgColor,\n      iconLeft,\n      iconRight,\n      iconLeftName,\n      iconLeftSize,\n      iconRightName,\n      iconRightSize,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const Component = (as === 'p' ? 'p' : 'div') as 'div' | 'p';\n    const { classPrefix } = useConfig();\n\n    // Remove textColor/bgColor from props before spreading\n    const {\n      textColor: _ignoredTextColor,\n      bgColor: _ignoredBgColor,\n      ...restProps\n    } = props as Record<string, unknown>;\n\n    const safeTextColor = allowedColors.includes(\n      textColor as (typeof allowedColors)[number]\n    )\n      ? textColor\n      : undefined;\n\n    const safeBgColor = allowedColors.includes(\n      bgColor as (typeof allowedColors)[number]\n    )\n      ? bgColor\n      : undefined;\n\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color: safeTextColor,\n      backgroundColor: safeBgColor,\n      ...restProps,\n    });\n\n    // Prepare icon props for the shortcut. A truthiness test (not `!== undefined`)\n    // so a falsy node from the idiomatic `iconLeft={cond && <Node/>}` / `iconLeft={maybe ?? null}`\n    // pattern counts as \"no icon\" — otherwise `false`/`null` would reserve the icon column and\n    // mount an empty `.icon` span. A falsy `iconLeft` also correctly falls through to the\n    // `iconLeftName` shortcut, matching the pre-node behavior.\n    const leftIconValue: IconProps | React.ReactNode | undefined =\n      iconLeft ||\n      (iconLeftName\n        ? {\n            name: iconLeftName,\n            size: iconLeftSize,\n          }\n        : undefined);\n\n    const rightIconValue: IconProps | React.ReactNode | undefined =\n      iconRight ||\n      (iconRightName\n        ? {\n            name: iconRightName,\n            size: iconRightSize,\n          }\n        : undefined);\n\n    const mainClass = usePrefixedClassNames('control', {\n      'has-icons-left': hasIconsLeft || !!leftIconValue,\n      'has-icons-right': hasIconsRight || !!rightIconValue,\n      'is-loading': isLoading,\n      'is-expanded': isExpanded,\n      [`is-${size}`]: !!size,\n    });\n    const controlClass = classNames(mainClass, bulmaHelperClasses, className);\n\n    // --- FIX: Spread both restProps (for data-testid, etc) AND rest (from useBulmaClasses) ---\n    return (\n      <ControlProvider value={true}>\n        <Component\n          className={controlClass}\n          ref={ref as typeof ref}\n          {...restProps}\n          {...rest}\n        >\n          <ControlLoadingProvider value={!!isLoading}>\n            {children}\n          </ControlLoadingProvider>\n          {leftIconValue &&\n            (isIconProps(leftIconValue) ? (\n              <Icon\n                {...leftIconValue}\n                className={prefixedClassNames(classPrefix, 'is-left')}\n              />\n            ) : (\n              <Icon className={prefixedClassNames(classPrefix, 'is-left')}>\n                {leftIconValue}\n              </Icon>\n            ))}\n          {rightIconValue &&\n            (isIconProps(rightIconValue) ? (\n              <Icon\n                {...rightIconValue}\n                className={prefixedClassNames(classPrefix, 'is-right')}\n              />\n            ) : (\n              <Icon className={prefixedClassNames(classPrefix, 'is-right')}>\n                {rightIconValue}\n              </Icon>\n            ))}\n        </Component>\n      </ControlProvider>\n    );\n  }\n);\n\nControl.displayName = 'Control';\n\nexport default Control;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Control.js","sources":["../../../src/form/Control.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  classNames,\n  usePrefixedClassNames,\n  prefixedClassNames,\n} from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { Icon, IconProps } from '../elements/Icon';\nimport { isIconProps } from '../elements/iconProps';\nimport { useConfig } from '../helpers/Config';\nimport { ControlProvider } from './FormContext';\nimport { ControlLoadingProvider } from './controlLoading';\n\n/**\n * Props for the Control component.\n */\nexport interface ControlBaseProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Adds left icon container. */\n  hasIconsLeft?: boolean;\n  /** Adds right icon container. */\n  hasIconsRight?: boolean;\n  /**\n   * Shows a loading spinner inside the control.\n   * Under `prefers-reduced-motion: reduce` the spinner stops and stays\n   * drawn (with bestax's CSS loaded).\n   * The spinner sits at the right edge, where a right icon also sits, and the\n   * two overlap; leave the right icon out while loading.\n   */\n  isLoading?: boolean;\n  /** Makes the control expand to fill available space. */\n  isExpanded?: boolean;\n  /** Sets the control size. */\n  size?: 'small' | 'medium' | 'large';\n  /** Sets text color. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Bulma color for the control. */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** Background color. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /**\n   * Icon props for left icon, or a custom node (an inline SVG, a `react-icons` component, …) rendered in place of a class-based glyph.\n   * Bulma gives control icons `pointer-events: none`, so a click lands on\n   * the input and a clickable node placed here never receives one. Put a button beside the input\n   * in its own addon `Control` instead.\n   */\n  iconLeft?: IconProps | React.ReactNode;\n  /**\n   * Icon props for right icon, or a custom node (an inline SVG, a `react-icons` component, …) rendered in place of a class-based glyph.\n   * Bulma gives control icons `pointer-events: none`, so a click lands on\n   * the input and a clickable node placed here never receives one. Put a button beside the input\n   * in its own addon `Control` instead.\n   */\n  iconRight?: IconProps | React.ReactNode;\n  /** Shortcut for left icon name. */\n  iconLeftName?: string;\n  /** Shortcut for left icon size. */\n  iconLeftSize?: 'small' | 'medium' | 'large';\n  /** Shortcut for right icon name. */\n  iconRightName?: string;\n  /** Shortcut for right icon size. */\n  iconRightSize?: 'small' | 'medium' | 'large';\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /** Content inside the control. */\n  children?: React.ReactNode;\n}\n\n/** Props for the Control component, supporting either `div` or `p` as the root element. */\ntype ControlProps =\n  | ({\n      /** Element type for the control (`div` by default). */\n      as?: 'div';\n    } & ControlBaseProps & {\n        /** Ref for the control element. */\n        ref?: React.Ref<HTMLDivElement>;\n      })\n  | ({\n      /** Element type for the control (`div` by default). */\n      as: 'p';\n    } & Omit<ControlBaseProps, keyof React.HTMLAttributes<HTMLDivElement>> &\n      React.HTMLAttributes<HTMLParagraphElement> & {\n        /** Ref for the control element. */\n        ref?: React.Ref<HTMLParagraphElement>;\n      });\n\nconst allowedColors = [...validColors, 'inherit', 'current'] as const;\n\n/**\n * The `Control` component is a Bulma-styled wrapper for form controls (`Input`, `Select`, `TextArea`, etc.), supporting icons (left/right), loading state, expansion, size, and Bulma helper props for layout and color.\n *\n * @function\n * @param {ControlProps} props - Props for the Control component.\n * @returns {JSX.Element} The rendered control container.\n * @see {@link https://bulma.io/documentation/form/general/#control | Bulma Control documentation}\n *\n * @example\n * // Control with left icon\n * <Control iconLeftName=\"envelope\" iconLeftSize=\"small\">\n *   <input className=\"input\" type=\"email\" placeholder=\"Email\" />\n * </Control>\n */\nexport const Control = React.forwardRef<\n  HTMLDivElement | HTMLParagraphElement,\n  ControlProps\n>(\n  (\n    {\n      as = 'div',\n      hasIconsLeft,\n      hasIconsRight,\n      isLoading,\n      isExpanded,\n      size,\n      textColor,\n      bgColor,\n      iconLeft,\n      iconRight,\n      iconLeftName,\n      iconLeftSize,\n      iconRightName,\n      iconRightSize,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const Component = (as === 'p' ? 'p' : 'div') as 'div' | 'p';\n    const { classPrefix } = useConfig();\n\n    const safeTextColor = allowedColors.includes(\n      textColor as (typeof allowedColors)[number]\n    )\n      ? textColor\n      : undefined;\n\n    const safeBgColor = allowedColors.includes(\n      bgColor as (typeof allowedColors)[number]\n    )\n      ? bgColor\n      : undefined;\n\n    const { bulmaHelperClasses, rest } = useBulmaClasses({\n      color: safeTextColor,\n      backgroundColor: safeBgColor,\n      ...(props as Record<string, unknown>),\n    });\n\n    // Prepare icon props for the shortcut. A truthiness test (not `!== undefined`)\n    // so a falsy node from the idiomatic `iconLeft={cond && <Node/>}` / `iconLeft={maybe ?? null}`\n    // pattern counts as \"no icon\" — otherwise `false`/`null` would reserve the icon column and\n    // mount an empty `.icon` span. A falsy `iconLeft` also correctly falls through to the\n    // `iconLeftName` shortcut, matching the pre-node behavior.\n    const leftIconValue: IconProps | React.ReactNode | undefined =\n      iconLeft ||\n      (iconLeftName\n        ? {\n            name: iconLeftName,\n            size: iconLeftSize,\n          }\n        : undefined);\n\n    const rightIconValue: IconProps | React.ReactNode | undefined =\n      iconRight ||\n      (iconRightName\n        ? {\n            name: iconRightName,\n            size: iconRightSize,\n          }\n        : undefined);\n\n    const mainClass = usePrefixedClassNames('control', {\n      'has-icons-left': hasIconsLeft || !!leftIconValue,\n      'has-icons-right': hasIconsRight || !!rightIconValue,\n      'is-loading': isLoading,\n      'is-expanded': isExpanded,\n      [`is-${size}`]: !!size,\n    });\n    const controlClass = classNames(mainClass, bulmaHelperClasses, className);\n\n    return (\n      <ControlProvider value={true}>\n        <Component className={controlClass} ref={ref as typeof ref} {...rest}>\n          <ControlLoadingProvider value={!!isLoading}>\n            {children}\n          </ControlLoadingProvider>\n          {leftIconValue &&\n            (isIconProps(leftIconValue) ? (\n              <Icon\n                {...leftIconValue}\n                className={prefixedClassNames(classPrefix, 'is-left')}\n              />\n            ) : (\n              <Icon className={prefixedClassNames(classPrefix, 'is-left')}>\n                {leftIconValue}\n              </Icon>\n            ))}\n          {rightIconValue &&\n            (isIconProps(rightIconValue) ? (\n              <Icon\n                {...rightIconValue}\n                className={prefixedClassNames(classPrefix, 'is-right')}\n              />\n            ) : (\n              <Icon className={prefixedClassNames(classPrefix, 'is-right')}>\n                {rightIconValue}\n              </Icon>\n            ))}\n        </Component>\n      </ControlProvider>\n    );\n  }\n);\n\nControl.displayName = 'Control';\n\nexport default Control;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/form/Field.js

@@ -41,8 +41,7 @@ const FieldLabel = ({ size, textColor, bgColor, className, children, ...props })
         [`is-${size}`]: !!size,
     });
     const fieldLabelClass = classNames(mainClass, bulmaHelperClasses, className);
-    // Spread ...props and ...rest so custom props like data-testid are included
-    return (jsx("div", { className: fieldLabelClass, ...props, ...rest, children: children }));
+    return (jsx("div", { className: fieldLabelClass, ...rest, children: children }));
 };
 /**
  * FieldBody component for rendering Bulma field body.
@@ -62,8 +61,7 @@ const FieldBody = ({ textColor, bgColor, className, children, ...props }) => {
     });
     const mainClass = usePrefixedClassNames('field-body');
     const fieldBodyClass = classNames(mainClass, bulmaHelperClasses, className);
-    // Spread ...props and ...rest so custom props like data-testid are included
-    return (jsx("div", { className: fieldBodyClass, ...props, ...rest, children: children }));
+    return (jsx("div", { className: fieldBodyClass, ...rest, children: children }));
 };
 /**
  * The `Field` component is a Bulma-styled form field container.

package/dist/esm/form/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../../src/form/Field.tsx"],"sourcesContent":["import React, { useCallback, useId, useMemo, useRef, useState } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport {\n  FieldProvider,\n  FieldLabelIdProvider,\n  FieldLabelElementIdProvider,\n  FieldLabelForProvider,\n  FieldLabelForReportProvider,\n  useFieldLabelFor,\n} from './FormContext';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\nimport { Control } from './Control';\n\n/**\n * Props for the Field component.\n */\nexport interface FieldProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Renders the field as horizontal (label and control side by side). */\n  horizontal?: boolean;\n  /** Group controls in a row (optionally centered, right, or multiline). */\n  grouped?: boolean | 'centered' | 'right' | 'multiline';\n  /** Group controls as addons (optionally centered or right-aligned). */\n  hasAddons?: boolean | 'centered' | 'right';\n  /** Constrains the field to its content's width (used inside horizontal field bodies). */\n  narrow?: boolean;\n  /** Field label, rendered above the widget. Automatically names the one control the Field holds: a composed `InputBase`, `SelectBase`, `TextAreaBase`, `DateInputBase`, `TimeInputBase` or `DateTimeInputBase` (an `inline` picker has no input, so it takes nothing), or a bestax input that renders a single input of its own (`Input`, `Select`, `TextArea`, `Numberinput`, `PinInput`, `Slider`, `DateInput`, `TimeInput`, `DateTimeInput`, `Autocomplete`, `Combobox`, `TreeSelect`, `Taginput`, `File`), adopts a generated id that the label's `htmlFor` points at, and a group (`Radios`, `Checkboxes`, `Rate`, `DateRangeInput`, or a composed `DateRangeInputBase`, `inline` or not) points `aria-labelledby` at the label's own id unless you gave the group an `aria-label` or `aria-labelledby`. A range `Slider` takes the id on its low thumb and also starts each thumb's name with the label through `aria-labelledby`, unless its `ariaLabel` names that thumb or its own `aria-label` or `aria-labelledby` takes the label's place. An `Autocomplete`, a `Combobox` or a `Taginput` also names its open list after the label through `aria-labelledby`, and a `TreeSelect` its panel and the tree in it. `Checkbox`, `Radio` and `Switch` are named by their own children, and the label names one only when you wire it as you would any control with an `id` of its own, `labelProps={{ htmlFor }}` plus that control's `id`. Only the single inputs take the `htmlFor`, so once the Field's content has mounted the label keeps it only while one of them holds the id, and drops it over anything else: a group, a `Checkbox`, `Radio` or `Switch`, an `inline` picker, an inner `Field`, an input with an `id` of its own, markup of your own, or nothing at all. A server render, and the first render while hydrating, still write the `htmlFor`, which keeps hydration matching, and an input that mounts later puts it back. The label names an input with an `id` of your own only through `labelProps={{ htmlFor }}` set to that `id`, a `for` it always keeps; `labelProps={{ htmlFor: undefined }}` opts out. Skipped for `grouped`/`hasAddons` fields (multiple controls), and a nested `Field` starts its own scope, so a horizontal Field whose body holds an inner `Field` names the control there only when you wire it. Two controls in one plain labeled Field would both adopt the id, so give each an `id` of its own. */\n  label?: React.ReactNode;\n  /** Size for the label. */\n  labelSize?: 'small' | 'normal' | 'medium' | 'large';\n  /** Props for the label element. An explicit `htmlFor` key — even set to `undefined` — takes over the association. While the association is on, the label renders with the `id` given here, or a generated one, and a group control, a range `Slider`'s thumbs and an `Autocomplete`'s, a `Combobox`'s or a `Taginput`'s list point `aria-labelledby` at it. A label you take over gets no generated id, and no group points at it on its own. With an `id` here, though, a range `Slider`, an `Autocomplete` or a `Taginput` whose `id` your `htmlFor` names, or a `Combobox` whose field's `id` it names, still points its thumbs or its list at it, in a `grouped` or `hasAddons` Field too. To point a group in an inner `Field` at this label by hand, pass that `id`. Nothing in the inner `Field` takes the generated `htmlFor`, so the label drops it after mounting, and adding `htmlFor: undefined` keeps it out of server-rendered markup too. */\n  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n    [key: string]: unknown;\n  };\n  /** Text color for the field. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Bulma color for the field. */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** Background color for the field. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Additional CSS classes. */\n  className?: string;\n  /** Field content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Props for the FieldLabel component.\n */\nexport interface FieldLabelProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Size for the field label. */\n  size?: 'small' | 'normal' | 'medium' | 'large';\n  /** Text color for the label. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Bulma color for the label. */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** Background color for the label. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Additional CSS classes. */\n  className?: string;\n  /** Field label content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Props for the FieldBody component.\n */\nexport interface FieldBodyProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Text color for the field body. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Bulma color for the field body. */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** Background color for the field body. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Additional CSS classes. */\n  className?: string;\n  /** Field body content. */\n  children?: React.ReactNode;\n}\n\n/**\n * FieldLabel component for rendering a Bulma field label. It renders the\n * label column of a horizontal `Field` (a `div` with the `field-label` class),\n * not a `<label>`, so text placed straight in it names nothing. Put a `<label>`\n * with the `label` class inside it and point its `htmlFor` at the control's\n * `id`, or give the horizontal `Field` a `label` prop, which renders this\n * column and its `<label>` for you. A `<label>` you put here names the\n * control through its `htmlFor` alone: a range `Slider`'s thumbs and an\n * `Autocomplete`'s, a `Combobox`'s or a `Taginput`'s list point\n * `aria-labelledby` at a `Field`'s label only when its `label` prop renders it\n * and it names the control. Where it would not name the control on its own, as in an inner `Field`,\n * pass `labelProps={{ htmlFor, id }}` with a matching `id` on the control.\n *\n * @function\n * @param {FieldLabelProps} props - Props for the FieldLabel component.\n * @returns {JSX.Element} The rendered field label.\n *\n * @example\n * <FieldLabel size=\"normal\">\n *   <label className=\"label\" htmlFor=\"name\">Name</label>\n * </FieldLabel>\n */\nexport const FieldLabel: React.FC<FieldLabelProps> = ({\n  size,\n  textColor,\n  bgColor,\n  className,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  });\n\n  const mainClass = usePrefixedClassNames('field-label', {\n    [`is-${size}`]: !!size,\n  });\n  const fieldLabelClass = classNames(mainClass, bulmaHelperClasses, className);\n  // Spread ...props and ...rest so custom props like data-testid are included\n  return (\n    <div className={fieldLabelClass} {...props} {...rest}>\n      {children}\n    </div>\n  );\n};\n\n/**\n * FieldBody component for rendering Bulma field body.\n *\n * @function\n * @param {FieldBodyProps} props - Props for the FieldBody component.\n * @returns {JSX.Element} The rendered field body.\n *\n * @example\n * <FieldBody><input className=\"input\" /></FieldBody>\n */\nexport const FieldBody: React.FC<FieldBodyProps> = ({\n  textColor,\n  bgColor,\n  className,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  });\n\n  const mainClass = usePrefixedClassNames('field-body');\n  const fieldBodyClass = classNames(mainClass, bulmaHelperClasses, className);\n  // Spread ...props and ...rest so custom props like data-testid are included\n  return (\n    <div className={fieldBodyClass} {...props} {...rest}>\n      {children}\n    </div>\n  );\n};\n\n/**\n * The `Field` component is a Bulma-styled form field container.\n *\n * @function\n * @param {FieldProps} props - Props for the Field component.\n * @returns {JSX.Element} The rendered field container.\n * @see {@link https://bulma.io/documentation/form/general/#field | Bulma Field documentation}\n *\n * @example\n * // Labelled field — the label auto-associates with the composed base\n * <Field label=\"Email\">\n *   <Control>\n *     <InputBase type=\"email\" />\n *   </Control>\n * </Field>\n *\n * @example\n * // Horizontal field\n * <Field horizontal label=\"Name\">\n *   <Control>\n *     <InputBase />\n *   </Control>\n * </Field>\n */\nconst FieldComponent: React.FC<FieldProps> = ({\n  horizontal,\n  grouped,\n  hasAddons,\n  narrow,\n  label,\n  labelSize,\n  labelProps,\n  textColor,\n  color: _fieldColor,\n  bgColor,\n  className,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  });\n\n  const mainClass = usePrefixedClassNames('field', {\n    'is-horizontal': horizontal,\n    'has-addons': !!hasAddons,\n    'has-addons-centered': hasAddons === 'centered',\n    'has-addons-right': hasAddons === 'right',\n    'is-narrow': narrow,\n    'is-grouped':\n      grouped === true ||\n      grouped === 'centered' ||\n      grouped === 'right' ||\n      grouped === 'multiline',\n    'is-grouped-centered': grouped === 'centered',\n    'is-grouped-right': grouped === 'right',\n    'is-grouped-multiline': grouped === 'multiline',\n  });\n  const fieldClass = classNames(mainClass, bulmaHelperClasses, className);\n\n  // Default labelSize to 'normal' when horizontal for proper baseline alignment\n  const effectiveLabelSize = labelSize ?? (horizontal ? 'normal' : undefined);\n\n  const labelClass = usePrefixedClassNames('label');\n\n  // Auto-associate the label with a single composed base control (#495): the\n  // label points at a generated id shared via context, which a composed base\n  // adopts when the user supplied no id of their own.\n  // Presence semantics on htmlFor — even an explicit `htmlFor: undefined`\n  // means the caller owns the association. Grouped/addons fields hold several\n  // controls, so no single association is generated for them.\n  const generatedId = useId();\n  const userWiredLabel = !!labelProps && 'htmlFor' in labelProps;\n  const targetId =\n    label && !userWiredLabel && !grouped && !hasAddons\n      ? generatedId\n      : undefined;\n  // A group control (Radios, Checkboxes, Rate, DateRangeInput and its base)\n  // cannot take that `for`, so it points `aria-labelledby` at the label\n  // itself (#939).\n  // The label gets an id whenever the association is on, unless the caller\n  // gave it one.\n  const labelId =\n    labelProps?.id ?? (targetId ? `${targetId}-label` : undefined);\n  // What the rendered label's `for` points at, generated or the caller's, and\n  // the id it renders with, so a control can tell when a label wired by hand\n  // names it and point at that label. An unlabeled Field passes on its\n  // parent's. Unlike `targetId`, a label wired by hand passes on its own in\n  // `grouped`/`hasAddons` Fields too, on purpose: those only stop the Field\n  // picking one control out of several, and the caller's `for` has picked\n  // one, so a range Slider or Autocomplete it names points at that label in\n  // a row as well. A group reads the label element id below instead, which\n  // stays off for a label wired by hand, since no group takes its `for`.\n  const inheritedLabelFor = useFieldLabelFor();\n  const labelForTarget = userWiredLabel ? labelProps.htmlFor : targetId;\n  const ownLabelFor = useMemo(\n    () => ({ htmlFor: labelForTarget, id: labelId }),\n    [labelForTarget, labelId]\n  );\n  const labelFor = label ? ownLabelFor : inheritedLabelFor;\n\n  // Whether the label keeps its generated `for` (#1004). Content that takes\n  // the Field's id says so from a layout effect, and this Field's own layout\n  // effect runs after its content's in the same commit, so by then every\n  // report has landed. Until it runs, on the server and in the first render\n  // while hydrating, the label writes the `for` as it always has. From then\n  // on it keeps the `for` only while some content holds the id, and content\n  // that mounts or changes later reports when it does. Counted in a ref, and\n  // state is set only once settled, so content that takes the id renders\n  // the Field just once.\n  const takersRef = useRef(0);\n  const settledRef = useRef(false);\n  const [forTaken, setForTaken] = useState(true);\n  const settle = useCallback(() => {\n    if (settledRef.current) setForTaken(takersRef.current > 0);\n  }, []);\n  const reportLabelFor = useCallback(() => {\n    takersRef.current += 1;\n    settle();\n    return () => {\n      takersRef.current -= 1;\n      settle();\n    };\n  }, [settle]);\n  useClientLayoutEffect(() => {\n    settledRef.current = true;\n    if (targetId) settle();\n  }, [targetId, settle]);\n  const renderedTargetId = forTaken ? targetId : undefined;\n\n  let renderedLabel = null;\n  if (label) {\n    if (horizontal) {\n      renderedLabel = (\n        <FieldLabel size={effectiveLabelSize}>\n          <label\n            htmlFor={renderedTargetId}\n            {...labelProps}\n            id={labelId}\n            className={classNames(labelClass, labelProps?.className)}\n            style={labelProps?.style}\n          >\n            {label}\n          </label>\n        </FieldLabel>\n      );\n    } else {\n      renderedLabel = (\n        <label\n          htmlFor={renderedTargetId}\n          {...labelProps}\n          id={labelId}\n          className={classNames(labelClass, labelProps?.className)}\n          style={{ display: 'block', ...(labelProps?.style || {}) }}\n        >\n          {label}\n        </label>\n      );\n    }\n  }\n\n  // If horizontal, wrap children in FieldBody (unless the user already provided\n  // a FieldBody — either as the single child, or as one element among siblings\n  // like <Field.Label/> + <Field.Body/>).\n  let content = children;\n  if (horizontal) {\n    const isFieldBody = (c: React.ReactNode): boolean =>\n      React.isValidElement(c) &&\n      // @ts-expect-error displayName isn't on the public type\n      (c.type === FieldBody || c.type?.displayName === 'FieldBody');\n    const isFieldLabel = (c: React.ReactNode): boolean =>\n      React.isValidElement(c) &&\n      // @ts-expect-error displayName isn't on the public type\n      (c.type === FieldLabel || c.type?.displayName === 'FieldLabel');\n    const childArray = React.Children.toArray(children);\n    const userProvidedStructure = childArray.some(\n      c => isFieldBody(c) || isFieldLabel(c)\n    );\n    if (userProvidedStructure) {\n      content = children;\n    } else {\n      content = <FieldBody>{children}</FieldBody>;\n    }\n  }\n\n  return (\n    <FieldProvider value={true}>\n      <FieldLabelIdProvider value={targetId}>\n        <FieldLabelElementIdProvider value={targetId ? labelId : undefined}>\n          <FieldLabelForProvider value={labelFor}>\n            <FieldLabelForReportProvider\n              value={targetId ? reportLabelFor : undefined}\n            >\n              <div className={fieldClass} {...rest}>\n                {renderedLabel}\n                {content}\n              </div>\n            </FieldLabelForReportProvider>\n          </FieldLabelForProvider>\n        </FieldLabelElementIdProvider>\n      </FieldLabelIdProvider>\n    </FieldProvider>\n  );\n};\n\nFieldLabel.displayName = 'FieldLabel';\nFieldBody.displayName = 'FieldBody';\n\nexport const Field = withSubComponents(\n  FieldComponent,\n  {\n    Label: FieldLabel,\n    Body: FieldBody,\n    Control,\n  },\n  'Field'\n);\n\nexport default Field;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Field.js","sources":["../../../src/form/Field.tsx"],"sourcesContent":["import React, { useCallback, useId, useMemo, useRef, useState } from 'react';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport { withSubComponents } from '../helpers/withSubComponents';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport {\n  FieldProvider,\n  FieldLabelIdProvider,\n  FieldLabelElementIdProvider,\n  FieldLabelForProvider,\n  FieldLabelForReportProvider,\n  useFieldLabelFor,\n} from './FormContext';\nimport { useClientLayoutEffect } from '../helpers/useClientLayoutEffect';\nimport { Control } from './Control';\n\n/**\n * Props for the Field component.\n */\nexport interface FieldProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Renders the field as horizontal (label and control side by side). */\n  horizontal?: boolean;\n  /** Group controls in a row (optionally centered, right, or multiline). */\n  grouped?: boolean | 'centered' | 'right' | 'multiline';\n  /** Group controls as addons (optionally centered or right-aligned). */\n  hasAddons?: boolean | 'centered' | 'right';\n  /** Constrains the field to its content's width (used inside horizontal field bodies). */\n  narrow?: boolean;\n  /** Field label, rendered above the widget. Automatically names the one control the Field holds: a composed `InputBase`, `SelectBase`, `TextAreaBase`, `DateInputBase`, `TimeInputBase` or `DateTimeInputBase` (an `inline` picker has no input, so it takes nothing), or a bestax input that renders a single input of its own (`Input`, `Select`, `TextArea`, `Numberinput`, `PinInput`, `Slider`, `DateInput`, `TimeInput`, `DateTimeInput`, `Autocomplete`, `Combobox`, `TreeSelect`, `Taginput`, `File`), adopts a generated id that the label's `htmlFor` points at, and a group (`Radios`, `Checkboxes`, `Rate`, `DateRangeInput`, or a composed `DateRangeInputBase`, `inline` or not) points `aria-labelledby` at the label's own id unless you gave the group an `aria-label` or `aria-labelledby`. A range `Slider` takes the id on its low thumb and also starts each thumb's name with the label through `aria-labelledby`, unless its `ariaLabel` names that thumb or its own `aria-label` or `aria-labelledby` takes the label's place. An `Autocomplete`, a `Combobox` or a `Taginput` also names its open list after the label through `aria-labelledby`, and a `TreeSelect` its panel and the tree in it. `Checkbox`, `Radio` and `Switch` are named by their own children, and the label names one only when you wire it as you would any control with an `id` of its own, `labelProps={{ htmlFor }}` plus that control's `id`. Only the single inputs take the `htmlFor`, so once the Field's content has mounted the label keeps it only while one of them holds the id, and drops it over anything else: a group, a `Checkbox`, `Radio` or `Switch`, an `inline` picker, an inner `Field`, an input with an `id` of its own, markup of your own, or nothing at all. A server render, and the first render while hydrating, still write the `htmlFor`, which keeps hydration matching, and an input that mounts later puts it back. The label names an input with an `id` of your own only through `labelProps={{ htmlFor }}` set to that `id`, a `for` it always keeps; `labelProps={{ htmlFor: undefined }}` opts out. Skipped for `grouped`/`hasAddons` fields (multiple controls), and a nested `Field` starts its own scope, so a horizontal Field whose body holds an inner `Field` names the control there only when you wire it. Two controls in one plain labeled Field would both adopt the id, so give each an `id` of its own. */\n  label?: React.ReactNode;\n  /** Size for the label. */\n  labelSize?: 'small' | 'normal' | 'medium' | 'large';\n  /** Props for the label element. An explicit `htmlFor` key — even set to `undefined` — takes over the association. While the association is on, the label renders with the `id` given here, or a generated one, and a group control, a range `Slider`'s thumbs and an `Autocomplete`'s, a `Combobox`'s or a `Taginput`'s list point `aria-labelledby` at it. A label you take over gets no generated id, and no group points at it on its own. With an `id` here, though, a range `Slider`, an `Autocomplete` or a `Taginput` whose `id` your `htmlFor` names, or a `Combobox` whose field's `id` it names, still points its thumbs or its list at it, in a `grouped` or `hasAddons` Field too. To point a group in an inner `Field` at this label by hand, pass that `id`. Nothing in the inner `Field` takes the generated `htmlFor`, so the label drops it after mounting, and adding `htmlFor: undefined` keeps it out of server-rendered markup too. */\n  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n    [key: string]: unknown;\n  };\n  /** Text color for the field. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Bulma color for the field. */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** Background color for the field. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Additional CSS classes. */\n  className?: string;\n  /** Field content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Props for the FieldLabel component.\n */\nexport interface FieldLabelProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Size for the field label. */\n  size?: 'small' | 'normal' | 'medium' | 'large';\n  /** Text color for the label. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Bulma color for the label. */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** Background color for the label. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Additional CSS classes. */\n  className?: string;\n  /** Field label content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Props for the FieldBody component.\n */\nexport interface FieldBodyProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Text color for the field body. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Bulma color for the field body. */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** Background color for the field body. */\n  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Additional CSS classes. */\n  className?: string;\n  /** Field body content. */\n  children?: React.ReactNode;\n}\n\n/**\n * FieldLabel component for rendering a Bulma field label. It renders the\n * label column of a horizontal `Field` (a `div` with the `field-label` class),\n * not a `<label>`, so text placed straight in it names nothing. Put a `<label>`\n * with the `label` class inside it and point its `htmlFor` at the control's\n * `id`, or give the horizontal `Field` a `label` prop, which renders this\n * column and its `<label>` for you. A `<label>` you put here names the\n * control through its `htmlFor` alone: a range `Slider`'s thumbs and an\n * `Autocomplete`'s, a `Combobox`'s or a `Taginput`'s list point\n * `aria-labelledby` at a `Field`'s label only when its `label` prop renders it\n * and it names the control. Where it would not name the control on its own, as in an inner `Field`,\n * pass `labelProps={{ htmlFor, id }}` with a matching `id` on the control.\n *\n * @function\n * @param {FieldLabelProps} props - Props for the FieldLabel component.\n * @returns {JSX.Element} The rendered field label.\n *\n * @example\n * <FieldLabel size=\"normal\">\n *   <label className=\"label\" htmlFor=\"name\">Name</label>\n * </FieldLabel>\n */\nexport const FieldLabel: React.FC<FieldLabelProps> = ({\n  size,\n  textColor,\n  bgColor,\n  className,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  });\n\n  const mainClass = usePrefixedClassNames('field-label', {\n    [`is-${size}`]: !!size,\n  });\n  const fieldLabelClass = classNames(mainClass, bulmaHelperClasses, className);\n  return (\n    <div className={fieldLabelClass} {...rest}>\n      {children}\n    </div>\n  );\n};\n\n/**\n * FieldBody component for rendering Bulma field body.\n *\n * @function\n * @param {FieldBodyProps} props - Props for the FieldBody component.\n * @returns {JSX.Element} The rendered field body.\n *\n * @example\n * <FieldBody><input className=\"input\" /></FieldBody>\n */\nexport const FieldBody: React.FC<FieldBodyProps> = ({\n  textColor,\n  bgColor,\n  className,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  });\n\n  const mainClass = usePrefixedClassNames('field-body');\n  const fieldBodyClass = classNames(mainClass, bulmaHelperClasses, className);\n  return (\n    <div className={fieldBodyClass} {...rest}>\n      {children}\n    </div>\n  );\n};\n\n/**\n * The `Field` component is a Bulma-styled form field container.\n *\n * @function\n * @param {FieldProps} props - Props for the Field component.\n * @returns {JSX.Element} The rendered field container.\n * @see {@link https://bulma.io/documentation/form/general/#field | Bulma Field documentation}\n *\n * @example\n * // Labelled field — the label auto-associates with the composed base\n * <Field label=\"Email\">\n *   <Control>\n *     <InputBase type=\"email\" />\n *   </Control>\n * </Field>\n *\n * @example\n * // Horizontal field\n * <Field horizontal label=\"Name\">\n *   <Control>\n *     <InputBase />\n *   </Control>\n * </Field>\n */\nconst FieldComponent: React.FC<FieldProps> = ({\n  horizontal,\n  grouped,\n  hasAddons,\n  narrow,\n  label,\n  labelSize,\n  labelProps,\n  textColor,\n  color: _fieldColor,\n  bgColor,\n  className,\n  children,\n  ...props\n}) => {\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    backgroundColor: bgColor,\n    ...props,\n  });\n\n  const mainClass = usePrefixedClassNames('field', {\n    'is-horizontal': horizontal,\n    'has-addons': !!hasAddons,\n    'has-addons-centered': hasAddons === 'centered',\n    'has-addons-right': hasAddons === 'right',\n    'is-narrow': narrow,\n    'is-grouped':\n      grouped === true ||\n      grouped === 'centered' ||\n      grouped === 'right' ||\n      grouped === 'multiline',\n    'is-grouped-centered': grouped === 'centered',\n    'is-grouped-right': grouped === 'right',\n    'is-grouped-multiline': grouped === 'multiline',\n  });\n  const fieldClass = classNames(mainClass, bulmaHelperClasses, className);\n\n  // Default labelSize to 'normal' when horizontal for proper baseline alignment\n  const effectiveLabelSize = labelSize ?? (horizontal ? 'normal' : undefined);\n\n  const labelClass = usePrefixedClassNames('label');\n\n  // Auto-associate the label with a single composed base control (#495): the\n  // label points at a generated id shared via context, which a composed base\n  // adopts when the user supplied no id of their own.\n  // Presence semantics on htmlFor — even an explicit `htmlFor: undefined`\n  // means the caller owns the association. Grouped/addons fields hold several\n  // controls, so no single association is generated for them.\n  const generatedId = useId();\n  const userWiredLabel = !!labelProps && 'htmlFor' in labelProps;\n  const targetId =\n    label && !userWiredLabel && !grouped && !hasAddons\n      ? generatedId\n      : undefined;\n  // A group control (Radios, Checkboxes, Rate, DateRangeInput and its base)\n  // cannot take that `for`, so it points `aria-labelledby` at the label\n  // itself (#939).\n  // The label gets an id whenever the association is on, unless the caller\n  // gave it one.\n  const labelId =\n    labelProps?.id ?? (targetId ? `${targetId}-label` : undefined);\n  // What the rendered label's `for` points at, generated or the caller's, and\n  // the id it renders with, so a control can tell when a label wired by hand\n  // names it and point at that label. An unlabeled Field passes on its\n  // parent's. Unlike `targetId`, a label wired by hand passes on its own in\n  // `grouped`/`hasAddons` Fields too, on purpose: those only stop the Field\n  // picking one control out of several, and the caller's `for` has picked\n  // one, so a range Slider or Autocomplete it names points at that label in\n  // a row as well. A group reads the label element id below instead, which\n  // stays off for a label wired by hand, since no group takes its `for`.\n  const inheritedLabelFor = useFieldLabelFor();\n  const labelForTarget = userWiredLabel ? labelProps.htmlFor : targetId;\n  const ownLabelFor = useMemo(\n    () => ({ htmlFor: labelForTarget, id: labelId }),\n    [labelForTarget, labelId]\n  );\n  const labelFor = label ? ownLabelFor : inheritedLabelFor;\n\n  // Whether the label keeps its generated `for` (#1004). Content that takes\n  // the Field's id says so from a layout effect, and this Field's own layout\n  // effect runs after its content's in the same commit, so by then every\n  // report has landed. Until it runs, on the server and in the first render\n  // while hydrating, the label writes the `for` as it always has. From then\n  // on it keeps the `for` only while some content holds the id, and content\n  // that mounts or changes later reports when it does. Counted in a ref, and\n  // state is set only once settled, so content that takes the id renders\n  // the Field just once.\n  const takersRef = useRef(0);\n  const settledRef = useRef(false);\n  const [forTaken, setForTaken] = useState(true);\n  const settle = useCallback(() => {\n    if (settledRef.current) setForTaken(takersRef.current > 0);\n  }, []);\n  const reportLabelFor = useCallback(() => {\n    takersRef.current += 1;\n    settle();\n    return () => {\n      takersRef.current -= 1;\n      settle();\n    };\n  }, [settle]);\n  useClientLayoutEffect(() => {\n    settledRef.current = true;\n    if (targetId) settle();\n  }, [targetId, settle]);\n  const renderedTargetId = forTaken ? targetId : undefined;\n\n  let renderedLabel = null;\n  if (label) {\n    if (horizontal) {\n      renderedLabel = (\n        <FieldLabel size={effectiveLabelSize}>\n          <label\n            htmlFor={renderedTargetId}\n            {...labelProps}\n            id={labelId}\n            className={classNames(labelClass, labelProps?.className)}\n            style={labelProps?.style}\n          >\n            {label}\n          </label>\n        </FieldLabel>\n      );\n    } else {\n      renderedLabel = (\n        <label\n          htmlFor={renderedTargetId}\n          {...labelProps}\n          id={labelId}\n          className={classNames(labelClass, labelProps?.className)}\n          style={{ display: 'block', ...(labelProps?.style || {}) }}\n        >\n          {label}\n        </label>\n      );\n    }\n  }\n\n  // If horizontal, wrap children in FieldBody (unless the user already provided\n  // a FieldBody — either as the single child, or as one element among siblings\n  // like <Field.Label/> + <Field.Body/>).\n  let content = children;\n  if (horizontal) {\n    const isFieldBody = (c: React.ReactNode): boolean =>\n      React.isValidElement(c) &&\n      // @ts-expect-error displayName isn't on the public type\n      (c.type === FieldBody || c.type?.displayName === 'FieldBody');\n    const isFieldLabel = (c: React.ReactNode): boolean =>\n      React.isValidElement(c) &&\n      // @ts-expect-error displayName isn't on the public type\n      (c.type === FieldLabel || c.type?.displayName === 'FieldLabel');\n    const childArray = React.Children.toArray(children);\n    const userProvidedStructure = childArray.some(\n      c => isFieldBody(c) || isFieldLabel(c)\n    );\n    if (userProvidedStructure) {\n      content = children;\n    } else {\n      content = <FieldBody>{children}</FieldBody>;\n    }\n  }\n\n  return (\n    <FieldProvider value={true}>\n      <FieldLabelIdProvider value={targetId}>\n        <FieldLabelElementIdProvider value={targetId ? labelId : undefined}>\n          <FieldLabelForProvider value={labelFor}>\n            <FieldLabelForReportProvider\n              value={targetId ? reportLabelFor : undefined}\n            >\n              <div className={fieldClass} {...rest}>\n                {renderedLabel}\n                {content}\n              </div>\n            </FieldLabelForReportProvider>\n          </FieldLabelForProvider>\n        </FieldLabelElementIdProvider>\n      </FieldLabelIdProvider>\n    </FieldProvider>\n  );\n};\n\nFieldLabel.displayName = 'FieldLabel';\nFieldBody.displayName = 'FieldBody';\n\nexport const Field = withSubComponents(\n  FieldComponent,\n  {\n    Label: FieldLabel,\n    Body: FieldBody,\n    Control,\n  },\n  'Field'\n);\n\nexport default Field;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/index.cjs

@@ -3187,6 +3187,12 @@ const DropdownComponent = React.forwardRef(function DropdownComponent({ label, c
     const menuRef = React.useRef(null);
     const menuKeys = useMenuKeys();
     const pendingFocusRef = React.useRef(null);
+    // The trigger names the menu and the menu is what it controls, so both
+    // need an id whether or not the Dropdown has one.
+    const generatedId = React.useId();
+    const baseId = id || generatedId;
+    const triggerId = `${baseId}-trigger`;
+    const menuId = `${baseId}-menu`;
     // Cleanup returned by a consumer's callback ref on attach, held until detach.
     const consumerCleanupRef = React.useRef(null);
     const setRefs = React.useCallback((node) => {
@@ -3376,7 +3382,7 @@ const DropdownComponent = React.forwardRef(function DropdownComponent({ label, c
         menuKeys.onKeyDown(e);
     };
     const dropdownClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsxs("div", { className: dropdownClasses, ref: setRefs, id: id, "data-testid": "dropdown-root", ...rest, children: [jsxRuntime.jsx("div", { className: usePrefixedClassNames('dropdown-trigger'), children: jsxRuntime.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: [jsxRuntime.jsx("span", { children: label }), jsxRuntime.jsx("span", { className: usePrefixedClassNames('icon', 'is-small'), "aria-hidden": "true", children: jsxRuntime.jsx("i", { className: "fas fa-angle-down" }) })] }) }), jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('dropdown-menu'), menuClassName), id: id ? `${id}-menu` : undefined, ref: menuRef, role: "menu", "data-testid": "dropdown-menu", onKeyDown: handleMenuKeyDown, 
+    return (jsxRuntime.jsxs("div", { className: dropdownClasses, ref: setRefs, id: id, "data-testid": "dropdown-root", ...rest, children: [jsxRuntime.jsx("div", { className: usePrefixedClassNames('dropdown-trigger'), children: jsxRuntime.jsxs("button", { ref: triggerRef, id: triggerId, className: buttonClass, "aria-haspopup": "true", "aria-controls": menuId, "aria-expanded": active, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, disabled: disabled, type: "button", children: [jsxRuntime.jsx("span", { children: label }), jsxRuntime.jsx("span", { className: usePrefixedClassNames('icon', 'is-small'), "aria-hidden": "true", children: jsxRuntime.jsx("i", { className: "fas fa-angle-down" }) })] }) }), jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('dropdown-menu'), menuClassName), id: menuId, ref: menuRef, role: "menu", "aria-labelledby": triggerId, "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: jsxRuntime.jsx("div", { className: usePrefixedClassNames('dropdown-content'), onClick: handleMenuClick, children: children }) })] }));
@@ -13992,8 +13998,6 @@ const allowedColors = [...validColors, 'inherit', 'current'];
 const Control = React.forwardRef(({ as = 'div', hasIconsLeft, hasIconsRight, isLoading, isExpanded, size, textColor, bgColor, iconLeft, iconRight, iconLeftName, iconLeftSize, iconRightName, iconRightSize, className, children, ...props }, ref) => {
     const Component = (as === 'p' ? 'p' : 'div');
     const { classPrefix } = useConfig();
-    // Remove textColor/bgColor from props before spreading
-    const { textColor: _ignoredTextColor, bgColor: _ignoredBgColor, ...restProps } = props;
     const safeTextColor = allowedColors.includes(textColor)
         ? textColor
         : undefined;
@@ -14003,7 +14007,7 @@ const Control = React.forwardRef(({ as = 'div', hasIconsLeft, hasIconsRight, isL
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: safeTextColor,
         backgroundColor: safeBgColor,
-        ...restProps,
+        ...props,
     });
     // Prepare icon props for the shortcut. A truthiness test (not `!== undefined`)
     // so a falsy node from the idiomatic `iconLeft={cond && <Node/>}` / `iconLeft={maybe ?? null}`
@@ -14032,8 +14036,7 @@ const Control = React.forwardRef(({ as = 'div', hasIconsLeft, hasIconsRight, isL
         [`is-${size}`]: !!size,
     });
     const controlClass = classNames(mainClass, bulmaHelperClasses, className);
-    // --- FIX: Spread both restProps (for data-testid, etc) AND rest (from useBulmaClasses) ---
-    return (jsxRuntime.jsx(ControlProvider, { value: true, children: jsxRuntime.jsxs(Component, { className: controlClass, ref: ref, ...restProps, ...rest, children: [jsxRuntime.jsx(ControlLoadingProvider, { value: !!isLoading, children: children }), leftIconValue &&
+    return (jsxRuntime.jsx(ControlProvider, { value: true, children: jsxRuntime.jsxs(Component, { className: controlClass, ref: ref, ...rest, children: [jsxRuntime.jsx(ControlLoadingProvider, { value: !!isLoading, children: children }), leftIconValue &&
                     (isIconProps(leftIconValue) ? (jsxRuntime.jsx(Icon, { ...leftIconValue, className: prefixedClassNames(classPrefix, 'is-left') })) : (jsxRuntime.jsx(Icon, { className: prefixedClassNames(classPrefix, 'is-left'), children: leftIconValue }))), rightIconValue &&
                     (isIconProps(rightIconValue) ? (jsxRuntime.jsx(Icon, { ...rightIconValue, className: prefixedClassNames(classPrefix, 'is-right') })) : (jsxRuntime.jsx(Icon, { className: prefixedClassNames(classPrefix, 'is-right'), children: rightIconValue })))] }) }));
 });
@@ -14071,8 +14074,7 @@ const FieldLabel = ({ size, textColor, bgColor, className, children, ...props })
         [`is-${size}`]: !!size,
     });
     const fieldLabelClass = classNames(mainClass, bulmaHelperClasses, className);
-    // Spread ...props and ...rest so custom props like data-testid are included
-    return (jsxRuntime.jsx("div", { className: fieldLabelClass, ...props, ...rest, children: children }));
+    return (jsxRuntime.jsx("div", { className: fieldLabelClass, ...rest, children: children }));
 };
 /**
  * FieldBody component for rendering Bulma field body.
@@ -14092,8 +14094,7 @@ const FieldBody = ({ textColor, bgColor, className, children, ...props }) => {
     });
     const mainClass = usePrefixedClassNames('field-body');
     const fieldBodyClass = classNames(mainClass, bulmaHelperClasses, className);
-    // Spread ...props and ...rest so custom props like data-testid are included
-    return (jsxRuntime.jsx("div", { className: fieldBodyClass, ...props, ...rest, children: children }));
+    return (jsxRuntime.jsx("div", { className: fieldBodyClass, ...rest, children: children }));
 };
 /**
  * The `Field` component is a Bulma-styled form field container.