@expo/ui 57.0.22 → 57.0.24

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

@@ -4,6 +4,7 @@ import type { LayoutChangeEvent } from 'react-native';
 
 import { PresentedContentContext, useIsPresentedInOwnWindow } from '../../PresentedContentContext';
 import type { ModifierConfig } from '../../types';
+import { resolveMatchContents } from '../../utils/matchContents';
 import type { PrimitiveBaseProps } from '../layout';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
@@ -11,10 +12,12 @@ export interface RNHostProps extends PrimitiveBaseProps {
   /**
    * When `true`, the RNHost will update its size in the Jetpack Compose view tree to match the children's size.
    * When `false`, the RNHost will use the size of the parent Jetpack Compose View.
+   * Pass an object to choose per axis. For example, `{ vertical: true }` takes the width from the
+   * parent and the height from the children, so text wraps and grows vertically.
    * Can be only set once on mount.
    * @default false
    */
-  matchContents?: boolean;
+  matchContents?: boolean | { vertical?: boolean; horizontal?: boolean };
   /**
    * Called on mount and whenever this view's layout in the React Native view tree changes.
    * With `matchContents`, the reported size is the one measured from the hosted view.
@@ -30,8 +33,10 @@ export interface RNHostProps extends PrimitiveBaseProps {
   modifiers?: ModifierConfig[];
 }
 
-type NativeRNHostProps = RNHostProps & {
+type NativeRNHostProps = Omit<RNHostProps, 'matchContents'> & {
   layoutRoot: boolean;
+  matchContentsHorizontal: boolean;
+  matchContentsVertical: boolean;
   /**
    * Internal. Drives the shadow node's content measurement, see
    * `ExpoViewShadowNode::sizesToContent`.
@@ -44,13 +49,17 @@ const NativeRNHostView: ComponentType<NativeRNHostProps> = requireNativeView(
 );
 
 function transformProps(props: RNHostProps, layoutRoot: boolean): NativeRNHostProps {
-  const { modifiers, ...restProps } = props;
+  const { modifiers, matchContents, ...restProps } = props;
+  const { horizontal: matchContentsHorizontal, vertical: matchContentsVertical } =
+    resolveMatchContents(matchContents);
   return {
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
     layoutRoot,
-    expoInternalSizeFromChildren: props.matchContents,
+    matchContentsHorizontal,
+    matchContentsVertical,
+    expoInternalSizeFromChildren: matchContentsHorizontal || matchContentsVertical,
   };
 }
 
@@ -61,12 +70,14 @@ export function RNHostView(props: RNHostProps) {
   // is what makes a `Pressable` drop its press on the first finger movement.
   const layoutRoot = useIsPresentedInOwnWindow();
 
+  const nativeProps = transformProps(props, layoutRoot);
+
   return (
     <NativeRNHostView
-      {...transformProps(props, layoutRoot)}
+      {...nativeProps}
       // `matchContents` can only be used once on mount
       // So we force unmount when it changes to prevent unexpected layout
-      key={props.matchContents ? 'matchContents' : 'noMatchContents'}>
+      key={`${nativeProps.matchContentsHorizontal}-${nativeProps.matchContentsVertical}`}>
       {/* Reset context here so only nearest RNHostView becomes the layout root for its children, and not any other RNHostView above it in the tree. */}
       <PresentedContentContext.Provider value={false}>
         {props.children}

package/src/swift-ui/Chart/index.tsx

@@ -102,6 +102,16 @@ export type PieChartStyle = {
    * Space between slices in points.
    */
   angularInset?: number;
+  /**
+   * Corner radius of each slice in points. On a donut, half the ring's thickness gives fully rounded ends.
+   * @default 0
+   */
+  cornerRadius?: number;
+  /**
+   * Opacity of each slice, from 0 to 1.
+   * @default 0.8
+   */
+  opacity?: number;
 };
 
 /**

package/src/swift-ui/RNHostView.tsx

@@ -2,6 +2,7 @@ import { requireNativeView } from 'expo';
 import type { LayoutChangeEvent } from 'react-native';
 
 import { PresentedContentContext, useIsPresentedInOwnWindow } from '../PresentedContentContext';
+import { resolveMatchContents } from '../utils/matchContents';
 
 const RNHostNativeView: React.ComponentType<any> = requireNativeView('ExpoUI', 'RNHostView');
 
@@ -10,10 +11,12 @@ export interface RNHostViewProps {
    * When `true`, the RNHost will update its size in the React Native view tree to match the
    * children's size.
    * When `false`, the RNHost will use the size of the parent SwiftUI View.
+   * Pass an object to choose per axis. For example, `{ vertical: true }` takes the width from the
+   * parent and the height from the children, so text wraps and grows vertically.
    * Can be only set once on mount.
    * @default false
    */
