@expo/ui 55.0.2 → 55.0.4

package/src/jetpack-compose/DropdownMenu/DropdownMenuItem.tsx

@@ -0,0 +1,126 @@
+import { requireNativeView } from 'expo';
+import { ColorValue } from 'react-native';
+
+import { ModifierConfig, ViewEvent } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+type SlotNativeViewProps = {
+  slotName: string;
+  children: React.ReactNode;
+};
+
+const SlotNativeView: React.ComponentType<SlotNativeViewProps> = requireNativeView(
+  'ExpoUI',
+  'SlotView'
+);
+
+/**
+ * Color overrides for the `DropdownMenuItem` component.
+ */
+export type DropdownMenuItemElementColors = {
+  /** Color of the menu item text. */
+  textColor?: ColorValue;
+  /** Color of the text when the menu item is disabled. */
+  disabledTextColor?: ColorValue;
+  // TODO: At the moment IconView's tint color defaults to Color.Unspecified instead of LocalContentColor.current.
+  // Thus the color override will not work for icons. At the moment icon color can only be set directly in IconView.
+  // leadingIconColor?: ColorValue;
+  // trailingIconColor?: ColorValue;
+  // disabledLeadingIconColor?: ColorValue;
+  // disabledTrailingIconColor?: ColorValue;
+};
+
+/**
+ * Props of the `DropdownMenuItem` component.
+ */
+export type DropdownMenuItemProps = {
+  /**
+   * Whether the menu item is enabled.
+   * @default true
+   */
+  enabled?: boolean;
+  /**
+   * Color overrides for the menu item.
+   */
+  elementColors?: DropdownMenuItemElementColors;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
+  /**
+   * Callback that is called when the menu item is clicked.
+   */
+  onClick?: () => void;
+  /**
+   * Slot children for text, leading/trailing icons.
+   */
+  children?: React.ReactNode;
+};
+
+type NativeDropdownMenuItemProps = Omit<DropdownMenuItemProps, 'onClick' | 'children'> &
+  ViewEvent<'onItemPressed', void> & { children?: React.ReactNode };
+
+const DropdownMenuItemNativeView: React.ComponentType<NativeDropdownMenuItemProps> =
+  requireNativeView('ExpoUI', 'DropdownMenuItemView');
+
+/**
+ * A leading icon slot for `DropdownMenuItem`.
+ * Wrap an `Icon` or other content to display before the menu item text.
+ *
+ * @platform android
+ */
+function LeadingIcon(props: { children: React.ReactNode }) {
+  return <SlotNativeView slotName="leadingIcon">{props.children}</SlotNativeView>;
+}
+
+/**
+ * A trailing icon slot for `DropdownMenuItem`.
+ * Wrap an `Icon` or other content to display after the menu item text.
+ *
+ * @platform android
+ */
+function TrailingIcon(props: { children: React.ReactNode }) {
+  return <SlotNativeView slotName="trailingIcon">{props.children}</SlotNativeView>;
+}
+
+/**
+ * A dropdown menu item component that wraps Compose's `DropdownMenuItem`.
+ * Should be used inside `DropdownMenu.Items`.
+ *
+ * @platform android
+ */
+/**
+ * A text slot for `DropdownMenuItem`.
+ * Wrap text content to display as the menu item label.
+ *
+ * @platform android
+ */
+function TextSlot(props: { children: React.ReactNode }) {
+  return <SlotNativeView slotName="text">{props.children}</SlotNativeView>;
+}
+
+/**
+ * A dropdown menu item component that wraps Compose's `DropdownMenuItem`.
+ * Should be used inside `ContextMenu.Items`.
+ *
+ * @platform android
+ */
+function DropdownMenuItemComponent(props: DropdownMenuItemProps) {
+  const { onClick, modifiers, children, ...restProps } = props;
+  return (
+    <DropdownMenuItemNativeView
+      {...restProps}
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      enabled={props.enabled ?? true}
+      onItemPressed={onClick ? () => onClick() : undefined}>
+      {children}
+    </DropdownMenuItemNativeView>
+  );
+}
+
+DropdownMenuItemComponent.Text = TextSlot;
+DropdownMenuItemComponent.LeadingIcon = LeadingIcon;
+DropdownMenuItemComponent.TrailingIcon = TrailingIcon;
+
+export { DropdownMenuItemComponent as DropdownMenuItem };

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

