@expo/ui 56.0.3 → 56.0.5

package/src/ts-declarations/react-native-web.d.ts

@@ -0,0 +1,112 @@
+import * as ReactNative from 'react-native';
+
+declare module 'react-native' {
+  export const unstable_createElement: <P>(
+    type: React.ElementType,
+    props?: P
+  ) => React.ReactElement<P>;
+
+  type DisplayValue = ReactNative.FlexStyle['display'] | 'inline-flex';
+
+  type WebRole =
+    | ReactNative.Role
+    /**
+     * Accessibility roles mapped to components
+     * @see https://github.com/necolas/react-native-web/blob/0.19.1/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js
+     */
+    | 'article' // <article />
+    | 'banner' // <header />
+    | 'blockquote' // <blockquote />
+    | 'button' // <button />
+    | 'code' // <code />
+    | 'complementary' // <aside />
+    | 'contentinfo' // <footer />
+    | 'deletion' // <del />
+    | 'emphasis' // <em />
+    | 'figure' // <figure />
+    | 'form' // <form />
+    | 'heading' // <h{1,6} />
+    | 'insertion' // <ins />
+    | 'label' // <label />
+    | 'list' // <ul />
+    | 'listitem' // <li />
+    | 'main' // <main />
+    | 'navigation' // <nav />
+    | 'paragraph' // <p />
+    | 'region' // <section />
+    | 'strong'; // <strong />
+
+  interface WebAccessibilityProps {
+    /**
+     * Additional accessibility props
+     */
+    tabIndex?: 0 | -1;
+
+    /**
+     * Aria props (additional, minus existants)
+     * @see https://necolas.github.io/react-native-web/docs/accessibility
+     * @see https://reactnative.dev/docs/accessibility#aria-valuemax
+     */
+    'aria-activedescendant'?: string;
+    'aria-atomic'?: boolean;
+    'aria-autocomplete'?: string;
+    'aria-colcount'?: number;
+    'aria-colindex'?: number;
+    'aria-colspan'?: number;
+    'aria-controls'?: string;
+    'aria-current'?: boolean | 'page' | 'step' | 'location' | 'date' | 'time';
+    'aria-describedby'?: string;
+    'aria-details'?: string;
+    'aria-errormessage'?: string;
+    'aria-flowto'?: string;
+    'aria-haspopup'?: string;
+    'aria-invalid'?: boolean;
+    'aria-keyshortcuts'?: string;
+    'aria-level'?: number;
+    'aria-multiline'?: boolean;
+    'aria-multiselectable'?: boolean;
+    'aria-orientation'?: 'horizontal' | 'vertical';
+    'aria-owns'?: string;
+    'aria-placeholder'?: string;
+    'aria-posinset'?: number;
+    'aria-pressed'?: boolean;
+    'aria-readonly'?: boolean;
+    'aria-required'?: boolean;
+    'aria-roledescription'?: string;
+    'aria-rowcount'?: number;
+    'aria-rowindex'?: number;
+    'aria-rowspan'?: number;
+    'aria-setsize'?: number;
+    'aria-sort'?: 'ascending' | 'descending' | 'none' | 'other';
+  }
+
+  export interface PressableStateCallbackType {
+    readonly focused: boolean;
+    readonly hovered: boolean;
+    readonly pressed: boolean;
+  }
+
+  export interface ImageProps extends WebAccessibilityProps {
+    role?: WebRole;
+  }
+
+  export interface TextProps extends WebAccessibilityProps {
+    role?: WebRole;
+  }
+
+  export interface ViewProps extends WebAccessibilityProps {
+    role?: WebRole;
+  }
+
+  export interface ImageStyle {
+    display?: DisplayValue;
+  }
+
+  export interface TextStyle {
+    display?: DisplayValue;
+  }
+
+  export interface ViewStyle {
+    display?: DisplayValue;
+  }
+}

package/src/universal/Button/index.tsx