-  matchContents?: boolean;
+  matchContents?: boolean | { vertical?: boolean; horizontal?: boolean };
   onLayout?: (event: LayoutChangeEvent) => void;
   /**
    * The RN View to be hosted.
@@ -21,21 +24,25 @@ export interface RNHostViewProps {
   children: React.ReactElement;
 }
 
-export function RNHostView(props: RNHostViewProps) {
+export function RNHostView({ matchContents, ...props }: RNHostViewProps) {
   // A sheet or popover presents its content in its own view controller, where the React Native
   // surface root is not an ancestor and so touch dispatches don't work.
   // Hosted content there owns its touches and is the origin it is measured from; native reads
   // this one prop for both.
   const layoutRoot = useIsPresentedInOwnWindow();
+  const { horizontal: matchContentsHorizontal, vertical: matchContentsVertical } =
+    resolveMatchContents(matchContents);
 
   return (
     <RNHostNativeView
       {...props}
       layoutRoot={layoutRoot}
-      expoInternalSizeFromChildren={props.matchContents}
+      matchContentsHorizontal={matchContentsHorizontal}
+      matchContentsVertical={matchContentsVertical}
+      expoInternalSizeFromChildren={matchContentsHorizontal || matchContentsVertical}
       // `matchContents` can only be used once on mount
       // So we force unmount when it changes to prevent unexpected layout
-      key={props.matchContents ? 'matchContents' : 'noMatchContents'}>
+      key={`${matchContentsHorizontal}-${matchContentsVertical}`}>
       {/* Reset context here so only nearest RNHostView becomes the layout root for its children, and not any other RNHostView above it in the tree. */}
       <PresentedContentContext.Provider value={false}>
         {props.children}

package/src/swift-ui/modifiers/index.ts

@@ -1957,6 +1957,7 @@ export * from './presentationModifiers';
 export * from './environment';
 export type { ShapeStyle } from './shapeStyle';
 export * from './scrollPosition';
+export * from './searchable';
 export * from './symbolEffect';
 export * from './scrollObservation';
 export * from './widgets';

package/src/swift-ui/modifiers/presentationModifiers.ts

@@ -130,12 +130,28 @@ export const interactiveDismissDisabled = (isDisabled: boolean = true) =>
  */
 export type PresentationSizingType = 'automatic' | 'fitted' | 'form' | 'page';
 
+/**
+ * Options for the `presentationSizing` modifier.
+ */
+export type PresentationSizingOptions = {
+  /**
+   * The axes on which the sheet fits its content. An axis that is not set keeps the size from
+   * `sizing`. For example, `{ horizontal: false, vertical: true }` fits the height to the content
+   * and lets the system choose the width.
+   * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/presentationsizing/fitted(horizontal:vertical:)).
+   */
+  fitted?: { horizontal?: boolean; vertical?: boolean };
+};
+
 /**
  * Sets the sizing of a sheet presentation.
  * @param sizing - The sizing behavior to apply.
+ * @param options - Additional sizing options.
  * @platform ios 18.0+
  * @platform tvos 18.0+
  * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/presentationsizing(_:)).
  */
-export const presentationSizing = (sizing: PresentationSizingType) =>
-  createModifier('presentationSizing', { sizing });
+export const presentationSizing = (
+  sizing: PresentationSizingType,
+  options?: PresentationSizingOptions
+) => createModifier('presentationSizing', { sizing, ...options });

package/src/swift-ui/modifiers/searchable.ts

