@lumx/react 4.9.0-alpha.1 → 4.9.0-alpha.2

package/_internal/{C9YCH96e.js → Dpulze-1.js}

@@ -48,7 +48,7 @@ const CLICK_AWAY_EVENT_TYPES = ['mousedown', 'touchstart'];
  * @returns `true` if the click is outside all elements (i.e. a click away).
  */
 function isClickAway(targets, elements) {
-  return !elements.some(element => targets.some(target => element?.contains(target)));
+  return !elements.some(element => element instanceof Node && targets.some(target => element.contains(target)));
 }
 
 /**
@@ -68,7 +68,7 @@ function setupClickAway(getElements, callback) {
     return undefined;
   }
   const listener = evt => {
-    const targets = [evt.composedPath?.()[0], evt.target];
+    const targets = [evt.composedPath?.()[0], evt.target].filter(t => t instanceof Node);
     const elements = getElements();
     if (isClickAway(targets, elements)) {
       callback(evt);
@@ -192,4 +192,4 @@ const Portal = ({
 };
 
 export { ClickAwayProvider as C, DisabledStateProvider as D, Portal as P, PortalProvider as a, useDisabledStateContext as u };
-//# sourceMappingURL=C9YCH96e.js.map
+//# sourceMappingURL=Dpulze-1.js.map

package/_internal/Dpulze-1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dpulze-1.js","sources":["../../src/utils/disabled/DisabledStateContext.tsx","../../../lumx-core/src/js/utils/ClickAway/index.ts","../../src/hooks/useClickAway.tsx","../../src/utils/ClickAwayProvider/ClickAwayProvider.tsx","../../src/utils/Portal/PortalProvider.tsx","../../src/utils/Portal/Portal.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport { DisabledStateContextValue } from '@lumx/core/js/utils/disabledState';\n\nexport const DisabledStateContext = React.createContext<DisabledStateContextValue>({ state: null });\n\nexport type DisabledStateProviderProps = DisabledStateContextValue & {\n    children: React.ReactNode;\n};\n\n/**\n * Disabled state provider.\n * All nested LumX Design System components inherit this disabled state.\n */\nexport function DisabledStateProvider({ children, ...value }: DisabledStateProviderProps) {\n    return <DisabledStateContext.Provider value={value}>{children}</DisabledStateContext.Provider>;\n}\n\n/**\n * Get DisabledState context value\n */\nexport function useDisabledStateContext(): DisabledStateContextValue {\n    return useContext(DisabledStateContext);\n}\n","/**\n * Shared types and logic for ClickAway detection.\n *\n * ClickAway detects clicks outside a set of elements and triggers a callback.\n * The core logic (event listening + target checking) is framework-agnostic.\n * Framework-specific wrappers (React hook, Vue composable) and context providers\n * (React context, Vue provide/inject) are implemented in each framework package.\n */\n\nimport type { Falsy } from '@lumx/core/js/types';\n\n/** Event types that trigger click away detection. */\nexport const CLICK_AWAY_EVENT_TYPES = ['mousedown', 'touchstart'] as const;\n\n/** Callback triggered when a click away is detected. */\nexport type ClickAwayCallback = EventListener | Falsy;\n\n/**\n * Check if the click event targets are outside all the given elements.\n *\n * @param targets - The event target elements (from `event.target` and `event.composedPath()`).\n * @param elements - The elements considered \"inside\" the click away context.\n * @returns `true` if the click is outside all elements (i.e. a click away).\n */\nexport function isClickAway(targets: HTMLElement[], elements: HTMLElement[]): boolean {\n    return !elements.some((element) => element instanceof Node && targets.some((target) => element.contains(target)));\n}\n\n/**\n * Imperative setup for click away detection.\n * Adds mousedown/touchstart listeners on `document` and calls the callback when a click\n * occurs outside the elements returned by `getElements`.\n *\n * Note: when `getElements` returns an empty array, any click is considered a click away.\n * Callers should guard against calling `setupClickAway` when no refs are registered.\n *\n * @param getElements - Getter returning the current list of elements considered \"inside\".\n * @param callback - Callback to invoke on click away.\n * @returns A teardown function that removes the event listeners.\n */\nexport function setupClickAway(\n    getElements: () => HTMLElement[],\n    callback: ClickAwayCallback,\n): (() => void) | undefined {\n    if (!callback) {\n        return undefined;\n    }\n\n    const listener: EventListener = (evt) => {\n        const targets = [evt.composedPath?.()[0], evt.target].filter((t): t is HTMLElement => t instanceof Node);\n        const elements = getElements();\n        if (isClickAway(targets, elements)) {\n            callback(evt);\n        }\n    };\n\n    CLICK_AWAY_EVENT_TYPES.forEach((evtType) => document.addEventListener(evtType, listener));\n    return () => {\n        CLICK_AWAY_EVENT_TYPES.forEach((evtType) => document.removeEventListener(evtType, listener));\n    };\n}\n","import { RefObject, useEffect } from 'react';\n\nimport { Falsy } from '@lumx/react/utils/type';\nimport { setupClickAway } from '@lumx/core/js/utils/ClickAway';\n\nexport interface ClickAwayParameters {\n    /**\n     * A callback function to call when the user clicks away from the elements.\n     */\n    callback: EventListener | Falsy;\n    /**\n     * Elements considered within the click away context (clicking outside them will trigger the click away callback).\n     */\n    childrenRefs: RefObject<Array<RefObject<HTMLElement>>>;\n}\n\n/**\n * Listen to clicks away from the given elements and callback the passed in function.\n *\n * Warning: If you need to detect click away on nested React portals, please use the `ClickAwayProvider` component.\n */\nexport function useClickAway({ callback, childrenRefs }: ClickAwayParameters): void {\n    useEffect(() => {\n        const getElements = () => {\n            const refs = childrenRefs.current;\n            if (!refs) return [];\n            return refs.map((ref) => ref?.current).filter(Boolean) as HTMLElement[];\n        };\n        return setupClickAway(getElements, callback);\n    }, [callback, childrenRefs]);\n}\n","import { createContext, RefObject, useContext, useEffect, useMemo, useRef } from 'react';\nimport { ClickAwayParameters, useClickAway } from '@lumx/react/hooks/useClickAway';\n\ninterface ContextValue {\n    childrenRefs: Array<RefObject<HTMLElement>>;\n    addRefs(...newChildrenRefs: Array<RefObject<HTMLElement>>): void;\n}\n\nconst ClickAwayAncestorContext = createContext<ContextValue | null>(null);\n\ninterface ClickAwayProviderProps extends ClickAwayParameters {\n    /**\n     * (Optional) Element that should be considered as part of the parent\n     */\n    parentRef?: RefObject<HTMLElement>;\n    /**\n     * Children\n     */\n    children?: React.ReactNode;\n}\n\n/**\n * Component combining the `useClickAway` hook with a React context to hook into the React component tree and make sure\n * we take into account both the DOM tree and the React tree to detect click away.\n *\n * @return the react component.\n */\nexport const ClickAwayProvider: React.FC<ClickAwayProviderProps> = ({\n    children,\n    callback,\n    childrenRefs,\n    parentRef,\n}) => {\n    const parentContext = useContext(ClickAwayAncestorContext);\n    const currentContext = useMemo(() => {\n        const context: ContextValue = {\n            childrenRefs: [],\n            /**\n             * Add element refs to the current context and propagate to the parent context.\n             */\n            addRefs(...newChildrenRefs) {\n                // Add element refs that should be considered as inside the click away context.\n                context.childrenRefs.push(...newChildrenRefs);\n\n                if (parentContext) {\n                    // Also add then to the parent context\n                    parentContext.addRefs(...newChildrenRefs);\n                    if (parentRef) {\n                        // The parent element is also considered as inside the parent click away context but not inside the current context\n                        parentContext.addRefs(parentRef);\n                    }\n                }\n            },\n        };\n        return context;\n    }, [parentContext, parentRef]);\n\n    useEffect(() => {\n        const { current: currentRefs } = childrenRefs;\n        if (!currentRefs) {\n            return;\n        }\n        currentContext.addRefs(...currentRefs);\n    }, [currentContext, childrenRefs]);\n\n    useClickAway({ callback, childrenRefs: useRef(currentContext.childrenRefs) });\n    return <ClickAwayAncestorContext.Provider value={currentContext}>{children}</ClickAwayAncestorContext.Provider>;\n};\nClickAwayProvider.displayName = 'ClickAwayProvider';\n","import React from 'react';\nimport type { PortalInit } from '@lumx/core/js/utils/Portal';\n\nexport type { PortalInit, PortalProviderProps } from '@lumx/core/js/utils/Portal';\n\nexport const PortalContext = React.createContext<PortalInit>(() => ({ container: document.body }));\n\nexport interface ReactPortalProviderProps {\n    children?: React.ReactNode;\n    value: PortalInit;\n}\n\n/**\n * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)\n */\nexport const PortalProvider: React.FC<ReactPortalProviderProps> = PortalContext.Provider;\n","import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { PortalContext } from './PortalProvider';\n\nexport type { PortalProps } from '@lumx/core/js/utils/Portal';\n\nexport interface ReactPortalProps {\n    enabled?: boolean;\n    children: React.ReactNode;\n}\n\n/**\n * Render children in a portal outside the current DOM position\n * (defaults to `document.body` but can be customized with the PortalContextProvider)\n */\nexport const Portal: React.FC<ReactPortalProps> = ({ children, enabled = true }) => {\n    const init = React.useContext(PortalContext);\n    const context = React.useMemo(\n        () => {\n            return enabled ? init() : null;\n        },\n        // Only update on 'enabled'\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [enabled],\n    );\n\n    React.useLayoutEffect(() => {\n        return context?.teardown;\n    }, [context?.teardown, enabled]);\n\n    const { container } = context ?? {};\n    if (!container || typeof container === 'string') {\n        return <>{children}</>;\n    }\n    return createPortal(children, container);\n};\n"],"names":["DisabledStateContext","React","createContext","state","DisabledStateProvider","children","value","_jsx","Provider","useDisabledStateContext","useContext","CLICK_AWAY_EVENT_TYPES","isClickAway","targets","elements","some","element","Node","target","contains","setupClickAway","getElements","callback","undefined","listener","evt","composedPath","filter","t","forEach","evtType","document","addEventListener","removeEventListener","useClickAway","childrenRefs","useEffect","refs","current","map","ref","Boolean","ClickAwayAncestorContext","ClickAwayProvider","parentRef","parentContext","currentContext","useMemo","context","addRefs","newChildrenRefs","push","currentRefs","useRef","displayName","PortalContext","container","body","PortalProvider","Portal","enabled","init","useLayoutEffect","teardown","_Fragment","createPortal"],"mappings":"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"}

package/index.d.ts

@@ -4,7 +4,7 @@ import * as _lumx_core_js_types from '@lumx/core/js/types';
 import { GenericProps as GenericProps$1, HasTheme as HasTheme$1, ValueOf as ValueOf$1, PropsToOverride, HasAriaDisabled as HasAriaDisabled$1, HasRequiredLinkHref as HasRequiredLinkHref$1, HasClassName as HasClassName$1, HasCloseMode as HasCloseMode$1, JSXElement as JSXElement$1, CommonRef as CommonRef$1, Falsy, HeadingElement as HeadingElement$1, HasAriaLabelOrLabelledBy as HasAriaLabelOrLabelledBy$1 } from '@lumx/core/js/types';
 export * from '@lumx/core/js/types';
 import * as React$1 from 'react';
-import React__default, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, RefObject, SetStateAction, Key, CSSProperties, HTMLInputTypeAttribute, ComponentProps, ElementType as ElementType$1, ImgHTMLAttributes, AriaAttributes as AriaAttributes$1 } from 'react';
+import React__default, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, RefObject, SetStateAction, Key, CSSProperties, ElementType as ElementType$1, HTMLInputTypeAttribute, ComponentProps, ImgHTMLAttributes, AriaAttributes as AriaAttributes$1 } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /** LumX Component Type. */
@@ -1614,6 +1614,8 @@ interface ComboboxOptionMoreInfoProps$1 extends HasClassName {
     onMouseEnter?(): void;
     /** Mouse leave callback. */
     onMouseLeave?(): void;
+    /** Props forwarded to the IconButton. */
+    buttonProps?: Record<string, any>;
 }
 /**
  * Props that React/Vue wrappers need to re-declare with framework-specific types.
@@ -1628,6 +1630,8 @@ interface ComboboxOptionMoreInfoProps extends ReactToJSX<ComboboxOptionMoreInfoP
     children?: ReactNode;
     /** Callback when the popover opens or closes. */
     onToggle?(isOpen: boolean): void;
+    /** Props forwarded to the IconButton. */
+    buttonProps?: Partial<IconButtonProps>;
 }
 
 /**
@@ -1665,6 +1669,8 @@ interface ComboboxOptionProps$1 extends HasClassName {
     hidden?: boolean;
     /** On click callback. */
     handleClick?(): void;
+    /** Extra props forwarded to the inner action element (e.g. link props when as="a"). */
+    actionProps?: Record<string, any>;
     /** ref to the root <li> element. */
     ref?: CommonRef;
     /** The value for this option (used for selection). */
@@ -1674,7 +1680,7 @@ interface ComboboxOptionProps$1 extends HasClassName {
  * Props that React/Vue wrappers need to re-declare with framework-specific types.
  * Used by `ReactToJSX<ComboboxOptionProps, ComboboxOptionPropsToOverride>`.
  */
-type ComboboxOptionPropsToOverride = 'before' | 'after' | 'children' | 'tooltipProps';
+type ComboboxOptionPropsToOverride = 'before' | 'after' | 'children' | 'tooltipProps' | 'actionProps';
 
 declare const ARIA_LINK_MODES: readonly ["aria-describedby", "aria-labelledby"];
 
@@ -1714,6 +1720,10 @@ interface TooltipProps extends GenericProps$1, TooltipProps$1 {
  */
 declare const Tooltip: Comp<TooltipProps, HTMLDivElement>;
 
+/**
+ * Props forwarded to the inner action element (button or link).
+ */
+type ComboboxOptionActionProps$1<E extends ElementType$1 = 'button'> = HasPolymorphicAs$1<E> & HasRequiredLinkHref$1<E>;
 /**
  * Props for Combobox.Option component.
  */
@@ -1732,6 +1742,8 @@ interface ComboboxOptionProps extends GenericProps$1, ReactToJSX<ComboboxOptionP
     after?: ReactNode;
     /** Props forwarded to a Tooltip wrapping the role="option" / role="gridcell" trigger element. */
     tooltipProps?: Partial<TooltipProps>;
+    /** Props forwarded to the inner action element (e.g. `{ as: 'a', href: '/foo' }`). */
+    actionProps?: ComboboxOptionActionProps$1<any>;
 }
 
 /**
@@ -1985,6 +1997,38 @@ declare namespace ComboboxProvider {
     var displayName: string;
 }
 
+/** Map of combobox event names to their payload types. */
+interface ComboboxEventMap {
+    /** Fired when the combobox open state changes. Payload: whether the combobox is open. */
+    open: boolean;
+    /** Fired when the active descendant changes (visual focus). Payload: the option id or null. */
+    activeDescendantChange: string | null;
+    /**
+     * Fired when the visible option count transitions between empty and non-empty.
+     * Payload: whether the list is empty plus the current input value.
+     */
+    emptyChange: {
+        isEmpty?: boolean;
+        inputValue?: string;
+    } | undefined;
+    /**
+     * Fired immediately when the aggregate loading state changes (skeleton count transitions
+     * between 0 and >0). Used for empty suppression in ComboboxState and for aria-busy on the listbox.
+     */
+    loadingChange: boolean;
+    /**
+     * Fired after a 500ms debounce when loading persists, or immediately when loading ends.
+     * Used to control the loading message text in the live region (ComboboxState).
+     */
+    loadingAnnouncement: boolean;
+}
+
+/**
+ * Hook to subscribe to a combobox event via the handle's subscriber system.
+ * Re-subscribes when the handle changes (e.g. trigger mount/unmount).
+ */
+declare function useComboboxEvent<K extends keyof ComboboxEventMap>(event: K, initialValue: ComboboxEventMap[K]): ComboboxEventMap[K];
+
 /**
  * Props for Combobox.Button component.
  *
@@ -2066,6 +2110,8 @@ declare const Combobox: {
     };
     /** Visual separator between option groups (alias for ListDivider). Purely decorative — invisible to screen readers. */
     Divider: Comp<ListDividerProps, HTMLLIElement>;
+    /** Hook to subscribe to combobox events. Must be used within a Combobox.Provider. */
+    useComboboxEvent: typeof useComboboxEvent;
 };
 
 /**

package/index.js

@@ -9,7 +9,7 @@ import ReactDOM__default from 'react-dom';
 import { classNames, onEscapePressed, onEnterPressed as onEnterPressed$1, detectHorizontalSwipe } from '@lumx/core/js/utils';
 import last from 'lodash/last.js';
 import pull from 'lodash/pull.js';
-import { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider } from './_internal/C9YCH96e.js';
+import { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider } from './_internal/Dpulze-1.js';
 import isEmpty from 'lodash/isEmpty.js';
 import get from 'lodash/get.js';
 import { getDisabledState } from '@lumx/core/js/utils/disabledState';
@@ -1637,6 +1637,7 @@ const IconButton = forwardRef((props, ref) => {
     tooltipProps,
     hideTooltip,
     label,
+    theme = defaultTheme,
     ...forwardedProps
   } = props;
   const {
@@ -1654,7 +1655,7 @@ const IconButton = forwardRef((props, ref) => {
     ...tooltipProps,
     children: IconButton$1({
       ref,
-      theme: defaultTheme,
+      theme,
       ...disabledStateProps,
       ...restOfOtherProps,
       handleClick: onClick,
@@ -3207,7 +3208,7 @@ function setupListbox(handle, signal, notify) {
  *
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
  *
- * @param callbacks Callbacks for select and open/close events.
+ * @param callbacks Callbacks invoked on combobox events (e.g. option selection).
  * @param options Options for configuring the shared combobox behavior.
  * @param onTriggerAttach Optional callback invoked when the trigger is registered and the signal is ready.
  *                        Used by mode-specific wrappers (setupComboboxInput/Button) to automatically
@@ -3343,17 +3344,19 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
         case 'Enter':
           if (handle.isOpen && nav?.hasActiveItem && nav.activeItem) {
             if (!isOptionDisabled(nav.activeItem)) {
-              if (nav.type === 'grid' && isActionCell(nav.activeItem)) {
-                // Action cell: programmatically click it.
-                nav.activeItem.click();
-              } else {
-                // Option cell: select the option.
-                handle.select(nav.activeItem);
-              }
+              // Click the active item. For option cells, the delegated click handler
+              // on the listbox will call handle.select() and handle closing.
+              // For action cells and link options, the native click fires too.
+              nav.activeItem.click();
             }
-          }
-          // In multi-select mode, keep open after selection; otherwise toggle.
-          if (!handle.isMultiSelect) {
+            // Close for single-select. For option cells the delegated handler
+            // already closed, but setIsOpen(false) is idempotent. For action cells
+            // and disabled options, the delegated handler did NOT close, so this is needed.
+            if (!handle.isMultiSelect) {
+              handle.setIsOpen(false);
+            }
+          } else if (!handle.isMultiSelect) {
+            // No active item — toggle open/close.
             handle.setIsOpen(!handle.isOpen);
           }
           flag = true;
@@ -3406,10 +3409,12 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
           flag = true;
           break;
         case 'Tab':
-          // Select the active option (if any) and close. Let Tab propagate.
+          // Click the active option (if any) and close. Let Tab propagate.
           if (nav?.hasActiveItem && nav.activeItem && !isOptionDisabled(nav.activeItem)) {
-            handle.select(nav.activeItem);
+            nav.activeItem.click();
           }
+          // The delegated click handler closes for single-select, but for multi-select
+          // or when no item is active, we still need to explicitly close.
           handle.setIsOpen(false);
           break;
         case 'PageUp':
@@ -3493,7 +3498,7 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
     select(option) {
       callbacks.onSelect({
         value: option ? getOptionValue(option) : ''
-      });
+      }, handle);
     },
     registerOption(element, callback) {
       const filterLower = filterValue.toLowerCase();
@@ -3775,13 +3780,8 @@ function setupComboboxButton(button, callbacks) {
         case ' ':
           // Space acts like Enter in button mode.
           if (combobox.isOpen && nav?.hasActiveItem && nav.activeItem) {
-            if (nav.type === 'grid' && isActionCell(nav.activeItem)) {
-              // Action cell: programmatically click it.
-              nav.activeItem.click();
-            } else {
-              combobox.select(nav.activeItem);
-              combobox.setIsOpen(false);
-            }
+            // Click the active item — delegated handler handles select + close.
+            nav.activeItem.click();
           } else {
             combobox.setIsOpen(true);
           }
@@ -6563,44 +6563,58 @@ const ComboboxButton = Object.assign(forwardRefPolymorphic((props, ref) => {
  * Handles: Home/End (text cursor), ArrowLeft/Right (clear active descendant),
  * filtering (on input and on open), and focus behavior.
  *
- * @param input     The input element to use as the combobox trigger.
- * @param callbacks Callbacks for select and open/close events.
- * @param options   Options for configuring the input-mode controller.
+ * @param input   The input element to use as the combobox trigger.
+ * @param options Options and callbacks for configuring the input-mode controller.
  * @returns A ComboboxHandle for interacting with the combobox.
  */
-function setupComboboxInput(input, callbacks, options = {}) {
+function setupComboboxInput(input, options) {
   const {
-    autoFilter = true
+    autoFilter = true,
+    onSelect: optionOnSelect
   } = options;
-  const handle = setupCombobox(callbacks, {
+
+  /**
+   * True when the current input value came from user typing (real InputEvent).
+   * False when the value was set programmatically (select, clear, etc.).
+   * Used to decide whether to re-apply the filter when the combobox opens.
+   */
+  let userHasTyped = false;
+
+  /**
+   * Wraps the consumer's onSelect to perform input-mode side effects after selection:
+   * clears the active descendant, resets the filter, and re-opens the popup.
+   */
+  const onSelect = (option, combobox) => {
+    optionOnSelect(option, combobox);
+
+    // Clear the active item. In multi-select, keep visual focus so the
+    // user can continue navigating after selection.
+    if (!combobox.isMultiSelect) {
+      combobox.focusNav?.clear();
+    }
+    userHasTyped = false;
+    combobox.setIsOpen(true);
+    if (autoFilter) {
+      combobox.setFilter('');
+    }
+  };
+  const handle = setupCombobox({
+    onSelect
+  }, {
     wrapNavigation: true
   }, (combobox, signal) => {
-    /**
-     * True when the current input value came from user typing (real InputEvent).
-     * False when the value was set programmatically (select, clear, etc.).
-     * Used to decide whether to re-apply the filter when the combobox opens.
-     */
-    let userHasTyped = false;
     signal.addEventListener('abort', () => {
       userHasTyped = false;
     });
 
-    // Filter on user typing; reset filter on programmatic input changes.
-    // Real user input fires an `InputEvent` (with `inputType`), while
-    // programmatic changes (selection bridge, clear, etc.) dispatch a
-    // plain `Event('input')` — we use this to distinguish the two.
+    // Filter on real user typing (InputEvent with `inputType`).
     input.addEventListener('input', event => {
-      const isUserTyping = event instanceof InputEvent;
-
-      // Clear the active item. In multi-select with a programmatic change, keep
-      // visual focus so the user can continue navigating after selection.
-      if (isUserTyping || !combobox.isMultiSelect) {
-        combobox.focusNav?.clear();
-      }
-      userHasTyped = isUserTyping;
+      if (!(event instanceof InputEvent)) return;
+      combobox.focusNav?.clear();
+      userHasTyped = true;
       combobox.setIsOpen(true);
       if (autoFilter) {
-        combobox.setFilter(isUserTyping ? input.value : '');
+        combobox.setFilter(input.value);
       }
     }, {
       signal
@@ -6694,6 +6708,7 @@ const ComboboxInput$1 = (props, {
     textFieldRef,
     toggleButtonProps,
     handleToggle,
+    theme,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx(TextField, {
@@ -6706,8 +6721,10 @@ const ComboboxInput$1 = (props, {
     inputRef: inputRef,
     textFieldRef: textFieldRef,
     autoComplete: "off",
+    theme: theme,
     afterElement: toggleButtonProps ? /*#__PURE__*/jsx(IconButton, {
       ...toggleButtonProps,
+      theme: theme,
       emphasis: "low",
       size: "s",
       icon: isOpen ? mdiChevronUp : mdiChevronDown,
@@ -7229,32 +7246,6 @@ TextField.displayName = COMPONENT_NAME$1d;
 TextField.className = CLASSNAME$1c;
 TextField.defaultProps = DEFAULT_PROPS$Z;
 
-/**
- * Set an input's value using the native HTMLInputElement.prototype.value setter,
- * bypassing React's controlled input value tracker, then dispatch an `input` event
- * so React's onChange fires.
- *
- * React wraps the `value` property setter on controlled inputs to track the "last
- * known value." If you set `input.value` through React's wrapper with the same value
- * React last rendered, the subsequent `input` event is suppressed. Using the native
- * setter bypasses this tracker, ensuring React detects a value change and fires onChange.
- */
-function setNativeInputValue(input, value) {
-  const nativeSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
-  if (nativeSetter) {
-    nativeSetter.call(input, value);
-  } else {
-    // Fallback: set directly (may not trigger React onChange on controlled inputs)
-    // eslint-disable-next-line no-param-reassign
-    input.value = value;
-  }
-
-  // Dispatch input event so React's onChange fires
-  input.dispatchEvent(new Event('input', {
-    bubbles: true
-  }));
-}
-
 /**
  * Props for Combobox.Input component.
  * Note: role, aria-autocomplete, aria-controls, aria-expanded are set internally and cannot be overridden.
@@ -7285,9 +7276,11 @@ const ComboboxInput = forwardRef((props, ref) => {
   const internalInputRef = useRef(null);
   const mergedInputRef = useMergeRefs(externalInputRef, internalInputRef);
 
-  // Keep onSelect in a ref to avoid re-creating the handle on every render
+  // Keep callbacks in refs to avoid re-creating the handle on every render
   const onSelectRef = useRef(onSelect);
   onSelectRef.current = onSelect;
+  const onChangeRef = useRef(otherProps.onChange);
+  onChangeRef.current = otherProps.onChange;
 
   // Create the combobox handle with input-mode controller on mount
   useEffect(() => {
@@ -7295,11 +7288,10 @@ const ComboboxInput = forwardRef((props, ref) => {
     if (!input) return undefined;
     const handle = setupComboboxInput(input, {
       onSelect(option) {
-        // Bridge to React's controlled input flow.
-        setNativeInputValue(input, option.value);
+        // Update controlled value through React's normal onChange flow.
+        onChangeRef.current?.(option.value);
         onSelectRef.current?.(option);
-      }
-    }, {
+      },
       autoFilter
     });
     setHandle(handle);
@@ -7737,6 +7729,7 @@ const ComboboxOption$1 = (props, {
     isGrid,
     isSelected,
     handleClick,
+    actionProps,
     ref,
     tooltipProps,
     value,
@@ -7749,7 +7742,8 @@ const ComboboxOption$1 = (props, {
     itemRole = isGrid ? 'row' : 'none';
   }
   const actionElement = ListItemAction$1({
-    as: 'p',
+    as: 'button',
+    ...actionProps,
     id,
     className: element$H('trigger'),
     handleClick,
@@ -7832,6 +7826,7 @@ const ComboboxOption = forwardRef((props, ref) => {
     before,
     after,
     tooltipProps,
+    actionProps,
     onClick,
     ...forwardedProps
   } = props;
@@ -7865,6 +7860,7 @@ const ComboboxOption = forwardRef((props, ref) => {
   return ComboboxOption$1({
     ...forwardedProps,
     ref: mergedRef,
+    actionProps,
     hidden: isFiltered,
     value,
     description,
@@ -8011,7 +8007,8 @@ const ComboboxOptionMoreInfo$1 = (props, {
     popoverId,
     ref,
     onMouseEnter,
-    onMouseLeave
+    onMouseLeave,
+    buttonProps
   } = props;
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(IconButton, {
@@ -8026,7 +8023,8 @@ const ComboboxOptionMoreInfo$1 = (props, {
       // Keyboard accessibility is handled via combobox keyboard highlighting.
       ,
       "aria-hidden": true,
-      label: ""
+      label: "",
+      ...buttonProps
     }), /*#__PURE__*/jsx(Popover, {
       id: popoverId,
       className: element$G('popover'),
@@ -8720,6 +8718,7 @@ const ComboboxOptionMoreInfo = props => {
   const {
     children,
     onToggle,
+    buttonProps,
     ...forwardedProps
   } = props;
   const ref = useRef(null);
@@ -8750,6 +8749,7 @@ const ComboboxOptionMoreInfo = props => {
     isOpen,
     popoverId,
     children,
+    buttonProps,
     onMouseEnter: () => setIsHovered(true),
     onMouseLeave: () => setIsHovered(false)
   }, {
@@ -10018,7 +10018,9 @@ const Combobox = {
   Section: ComboboxSection,
   State: ComboboxState,
   /** Visual separator between option groups (alias for ListDivider). Purely decorative — invisible to screen readers. */
-  Divider: ListDivider
+  Divider: ListDivider,
+  /** Hook to subscribe to combobox events. Must be used within a Combobox.Provider. */
+  useComboboxEvent
 };
 
 /**