@expo/ui 0.0.2 → 0.1.0-alpha.0

package/BottomSheet/index.ios.tsx

@@ -0,0 +1,34 @@
+import { requireNativeView } from 'expo';
+import { Dimensions, NativeSyntheticEvent, View } from 'react-native';
+
+import { BottomSheetProps } from '.';
+
+type NativeBottomSheetProps = Omit<BottomSheetProps, 'onIsOpenedChange'> & {
+  onIsOpenedChange: (event: NativeSyntheticEvent<{ isOpened: boolean }>) => void;
+};
+
+const BottomSheetNativeView: React.ComponentType<NativeBottomSheetProps> = requireNativeView(
+  'ExpoUI',
+  'BottomSheetView'
+);
+
+export function transformBottomSheetProps(props: BottomSheetProps): NativeBottomSheetProps {
+  return {
+    ...props,
+    onIsOpenedChange: ({ nativeEvent: { isOpened } }) => {
+      props?.onIsOpenedChange?.(isOpened);
+    },
+  };
+}
+
+export function BottomSheet(props: BottomSheetProps) {
+  const { width } = Dimensions.get('window');
+  return (
+    <View>
+      <BottomSheetNativeView
+        style={{ position: 'absolute', width }}
+        {...transformBottomSheetProps(props)}
+      />
+    </View>
+  );
+}

package/BottomSheet/index.tsx

@@ -0,0 +1,12 @@
+import { StyleProp, ViewStyle } from 'react-native';
+
+export type BottomSheetProps = {
+  style?: StyleProp<ViewStyle>;
+  children: any;
+  isOpened: boolean;
+  onIsOpenedChange: (isOpened: boolean) => void;
+};
+
+export function BottomSheet({ children }: BottomSheetProps) {
+  return children;
+}

package/{components/Button → Button}/index.tsx

@@ -1,7 +1,8 @@
 import { requireNativeView } from 'expo';
-import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
+import { Platform, StyleProp, StyleSheet, ViewStyle } from 'react-native';
 
-import { ViewEvent } from '../../src';
+import { MaterialIcon } from './types';
+import { ViewEvent } from '../src/types';
 
 /**
  * The role of the button.
@@ -14,10 +15,12 @@ export type ButtonRole = 'default' | 'cancel' | 'destructive';
 
 /**
  * The built-in button styles available on iOS and Android.
+ *
  * Common styles:
  * - `default` - The default system button style.
  * - `bordered` - A button with a light fill. On Android equivalent to `FilledTonalButton`.
  * - `borderless` - A button with no background or border. On Android equivalent to `TextButton`.
+ *
  * Apple-only styles:
  * - `borderedProminent` - A bordered button with a prominent appearance.
  * - `plain` - A button with no border or background and a less prominent text.
@@ -26,12 +29,10 @@ export type ButtonRole = 'default' | 'cancel' | 'destructive';
  * - `accessoryBarAction` - A button style for accessory bar actions.
  * - `card` - A button style for cards.
  * - `link` - A button style for links.
+ *
  * Android-only styles:
  * - `outlined` - A button with an outline.
  * - `elevated` - A filled button with a shadow.
- *
- * @platform android
- * @platform ios
  */
 export type ButtonVariant =
   // Common
@@ -50,6 +51,17 @@ export type ButtonVariant =
   | 'outlined'
   | 'elevated';
 
+/**
+ * Colors for button's core elements.
+ * @platform android
+ */
+export type ButtonElementColors = {
+  containerColor?: string;
+  contentColor?: string;
+  disabledContainerColor?: string;
+  disabledContentColor?: string;
+};
+
 export type ButtonProps = {
   /**
    * A callback that is called when the button is pressed.
@@ -57,9 +69,12 @@ export type ButtonProps = {
   onPress?: () => void;
   /**
    * A string describing the system image to display in the button.
-   * @platform ios
+   * Uses Material Icons on Android and SF Symbols on iOS.
    */
-  systemImage?: string;
+  systemImage?: {
+    ios?: string;
+    android?: MaterialIcon;
+  };
   /**
    * Indicated the role of the button.
    * @platform ios
@@ -81,21 +96,27 @@ export type ButtonProps = {
    * Colors for button's core elements.
    * @platform android
    */
-  elementColors?: {
-    containerColor?: string;
-    contentColor?: string;
-    disabledContainerColor?: string;
-    disabledContentColor?: string;
-  };
+  elementColors?: ButtonElementColors;
   /**
    * Button color.
    */
   color?: string;
+  /**
+   * Disabled state of the button.
+   */
+  disabled?: boolean;
 };
 
