@cdx-ui/primitives 0.3.2 → 0.3.4

package/src/insight/InsightRoot.tsx

@@ -0,0 +1,162 @@
+import React, { forwardRef, useMemo, type ComponentRef } from 'react';
+import { Pressable, View, type PressableProps, type ViewProps } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { useFocus, useFocusRing } from '@react-native-aria/focus';
+import { useHover, usePress } from '@react-native-aria/interactions';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { splitContainerProps } from '../utils/splitContainerProps';
+import { InsightProvider } from './context';
+import type {
+  IInsightContextValue,
+  IInsightProps,
+  IInsightSummaryProps,
+  InsightLayout,
+} from './types';
+
+export type InsightRootProps = IInsightProps;
+
+type InsightRootRuntimeProps = Omit<IInsightSummaryProps, 'layout'> & {
+  layout?: InsightLayout;
+};
+
+export const InsightRoot = forwardRef<ComponentRef<typeof View>, InsightRootProps>((props, ref) => {
+  const {
+    layout = 'summary',
+    asChild = false,
+    children,
+    onPress,
+    isDisabled = false,
+    accessory,
+    pressableClassName,
+    style,
+    role,
+    onPressIn: onPressInProp,
+    onPressOut: onPressOutProp,
+    onHoverIn: onHoverInProp,
+    onHoverOut: onHoverOutProp,
+    ...restProps
+  } = props as InsightRootRuntimeProps;
+
+  const isPressable = layout === 'summary' && !!onPress;
+  const asChildElement = asChild && React.isValidElement(children);
+  const isSplit = accessory != null && (isPressable || asChildElement);
+
+  const pressState = usePress({ isDisabled: !isPressable || isDisabled });
+  const isPressed = isPressable && pressState.isPressed;
+  const pressProps = pressState.pressProps as Pick<PressableProps, 'onPressIn' | 'onPressOut'>;
+  const { hoverProps, isHovered } = useHover();
+  const { isFocused, focusProps } = useFocus();
+  const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
+    isFocusVisible: boolean;
+    focusProps: typeof focusProps;
+  };
+
+  const contextValue = useMemo<IInsightContextValue>(
+    () => ({ layout, isPressed, isPressable }),
+    [layout, isPressed, isPressable],
+  );
+
+  const interactionAttributes = isPressable
+    ? dataAttributes({
+        active: isPressed,
+        hover: isHovered,
+        focus: isFocused,
+        focusVisible: isFocusVisible,
+        disabled: isDisabled,
+      })
+    : undefined;
+
+  const {
+    onFocus: onFocusProp,
+    onBlur: onBlurProp,
+    accessibilityState: accessibilityStateProp,
+  } = restProps as Pick<PressableProps, 'onFocus' | 'onBlur' | 'accessibilityState'>;
+
+  const pressRegionProps = (): Record<string, unknown> => ({
+    role: role ?? 'button',
+    ...(isDisabled && { accessibilityState: { ...accessibilityStateProp, disabled: true } }),
+    disabled: isDisabled,
+    onPress: isDisabled ? undefined : onPress,
+    onPressIn: composeEventHandlers(onPressInProp, pressProps.onPressIn),
+    onPressOut: composeEventHandlers(onPressOutProp, pressProps.onPressOut),
+    onHoverIn: composeEventHandlers(onHoverInProp, hoverProps.onHoverIn),
+    onHoverOut: composeEventHandlers(onHoverOutProp, hoverProps.onHoverOut),
+    onFocus: composeEventHandlers(
+      composeEventHandlers(onFocusProp, focusProps.onFocus),
+      focusRingProps.onFocus,
+    ),
+    onBlur: composeEventHandlers(
+      composeEventHandlers(onBlurProp, focusProps.onBlur),
+      focusRingProps.onBlur,
+    ),
+  });
+
+  if (isSplit) {
+    const { container, region } = splitContainerProps(restProps);
+    const regionProps: Record<string, unknown> = {
+      ...region,
+      ...(role != null && { role }),
+      className: pressableClassName,
+      ...(isPressable && { ...pressRegionProps(), ...interactionAttributes }),
+    };
+    const RegionComp = asChildElement ? Slot : isPressable ? Pressable : View;
+
+    return (
+      <InsightProvider value={contextValue}>
+        <View
+          {...(container as ViewProps)}
+          ref={isPressable ? undefined : ref}
+          style={style}
+          {...mergeDataAttributes(container, interactionAttributes)}
+        >
+          <RegionComp
+            {...(regionProps as PressableProps)}
+            ref={isPressable ? (ref as React.Ref<View>) : undefined}
+          >
+            {children}
+          </RegionComp>
+          {accessory}
+        </View>
+      </InsightProvider>
+    );
+  }
+
+  if (isPressable) {
+    const Comp = asChildElement ? Slot : Pressable;
+    return (
+      <InsightProvider value={contextValue}>
+        <Comp
+          {...(restProps as PressableProps)}
+          {...(pressRegionProps() as PressableProps)}
+          ref={ref as React.Ref<View>}
+          style={style}
+          {...mergeDataAttributes(restProps, interactionAttributes)}
+        >
+          {children}
+        </Comp>
+      </InsightProvider>
+    );
+  }
+
+  if (asChildElement) {
+    return (
+      <InsightProvider value={contextValue}>
+        <Slot {...(restProps as ViewProps)} ref={ref as React.Ref<View>} style={style} role={role}>
+          {children}
+        </Slot>
+      </InsightProvider>
+    );
+  }
+
+  return (
+    <InsightProvider value={contextValue}>
+      <View {...(restProps as ViewProps)} ref={ref} style={style} role={role}>
+        {children}
+        {accessory}
+      </View>
+    </InsightProvider>
+  );
+});
+
+InsightRoot.displayName = 'InsightRoot';

