@expo/ui 55.0.2 → 55.0.4

package/src/jetpack-compose/ContextMenu/utils.ts

@@ -1,144 +0,0 @@
-import { Children, isValidElement, ReactElement, ReactNode } from 'react';
-import { NativeSyntheticEvent } from 'react-native';
-
-import { Submenu, SubmenuProps } from './Submenu';
-import { ContextMenuElementBase, EventHandlers } from './index';
-import { Button, ButtonProps, NativeButtonProps, transformButtonProps } from '../Button';
-import { Picker, PickerProps } from '../Picker';
-import { Switch, SwitchProps } from '../Switch';
-
-// We use this slightly odd typing for the elements to make unpacking the elements easier on the native side
-type ButtonMenuElement = {
-  button: NativeButtonProps;
-} & ContextMenuElementBase;
-
-type SwitchMenuElement = {
-  switch: SwitchProps;
-} & ContextMenuElementBase;
-
-type PickerMenuElement = {
-  picker: PickerProps;
-} & ContextMenuElementBase;
-
-type SubmenuElement = {
-  submenu: {
-    elements: MenuElement[];
-    button: NativeButtonProps;
-  };
-} & ContextMenuElementBase;
-
-export type MenuElement =
-  | ButtonMenuElement
-  | SwitchMenuElement
-  | PickerMenuElement
-  | SubmenuElement;
-
-// Maps the react children to NativeMenuElement[] which is used to render out the native menu
-// TODO: Ideally we want to pass the children directly to the native side without having to do this
-export function transformChildrenToElementArray(
-  children: ReactNode,
-  eventHandlersMap: EventHandlers
-): MenuElement[] {
-  return Children.toArray(children)
-    .map((child) => processChildElement(child, eventHandlersMap))
-    .filter((el): el is MenuElement => el !== null);
-}
-
-function processChildElement(
-  child: ReactNode,
-  eventHandlersMap: EventHandlers
-): MenuElement | null {
-  if (!isValidElement(child)) return null;
-
-  const uuid = expo.uuidv4();
-
-  if (child.type === Button) {
-    // @ts-expect-error TODO TS2345: Argument of type unknown is not assignable to parameter of type SubmenuProps
-    return createButtonElement(uuid, child.props, eventHandlersMap);
-  }
-
-  if (child.type === Switch) {
-    // @ts-expect-error TODO TS2345: Argument of type unknown is not assignable to parameter of type SubmenuProps
-    return createSwitchElement(uuid, child.props, eventHandlersMap);
-  }
-
-  if (child.type === Picker) {
-    // @ts-expect-error TODO TS2345: Argument of type unknown is not assignable to parameter of type SubmenuProps
-    return createPickerElement(uuid, child.props, eventHandlersMap);
-  }
-
-  if (isSubmenuComponent(child)) {
-    // @ts-expect-error TODO TS2345: Argument of type unknown is not assignable to parameter of type SubmenuProps
-    return createSubmenuElement(uuid, child.props, eventHandlersMap);
-  }
-
-  console.warn('Unsupported child type in Menu: ', child.type);
-  return null;
-}
-
-function createButtonElement(
-  uuid: string,
-  props: ButtonProps,
-  handlers: EventHandlers
-): MenuElement {
-  if (props.onPress) {
-    handlers[uuid] = { onPress: props.onPress };
-  }
-
-  return {
-    contextMenuElementID: uuid,
-    button: transformButtonProps(props),
-  };
-}
-
-function createSwitchElement(
-  uuid: string,
-  props: SwitchProps,
-  handlers: EventHandlers
-): MenuElement {
-  if (props.onValueChange) {
-    handlers[uuid] = {
-      onValueChange: ({ nativeEvent: { value } }: NativeSyntheticEvent<{ value: boolean }>) => {
-        props.onValueChange?.(value);
-      },
-    };
-  }
-
-  return {
-    contextMenuElementID: uuid,
-    switch: props,
-  };
-}
-
-function createPickerElement(
-  uuid: string,
-  props: PickerProps,
-  handlers: EventHandlers
-): MenuElement {
-  if (props.onOptionSelected) {
-    handlers[uuid] = { onOptionSelected: props.onOptionSelected };
-  }
-
-  return {
-    contextMenuElementID: uuid,
-    picker: props,
-  };
-}
-
-function createSubmenuElement(
-  uuid: string,
-  props: SubmenuProps,
-  handlers: EventHandlers
-): MenuElement {
-  return {
-    contextMenuElementID: uuid,
-    submenu: {
-      button: transformButtonProps(props.button.props),
-      elements: transformChildrenToElementArray(props.children, handlers),
-    },
-  };
-}
-
-function isSubmenuComponent(child: ReactElement): boolean {
-  return child.type === Submenu;
-}

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