-export type NativeButtonProps = Omit<ButtonProps, 'role' | 'onPress' | 'children'> & {
+/**
+ * @hidden
+ */
+export type NativeButtonProps = Omit<
+  ButtonProps,
+  'role' | 'onPress' | 'children' | 'systemImage'
+> & {
   buttonRole?: ButtonRole;
   text: string;
+  systemImage?: string;
 } & ViewEvent<'onButtonPressed', void>;
 
 // We have to work around the `role` and `onPress` props being reserved by React Native.
@@ -104,12 +125,16 @@ const ButtonNativeView: React.ComponentType<NativeButtonProps> = requireNativeVi
   'Button'
 );
 
+/**
+ * @hidden
+ */
 export function transformButtonProps(props: ButtonProps): NativeButtonProps {
-  const { role, children, onPress, ...restProps } = props;
+  const { role, children, onPress, systemImage, ...restProps } = props;
   return {
     ...restProps,
     text: children ?? '',
     buttonRole: role,
+    systemImage: systemImage?.[Platform.OS as 'ios' | 'android'],
     onButtonPressed: onPress,
     elementColors: props.elementColors
       ? props.elementColors
@@ -121,12 +146,18 @@ export function transformButtonProps(props: ButtonProps): NativeButtonProps {
   };
 }
 
+/**
+ * Displays a native button component.
+ */
 export function Button(props: ButtonProps) {
   // Min height from https://m3.material.io/components/buttons/specs, minWidth
   return (
     <ButtonNativeView
       {...transformButtonProps(props)}
-      style={StyleSheet.compose({ minWidth: 80, minHeight: 40 }, props.style)}
+      style={StyleSheet.compose(
+        Platform.OS === 'android' ? { minWidth: 80, minHeight: 40 } : {},
+        props.style
+      )}
     />
   );
 }

package/Button/types.ts

@@ -0,0 +1,54 @@
+type Variant = 'rounded' | 'twotone' | 'outlined' | 'filled' | 'sharp';
+
+type Icon =
+  | 'AccountBox'
+  | 'AccountCircle'
+  | 'Add'
+  | 'AddCircle'
+  | 'ArrowBack'
+  | 'ArrowDropDown'
+  | 'ArrowForward'
+  | 'Build'
+  | 'Call'
+  | 'Check'
+  | 'CheckCircle'
+  | 'Clear'
+  | 'Close'
+  | 'Create'
+  | 'DateRange'
+  | 'Delete'
+  | 'Done'
+  | 'Edit'
+  | 'Email'
+  | 'ExitToApp'
+  | 'Face'
+  | 'Favorite'
+  | 'FavoriteBorder'
+  | 'Home'
+  | 'Info'
+  | 'KeyboardArrowDown'
+  | 'KeyboardArrowLeft'
+  | 'KeyboardArrowRight'
+  | 'KeyboardArrowUp'
+  | 'List'
+  | 'LocationOn'
+  | 'Lock'
+  | 'MailOutline'
+  | 'Menu'
+  | 'MoreVert'
+  | 'Notifications'
+  | 'Person'
+  | 'Phone'
+  | 'Place'
+  | 'PlayArrow'
+  | 'Refresh'
+  | 'Search'
+  | 'Send'
+  | 'Settings'
+  | 'Share'
+  | 'ShoppingCart'
+  | 'Star'
+  | 'ThumbUp'
+  | 'Warning';
+
+export type MaterialIcon = `${Variant}.${Icon}`;

package/CHANGELOG.md

@@ -10,23 +10,63 @@
 
 ### 💡 Others
 
+## 0.1.0-alpha.0 — 2025-04-04
+
+### 🛠 Breaking changes
+
+- upgrade RN to 0.78 ([#35050](https://github.com/expo/expo/pull/35050) by [@vonovak](https://github.com/vonovak))
+
+### 🎉 New features
+
+- [iOS] Add bottom sheet. ([#35455](https://github.com/expo/expo/pull/35455) by [@aleqsio](https://github.com/aleqsio))
+- [iOS] Add support for `pallete` and `inline` pickers. ([#35435](https://github.com/expo/expo/pull/35435) by [@aleqsio](https://github.com/aleqsio))
+- Add TextInput for Android. ([#35228](https://github.com/expo/expo/pull/35228) by [@aleqsio](https://github.com/aleqsio))
+- Add context menu previews. ([#35369](https://github.com/expo/expo/pull/35369) by [@aleqsio](https://github.com/aleqsio)).
+- Add TextInput for iOS. ([#35098](https://github.com/expo/expo/pull/35098) by [@aleqsio](https://github.com/aleqsio))
+- Add `disabled` button prop. ([#35115](https://github.com/expo/expo/pull/35115) by [@andrew-levy](https://github.com/andrew-levy))
+- Add Radio option to Picker Component for Android. ([#34629](https://github.com/expo/expo/pull/34629)) by [@benjaminkomen](https://github.com/benjaminkomen)
+- Add color support for `ContextMenu` components. ([#34787](https://github.com/expo/expo/pull/34787) by [@behenate](https://github.com/behenate))
+- Adds `DateTimePicker` component. ([#34883](https://github.com/expo/expo/pull/34883) by [@alanjhughes](https://github.com/alanjhughes))
+- Add CircularProgress and LinearProgress component. ([#34907](https://github.com/expo/expo/pull/34907) by [@janicduplessis](https://github.com/janicduplessis))
+- Add Gauge component ([#35032](https://github.com/expo/expo/pull/35032) by [@jakex7](https://github.com/jakex7))
+- Add List and Label component ([#35222](https://github.com/expo/expo/pull/35222) by [@Pflaumenbaum](https://github.com/Pflaumenbaum))
+
+### 🐛 Bug fixes
+
+- [iOS] Fix tvOS breakage. ([#35146](https://github.com/expo/expo/pull/35146) by [@douglowder](https://github.com/douglowder))
+
+### 💡 Others
+
+- Refactor imports, update docs ([#35819](https://github.com/expo/expo/pull/35819) by [@aleqsio](https://github.com/aleqsio))
+- Drop section polyfill for Android ([#35305](https://github.com/expo/expo/pull/35305) by [@aleqsio](https://github.com/aleqsio))
+- Standardize platform key ordering in `expo-module.config.json`. ([#35003](https://github.com/expo/expo/pull/35003) by [@reichhartd](https://github.com/reichhartd))
+- Dismiss context menu when a menu item is tapped on Android ([#35365](https://github.com/expo/expo/pull/35365) by [@fobos531](https://github.com/fobos531))
+- Migrated SwiftUI views with backward compatible `WithHostingView`. ([#35553](https://github.com/expo/expo/pull/35553) by [@kudo](https://github.com/kudo))
+
 ## 0.0.2 — 2025-02-11
 
 ### 🎉 New features
 
+- Add `systemImage` prop to Android `Button` component. ([#34862](https://github.com/expo/expo/pull/34862) by [@andrew-levy](https://github.com/andrew-levy))
+- Add `UnwrappedChildren` for nested SwiftUI views. ([#34954](https://github.com/expo/expo/pull/34954) by [@andrew-levy](https://github.com/andrew-levy))
 - Add `color` and `elementColors` props. ([#34666](https://github.com/expo/expo/pull/34666) by [@aleqsio](https://github.com/aleqsio))
 - Add Button component.([#34340](https://github.com/expo/expo/pull/34340) by [@behenate](https://github.com/behenate))
 - Apple TV support and source restructure. ([#34532](https://github.com/expo/expo/pull/34532) by [@douglowder](https://github.com/douglowder))
 - Add `ContextMenu` component. ([#34553](https://github.com/expo/expo/pull/34553) by [@behenate](https://github.com/behenate))
+- Add `ColorPicker` component. ([#34819](https://github.com/expo/expo/pull/34819) by [@andrew-levy](https://github.com/andrew-levy))
 
 ### 🐛 Bug fixes
 
+- Fix flex/width/height props for autosized components. ([#34922](https://github.com/expo/expo/pull/34922) by [@aleqsio](https://github.com/aleqsio))
 - Fix tvOS compilation. ([#34730](https://github.com/expo/expo/pull/34730) by [@douglowder](https://github.com/douglowder))
+- Exclude `ColorPicker` on tvOS. ([#34929](https://github.com/expo/expo/pull/34929) by [@alanjhughes](https://github.com/alanjhughes))
 
 ### 💡 Others
 
+- Add docs ([#34808](https://github.com/expo/expo/pull/34808) by [@aleqsio](https://github.com/aleqsio))
 - [apple] Migrate remaining `expo-module.config.json` to unified platform syntax. ([#34445](https://github.com/expo/expo/pull/34445) by [@reichhartd](https://github.com/reichhartd))
 - Rename the events for the `Switch` component. ([#34577](https://github.com/expo/expo/pull/34577) by [@behenate](https://github.com/behenate))
+- Allow lower case section titles ([#35113](https://github.com/expo/expo/pull/35113) by [@Pflaumenbaum](https://github.com/Pflaumenbaum))
 
 ## 0.0.1 — 2025-01-21
 

package/ColorPicker/index.tsx

@@ -0,0 +1,54 @@
+import { requireNativeView } from 'expo';
+import { useCallback } from 'react';
+import { NativeSyntheticEvent, processColor, StyleProp, ViewStyle } from 'react-native';
+
+/**
+ * Props for the ColorPicker component.
+ */
+export type ColorPickerProps = {
+  /**
+   * The currently selected color in the format `#RRGGBB` or `#RRGGBBAA`.
+   */
+  selection: string | null;
+  /**
+   * A label displayed on the ColorPicker.
+   */
+  label?: string;
+  /**
+   * Callback function that is called when a new color is selected.
+   */
+  onValueChanged?: (value: string) => void;
+  /**
+   * Optional style to apply to the ColorPicker component.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Whether the color picker should support opacity.
+   */
+  supportsOpacity?: boolean;
+};
+
+type OnValueChangedEvent = NativeSyntheticEvent<{ value: string }>;
+
+const ColorPickerNativeView: React.ComponentType<
+  Omit<ColorPickerProps, 'selection' | 'onValueChanged'> & {
+    selection: ReturnType<typeof processColor>;
+    onValueChanged: (event: OnValueChangedEvent) => void;
+  }
+> = requireNativeView('ExpoUI', 'ColorPickerView');
+
+export function ColorPicker({ selection, onValueChanged, ...restProps }: ColorPickerProps) {
+  const onNativeValueChanged = useCallback(
+    (event: OnValueChangedEvent) => {
+      onValueChanged?.(event.nativeEvent.value);
+    },
+    [onValueChanged]
+  );
+  return (
+    <ColorPickerNativeView
+      selection={processColor(selection || '')}
+      onValueChanged={onNativeValueChanged}
+      {...restProps}
+    />
+  );
+}

package/ContextMenu/index.android.tsx

@@ -0,0 +1,72 @@
+import { requireNativeView } from 'expo';
+import { Children, useMemo } from 'react';
+import { NativeSyntheticEvent } from 'react-native';
+
+import { ContextMenuProps, EventHandlers, NativeMenuProps } from '.';
+import { transformChildrenToElementArray } from './utils';
+
+const MenuNativeView: React.ComponentType<NativeMenuProps> = requireNativeView(
+  'ExpoUI',
+  'ContextMenu'
+);
+
+export function Submenu() {
+  return <></>;
+}
+
+export function Items() {
+  return <></>;
+}
+Items.tag = 'Items';
+
+export function Trigger(props: { children: React.ReactNode }) {
+  return <></>;
+}
+Trigger.tag = 'Trigger';
+
+export function Preview(props: { children: React.ReactNode }) {
+  return <></>;
+}
+
+function ContextMenu(props: ContextMenuProps) {
+  const eventHandlersMap: EventHandlers = {};
+  const initialChildren = Children.map(
+    props.children as any,
+    (c: { type: { tag: string }; props: { children: React.ReactNode } }) =>
+      c.type.tag === Items.tag ? c.props.children : null
+  );
+  const processedElements = useMemo(
+    () => transformChildrenToElementArray(initialChildren, eventHandlersMap),
+    [initialChildren]
+  );
+
+  const activationElement = Children.map(
+    props.children as any,
+    (c: { type: { tag: string }; props: { children: React.ReactNode } }) =>
+      c.type.tag === Trigger.tag ? c.props.children : null
+  );
+
+  const createEventHandler =
+    (handlerType: string) => (e: NativeSyntheticEvent<{ contextMenuElementID: string }>) => {
+      const handler = eventHandlersMap[e.nativeEvent.contextMenuElementID]?.[handlerType];
+      handler?.(e);
+    };
+
+  return (
+    <MenuNativeView
+      style={props.style}
+      elements={processedElements}
+      onContextMenuButtonPressed={createEventHandler('onPress')}
+      onContextMenuSwitchValueChanged={createEventHandler('onValueChange')}
+      onContextMenuPickerOptionSelected={createEventHandler('onOptionSelected')}
+      {...props}>
+      {activationElement}
+    </MenuNativeView>
+  );
+}
+
+ContextMenu.Trigger = Trigger;
+ContextMenu.Preview = Preview;
+ContextMenu.Items = Items;
+
+export { ContextMenu };

package/{components/ContextMenu → ContextMenu}/index.tsx

@@ -1,11 +1,26 @@
 import { requireNativeView } from 'expo';
-import React, { ReactElement, ReactNode, useMemo } from 'react';
+import { ComponentType, Children, ReactElement, ReactNode, useMemo } from 'react';
 import { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
 
+import { MenuElement, transformChildrenToElementArray } from './utils';
 import { ButtonProps } from '../Button';
 import { PickerProps } from '../Picker';
 import { SwitchProps } from '../Switch';
-import { MenuElement, transformChildrenToElementArray } from './utils';
+
+const MenuNativeView: ComponentType<NativeMenuProps> = requireNativeView(
+  'ExpoUI',
+  'ContextMenu'
+);
+
+const MenuNativeTriggerView: ComponentType<object> = requireNativeView(
+  'ExpoUI',
+  'ContextMenuActivationElement'
+);
+
+const MenuNativePreviewView: ComponentType<object> = requireNativeView(
+  'ExpoUI',
+  'ContextMenuPreview'
+);
 
 type SubmenuElement =
   | ReactElement<ButtonProps>
@@ -13,18 +28,21 @@ type SubmenuElement =
   | ReactElement<PickerProps>
   | ReactElement<SubmenuProps>;
 
-type ContentChildren = SubmenuElement | SubmenuElement[];
-
 export type ContextMenuContentProps = {
-  children: ContentChildren;
+  children: SubmenuElement | SubmenuElement[];
 };
 
-export type EventHandlers = {
-  [key: string]: {
-    [key: string]: (event: NativeSyntheticEvent<any>) => void;
-  };
-};
+/**
+ * @hidden
+ */
+export type EventHandlers = Record<
+  string,
+  Record<string, (event: NativeSyntheticEvent<any>) => void>
+>;
 
+/**
+ * @hidden
+ */
 export type ContextMenuElementBase = { contextMenuElementID: string };
 
 /**
@@ -38,13 +56,6 @@ export type ActivationMethod = 'singlePress' | 'longPress';
  * Props of the `ContextMenu` component.
  */
 export type ContextMenuProps = {
-  /**
-   * Items visible inside the context menu. The items should be wrapped in a `React.Fragment`.
-   * `Button`, `Switch` and `Submenu` components are supported on both Android and iOS.
-   * The `Picker` component is supported only on iOS. Remember to use components from the `@expo/ui` library.
-   */
-  Items: React.ReactElement<ContextMenuContentProps>;
-
   /**
    * Determines how the context menu will be activated.
    *
@@ -58,6 +69,13 @@ export type ContextMenuProps = {
    */
   children: ReactNode;
 
+  /**
+   * The color of the container holding the context menu items.
+   *
+   * @platform android
+   */
+  color?: string;
+
   /**
    * Optional styles to apply to the `ContextMenu`
    */
@@ -71,14 +89,17 @@ export type SubmenuProps = {
   /**
    * The button that will be used to expand the submenu. On Android the `text` prop of the `Button` will be used as a section title.
    */
-  button: React.ReactElement<ButtonProps>;
+  button: ReactElement<ButtonProps>;
   /**
    * Children of the submenu. Only `Button`, `Switch`, `Picker` and `Submenu` elements should be used.
    */
-  children: React.ReactNode;
+  children: ReactNode;
 };
 
-type NativeMenuProps = ContextMenuProps & {
+/**
+ * @hidden
+ */
+export type NativeMenuProps = ContextMenuProps & {
   elements: MenuElement[];
   onContextMenuButtonPressed: (
     event: NativeSyntheticEvent<{ contextMenuElementID: string }>
@@ -98,11 +119,6 @@ type NativeMenuProps = ContextMenuProps & {
   ) => void;
 };
 
-const MenuNativeView: React.ComponentType<NativeMenuProps> = requireNativeView(
-  'ExpoUI',
-  'ContextMenu'
-);
-
 /**
  * The `Submenu` component is used to create a nested context menu. Submenus can be infinitely nested.
  * Android does not support nesting in the context menu. All the submenus will be flat-mapped into a single level with multiple titled sections.
@@ -111,6 +127,30 @@ export function Submenu(props: SubmenuProps) {
   return <></>;
 }
 
+/**
+ * Items visible inside the context menu. Pass input components as immidiate children of the tag.
+ * `Button`, `Switch` and `Submenu` components are supported on both Android and iOS.
+ * The `Picker` component is supported only on iOS. Remember to use components from the `@expo/ui` library.
+ */
+export function Items(props: { children: React.ReactNode }) {
+  return <></>;
+}
+Items.tag = 'Items';
+/**
+ * The component visible all the time that triggers the menu when tapped or long-pressed.
+ */
+export function Trigger(props: { children: React.ReactNode }) {
+  return <MenuNativeTriggerView {...props} />;
+}
+
+/**
+ * The component visible above the menu when it is opened.
+ * @platform ios
+ */
+export function Preview(props: { children: React.ReactNode }) {
+  return <MenuNativePreviewView {...props} />;
+}
+
 /**
  * `ContextMenu` allows you to create a context menu, which can be used to provide additional options to the user.
  *
@@ -120,18 +160,22 @@ export function Submenu(props: SubmenuProps) {
  * - Android does not support nesting in the context menu. All the submenus will be flat-mapped into a single level with multiple sections. The `title` prop of the `Button`, which opens the submenu on iOS will be used as a section title.
  * - Android does not support showing a `Picker` element in the context menu.
  */
-export function ContextMenu(props: ContextMenuProps) {
+function ContextMenu(props: ContextMenuProps) {
   const eventHandlersMap: EventHandlers = {};
-  const initialChildren = props.Items.props.children;
+  const initialChildren = Children.map(
+    props.children as any,
+    (c: { type: { tag: string }; props: { children: React.ReactNode } }) =>
+      c.type.tag === Items.tag ? c.props.children : null
+  );
   const processedElements = useMemo(
     () => transformChildrenToElementArray(initialChildren, eventHandlersMap),
     [initialChildren]
   );
 
   const createEventHandler =
-    (handlerType: string) => (e: NativeSyntheticEvent<{ contextMenuElementID: string }>) => {
-      const handler = eventHandlersMap[e.nativeEvent.contextMenuElementID]?.[handlerType];
-      handler?.(e);
+    (handlerType: string) => (event: NativeSyntheticEvent<{ contextMenuElementID: string }>) => {
+      const handler = eventHandlersMap[event.nativeEvent.contextMenuElementID]?.[handlerType];
+      handler?.(event);
     };
 
   return (
@@ -145,3 +189,9 @@ export function ContextMenu(props: ContextMenuProps) {
     />
   );
 }
+
+ContextMenu.Trigger = Trigger;
+ContextMenu.Preview = Preview;
+ContextMenu.Items = Items;
+
+export { ContextMenu };

package/{components/ContextMenu → ContextMenu}/utils.ts

@@ -52,18 +52,22 @@ function processChildElement(
   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);
   }