@@ -0,0 +1,107 @@
+import { requireNativeView } from 'expo';
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle, type ColorValue } from 'react-native';
+
+import { ModifierConfig } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+const MenuNativeView: React.ComponentType<NativeMenuProps> = requireNativeView(
+  'ExpoUI',
+  'DropdownMenuView'
+);
+
+// TODO: Extract into separate SlotView similar to swift-ui
+const SlotNativeView: React.ComponentType<{
+  slotName: string;
+  children: React.ReactNode;
+}> = requireNativeView('ExpoUI', 'SlotView');
+
+/**
+ * Props of the `DropdownMenu` component.
+ */
+export type DropdownMenuProps = {
+  /**
+   * The contents of the submenu are used as an anchor for the dropdown menu.
+   * The children will be wrapped in a pressable element, which triggers opening of the dropdown menu.
+   */
+  children: ReactNode;
+
+  /**
+   * Whether the dropdown menu is expanded (visible).
+   */
+  expanded?: boolean;
+
+  /**
+   * Callback fired when the menu requests to be dismissed (e.g. tapping outside).
+   * Must be provided when `expanded` is `true` to allow the menu to close.
+   */
+  onDismissRequest?: () => void;
+
+  /**
+   * The color of the container holding the dropdown menu items.
+   */
+  color?: ColorValue;
+
+  /**
+   * Optional styles to apply to the `DropdownMenu`.
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
+};
+
+type NativeMenuProps = {
+  expanded?: boolean;
+  onDismissRequest?: () => void;
+  color?: ColorValue;
+  style?: StyleProp<ViewStyle>;
+  modifiers?: ModifierConfig[];
+  children?: ReactNode;
+};
+
+/**
+ * Container for items displayed in the dropdown menu.
+ * Children should be `DropdownMenuItem` components or other native views.
+ */
+export function Items(props: { children: ReactNode }) {
+  return <SlotNativeView slotName="items">{props.children}</SlotNativeView>;
+}
+Items.tag = 'Items';
+
+/**
+ * Container for the trigger element that opens the dropdown menu.
+ */
+export function Trigger(props: { children: ReactNode }) {
+  return <>{props.children}</>;
+}
+Trigger.tag = 'Trigger';
+
+/**
+ * Preview content shown during long press (iOS only).
+ */
+export function Preview(props: { children: ReactNode }) {
+  return <></>;
+}
+
+function DropdownMenu(props: DropdownMenuProps) {
+  const { modifiers, ...restProps } = props;
+  return (
+    <MenuNativeView
+      style={props.style}
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}>
+      {props.children}
+    </MenuNativeView>
+  );
+}
+
+DropdownMenu.Trigger = Trigger;
+DropdownMenu.Preview = Preview;
+DropdownMenu.Items = Items;
+
+export { DropdownMenu };
+export { DropdownMenuItem } from './DropdownMenuItem';

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

