@expo/ui 55.0.2 → 55.0.3

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

@@ -1,96 +1,436 @@
 import { requireNativeView } from 'expo';
-import React from 'react';
+import { type ColorValue } from 'react-native';
 
-import { ExpoModifier } from '../../types';
+import { type ModifierConfig } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
 /**
- * Available text style variants for chip labels.
+ * Colors for AssistChip.
  */
-export type ChipTextStyle =
-  | 'labelSmall'
-  | 'labelMedium'
-  | 'labelLarge'
-  | 'bodySmall'
-  | 'bodyMedium'
-  | 'bodyLarge';
+export type AssistChipColors = {
+  containerColor?: ColorValue;
+  labelColor?: ColorValue;
+  leadingIconContentColor?: ColorValue;
+  trailingIconContentColor?: ColorValue;
+};
 
-export interface ChipProps {
+/**
+ * Colors for FilterChip.
+ */
+export type FilterChipColors = {
+  containerColor?: ColorValue;
+  labelColor?: ColorValue;
+  iconColor?: ColorValue;
+  selectedContainerColor?: ColorValue;
+  selectedLabelColor?: ColorValue;
+  selectedLeadingIconColor?: ColorValue;
+  selectedTrailingIconColor?: ColorValue;
+};
+
+/**
+ * Colors for InputChip.
+ */
+export type InputChipColors = {
+  containerColor?: ColorValue;
+  labelColor?: ColorValue;
+  leadingIconColor?: ColorValue;
+  trailingIconColor?: ColorValue;
+  selectedContainerColor?: ColorValue;
+  selectedLabelColor?: ColorValue;
+  selectedLeadingIconColor?: ColorValue;
+  selectedTrailingIconColor?: ColorValue;
+};
+
+/**
+ * Colors for SuggestionChip.
+ */
+export type SuggestionChipColors = {
+  containerColor?: ColorValue;
+  labelColor?: ColorValue;
+  iconContentColor?: ColorValue;
+};
+
+/**
+ * Border configuration for chips.
+ */
+export type ChipBorder = {
   /**
-   * The variant of the chip.
+   * Border width in dp.
+   * @default 1
    */
-  variant?: 'assist' | 'filter' | 'input' | 'suggestion';
-
+  width?: number;
   /**
-   * The text label to display on the chip
+   * Border color.
    */
-  label: string;
+  color?: ColorValue;
+};
+
+type SlotChildProps = {
+  children: React.ReactNode;
+};
+
+type NativeSlotViewProps = {
+  slotName: string;
+  children: React.ReactNode;
+};
+
+const SlotNativeView: React.ComponentType<NativeSlotViewProps> = requireNativeView(
+  'ExpoUI',
+  'SlotView'
+);
+
+// region AssistChip
 
+export type AssistChipProps = {
   /**
-   * Optional leading icon name (using Material Icons). Used for assist, filter, input (avatar icon), and suggestion chips.
+   * Whether the chip is enabled and can be clicked.
+   * @default true
    */
-  leadingIcon?: string;
-
+  enabled?: boolean;
   /**
-   * Optional trailing icon name (using Material Icons). Used for assist, filter, and input chips. For input chips, defaults to `filled.Close` if not specified.
+   * Colors for the chip's container, label, and icons.
    */
-  trailingIcon?: string;
-
+  colors?: AssistChipColors;
   /**
-   * Size of the icon in density-independent pixels (dp). Defaults to 18.
+   * Elevation in dp.
    */
-  iconSize?: number;
-
+  elevation?: number;
+  /**
+   * Border configuration.
+   */
+  border?: ChipBorder;
+  /**
+   * Callback fired when the chip is clicked.
+   */
+  onClick?: () => void;
   /**
-   * Text style variant for the chip label. Defaults to `labelSmall`.
+   * Modifiers for the component.
    */
-  textStyle?: ChipTextStyle;
+  modifiers?: ModifierConfig[];
+  /**
+   * Children containing Label, LeadingIcon, and TrailingIcon slots.
+   */
+  children: React.ReactNode;
+};
+
+type NativeAssistChipProps = Omit<AssistChipProps, 'onClick'> & {
+  onNativeClick?: () => void;
+};
 
+const AssistChipNativeView: React.ComponentType<NativeAssistChipProps> = requireNativeView(
+  'ExpoUI',
+  'AssistChipView'
+);
+
+/**
+ * Label slot for AssistChip.
+ */
+function AssistChipLabel(props: SlotChildProps) {
+  return <SlotNativeView slotName="label">{props.children}</SlotNativeView>;
+}
+
+/**
+ * Leading icon slot for AssistChip.
+ */
+function AssistChipLeadingIcon(props: SlotChildProps) {
+  return <SlotNativeView slotName="leadingIcon">{props.children}</SlotNativeView>;
+}
+
+/**
+ * Trailing icon slot for AssistChip.
+ */
+function AssistChipTrailingIcon(props: SlotChildProps) {
+  return <SlotNativeView slotName="trailingIcon">{props.children}</SlotNativeView>;
+}
+
+/**
+ * An assist chip that helps users complete actions and primary tasks.
+ */
+function AssistChipComponent(props: AssistChipProps) {
+  const { children, modifiers, onClick, ...restProps } = props;
+
+  return (
+    <AssistChipNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}
+      onNativeClick={onClick}>
+      {children}
+    </AssistChipNativeView>
+  );
+}
+
+AssistChipComponent.Label = AssistChipLabel;
+AssistChipComponent.LeadingIcon = AssistChipLeadingIcon;
+AssistChipComponent.TrailingIcon = AssistChipTrailingIcon;
+
+export { AssistChipComponent as AssistChip };
+
+// endregion
+
+// region FilterChip
+
+export type FilterChipProps = {
+  /**
+   * Whether the chip is currently selected.
+   */
+  selected: boolean;
   /**
-   * Whether the chip is enabled and can be clicked. Used for assist, filter and input chips.
+   * Whether the chip is enabled and can be interacted with.
    */
   enabled?: boolean;
+  /**
+   * Colors for the chip's container, label, icon, and selected states.
+   */
+  colors?: FilterChipColors;
+  /**
+   * Elevation in dp.
+   */
+  elevation?: number;
+  /**
+   * Border configuration.
+   */
+  border?: ChipBorder;
+  /**
+   * Callback fired when the chip is clicked.
+   */
+  onClick?: () => void;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
+  /**
+   * Children containing Label, LeadingIcon, and TrailingIcon slots.
+   */
+  children: React.ReactNode;
+};
+
+type NativeFilterChipProps = Omit<FilterChipProps, 'onClick'> & {
+  onNativeClick?: () => void;
+};
+
+const FilterChipNativeView: React.ComponentType<NativeFilterChipProps> = requireNativeView(
+  'ExpoUI',
+  'FilterChipView'
+);
+
+/**
+ * Label slot for FilterChip.
+ */
+function FilterChipLabel(props: SlotChildProps) {
+  return <SlotNativeView slotName="label">{props.children}</SlotNativeView>;
+}
+
+/**
+ * Leading icon slot for FilterChip.
+ */
+function FilterChipLeadingIcon(props: SlotChildProps) {
+  return <SlotNativeView slotName="leadingIcon">{props.children}</SlotNativeView>;
+}
+
+/**
+ * Trailing icon slot for FilterChip.
+ */
+function FilterChipTrailingIcon(props: SlotChildProps) {
+  return <SlotNativeView slotName="trailingIcon">{props.children}</SlotNativeView>;
+}
+
+/**
+ * A filter chip component for refining content with selection/deselection.
+ */
+function FilterChipComponent(props: FilterChipProps) {
+  const { children, modifiers, onClick, ...restProps } = props;
+
+  return (
+    <FilterChipNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}
+      onNativeClick={onClick}>
+      {children}
+    </FilterChipNativeView>
+  );
+}
+
+FilterChipComponent.Label = FilterChipLabel;
+FilterChipComponent.LeadingIcon = FilterChipLeadingIcon;
+FilterChipComponent.TrailingIcon = FilterChipTrailingIcon;
+
+export { FilterChipComponent as FilterChip };
+
+// endregion
+
+// region InputChip
 
