@expo/html-elements - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0

build/elements/Anchor.js

@@ -23,4 +23,4 @@ import React, { forwardRef } from 'react';
     });
-    return <Text accessibilityRole="link" {...props} {...nativeProps} ref={ref}/>;
+    return <Text role="link" {...props} {...nativeProps} ref={ref}/>;
 });
 //# sourceMappingURL=Anchor.js.map

build/elements/Headings.js

@@ -8,8 +8,11 @@ import React, { forwardRef } from 'react';
         web: {
-            accessibilityLevel: level,
+            'aria-level': level,
+            role: 'header',
         },
-        default: {},
+        default: {
+            accessibilityRole: 'header',
+        },
     });
     return forwardRef((props, ref) => {
-        return (<Text {...nativeProps} accessibilityRole="header" {...props} style={[styles[`h${level}`], props.style]} ref={ref}/>);
+        return (<Text {...nativeProps} {...props} style={[styles[`h${level}`], props.style]} ref={ref}/>);
     });
@@ -23,2 +26,10 @@ }
 export const H6 = createHeadingComponent(6);
+if (__DEV__) {
+    H1.displayName = 'H1';
+    H2.displayName = 'H2';
+    H3.displayName = 'H3';
+    H4.displayName = 'H4';
+    H5.displayName = 'H5';
+    H6.displayName = 'H6';
+}
 // Default web styles: http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
@@ -25,0 +36,0 @@ const styles = StyleSheet.create({

build/elements/Layout.js

@@ -12,3 +12,3 @@ import React, { forwardRef } from 'react';
     web: {
-        accessibilityRole: 'navigation',
+        role: 'navigation',
     },
@@ -18,3 +18,3 @@ }));
     web: {
-        accessibilityRole: 'contentinfo',
+        role: 'contentinfo',
     },
@@ -24,3 +24,3 @@ }));
     web: {
-        accessibilityRole: 'complementary',
+        role: 'complementary',
     },
@@ -30,3 +30,3 @@ }));
     web: {
-        accessibilityRole: 'banner',
+        role: 'banner',
     },
@@ -39,3 +39,3 @@ default: {
     web: {
-        accessibilityRole: 'main',
+        role: 'main',
     },
@@ -45,8 +45,8 @@ }));
     web: {
-        accessibilityRole: 'article',
+        role: 'article',
     },
 }));
 export const Section = createView({
-    accessibilityRole: 'summary', // region?
+    role: 'summary', // region?
 });
 //# sourceMappingURL=Layout.js.map

build/elements/Lists.js

@@ -12,3 +12,3 @@ import React, { forwardRef } from 'react';
     web: {
-        accessibilityRole: 'list',
+        role: 'list',
     },