@@ -0,0 +1,207 @@
+import { requireNativeView } from 'expo';
+import { type ColorValue } from 'react-native';
+
+import { ModifierConfig, ViewEvent } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+type SlotChildProps = {
+  children: React.ReactNode;
+};
+
+type NativeSlotViewProps = {
+  slotName: string;
+  children: React.ReactNode;
+};
+
+/**
+ * Props shared by all `FloatingActionButton` variants.
+ */
+export type FloatingActionButtonProps = {
+  /**
+   * Slot-based children (use `.Icon` sub-component).
+   */
+  children: React.ReactNode;
+
+  /**
+   * The background color of the button container.
+   * Defaults to `FloatingActionButtonDefaults.containerColor` (primary container).
+   */
+  containerColor?: ColorValue;
+
+  /**
+   * Callback invoked when the button is clicked.
+   */
+  onClick?: () => void;
+
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
+};
+
+/**
+ * Props for the `SmallFloatingActionButton` component.
+ * Same as {@link FloatingActionButtonProps}.
+ */
+export type SmallFloatingActionButtonProps = FloatingActionButtonProps;
+
+/**
+ * Props for the `LargeFloatingActionButton` component.
+ * Same as {@link FloatingActionButtonProps}.
+ */
+export type LargeFloatingActionButtonProps = FloatingActionButtonProps;
+
+/**
+ * Props for the `ExtendedFloatingActionButton` component.
+ */
+export type ExtendedFloatingActionButtonProps = FloatingActionButtonProps & {
+  /**
+   * Slot-based children (use `.Icon` and `.Text` sub-components).
+   */
+  children: React.ReactNode;
+
+  /**
+   * Controls whether the label is shown (expanded) or hidden (collapsed).
+   * @default true
+   */
+  expanded?: boolean;
+};
+
+/**
+ * @hidden
+ */
+type NativeFloatingActionButtonProps = Omit<FloatingActionButtonProps, 'onClick'> &
+  ViewEvent<'onButtonPressed', void> & {
+    variant: string;
+    expanded?: boolean;
+  };
+
+const FloatingActionButtonNativeView: React.ComponentType<NativeFloatingActionButtonProps> =
+  requireNativeView('ExpoUI', 'FloatingActionButtonView');
+
+const SlotNativeView: React.ComponentType<NativeSlotViewProps> = requireNativeView(
+  'ExpoUI',
+  'SlotView'
+);
+
+function FABIcon(props: SlotChildProps) {
+  return <SlotNativeView slotName="icon">{props.children}</SlotNativeView>;
+}
+
+function FABText(props: SlotChildProps) {
+  return <SlotNativeView slotName="text">{props.children}</SlotNativeView>;
+}
+
+function transformProps(
+  props: FloatingActionButtonProps & { variant: string; expanded?: boolean }
+): NativeFloatingActionButtonProps {
+  const { children, onClick, modifiers, ...restProps } = props;
+
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+    children,
+    onButtonPressed: onClick,
+  };
+}
+
+/**
+ * Renders a Material Design 3 small `FloatingActionButton`.
+ *
+ * Wraps [`SmallFloatingActionButton`](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#SmallFloatingActionButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material3.FloatingActionButtonElevation,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)).
+ *
+ * @example
+ * ```tsx
+ * import { SmallFloatingActionButton, Host, Icon } from '@expo/ui/jetpack-compose';
+ *
+ * <Host matchContents>
+ *   <SmallFloatingActionButton onClick={() => console.log('pressed')}>
+ *     <SmallFloatingActionButton.Icon>
+ *       <Icon source={require('./assets/add.xml')} />
+ *     </SmallFloatingActionButton.Icon>
+ *   </SmallFloatingActionButton>
+ * </Host>
+ * ```
+ */
+function SmallFloatingActionButtonComponent(props: SmallFloatingActionButtonProps) {
+  return <FloatingActionButtonNativeView {...transformProps({ ...props, variant: 'small' })} />;
+}
+SmallFloatingActionButtonComponent.Icon = FABIcon;
+export { SmallFloatingActionButtonComponent as SmallFloatingActionButton };
+
+/**
+ * Renders a Material Design 3 standard `FloatingActionButton`.
+ *
+ * Wraps [`FloatingActionButton`](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#FloatingActionButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material3.FloatingActionButtonElevation,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)).
+ *
+ * @example
+ * ```tsx
+ * import { FloatingActionButton, Host, Icon } from '@expo/ui/jetpack-compose';
+ *
+ * <Host matchContents>
+ *   <FloatingActionButton onClick={() => console.log('pressed')}>
+ *     <FloatingActionButton.Icon>
+ *       <Icon source={require('./assets/add.xml')} />
+ *     </FloatingActionButton.Icon>
+ *   </FloatingActionButton>
+ * </Host>
+ * ```
+ */
+function FloatingActionButtonComponent(props: FloatingActionButtonProps) {
+  return <FloatingActionButtonNativeView {...transformProps({ ...props, variant: 'medium' })} />;
+}
+FloatingActionButtonComponent.Icon = FABIcon;
+export { FloatingActionButtonComponent as FloatingActionButton };
+
+/**
+ * Renders a Material Design 3 large `FloatingActionButton`.
+ *
+ * Wraps [`LargeFloatingActionButton`](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#LargeFloatingActionButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material3.FloatingActionButtonElevation,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)).
+ *
+ * @example
+ * ```tsx
+ * import { LargeFloatingActionButton, Host, Icon } from '@expo/ui/jetpack-compose';
+ *
+ * <Host matchContents>
+ *   <LargeFloatingActionButton onClick={() => console.log('pressed')}>
+ *     <LargeFloatingActionButton.Icon>
+ *       <Icon source={require('./assets/add.xml')} />
+ *     </LargeFloatingActionButton.Icon>
+ *   </LargeFloatingActionButton>
+ * </Host>
+ * ```
+ */
+function LargeFloatingActionButtonComponent(props: LargeFloatingActionButtonProps) {
+  return <FloatingActionButtonNativeView {...transformProps({ ...props, variant: 'large' })} />;
+}
+LargeFloatingActionButtonComponent.Icon = FABIcon;
+export { LargeFloatingActionButtonComponent as LargeFloatingActionButton };
+
+/**
+ * Renders a Material Design 3 `ExtendedFloatingActionButton` with animated label expansion.
+ *
+ * Wraps [`ExtendedFloatingActionButton`](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ExtendedFloatingActionButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material3.FloatingActionButtonElevation,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)).
+ *
+ * @example
+ * ```tsx
+ * import { ExtendedFloatingActionButton, Host, Icon, Text } from '@expo/ui/jetpack-compose';
+ *
+ * <Host matchContents>
+ *   <ExtendedFloatingActionButton expanded={true} onClick={() => console.log('pressed')}>
+ *     <ExtendedFloatingActionButton.Icon>
+ *       <Icon source={require('./assets/edit.xml')} />
+ *     </ExtendedFloatingActionButton.Icon>
+ *     <ExtendedFloatingActionButton.Text>
+ *       <Text>Edit</Text>
+ *     </ExtendedFloatingActionButton.Text>
+ *   </ExtendedFloatingActionButton>
+ * </Host>
+ * ```
+ */
+function ExtendedFloatingActionButtonComponent(props: ExtendedFloatingActionButtonProps) {
+  return <FloatingActionButtonNativeView {...transformProps({ ...props, variant: 'extended' })} />;
+}
+ExtendedFloatingActionButtonComponent.Icon = FABIcon;
+ExtendedFloatingActionButtonComponent.Text = FABText;
+export { ExtendedFloatingActionButtonComponent as ExtendedFloatingActionButton };

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

