@expo/ui 55.0.5 → 55.0.6

package/src/jetpack-compose/AlertDialog/index.tsx

@@ -1,85 +1,138 @@
 import { requireNativeView } from 'expo';
 import { type ColorValue } from 'react-native';
 
-import { ExpoModifier } from '../../types';
+import { type ViewEvent, type ModifierConfig, type DialogProperties } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
-export type AlertDialogButtonColors = {
+/**
+ * Colors for the alert dialog, matching `AlertDialogDefaults` in Compose.
+ */
+export type AlertDialogColors = {
   /**
-   * The background color of the button.
+   * The background color of the dialog.
    */
   containerColor?: ColorValue;
   /**
-   * The text color of the button.
-   */
-  contentColor?: ColorValue;
-};
-
-export type AlertDialogProps = {
-  /**
-   * The title of the alert dialog.
+   * The color of the icon.
    */
-  title?: string;
+  iconContentColor?: ColorValue;
   /**
-   * The text of the alert dialog.
+   * The color of the title text.
    */
-  text?: string;
+  titleContentColor?: ColorValue;
   /**
-   * The text of the confirm button of the alert dialog.
+   * The color of the body text.
    */
-  confirmButtonText?: string;
-  /**
-   * The text of the dismiss button of the alert dialog.
-   */
-  dismissButtonText?: string;
+  textContentColor?: ColorValue;
+};
+
+export type AlertDialogProps = {
   /**
-   * The colors for the confirm button.
+   * Colors for the alert dialog.
    */
-  confirmButtonColors?: AlertDialogButtonColors;
+  colors?: AlertDialogColors;
   /**
-   * The colors for the dismiss button.
+   * The tonal elevation of the dialog in dp, which affects its background color
+   * based on the color scheme.
    */
-  dismissButtonColors?: AlertDialogButtonColors;
+  tonalElevation?: number;
   /**
-   * Whether the alert dialog is visible.
-   *
-   * @default false
+   * Properties for the dialog window.
    */
-  visible?: boolean;
+  properties?: DialogProperties;
   /**
-   * Callback that is called when the user tries to confirm the dialog.
+   * Callback that is called when the user tries to dismiss the dialog
+   * (for example, by tapping outside of it or pressing the back button).
    */
-  onConfirmPressed?: () => void;
+  onDismissRequest?: () => void;
   /**
-   * Callback that is called when the user tries to dismiss the dialog.
+   * Modifiers for the component.
    */
-  onDismissPressed?: () => void;
-
+  modifiers?: ModifierConfig[];
   /**
-   * Modifiers for the component.
+   * Children containing slot sub-components (`AlertDialog.Title`, `AlertDialog.Text`,
+   * `AlertDialog.ConfirmButton`, `AlertDialog.DismissButton`, `AlertDialog.Icon`).
    */
-  modifiers?: ExpoModifier[];
+  children?: React.ReactNode;
 };
 
-export type NativeAlertDialogProps = AlertDialogProps;
+type NativeAlertDialogProps = Omit<AlertDialogProps, 'onDismissRequest'> &
+  ViewEvent<'onDismissRequest', { onDismissRequest?: () => void }>;
 
 const AlertDialogNativeView: React.ComponentType<NativeAlertDialogProps> = requireNativeView(
   'ExpoUI',
   'AlertDialogView'
 );
 
-function transformProps(props: AlertDialogProps): NativeAlertDialogProps {
-  const { modifiers, ...restProps } = props;
+const SlotNativeView: React.ComponentType<{ slotName: string; children: React.ReactNode }> =
+  requireNativeView('ExpoUI', 'SlotView');
+
+function transformProps(
+  props: Omit<AlertDialogProps, 'children'>
+): Omit<NativeAlertDialogProps, 'children'> {
+  const { modifiers, onDismissRequest, ...restProps } = props;
   return {
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
+    onDismissRequest: () => {
+      onDismissRequest?.();
+    },
   };
 }
 
 /**
- * Renders an `AlertDialog` component.
+ * The title slot of the `AlertDialog`.
+ */
+function AlertDialogTitle(props: { children: React.ReactNode }) {
+  return <SlotNativeView slotName="title">{props.children}</SlotNativeView>;
+}
+
+/**
+ * The text (body) slot of the `AlertDialog`.
  */
-export function AlertDialog(props: AlertDialogProps) {
-  return <AlertDialogNativeView {...transformProps(props)} />;
+function AlertDialogText(props: { children: React.ReactNode }) {
+  return <SlotNativeView slotName="text">{props.children}</SlotNativeView>;
 }
+
+/**
+ * The confirm button slot of the `AlertDialog`.
+ */
+function AlertDialogConfirmButton(props: { children: React.ReactNode }) {
+  return <SlotNativeView slotName="confirmButton">{props.children}</SlotNativeView>;
+}
+
+/**
+ * The dismiss button slot of the `AlertDialog`.
+ */
+function AlertDialogDismissButton(props: { children: React.ReactNode }) {
+  return <SlotNativeView slotName="dismissButton">{props.children}</SlotNativeView>;
+}
+
+/**
+ * The icon slot of the `AlertDialog`.
+ */
+function AlertDialogIcon(props: { children: React.ReactNode }) {
+  return <SlotNativeView slotName="icon">{props.children}</SlotNativeView>;
+}
+
+/**
+ * Renders an `AlertDialog` component with slot-based content matching the Compose API.
+ * Content is provided via slot sub-components: `AlertDialog.Title`, `AlertDialog.Text`,
+ * `AlertDialog.ConfirmButton`, `AlertDialog.DismissButton`, and `AlertDialog.Icon`.
+ */
+function AlertDialogComponent(props: AlertDialogProps) {
+  const { children, ...restProps } = props;
+  return <AlertDialogNativeView {...transformProps(restProps)}>{children}</AlertDialogNativeView>;
+}
+
+AlertDialogComponent.Title = AlertDialogTitle;
+AlertDialogComponent.Text = AlertDialogText;
+AlertDialogComponent.ConfirmButton = AlertDialogConfirmButton;
+AlertDialogComponent.DismissButton = AlertDialogDismissButton;
+AlertDialogComponent.Icon = AlertDialogIcon;
+
+export { AlertDialogComponent as AlertDialog };
+
+// Re-exported so the docs generator includes DialogProperties on the AlertDialog API page.
+export type { DialogProperties };

package/src/jetpack-compose/BasicAlertDialog/index.tsx

@@ -1,6 +1,6 @@
 import { requireNativeView } from 'expo';
 
-import { type ViewEvent, type ExpoModifier } from '../../types';
+import { type ViewEvent, type ModifierConfig, type DialogProperties } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
 export type BasicAlertDialogProps = {
@@ -13,10 +13,14 @@ export type BasicAlertDialogProps = {
    * (e.g. by tapping outside of it or pressing the back button).
    */
   onDismissRequest?: () => void;
+  /**
+   * Properties for the dialog window.
+   */
+  properties?: DialogProperties;
   /**
    * Modifiers for the component.
    */
-  modifiers?: ExpoModifier[];
+  modifiers?: ModifierConfig[];
 };
 
 type NativeBasicAlertDialogProps = Omit<BasicAlertDialogProps, 'onDismissRequest'> &
@@ -49,3 +53,6 @@ function transformProps(props: BasicAlertDialogProps): NativeBasicAlertDialogPro
 export function BasicAlertDialog(props: BasicAlertDialogProps) {
   return <BasicAlertDialogNativeView {...transformProps(props)} />;
 }
+
+// Re-exported so the docs generator includes DialogProperties on the BasicAlertDialog API page.
+export type { DialogProperties };

package/src/jetpack-compose/Card/index.tsx

@@ -40,9 +40,11 @@ function createCardComponent<P extends { modifiers?: ModifierConfig[] }>(
   viewName: string
 ): React.ComponentType<P> {
   const NativeView: React.ComponentType<P> = requireNativeView('ExpoUI', viewName);
-  return function CardComponent(props: P) {
+  function Component(props: P) {
     return <NativeView {...transformProps(props)} />;
-  };
+  }
+  Component.displayName = viewName;
+  return Component;
 }
 
 // region Card

package/src/jetpack-compose/Divider/index.tsx

@@ -1,22 +1,25 @@
 import { requireNativeView } from 'expo';
+import { type ColorValue } from 'react-native';
 
-import { ExpoModifier } from '../../types';
+import { type ModifierConfig } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
-export type DividerProps = {
+export type DividerCommonConfig = {
+  /**
+   * Thickness of the divider line. Accepts dp values; use `StyleSheet.hairlineWidth` for a single-pixel line.
+   */
+  thickness?: number;
+  /**
+   * Color of the divider line.
+   */
+  color?: ColorValue;
   /**
    * Modifiers for the component.
    */
-  modifiers?: ExpoModifier[];
+  modifiers?: ModifierConfig[];
 };
 
-type NativeDividerProps = DividerProps;
-const DividerNativeView: React.ComponentType<NativeDividerProps> = requireNativeView(
-  'ExpoUI',
-  'DividerView'
-);
-
-function transformProps(props: DividerProps): NativeDividerProps {
+function transformProps(props: DividerCommonConfig): DividerCommonConfig {
   const { modifiers, ...restProps } = props;
   return {
     modifiers,
@@ -25,9 +28,26 @@ function transformProps(props: DividerProps): NativeDividerProps {
   };
 }
 
+function createDividerComponent(viewName: string): React.ComponentType<DividerCommonConfig> {
+  const NativeView: React.ComponentType<DividerCommonConfig> = requireNativeView(
+    'ExpoUI',
+    viewName
+  );
+  function Component(props: DividerCommonConfig) {
+    return <NativeView {...transformProps(props)} />;
+  }
+  Component.displayName = viewName;
+  return Component;
+}
+
 /**
- * A visual element that can be used to separate other content.
+ * A horizontal divider line that groups content in lists and layouts,
+ * matching Compose's `HorizontalDivider`.
  */
-export function Divider(props: DividerProps) {
-  return <DividerNativeView {...transformProps(props)} />;
-}
+export const HorizontalDivider = createDividerComponent('HorizontalDividerView');
+
+/**
+ * A vertical divider line that groups content in layouts,
+ * matching Compose's `VerticalDivider`.
+ */
+export const VerticalDivider = createDividerComponent('VerticalDividerView');

package/src/jetpack-compose/Progress/index.tsx

@@ -44,9 +44,11 @@ function createProgressComponent<P extends ProgressCommonConfig>(
   viewName: string
 ): React.ComponentType<P> {
   const NativeView: React.ComponentType<P> = requireNativeView('ExpoUI', viewName);
-  return function ProgressComponent(props: P) {
+  function Component(props: P) {
     return <NativeView {...transformProps(props)} />;
-  };
+  }
+  Component.displayName = viewName;
+  return Component;
 }
 
 // region LinearProgressIndicator

package/src/jetpack-compose/PullToRefreshBox/index.tsx

@@ -1,9 +1,30 @@
 import { requireNativeView } from 'expo';
+import { type ColorValue } from 'react-native';
 
-import { type ViewEvent, type ExpoModifier } from '../../types';
-import { align } from '../modifiers';
+import { type ViewEvent, type ModifierConfig } from '../../types';
+import { type ContentAlignment } from '../layout-types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
+/**
+ * Configuration for the loading indicator shown during pull-to-refresh.
+ */
+export type PullToRefreshIndicatorProps = {
+  /**
+   * Color of the loading indicator spinner.
+   * @default MaterialTheme.colorScheme.primary
+   */
+  color?: ColorValue;
+  /**
+   * Background color of the loading indicator container.
+   * @default MaterialTheme.colorScheme.surfaceContainerHigh
+   */
+  containerColor?: ColorValue;
+  /**
+   * Modifiers for the loading indicator.
+   */
+  modifiers?: ModifierConfig[];
+};
+
 export type PullToRefreshBoxProps = {
   /**
    * Whether the content is refreshing.
@@ -11,20 +32,22 @@ export type PullToRefreshBoxProps = {
    */
   isRefreshing?: boolean;
   /**
-   * Callback to call when the content is refreshed.
+   * Callback that is called when the user pulls to refresh.
    */
   onRefresh?: () => void;
   /**
-   * Modifiers for the component.
+   * Alignment of children within the box.
+   * @default 'topStart'
    */
-  modifiers?: ExpoModifier[];
-
+  contentAlignment?: ContentAlignment;
   /**
-   * Modifiers for the loading indicator.
-   * @default [align('topCenter'), padding(0, 10, 0, 0)]
+   * Configuration for the loading indicator shown during pull-to-refresh.
    */
-  loadingIndicatorModifiers?: ExpoModifier[];
-
+  indicator?: PullToRefreshIndicatorProps;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
   /**
    * The content to refresh.
    */
@@ -40,11 +63,6 @@ const NativePullToRefreshBoxView: React.ComponentType<NativePullToRefreshBoxProp
 function transformProps(props: PullToRefreshBoxProps): NativePullToRefreshBoxProps {
   const { isRefreshing, modifiers, onRefresh, ...restProps } = props;
 
-  const loadingIndicatorModifiers = props.loadingIndicatorModifiers ?? [
-    align('topCenter'),
-    // padding(0, 10, 0, 0),
-  ];
-
   return {
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
@@ -53,13 +71,12 @@ function transformProps(props: PullToRefreshBoxProps): NativePullToRefreshBoxPro
     onRefresh: () => {
       onRefresh?.();
     },
-    loadingIndicatorModifiers,
   };
 }
 
 /**
- * Renders a `PullToRefreshBox` component.
- * A box that allows the user to pull down to refresh the content.
+ * A pull-to-refresh container that wraps scrollable content and shows a refresh indicator when pulled,
+ * matching Compose's `PullToRefreshBox`.
  */
 export function PullToRefreshBox(props: PullToRefreshBoxProps) {
   return <NativePullToRefreshBoxView {...transformProps(props)} />;

package/src/jetpack-compose/Surface/index.tsx

@@ -2,9 +2,26 @@ import { requireNativeView } from 'expo';
 import React from 'react';
 import { type ColorValue } from 'react-native';
 
-import { type ExpoModifier } from '../../types';
+import { type ViewEvent, type ModifierConfig } from '../../types';
+import { parseJSXShape, ShapeJSXElement, type ShapeRecordProps } from '../Shape';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
+/**
+ * Border stroke configuration.
+ */
+export type SurfaceBorder = {
+  /**
+   * Border width in dp.
+   * @default 1
+   */
+  width?: number;
+  /**
+   * Border color.
+   * @default MaterialTheme.colorScheme.outline
+   */
+  color?: ColorValue;
+};
+
 export type SurfaceProps = {
   /**
    * The content to display inside the surface.
@@ -33,13 +50,58 @@ export type SurfaceProps = {
    * @default 0
    */
   shadowElevation?: number;
+  /**
+   * Shape configuration for clipping the surface.
+   */
+  shape?: ShapeJSXElement;
+  /**
+   * Border stroke drawn around the surface.
+   */
+  border?: SurfaceBorder;
+
+  /**
+   * Whether the surface is enabled and responds to user interaction.
+   *
+   * @default true
+   */
+  enabled?: boolean;
+
+  /**
+   * Whether the surface is in a selected state. When provided together with `onClick`,
+   * the surface becomes a selectable surface that visually reflects its selection state.
+   */
+  selected?: boolean;
+
+  /**
+   * Whether the surface is in a checked (toggled on) state. When provided together with
+   * `onCheckedChange`, the surface becomes a toggleable surface.
+   */
+  checked?: boolean;
+
+  /**
+   * Called when the surface is clicked. Providing this callback makes the surface clickable.
+   * When combined with `selected`, the surface becomes a selectable variant.
+   */
+  onClick?: () => void;
+
+  /**
+   * Called when the checked state of a toggleable surface changes.
+   * Providing this callback together with `checked` enables the toggleable variant.
+   */
+  onCheckedChange?: (checked: boolean) => void;
+
   /**
    * Modifiers for the component.
    */
-  modifiers?: ExpoModifier[];
+  modifiers?: ModifierConfig[];
 };
 
-type NativeSurfaceProps = SurfaceProps;
+type NativeSurfaceProps = Omit<SurfaceProps, 'onClick' | 'onCheckedChange' | 'shape'> &
+  ViewEvent<'onSurfaceClick', void> &
+  ViewEvent<'onCheckedChange', { value: boolean }> & {
+    clickable?: boolean;
+    shape?: ShapeRecordProps;
+  };
 
 const SurfaceNativeView: React.ComponentType<NativeSurfaceProps> = requireNativeView(
   'ExpoUI',
@@ -47,11 +109,20 @@ const SurfaceNativeView: React.ComponentType<NativeSurfaceProps> = requireNative
 );
 
 function transformProps(props: SurfaceProps): NativeSurfaceProps {
-  const { modifiers, ...restProps } = props;
+  const { modifiers, onClick, onCheckedChange, shape, ...restProps } = props;
+
   return {
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
+    clickable: !!onClick,
+    shape: parseJSXShape(shape),
+    onSurfaceClick: onClick ? () => onClick() : undefined,
+    onCheckedChange: onCheckedChange
+      ? (e: { nativeEvent: { value: boolean } }) => {
+          onCheckedChange(e.nativeEvent.value);
+        }
+      : undefined,
   };
 }