package/src/insight/context.tsx

@@ -0,0 +1,5 @@
+import { createContext } from '@cdx-ui/utils';
+import type { IInsightContextValue } from './types';
+
+export const [InsightProvider, useInsightContext] =
+  createContext<IInsightContextValue>('InsightContext');

package/src/insight/index.ts

@@ -0,0 +1,11 @@
+export type {
+  IInsightContextValue,
+  IInsightDetailProps,
+  IInsightPressablePassthrough,
+  IInsightProps,
+  IInsightSummaryProps,
+  InsightLayout,
+} from './types';
+
+export { InsightProvider, useInsightContext } from './context';
+export { InsightRoot, type InsightRootProps } from './InsightRoot';

package/src/insight/types.ts

@@ -0,0 +1,51 @@
+import type { ReactNode } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
+
+export type InsightLayout = 'summary' | 'detail';
+
+export type IInsightPressablePassthrough = Partial<
+  Pick<PressableProps, 'onPressIn' | 'onPressOut' | 'onHoverIn' | 'onHoverOut'>
+>;
+
+interface IInsightBaseProps extends ViewProps {
+  /** Merge props onto a single child instead of rendering `View` or `Pressable`. */
+  asChild?: boolean;
+  /**
+   * Interactive control that must sit beside the press region, never inside it (the styled
+   * layer's close button). On a pressable summary the root renders a non-interactive container
+   * holding the press region and the accessory as siblings. The container receives
+   * `className`, `style`, and data attributes, and mirrors the region's interaction state as
+   * `data-*`; the region receives `ref` and every other prop, so `ref` always targets the
+   * focusable press region of a pressable root. A static root renders the accessory after
+   * `children` and keeps `ref` on its `View`.
+   */
+  accessory?: ReactNode;
+  /** Class names for the press region when `accessory` splits the root. */
+  pressableClassName?: string;
+}
+
+export interface IInsightSummaryProps extends IInsightBaseProps, IInsightPressablePassthrough {
+  /**
+   * Inline card that navigates elsewhere when pressed.
+   * @default 'summary'
+   */
+  layout?: 'summary';
+  /** When set, the root renders a press region with `role="button"`. */
+  onPress?: PressableProps['onPress'];
+  /** Suppresses `onPress` and marks the press region disabled. */
+  isDisabled?: boolean;
+}
+
+export interface IInsightDetailProps extends IInsightBaseProps {
+  /** Static container. It holds its own actions, so it is never pressable. */
+  layout: 'detail';
+}
+
+/** Discriminated union: `layout` narrows the press props to the summary layout. */
+export type IInsightProps = IInsightSummaryProps | IInsightDetailProps;
+
+export interface IInsightContextValue {
+  layout: InsightLayout;
+  isPressed: boolean;
+  isPressable: boolean;
+}

