@expo/ui 55.0.1 → 55.0.3

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

@@ -1,13 +1,103 @@
 import { requireNativeView } from 'expo';
 import { type ColorValue } from 'react-native';
 
-import { ExpoModifier, ViewEvent } from '../../types';
+import type { ModifierConfig, ViewEvent } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
 export type AndroidVariant = 'picker' | 'input';
 
 export type DisplayedComponents = 'date' | 'hourAndMinute' | 'dateAndTime';
 
+/**
+ * Color overrides for the Material 3 DatePicker component.
+ * All properties are optional — unset values use Material 3 theme defaults.
+ */
+export type DatePickerElementColors = {
+  /** The background color of the date picker. */
+  containerColor?: ColorValue;
+  /** The color used for the date picker's title. */
+  titleContentColor?: ColorValue;
+  /** The color used for the date picker's headline. */
+  headlineContentColor?: ColorValue;
+  /** The color used for the weekday letters (Mon, Tue, etc.). */
+  weekdayContentColor?: ColorValue;
+  /** The color used for the month and year subhead labels. */
+  subheadContentColor?: ColorValue;
+  /** The color used for navigation arrows and year selection menu button. */
+  navigationContentColor?: ColorValue;
+  /** The color used for year item content. */
+  yearContentColor?: ColorValue;
+  /** The color used for disabled year item content. */
+  disabledYearContentColor?: ColorValue;
+  /** The color used for the current year content. */
+  currentYearContentColor?: ColorValue;
+  /** The color used for the selected year content. */
+  selectedYearContentColor?: ColorValue;
+  /** The color used for a disabled selected year content. */
+  disabledSelectedYearContentColor?: ColorValue;
+  /** The color used for the selected year container/background. */
+  selectedYearContainerColor?: ColorValue;
+  /** The color used for a disabled selected year container. */
+  disabledSelectedYearContainerColor?: ColorValue;
+  /** The color used for day content (number text). */
+  dayContentColor?: ColorValue;
+  /** The color used for disabled day content. */
+  disabledDayContentColor?: ColorValue;
+  /** The color used for selected day content. */
+  selectedDayContentColor?: ColorValue;
+  /** The color used for a disabled selected day content. */
+  disabledSelectedDayContentColor?: ColorValue;
+  /** The color used for the selected day container/background circle. */
+  selectedDayContainerColor?: ColorValue;
+  /** The color used for a disabled selected day container. */
+  disabledSelectedDayContainerColor?: ColorValue;
+  /** The color used for today's date text. */
+  todayContentColor?: ColorValue;
+  /** The color used for today's date border. */
+  todayDateBorderColor?: ColorValue;
+  /** The content color for days within a date range selection. */
+  dayInSelectionRangeContentColor?: ColorValue;
+  /** The container color for days within a date range selection. */
+  dayInSelectionRangeContainerColor?: ColorValue;
+  /** The color used for divider lines. */
+  dividerColor?: ColorValue;
+};
+
+/**
+ * Color overrides for the Material 3 TimePicker component.
+ * All properties are optional — unset values use Material 3 theme defaults.
+ */
+export type TimePickerElementColors = {
+  /** The container/background color of the time picker. */
+  containerColor?: ColorValue;
+  /** The background color of the clock dial. */
+  clockDialColor?: ColorValue;
+  /** The color of clock dial numbers when selected or overlapping the selector. */
+  clockDialSelectedContentColor?: ColorValue;
+  /** The color of clock dial numbers when unselected. */
+  clockDialUnselectedContentColor?: ColorValue;
+  /** The color of the clock dial selector (hand). */
+  selectorColor?: ColorValue;
+  /** The border color of the AM/PM period selector. */
+  periodSelectorBorderColor?: ColorValue;
+  /** The background color of the selected AM/PM period. */
+  periodSelectorSelectedContainerColor?: ColorValue;
+  /** The background color of the unselected AM/PM period. */
+  periodSelectorUnselectedContainerColor?: ColorValue;
+  /** The text color of the selected AM/PM period. */
+  periodSelectorSelectedContentColor?: ColorValue;
+  /** The text color of the unselected AM/PM period. */
+  periodSelectorUnselectedContentColor?: ColorValue;
+  /** The background color of the selected hour/minute segment. */
+  timeSelectorSelectedContainerColor?: ColorValue;
+  /** The background color of the unselected hour/minute segment. */
+  timeSelectorUnselectedContainerColor?: ColorValue;
+  /** The text color of the selected hour/minute segment. */
+  timeSelectorSelectedContentColor?: ColorValue;
+  /** The text color of the unselected hour/minute segment. */
+  timeSelectorUnselectedContentColor?: ColorValue;
+};
+
 export type DateTimePickerProps = {
   /**
    * The initial date to display on the picker.
@@ -37,29 +127,58 @@ export type DateTimePickerProps = {
   displayedComponents?: DisplayedComponents;
   /**
    * The tint color to use on the picker elements.
+   * When `elementColors` is not provided, this color is applied to a subset of
+   * picker elements (selected day, title, headline, today border for date picker;
+   * selector, selected time segment, clock dial for time picker).
    */
   color?: ColorValue;
+  /**
+   * Fine-grained color overrides for individual picker elements.
+   * When provided, these take precedence over the `color` prop.
+   * Date picker color keys are used when `displayedComponents` is 'date' or 'dateAndTime'.
+   * Time picker color keys are used when `displayedComponents` is 'hourAndMinute'.
+   * Unset values fall back to Material 3 theme defaults.
+   */
+  elementColors?: DatePickerElementColors & TimePickerElementColors;
   /**
    * Determines what format the clock should be displayed in on Android.
    * @default true
    */
   is24Hour?: boolean;
+  /**
+   * Constrains which dates can be selected. Mirrors the native Compose `selectableDates` parameter.
+   * `start` is the earliest selectable date, `end` is the latest.
+   */
+  selectableDates?: { start?: Date; end?: Date };
   /**
    * Modifiers for the component.
    */
-  modifiers?: ExpoModifier[];
+  modifiers?: ModifierConfig[];
 };
 
 type NativeDatePickerProps = Omit<
   DateTimePickerProps,