@@ -0,0 +1,107 @@
+import { createModifier, createModifierWithEventListener } from './createModifier';
+import { getStateId, type ObservableState } from '../../State';
+
+/**
+ * The placement of a search field in a view hierarchy.
+ *
+ * - `automatic`: SwiftUI places the search field automatically.
+ * - `toolbar`: The search field appears in the toolbar. Falls back to `automatic` on tvOS.
+ * - `sidebar`: The search field appears in the sidebar of a navigation view. Falls back to
+ *   `automatic` on tvOS.
+ * - `navigationBarDrawer`: The search field appears in the navigation bar. Falls back to
+ *   `automatic` on macOS and tvOS.
+ */
+export type SearchFieldPlacement = 'automatic' | 'toolbar' | 'sidebar' | 'navigationBarDrawer';
+
+/**
+ * Marks this view as searchable, which configures the display of a search field.
+ *
+ * @param text - The text to display and edit in the search field. An `ObservableState<string>`
+ *   created with `useNativeState`.
+ * @param options.placement - The preferred placement of the search field within the containing
+ *   view hierarchy. Defaults to `automatic`.
+ * @param options.prompt - The prompt of the search field, which provides users with guidance on
+ *   what to search for.
+ * @param options.onChange - Fires on the JS thread when the user edits or clears the search field.
+ *   It does not fire for values written from JavaScript.
+ *
+ * @platform ios
+ * @platform tvos
+ * @platform macos
+ *
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/searchable(text:placement:prompt:)-18a8f).
+ *
+ * @example
+ * ```tsx
+ * const query = useNativeState('');
+ *
+ * <Host>
+ *   <NavigationStack>
+ *     <List
+ *       modifiers={[
+ *         searchable(query, {
+ *           prompt: 'Search agents',
+ *           onChange: (text) => setFilter(text),
+ *         }),
+ *       ]}>
+ *       {rows.map((row) => (
+ *         <Text key={row.id}>{row.name}</Text>
+ *       ))}
+ *     </List>
+ *   </NavigationStack>
+ * </Host>
+ * ```
+ */
+export const searchable = (
+  text: ObservableState<string>,
+  options?: {
+    placement?: SearchFieldPlacement;
+    prompt?: string;
+    onChange?: (text: string) => void;
+  }
+) => {
+  const params = {
+    text: getStateId(text),
+    placement: options?.placement,
+    prompt: options?.prompt,
+  };
+  const onChange = options?.onChange;
+  if (onChange) {
+    return createModifierWithEventListener(
+      'searchable',
+      (event: { text?: string }) => onChange(event?.text ?? ''),
+      params
+    );
+  }
+  return createModifier('searchable', params);
+};
+
+/**
+ * The behavior of a search field in a toolbar.
+ *
+ * - `automatic`: The automatic behavior.
+ * - `minimize`: A search toolbar behavior that prefers rendering a search field as a button-like
+ *   control. Falls back to `automatic` on macOS and tvOS.
+ */
+export type SearchToolbarBehavior = 'automatic' | 'minimize';
+
+/**
+ * Configures the behavior for search in the toolbar.
+ *
+ * On iOS below 26.0, the modifier is a no-op.
+ *
+ * @param behavior - The search field behavior.
+ *
+ * @platform ios 26.0+
+ * @platform tvos 26.0+
+ * @platform macos 26.0+
+ *
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/searchtoolbarbehavior(_:)).
+ *
+ * @example
+ * ```tsx
+ * <List modifiers={[searchable(query), searchToolbarBehavior('minimize')]}>
+ * ```
+ */
+export const searchToolbarBehavior = (behavior: SearchToolbarBehavior) =>
+  createModifier('searchToolbarBehavior', { behavior });

package/src/types.ts

@@ -50,3 +50,31 @@ export type DialogProperties = {
    */
   decorFitsSystemWindows?: boolean;
 };