package/src/list-item/ListItemRoot.tsx

@@ -6,6 +6,7 @@ import { useHover, usePress } from '@react-native-aria/interactions';
 import type { InteractionState } from '../types';
 import { Slot } from '../slot';
 import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { splitContainerProps } from '../utils/splitContainerProps';
 import { ListItemProvider } from './context';
 import type { IListItemPressablePassthrough, IListItemProps, ListItemCrossAlign } from './types';
 
@@ -17,20 +18,6 @@ function rowStyleForCrossAlign(crossAlign: ListItemCrossAlign) {
   };
 }
 
-/** Splits the props a split row's container keeps (`className`, data attributes) from the rest. */
-function splitContainerProps(props: Record<string, unknown>) {
-  const container: Record<string, unknown> = {};
-  const region: Record<string, unknown> = {};
-  for (const key in props) {
-    if (key === 'className' || key === 'dataSet' || key.startsWith('data-')) {
-      container[key] = props[key];
-    } else {
-      region[key] = props[key];
-    }
-  }
-  return { container, region };
-}
-
 export interface ListItemRootProps extends IListItemProps {}
 
 export const ListItemRoot = forwardRef<ComponentRef<typeof View>, ListItemRootProps>(

package/src/select/SelectContent.tsx

@@ -1,14 +1,29 @@
-import React, { forwardRef, useCallback, useRef, type ComponentRef } from 'react';
+import React, { forwardRef, useCallback, useMemo, useRef, type ComponentRef } from 'react';
 import { Platform, View } from 'react-native';
 import { FadeIn, FadeOut } from 'react-native-reanimated';
 import { composeEventHandlers, mergeRefs } from '@cdx-ui/utils';
+import { FocusScope } from '@react-native-aria/focus';
 import { OverlayContainer, useAnchoredOverlay, useDismissOverlay, useEscapeKey } from '../overlay';
 import { Slot } from '../slot';
 import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
-import { useSelectContext } from './context';
+import { SelectContentProvider, useSelectContext } from './context';
+import { getPopupRoleProps } from './popupRole';
+import { SelectDismissButton } from './SelectDismissButton';
 import type { ISelectContentProps } from './types';
 import { useContentFocus } from './useContentFocus';
 import { useListboxNavigation } from './useListboxNavigation';
+import { useQueryHighlight } from './useQueryHighlight';
+
+/**
+ * Keeps DOM focus in the search input when the pointer goes down elsewhere in the popup, so
+ * typing continues after an option is clicked (virtual focus).
+ */
+function keepSearchInputFocus(e: { target: unknown; preventDefault: () => void }) {
+  const target = e.target as { closest?: (selector: string) => unknown } | null;
+  if (target?.closest?.('input, textarea') == null) {
+    e.preventDefault();
+  }
+}
 
 export interface SelectContentProps extends ISelectContentProps {
   asChild?: boolean;
@@ -27,6 +42,7 @@ export const SelectContent = forwardRef<ComponentRef<typeof View>, SelectContent
       placement = 'bottom-start',
       offset = 4,
       crossOffset = 0,
+      dismissAccessibilityLabel = 'Dismiss',
       ...props
     },
     ref,
@@ -38,25 +54,22 @@ export const SelectContent = forwardRef<ComponentRef<typeof View>, SelectContent
       triggerId,
       activeValue,
       setActiveValue,
-      value,
-      onValueChange,
+      type,
+      selectedValues,
+      toggleValue,
+      selectValueAndClose,
+      isItemDisabled,
       native,
       triggerRef,
-      items,
+      inputValue,
+      visibleItems,
+      hasSearch,
+      labelId,
+      accessibilityLabel,
     } = useSelectContext();
 
     const contentRef = useRef<HTMLElement | null>(null);
