@astryxdesign/core 0.2.0-canary.ea693ac → 0.2.0-canary.ebed74f

package/src/hooks/useContainerReveal.test.tsx

@@ -0,0 +1,116 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file useContainerReveal.test.tsx
+ * @input Uses vitest, @testing-library/react, useContainerReveal
+ * @output Unit tests for the marker-pool free-list, per-instance scoping, the
+ *   inert (disabled) path, and the content-option → style-block mapping.
+ * @position Testing; validates useContainerReveal.ts and its pool.
+ *
+ * SYNC: When useContainerReveal.ts changes, update these tests.
+ */
+
+import {describe, it, expect} from 'vitest';
+import {renderHook, render, act} from '@testing-library/react';
+import {useContainerReveal} from './useContainerReveal';
+import {POOL_SIZE} from './containerReveal.pool.stylex';
+
+describe('useContainerReveal', () => {
+  it('returns spreadable getter props for container and content', () => {
+    const {result} = renderHook(() => useContainerReveal());
+    const container = result.current.getContainerProps();
+    const content = result.current.getContentRevealProps();
+    expect(container).toHaveProperty('className');
+    expect(content).toHaveProperty('className');
+    expect(typeof container.className).toBe('string');
+    expect(typeof content.className).toBe('string');
+  });
+
+  it('is inert when disabled: no marker class, empty content props', () => {
+    const {result} = renderHook(() =>
+      useContainerReveal({isEnabled: false}),
+    );
+    expect(result.current.getContainerProps()).toEqual({});
+    expect(result.current.getContentRevealProps()).toEqual({});
+  });
+
+  it('gives two concurrently mounted containers DISTINCT marker classes', () => {
+    // The core leak-safety property: nested/concurrent containers must never
+    // share a marker, or an ancestor container's :hover would reveal a
+    // descendant container's content.
+    const a = renderHook(() => useContainerReveal());
+    const b = renderHook(() => useContainerReveal());
+    const classA = a.result.current.getContainerProps().className;
+    const classB = b.result.current.getContainerProps().className;
+    expect(classA).toBeTruthy();
+    expect(classB).toBeTruthy();
+    expect(classA).not.toBe(classB);
+    a.unmount();
+    b.unmount();
+  });
+
+  it('recycles a slot after unmount (free-list release)', () => {
+    const first = renderHook(() => useContainerReveal());
+    const firstClass = first.result.current.getContainerProps().className;
+    first.unmount();
+    // A fresh mount should be able to reclaim the just-released slot.
+    const second = renderHook(() => useContainerReveal());
+    const secondClass = second.result.current.getContainerProps().className;
+    expect(secondClass).toBe(firstClass);
+    second.unmount();
+  });
+
+  it('reveal and conceal map to different style blocks', () => {
+    const {result} = renderHook(() => useContainerReveal());
+    const reveal = result.current.getContentRevealProps().className;
+    const conceal = result.current.getContentRevealProps({
+      isRevealInverted: true,
+    }).className;
+    expect(reveal).toBeTruthy();
+    expect(conceal).toBeTruthy();
+    expect(reveal).not.toBe(conceal);
+  });
+
+  it('layout-preserved reveal differs from clipped reveal', () => {
+    const {result} = renderHook(() => useContainerReveal());
+    const clipped = result.current.getContentRevealProps().className;
+    const preserved = result.current.getContentRevealProps({
+      isLayoutPreserved: true,
+    }).className;
+    expect(clipped).not.toBe(preserved);
+  });
+
+  it('assigns distinct markers across a full pool of concurrent containers', () => {
+    function Probe({onClass}: {onClass: (c: string) => void}) {
+      const {getContainerProps} = useContainerReveal();
+      onClass(getContainerProps().className ?? '');
+      return null;
+    }
+    const classes: string[] = [];
+    const {unmount} = render(
+      <>
+        {Array.from({length: POOL_SIZE}, (_, i) => (
+          <Probe key={i} onClass={(c) => classes.push(c)} />
+        ))}
+      </>,
+    );
+    const unique = new Set(classes.filter(Boolean));
+    expect(unique.size).toBe(POOL_SIZE);
+    unmount();
+  });
+
+  it('survives repeated mount/unmount without leaking the pool', () => {
+    // Mount and unmount a full pool several times; each cycle must still hand
+    // out POOL_SIZE distinct markers, proving slots are released.
+    for (let cycle = 0; cycle < 3; cycle++) {
+      const hooks = Array.from({length: POOL_SIZE}, () =>
+        renderHook(() => useContainerReveal()),
+      );
+      const classes = hooks.map(
+        (h) => h.result.current.getContainerProps().className,
+      );
+      expect(new Set(classes).size).toBe(POOL_SIZE);
+      act(() => hooks.forEach((h) => h.unmount()));
+    }
+  });
+});

