@allxsmith/bestax-bulma 5.27.5 → 5.27.7

package/dist/esm/elements/Notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sources":["../../../src/elements/Notification.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useCallback,\n  useSyncExternalStore,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { warnUnstyledColor } from '../helpers/colorDeprecations';\nimport { groupIntoPositionStacks } from '../helpers/positionStacks';\nimport { useIsHydrated } from '../helpers/useIsHydrated';\nimport { StatusRegion, spokenText } from '../helpers/statusRegion';\n\n/**\n * Props for the Notification component.\n */\nexport interface NotificationProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /**\n   * Bulma color modifier for the notification (renders `is-<color>`).\n   *\n   * Only `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`,\n   * `white`, `light`, and `dark` have shipped CSS for `.notification`. Every\n   * other value the union accepts emits a class no CSS rule matches, so the\n   * notification renders unstyled; those log a console warning in development\n   * and will be removed from this union in the next major version.\n   */\n  color?: (typeof validColors)[number];\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Use the light color variant. */\n  isLight?: boolean;\n  /**\n   * Shows a close (delete) button in the notification. It renders\n   * `type=\"button\"`, so it does not submit a form around it.\n   */\n  hasDelete?: boolean;\n  /** Callback fired when the delete button is clicked. */\n  onDelete?: () => void;\n  /** Content inside the notification. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Notification` component is a Bulma-styled alert/message area for providing feedback, warnings, or information to users.\n *\n * @function\n * @param {NotificationProps} props - Props for the Notification component.\n * @returns {JSX.Element} The rendered notification element.\n * @see {@link https://bulma.io/documentation/elements/notification/ | Bulma Notification documentation}\n */\nexport const Notification: React.FC<NotificationProps> = ({\n  className,\n  color,\n  textColor,\n  isLight,\n  hasDelete,\n  onDelete,\n  children,\n  ...props\n}) => {\n  warnUnstyledColor('Notification', color);\n\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    ...props,\n  });\n\n  const bulmaClasses = usePrefixedClassNames('notification', {\n    [`is-${color}`]: color && validColors.includes(color),\n    'is-light': isLight,\n  });\n\n  const deleteClasses = usePrefixedClassNames('delete');\n\n  const notificationClasses = classNames(\n    bulmaClasses,\n    bulmaHelperClasses,\n    className\n  );\n\n  return (\n    <div className={notificationClasses} {...rest}>\n      {hasDelete && (\n        <button\n          type=\"button\"\n          className={deleteClasses}\n          onClick={onDelete}\n          aria-label=\"Close notification\"\n        />\n      )}\n      {children}\n    </div>\n  );\n};\n\n// Programmatic Notification API\n\n/** Screen positions where programmatic notifications can be displayed. */\nexport type NotificationPosition =\n  'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right';\n\n/**\n * Options for showing a programmatic notification.\n */\nexport interface NotificationOptions {\n  /**\n   * The message to display.\n   *\n   * For a notification other than `danger` and `warning`, NotificationContainer\n   * announces the text the message renders, with an element's `aria-label`,\n   * or an image's `alt`, standing in for what's inside it, a break between\n   * block-level elements, and parts that are `aria-hidden`, `hidden` or\n   * inline-styled `display: none` left out. Other ways of naming or hiding\n   * content, such as `aria-labelledby`, CSS-generated content or a\n   * stylesheet's `display: none`, aren't followed, so a message that relies on\n   * them can be announced differently from what a screen reader would read.\n   */\n  message: string | React.ReactNode;\n  /**\n   * Bulma color modifier for the notification (renders `is-<color>`).\n   *\n   * Only `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`,\n   * `white`, `light`, and `dark` have shipped CSS for `.notification`. Every\n   * other value the union accepts emits a class no CSS rule matches, so the\n   * notification renders unstyled; those log a console warning in development\n   * and will be removed from this union in the next major version.\n   */\n  color?: (typeof validColors)[number];\n  /** Use the light color variant. */\n  isLight?: boolean;\n  /** Duration in ms before auto-close. Default 3000. */\n  duration?: number;\n  /**\n   * Position on the screen. A notification shown without one goes to\n   * `NotificationContainer`'s `position`.\n   */\n  position?: NotificationPosition;\n  /**\n   * When true, notifications enter a FIFO queue and display one at a time,\n   * one queue across every `position`. Default false.\n   */\n  queue?: boolean;\n  /** Show a delete (close) button. Default true. */\n  hasDelete?: boolean;\n  /** Stay open until dismissed. */\n  indefinite?: boolean;\n  /** Pause auto-close timer on hover. Default true. */\n  pauseOnHover?: boolean;\n}\n\n/**\n * Internal representation of a notification instance.\n */\ninterface NotificationInstance {\n  /** Unique identifier for this notification. */\n  id: string;\n  /** Configuration options for the notification. */\n  options: NotificationOptions;\n}\n\nlet notificationId = 0;\nconst notificationListeners: Set<(items: NotificationInstance[]) => void> =\n  new Set();\nlet notifications: NotificationInstance[] = [];\n\n// Queue support\nlet queuedNotifications: NotificationInstance[] = [];\nlet currentQueuedNotification: NotificationInstance | null = null;\n\n// The server has nowhere to portal a notification to, and its copy of this\n// module is shared by every request, so server rendering reads an empty list.\n// Hydration reads it too, which keeps the first client render matching the\n// server's.\nconst noNotifications: NotificationInstance[] = [];\nconst getServerNotifications = () => noNotifications;\n\n// What a container shows right now: the stacked notifications, then the queued\n// one on screen. NotificationContainer renders from this rather than from\n// updates alone, so notifications raised before it mounted still appear. It is\n// replaced rather than mutated, and only when listeners are notified, because\n// useSyncExternalStore needs the same array back between changes. An empty\n// list is `noNotifications` itself, so an empty store reads the same snapshot\n// on the client as on the server, and a notify that leaves nothing showing\n// when nothing was showing doesn't render the container again.\nlet visibleNotifications: NotificationInstance[] = noNotifications;\nconst getVisibleNotifications = () => visibleNotifications;\n\nconst notifyNotificationListeners = () => {\n  const allVisible = [...notifications];\n  if (currentQueuedNotification) {\n    allVisible.push(currentQueuedNotification);\n  }\n  visibleNotifications = allVisible.length > 0 ? allVisible : noNotifications;\n  notificationListeners.forEach(listener => listener([...allVisible]));\n};\n\nconst processQueuedNotification = () => {\n  if (currentQueuedNotification || queuedNotifications.length === 0) return;\n  currentQueuedNotification = queuedNotifications.shift()!;\n  notifyNotificationListeners();\n};\n\n/**\n * Programmatic notification API for showing, closing, and managing notifications.\n *\n * @example\n * notification.success('File saved successfully');\n * notification.danger('Something went wrong', { duration: 5000 });\n */\nexport const notification = {\n  /**\n   * Show a notification with the given options.\n   * @param {NotificationOptions} options - Notification configuration.\n   * @returns {string} The unique ID of the created notification.\n   */\n  show: (options: NotificationOptions): string => {\n    const id = `notification-${++notificationId}`;\n    const instance = { id, options };\n\n    if (options.queue) {\n      queuedNotifications.push(instance);\n      processQueuedNotification();\n    } else {\n      notifications.push(instance);\n      notifyNotificationListeners();\n    }\n\n    return id;\n  },\n\n  /**\n   * Show a success notification.\n   * @param {string|React.ReactNode} message - The message to display.\n   * @param {Partial<NotificationOptions>} [options] - Additional options.\n   * @returns {string} The notification ID.\n   */\n  success: (\n    message: string | React.ReactNode,\n    options?: Partial<NotificationOptions>\n  ): string => {\n    return notification.show({ message, color: 'success', ...options });\n  },\n\n  /**\n   * Show a danger notification.\n   * @param {string|React.ReactNode} message - The message to display.\n   * @param {Partial<NotificationOptions>} [options] - Additional options.\n   * @returns {string} The notification ID.\n   */\n  danger: (\n    message: string | React.ReactNode,\n    options?: Partial<NotificationOptions>\n  ): string => {\n    return notification.show({ message, color: 'danger', ...options });\n  },\n\n  /**\n   * Show a warning notification.\n   * @param {string|React.ReactNode} message - The message to display.\n   * @param {Partial<NotificationOptions>} [options] - Additional options.\n   * @returns {string} The notification ID.\n   */\n  warning: (\n    message: string | React.ReactNode,\n    options?: Partial<NotificationOptions>\n  ): string => {\n    return notification.show({ message, color: 'warning', ...options });\n  },\n\n  /**\n   * Show an info notification.\n   * @param {string|React.ReactNode} message - The message to display.\n   * @param {Partial<NotificationOptions>} [options] - Additional options.\n   * @returns {string} The notification ID.\n   */\n  info: (\n    message: string | React.ReactNode,\n    options?: Partial<NotificationOptions>\n  ): string => {\n    return notification.show({ message, color: 'info', ...options });\n  },\n\n  /**\n   * Close a specific notification by ID.\n   * @param {string} id - The notification ID to close.\n   */\n  close: (id: string): void => {\n    if (currentQueuedNotification && currentQueuedNotification.id === id) {\n      currentQueuedNotification = null;\n      processQueuedNotification();\n    } else {\n      queuedNotifications = queuedNotifications.filter(n => n.id !== id);\n      notifications = notifications.filter(n => n.id !== id);\n    }\n    notifyNotificationListeners();\n  },\n\n  /** Close all notifications and clear the queue. */\n  closeAll: (): void => {\n    notifications = [];\n    queuedNotifications = [];\n    currentQueuedNotification = null;\n    notifyNotificationListeners();\n  },\n\n  /**\n   * Subscribe to notification state changes.\n   * @param {(items: NotificationInstance[]) => void} listener - Callback invoked on changes.\n   * @returns {() => void} Unsubscribe function.\n   */\n  subscribe: (\n    listener: (items: NotificationInstance[]) => void\n  ): (() => void) => {\n    notificationListeners.add(listener);\n    return () => notificationListeners.delete(listener);\n  },\n};\n\n/**\n * Whether a notification of this color announces itself as an alert, rather\n * than politely through NotificationContainer's status region.\n *\n * @function isUrgentColor\n * @param {NotificationOptions['color']} color - The notification's color.\n * @returns {boolean} True for `danger` and `warning`.\n */\nconst isUrgentColor = (color: NotificationOptions['color']): boolean =>\n  color === 'danger' || color === 'warning';\n\n/**\n * Single auto-dismissing notification item used by NotificationContainer.\n *\n * @function\n * @param {{ instance: NotificationInstance; onClose: (id: string) => void; registerMessage: (id: string, node: HTMLElement | null) => void }} props - Component props.\n * @returns {JSX.Element} The rendered notification item.\n */\nconst NotificationItem: React.FC<{\n  instance: NotificationInstance;\n  onClose: (id: string) => void;\n  registerMessage: (id: string, node: HTMLElement | null) => void;\n}> = ({ instance, onClose, registerMessage }) => {\n  const {\n    message,\n    color,\n    isLight,\n    duration = 3000,\n    hasDelete = true,\n    indefinite = false,\n    pauseOnHover = true,\n  } = instance.options;\n\n  const [isPaused, setIsPaused] = useState(false);\n  const urgent = isUrgentColor(color);\n\n  const handleClose = useCallback(() => {\n    onClose(instance.id);\n  }, [onClose, instance.id]);\n\n  const messageRef = useCallback(\n    (node: HTMLElement | null) => {\n      registerMessage(instance.id, node);\n    },\n    [registerMessage, instance.id]\n  );\n\n  // Auto-close timer\n  useEffect(() => {\n    if (indefinite || duration === 0 || isPaused) return undefined;\n\n    const timer = setTimeout(handleClose, duration);\n    return () => clearTimeout(timer);\n  }, [duration, indefinite, isPaused, handleClose]);\n\n  const handleMouseEnter = useCallback(() => {\n    if (pauseOnHover) setIsPaused(true);\n  }, [pauseOnHover]);\n\n  const handleMouseLeave = useCallback(() => {\n    if (pauseOnHover) setIsPaused(false);\n  }, [pauseOnHover]);\n\n  return (\n    <Notification\n      color={color}\n      isLight={isLight}\n      hasDelete={hasDelete}\n      onDelete={handleClose}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      style={{ pointerEvents: 'auto' }}\n    >\n      {/* Only the message is announced, not the close button Notification\n          renders ahead of its children. Danger and warning announce\n          themselves as an assertive alert, which a screen reader reliably\n          reads out even when it arrives with its text. The rest are announced\n          through the container's status region, which reads their text from\n          this span, so it carries no role of its own that would announce them\n          a second time. */}\n      {urgent ? (\n        <span role=\"alert\" aria-live=\"assertive\">\n          {message}\n        </span>\n      ) : (\n        <span ref={messageRef}>{message}</span>\n      )}\n    </Notification>\n  );\n};\n\n// The order NotificationContainer renders its stacks in: across the top of the\n// screen, then across the bottom.\nconst notificationStackOrder: readonly NotificationPosition[] = [\n  'top-left',\n  'top',\n  'top-right',\n  'bottom-left',\n  'bottom',\n  'bottom-right',\n];\n\n/**\n * Inline style that fixes a stack of notifications to its place on the screen.\n *\n * @function\n * @param {NotificationPosition} position - Where the stack sits.\n * @returns {React.CSSProperties} The stack's style.\n */\nconst notificationStackStyle = (\n  position: NotificationPosition\n): React.CSSProperties => {\n  const isBottom = position.startsWith('bottom');\n  const isCenter = position === 'top' || position === 'bottom';\n  const isRight = position.endsWith('right');\n\n  return {\n    position: 'fixed',\n    zIndex: 100,\n    display: 'flex',\n    flexDirection: isBottom ? 'column-reverse' : 'column',\n    gap: '0.75rem',\n    padding: '1rem',\n    pointerEvents: 'none',\n    maxWidth: '100%',\n    ...(isBottom ? { bottom: 0 } : { top: 0 }),\n    ...(isCenter\n      ? { left: '50%', transform: 'translateX(-50%)', alignItems: 'center' }\n      : isRight\n        ? { right: 0, alignItems: 'flex-end' }\n        : { left: 0, alignItems: 'flex-start' }),\n  };\n};\n\n/**\n * Container component for rendering programmatic notifications.\n * Place once at your app root to enable the notification API. A notification\n * shown with a `position` appears there, and one shown without goes to the\n * container's `position`, so the container renders a stack for each position\n * in use.\n *\n * It keeps a visually hidden `role=\"status\"` live region in the page from the\n * moment it mounts, even while nothing is showing, and announces every\n * notification other than `danger` and `warning` through it, a moment after\n * the notification appears. Those notifications carry no `role=\"status\"` of\n * their own, so `getByRole('status')` finds the region, not the notification.\n * The text stays in the region briefly, even if the notification closes in\n * the meantime, and while both are up the page holds two copies of it. A\n * polite notification that closes before its announcement is written, a\n * moment after it appears, isn't announced at all. `danger` and `warning`\n * notifications announce themselves as assertive alerts. The region is hidden\n * with inline styles, so it needs no stylesheet.\n *\n * @function\n * @param {{ position?: NotificationPosition }} props - Container props.\n * @returns {JSX.Element | null} The rendered notification container, or null on the server and while hydrating.\n */\nexport const NotificationContainer: React.FC<{\n  /**\n   * Where a notification shown without a `position` of its own appears.\n   * Default: 'top-right'. When it changes, those notifications move without\n   * remounting, but one shown with its own `position` equal to the old or new\n   * value remounts and starts over as if it had just been shown.\n   */\n  position?: NotificationPosition;\n}> = ({ position = 'top-right' }) => {\n  // Starts from the notifications already showing instead of an empty list,\n  // then follows changes.\n  const items = useSyncExternalStore(\n    notification.subscribe,\n    getVisibleNotifications,\n    getServerNotifications\n  );\n  // A portal needs a document, and it has no server-rendered counterpart, so\n  // the server render and the hydrating one render nothing, and the container\n  // portals in from the render after hydration.\n  const isHydrated = useIsHydrated();\n\n  // The notifications the status region announces. Danger and warning\n  // announce themselves.\n  const politeItems = useMemo(\n    () => items.filter(item => !isUrgentColor(item.options.color)),\n    [items]\n  );\n\n  // Each polite notification's message element, so the text the region\n  // announces is the text on screen, whatever the message renders.\n  const messageNodesRef = useRef(new Map<string, HTMLElement>());\n  const registerMessage = useCallback(\n    (id: string, node: HTMLElement | null) => {\n      if (node) {\n        messageNodesRef.current.set(id, node);\n      } else {\n        messageNodesRef.current.delete(id);\n      }\n    },\n    []\n  );\n  // StatusRegion only describes polite notifications that are on screen, and\n  // each of those registered its message element when it mounted. The\n  // fallback is for a notification announced without being rendered, should\n  // the container ever render fewer than it announces: a plain-text message\n  // still says itself, and anything else is skipped.\n  const describe = useCallback((item: NotificationInstance) => {\n    const node = messageNodesRef.current.get(item.id);\n    /* istanbul ignore if: every polite notification on screen registers its message element when it mounts */\n    if (!node) {\n      const { message } = item.options;\n      return typeof message === 'string' ? message : null;\n    }\n    return spokenText(node);\n  }, []);\n\n  if (typeof document === 'undefined' || !isHydrated) {\n    return null;\n  }\n\n  const stacks = groupIntoPositionStacks(\n    items,\n    item => item.options.position,\n    position,\n    notificationStackOrder\n  );\n\n  return createPortal(\n    <>\n      {stacks.map(stack => (\n        <div key={stack.key} style={notificationStackStyle(stack.position)}>\n          {stack.items.map(item => (\n            <NotificationItem\n              key={item.id}\n              instance={item}\n              onClose={notification.close}\n              registerMessage={registerMessage}\n            />\n          ))}\n        </div>\n      ))}\n      <StatusRegion items={politeItems} describe={describe} />\n    </>,\n    document.body\n  );\n};\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
+{"version":3,"file":"Notification.js","sources":["../../../src/elements/Notification.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useCallback,\n  useSyncExternalStore,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { classNames, usePrefixedClassNames } from '../helpers/classNames';\nimport {\n  useBulmaClasses,\n  BulmaClassesProps,\n  validColors,\n} from '../helpers/useBulmaClasses';\nimport { warnUnstyledColor } from '../helpers/colorDeprecations';\nimport { groupIntoPositionStacks } from '../helpers/positionStacks';\nimport { useIsHydrated } from '../helpers/useIsHydrated';\nimport { StatusRegion, spokenText } from '../helpers/statusRegion';\n\n/**\n * Props for the Notification component.\n */\nexport interface NotificationProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {\n  /** Additional CSS classes to apply. */\n  className?: string;\n  /**\n   * Bulma color modifier for the notification (renders `is-<color>`).\n   *\n   * Only `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`,\n   * `white`, `light`, and `dark` have shipped CSS for `.notification`. Every\n   * other value the union accepts emits a class no CSS rule matches, so the\n   * notification renders unstyled; those log a console warning in development\n   * and will be removed from this union in the next major version.\n   */\n  color?: (typeof validColors)[number];\n  /** Text color helper. */\n  textColor?: (typeof validColors)[number] | 'inherit' | 'current';\n  /** Use the light color variant. */\n  isLight?: boolean;\n  /**\n   * Shows a close (delete) button in the notification. It renders\n   * `type=\"button\"`, so it does not submit a form around it.\n   *\n   * The notification also takes `has-delete`, which pads its end by\n   * `--bulma-notification-delete-padding-inline-end` so the text clears the\n   * button. That rule ships in bestax's stylesheets, not Bulma's, so an app\n   * styled by Bulma's CSS alone keeps Bulma's padding.\n   */\n  hasDelete?: boolean;\n  /** Callback fired when the delete button is clicked. */\n  onDelete?: () => void;\n  /** Content inside the notification. */\n  children?: React.ReactNode;\n}\n\n/**\n * The `Notification` component is a Bulma-styled alert/message area for providing feedback, warnings, or information to users.\n *\n * @function\n * @param {NotificationProps} props - Props for the Notification component.\n * @returns {JSX.Element} The rendered notification element.\n * @see {@link https://bulma.io/documentation/elements/notification/ | Bulma Notification documentation}\n */\nexport const Notification: React.FC<NotificationProps> = ({\n  className,\n  color,\n  textColor,\n  isLight,\n  hasDelete,\n  onDelete,\n  children,\n  ...props\n}) => {\n  warnUnstyledColor('Notification', color);\n\n  /**\n   * Generates Bulma helper classes and separates out remaining props.\n   */\n  const { bulmaHelperClasses, rest } = useBulmaClasses({\n    color: textColor,\n    ...props,\n  });\n\n  const bulmaClasses = usePrefixedClassNames('notification', {\n    [`is-${color}`]: color && validColors.includes(color),\n    'is-light': isLight,\n    'has-delete': hasDelete,\n  });\n\n  const deleteClasses = usePrefixedClassNames('delete');\n\n  const notificationClasses = classNames(\n    bulmaClasses,\n    bulmaHelperClasses,\n    className\n  );\n\n  return (\n    <div className={notificationClasses} {...rest}>\n      {hasDelete && (\n        <button\n          type=\"button\"\n          className={deleteClasses}\n          onClick={onDelete}\n          aria-label=\"Close notification\"\n        />\n      )}\n      {children}\n    </div>\n  );\n};\n\n// Programmatic Notification API\n\n/** Screen positions where programmatic notifications can be displayed. */\nexport type NotificationPosition =\n  'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right';\n\n/**\n * Options for showing a programmatic notification.\n */\nexport interface NotificationOptions {\n  /**\n   * The message to display.\n   *\n   * For a notification other than `danger` and `warning`, NotificationContainer\n   * announces the text the message renders, with an element's `aria-label`,\n   * or an image's `alt`, standing in for what's inside it, a break between\n   * block-level elements, and parts that are `aria-hidden`, `hidden` or\n   * inline-styled `display: none` left out. Other ways of naming or hiding\n   * content, such as `aria-labelledby`, CSS-generated content or a\n   * stylesheet's `display: none`, aren't followed, so a message that relies on\n   * them can be announced differently from what a screen reader would read.\n   */\n  message: string | React.ReactNode;\n  /**\n   * Bulma color modifier for the notification (renders `is-<color>`).\n   *\n   * Only `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`,\n   * `white`, `light`, and `dark` have shipped CSS for `.notification`. Every\n   * other value the union accepts emits a class no CSS rule matches, so the\n   * notification renders unstyled; those log a console warning in development\n   * and will be removed from this union in the next major version.\n   */\n  color?: (typeof validColors)[number];\n  /** Use the light color variant. */\n  isLight?: boolean;\n  /** Duration in ms before auto-close. Default 3000. */\n  duration?: number;\n  /**\n   * Position on the screen. A notification shown without one goes to\n   * `NotificationContainer`'s `position`.\n   */\n  position?: NotificationPosition;\n  /**\n   * When true, notifications enter a FIFO queue and display one at a time,\n   * one queue across every `position`. Default false.\n   */\n  queue?: boolean;\n  /** Show a delete (close) button. Default true. */\n  hasDelete?: boolean;\n  /** Stay open until dismissed. */\n  indefinite?: boolean;\n  /** Pause auto-close timer on hover. Default true. */\n  pauseOnHover?: boolean;\n}\n\n/**\n * Internal representation of a notification instance.\n */\ninterface NotificationInstance {\n  /** Unique identifier for this notification. */\n  id: string;\n  /** Configuration options for the notification. */\n  options: NotificationOptions;\n}\n\nlet notificationId = 0;\nconst notificationListeners: Set<(items: NotificationInstance[]) => void> =\n  new Set();\nlet notifications: NotificationInstance[] = [];\n\n// Queue support\nlet queuedNotifications: NotificationInstance[] = [];\nlet currentQueuedNotification: NotificationInstance | null = null;\n\n// The server has nowhere to portal a notification to, and its copy of this\n// module is shared by every request, so server rendering reads an empty list.\n// Hydration reads it too, which keeps the first client render matching the\n// server's.\nconst noNotifications: NotificationInstance[] = [];\nconst getServerNotifications = () => noNotifications;\n\n// What a container shows right now: the stacked notifications, then the queued\n// one on screen. NotificationContainer renders from this rather than from\n// updates alone, so notifications raised before it mounted still appear. It is\n// replaced rather than mutated, and only when listeners are notified, because\n// useSyncExternalStore needs the same array back between changes. An empty\n// list is `noNotifications` itself, so an empty store reads the same snapshot\n// on the client as on the server, and a notify that leaves nothing showing\n// when nothing was showing doesn't render the container again.\nlet visibleNotifications: NotificationInstance[] = noNotifications;\nconst getVisibleNotifications = () => visibleNotifications;\n\nconst notifyNotificationListeners = () => {\n  const allVisible = [...notifications];\n  if (currentQueuedNotification) {\n    allVisible.push(currentQueuedNotification);\n  }\n  visibleNotifications = allVisible.length > 0 ? allVisible : noNotifications;\n  notificationListeners.forEach(listener => listener([...allVisible]));\n};\n\nconst processQueuedNotification = () => {\n  if (currentQueuedNotification || queuedNotifications.length === 0) return;\n  currentQueuedNotification = queuedNotifications.shift()!;\n  notifyNotificationListeners();\n};\n\n/**\n * Programmatic notification API for showing, closing, and managing notifications.\n *\n * @example\n * notification.success('File saved successfully');\n * notification.danger('Something went wrong', { duration: 5000 });\n */\nexport const notification = {\n  /**\n   * Show a notification with the given options.\n   * @param {NotificationOptions} options - Notification configuration.\n   * @returns {string} The unique ID of the created notification.\n   */\n  show: (options: NotificationOptions): string => {\n    const id = `notification-${++notificationId}`;\n    const instance = { id, options };\n\n    if (options.queue) {\n      queuedNotifications.push(instance);\n      processQueuedNotification();\n    } else {\n      notifications.push(instance);\n      notifyNotificationListeners();\n    }\n\n    return id;\n  },\n\n  /**\n   * Show a success notification.\n   * @param {string|React.ReactNode} message - The message to display.\n   * @param {Partial<NotificationOptions>} [options] - Additional options.\n   * @returns {string} The notification ID.\n   */\n  success: (\n    message: string | React.ReactNode,\n    options?: Partial<NotificationOptions>\n  ): string => {\n    return notification.show({ message, color: 'success', ...options });\n  },\n\n  /**\n   * Show a danger notification.\n   * @param {string|React.ReactNode} message - The message to display.\n   * @param {Partial<NotificationOptions>} [options] - Additional options.\n   * @returns {string} The notification ID.\n   */\n  danger: (\n    message: string | React.ReactNode,\n    options?: Partial<NotificationOptions>\n  ): string => {\n    return notification.show({ message, color: 'danger', ...options });\n  },\n\n  /**\n   * Show a warning notification.\n   * @param {string|React.ReactNode} message - The message to display.\n   * @param {Partial<NotificationOptions>} [options] - Additional options.\n   * @returns {string} The notification ID.\n   */\n  warning: (\n    message: string | React.ReactNode,\n    options?: Partial<NotificationOptions>\n  ): string => {\n    return notification.show({ message, color: 'warning', ...options });\n  },\n\n  /**\n   * Show an info notification.\n   * @param {string|React.ReactNode} message - The message to display.\n   * @param {Partial<NotificationOptions>} [options] - Additional options.\n   * @returns {string} The notification ID.\n   */\n  info: (\n    message: string | React.ReactNode,\n    options?: Partial<NotificationOptions>\n  ): string => {\n    return notification.show({ message, color: 'info', ...options });\n  },\n\n  /**\n   * Close a specific notification by ID.\n   * @param {string} id - The notification ID to close.\n   */\n  close: (id: string): void => {\n    if (currentQueuedNotification && currentQueuedNotification.id === id) {\n      currentQueuedNotification = null;\n      processQueuedNotification();\n    } else {\n      queuedNotifications = queuedNotifications.filter(n => n.id !== id);\n      notifications = notifications.filter(n => n.id !== id);\n    }\n    notifyNotificationListeners();\n  },\n\n  /** Close all notifications and clear the queue. */\n  closeAll: (): void => {\n    notifications = [];\n    queuedNotifications = [];\n    currentQueuedNotification = null;\n    notifyNotificationListeners();\n  },\n\n  /**\n   * Subscribe to notification state changes.\n   * @param {(items: NotificationInstance[]) => void} listener - Callback invoked on changes.\n   * @returns {() => void} Unsubscribe function.\n   */\n  subscribe: (\n    listener: (items: NotificationInstance[]) => void\n  ): (() => void) => {\n    notificationListeners.add(listener);\n    return () => notificationListeners.delete(listener);\n  },\n};\n\n/**\n * Whether a notification of this color announces itself as an alert, rather\n * than politely through NotificationContainer's status region.\n *\n * @function isUrgentColor\n * @param {NotificationOptions['color']} color - The notification's color.\n * @returns {boolean} True for `danger` and `warning`.\n */\nconst isUrgentColor = (color: NotificationOptions['color']): boolean =>\n  color === 'danger' || color === 'warning';\n\n/**\n * Single auto-dismissing notification item used by NotificationContainer.\n *\n * @function\n * @param {{ instance: NotificationInstance; onClose: (id: string) => void; registerMessage: (id: string, node: HTMLElement | null) => void }} props - Component props.\n * @returns {JSX.Element} The rendered notification item.\n */\nconst NotificationItem: React.FC<{\n  instance: NotificationInstance;\n  onClose: (id: string) => void;\n  registerMessage: (id: string, node: HTMLElement | null) => void;\n}> = ({ instance, onClose, registerMessage }) => {\n  const {\n    message,\n    color,\n    isLight,\n    duration = 3000,\n    hasDelete = true,\n    indefinite = false,\n    pauseOnHover = true,\n  } = instance.options;\n\n  const [isPaused, setIsPaused] = useState(false);\n  const urgent = isUrgentColor(color);\n\n  const handleClose = useCallback(() => {\n    onClose(instance.id);\n  }, [onClose, instance.id]);\n\n  const messageRef = useCallback(\n    (node: HTMLElement | null) => {\n      registerMessage(instance.id, node);\n    },\n    [registerMessage, instance.id]\n  );\n\n  // Auto-close timer\n  useEffect(() => {\n    if (indefinite || duration === 0 || isPaused) return undefined;\n\n    const timer = setTimeout(handleClose, duration);\n    return () => clearTimeout(timer);\n  }, [duration, indefinite, isPaused, handleClose]);\n\n  const handleMouseEnter = useCallback(() => {\n    if (pauseOnHover) setIsPaused(true);\n  }, [pauseOnHover]);\n\n  const handleMouseLeave = useCallback(() => {\n    if (pauseOnHover) setIsPaused(false);\n  }, [pauseOnHover]);\n\n  return (\n    <Notification\n      color={color}\n      isLight={isLight}\n      hasDelete={hasDelete}\n      onDelete={handleClose}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      style={{ pointerEvents: 'auto' }}\n    >\n      {/* Only the message is announced, not the close button Notification\n          renders ahead of its children. Danger and warning announce\n          themselves as an assertive alert, which a screen reader reliably\n          reads out even when it arrives with its text. The rest are announced\n          through the container's status region, which reads their text from\n          this span, so it carries no role of its own that would announce them\n          a second time. */}\n      {urgent ? (\n        <span role=\"alert\" aria-live=\"assertive\">\n          {message}\n        </span>\n      ) : (\n        <span ref={messageRef}>{message}</span>\n      )}\n    </Notification>\n  );\n};\n\n// The order NotificationContainer renders its stacks in: across the top of the\n// screen, then across the bottom.\nconst notificationStackOrder: readonly NotificationPosition[] = [\n  'top-left',\n  'top',\n  'top-right',\n  'bottom-left',\n  'bottom',\n  'bottom-right',\n];\n\n/**\n * Inline style that fixes a stack of notifications to its place on the screen.\n *\n * @function\n * @param {NotificationPosition} position - Where the stack sits.\n * @returns {React.CSSProperties} The stack's style.\n */\nconst notificationStackStyle = (\n  position: NotificationPosition\n): React.CSSProperties => {\n  const isBottom = position.startsWith('bottom');\n  const isCenter = position === 'top' || position === 'bottom';\n  const isRight = position.endsWith('right');\n\n  return {\n    position: 'fixed',\n    zIndex: 100,\n    display: 'flex',\n    flexDirection: isBottom ? 'column-reverse' : 'column',\n    gap: '0.75rem',\n    padding: '1rem',\n    pointerEvents: 'none',\n    maxWidth: '100%',\n    ...(isBottom ? { bottom: 0 } : { top: 0 }),\n    ...(isCenter\n      ? { left: '50%', transform: 'translateX(-50%)', alignItems: 'center' }\n      : isRight\n        ? { right: 0, alignItems: 'flex-end' }\n        : { left: 0, alignItems: 'flex-start' }),\n  };\n};\n\n/**\n * Container component for rendering programmatic notifications.\n * Place once at your app root to enable the notification API. A notification\n * shown with a `position` appears there, and one shown without goes to the\n * container's `position`, so the container renders a stack for each position\n * in use.\n *\n * It keeps a visually hidden `role=\"status\"` live region in the page from the\n * moment it mounts, even while nothing is showing, and announces every\n * notification other than `danger` and `warning` through it, a moment after\n * the notification appears. Those notifications carry no `role=\"status\"` of\n * their own, so `getByRole('status')` finds the region, not the notification.\n * The text stays in the region briefly, even if the notification closes in\n * the meantime, and while both are up the page holds two copies of it. A\n * polite notification that closes before its announcement is written, a\n * moment after it appears, isn't announced at all. `danger` and `warning`\n * notifications announce themselves as assertive alerts. The region is hidden\n * with inline styles, so it needs no stylesheet.\n *\n * @function\n * @param {{ position?: NotificationPosition }} props - Container props.\n * @returns {JSX.Element | null} The rendered notification container, or null on the server and while hydrating.\n */\nexport const NotificationContainer: React.FC<{\n  /**\n   * Where a notification shown without a `position` of its own appears.\n   * Default: 'top-right'. When it changes, those notifications move without\n   * remounting, but one shown with its own `position` equal to the old or new\n   * value remounts and starts over as if it had just been shown.\n   */\n  position?: NotificationPosition;\n}> = ({ position = 'top-right' }) => {\n  // Starts from the notifications already showing instead of an empty list,\n  // then follows changes.\n  const items = useSyncExternalStore(\n    notification.subscribe,\n    getVisibleNotifications,\n    getServerNotifications\n  );\n  // A portal needs a document, and it has no server-rendered counterpart, so\n  // the server render and the hydrating one render nothing, and the container\n  // portals in from the render after hydration.\n  const isHydrated = useIsHydrated();\n\n  // The notifications the status region announces. Danger and warning\n  // announce themselves.\n  const politeItems = useMemo(\n    () => items.filter(item => !isUrgentColor(item.options.color)),\n    [items]\n  );\n\n  // Each polite notification's message element, so the text the region\n  // announces is the text on screen, whatever the message renders.\n  const messageNodesRef = useRef(new Map<string, HTMLElement>());\n  const registerMessage = useCallback(\n    (id: string, node: HTMLElement | null) => {\n      if (node) {\n        messageNodesRef.current.set(id, node);\n      } else {\n        messageNodesRef.current.delete(id);\n      }\n    },\n    []\n  );\n  // StatusRegion only describes polite notifications that are on screen, and\n  // each of those registered its message element when it mounted. The\n  // fallback is for a notification announced without being rendered, should\n  // the container ever render fewer than it announces: a plain-text message\n  // still says itself, and anything else is skipped.\n  const describe = useCallback((item: NotificationInstance) => {\n    const node = messageNodesRef.current.get(item.id);\n    /* istanbul ignore if: every polite notification on screen registers its message element when it mounts */\n    if (!node) {\n      const { message } = item.options;\n      return typeof message === 'string' ? message : null;\n    }\n    return spokenText(node);\n  }, []);\n\n  if (typeof document === 'undefined' || !isHydrated) {\n    return null;\n  }\n\n  const stacks = groupIntoPositionStacks(\n    items,\n    item => item.options.position,\n    position,\n    notificationStackOrder\n  );\n\n  return createPortal(\n    <>\n      {stacks.map(stack => (\n        <div key={stack.key} style={notificationStackStyle(stack.position)}>\n          {stack.items.map(item => (\n            <NotificationItem\n              key={item.id}\n              instance={item}\n              onClose={notification.close}\n              registerMessage={registerMessage}\n            />\n          ))}\n        </div>\n      ))}\n      <StatusRegion items={politeItems} describe={describe} />\n    </>,\n    document.body\n  );\n};\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

package/dist/esm/form/Autocomplete.js

@@ -37,11 +37,14 @@ const Autocomplete = forwardRef(({ data = [], value: controlledValue, placeholde
 // Field props
 label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, className, ...props }, ref) => {
     const insideField = useInsideField();
-    const { controlId, fieldLabelProps } = useAutoLabelId({
+    // The suggestion list points `aria-labelledby` at the label that names
+    // the input, so it needs that label's id.
+    const { controlId, fieldLabelProps, labelId: listLabelId, } = useAutoLabelId({
         label,
         id,
         labelProps,
         rendersLabel: !insideField,
+        needsLabelId: true,
     });
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const { classPrefix } = useConfig();
@@ -244,12 +247,11 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     const controlLoading = useControlLoading();
     const showClear = clearable && !!inputValue && !disabled && !loading && !controlLoading;
     // The combobox controls its listbox and points at the highlighted option.
-    // The listbox takes its name from the label this renders, or a fallback
-    // when it renders none.
+    // The listbox takes its name from the label that names the combobox, the
+    // one this renders or a surrounding Field's, so the two say the same
+    // thing. When no label names the combobox, or the one that does has no
+    // id to point at, the list keeps a fallback name.
     const listOpen = isActive && (filteredData.length > 0 || !!empty);
-    const listLabelId = !insideField && label
-        ? (fieldLabelProps?.id ?? `${listboxId}-label`)
-        : undefined;
     const activeOptionId = listOpen &&
         highlightedIndex >= 0 &&
         highlightedIndex < filteredData.length
@@ -267,9 +269,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
                                     : getDisplayValue(item) }, index));
                         })) : (jsx("div", { className: emptyItemClasses, children: empty })), footer && jsx("div", { className: dropdownFooterClass, children: footer })] }) }))] }));
     if (!insideField) {
-        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: listLabelId
-                ? { ...fieldLabelProps, id: listLabelId }
-                : fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [autocompleteElement, messageEl] }));
+        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [autocompleteElement, messageEl] }));
     }
     return (jsxs(Fragment, { children: [autocompleteElement, messageEl] }));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.js","sources":["../../../src/form/Autocomplete.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useState,\n  useRef,\n  useEffect,\n  useCallback,\n  useId,\n} from 'react';\nimport {\n  classNames,\n  usePrefixedClassNames,\n  prefixedClassNames,\n} from '../helpers/classNames';\nimport { useConfig } from '../helpers/Config';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useInsideField } from './FormContext';\nimport { Field } from './Field';\nimport { FormFieldProps } from './fieldProps';\nimport { useAutoLabelId } from './useAutoLabelId';\nimport { useControlLoading } from './controlLoading';\n\n/**\n * An item in the Autocomplete dropdown list.\n */\nexport interface AutocompleteItem {\n  /** The value used for filtering and selection. */\n  value: string;\n  /** Display label (optional). */\n  label?: string;\n  /** Whether the item is disabled and unselectable. */\n  disabled?: boolean;\n  [key: string]: unknown;\n}\n\n/**\n * Props for the Autocomplete component.\n * @extraProp {string} [className] - Additional CSS classes.\n * @extraProp {React.Ref<HTMLInputElement>} [ref] - Ref forwarded to the input element.\n */\nexport interface AutocompleteProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'onInput'>,\n    Omit<BulmaClassesProps, 'color'>,\n    FormFieldProps {\n  /** Field label. Automatically associated with the text input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`). */\n  label?: React.ReactNode;\n  /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */\n  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n    [key: string]: unknown;\n  };\n  /** Applied to the inner text input (the labellable control), not the wrapper div. */\n  id?: string;\n  /** The options data to display (required). */\n  data: AutocompleteItem[] | string[];\n  /** The current input value (controlled). */\n  value?: string;\n  /** The selected item (controlled). */\n  selected?: AutocompleteItem | string | null;\n  /** Placeholder text for the input. */\n  placeholder?: string;\n  /** Object property to use as the display field. */\n  field?: string;\n  /**\n   * Whether to show a clear button while the input holds a value.\n   * It hides while the input is disabled, and gives way to a loading\n   * spinner at the same right edge: the one `loading` draws, or that of a\n   * `Control` with `isLoading` around the Autocomplete.\n   */\n  clearable?: boolean;\n  /** Open dropdown when input is focused. */\n  openOnFocus?: boolean;\n  /** Keep first option highlighted. */\n  keepFirst?: boolean;\n  /** Keep dropdown open after selection. */\n  keepOpen?: boolean;\n  /** Select highlighted item on click outside. */\n  selectOnClickOutside?: boolean;\n  /** Maximum dropdown height in pixels. */\n  maxHeight?: number;\n  /** Render as dropdown style. */\n  dropdown?: boolean;\n  /**\n   * Show a loading spinner in the input.\n   * Under `prefers-reduced-motion: reduce` the spinner stops and stays\n   * drawn (with bestax's CSS loaded).\n   */\n  loading?: boolean;\n  /** Whether the input is disabled. */\n  disabled?: boolean;\n  /** Enables infinite scroll detection in the dropdown. */\n  checkInfiniteScroll?: boolean;\n  /** Distance in pixels from the bottom to trigger `onInfiniteScroll`. */\n  infiniteScrollDistance?: number;\n  /** Input color variant. */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** Size variant. */\n  size?: 'small' | 'medium' | 'large';\n  /** Form field name. Forwarded to the inner `<input>`. */\n  name?: string;\n  /** Optional id of the form the input belongs to. */\n  form?: string;\n  /** Marks the field as required for native HTML form validation. */\n  required?: boolean;\n  /** Callback when input value changes. */\n  onInput?: (value: string) => void;\n  /** Callback when item is selected. */\n  onSelect?: (item: AutocompleteItem | string | null) => void;\n  /** Callback when dropdown active state changes. */\n  onActiveChange?: (active: boolean) => void;\n  /** Callback when scrolled to bottom (infinite scroll). */\n  onInfiniteScroll?: () => void;\n  /** Custom render for items. */\n  itemTemplate?: (item: AutocompleteItem | string) => React.ReactNode;\n  /** Custom header in dropdown. */\n  header?: React.ReactNode;\n  /** Custom footer in dropdown. */\n  footer?: React.ReactNode;\n  /** Content to show when no results. */\n  empty?: React.ReactNode;\n}\n\n/**\n * The `Autocomplete` component provides an input field with dropdown suggestions that filter based on user input.\n *\n * @function\n * @param {AutocompleteProps} props - Props for the Autocomplete component.\n * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the input element.\n * @returns {JSX.Element} The rendered autocomplete component.\n *\n * @example\n * // Basic usage with string array\n * <Autocomplete\n *   data={['Apple', 'Banana', 'Cherry']}\n *   placeholder=\"Search fruit...\"\n *   onSelect={(item) => console.log(item)}\n * />\n *\n * @example\n * // With object data\n * <Autocomplete\n *   data={[{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }]}\n *   field=\"label\"\n *   onSelect={(item) => console.log(item)}\n * />\n */\nexport const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(\n  (\n    {\n      data = [],\n      value: controlledValue,\n      placeholder,\n      field = 'label',\n      clearable = false,\n      openOnFocus = false,\n      keepFirst = false,\n      keepOpen = false,\n      selectOnClickOutside = false,\n      maxHeight = 200,\n      loading = false,\n      disabled = false,\n      checkInfiniteScroll = false,\n      infiniteScrollDistance = 50,\n      color,\n      size,\n      onInput,\n      onSelect,\n      onActiveChange,\n      onInfiniteScroll,\n      itemTemplate,\n      header,\n      footer,\n      empty,\n      name,\n      form,\n      required,\n      id,\n      // Field props\n      label,\n      labelSize,\n      labelProps,\n      horizontal,\n      message,\n      messageColor,\n      fieldClassName,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const insideField = useInsideField();\n    const { controlId, fieldLabelProps } = useAutoLabelId({\n      label,\n      id,\n      labelProps,\n      rendersLabel: !insideField,\n    });\n    const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n    const { classPrefix } = useConfig();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const dropdownRef = useRef<HTMLDivElement>(null);\n\n    const [internalValue, setInternalValue] = useState('');\n    const [isActive, setIsActive] = useState(false);\n    const [highlightedIndex, setHighlightedIndex] = useState(-1);\n    const listboxId = `${useId()}-listbox`;\n\n    // Use controlled or internal value\n    const inputValue =\n      controlledValue !== undefined ? controlledValue : internalValue;\n\n    // Get display value from item\n    const getDisplayValue = (item: AutocompleteItem | string): string => {\n      if (typeof item === 'string') return item;\n      const fieldValue = item[field];\n      if (typeof fieldValue === 'string') return fieldValue;\n      return item.value || '';\n    };\n\n    // Filter data based on input\n    const filteredData = data.filter(item => {\n      const displayValue = getDisplayValue(item);\n      return displayValue.toLowerCase().includes(inputValue.toLowerCase());\n    });\n\n    // Handle input change\n    const handleInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const newValue = e.target.value;\n        if (controlledValue === undefined) {\n          setInternalValue(newValue);\n        }\n        onInput?.(newValue);\n        if (!isActive && newValue) {\n          setIsActive(true);\n        }\n      },\n      [controlledValue, isActive, onInput]\n    );\n\n    // Handle item selection\n    const handleSelect = useCallback(\n      (item: AutocompleteItem | string) => {\n        if (typeof item !== 'string' && item.disabled) return;\n\n        const displayValue = getDisplayValue(item);\n        if (controlledValue === undefined) {\n          setInternalValue(displayValue);\n        }\n        onInput?.(displayValue);\n        onSelect?.(item);\n\n        if (!keepOpen) {\n          setIsActive(false);\n        }\n        setHighlightedIndex(-1);\n      },\n      [controlledValue, field, keepOpen, onInput, onSelect]\n    );\n\n    // Handle clear\n    const handleClear = useCallback(() => {\n      if (controlledValue === undefined) {\n        setInternalValue('');\n      }\n      onInput?.('');\n      onSelect?.(null);\n      inputRef.current?.focus();\n    }, [controlledValue, onInput, onSelect]);\n\n    // Handle focus\n    const handleFocus = useCallback(() => {\n      if (openOnFocus && !disabled) {\n        setIsActive(true);\n      }\n    }, [openOnFocus, disabled]);\n\n    // Handle blur (click outside)\n    useEffect(() => {\n      if (!isActive) return undefined;\n\n      const handleClickOutside = (e: MouseEvent) => {\n        if (!containerRef.current) return;\n\n        // Use composedPath() to correctly detect clicks inside Shadow DOM\n        const path = e.composedPath();\n        const isInside = path.includes(containerRef.current);\n\n        if (!isInside) {\n          if (selectOnClickOutside && highlightedIndex >= 0) {\n            handleSelect(filteredData[highlightedIndex]);\n          }\n          setIsActive(false);\n        }\n      };\n\n      document.addEventListener('mousedown', handleClickOutside);\n      return () =>\n        document.removeEventListener('mousedown', handleClickOutside);\n    }, [\n      isActive,\n      selectOnClickOutside,\n      highlightedIndex,\n      filteredData,\n      handleSelect,\n    ]);\n\n    // Notify active state change\n    useEffect(() => {\n      onActiveChange?.(isActive);\n    }, [isActive, onActiveChange]);\n\n    // Keep first highlighted\n    useEffect(() => {\n      if (keepFirst && isActive && filteredData.length > 0) {\n        setHighlightedIndex(0);\n      }\n    }, [keepFirst, isActive, filteredData.length, inputValue]);\n\n    // Handle keyboard navigation\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent) => {\n        if (disabled) return;\n\n        switch (e.key) {\n          case 'ArrowDown':\n            e.preventDefault();\n            if (!isActive) {\n              setIsActive(true);\n            } else {\n              setHighlightedIndex(prev =>\n                prev < filteredData.length - 1 ? prev + 1 : prev\n              );\n            }\n            break;\n          case 'ArrowUp':\n            e.preventDefault();\n            setHighlightedIndex(prev => (prev > 0 ? prev - 1 : prev));\n            break;\n          case 'Enter':\n            e.preventDefault();\n            if (highlightedIndex >= 0 && filteredData[highlightedIndex]) {\n              handleSelect(filteredData[highlightedIndex]);\n            }\n            break;\n          case 'Escape':\n            e.preventDefault();\n            setIsActive(false);\n            setHighlightedIndex(-1);\n            break;\n          case 'Tab':\n            if (highlightedIndex >= 0 && filteredData[highlightedIndex]) {\n              handleSelect(filteredData[highlightedIndex]);\n            }\n            setIsActive(false);\n            break;\n        }\n      },\n      [disabled, isActive, highlightedIndex, filteredData, handleSelect]\n    );\n\n    // Handle dropdown scroll for infinite scroll\n    const handleDropdownScroll = useCallback(() => {\n      if (!checkInfiniteScroll || !dropdownRef.current) return;\n\n      const { scrollTop, scrollHeight, clientHeight } = dropdownRef.current;\n      if (scrollHeight - scrollTop - clientHeight <= infiniteScrollDistance) {\n        onInfiniteScroll?.();\n      }\n    }, [checkInfiniteScroll, infiniteScrollDistance, onInfiniteScroll]);\n\n    // Scroll highlighted item into view\n    useEffect(() => {\n      if (highlightedIndex >= 0 && dropdownRef.current) {\n        const highlightedEl = dropdownRef.current.querySelector(\n          `[data-index=\"${highlightedIndex}\"]`\n        );\n        if (\n          highlightedEl &&\n          typeof highlightedEl.scrollIntoView === 'function'\n        ) {\n          highlightedEl.scrollIntoView({ block: 'nearest' });\n        }\n      }\n    }, [highlightedIndex]);\n\n    // Combined ref\n    const combinedRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n          node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLInputElement | null>).current =\n            node;\n        }\n      },\n      [ref]\n    );\n\n    // Generate classes\n    const autocompleteClasses = usePrefixedClassNames('autocomplete', {\n      'is-active': isActive,\n      [`is-${size}`]: !!size,\n    });\n\n    const inputClasses = usePrefixedClassNames('input', {\n      [`is-${color}`]: !!color,\n      [`is-${size}`]: !!size,\n      'is-loading': loading,\n    });\n\n    const controlClasses = usePrefixedClassNames(\n      'control',\n      'is-expanded',\n      'has-icons-right'\n    );\n\n    const dropdownMenuClasses = usePrefixedClassNames('dropdown-menu', {\n      'is-active': isActive && (filteredData.length > 0 || !!empty),\n    });\n\n    const dropdownContentClass = usePrefixedClassNames('dropdown-content');\n    const dropdownHeaderClass = usePrefixedClassNames('dropdown-header');\n    const dropdownFooterClass = usePrefixedClassNames('dropdown-footer');\n    const emptyItemClasses = usePrefixedClassNames(\n      'dropdown-item',\n      'has-text-grey'\n    );\n\n    const iconRightClickableClass = usePrefixedClassNames(\n      'icon',\n      'is-right',\n      'is-clickable'\n    );\n    const iconRightClass = usePrefixedClassNames('icon', 'is-right');\n    const loaderClass = usePrefixedClassNames('loader', 'is-loading');\n\n    const combinedClasses = classNames(\n      autocompleteClasses,\n      bulmaHelperClasses,\n      className\n    );\n\n    const helpClass = usePrefixedClassNames('help', {\n      [`is-${messageColor}`]: !!messageColor,\n    });\n    const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n    // The clear button gives way to a spinner at its spot: the `loading` one,\n    // or that of a loading Control this sits in.\n    const controlLoading = useControlLoading();\n    const showClear =\n      clearable && !!inputValue && !disabled && !loading && !controlLoading;\n\n    // The combobox controls its listbox and points at the highlighted option.\n    // The listbox takes its name from the label this renders, or a fallback\n    // when it renders none.\n    const listOpen = isActive && (filteredData.length > 0 || !!empty);\n    const listLabelId =\n      !insideField && label\n        ? ((fieldLabelProps?.id as string | undefined) ?? `${listboxId}-label`)\n        : undefined;\n    const activeOptionId =\n      listOpen &&\n      highlightedIndex >= 0 &&\n      highlightedIndex < filteredData.length\n        ? `${listboxId}-${highlightedIndex}`\n        : undefined;\n\n    const autocompleteElement = (\n      <div ref={containerRef} className={combinedClasses} {...rest}>\n        <div className={controlClasses}>\n          <input\n            ref={combinedRef}\n            type=\"text\"\n            className={inputClasses}\n            id={controlId}\n            value={inputValue}\n            placeholder={placeholder}\n            disabled={disabled}\n            name={name}\n            form={form}\n            required={required}\n            onChange={handleInputChange}\n            onFocus={handleFocus}\n            onKeyDown={handleKeyDown}\n            role=\"combobox\"\n            aria-expanded={listOpen}\n            aria-controls={listOpen ? listboxId : undefined}\n            aria-activedescendant={activeOptionId}\n            aria-haspopup=\"listbox\"\n            aria-autocomplete=\"list\"\n            autoComplete=\"off\"\n          />\n          {showClear && (\n            <button\n              type=\"button\"\n              className={iconRightClickableClass}\n              onClick={handleClear}\n              aria-label=\"Clear\"\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                width=\"16\"\n                height=\"16\"\n                aria-hidden=\"true\"\n              >\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n              </svg>\n            </button>\n          )}\n          {loading && (\n            <span className={iconRightClass}>\n              <span className={loaderClass} />\n            </span>\n          )}\n        </div>\n\n        {listOpen && (\n          <div className={dropdownMenuClasses}>\n            <div\n              ref={dropdownRef}\n              className={dropdownContentClass}\n              style={{ maxHeight: `${maxHeight}px`, overflowY: 'auto' }}\n              id={listboxId}\n              role=\"listbox\"\n              aria-labelledby={listLabelId}\n              aria-label={listLabelId ? undefined : 'Suggestions'}\n              onScroll={handleDropdownScroll}\n            >\n              {header && <div className={dropdownHeaderClass}>{header}</div>}\n\n              {filteredData.length > 0 ? (\n                filteredData.map((item, index) => {\n                  const isDisabled = typeof item !== 'string' && item.disabled;\n                  const isHighlighted = index === highlightedIndex;\n\n                  const itemClasses = prefixedClassNames(\n                    classPrefix,\n                    'dropdown-item',\n                    {\n                      'is-active': isHighlighted,\n                      'is-disabled': isDisabled,\n                    }\n                  );\n\n                  return (\n                    <a\n                      key={index}\n                      id={`${listboxId}-${index}`}\n                      data-index={index}\n                      className={itemClasses}\n                      onClick={() => !isDisabled && handleSelect(item)}\n                      onMouseEnter={() =>\n                        !isDisabled && setHighlightedIndex(index)\n                      }\n                      role=\"option\"\n                      aria-selected={isHighlighted}\n                      aria-disabled={isDisabled}\n                    >\n                      {itemTemplate\n                        ? itemTemplate(item)\n                        : getDisplayValue(item)}\n                    </a>\n                  );\n                })\n              ) : (\n                <div className={emptyItemClasses}>{empty}</div>\n              )}\n\n              {footer && <div className={dropdownFooterClass}>{footer}</div>}\n            </div>\n          </div>\n        )}\n      </div>\n    );\n\n    if (!insideField) {\n      return (\n        <Field\n          label={label}\n          labelSize={labelSize}\n          labelProps={\n            listLabelId\n              ? { ...fieldLabelProps, id: listLabelId }\n              : fieldLabelProps\n          }\n          horizontal={horizontal}\n          className={fieldClassName}\n        >\n          {autocompleteElement}\n          {messageEl}\n        </Field>\n      );\n    }\n\n    return (\n      <>\n        {autocompleteElement}\n        {messageEl}\n      </>\n    );\n  }\n);\n\nAutocomplete.displayName = 'Autocomplete';\n\nexport default Autocomplete;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"Autocomplete.js","sources":["../../../src/form/Autocomplete.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useState,\n  useRef,\n  useEffect,\n  useCallback,\n  useId,\n} from 'react';\nimport {\n  classNames,\n  usePrefixedClassNames,\n  prefixedClassNames,\n} from '../helpers/classNames';\nimport { useConfig } from '../helpers/Config';\nimport { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';\nimport { useInsideField } from './FormContext';\nimport { Field } from './Field';\nimport { FormFieldProps } from './fieldProps';\nimport { useAutoLabelId } from './useAutoLabelId';\nimport { useControlLoading } from './controlLoading';\n\n/**\n * An item in the Autocomplete dropdown list.\n */\nexport interface AutocompleteItem {\n  /** The value used for filtering and selection. */\n  value: string;\n  /** Display label (optional). */\n  label?: string;\n  /** Whether the item is disabled and unselectable. */\n  disabled?: boolean;\n  [key: string]: unknown;\n}\n\n/**\n * Props for the Autocomplete component.\n * @extraProp {string} [className] - Additional CSS classes.\n * @extraProp {React.Ref<HTMLInputElement>} [ref] - Ref forwarded to the input element.\n */\nexport interface AutocompleteProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'onInput'>,\n    Omit<BulmaClassesProps, 'color'>,\n    FormFieldProps {\n  /** Field label, associated with the text input via `htmlFor`: through your `id` when provided, otherwise a generated one. Dropped inside an outer `Field`, whose label names the input instead when it points at it. The `Field` points its label there itself when the Autocomplete has no `id` and no inner `Field` sits between them (and the `Field` is not `grouped` or `hasAddons`); a label you wire by hand with `labelProps.htmlFor` points at the input with that `id`. The label naming the input also names the open suggestion list, through `aria-labelledby`, when it has an id: this label always does, and an outer `Field`'s does unless you wired it by hand without an `id` in its `labelProps`. Otherwise the list is named \"Suggestions\". */\n  label?: React.ReactNode;\n  /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (the input then gets no generated id). While the label names the input, the suggestion list's `aria-labelledby` points at it, through an `id` here when you give one and a generated one otherwise. */\n  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {\n    [key: string]: unknown;\n  };\n  /** Applied to the inner text input (the labellable control), not the wrapper div. */\n  id?: string;\n  /** The options data to display (required). */\n  data: AutocompleteItem[] | string[];\n  /** The current input value (controlled). */\n  value?: string;\n  /** The selected item (controlled). */\n  selected?: AutocompleteItem | string | null;\n  /** Placeholder text for the input. */\n  placeholder?: string;\n  /** Object property to use as the display field. */\n  field?: string;\n  /**\n   * Whether to show a clear button while the input holds a value.\n   * It hides while the input is disabled, and gives way to a loading\n   * spinner at the same right edge: the one `loading` draws, or that of a\n   * `Control` with `isLoading` around the Autocomplete.\n   */\n  clearable?: boolean;\n  /** Open dropdown when input is focused. */\n  openOnFocus?: boolean;\n  /** Keep first option highlighted. */\n  keepFirst?: boolean;\n  /** Keep dropdown open after selection. */\n  keepOpen?: boolean;\n  /** Select highlighted item on click outside. */\n  selectOnClickOutside?: boolean;\n  /** Maximum dropdown height in pixels. */\n  maxHeight?: number;\n  /** Render as dropdown style. */\n  dropdown?: boolean;\n  /**\n   * Show a loading spinner in the input.\n   * Under `prefers-reduced-motion: reduce` the spinner stops and stays\n   * drawn (with bestax's CSS loaded).\n   */\n  loading?: boolean;\n  /** Whether the input is disabled. */\n  disabled?: boolean;\n  /** Enables infinite scroll detection in the dropdown. */\n  checkInfiniteScroll?: boolean;\n  /** Distance in pixels from the bottom to trigger `onInfiniteScroll`. */\n  infiniteScrollDistance?: number;\n  /** Input color variant. */\n  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';\n  /** Size variant. */\n  size?: 'small' | 'medium' | 'large';\n  /** Form field name. Forwarded to the inner `<input>`. */\n  name?: string;\n  /** Optional id of the form the input belongs to. */\n  form?: string;\n  /** Marks the field as required for native HTML form validation. */\n  required?: boolean;\n  /** Callback when input value changes. */\n  onInput?: (value: string) => void;\n  /** Callback when item is selected. */\n  onSelect?: (item: AutocompleteItem | string | null) => void;\n  /** Callback when dropdown active state changes. */\n  onActiveChange?: (active: boolean) => void;\n  /** Callback when scrolled to bottom (infinite scroll). */\n  onInfiniteScroll?: () => void;\n  /** Custom render for items. */\n  itemTemplate?: (item: AutocompleteItem | string) => React.ReactNode;\n  /** Custom header in dropdown. */\n  header?: React.ReactNode;\n  /** Custom footer in dropdown. */\n  footer?: React.ReactNode;\n  /** Content to show when no results. */\n  empty?: React.ReactNode;\n}\n\n/**\n * The `Autocomplete` component provides an input field with dropdown suggestions that filter based on user input.\n *\n * @function\n * @param {AutocompleteProps} props - Props for the Autocomplete component.\n * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the input element.\n * @returns {JSX.Element} The rendered autocomplete component.\n *\n * @example\n * // Basic usage with string array\n * <Autocomplete\n *   data={['Apple', 'Banana', 'Cherry']}\n *   placeholder=\"Search fruit...\"\n *   onSelect={(item) => console.log(item)}\n * />\n *\n * @example\n * // With object data\n * <Autocomplete\n *   data={[{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }]}\n *   field=\"label\"\n *   onSelect={(item) => console.log(item)}\n * />\n */\nexport const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(\n  (\n    {\n      data = [],\n      value: controlledValue,\n      placeholder,\n      field = 'label',\n      clearable = false,\n      openOnFocus = false,\n      keepFirst = false,\n      keepOpen = false,\n      selectOnClickOutside = false,\n      maxHeight = 200,\n      loading = false,\n      disabled = false,\n      checkInfiniteScroll = false,\n      infiniteScrollDistance = 50,\n      color,\n      size,\n      onInput,\n      onSelect,\n      onActiveChange,\n      onInfiniteScroll,\n      itemTemplate,\n      header,\n      footer,\n      empty,\n      name,\n      form,\n      required,\n      id,\n      // Field props\n      label,\n      labelSize,\n      labelProps,\n      horizontal,\n      message,\n      messageColor,\n      fieldClassName,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const insideField = useInsideField();\n    // The suggestion list points `aria-labelledby` at the label that names\n    // the input, so it needs that label's id.\n    const {\n      controlId,\n      fieldLabelProps,\n      labelId: listLabelId,\n    } = useAutoLabelId({\n      label,\n      id,\n      labelProps,\n      rendersLabel: !insideField,\n      needsLabelId: true,\n    });\n    const { bulmaHelperClasses, rest } = useBulmaClasses(props);\n    const { classPrefix } = useConfig();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const dropdownRef = useRef<HTMLDivElement>(null);\n\n    const [internalValue, setInternalValue] = useState('');\n    const [isActive, setIsActive] = useState(false);\n    const [highlightedIndex, setHighlightedIndex] = useState(-1);\n    const listboxId = `${useId()}-listbox`;\n\n    // Use controlled or internal value\n    const inputValue =\n      controlledValue !== undefined ? controlledValue : internalValue;\n\n    // Get display value from item\n    const getDisplayValue = (item: AutocompleteItem | string): string => {\n      if (typeof item === 'string') return item;\n      const fieldValue = item[field];\n      if (typeof fieldValue === 'string') return fieldValue;\n      return item.value || '';\n    };\n\n    // Filter data based on input\n    const filteredData = data.filter(item => {\n      const displayValue = getDisplayValue(item);\n      return displayValue.toLowerCase().includes(inputValue.toLowerCase());\n    });\n\n    // Handle input change\n    const handleInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const newValue = e.target.value;\n        if (controlledValue === undefined) {\n          setInternalValue(newValue);\n        }\n        onInput?.(newValue);\n        if (!isActive && newValue) {\n          setIsActive(true);\n        }\n      },\n      [controlledValue, isActive, onInput]\n    );\n\n    // Handle item selection\n    const handleSelect = useCallback(\n      (item: AutocompleteItem | string) => {\n        if (typeof item !== 'string' && item.disabled) return;\n\n        const displayValue = getDisplayValue(item);\n        if (controlledValue === undefined) {\n          setInternalValue(displayValue);\n        }\n        onInput?.(displayValue);\n        onSelect?.(item);\n\n        if (!keepOpen) {\n          setIsActive(false);\n        }\n        setHighlightedIndex(-1);\n      },\n      [controlledValue, field, keepOpen, onInput, onSelect]\n    );\n\n    // Handle clear\n    const handleClear = useCallback(() => {\n      if (controlledValue === undefined) {\n        setInternalValue('');\n      }\n      onInput?.('');\n      onSelect?.(null);\n      inputRef.current?.focus();\n    }, [controlledValue, onInput, onSelect]);\n\n    // Handle focus\n    const handleFocus = useCallback(() => {\n      if (openOnFocus && !disabled) {\n        setIsActive(true);\n      }\n    }, [openOnFocus, disabled]);\n\n    // Handle blur (click outside)\n    useEffect(() => {\n      if (!isActive) return undefined;\n\n      const handleClickOutside = (e: MouseEvent) => {\n        if (!containerRef.current) return;\n\n        // Use composedPath() to correctly detect clicks inside Shadow DOM\n        const path = e.composedPath();\n        const isInside = path.includes(containerRef.current);\n\n        if (!isInside) {\n          if (selectOnClickOutside && highlightedIndex >= 0) {\n            handleSelect(filteredData[highlightedIndex]);\n          }\n          setIsActive(false);\n        }\n      };\n\n      document.addEventListener('mousedown', handleClickOutside);\n      return () =>\n        document.removeEventListener('mousedown', handleClickOutside);\n    }, [\n      isActive,\n      selectOnClickOutside,\n      highlightedIndex,\n      filteredData,\n      handleSelect,\n    ]);\n\n    // Notify active state change\n    useEffect(() => {\n      onActiveChange?.(isActive);\n    }, [isActive, onActiveChange]);\n\n    // Keep first highlighted\n    useEffect(() => {\n      if (keepFirst && isActive && filteredData.length > 0) {\n        setHighlightedIndex(0);\n      }\n    }, [keepFirst, isActive, filteredData.length, inputValue]);\n\n    // Handle keyboard navigation\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent) => {\n        if (disabled) return;\n\n        switch (e.key) {\n          case 'ArrowDown':\n            e.preventDefault();\n            if (!isActive) {\n              setIsActive(true);\n            } else {\n              setHighlightedIndex(prev =>\n                prev < filteredData.length - 1 ? prev + 1 : prev\n              );\n            }\n            break;\n          case 'ArrowUp':\n            e.preventDefault();\n            setHighlightedIndex(prev => (prev > 0 ? prev - 1 : prev));\n            break;\n          case 'Enter':\n            e.preventDefault();\n            if (highlightedIndex >= 0 && filteredData[highlightedIndex]) {\n              handleSelect(filteredData[highlightedIndex]);\n            }\n            break;\n          case 'Escape':\n            e.preventDefault();\n            setIsActive(false);\n            setHighlightedIndex(-1);\n            break;\n          case 'Tab':\n            if (highlightedIndex >= 0 && filteredData[highlightedIndex]) {\n              handleSelect(filteredData[highlightedIndex]);\n            }\n            setIsActive(false);\n            break;\n        }\n      },\n      [disabled, isActive, highlightedIndex, filteredData, handleSelect]\n    );\n\n    // Handle dropdown scroll for infinite scroll\n    const handleDropdownScroll = useCallback(() => {\n      if (!checkInfiniteScroll || !dropdownRef.current) return;\n\n      const { scrollTop, scrollHeight, clientHeight } = dropdownRef.current;\n      if (scrollHeight - scrollTop - clientHeight <= infiniteScrollDistance) {\n        onInfiniteScroll?.();\n      }\n    }, [checkInfiniteScroll, infiniteScrollDistance, onInfiniteScroll]);\n\n    // Scroll highlighted item into view\n    useEffect(() => {\n      if (highlightedIndex >= 0 && dropdownRef.current) {\n        const highlightedEl = dropdownRef.current.querySelector(\n          `[data-index=\"${highlightedIndex}\"]`\n        );\n        if (\n          highlightedEl &&\n          typeof highlightedEl.scrollIntoView === 'function'\n        ) {\n          highlightedEl.scrollIntoView({ block: 'nearest' });\n        }\n      }\n    }, [highlightedIndex]);\n\n    // Combined ref\n    const combinedRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n          node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLInputElement | null>).current =\n            node;\n        }\n      },\n      [ref]\n    );\n\n    // Generate classes\n    const autocompleteClasses = usePrefixedClassNames('autocomplete', {\n      'is-active': isActive,\n      [`is-${size}`]: !!size,\n    });\n\n    const inputClasses = usePrefixedClassNames('input', {\n      [`is-${color}`]: !!color,\n      [`is-${size}`]: !!size,\n      'is-loading': loading,\n    });\n\n    const controlClasses = usePrefixedClassNames(\n      'control',\n      'is-expanded',\n      'has-icons-right'\n    );\n\n    const dropdownMenuClasses = usePrefixedClassNames('dropdown-menu', {\n      'is-active': isActive && (filteredData.length > 0 || !!empty),\n    });\n\n    const dropdownContentClass = usePrefixedClassNames('dropdown-content');\n    const dropdownHeaderClass = usePrefixedClassNames('dropdown-header');\n    const dropdownFooterClass = usePrefixedClassNames('dropdown-footer');\n    const emptyItemClasses = usePrefixedClassNames(\n      'dropdown-item',\n      'has-text-grey'\n    );\n\n    const iconRightClickableClass = usePrefixedClassNames(\n      'icon',\n      'is-right',\n      'is-clickable'\n    );\n    const iconRightClass = usePrefixedClassNames('icon', 'is-right');\n    const loaderClass = usePrefixedClassNames('loader', 'is-loading');\n\n    const combinedClasses = classNames(\n      autocompleteClasses,\n      bulmaHelperClasses,\n      className\n    );\n\n    const helpClass = usePrefixedClassNames('help', {\n      [`is-${messageColor}`]: !!messageColor,\n    });\n    const messageEl = message ? <p className={helpClass}>{message}</p> : null;\n\n    // The clear button gives way to a spinner at its spot: the `loading` one,\n    // or that of a loading Control this sits in.\n    const controlLoading = useControlLoading();\n    const showClear =\n      clearable && !!inputValue && !disabled && !loading && !controlLoading;\n\n    // The combobox controls its listbox and points at the highlighted option.\n    // The listbox takes its name from the label that names the combobox, the\n    // one this renders or a surrounding Field's, so the two say the same\n    // thing. When no label names the combobox, or the one that does has no\n    // id to point at, the list keeps a fallback name.\n    const listOpen = isActive && (filteredData.length > 0 || !!empty);\n    const activeOptionId =\n      listOpen &&\n      highlightedIndex >= 0 &&\n      highlightedIndex < filteredData.length\n        ? `${listboxId}-${highlightedIndex}`\n        : undefined;\n\n    const autocompleteElement = (\n      <div ref={containerRef} className={combinedClasses} {...rest}>\n        <div className={controlClasses}>\n          <input\n            ref={combinedRef}\n            type=\"text\"\n            className={inputClasses}\n            id={controlId}\n            value={inputValue}\n            placeholder={placeholder}\n            disabled={disabled}\n            name={name}\n            form={form}\n            required={required}\n            onChange={handleInputChange}\n            onFocus={handleFocus}\n            onKeyDown={handleKeyDown}\n            role=\"combobox\"\n            aria-expanded={listOpen}\n            aria-controls={listOpen ? listboxId : undefined}\n            aria-activedescendant={activeOptionId}\n            aria-haspopup=\"listbox\"\n            aria-autocomplete=\"list\"\n            autoComplete=\"off\"\n          />\n          {showClear && (\n            <button\n              type=\"button\"\n              className={iconRightClickableClass}\n              onClick={handleClear}\n              aria-label=\"Clear\"\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                width=\"16\"\n                height=\"16\"\n                aria-hidden=\"true\"\n              >\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n              </svg>\n            </button>\n          )}\n          {loading && (\n            <span className={iconRightClass}>\n              <span className={loaderClass} />\n            </span>\n          )}\n        </div>\n\n        {listOpen && (\n          <div className={dropdownMenuClasses}>\n            <div\n              ref={dropdownRef}\n              className={dropdownContentClass}\n              style={{ maxHeight: `${maxHeight}px`, overflowY: 'auto' }}\n              id={listboxId}\n              role=\"listbox\"\n              aria-labelledby={listLabelId}\n              aria-label={listLabelId ? undefined : 'Suggestions'}\n              onScroll={handleDropdownScroll}\n            >\n              {header && <div className={dropdownHeaderClass}>{header}</div>}\n\n              {filteredData.length > 0 ? (\n                filteredData.map((item, index) => {\n                  const isDisabled = typeof item !== 'string' && item.disabled;\n                  const isHighlighted = index === highlightedIndex;\n\n                  const itemClasses = prefixedClassNames(\n                    classPrefix,\n                    'dropdown-item',\n                    {\n                      'is-active': isHighlighted,\n                      'is-disabled': isDisabled,\n                    }\n                  );\n\n                  return (\n                    <a\n                      key={index}\n                      id={`${listboxId}-${index}`}\n                      data-index={index}\n                      className={itemClasses}\n                      onClick={() => !isDisabled && handleSelect(item)}\n                      onMouseEnter={() =>\n                        !isDisabled && setHighlightedIndex(index)\n                      }\n                      role=\"option\"\n                      aria-selected={isHighlighted}\n                      aria-disabled={isDisabled}\n                    >\n                      {itemTemplate\n                        ? itemTemplate(item)\n                        : getDisplayValue(item)}\n                    </a>\n                  );\n                })\n              ) : (\n                <div className={emptyItemClasses}>{empty}</div>\n              )}\n\n              {footer && <div className={dropdownFooterClass}>{footer}</div>}\n            </div>\n          </div>\n        )}\n      </div>\n    );\n\n    if (!insideField) {\n      return (\n        <Field\n          label={label}\n          labelSize={labelSize}\n          labelProps={fieldLabelProps}\n          horizontal={horizontal}\n          className={fieldClassName}\n        >\n          {autocompleteElement}\n          {messageEl}\n        </Field>\n      );\n    }\n\n    return (\n      <>\n        {autocompleteElement}\n        {messageEl}\n      </>\n    );\n  }\n);\n\nAutocomplete.displayName = 'Autocomplete';\n\nexport default Autocomplete;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/esm/form/DateRangeInputBase.js

@@ -11,6 +11,7 @@ import { PickerPopover } from './_pickerInternals/PickerPopover.js';
 import { useNativeMobilePicker } from './_pickerInternals/useNativeMobilePicker.js';
 import { useSegmentedEntry } from './_pickerInternals/useSegmentedEntry.js';
 import { useControlLoading } from './controlLoading.js';
+import { useAutoLabelledBy } from './useAutoLabelId.js';
 import { Icon } from '../elements/Icon.js';
 
 const EMPTY_RANGE = [null, null];
@@ -21,6 +22,11 @@ const today = () => startOfDay(new Date());
 /**
  * Raw DateRangeInput: the two inputs and the popover calendar without
  * Field/Control wrapping. Use `DateRangeInput` for the convenience wrapper.
+ * Composed in a labeled `Field`, its `role="group"` root points
+ * `aria-labelledby` at that `Field`'s label, `inline` too, as the wrapper's
+ * does, and each input keeps its own name. An `aria-label` or
+ * `aria-labelledby` you give it wins over the label, and an `aria-labelledby`
+ * key counts even when undefined, since it is spread over the group's own.
  *
  * @function
  * @param {DateRangeInputBaseProps} props
@@ -61,6 +67,15 @@ const DateRangeInputBase = forwardRef((props, ref) => {
     const reactId = useId();
     const popoverId = id ? `${id}-popover` : `picker-${reactId}`;
     const { bulmaHelperClasses, rest: cleanRest } = useBulmaClasses(rest);
+    // Two inputs can't share a labeled Field's `for`, so inside one the group
+    // points `aria-labelledby` at that Field's label, as `DateRangeInput`
+    // does, in every mode. A name the caller gave the group wins, and so does
+    // the `aria-labelledby` that wrapper always passes, so it decides there.
+    const { ariaLabelledBy } = useAutoLabelledBy({
+        label: undefined,
+        rendersLabel: false,
+        callerProps: rest,
+    });
     const { shouldUseNative } = useNativeMobilePicker({
         force: mobileNative === 'auto' ? undefined : mobileNative,
     });
@@ -249,14 +264,14 @@ const DateRangeInputBase = forwardRef((props, ref) => {
         };
         const minIso = min ? isoDay(lowerBound) : undefined;
         const maxIso = max ? isoDay(max) : undefined;
-        return (jsxs("div", { ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: onFocus, onFocusCapture: onFocusCapture, children: [jsxs("div", { className: fieldClass, children: [jsx("input", { ref: combinedRef, type: "date", id: id, "aria-label": t.rangeStart, className: inputClass, value: isoDay(start), onChange: nativeChange(commitStart, isBlockedDay), min: minIso, max: maxIso, disabled: disabled, readOnly: readOnly, required: required }), separator, jsx("input", { ref: endRef, type: "date", id: id ? `${id}-end` : undefined, "aria-label": t.rangeEnd, className: inputClass, value: isoDay(end), onChange: nativeChange(commitEnd, isBlockedEnd), min: start ? isoDay(start) : minIso, max: maxIso, disabled: disabled, readOnly: readOnly, required: required })] }), hiddenInputs] }));
+        return (jsxs("div", { "aria-labelledby": ariaLabelledBy, ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: onFocus, onFocusCapture: onFocusCapture, children: [jsxs("div", { className: fieldClass, children: [jsx("input", { ref: combinedRef, type: "date", id: id, "aria-label": t.rangeStart, className: inputClass, value: isoDay(start), onChange: nativeChange(commitStart, isBlockedDay), min: minIso, max: maxIso, disabled: disabled, readOnly: readOnly, required: required }), separator, jsx("input", { ref: endRef, type: "date", id: id ? `${id}-end` : undefined, "aria-label": t.rangeEnd, className: inputClass, value: isoDay(end), onChange: nativeChange(commitEnd, isBlockedEnd), min: start ? isoDay(start) : minIso, max: maxIso, disabled: disabled, readOnly: readOnly, required: required })] }), hiddenInputs] }));
     }
     const calendar = (jsx(Calendar, { range: range, onRangeSelect: handleRangeSelect, allowDisabledInRange: allowDisabledInRange, focusedDate: focusedDate, onFocusedDateChange: setFocusedDate, min: min, max: max, shouldDisableDate: shouldDisableDate, unselectableDates: unselectableDates, firstDayOfWeek: firstDayOfWeek, locale: locale, dayNames: dayNames, monthNames: monthNames, nearbyMonthDays: nearbyMonthDays, color: color, size: size, 
         // The popover panel takes `popoverId`, so the calendar inside it takes
         // one of its own. Inline there is no panel.
         id: inline ? popoverId : `${popoverId}-cal`, autoFocusCell: open, labels: labels }));
     if (inline) {
-        return (jsxs("div", { ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: onFocus, onFocusCapture: onFocusCapture, children: [calendar, hiddenInputs] }));
+        return (jsxs("div", { "aria-labelledby": ariaLabelledBy, ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: onFocus, onFocusCapture: onFocusCapture, children: [calendar, hiddenInputs] }));
     }
     const canOpen = !!popover && !disabled && !readOnly;
     const inputReadOnly = !!readOnly || !editable;
@@ -291,7 +306,7 @@ const DateRangeInputBase = forwardRef((props, ref) => {
         readOnly: inputReadOnly,
         required,
     };
-    return (jsxs("div", { ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: handleFocus, onFocusCapture: handleFocusCapture, children: [jsxs("div", { className: fieldClass, onMouseDown: handleFieldMouseDown, children: [jsx("input", { ...comboboxProps, ref: combinedRef, id: id, "aria-label": t.rangeStart, value: startText, ...startHandlers }), separator, jsx("input", { ...comboboxProps, ref: endRef, id: id ? `${id}-end` : undefined, "aria-label": t.rangeEnd, value: endText, ...endHandlers })] }), popover && triggerIcon && (jsx("button", { type: "button", className: triggerClass, 
+    return (jsxs("div", { "aria-labelledby": ariaLabelledBy, ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: handleFocus, onFocusCapture: handleFocusCapture, children: [jsxs("div", { className: fieldClass, onMouseDown: handleFieldMouseDown, children: [jsx("input", { ...comboboxProps, ref: combinedRef, id: id, "aria-label": t.rangeStart, value: startText, ...startHandlers }), separator, jsx("input", { ...comboboxProps, ref: endRef, id: id ? `${id}-end` : undefined, "aria-label": t.rangeEnd, value: endText, ...endHandlers })] }), popover && triggerIcon && (jsx("button", { type: "button", className: triggerClass, 
                 // Disabled whenever the popover can't open, so a click can.
                 onClick: () => setOpen(!open), disabled: !canOpen, "aria-label": t.chooseDateRange, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsx(PickerPopover, { isOpen: open, onClose: handlePopoverClose, anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: t.chooseDateRange, id: popoverId, restoreFocusRef: restoreFocusRef, initialFocusSelector: CALENDAR_FOCUSED_CELL, children: calendar })), hiddenInputs] }));
 });