-  'variant' | 'onDateSelected' | 'initialDate'
+  'variant' | 'onDateSelected' | 'initialDate' | 'elementColors' | 'selectableDates'
 > & {
   variant?: AndroidVariant;
   initialDate?: number | null;
+  selectableDates?: { start?: number | null; end?: number | null } | null;
+  elementColors?: DatePickerElementColors & TimePickerElementColors;
 } & ViewEvent<'onDateSelected', { date: Date }>;
 
+function convertSelectableDates(selectableDates?: {
+  start?: Date;
+  end?: Date;
+}): { start?: number | null; end?: number | null } | null {
+  if (!selectableDates) return null;
+  return {
+    start: selectableDates.start ? selectableDates.start.getTime() : null,
+    end: selectableDates.end ? selectableDates.end.getTime() : null,
+  };
+}
+
 function transformDateTimePickerProps(props: DateTimePickerProps): NativeDatePickerProps {
-  const { modifiers, variant, initialDate, ...rest } = props;
+  const { modifiers, variant, initialDate, selectableDates, elementColors, color, ...rest } = props;
 
   // Convert ISO string to timestamp for Android
   const initialDateTimestamp = initialDate ? new Date(initialDate).getTime() : null;
@@ -68,11 +187,14 @@ function transformDateTimePickerProps(props: DateTimePickerProps): NativeDatePic
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...rest,
+    color,
     initialDate: initialDateTimestamp,
+    selectableDates: convertSelectableDates(selectableDates),
     onDateSelected: ({ nativeEvent: { date } }) => {
-      props?.onDateSelected?.(new Date(date));
+      props.onDateSelected?.(new Date(date));
     },
     variant,
+    ...(elementColors != null ? { elementColors } : undefined),
   };
 }
 