@@ -21,7 +21,7 @@ export type HorizontalFloatingToolbarProps = {
   modifiers?: ExpoModifier[];
 };
 
-export type FloatingActionButtonProps = {
+export type HorizontalFloatingToolbarFloatingActionButtonProps = {
   /**
    * A callback that is called when the button is pressed.
    */
@@ -54,7 +54,9 @@ const SlotNativeView: React.ComponentType<NativeSlotViewProps> = requireNativeVi
  * FloatingActionButton component for HorizontalFloatingToolbar.
  * This component marks its children to be rendered in the FAB slot.
  */
-export function HorizontalFloatingToolbarFloatingActionButton(props: FloatingActionButtonProps) {
+export function HorizontalFloatingToolbarFloatingActionButton(
+  props: HorizontalFloatingToolbarFloatingActionButtonProps
+) {
   return (
     <SlotNativeView slotName="floatingActionButton" onSlotEvent={props.onPress}>
       {props.children}

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

@@ -1,88 +1,81 @@
 import { requireNativeView } from 'expo';
 import { type ColorValue } from 'react-native';
 
-import { ExpoModifier, ViewEvent } from '../../types';
-import { ButtonElementColors } from '../Button';
-import { parseJSXShape, ShapeJSXElement, ShapeRecordProps } from '../Shape';
-import { createViewModifierEventListener } from '../modifiers/utils';
+import type { ModifierConfig, ViewEvent } from '../../types';
+import { transformButtonProps } from '../Button';
+import { type ShapeJSXElement, type ShapeRecordProps } from '../Shape';
 
 /**
- * The built-in button styles available on Android.
- * - `outlined` - A button with an outline.
- * - `elevated` - A filled button with a shadow.
+ * Colors for icon button elements.
  */
-export type IconButtonVariant = 'default' | 'bordered' | 'outlined';
+export type IconButtonColors = {
+  containerColor?: ColorValue;
+  contentColor?: ColorValue;
+  disabledContainerColor?: ColorValue;
+  disabledContentColor?: ColorValue;
+};
 
 export type IconButtonProps = {
   /**
-   * A callback that is called when the button is pressed.
-   */
-  onPress?: () => void;
-  /**
-   * The button variant.
+   * Callback that is called when the icon button is clicked.
    */
-  variant?: IconButtonVariant;
+  onClick?: () => void;
   /**
-   * The text to display inside the button.
+   * Whether the icon button is enabled for user interaction.
+   * @default true
    */
-  children?: React.JSX.Element;
+  enabled?: boolean;
   /**
-   * Colors for button's core elements.
+   * Colors for icon button elements.
    * @platform android
    */
-  elementColors?: ButtonElementColors;
+  colors?: IconButtonColors;
   /**
-   * Button color.
+   * The shape of the icon button.
    */
-  color?: ColorValue;
   shape?: ShapeJSXElement;
   /**
-   * Disabled state of the button.
+   * Modifiers for the component.
    */
-  disabled?: boolean;
-
+  modifiers?: ModifierConfig[];
   /**
-   * Modifiers for the component.
+   * Content to display inside the icon button.
    */
-  modifiers?: ExpoModifier[];
+  children: React.ReactNode;
 };
 
-/**
- * @hidden
- */
-export type NativeIconButtonProps = Omit<IconButtonProps, 'role' | 'onPress' | 'shape'> & {
+type NativeIconButtonProps = Omit<IconButtonProps, 'onClick' | 'shape' | 'children'> & {
   shape?: ShapeRecordProps;
+  children?: React.ReactNode;
 } & ViewEvent<'onButtonPressed', void>;
 
-// We have to work around the `role` and `onPress` props being reserved by React Native.
-const IconButtonNativeView: React.ComponentType<NativeIconButtonProps> = requireNativeView(
-  'ExpoUI',
-  'IconButton'
-);
+function createIconButtonComponent(name: string) {
+  const NativeView: React.ComponentType<NativeIconButtonProps> = requireNativeView('ExpoUI', name);
 
-function transformIconButtonProps(props: IconButtonProps): NativeIconButtonProps {
-  const { children, onPress, shape, modifiers, ...restProps } = props;
-
-  return {
-    modifiers,
-    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
-    ...restProps,
-    children,
-    shape: parseJSXShape(shape),
-    onButtonPressed: onPress,
-    elementColors: props.elementColors
-      ? props.elementColors
-      : props.color
-        ? {
-            containerColor: props.color,
-          }
-        : undefined,
-  };
+  function Component(props: IconButtonProps) {
+    const { children, ...restProps } = props;
+    return <NativeView {...transformButtonProps(restProps)}>{children}</NativeView>;
+  }
+  Component.displayName = name;
+  return Component;
 }
 
 /**
- * Displays a native button component.
+ * A standard icon button with no background.
  */
-export function IconButton(props: IconButtonProps) {
-  return <IconButtonNativeView {...transformIconButtonProps(props)} />;
-}
+export const IconButton = createIconButtonComponent('IconButton');
+
+/**
+ * A filled icon button with a solid background.
+ */
+export const FilledIconButton = createIconButtonComponent('FilledIconButton');
+
+/**
+ * A filled tonal icon button with a muted background.
+ */
+export const FilledTonalIconButton = createIconButtonComponent('FilledTonalIconButton');
+
+/**
+ * An outlined icon button with a border and no fill.
+ */
+export const OutlinedIconButton = createIconButtonComponent('OutlinedIconButton');