@@ -1,48 +1,40 @@
-import { useState } from 'react';
-import { Pressable, Text, type ViewStyle } from 'react-native';
+import { Pressable, StyleSheet, Text, type TextStyle, type ViewStyle } from 'react-native';
 
 import type { ButtonProps, ButtonVariant } from './types';
 import { useUniversalLifecycle } from '../hooks';
 
-const variantStyles: Record<ButtonVariant, ViewStyle> = {
-  filled: {
-    backgroundColor: '#007AFF',
+const styles = StyleSheet.create({
+  button: {
     paddingHorizontal: 16,
     paddingVertical: 10,
     borderRadius: 8,
+    userSelect: 'none',
   },
+  disabled: { opacity: 0.5 },
+  hidden: { display: 'none' },
+  label: { textAlign: 'center' },
+});
+
+const variantStyles = StyleSheet.create({
+  filled: { backgroundColor: '#007AFF' },
   outlined: {
-    backgroundColor: 'transparent',
-    paddingHorizontal: 16,
-    paddingVertical: 10,
-    borderRadius: 8,
-    borderWidth: 1,
     borderColor: '#007AFF',
+    borderWidth: 1,
   },
-  text: {
-    backgroundColor: 'transparent',
-    paddingHorizontal: 16,
-    paddingVertical: 10,
-  },
-};
+  text: {},
+} satisfies Record<ButtonVariant, ViewStyle>);
 
-const variantHoverStyles: Record<ButtonVariant, ViewStyle> = {
-  filled: {
-    backgroundColor: '#0066DB',
-  },
-  outlined: {
-    backgroundColor: 'rgba(0, 122, 255, 0.08)',
-  },
-  text: {
-    backgroundColor: 'rgba(0, 122, 255, 0.08)',
-  },
-};
+const variantHoverStyles = StyleSheet.create({
+  filled: { backgroundColor: '#0066DB' },
+  outlined: { backgroundColor: 'rgba(0, 122, 255, 0.08)' },
+  text: { backgroundColor: 'rgba(0, 122, 255, 0.08)' },
+} satisfies Record<ButtonVariant, ViewStyle>);
 
-const variantTextColors: Record<ButtonVariant, string> = {
-  filled: '#FFFFFF',
-  outlined: '#007AFF',
-  text: '#007AFF',
-};
+const variantLabelStyles = StyleSheet.create({
+  filled: { color: '#FFFFFF' },
+  outlined: { color: '#007AFF' },
+  text: { color: '#007AFF' },
+} satisfies Record<ButtonVariant, TextStyle>);
 
 /**
  * A pressable button that supports multiple visual variants.
@@ -55,32 +47,27 @@ export function Button({
   style,
   onAppear,
   onDisappear,
-  disabled,
-  hidden,
+  disabled = false,
+  hidden = false,
   testID,
 }: ButtonProps) {
   useUniversalLifecycle(onAppear, onDisappear);
-  const [hovered, setHovered] = useState(false);
-
-  const pressableStyle: ViewStyle = {
-    ...variantStyles[variant],
-    ...style,
-    ...(hovered && !disabled ? variantHoverStyles[variant] : undefined),
-    ...(hidden ? { display: 'none' } : undefined),
-    ...(disabled ? { opacity: 0.5 } : undefined),
-  };
 
   return (
     <Pressable
-      style={pressableStyle}
+      role="button"
       onPress={onPress}
-      onHoverIn={() => setHovered(true)}
-      onHoverOut={() => setHovered(false)}
       disabled={disabled}
-      testID={testID}>
-      {children ?? (
-        <Text style={{ color: variantTextColors[variant], textAlign: 'center' }}>{label}</Text>
-      )}
+      testID={testID}
+      style={({ hovered }) => [
+        styles.button,
+        variantStyles[variant],
+        style,
+        hovered && !disabled && variantHoverStyles[variant],
+        hidden && styles.hidden,
+        disabled && styles.disabled,
+      ]}>
+      {children ?? <Text style={[styles.label, variantLabelStyles[variant]]}>{label}</Text>}
     </Pressable>
   );
 }

package/src/universal/Checkbox/index.tsx

@@ -1,33 +1,46 @@
+import type { ComponentProps } from 'react';
+import { StyleSheet, Text, unstable_createElement, View, type ViewProps } from 'react-native';
+
 import type { CheckboxProps } from './types';
 
+const styles = StyleSheet.create({
+  label: {
+    flexDirection: 'row',
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 8,
+    cursor: 'pointer',
+  },
+  disabled: {
+    opacity: 0.5,
+    cursor: 'auto',
+  },
+  cursorInherit: {
+    // @ts-expect-error
+    cursor: 'inherit',
+  },
+});
+
+const NativeCheckbox = (
+  props: Omit<ComponentProps<'input'>, 'style' | 'type'> & { style?: ViewProps['style'] }
+) => unstable_createElement('input', { ...props, type: 'checkbox' });
+
 /**
  * A toggle control that represents a checked or unchecked state.
  */
-export function Checkbox({ value, onValueChange, label, disabled, testID }: CheckboxProps) {
+export function Checkbox({ value, onValueChange, label, disabled = false, testID }: CheckboxProps) {
   return (
-    <label style={{ ...labelStyle, ...(disabled ? disabledStyle : undefined) }}>
-      <input
-        type="checkbox"
+    <View role="label" aria-disabled={disabled} style={[styles.label, disabled && styles.disabled]}>
+      <NativeCheckbox
         checked={value}
         onChange={(e) => onValueChange(e.target.checked)}
         disabled={disabled}
         data-testid={testID}
+        style={styles.cursorInherit}
       />
-      {label != null && <span>{label}</span>}
-    </label>
+      {label != null && <Text>{label}</Text>}
+    </View>
   );
 }
 
-const labelStyle: React.CSSProperties = {
-  display: 'inline-flex',
-  alignItems: 'center',
-  gap: 8,
-  cursor: 'pointer',
-};
-
-const disabledStyle: React.CSSProperties = {
-  opacity: 0.5,
-  cursor: 'default',
-};
-
 export * from './types';

package/src/universal/Column/index.tsx

@@ -1,14 +1,23 @@
-import { Pressable, View, type ViewStyle } from 'react-native';
+import { Pressable, StyleSheet, View, type ViewStyle } from 'react-native';
 
 import type { ColumnProps } from './types';
 import { useUniversalLifecycle } from '../hooks';
 import type { UniversalAlignment } from '../types';
 
-const alignmentMap: Record<UniversalAlignment, ViewStyle['alignItems']> = {
-  start: 'flex-start',
-  center: 'center',
-  end: 'flex-end',
-};
+const styles = StyleSheet.create({
+  column: { flexDirection: 'column' },
+  hidden: { display: 'none' },
+  disabled: {
+    opacity: 0.5,
+    pointerEvents: 'none',
+  },
+});
+
+const alignmentStyles = StyleSheet.create({
+  start: { alignItems: 'flex-start' },
+  center: { alignItems: 'center' },
+  end: { alignItems: 'flex-end' },
+} satisfies Record<UniversalAlignment, ViewStyle>);
 
 /**
  * A vertical layout container that arranges its children from top to bottom.
@@ -21,25 +30,27 @@ export function Column({
   onPress,
   onAppear,
   onDisappear,
-  disabled,
-  hidden,
+  disabled = false,
+  hidden = false,
   testID,
 }: ColumnProps) {
   useUniversalLifecycle(onAppear, onDisappear);
 
-  const viewStyle: ViewStyle = {
-    flexDirection: 'column',
-    alignItems: alignmentMap[alignment],
-    gap: spacing,
-    ...style,
-    ...(hidden ? { display: 'none' } : undefined),
-    ...(disabled ? { opacity: 0.5, pointerEvents: 'none' } : undefined),
-  };
-
   const Container = onPress ? Pressable : View;
 
   return (
-    <Container style={viewStyle} onPress={onPress} disabled={disabled} testID={testID}>
+    <Container
+      onPress={onPress}
+      disabled={disabled}
+      testID={testID}
+      style={[
+        styles.column,
+        alignmentStyles[alignment],
+        spacing != null && { gap: spacing },
+        style,
+        hidden && styles.hidden,
+        disabled && styles.disabled,
+      ]}>
       {children}
     </Container>
   );

package/src/universal/FieldGroup/FieldGroup.tsx

@@ -1,9 +1,27 @@
-import { ScrollView, useColorScheme, type ViewStyle } from 'react-native';
+import { ScrollView, StyleSheet, useColorScheme } from 'react-native';
 
 import { groupFieldGroupChildren } from './groupChildren';
 import type { FieldGroupProps } from './types';
 import { useUniversalLifecycle } from '../hooks';
 
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#f2f2f7',
+    flex: 1,
+  },
+  containerDark: {
+    backgroundColor: '#000000',
+  },
+  hidden: {
+    display: 'none',
+  },
+  contentContainer: {
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    gap: 24,
+  },
+});
+
 /**
  * A scrollable container for grouped settings-style rows, mirroring the look
  * of an iOS Settings screen. Render one or more
@@ -16,7 +34,7 @@ export function FieldGroup({
   style,
   onAppear,
   onDisappear,
-  hidden,
+  hidden = false,
   testID,
 }: FieldGroupProps) {
   useUniversalLifecycle(onAppear, onDisappear);
@@ -26,36 +44,14 @@ export function FieldGroup({
   return (
     <ScrollView
       style={[
-        containerBaseStyle,
-        isDarkScheme ? containerDarkStyle : containerLightStyle,
+        styles.container,
+        isDarkScheme && styles.containerDark,
         style,
-        hidden ? hiddenStyle : null,
+        hidden && styles.hidden,
       ]}
-      contentContainerStyle={contentContainerStyle}
+      contentContainerStyle={styles.contentContainer}
       testID={testID}>
       {groupFieldGroupChildren(children)}
     </ScrollView>
   );
 }
-
-const containerBaseStyle: ViewStyle = {
-  flex: 1,
-};
-
-const containerLightStyle: ViewStyle = {
-  backgroundColor: '#f2f2f7',
-};
-
-const containerDarkStyle: ViewStyle = {
-  backgroundColor: '#000000',
-};
-
-const hiddenStyle: ViewStyle = {
-  display: 'none',
-};
-
-const contentContainerStyle: ViewStyle = {
-  paddingHorizontal: 16,
-  paddingVertical: 16,
-  gap: 24,
-};

package/src/universal/FieldGroup/FieldSection.tsx

@@ -1,10 +1,62 @@
 import { Fragment } from 'react';
-import { Text, useColorScheme, View, type TextStyle, type ViewStyle } from 'react-native';
+import { StyleSheet, Text, useColorScheme, View } from 'react-native';
 
 import { extractFieldSectionSlots } from './FieldSectionSlots';
 import type { FieldSectionProps } from './types';
 import { useUniversalLifecycle } from '../hooks';
 
+const styles = StyleSheet.create({
+  hidden: {
+    display: 'none',
+  },
+  headerContainer: {
+    paddingHorizontal: 16,
+    paddingBottom: 8,
+  },
+  headerText: {
+    color: '#6c6c70',
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  headerTextDark: {
+    color: '#98989e',
+  },
+  headerTextUppercase: {
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+    fontSize: 13,
+  },
+  card: {
+    backgroundColor: '#ffffff',
+    borderRadius: 12,
+    overflow: 'hidden',
+  },
+  cardDark: {
+    backgroundColor: '#1c1c1e',
+  },
+  // Gives each row the same minimum height SwiftUI `Form` uses for single-line
+  // rows on iOS, so a text-only row doesn't collapse to its text intrinsic
+  // size. Taller content (e.g. a Switch) grows the row naturally. Horizontal
+  // padding matches SwiftUI `Form`'s built-in row leading/trailing inset.
+  rowWrapper: {
+    minHeight: 44,
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+  },
+  divider: {
+    backgroundColor: '#e5e5ea',
+    height: 1,
+    marginLeft: 16,
+  },
+  dividerDark: {
+    backgroundColor: '#38383a',
+  },
+  footerContainer: {
+    paddingHorizontal: 16,
+    paddingTop: 8,
+  },
+});
+
 /**
  * A grouped list of rows within a [`FieldGroup`](#fieldgroup). Each direct
  * child is rendered as a single row. Use `title` for a simple caption header,
@@ -27,105 +79,35 @@ export function FieldSection({
 
   const { header, footer, rows } = extractFieldSectionSlots(children);
 
-  const containerStyle: ViewStyle = {
-    ...style,
-    ...(hidden ? { display: 'none' } : undefined),
-  };
-
   const headerNode =
     header ??
     (title ? (
       <Text
         style={[
-          headerTextStyle,
-          isDarkScheme ? headerTextDarkStyle : headerTextLightStyle,
-          titleUppercase ? headerTextUppercaseStyle : null,
+          styles.headerText,
+          isDarkScheme && styles.headerTextDark,
+          titleUppercase && styles.headerTextUppercase,
         ]}>
         {title}
       </Text>
     ) : null);
 
   return (
-    <View style={containerStyle} testID={testID}>
-      {headerNode ? <View style={headerContainerStyle}>{headerNode}</View> : null}
+    <View style={[style, hidden && styles.hidden]} testID={testID}>
+      {headerNode ? <View style={styles.headerContainer}>{headerNode}</View> : null}
       {rows.length > 0 ? (
-        <View style={[cardBaseStyle, isDarkScheme ? cardDarkStyle : cardLightStyle]}>
+        <View style={[styles.card, isDarkScheme && styles.cardDark]}>
           {rows.map((child, index) => (
             <Fragment key={index}>
-              <View style={rowWrapperStyle}>{child}</View>
+              <View style={styles.rowWrapper}>{child}</View>
               {index < rows.length - 1 ? (
-                <View style={[dividerStyle, isDarkScheme ? dividerDarkStyle : dividerLightStyle]} />
+                <View style={[styles.divider, isDarkScheme && styles.dividerDark]} />
               ) : null}
             </Fragment>
           ))}
         </View>
       ) : null}
-      {footer ? <View style={footerContainerStyle}>{footer}</View> : null}
+      {footer ? <View style={styles.footerContainer}>{footer}</View> : null}
     </View>
   );
 }
-
-const headerContainerStyle: ViewStyle = {
-  paddingHorizontal: 16,
-  paddingBottom: 8,
-};
-
-const headerTextStyle: TextStyle = {
-  fontSize: 14,
-  fontWeight: '500',
-};
-
-const headerTextLightStyle: TextStyle = {
-  color: '#6c6c70',
-};
-
-const headerTextDarkStyle: TextStyle = {
-  color: '#98989e',
-};
-
-const headerTextUppercaseStyle: TextStyle = {
-  textTransform: 'uppercase',
-  letterSpacing: 0.5,
-  fontSize: 13,
-};
-
-const cardBaseStyle: ViewStyle = {
-  borderRadius: 12,
-  overflow: 'hidden',
-};
-
-const cardLightStyle: ViewStyle = {
-  backgroundColor: '#ffffff',
-};
-
-const cardDarkStyle: ViewStyle = {
-  backgroundColor: '#1c1c1e',
-};
-
-// Gives each row the same minimum height SwiftUI `Form` uses for single-line
-// rows on iOS, so a text-only row doesn't collapse to its text intrinsic
-// size. Taller content (e.g. a Switch) grows the row naturally. Horizontal
-// padding matches SwiftUI `Form`'s built-in row leading/trailing inset.
-const rowWrapperStyle: ViewStyle = {
-  minHeight: 44,
-  justifyContent: 'center',
-  paddingHorizontal: 16,
-};
-
-const dividerStyle: ViewStyle = {
-  height: 1,
-  marginLeft: 16,
-};
-
-const dividerLightStyle: ViewStyle = {
-  backgroundColor: '#e5e5ea',
-};
-
-const dividerDarkStyle: ViewStyle = {
-  backgroundColor: '#38383a',
-};
-
-const footerContainerStyle: ViewStyle = {
-  paddingHorizontal: 16,
-  paddingTop: 8,
-};