-
-    const focusOnMount = useCallback((node: unknown) => {
-      contentRef.current = node as HTMLElement | null;
-      if (node && Platform.OS === 'web') {
-        requestAnimationFrame(() => {
-          setTimeout(() => {
-            (node as HTMLElement).focus?.();
-          }, 100);
-        });
-      }
-    }, []);
+    const dismissButtonRef = useRef<HTMLButtonElement | null>(null);
 
     const dismiss = useCallback(() => setOpen(false), [setOpen]);
 
@@ -73,35 +86,42 @@ export const SelectContent = forwardRef<ComponentRef<typeof View>, SelectContent
       collisionBehavior: 'flip-shift',
       width: 'anchor',
     });
-    const mergedRef = mergeRefs(ref, focusOnMount as unknown as React.Ref<View>, floatingRef);
+    const mergedRef = mergeRefs(ref, contentRef as unknown as React.Ref<View>, floatingRef);
 
-    useDismissOverlay(overlayOpen, contentRef, [triggerRef], dismiss);
+    useDismissOverlay(overlayOpen, contentRef, [triggerRef, dismissButtonRef], dismiss);
     useEscapeKey(overlayOpen, dismiss);
 
     const { handleKeyDown } = useListboxNavigation({
-      items,
+      items: visibleItems,
       activeValue,
       setActiveValue,
-      onSelect: (val) => {
-        onValueChange(val);
-        setOpen(false);
-      },
+      type,
+      onToggle: toggleValue,
+      onSelectAndClose: selectValueAndClose,
+      isItemDisabled,
       onDismiss: dismiss,
+      isSearch: hasSearch,
     });
 
-    useContentFocus({
+    useContentFocus({ open, triggerRef, setActiveValue });
+
+    useQueryHighlight({
       open,
-      triggerRef,
-      items,
-      value,
+      inputValue,
+      visibleItems,
+      selectedValues,
+      isItemDisabled,
+      activeValue,
       setActiveValue,
     });
 
+    const contentContext = useMemo(() => ({ handleKeyDown }), [handleKeyDown]);
+
     if (!overlayOpen) {
       return null;
     }
 
-    const webProps =
+    const platformProps =
       Platform.OS === 'web'
         ? {
             onKeyDown: composeEventHandlers(
@@ -109,38 +129,53 @@ export const SelectContent = forwardRef<ComponentRef<typeof View>, SelectContent
               handleKeyDown,
             ),
             tabIndex: -1,
+            'aria-multiselectable': (!hasSearch && type === 'multiple') || undefined,
+            ...(hasSearch ? { onMouseDown: keepSearchInputFocus } : {}),
           }
-        : {};
+        : { onAccessibilityEscape: composeEventHandlers(props.onAccessibilityEscape, dismiss) };
+
+    const roleProps = getPopupRoleProps({ hasSearch, labelId, accessibilityLabel, triggerId });
 
     const Comp = asChild ? Slot : View;
 
     return (
-      <OverlayContainer
-        onDismiss={dismiss}
-        entering={enteringAnimation ?? FadeIn.duration(150)}
-        exiting={exitingAnimation ?? FadeOut.duration(100)}
-      >
-        <Comp
-          ref={mergedRef}
-          onLayout={composeEventHandlers(onLayout, onFloatingLayout)}
-          style={[style, overlayStyle]}
-          role="listbox"
-          id={contentId}
-          aria-labelledby={triggerId}
-          {...props}
-          {...mergeDataAttributes(
-            props,
-            dataAttributes({
-              state: 'open',
-              side: position?.resolvedPlacement.side,
-              align: position?.resolvedPlacement.align,
-            }),
-          )}
-          {...webProps}
+      <SelectContentProvider value={contentContext}>
+        <OverlayContainer
+          onDismiss={dismiss}
+          entering={enteringAnimation ?? FadeIn.duration(150)}
+          exiting={exitingAnimation ?? FadeOut.duration(100)}
         >
-          {children}
-        </Comp>
-      </OverlayContainer>
+          {/* With search, autofocus lands on the input; otherwise options are not tabbable, so it
+              falls back to the focusable popup. Nested in the React tree, the scope also lets focus
+              enter this body-portalled popup from inside a `Drawer`'s contained scope. */}
+          <FocusScope autoFocus>
+            <Comp
+              ref={mergedRef}
+              onLayout={composeEventHandlers(onLayout, onFloatingLayout)}
+              style={[style, overlayStyle]}
+              id={contentId}
+              {...roleProps}
+              {...props}
+              {...mergeDataAttributes(
+                props,
+                dataAttributes({
+                  state: 'open',
+                  side: position?.resolvedPlacement.side,
+                  align: position?.resolvedPlacement.align,
+                }),
+              )}
+              {...platformProps}
+            >
+              {children}
+            </Comp>
+            <SelectDismissButton
+              ref={dismissButtonRef}
+              onDismiss={dismiss}
+              accessibilityLabel={dismissAccessibilityLabel}
+            />
+          </FocusScope>
+        </OverlayContainer>
+      </SelectContentProvider>
     );
   },
 );