@@ -1,89 +0,0 @@
-import { requireNativeView } from 'expo';
-
-import { ExpoModifier } from '../../types';
-import { createViewModifierEventListener } from '../modifiers/utils';
-
-export type FilterChipProps = {
-  /**
-   * Whether the chip is currently selected.
-   */
-  selected: boolean;
-  /**
-   * The text label to display on the chip.
-   */
-  label: string;
-  /**
-   * Whether the chip is enabled and can be interacted with.
-   */
-  enabled?: boolean;
-  /**
-   * Callback fired when the chip is clicked.
-   */
-  onPress?: () => void;
-  /**
-   * Modifiers for the component.
-   */
-  modifiers?: ExpoModifier[];
-  /**
-   * Children containing LeadingIcon and TrailingIcon slots.
-   */
-  children?: React.ReactNode;
-};
-
-type SlotChildProps = {
-  children: React.ReactNode;
-};
-
-type NativeFilterChipProps = FilterChipProps;
-
-type NativeSlotViewProps = {
-  slotName: string;
-  children: React.ReactNode;
-};
-
-const FilterChipNativeView: React.ComponentType<NativeFilterChipProps> = requireNativeView(
-  'ExpoUI',
-  'FilterChipView'
-);
-
-const SlotNativeView: React.ComponentType<NativeSlotViewProps> = requireNativeView(
-  'ExpoUI',
-  'SlotView'
-);
-
-/**
- * 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 following Material 3 design guidelines.
- * Supports slot-based `LeadingIcon` and `TrailingIcon` children.
- */
-function FilterChipComponent(props: FilterChipProps) {
-  const { children, modifiers, onPress, ...restProps } = props;
-
-  return (
-    <FilterChipNativeView
-      modifiers={modifiers}
-      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
-      {...restProps}
-      onPress={onPress}>
-      {children}
-    </FilterChipNativeView>
-  );
-}
-
-FilterChipComponent.LeadingIcon = FilterChipLeadingIcon;
-FilterChipComponent.TrailingIcon = FilterChipTrailingIcon;
-
-export { FilterChipComponent as FilterChip };

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

@@ -1,90 +0,0 @@
-import { requireNativeView } from 'expo';
-import { type ColorValue } from 'react-native';
-
-import { ExpoModifier } from '../../types';
-import { createViewModifierEventListener } from '../modifiers/utils';
-
-/**
- * Colors for picker's core elements.
- */
-export type PickerElementColors = {
-  activeBorderColor?: ColorValue;
-  activeContentColor?: ColorValue;
-  inactiveBorderColor?: ColorValue;
-  inactiveContentColor?: ColorValue;
-  disabledActiveBorderColor?: ColorValue;
-  disabledActiveContentColor?: ColorValue;
-  disabledInactiveBorderColor?: ColorValue;
-  disabledInactiveContentColor?: ColorValue;
-  activeContainerColor?: ColorValue;
-  inactiveContainerColor?: ColorValue;
-  disabledActiveContainerColor?: ColorValue;
-  disabledInactiveContainerColor?: ColorValue;
-};
-
-export type PickerProps = {
-  /**
-   * An array of options to be displayed in the picker.
-   */
-  options: string[];
-  /**
-   * The index of the currently selected option.
-   */
-  selectedIndex: number | null;
-  /**
-   * Callback function that is called when an option is selected.
-   */
-  onOptionSelected?: (event: { nativeEvent: { index: number; label: string } }) => void;
-  /**
-   * The variant of the picker, which determines its appearance and behavior.
-   * @default 'segmented'
-   */
-  variant?: 'segmented' | 'radio';
-
-  /**
-   * Colors for picker's core elements.
-   */
-  elementColors?: PickerElementColors;
-  /**
-   * Picker color.
-   */
-  color?: ColorValue;
-  /**
-   * Modifiers for the component.
-   */
-  modifiers?: ExpoModifier[];
-  /** Modifiers for the individual buttons */
-  buttonModifiers?: ExpoModifier[];
-};
-
-const PickerNativeView: React.ComponentType<PickerProps> = requireNativeView(
-  'ExpoUI',
-  'PickerView'
-);
-
-type NativePickerProps = PickerProps;
-
-function transformPickerProps(props: PickerProps): NativePickerProps {
-  const { modifiers, ...restProps } = props;
-  return {
-    modifiers,
-    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
-    ...restProps,
-    variant: props.variant ?? 'segmented',
-    elementColors: props.elementColors
-      ? props.elementColors
-      : props.color
-        ? {
-            activeContainerColor: props.color,
-          }
-        : undefined,
-    color: props.color,
-  };
-}
-
-/**
- * Displays a native picker component. Depending on the variant it can be a segmented button, an inline picker, a list of choices or a radio button.
- */
-export function Picker(props: PickerProps) {
-  return <PickerNativeView {...transformPickerProps(props)} />;
-}

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

@@ -1,55 +0,0 @@
-import { requireNativeView } from 'expo';
-import { type ColorValue } from 'react-native';
-
-import { ExpoModifier, ViewEvent } from '../../types';
-import { getTextFromChildren } from '../../utils';
-import { createViewModifierEventListener } from '../modifiers/utils';
-
-export type TextButtonProps = {
-  /**
-   * The text content to display in the button.
-   */
-  children?: string | string[] | React.JSX.Element;
-  /**
-   * The color of the button text.
-   */
-  color?: ColorValue;
-  /**
-   * Whether the button is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Callback that is called when the button is pressed.
-   */
-  onPress?: () => void;
-  /**
-   * Modifiers for the component.
-   */
-  modifiers?: ExpoModifier[];
-};
-
-type NativeTextButtonProps = Omit<TextButtonProps, 'children' | 'onPress'> & {
-  text: string;
-} & ViewEvent<'onButtonPressed', void>;
-
-const TextButtonNativeView: React.ComponentType<NativeTextButtonProps> = requireNativeView(
-  'ExpoUI',
-  'TextButtonView'
-);
-
-function transformProps(props: TextButtonProps): NativeTextButtonProps {
-  const { children, modifiers, onPress, ...restProps } = props;
-  return {
-    modifiers,
-    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
-    ...restProps,
-    text: getTextFromChildren(children) ?? '',
-    onButtonPressed: onPress,
-  };
-}
-/**
- * A text button component that displays a clickable text label.
- */
-export function TextButton(props: TextButtonProps) {
-  return <TextButtonNativeView {...transformProps(props)} />;
-}