@@ -22,14 +22,14 @@ }));
     if (isTextProps(props)) {
-        const accessibilityRole = Platform.select({
+        const role = Platform.select({
             web: 'listitem',
-            default: props.accessibilityRole,
+            default: props.role,
         });
-        return <Text {...props} accessibilityRole={accessibilityRole} ref={ref}/>;
+        return <Text {...props} role={role} ref={ref}/>;
     }
-    const accessibilityRole = Platform.select({
+    const role = Platform.select({
         web: 'listitem',
-        default: props.accessibilityRole,
+        default: props.role,
     });
-    return <View {...props} accessibilityRole={accessibilityRole} ref={ref}/>;
+    return <View {...props} role={role} ref={ref}/>;
 });
 //# sourceMappingURL=Lists.js.map

build/elements/Table.web.js

@@ -9,17 +9,19 @@ import React, { forwardRef } from 'react';
 export const Table = createView({ __element: 'table' });
-Table.displayName = 'Table';
 export const THead = createView({ __element: 'thead' });
-THead.displayName = 'THead';
 export const TBody = createView({ __element: 'tbody' });
-TBody.displayName = 'TBody';
 export const TFoot = createView({ __element: 'tfoot' });
-TFoot.displayName = 'TFoot';
 export const TH = createView({ __element: 'th' });
-TH.displayName = 'TH';
 export const TR = createView({ __element: 'tr' });
-TR.displayName = 'TR';
 export const TD = createView({ __element: 'td' });
-TD.displayName = 'TD';
 export const Caption = createView({ __element: 'caption' });
-Caption.displayName = 'Caption';
+if (__DEV__) {
+    Table.displayName = 'Table';
+    THead.displayName = 'THead';
+    TBody.displayName = 'TBody';
+    TFoot.displayName = 'TFoot';
+    TH.displayName = 'TH';
+    TR.displayName = 'TR';
+    TD.displayName = 'TD';
+    Caption.displayName = 'Caption';
+}
 //# sourceMappingURL=Table.web.js.map

build/primitives/RNWView.d.ts

@@ -10,3 +10,2 @@ /**
 import * as React from 'react';
-import { PlatformMethods, ViewProps } from 'react-native-web/dist/types';
 /**
@@ -17,4 +16,4 @@ * This is the View from react-native-web copied out in order to supply a custom `__element` property.
  */
-declare const View: React.AbstractComponent<ViewProps, HTMLElement & PlatformMethods>;
+declare const View: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<ViewProps>>;
 export default View;
 //# sourceMappingURL=RNWView.d.ts.map

build/primitives/RNWView.js

@@ -16,14 +16,8 @@ /**
 import useElementLayout from 'react-native-web/dist/modules/useElementLayout';
+import { useLocaleContext, getLocaleDirection } from 'react-native-web/dist/modules/useLocale';
 import useMergeRefs from 'react-native-web/dist/modules/useMergeRefs';
 import usePlatformMethods from 'react-native-web/dist/modules/usePlatformMethods';
 import useResponderEvents from 'react-native-web/dist/modules/useResponderEvents';
-const forwardPropsList = {
-    ...forwardedProps.defaultProps,
-    ...forwardedProps.accessibilityProps,
-    ...forwardedProps.clickProps,
-    ...forwardedProps.focusProps,
-    ...forwardedProps.keyboardProps,
-    ...forwardedProps.mouseProps,
-    ...forwardedProps.touchProps,
-    ...forwardedProps.styleProps,
+const forwardPropsList = Object.assign({}, forwardedProps.defaultProps, forwardedProps.accessibilityProps, forwardedProps.clickProps, forwardedProps.defaultProps, forwardedProps.accessibilityProps, forwardedProps.clickProps, forwardedProps.focusProps, forwardedProps.keyboardProps, forwardedProps.mouseProps, forwardedProps.touchProps, forwardedProps.styleProps, {
+    href: true,
     lang: true,
@@ -33,3 +27,3 @@ onScroll: true,
     pointerEvents: true,
-};
+});
 const pickProps = (props) => pick(props, forwardPropsList);
@@ -41,7 +35,14 @@ /**
  */
-// @ts-ignore
 const View = React.forwardRef((props, forwardedRef) => {
-    const { onLayout, onMoveShouldSetResponder, onMoveShouldSetResponderCapture, onResponderEnd, onResponderGrant, onResponderMove, onResponderReject, onResponderRelease, onResponderStart, onResponderTerminate, onResponderTerminationRequest, onScrollShouldSetResponder, onScrollShouldSetResponderCapture, onSelectionChangeShouldSetResponder, onSelectionChangeShouldSetResponderCapture, onStartShouldSetResponder, onStartShouldSetResponderCapture, __element, } = props;
+    const { __element, hrefAttrs, onLayout, onMoveShouldSetResponder, onMoveShouldSetResponderCapture, onResponderEnd, onResponderGrant, onResponderMove, onResponderReject, onResponderRelease, onResponderStart, onResponderTerminate, onResponderTerminationRequest, onScrollShouldSetResponder, onScrollShouldSetResponderCapture, onSelectionChangeShouldSetResponder, onSelectionChangeShouldSetResponderCapture, onStartShouldSetResponder, onStartShouldSetResponderCapture, ...rest } = props;
+    // if (process.env.NODE_ENV !== 'production') {
+    //   React.Children.toArray(props.children).forEach((item) => {
+    //     if (typeof item === 'string') {
+    //       console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`);
+    //     }
+    //   });
+    // }
     const hasTextAncestor = React.useContext(TextAncestorContext);
     const hostRef = React.useRef(null);
+    const { direction: contextDirection } = useLocaleContext();
     useElementLayout(hostRef, onLayout);
@@ -66,16 +67,36 @@ useResponderEvents(hostRef, {
     });
-    const style = StyleSheet.compose(hasTextAncestor && styles.inline, 
-    // @ts-ignore: untyped
-    props.style);
-    const supportedProps = pickProps(props);
-    supportedProps.style = style;
+    let component = __element ?? 'div';
+    const langDirection = props.lang != null ? getLocaleDirection(props.lang) : null;
+    const componentDirection = props.dir || langDirection;
+    const writingDirection = componentDirection || contextDirection;
+    const supportedProps = pickProps(rest);
+    supportedProps.dir = componentDirection;
+    supportedProps.style = [styles.view$raw, hasTextAncestor && styles.inline, props.style];
+    if (props.href != null) {
+        component = 'a';
+        if (hrefAttrs != null) {
+            const { download, rel, target } = hrefAttrs;
+            if (download != null) {
+                supportedProps.download = download;
+            }
+            if (rel != null) {
+                supportedProps.rel = rel;
+            }
+            if (typeof target === 'string') {
+                supportedProps.target = target.charAt(0) !== '_' ? '_' + target : target;
+            }
+        }
+    }
     const platformMethodsRef = usePlatformMethods(supportedProps);
     const setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef);
     supportedProps.ref = setRef;
-    return createElement(__element, supportedProps);
+    return createElement(component, supportedProps, { writingDirection });
 });
-View.displayName = 'View';
+if (__DEV__) {
+    View.displayName = 'View';
+}
 const styles = StyleSheet.create({
-    view: {
+    view$raw: {
         alignItems: 'stretch',
+        backgroundColor: 'transparent',
         border: '0 solid black',
@@ -87,2 +108,3 @@ boxSizing: 'border-box',
         flexShrink: 0,
+        listStyle: 'none',
         margin: 0,
@@ -93,2 +115,3 @@ minHeight: 0,
         position: 'relative',
+        textDecoration: 'none',
         zIndex: 0,
@@ -95,0 +118,0 @@ },

build/primitives/Text.d.ts

 import { ClassAttributes, ComponentProps, ComponentType } from 'react';
-import { AccessibilityRole, StyleProp, Text as NativeText, TextStyle as NativeTextStyle } from 'react-native';
+import { StyleProp, Text as NativeText, TextStyle as NativeTextStyle } from 'react-native';
 import { WebViewStyle } from './View';
@@ -31,4 +31,8 @@ type NativeTextProps = ComponentProps<typeof NativeText> & ClassAttributes<typeof NativeText>;
     /** @platform web */
+    'aria-level'?: number;
+    /**
+     * @deprecated use `aria-level` instead.
+     * @platform web
+     */
     accessibilityLevel?: number;
-    accessibilityRole?: 'listitem' | 'heading' | AccessibilityRole;
     /** @platform web */
@@ -50,5 +54,5 @@ href?: string;
 };
-export type TextProps = Omit<NativeTextProps, 'style' | 'accessibilityRole'> & WebTextProps;
+export type TextProps = Omit<NativeTextProps, 'style'> & WebTextProps;
 declare const _default: ComponentType<TextProps>;
 export default _default;
 //# sourceMappingURL=Text.d.ts.map

build/primitives/Text.js

@@ -1,2 +0,2 @@
-import { Text as NativeText, } from 'react-native';
+import { Text as NativeText } from 'react-native';
 import { createSafeStyledView } from '../css/createSafeStyledView';
@@ -3,0 +3,0 @@ const Text = NativeText;

build/primitives/View.d.ts

 import { ClassAttributes, ComponentProps, ComponentType } from 'react';
-import { AccessibilityRole, StyleProp, View as NativeView, ViewStyle as NativeViewStyle } from 'react-native';
+import { StyleProp, View as NativeView, ViewStyle as NativeViewStyle } from 'react-native';
 type NativeViewProps = ComponentProps<typeof NativeView> & ClassAttributes<typeof NativeView>;
@@ -118,7 +118,6 @@ /**
     style?: StyleProp<ViewStyle>;
-    accessibilityRole?: 'list' | 'listitem' | 'complementary' | 'contentinfo' | 'region' | 'navigation' | 'main' | 'article' | 'banner' | AccessibilityRole;
 };
-export type ViewProps = WebViewProps & Omit<NativeViewProps, 'style' | 'accessibilityRole'>;
+export type ViewProps = WebViewProps & Omit<NativeViewProps, 'style'>;
 declare const _default: ComponentType<ViewProps>;
 export default _default;
 //# sourceMappingURL=View.d.ts.map

build/primitives/View.js

@@ -1,2 +0,2 @@
-import { View as NativeView, } from 'react-native';
+import { View as NativeView } from 'react-native';
 import { createDevView } from './createDevView';
@@ -3,0 +3,0 @@ import { createSafeStyledView } from '../css/createSafeStyledView';

CHANGELOG.md

@@ -13,2 +13,8 @@ # Changelog
 
+## 0.8.0 — 2023-11-14
+
+### 💡 Others
+
+- Migrate to use non-deprecated `react-native-web` props. ([#24930](https://github.com/expo/expo/pull/24930) by [@EvanBacon](https://github.com/EvanBacon))
+
 ## 0.7.0 — 2023-10-17
@@ -15,0 +21,0 @@

package.json

 {
   "name": "@expo/html-elements",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Universal semantic HTML React components for iOS, Android, web, and desktop",
@@ -62,3 +62,3 @@ "main": "build/Elements.js",
   },
-  "gitHead": "da25937e2a99661cbe5eb60ca1d8d6245fc96a50"
+  "gitHead": "3142a086578deffd8704a8f1b6f0f661527d836c"
 }

README.md

@@ -92,11 +92,11 @@ <h1 align="center">@expo/html-elements</h1>
 | [`<li />`][html-li]                 |         [`<LI />`](#li)         |
-| [`<details />`][html-details]       |            ⏱ Pending            |
-| [`<summary />`][html-summary]       |            ⏱ Pending            |
-| [`<progress />`][html-progress]     |            ⏱ Pending            |
-| [`<select />`][html-select]         |            ⏱ Pending            |
-| [`<picture />`][html-picture]       |            ⏱ Pending            |
-| [`<figure />`][html-figure]         |            ⏱ Pending            |
-| [`<figcaption />`][html-figcaption] |            ⏱ Pending            |
-| [`<form />`][html-form]             |            ⏱ Pending            |
-| [`<label />`][html-label]           |            ⏱ Pending            |
+| [`<details />`][html-details]       |           ⏱ Pending            |
+| [`<summary />`][html-summary]       |           ⏱ Pending            |
+| [`<progress />`][html-progress]     |           ⏱ Pending            |
+| [`<select />`][html-select]         |           ⏱ Pending            |
+| [`<picture />`][html-picture]       |           ⏱ Pending            |
+| [`<figure />`][html-figure]         |           ⏱ Pending            |
+| [`<figcaption />`][html-figcaption] |           ⏱ Pending            |
+| [`<form />`][html-form]             |           ⏱ Pending            |
+| [`<label />`][html-label]           |           ⏱ Pending            |
 
@@ -152,6 +152,6 @@ ## External
 
-| Platform | Output                                                 |
-| -------- | ------------------------------------------------------ |
-| Web      | `<h1 aria-level="1" dir="auto" role="heading" />`      |
-| Native   | `<Text accessibilityRole="header" style={[Custom]} />` |
+| Platform | Output                                            |
+| -------- | ------------------------------------------------- |
+| Web      | `<h1 aria-level="1" dir="auto" role="heading" />` |
+| Native   | `<Text role="header" style={[Custom]} />`         |
 
@@ -165,6 +165,6 @@ ### `<H2/>`
 
-| Platform | Output                                                 |
-| -------- | ------------------------------------------------------ |
-| Web      | `<h2 aria-level="2" dir="auto" role="heading" />`      |
-| Native   | `<Text accessibilityRole="header" style={[Custom]} />` |
+| Platform | Output                                            |
+| -------- | ------------------------------------------------- |
+| Web      | `<h2 aria-level="2" dir="auto" role="heading" />` |
+| Native   | `<Text role="header" style={[Custom]} />`         |
 
@@ -178,6 +178,6 @@ ### `<H3/>`
 
-| Platform | Output                                                 |
-| -------- | ------------------------------------------------------ |
-| Web      | `<h3 aria-level="3" dir="auto" role="heading" />`      |
-| Native   | `<Text accessibilityRole="header" style={[Custom]} />` |
+| Platform | Output                                            |
+| -------- | ------------------------------------------------- |
+| Web      | `<h3 aria-level="3" dir="auto" role="heading" />` |
+| Native   | `<Text role="header" style={[Custom]} />`         |
 
@@ -191,6 +191,6 @@ ### `<H4/>`
 
-| Platform | Output                                                 |
-| -------- | ------------------------------------------------------ |
-| Web      | `<h4 aria-level="4" dir="auto" role="heading" />`      |
-| Native   | `<Text accessibilityRole="header" style={[Custom]} />` |
+| Platform | Output                                            |
+| -------- | ------------------------------------------------- |
+| Web      | `<h4 aria-level="4" dir="auto" role="heading" />` |
+| Native   | `<Text role="header" style={[Custom]} />`         |
 
@@ -204,6 +204,6 @@ ### `<H5/>`
 
-| Platform | Output                                                 |
-| -------- | ------------------------------------------------------ |
-| Web      | `<h5 aria-level="5" dir="auto" role="heading" />`      |
-| Native   | `<Text accessibilityRole="header" style={[Custom]} />` |
+| Platform | Output                                            |
+| -------- | ------------------------------------------------- |
+| Web      | `<h5 aria-level="5" dir="auto" role="heading" />` |
+| Native   | `<Text role="header" style={[Custom]} />`         |
 
@@ -217,6 +217,6 @@ ### `<H6/>`
 
-| Platform | Output                                                 |
-| -------- | ------------------------------------------------------ |
-| Web      | `<h6 aria-level="6" dir="auto" role="heading" />`      |
-| Native   | `<Text accessibilityRole="header" style={[Custom]} />` |
+| Platform | Output                                            |
+| -------- | ------------------------------------------------- |
+| Web      | `<h6 aria-level="6" dir="auto" role="heading" />` |
+| Native   | `<Text role="header" style={[Custom]} />`         |
 
@@ -242,3 +242,3 @@ ## Link
 | Web      | `<a data-focusable="{true}" dir="auto" href="#" role="link" target="_blank" />` |
-| Native   | `<Text accessibilityRole="link" onPress={[Function]} />`                        |
+| Native   | `<Text role="link" onPress={[Function]} />`                                     |
 
@@ -353,3 +353,3 @@ ## Layout
 | Web      | `<section role="region" style="display:flex" />` |
-| Native   | `<View accessibilityRole="summary" />`           |
+| Native   | `<View role="summary" />`                        |
 
@@ -356,0 +356,0 @@ ### `<Article/>`

No alert changes

Worsened metrics

Total package byte prevSize

152344

decreased by-5.27%

Number of package files

94

decreased by-4.08%

Lines of code

1255

decreased by-3.16%

No dependency changes