package/src/hooks/useContainerReveal.ts

@@ -0,0 +1,181 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useContainerReveal.ts
+ * @input Uses React, the generated marker pool, useDevWarning
+ * @output Exports useContainerReveal — a headless hover/focus reveal primitive
+ * @position Core hook. Consumed by any component that reveals (or conceals)
+ *   content when its container is hovered or focused — e.g. Thumbnail's remove
+ *   button, TreeList row actions.
+ *
+ * Gives a container a scoped hover/focus-within trigger that reveals or
+ * conceals content inside it, entirely in CSS (no hover state in JS, no
+ * re-render on hover). The caller authors NO StyleX: the hook hands out a
+ * marker + matching reveal styles from a pre-compiled pool.
+ *
+ * ACCESSIBILITY (WCAG 2.2 by construction):
+ * - Revealed content is visually hidden at rest via position + opacity, so it
+ *   stays in the accessibility tree and tab order — never display:none.
+ * - Keyboard: revealed on :focus-within, so tabbing in shows it.
+ * - Touch: always visible on coarse pointers; never gated behind hover.
+ * - Concealed (inverted) content is a mouse-only visual swap: it ignores
+ *   :focus-within (a keyboard user must never watch content vanish) and stays
+ *   visible on touch and in the a11y tree.
+ * - Motion: honors prefers-reduced-motion.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/hooks/index.ts (export)
+ * - containerReveal.pool.stylex.ts (if the slot shape changes)
+ */
+
+import {useState, useEffect, type CSSProperties} from 'react';
+import * as stylex from '@stylexjs/stylex';
+import {POOL, POOL_SIZE, type RevealSlot} from './containerReveal.pool.stylex';
+import {useDevWarning} from './useDevWarning';
+
+// Module-level free-list. Each mounted, enabled useContainerReveal claims a
+// distinct pool slot so that any two CONCURRENTLY mounted containers — in
+// particular a nested container inside another's revealed content — get
+// different markers and cannot leak hover/focus into one another. Slots are
+// returned on unmount. Sibling containers that would only ever collide when
+// the pool is exhausted are harmless (a sibling is never an ancestor), so the
+// pool only needs to cover the number of concurrently mounted containers, not
+// instances over time.
+const claimed: boolean[] = new Array(POOL_SIZE).fill(false);
+
+interface Claim {
+  /** Pool index to use. */
+  index: number;
+  /** True when the pool was full and this claim fell back to a shared slot. */
+  isExhausted: boolean;
+}
+
+function claimSlot(): Claim {
+  for (let i = 0; i < POOL_SIZE; i++) {
+    if (!claimed[i]) {
+      claimed[i] = true;
+      return {index: i, isExhausted: false};
+    }
+  }
+  // Exhausted: fall back to slot 0. Safe for siblings (a sibling is never an
+  // ancestor); only nesting deeper than POOL_SIZE could reintroduce a leak.
+  // Surfaced via useDevWarning so the pool can be grown.
+  return {index: 0, isExhausted: true};
+}
+
+function releaseSlot(index: number, isExhausted: boolean): void {
+  // A fallback claim never owned the slot exclusively; leave it as-is.
+  if (!isExhausted) {
+    claimed[index] = false;
+  }
+}
+
+export interface UseContainerRevealOptions {
+  /**
+   * When false the hook is inert: no marker is applied and content getters
+   * return no styles, so content is always shown. Lets a component gate on its
+   * own prop (e.g. `revealOn === 'hover'`).
+   * @default true
+   */
+  isEnabled?: boolean;
+}
+
+export interface ContentRevealOptions {
+  /**
+   * Conceal-on-hover instead of reveal-on-hover: content is visible at rest
+   * and fades out while the container is hovered. Mouse-only and visual —
+   * stays in the a11y tree, ignores focus-within, stays visible on touch.
+   * @default false
+   */
+  isRevealInverted?: boolean;
+  /**
+   * Reserve the content's layout box while hidden (opacity-only) instead of
+   * collapsing it, to avoid layout shift when it appears.
+   * @default false
+   */
+  isLayoutPreserved?: boolean;
+}
+
+export interface UseContainerRevealReturn {
+  /** Spread onto the container whose hover/focus-within drives the reveal. */
+  getContainerProps: () => {className?: string; style?: CSSProperties};
+  /** Spread onto each revealed / concealed child. */
+  getContentRevealProps: (options?: ContentRevealOptions) => {
+    className?: string;
+    style?: CSSProperties;
+  };
+}
+
+const EMPTY = Object.freeze({});
+
+/**
+ * Scoped, CSS-only hover/focus reveal for content inside a container.
+ *
+ * @example
+ * ```tsx
+ * const {getContainerProps, getContentRevealProps} = useContainerReveal({
+ *   isEnabled: revealOn === 'hover',
+ * });
+ *
+ * <div {...mergeProps(getContainerProps(), stylex.props(styles.row))}>
+ *   {label}
+ *   <span {...mergeProps(getContentRevealProps(), stylex.props(styles.actions))}>
+ *     {actions}
+ *   </span>
+ * </div>
+ * ```
+ */
+export function useContainerReveal(
+  options: UseContainerRevealOptions = {},
+): UseContainerRevealReturn {
+  const {isEnabled = true} = options;
+
+  // Claim a slot for this container's lifetime. Assigned in the initializer
+  // (not the render body) and released on unmount so the free-list stays
+  // effect-scoped and StrictMode-safe.
+  const [claim] = useState<Claim | null>(() =>
+    isEnabled ? claimSlot() : null,
+  );
+
+  useEffect(() => {
+    if (claim == null) {
+      return;
+    }
+    return () => releaseSlot(claim.index, claim.isExhausted);
+  }, [claim]);
+
+  useDevWarning(
+    'useContainerReveal',
+    `More than ${POOL_SIZE} reveal containers are mounted at once; nested ` +
+      `containers beyond the pool may share a marker. Add markers to ` +
+      `containerReveal.pool.stylex.ts and raise POOL_SIZE.`,
+    claim?.isExhausted ?? false,
+  );
+
+  if (claim == null) {
+    return {
+      getContainerProps: () => EMPTY,
+      getContentRevealProps: () => EMPTY,
+    };
+  }
+
+  const slot: RevealSlot = POOL[claim.index];
+
+  return {
+    getContainerProps: () => stylex.props(slot.marker),
+    getContentRevealProps: (contentOptions: ContentRevealOptions = {}) => {
+      const {isRevealInverted = false, isLayoutPreserved = false} =
+        contentOptions;
+      const style = isRevealInverted
+        ? isLayoutPreserved
+          ? slot.concealLayoutPreserved
+          : slot.conceal
+        : isLayoutPreserved
+          ? slot.revealLayoutPreserved
+          : slot.reveal;
+      return stylex.props(style);
+    },
+  };
+}