+
+/**
+ * Properties for the popup window, matching `PopupProperties` in Compose.
+ */
+export type PopupProperties = {
+  /**
+   * Whether the popup is focusable. When `true`, the popup receives IME events and key presses,
+   * such as the back button.
+   * @default true
+   */
+  focusable?: boolean;
+  /**
+   * Whether the popup can be dismissed by pressing the back button. Has no effect when `focusable` is `false`.
+   * @default true
+   */
+  dismissOnBackPress?: boolean;
+  /**
+   * Whether the popup can be dismissed by clicking outside of its bounds.
+   * @default true
+   */
+  dismissOnClickOutside?: boolean;
+  /**
+   * Whether the popup window is clipped to the screen boundaries. Set to `false` to let it extend
+   * beyond them, which positions the popup accurately.
+   * @default true
+   */
+  clippingEnabled?: boolean;
+};

package/src/universal/ListItem/ListItem.android.tsx

@@ -1,5 +1,5 @@
 import { ListItem as ComposeListItem, Text } from '@expo/ui/jetpack-compose';
-import { clickable } from '@expo/ui/jetpack-compose/modifiers';
+import { clickable, testID as testIDModifier } from '@expo/ui/jetpack-compose/modifiers';
 import { Children, type ReactNode } from 'react';
 
 import { extractListItemSlots } from './ListItemSlots';
@@ -25,6 +25,7 @@ export function ListItem(props: ListItemProps) {
     leading: leadingProp,
     trailing: trailingProp,
     supportingText,
+    testID,
     modifiers,
     colors,
   } = props;
