@cdx-ui/primitives 0.0.1-beta.1 → 0.0.1-beta.100

package/src/select/SelectTrigger.web.tsx

@@ -0,0 +1,238 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import { type PressableProps, StyleSheet } from 'react-native';
+import { Slot } from '../slot';
+import type { InteractionState } from '../types';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { domDataAttributes } from '../utils/domDataAttributes';
+import type { ISelectTriggerProps } from './types';
+import { useSelectTrigger } from './useSelectTrigger';
+
+export interface SelectTriggerProps extends Omit<ISelectTriggerProps, 'children'> {
+  asChild?: boolean;
+  children?: ((state: InteractionState) => ReactNode) | ReactNode;
+}
+
+/** Props that must not be forwarded to a DOM `<button>`. */
+const OMIT = new Set<string>([
+  'hitSlop',
+  'pressRetentionOffset',
+  'android_ripple',
+  'android_disableSound',
+  'unstable_pressDelay',
+  'onLongPress',
+  'delayLongPress',
+  'onPress',
+  'onPressIn',
+  'onPressOut',
+  'onHoverIn',
+  'onHoverOut',
+  'onKeyDown',
+  'onFocus',
+  'onBlur',
+  'disabled',
+  'style',
+  'className',
+  'testID',
+  'children',
+  'accessible',
+  'accessibilityActions',
+  'accessibilityElementsHidden',
+  'accessibilityHint',
+  'accessibilityIgnoresInvertColors',
+  'accessibilityLabel',
+  'accessibilityLabelledBy',
+  'accessibilityLiveRegion',
+  'accessibilityRole',
+  'accessibilityState',
+  'accessibilityValue',
+  'accessibilityViewIsModal',
+  'importantForAccessibility',
+  'needsOffscreenAlphaCompositing',
+  'collapsable',
+  'shouldRasterizeIOS',
+  'removeClippedSubviews',
+  'onAccessibilityAction',
+  'onAccessibilityEscape',
+  'onAccessibilityTap',
+  'dataSet',
+]);
+
+function filterDomProps(rest: object): React.ButtonHTMLAttributes<HTMLButtonElement> {
+  const entries = Object.entries(rest).filter(([key]) => !OMIT.has(key));
+  return Object.fromEntries(entries) as React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+
+/** UA `<button>` defaults (centered text, inline sizing) fight our flex + `justify-between` layout. */
+const webButtonLayoutStyle: React.CSSProperties = {
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  width: '100%',
+  minWidth: 0,
+  textAlign: 'start',
+  boxSizing: 'border-box',
+  margin: 0,
+  font: 'inherit',
+  lineHeight: 'normal',
+  WebkitAppearance: 'none',
+  appearance: 'none',
+};
+
+/**
+ * Native `<button type="button">` so the trigger is HTML-labelable (`<label htmlFor>` focuses it).
+ * `Pressable` on web is a non-labelable div; the native `<button>` makes label-association work.
+ */
+export const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(
+  (
+    {
+      asChild,
+      children,
+      isHovered,
+      isActive,
+      isFocused,
+      isFocusVisible,
+      isDisabled,
+      'aria-describedby': ariaDescribedBy,
+      onPress,
+      onPressIn,
+      onPressOut,
+      onHoverIn,
+      onHoverOut,
+      onFocus,
+      onBlur,
+      ...rest
+    },
+    ref,
+  ) => {
+    const consumerOnKeyDown = (rest as { onKeyDown?: (e: KeyboardEvent) => void }).onKeyDown;
+
+    const { ariaProps, dataAttrValues, mergedRef, handlers, interactionState } = useSelectTrigger(
+      ref as React.ForwardedRef<unknown>,
+      {
+        asChild,
+        isHovered,
+        isActive,
+        isFocused,
+        isFocusVisible,
+        isDisabled,
+        ariaDescribedBy,
+        onPress,
+        onPressIn,
+        onPressOut,
+        onHoverIn,
+        onHoverOut,
+        onFocus: onFocus as (...args: unknown[]) => unknown,
+        onBlur: onBlur as (...args: unknown[]) => unknown,
+        onKeyDown: consumerOnKeyDown,
+      },
+    );
+
+    /**
+     * `asChild` path: forward Pressable-style props through `Slot` so consumers can substitute
+     * another Forge primitive (IconButton, Chip, Button) — all of which forward Pressable-shaped
+     * handlers to an underlying RNW `Pressable`. We pass data attributes in the RN/RNW `dataSet`
+     * form (not the flat DOM `data-*` form used by the `<button>` host below) because the
+     * substituted component is RN/RNW-shaped — RNW translates `dataSet` to DOM `data-*` keys.
+     *
+     * The label-focus bridge mount is owned by the hook: on web with `asChild=true` the
+     * substituted element renders `<div role="button">` instead of `<button>`, which breaks
+     * native `<label htmlFor>` association — the hook registers the bridge on `field.inputRef`
+     * so `Form.Label` still focuses the trigger.
+     *
+     * NOTE — `data-slot` overlap: the substituted component carries its own `data-slot`
+     * (e.g. `button`, `icon-button`, `chip`) which will end up on the merged element. The
+     * `select-trigger` `data-slot` arriving via `props` may be overridden depending on merge
+     * order. Styled-layer selectors that need guaranteed `select-trigger` access should
+     * attach a wrapper around the trigger rather than relying on `data-slot`.
+     */
+    if (asChild) {
+      return (
+        <Slot
+          ref={mergedRef as React.Ref<unknown>}
+          {...ariaProps}
+          {...(rest as PressableProps)}
+          {...mergeDataAttributes(
+            rest,
+            dataAttributes(
+              dataAttrValues as unknown as Record<string, boolean | string | undefined>,
+            ),
+          )}
+          onPress={handlers.onPress}
+          onPressIn={handlers.onPressIn}
+          onPressOut={handlers.onPressOut}
+          onHoverIn={handlers.onHoverIn}
+          onHoverOut={handlers.onHoverOut}
+          onFocus={handlers.onFocus}
+          onBlur={handlers.onBlur}
+          onKeyDown={handlers.onKeyDown}
+        >
+          {typeof children === 'function' ? children(interactionState) : children}
+        </Slot>
+      );
+    }
+
+    const dataAttrs = domDataAttributes(
+      dataAttrValues as unknown as Record<string, boolean | string | undefined>,
+    );
+
+    /**
+     * Native `<button>` host so the trigger is HTML-labelable. We map Pressable-style handlers
+     * to DOM events at the boundary, filter out RN-only props, and apply the layout shim that
+     * neutralizes UA `<button>` defaults that fight our flex + `justify-between` layout.
+     */
+    const { style, className, testID, ...buttonRest } = rest as PressableProps & {
+      className?: string;
+      testID?: string;
+    };
+
+    const domProps = filterDomProps(buttonRest);
+    const flattened = StyleSheet.flatten(style) as React.CSSProperties | undefined;
+
+    return (
+      <button
+        ref={mergedRef as React.Ref<HTMLButtonElement>}
+        {...domProps}
+        {...dataAttrs}
+        type="button"
+        {...ariaProps}
+        className={typeof className === 'string' ? className : undefined}
+        style={{ ...webButtonLayoutStyle, ...(flattened ?? {}) }}
+        data-testid={testID}
+        onClick={(e) => {
+          if (!ariaProps.disabled) {
+            handlers.onPress(e as unknown as Parameters<NonNullable<PressableProps['onPress']>>[0]);
+          }
+        }}
+        onPointerDown={(e) => {
+          handlers.onPressIn(
+            e as unknown as Parameters<NonNullable<PressableProps['onPressIn']>>[0],
+          );
+        }}
+        onPointerUp={(e) => {
+          handlers.onPressOut(
+            e as unknown as Parameters<NonNullable<PressableProps['onPressOut']>>[0],
+          );
+        }}
+        onPointerCancel={(e) => {
+          handlers.onPressOut(
+            e as unknown as Parameters<NonNullable<PressableProps['onPressOut']>>[0],
+          );
+        }}
+        onFocus={(e) => {
+          handlers.onFocus(e);
+        }}
+        onBlur={(e) => {
+          handlers.onBlur(e);
+        }}
+        onKeyDown={(e) => {
+          handlers.onKeyDown(e as unknown as KeyboardEvent);
+        }}
+      >
+        {typeof children === 'function' ? children(interactionState) : children}
+      </button>
+    );
+  },
+);
+
+SelectTrigger.displayName = 'SelectTrigger';

package/src/select/context.tsx

@@ -1,21 +1,12 @@
 import { createContext } from '@cdx-ui/utils';
-import type { InteractionState } from '../types';
 import type { SelectContextValue, SelectItemInteractionState } from './types';
 
 export const [SelectProvider, useSelectContext] =
   createContext<SelectContextValue>('SelectContext');
 
-/**
- * Propagates the trigger's interaction state (hover, focus, active, etc.) to
- * child components like SelectValue and SelectIcon so they can apply matching
- * data-attribute styles.
- */
-export const [SelectTriggerProvider, useSelectTriggerContext] =
-  createContext<InteractionState>('SelectTriggerContext');
-
 /**
  * Propagates the item's interaction and selection state (hover, focus, active,
- * highlighted, checked, etc.) to child components like SelectItemLabel.
+ * highlighted, checked, etc.) to child slots like `Select.ItemLabel`.
  */
 export const [SelectItemProvider, useSelectItemContext] =
   createContext<SelectItemInteractionState>('SelectItemContext');

package/src/select/index.ts

@@ -0,0 +1,17 @@
+export type {
+  ISelectContentProps,
+  ISelectItemLabelProps,
+  ISelectItemProps,
+  ISelectProps,
+  ISelectTriggerProps,
+  ISelectValueProps,
+  SelectContextValue,
+  SelectItemData,
+  SelectItemInteractionState,
+} from './types';
+
+export { useSelectContext, useSelectItemContext } from './context';
+export { SelectRoot, type SelectRootProps } from './SelectRoot';
+export { SelectTrigger, type SelectTriggerProps } from './SelectTrigger';
+export { SelectContent, type SelectContentProps } from './SelectContent';
+export { SelectItem, type SelectItemProps } from './SelectItem';

package/src/select/types.ts

@@ -1,4 +1,4 @@
-import type { PropsWithoutRef, ReactNode, RefAttributes, RefObject } from 'react';
+import type { ReactNode, RefObject } from 'react';
 import type { PressableProps, ViewProps } from 'react-native';
 import type { EntryOrExitLayoutType } from 'react-native-reanimated';
 import type { InteractionState } from '../types';
@@ -93,34 +93,3 @@ export interface SelectContextValue {
   /** From `Form.Field` via `useFormControl` on the select root (helper/error `aria-describedby`). */
   ariaDescribedBy?: string;
 }
-
-export type ISelectComponentType<
-  RootProps,
-  TriggerProps,
-  ValueProps,
-  IconProps,
-  ContentProps,
-  ItemProps,
-  ItemLabelProps,
-  TriggerRef = unknown,
-  ValueRef = unknown,
-> = React.ForwardRefExoticComponent<
-  PropsWithoutRef<RootProps & ISelectProps> & RefAttributes<unknown>
-> & {
-  Trigger: React.ForwardRefExoticComponent<
-    PropsWithoutRef<TriggerProps & ISelectTriggerProps> & RefAttributes<TriggerRef>
-  >;
-  Value: React.ForwardRefExoticComponent<
-    PropsWithoutRef<ValueProps & ISelectValueProps> & RefAttributes<ValueRef>
-  >;
-  Icon: React.ForwardRefExoticComponent<PropsWithoutRef<IconProps> & RefAttributes<unknown>>;
-  Content: React.ForwardRefExoticComponent<
-    PropsWithoutRef<ContentProps & ISelectContentProps> & RefAttributes<unknown>
-  >;
-  Item: React.ForwardRefExoticComponent<
-    PropsWithoutRef<ItemProps & ISelectItemProps> & RefAttributes<unknown>
-  >;
-  ItemLabel: React.ForwardRefExoticComponent<
-    PropsWithoutRef<ItemLabelProps & ISelectItemLabelProps> & RefAttributes<unknown>
-  >;
-};

package/src/select/useContentFocus.ts

@@ -18,7 +18,7 @@ export interface UseContentFocusOptions {
  * - Restores focus to the trigger when the overlay closes (web)
  * - Initializes `activeValue` to the current value or first enabled item
  *
- * Initial focus on open is handled via a ref callback in createSelectContent
+ * Initial focus on open is handled via a ref callback in SelectContent
  * to avoid timing issues with deferred portal rendering.
  */
 export function useContentFocus({

package/src/select/useSelectTrigger.ts

@@ -0,0 +1,359 @@
+import {
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ForwardedRef,
+  type RefCallback,
+} from 'react';
+import { type GestureResponderEvent, type PressableProps } from 'react-native';
+import {
+  composeEventHandlers,
+  mergeRefs,
+  useFormControlContext,
+  useReportFormControlLabelFocus,
+  type Focusable,
+} from '@cdx-ui/utils';
+import { useFocus, useFocusRing } from '@react-native-aria/focus';
+import { useHover, usePress } from '@react-native-aria/interactions';
+import type { InteractionState } from '../types';
+import { useSelectContext } from './context';
+
+const FIELD_STATES = {
+  'false:false': 'idle',
+  'false:true': 'invalid',
+  'true:false': 'focused',
+  'true:true': 'focused-invalid',
+} as const;
+
+export interface UseSelectTriggerOptions {
+  asChild?: boolean;
+  isHovered?: boolean;
+  isActive?: boolean;
+  isFocused?: boolean;
+  isFocusVisible?: boolean;
+  isDisabled?: boolean;
+  ariaDescribedBy?: string;
+  onPress?: PressableProps['onPress'];
+  onPressIn?: PressableProps['onPressIn'];
+  onPressOut?: PressableProps['onPressOut'];
+  onHoverIn?: PressableProps['onHoverIn'];
+  onHoverOut?: PressableProps['onHoverOut'];
+  onFocus?: (...args: unknown[]) => unknown;
+  onBlur?: (...args: unknown[]) => unknown;
+  onKeyDown?: (e: KeyboardEvent) => void;
+}
+
+export interface SelectTriggerAriaProps {
+  role: 'combobox';
+  'aria-label'?: string;
+  'aria-haspopup': 'listbox';
+  'aria-expanded': boolean;
+  'aria-controls': string;
+  'aria-activedescendant'?: string;
+  'aria-required'?: boolean;
+  'aria-invalid'?: boolean;
+  'aria-readonly'?: boolean;
+  'aria-describedby'?: string;
+  id: string;
+  disabled: boolean;
+}
+
+export interface SelectTriggerDataAttrValues {
+  hover?: boolean;
+  focus: boolean;
+  active: boolean;
+  disabled: boolean;
+  focusVisible?: boolean;
+  required: boolean;
+  invalid: boolean;
+  readonly: boolean;
+  state: 'open' | 'closed';
+  fieldState: string;
+}
+
+export interface SelectTriggerHandlers {
+  onPress: (e: GestureResponderEvent) => void;
+  onPressIn: NonNullable<PressableProps['onPressIn']>;
+  onPressOut: NonNullable<PressableProps['onPressOut']>;
+  onHoverIn: NonNullable<PressableProps['onHoverIn']>;
+  onHoverOut: NonNullable<PressableProps['onHoverOut']>;
+  onFocus: (...args: unknown[]) => unknown;
+  onBlur: (...args: unknown[]) => unknown;
+  onKeyDown: (e: KeyboardEvent) => void;
+}
+
+export interface UseSelectTriggerReturn {
+  ariaProps: SelectTriggerAriaProps;
+  dataAttrValues: SelectTriggerDataAttrValues;
+  interactionState: InteractionState;
+  mergedRef: RefCallback<unknown>;
+  handlers: SelectTriggerHandlers;
+  isLabelActive: boolean;
+  open: boolean;
+  labelFocusBridge: Focusable;
+}
+
+/**
+ * Shared logic for `Select.Trigger` across native and web. Each platform file is
+ * a thin host-element wrapper that spreads this hook's output. The hook composes
+ * interaction-state hooks, ARIA props, keyboard intent, press-to-toggle, the
+ * merged ref, and (where appropriate) the label-focus bridge.
+ *
+ * Native variant — Pressable is not natively labelable, so the label-focus
+ * bridge is always registered on `field.inputRef`.
+ */
+export function useSelectTrigger(
+  forwardedRef: ForwardedRef<unknown>,
+  options: UseSelectTriggerOptions,
+): UseSelectTriggerReturn {
+  /**
+   * `asChild` is part of the symmetric options shape for parity with the web variant,
+   * but the native hook always mounts the label-focus bridge (Pressable is never
+   * natively labelable) and Slot/Pressable share the same Pressable-shaped surface,
+   * so the option is intentionally unused here.
+   */
+  const {
+    isHovered: isHoveredProp,
+    isActive: isActiveProp,
+    isFocused: isFocusedProp,
+    isFocusVisible: isFocusVisibleProp,
+    isDisabled: isDisabledProp,
+    ariaDescribedBy: ariaDescribedByProp,
+    onPress: consumerOnPress,
+    onPressIn: consumerOnPressIn,
+    onPressOut: consumerOnPressOut,
+    onHoverIn: consumerOnHoverIn,
+    onHoverOut: consumerOnHoverOut,
+    onFocus: consumerOnFocus,
+    onBlur: consumerOnBlur,
+    onKeyDown: consumerOnKeyDown,
+  } = options;
+
+  const {
+    open,
+    setOpen,
+    disabled: contextDisabled,
+    required: contextRequired,
+    invalid: contextInvalid,
+    readOnly: contextReadOnly,
+    triggerId,
+    contentId,
+    triggerRef,
+    activeValue,
+    accessibilityLabel,
+    ariaDescribedBy: ariaDescribedByFromField,
+  } = useSelectContext();
+
+  const field = useFormControlContext();
+
+  const disabled = contextDisabled || !!isDisabledProp;
+
+  const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
+    isFocusVisible: boolean;
+    focusProps: {
+      onFocus?: (...args: unknown[]) => unknown;
+      onBlur?: (...args: unknown[]) => unknown;
+    };
+  };
+  const { pressProps, isPressed: isActive } = usePress({ isDisabled: disabled });
+  const { isFocused, focusProps } = useFocus() as {
+    isFocused: boolean;
+    focusProps: {
+      onFocus?: (...args: unknown[]) => unknown;
+      onBlur?: (...args: unknown[]) => unknown;
+    };
+  };
+  const { isHovered, hoverProps } = useHover();
+  const [triggerFocused, setTriggerFocused] = useState(false);
+
+  const handlePress = useCallback(
+    (_e: GestureResponderEvent) => {
+      if (!disabled) {
+        setOpen(!open);
+      }
+    },
+    [disabled, open, setOpen],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (disabled) {
+        return;
+      }
+
+      switch (e.key) {
+        case 'Enter':
+        case ' ':
+        case 'ArrowDown':
+        case 'ArrowUp': {
+          e.preventDefault();
+          setOpen(true);
+          break;
+        }
+      }
+    },
+    [disabled, setOpen],
+  );
+
+  /** `useFocus()` on Pressable can stay true on native after blur; use explicit focus/blur handlers. */
+  const isLabelActive = Boolean((open || triggerFocused) && !disabled);
+
+  useReportFormControlLabelFocus(isLabelActive);
+
+  useLayoutEffect(() => {
+    if (!open) {
+      setTriggerFocused(false);
+    }
+  }, [open]);
+
+  const interactionState = useMemo<InteractionState>(
+    () => ({
+      hover: !!(isHoveredProp || isHovered),
+      focus: !!(isFocusedProp || isFocused || open),
+      active: !!(isActiveProp || isActive),
+      disabled: !!disabled,
+      focusVisible: !!(isFocusVisibleProp || isFocusVisible),
+    }),
+    [
+      isHoveredProp,
+      isHovered,
+      isFocusedProp,
+      isFocused,
+      isActiveProp,
+      isActive,
+      disabled,
+      isFocusVisibleProp,
+      isFocusVisible,
+      open,
+    ],
+  );
+
+  /**
+   * Native: `Pressable` has no usable programmatic `.focus()` (unlike `TextInput`).
+   * `Form.Label` calls `focusInput()` → we register a bridge on `field.inputRef` that tries
+   * native focus, then opens the list (expected "tap label" behavior for a select).
+   */
+  const labelFocusGateRef = useRef({ disabled: false, readOnly: false });
+  labelFocusGateRef.current = {
+    disabled: !!disabled,
+    readOnly: !!contextReadOnly,
+  };
+
+  const labelFocusBridge = useMemo<Focusable>(
+    () => ({
+      focus() {
+        const { disabled: isOff, readOnly: isRO } = labelFocusGateRef.current;
+        if (isOff || isRO) {
+          return;
+        }
+        const node = triggerRef.current as { focus?: () => void } | null;
+        if (node != null && typeof node.focus === 'function') {
+          node.focus();
+        }
+        setOpen(true);
+      },
+    }),
+    [setOpen, triggerRef],
+  );
+
+  useLayoutEffect(() => {
+    if (!field.inputRef) {
+      return;
+    }
+    const r = field.inputRef;
+    r.current = labelFocusBridge;
+    return () => {
+      if (r.current === labelFocusBridge) {
+        r.current = null;
+      }
+    };
+  }, [field.inputRef, labelFocusBridge]);
+
+  const mergedRef = mergeRefs(forwardedRef, triggerRef) as RefCallback<unknown>;
+
+  const ariaDescribedBy = [ariaDescribedByFromField, ariaDescribedByProp].filter(Boolean).join(' ');
+
+  const ariaProps: SelectTriggerAriaProps = {
+    role: 'combobox',
+    'aria-label': accessibilityLabel,
+    'aria-haspopup': 'listbox',
+    'aria-expanded': open,
+    'aria-controls': contentId,
+    'aria-activedescendant': open && activeValue ? `${contentId}-option-${activeValue}` : undefined,
+    'aria-required': contextRequired || undefined,
+    'aria-invalid': contextInvalid || undefined,
+    'aria-readonly': contextReadOnly || undefined,
+    'aria-describedby': ariaDescribedBy || undefined,
+    id: triggerId,
+    disabled,
+  };
+
+  const fieldState =
+    FIELD_STATES[
+      `${interactionState.focus ? 'true' : 'false'}:${contextInvalid ? 'true' : 'false'}`
+    ];
+
+  const dataAttrValues: SelectTriggerDataAttrValues = {
+    hover: interactionState.hover,
+    focus: interactionState.focus,
+    active: interactionState.active,
+    disabled: interactionState.disabled,
+    focusVisible: interactionState.focusVisible,
+    required: !!contextRequired,
+    invalid: !!contextInvalid,
+    readonly: !!contextReadOnly,
+    state: open ? 'open' : 'closed',
+    fieldState,
+  };
+
+  const handlers: SelectTriggerHandlers = {
+    onPress: composeEventHandlers(consumerOnPress, handlePress) as SelectTriggerHandlers['onPress'],
+    onPressIn: composeEventHandlers(
+      consumerOnPressIn,
+      pressProps.onPressIn,
+    ) as SelectTriggerHandlers['onPressIn'],
+    onPressOut: composeEventHandlers(
+      consumerOnPressOut,
+      pressProps.onPressOut,
+    ) as SelectTriggerHandlers['onPressOut'],
+    onHoverIn: composeEventHandlers(
+      consumerOnHoverIn,
+      hoverProps.onHoverIn,
+    ) as SelectTriggerHandlers['onHoverIn'],
+    onHoverOut: composeEventHandlers(
+      consumerOnHoverOut,
+      hoverProps.onHoverOut,
+    ) as SelectTriggerHandlers['onHoverOut'],
+    onFocus: composeEventHandlers(
+      composeEventHandlers(
+        composeEventHandlers(consumerOnFocus, focusProps.onFocus),
+        focusRingProps.onFocus,
+      ),
+      () => setTriggerFocused(true),
+    ),
+    onBlur: composeEventHandlers(
+      composeEventHandlers(
+        composeEventHandlers(consumerOnBlur, focusProps.onBlur),
+        focusRingProps.onBlur,
+      ),
+      () => setTriggerFocused(false),
+    ),
+    onKeyDown: composeEventHandlers(
+      consumerOnKeyDown,
+      handleKeyDown,
+    ) as SelectTriggerHandlers['onKeyDown'],
+  };
+
+  return {
+    ariaProps,
+    dataAttrValues,
+    interactionState,
+    mergedRef,
+    handlers,
+    isLabelActive,
+    open,
+    labelFocusBridge,
+  };
+}