@@ -82,8 +204,95 @@ const DatePickerNativeView: React.ComponentType<NativeDatePickerProps> = require
 );
 
 /**
- * Renders a `DateTimePicker` component.
+ * Renders an inline `DateTimePicker` component.
  */
 export function DateTimePicker(props: DateTimePickerProps) {
   return <DatePickerNativeView {...transformDateTimePickerProps(props)} />;
 }
+
+// -- Dialog views (used internally by the compat layer) ---------------------
+
+export type DatePickerDialogProps = {
+  initialDate?: string | null;
+  variant?: AndroidVariant;
+  showVariantToggle?: boolean;
+  confirmButtonLabel?: string;
+  dismissButtonLabel?: string;
+  color?: ColorValue;
+  elementColors?: DatePickerElementColors & TimePickerElementColors;
+  selectableDates?: { start?: Date; end?: Date };
+  onDateSelected?: (date: Date) => void;
+  onDismissRequest: () => void;
+};
+
+type NativeDatePickerDialogProps = Omit<
+  DatePickerDialogProps,
+  | 'variant'
+  | 'onDateSelected'
+  | 'onDismissRequest'
+  | 'initialDate'
+  | 'elementColors'
+  | 'selectableDates'
+> & {
+  variant?: AndroidVariant;
+  initialDate?: number | null;
+  selectableDates?: { start?: number | null; end?: number | null } | null;
+  elementColors?: DatePickerElementColors & TimePickerElementColors;
+} & ViewEvent<'onDateSelected', { date: Date }> &
+  ViewEvent<'onDismissRequest', void>;
+
+const DatePickerDialogNativeView: React.ComponentType<NativeDatePickerDialogProps> =
+  requireNativeView('ExpoUI', 'DatePickerDialogView');
+
+export function DatePickerDialog(props: DatePickerDialogProps) {
+  const { variant, initialDate, selectableDates, elementColors, onDismissRequest, ...rest } = props;
+  const nativeProps: NativeDatePickerDialogProps = {
+    ...rest,
+    variant,
+    initialDate: initialDate ? new Date(initialDate).getTime() : null,
+    selectableDates: convertSelectableDates(selectableDates),
+    onDateSelected: ({ nativeEvent: { date } }) => {
+      props.onDateSelected?.(new Date(date));
+    },
+    onDismissRequest,
+    ...(elementColors != null ? { elementColors } : undefined),
+  };
+  return <DatePickerDialogNativeView {...nativeProps} />;
+}
+
+export type TimePickerDialogProps = {
+  initialDate?: string | null;
+  is24Hour?: boolean;
+  confirmButtonLabel?: string;
+  dismissButtonLabel?: string;
+  color?: ColorValue;
+  elementColors?: DatePickerElementColors & TimePickerElementColors;
+  onDateSelected?: (date: Date) => void;
+  onDismissRequest: () => void;
+};
+
+type NativeTimePickerDialogProps = Omit<
+  TimePickerDialogProps,
+  'onDateSelected' | 'onDismissRequest' | 'initialDate' | 'elementColors'
+> & {
+  initialDate?: number | null;
+  elementColors?: DatePickerElementColors & TimePickerElementColors;
+} & ViewEvent<'onDateSelected', { date: Date }> &
+  ViewEvent<'onDismissRequest', void>;
+
+const TimePickerDialogNativeView: React.ComponentType<NativeTimePickerDialogProps> =
+  requireNativeView('ExpoUI', 'TimePickerDialogView');
+
+export function TimePickerDialog(props: TimePickerDialogProps) {
+  const { initialDate, elementColors, onDismissRequest, ...rest } = props;
+  const nativeProps: NativeTimePickerDialogProps = {
+    ...rest,
+    initialDate: initialDate ? new Date(initialDate).getTime() : null,
+    onDateSelected: ({ nativeEvent: { date } }) => {
+      props.onDateSelected?.(new Date(date));
+    },
+    onDismissRequest,
+    ...(elementColors != null ? { elementColors } : undefined),
+  };
+  return <TimePickerDialogNativeView {...nativeProps} />;
+}

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';