@@ -32,7 +33,11 @@ export function ListItem(props: ListItemProps) {
   const leading = slots.leading ?? leadingProp;
   const trailing = slots.trailing ?? trailingProp;
   const supporting = slots.supporting ?? supportingText;
-  const itemModifiers = [...(onPress ? [clickable(onPress)] : []), ...(modifiers ?? [])];
+  const itemModifiers = [
+    ...(onPress ? [clickable(onPress)] : []),
+    ...(testID ? [testIDModifier(testID)] : []),
+    ...(modifiers ?? []),
+  ];
 
   return (
     <ComposeListItem colors={colors} modifiers={itemModifiers.length ? itemModifiers : undefined}>

package/src/universal/RNHostView/index.tsx

@@ -1,11 +1,14 @@
 import { StyleSheet, View } from 'react-native';
 
-import type { RNHostViewProps } from './types';
+import { resolveMatchContents } from '../../utils/matchContents';
 import { useUniversalLifecycle } from '../hooks';
+import type { RNHostViewProps } from './types';
 
 const styles = StyleSheet.create({
-  fillParent: { width: '100%', height: '100%' },
-  matchContents: { width: 'fit-content', height: 'fit-content' },
+  fillWidth: { width: '100%' },
+  fillHeight: { height: '100%' },
+  fitWidth: { width: 'fit-content' },
+  fitHeight: { height: 'fit-content' },
   hidden: { display: 'none' },
 });
 
@@ -23,13 +26,15 @@ export function RNHostView({
   onLayout,
 }: RNHostViewProps) {
   useUniversalLifecycle(onAppear, onDisappear);
+  const { horizontal, vertical } = resolveMatchContents(matchContents);
 
   return (
     <View
       testID={testID}
       onLayout={onLayout}
       style={[
-        matchContents ? styles.matchContents : styles.fillParent,
+        horizontal ? styles.fitWidth : styles.fillWidth,
+        vertical ? styles.fitHeight : styles.fillHeight,
         style,
         hidden && styles.hidden,
       ]}>

package/src/universal/RNHostView/types.ts

@@ -8,16 +8,18 @@ import type { UniversalBaseProps } from '../types';
  */
 export interface RNHostViewProps extends UniversalBaseProps {
   /**
-   * When `true`, the host updates its size in the native view tree to match
-   * the children's size. When `false`, the host uses the size of the parent
-   * native view.
+   * When `true`, the host updates its size in the SwiftUI or Compose view tree to
+   * match the children's size. When `false`, the host uses the size of the parent
+   * SwiftUI or Compose view. Pass an object to choose per axis. For example,
+   * `{ vertical: true }` takes the width from the parent and the height from the
+   * children, so text wraps and grows vertically.
    *
    * Can only be set once on mount; changing it remounts the component.
    * @default false
    * @platform android
    * @platform ios
    */
-  matchContents?: boolean;
+  matchContents?: boolean | { vertical?: boolean; horizontal?: boolean };
 
   onLayout?: (event: LayoutChangeEvent) => void;
 

package/src/utils/matchContents.ts

@@ -0,0 +1,14 @@
+/**
+ * Resolves `RNHostView`'s `matchContents` prop to one flag per axis.
+ */
+export function resolveMatchContents(
+  matchContents: boolean | { vertical?: boolean; horizontal?: boolean } | null | undefined
+): { horizontal: boolean; vertical: boolean } {
+  if (matchContents != null && typeof matchContents === 'object') {
+    return {
+      horizontal: matchContents.horizontal ?? false,
+      vertical: matchContents.vertical ?? false,
+    };
+  }
+  return { horizontal: matchContents ?? false, vertical: matchContents ?? false };
+}

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.22/expo.modules.ui-57.0.22-sources.jar.md5

@@ -1 +0,0 @@
-67ccc30c75819937df5e850cb742a4ba

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.22/expo.modules.ui-57.0.22-sources.jar.sha1

@@ -1 +0,0 @@
-b9f56fabf01aea58b15172683c4a748b8dc3cf55

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.22/expo.modules.ui-57.0.22-sources.jar.sha256

@@ -1 +0,0 @@
-e1ff6f3760b8699263fd244601e146335a9f853109153f91be6c98d092a9302e

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.22/expo.modules.ui-57.0.22-sources.jar.sha512

@@ -1 +0,0 @@
-81d467c2d81c5fb4545160a5b5563fcf0f6eb3fbb191a507382ad6b0abde41d6c5506edc2281c1e98dee29eb2c861856f8e34d4208972a2dbf2b547c77143627

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.22/expo.modules.ui-57.0.22.aar.md5

@@ -1 +0,0 @@
-7220f1074490e12c04ff057048d86124

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.22/expo.modules.ui-57.0.22.aar.sha1

@@ -1 +0,0 @@
-d581a4836a4dd119bfc57aca7152c5f7a45911b8

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.22/expo.modules.ui-57.0.22.aar.sha256

@@ -1 +0,0 @@
-a869c8586462b852b75439dbfeaa7caef538db6eeff7bac5aee0026215a61a06

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.22/expo.modules.ui-57.0.22.aar.sha512

@@ -1 +0,0 @@
-34080b16453bc36824a34471ee76e7da22af80c63cc419ea34d8c2e1e562f72f968ce8faefd5672f33a4c899c0cdf85c2e711318d859ba4d4562b7e0a61482d8

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.22/expo.modules.ui-57.0.22.module.md5

@@ -1 +0,0 @@
-7fb20f1c978e1a0b3d762c0dd5323bf9

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.22/expo.modules.ui-57.0.22.module.sha1

@@ -1 +0,0 @@
-14b81e92a813dd3ff42d0b57bc819fe6fe45dbe9

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.22/expo.modules.ui-57.0.22.module.sha256

@@ -1 +0,0 @@
-4f7022f3602a1162d857c67860c42f26d80c57f0955e815776e0d69da62a6b89

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.22/expo.modules.ui-57.0.22.module.sha512

@@ -1 +0,0 @@
-f4323dcdf2bd04112993e148d47b98df0245f0679aedb4965f45646c987da2d513b3a312aba6ca5802a411cc07b8260c3b3a944a30da7e4b9c2d2140e9cc0b78

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.22/expo.modules.ui-57.0.22.pom.md5

@@ -1 +0,0 @@
-bf3cc748e5aba7f0faca9af9cae6ca11

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.22/expo.modules.ui-57.0.22.pom.sha1

@@ -1 +0,0 @@
-64719d73cd6c6e4410f220586d1b900553d8636f

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.22/expo.modules.ui-57.0.22.pom.sha256

@@ -1 +0,0 @@
-b1893b9a45c11ca23be9b083040c6c8e42e5dbf2f83388fb2ecb46ebb759ef43

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.22/expo.modules.ui-57.0.22.pom.sha512

@@ -1 +0,0 @@
-2e7e5260dc6cae8eb8555c1614f8e50394413bd3cc98d8c34ffb9831458a6079516da7c302bac741da5f578dac28c7772d1cf5efd111f007f15639876db47768