package/src/select/SelectDismissButton.tsx

@@ -0,0 +1,14 @@
+import { forwardRef } from 'react';
+
+export interface SelectDismissButtonProps {
+  onDismiss: () => void;
+  accessibilityLabel: string;
+}
+
+/**
+ * Web-only. Native screen readers close the popup with the iOS escape gesture
+ * (`onAccessibilityEscape` on `SelectContent`) and Android back (`onRequestClose`).
+ */
+export const SelectDismissButton = forwardRef<unknown, SelectDismissButtonProps>(() => null);
+
+SelectDismissButton.displayName = 'SelectDismissButton';

package/src/select/SelectDismissButton.web.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from 'react';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import type { SelectDismissButtonProps } from './SelectDismissButton';
+
+export type { SelectDismissButtonProps };
+
+/**
+ * Visually hidden close control for screen-reader users, who cannot press Escape or click
+ * outside while browsing the popup. Out of the Tab order (Tab already closes the listbox).
+ * Rendered as a sibling of the listbox because a listbox may only own options.
+ */
+export const SelectDismissButton = forwardRef<HTMLButtonElement, SelectDismissButtonProps>(
+  ({ onDismiss, accessibilityLabel }, ref) => (
+    <VisuallyHidden>
+      <button
+        ref={ref}
+        type="button"
+        tabIndex={-1}
+        aria-label={accessibilityLabel}
+        onClick={onDismiss}
+      />
+    </VisuallyHidden>
+  ),
+);
+
+SelectDismissButton.displayName = 'SelectDismissButton';

package/src/select/SelectEmpty.tsx

@@ -0,0 +1,61 @@
+import {
+  Children,
+  forwardRef,
+  isValidElement,
+  useLayoutEffect,
+  type ComponentRef,
+  type ReactNode,
+} from 'react';
+import { View } from 'react-native';
+import { Slot } from '../slot';
+import { useSelectContext } from './context';
+import type { ISelectEmptyProps } from './types';
+
+export interface SelectEmptyProps extends ISelectEmptyProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+function getTextContent(node: ReactNode): string {
+  return Children.toArray(node)
+    .map((child) => {
+      if (typeof child === 'string' || typeof child === 'number') {
+        return String(child);
+      }
+      if (isValidElement<{ children?: ReactNode }>(child)) {
+        return getTextContent(child.props.children);
+      }
+      return '';
+    })
+    .join('');
+}
+
+/**
+ * Renders only when no option matches. Its text is also what the search live region
+ * announces in that case.
+ */
+export const SelectEmpty = forwardRef<ComponentRef<typeof View>, SelectEmptyProps>(
+  ({ asChild, children, ...props }, ref) => {
+    const { visibleItems, setEmptyText } = useSelectContext();
+    const text = getTextContent(children);
+
+    useLayoutEffect(() => {
+      setEmptyText(text || undefined);
+      return () => setEmptyText(undefined);
+    }, [setEmptyText, text]);
+
+    if (visibleItems.length > 0) {
+      return null;
+    }
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp ref={ref} {...props}>
+        {children}
+      </Comp>
+    );
+  },
+);
+
+SelectEmpty.displayName = 'SelectEmpty';