+export type InputChipProps = {
   /**
-   * Whether the chip is selected. Used only for filter chips.
+   * Whether the chip is enabled and can be interacted with.
+   * @default true
+   */
+  enabled?: boolean;
+  /**
+   * Whether the chip is selected.
+   * @default false
    */
   selected?: boolean;
-
+  /**
+   * Colors for the chip's container, label, icons, and selected states.
+   */
+  colors?: InputChipColors;
+  /**
+   * Elevation in dp.
+   */
+  elevation?: number;
+  /**
+   * Border configuration.
+   */
+  border?: ChipBorder;
+  /**
+   * Callback fired when the chip is clicked.
+   */
+  onClick?: () => void;
   /**
    * Modifiers for the component.
    */
-  modifiers?: ExpoModifier[];
-
+  modifiers?: ModifierConfig[];
   /**
-   * Callback fired when the chip is clicked. Used for assist and filter chips.
+   * Children containing Label, Avatar, and TrailingIcon slots.
    */
-  onPress?: () => void;
+  children: React.ReactNode;
+};
+
+type NativeInputChipProps = Omit<InputChipProps, 'onClick'> & {
+  onNativeClick?: () => void;
+};
+
+const InputChipNativeView: React.ComponentType<NativeInputChipProps> = requireNativeView(
+  'ExpoUI',
+  'InputChipView'
+);
+
+/**
+ * Label slot for InputChip.
+ */
+function InputChipLabel(props: SlotChildProps) {
+  return <SlotNativeView slotName="label">{props.children}</SlotNativeView>;
+}
+
+/**
+ * Avatar slot for InputChip.
+ */
+function InputChipAvatar(props: SlotChildProps) {
+  return <SlotNativeView slotName="avatar">{props.children}</SlotNativeView>;
+}
 