package/src/hooks/useEntryAnimation.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').HookDoc} */
+/** @type {import('@astryxdesign/cli/authoring').HookDoc} */
 export const docs = {
   name: 'useEntryAnimation',
   displayName: 'useEntryAnimation',
@@ -36,7 +36,7 @@ export const docs = {
   category: 'animation',
 };
 
-/** @type {import('../docs-types').HookTranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
 export const docsDense = {
   description:
     'Returns StyleX style for animating element on mount. Only animates when element dynamically inserted after initial page paint; elements rendered on page load not animated. Uses Astryx motion tokens (duration, easing) for consistent timing. Requires "use client"; does not support SSR.',

package/src/hooks/useFocusTrap.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').HookDoc} */
+/** @type {import('@astryxdesign/cli/authoring').HookDoc} */
 export const docs = {
   name: 'useFocusTrap',
   displayName: 'useFocusTrap',
@@ -53,7 +53,7 @@ export const docs = {
   category: 'focus',
 };
 
-/** @type {import('../docs-types').HookTranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
 export const docsDense = {
   description:
     'Traps focus within container element following WAI-ARIA dialog focus trap pattern. Listens to document focus events + redirects focus back into container if it escapes via keyboard navigation. Handles both Tab + Shift+Tab wrapping. Mouse clicks outside container not intercepted; use light-dismiss handler for that.',

package/src/hooks/useGridFocus.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').HookDoc} */
+/** @type {import('@astryxdesign/cli/authoring').HookDoc} */
 export const docs = {
   name: 'useGridFocus',
   displayName: 'useGridFocus',
@@ -124,7 +124,7 @@ export const docs = {
   category: 'focus',
 };
 
-/** @type {import('../docs-types').HookTranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
 export const docsDense = {
   description:
     'Manages keyboard navigation within 2D grid following WAI-ARIA grid pattern. Supports arrow keys for cell-to-cell navigation, Home/End for row boundaries, Ctrl+Home/Ctrl+End for grid boundaries, Page Up/Down for custom callbacks (e.g. month navigation in calendars). Boundary navigation callbacks allow cross-grid navigation.',

package/src/hooks/useGridFocus.ts

@@ -90,13 +90,15 @@ export interface UseGridFocusOptions {
   onPageDown?: () => void;
 
   /**
-   * Whether the grid is in a right-to-left context. When true, ArrowLeft and
-   * ArrowRight are swapped so horizontal navigation follows visual direction.
+   * @deprecated Direction is auto-detected from the container's computed
+   * `direction` — omit this. The explicit override is redundant (there's no
+   * valid reason to force RTL arrows in an LTR context) and will be removed in
+   * an upcoming major.
    *
-   * When omitted, the direction is auto-detected from the container's computed
-   * `direction` (read lazily on keydown, only for horizontal arrow keys), so
-   * grids inside `dir="rtl"` subtrees flip automatically. Pass an explicit
-   * boolean to override detection.
+   * When set, forces whether the grid is right-to-left: ArrowLeft/ArrowRight
+   * are swapped so horizontal navigation follows visual direction. When
+   * omitted (preferred), the direction is auto-detected from the container's
+   * computed `direction` (read lazily on keydown, horizontal arrows only).
    * @default undefined (auto-detect from the container)
    */
   isRtl?: boolean;

package/src/hooks/useHotkeys.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').HookDoc} */
+/** @type {import('@astryxdesign/cli/authoring').HookDoc} */
 export const docs = {
   name: 'useHotkeys',
   displayName: 'useHotkeys',
@@ -31,7 +31,7 @@ export const docs = {
   category: 'interaction',
 };
 
-/** @type {import('../docs-types').HookTranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
 export const docsDense = {
   description:
     'Global keyboard shortcuts w/ one window keydown listener per hook instance. Handlers kept in ref; re-renders never re-subscribe. Skips typing targets (input/textarea/select/contenteditable) unless allowInInputs, skips defaultPrevented, preventDefault() on match. "mod" = ⌘ on macOS, Ctrl elsewhere. SSR-safe.',

package/src/hooks/useImageMode.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').HookDoc} */
+/** @type {import('@astryxdesign/cli/authoring').HookDoc} */
 export const docs = {
   name: 'useImageMode',
   displayName: 'useImageMode',
@@ -61,7 +61,7 @@ export const docs = {
   category: 'media',
 };
 
-/** @type {import('../docs-types').HookTranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
 export const docsDense = {
   description:
     'Detects whether image is predominantly dark / light by sampling pixels via OffscreenCanvas. Uses APCA perceptual lightness (sRGB linearization + power curve) for accurate detection, esp. on saturated colors. Runs entirely off paint path: no visible canvas, no layout thrash. Supports regional sampling for detecting luminance where text overlays will appear. Returns null while loading + falls back gracefully on CORS / network errors.',

package/src/hooks/useInputContainer.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').HookDoc} */
+/** @type {import('@astryxdesign/cli/authoring').HookDoc} */
 export const docs = {
   name: 'useInputContainer',
   displayName: 'useInputContainer',
@@ -59,7 +59,7 @@ export const docs = {
   category: 'interaction',
 };
 
-/** @type {import('../docs-types').HookTranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
 export const docsDense = {
   description:
     'Makes input container wrapper clickable, delegating focus to inner input/textarea when user clicks non-interactive areas (icons, padding, status indicators). Built on useClickableContainer, so nested interactive elements (clear buttons, calendar toggles, links) handled safely; clicking them does NOT steal focus from input. Automatically detects input type: text-like inputs receive .focus(), other types (checkbox, radio, file) receive .click().',

package/src/hooks/useInputContainer.test.tsx

@@ -0,0 +1,180 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file useInputContainer.test.tsx
+ * @input Uses React Testing Library, useInputContainer
+ * @output Unit tests for focus-vs-click forwarding on container click
+ */
+
+import {fireEvent, render} from '@testing-library/react';
+import {useRef} from 'react';
+import {describe, expect, it, vi} from 'vitest';
+import {useInputContainer} from './useInputContainer';
+
+/**
+ * Renders a container wired with useInputContainer around a single control.
+ * The control is described by `control`, which receives the ref to attach.
+ */
+function TestContainer({
+  renderControl,
+}: {
+  renderControl: (ref: React.RefObject<HTMLElement | null>) => React.ReactNode;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLElement | null>(null);
+  const {onClick, onMouseUp} = useInputContainer({
+    containerRef,
+    inputRef,
+  });
+  return (
+    <div ref={containerRef} onClick={onClick} onMouseUp={onMouseUp}>
+      <span data-testid="chrome">chrome</span>
+      {renderControl(inputRef)}
+    </div>
+  );
+}
+
+describe('useInputContainer', () => {
+  it('clicks (not focuses) a role="combobox" aria-haspopup="dialog" text input', () => {
+    const onFocus = vi.fn();
+    const onControlClick = vi.fn();
+    const {getByTestId} = render(
+      <TestContainer
+        renderControl={ref => (
+          <input
+            ref={ref as React.RefObject<HTMLInputElement>}
+            data-testid="control"
+            type="text"
+            role="combobox"
+            aria-haspopup="dialog"
+            onFocus={onFocus}
+            onClick={onControlClick}
+          />
+        )}
+      />,
+    );
+
+    // Click the non-interactive chrome so the container handler fires.
+    fireEvent.click(getByTestId('chrome'));
+
+    // A popup trigger must be activated via click, not merely focused —
+    // otherwise DateInput's calendar would never open.
+    expect(onControlClick).toHaveBeenCalledTimes(1);
+    expect(onFocus).not.toHaveBeenCalled();
+  });
+
+  it('clicks a control that only advertises aria-haspopup (no combobox role)', () => {
+    const onFocus = vi.fn();
+    const onControlClick = vi.fn();
+    const {getByTestId} = render(
+      <TestContainer
+        renderControl={ref => (
+          <input
+            ref={ref as React.RefObject<HTMLInputElement>}
+            data-testid="control"
+            type="text"
+            aria-haspopup="menu"
+            onFocus={onFocus}
+            onClick={onControlClick}
+          />
+        )}
+      />,
+    );
+
+    fireEvent.click(getByTestId('chrome'));
+
+    expect(onControlClick).toHaveBeenCalledTimes(1);
+    expect(onFocus).not.toHaveBeenCalled();
+  });
+
+  it('focuses (not clicks) a plain type="text" input', () => {
+    const onFocus = vi.fn();
+    const onControlClick = vi.fn();
+    const {getByTestId} = render(
+      <TestContainer
+        renderControl={ref => (
+          <input
+            ref={ref as React.RefObject<HTMLInputElement>}
+            data-testid="control"
+            type="text"
+            onFocus={onFocus}
+            onClick={onControlClick}
+          />
+        )}
+      />,
+    );
+
+    fireEvent.click(getByTestId('chrome'));
+
+    expect(onFocus).toHaveBeenCalledTimes(1);
+    expect(onControlClick).not.toHaveBeenCalled();
+  });
+
+  it('focuses (not clicks) a plain type="number" input', () => {
+    const onFocus = vi.fn();
+    const onControlClick = vi.fn();
+    const {getByTestId} = render(
+      <TestContainer
+        renderControl={ref => (
+          <input
+            ref={ref as React.RefObject<HTMLInputElement>}
+            data-testid="control"
+            type="number"
+            onFocus={onFocus}
+            onClick={onControlClick}
+          />
+        )}
+      />,
+    );
+
+    fireEvent.click(getByTestId('chrome'));
+
+    expect(onFocus).toHaveBeenCalledTimes(1);
+    expect(onControlClick).not.toHaveBeenCalled();
+  });
+
+  it('focuses (not clicks) a textarea', () => {
+    const onFocus = vi.fn();
+    const onControlClick = vi.fn();
+    const {getByTestId} = render(
+      <TestContainer
+        renderControl={ref => (
+          <textarea
+            ref={ref as React.RefObject<HTMLTextAreaElement>}
+            data-testid="control"
+            onFocus={onFocus}
+            onClick={onControlClick}
+          />
+        )}
+      />,
+    );
+
+    fireEvent.click(getByTestId('chrome'));
+
+    expect(onFocus).toHaveBeenCalledTimes(1);
+    expect(onControlClick).not.toHaveBeenCalled();
+  });
+
+  it('clicks (not focuses) a checkbox — unchanged behavior', () => {
+    const onFocus = vi.fn();
+    const onControlClick = vi.fn();
+    const {getByTestId} = render(
+      <TestContainer
+        renderControl={ref => (
+          <input
+            ref={ref as React.RefObject<HTMLInputElement>}
+            data-testid="control"
+            type="checkbox"
+            onFocus={onFocus}
+            onClick={onControlClick}
+          />
+        )}
+      />,
+    );
+
+    fireEvent.click(getByTestId('chrome'));
+
+    expect(onControlClick).toHaveBeenCalledTimes(1);
+    expect(onFocus).not.toHaveBeenCalled();
+  });
+});

package/src/hooks/useInputContainer.ts

@@ -35,6 +35,36 @@ const FOCUS_INPUT_TYPES = new Set([
   'week',
 ]);
 
+/**
+ * `aria-haspopup` values that advertise a control opens a popup on activation.
+ * https://www.w3.org/TR/wai-aria-1.2/#aria-haspopup
+ */
+const HASPOPUP_VALUES = new Set([
+  'true',
+  'menu',
+  'listbox',
+  'tree',
+  'grid',
+  'dialog',
+]);
+
+/**
+ * Whether an element is a popup trigger — a combobox or any control that
+ * advertises `aria-haspopup`. Such controls activate their popup on *click*
+ * (e.g. DateInput's `<input type="text" role="combobox" aria-haspopup="dialog">`
+ * opens its calendar via `onClick`, with no `onFocus` opener). Forwarding a
+ * container click to `.focus()` would focus the control but leave the popup
+ * closed — so we `.click()` these instead. Plain text inputs (no popup) are
+ * unaffected and keep `.focus()`.
+ */
+function isPopupTrigger(el: HTMLElement): boolean {
+  if (el.getAttribute('role') === 'combobox') {
+    return true;
+  }
+  const haspopup = el.getAttribute('aria-haspopup');
+  return haspopup != null && HASPOPUP_VALUES.has(haspopup);
+}
+
 export interface UseInputContainerOptions {
   /** Ref to the outer container/wrapper element */
   containerRef: RefObject<HTMLElement | null>;
@@ -83,7 +113,12 @@ export function useInputContainer({
     if (input == null) {
       return;
     }
-    if (
+    // Popup triggers (combobox / aria-haspopup) activate their popup on
+    // *click*, not focus — so check this BEFORE the type check, otherwise a
+    // `type="text"` combobox (DateInput) would `.focus()` and never open.
+    if (input instanceof HTMLElement && isPopupTrigger(input)) {
+      input.click();
+    } else if (
       input instanceof HTMLInputElement &&
       FOCUS_INPUT_TYPES.has(input.type)
     ) {