package/src/select/SelectItem.tsx

@@ -1,5 +1,12 @@
-import { forwardRef, useCallback, useMemo, type ComponentRef, type ReactNode } from 'react';
-import { Pressable } from 'react-native';
+import {
+  forwardRef,
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  type ComponentRef,
+  type ReactNode,
+} from 'react';
+import { Platform, Pressable } from 'react-native';
 import { composeEventHandlers } from '@cdx-ui/utils';
 import { useFocus, useFocusRing } from '@react-native-aria/focus';
 import { useHover, usePress } from '@react-native-aria/interactions';
@@ -13,6 +20,12 @@ export interface SelectItemProps extends Omit<ISelectItemProps, 'children'> {
   children?: ReactNode;
 }
 
+/**
+ * Options are reached through the highlight (`aria-activedescendant`), not the Tab order, so
+ * popup autofocus lands on the search input or the listbox rather than the first option.
+ */
+const WEB_OPTION_PROPS = Platform.OS === 'web' ? { tabIndex: -1 as const } : {};
+
 export const SelectItem = forwardRef<ComponentRef<typeof Pressable>, SelectItemProps>(
   (
     {
@@ -30,18 +43,32 @@ export const SelectItem = forwardRef<ComponentRef<typeof Pressable>, SelectItemP
     ref,
   ) => {
     const {
-      value: selectedValue,
-      onValueChange,
-      setOpen,
+      isSelected,
+      commitValue,
       activeValue,
+      setActiveValue,
       contentId,
+      items,
       disabled: contextDisabled,
+      registerDisabledItem,
+      isItemVisible,
     } = useSelectContext();
 
-    const disabled = contextDisabled || !!disabledProp || !!isDisabledProp;
-    const checked = selectedValue === itemValue;
+    const isDisabledByItem = !!disabledProp || !!isDisabledProp;
+    const disabled =
+      contextDisabled ||
+      isDisabledByItem ||
+      items.some((item) => item.value === itemValue && !!item.disabled);
+    const checked = isSelected(itemValue);
     const highlighted = activeValue === itemValue;
 
+    useLayoutEffect(() => {
+      if (isDisabledByItem) {
+        return registerDisabledItem(itemValue);
+      }
+      return undefined;
+    }, [isDisabledByItem, itemValue, registerDisabledItem]);
+
     const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
       isFocusVisible: boolean;
       focusProps: {
@@ -55,10 +82,10 @@ export const SelectItem = forwardRef<ComponentRef<typeof Pressable>, SelectItemP
 
     const handlePress = useCallback(() => {
       if (!disabled) {
-        onValueChange(itemValue);
-        setOpen(false);
+        setActiveValue(itemValue);
+        commitValue(itemValue);
       }
-    }, [disabled, itemValue, onValueChange, setOpen]);
+    }, [disabled, itemValue, commitValue, setActiveValue]);
 
     const interactionState = useMemo(
       () => ({
@@ -85,6 +112,10 @@ export const SelectItem = forwardRef<ComponentRef<typeof Pressable>, SelectItemP
       ],
     );
 
+    if (!isItemVisible(itemValue)) {
+      return null;
+    }
+
     const Comp = asChild ? Slot : Pressable;
 
     return (
@@ -96,6 +127,7 @@ export const SelectItem = forwardRef<ComponentRef<typeof Pressable>, SelectItemP
           aria-selected={checked}
           aria-disabled={disabled}
           disabled={disabled}
+          {...WEB_OPTION_PROPS}
           {...props}
           {...mergeDataAttributes(
             props,