+/**
+ * Trailing icon slot for InputChip.
+ */
+function InputChipTrailingIcon(props: SlotChildProps) {
+  return <SlotNativeView slotName="trailingIcon">{props.children}</SlotNativeView>;
+}
+
+/**
+ * An input chip that represents user input and can be dismissed.
+ */
+function InputChipComponent(props: InputChipProps) {
+  const { children, modifiers, onClick, ...restProps } = props;
+
+  return (
+    <InputChipNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}
+      onNativeClick={onClick}>
+      {children}
+    </InputChipNativeView>
+  );
+}
+
+InputChipComponent.Label = InputChipLabel;
+InputChipComponent.Avatar = InputChipAvatar;
+InputChipComponent.TrailingIcon = InputChipTrailingIcon;
+
+export { InputChipComponent as InputChip };
+
+// endregion
+
+// region SuggestionChip
+
+export type SuggestionChipProps = {
   /**
-   * Callback fired when the chip is dismissed. Only used for input chips.
+   * Whether the chip is enabled and can be clicked.
+   * @default true
    */
-  onDismiss?: () => void;
-}
+  enabled?: boolean;
+  /**
+   * Colors for the chip's container, label, and icon.
+   */
+  colors?: SuggestionChipColors;
+  /**
+   * Elevation in dp.
+   */
+  elevation?: number;
+  /**
+   * Border configuration.
+   */
+  border?: ChipBorder;
+  /**
+   * Callback fired when the chip is clicked.
+   */
+  onClick?: () => void;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
+  /**
+   * Children containing Label and Icon slots.
+   */
+  children: React.ReactNode;
+};
 
-type NativeChipProps = ChipProps;
-// Native component declaration using the same pattern as Button
-const ChipNativeView: React.ComponentType<NativeChipProps> = requireNativeView(
+type NativeSuggestionChipProps = Omit<SuggestionChipProps, 'onClick'> & {
+  onNativeClick?: () => void;
+};
+
+const SuggestionChipNativeView: React.ComponentType<NativeSuggestionChipProps> = requireNativeView(
   'ExpoUI',
-  'ChipView'
+  'SuggestionChipView'
 );
 
-function transformChipProps(props: ChipProps): NativeChipProps {
-  const { modifiers, ...restProps } = props;
-  return {
-    modifiers,
-    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
-    ...restProps,
-  };
+/**
+ * Label slot for SuggestionChip.
+ */
+function SuggestionChipLabel(props: SlotChildProps) {
+  return <SlotNativeView slotName="label">{props.children}</SlotNativeView>;
 }
 
 /**
- * Displays a native chip component.
+ * Icon slot for SuggestionChip.
  */
-export function Chip(props: ChipProps): React.JSX.Element {
-  return <ChipNativeView {...transformChipProps(props)} />;
+function SuggestionChipIcon(props: SlotChildProps) {
+  return <SlotNativeView slotName="icon">{props.children}</SlotNativeView>;
 }
+
+/**
+ * A suggestion chip that offers contextual suggestions and recommendations.
+ */
+function SuggestionChipComponent(props: SuggestionChipProps) {
+  const { children, modifiers, onClick, ...restProps } = props;
+
+  return (
+    <SuggestionChipNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}
+      onNativeClick={onClick}>
+      {children}
+    </SuggestionChipNativeView>
+  );
+}
+
+SuggestionChipComponent.Label = SuggestionChipLabel;
+SuggestionChipComponent.Icon = SuggestionChipIcon;
+
+export { SuggestionChipComponent as SuggestionChip };
+
+// endregion

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

@@ -1,7 +1,7 @@
 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';
@@ -145,23 +145,40 @@ export type DateTimePickerProps = {
    * @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' | 'elementColors'
+  '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, elementColors, color, ...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;
@@ -172,11 +189,12 @@ function transformDateTimePickerProps(props: DateTimePickerProps): NativeDatePic
     ...rest,
     color,
     initialDate: initialDateTimestamp,
+    selectableDates: convertSelectableDates(selectableDates),
     onDateSelected: ({ nativeEvent: { date } }) => {
-      props?.onDateSelected?.(new Date(date));
+      props.onDateSelected?.(new Date(date));
     },
     variant,
-    ...(elementColors != null ? { elementColors } : {}),
+    ...(elementColors != null ? { elementColors } : undefined),
   };
 }
 
@@ -186,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} />;
+}