diff --git a/packages/react-strict-dom/babel/plugin.js b/packages/react-strict-dom/babel/plugin.js index 858b7f4b..7bcf755a 100644 --- a/packages/react-strict-dom/babel/plugin.js +++ b/packages/react-strict-dom/babel/plugin.js @@ -104,14 +104,6 @@ function reactStrictPlugin({ types: t }, options = {}) { if (t.isJSXAttribute(attribute) && attribute.name.name === 'for') { attribute.name.name = 'htmlFor'; } - // Browser compat: 'role=none' replaced by 'role=presentation' - if ( - t.isJSXAttribute(attribute) && - attribute.name.name === 'role' && - attribute.value.value === 'none' - ) { - attribute.value.value = 'presentation'; - } // React DOM compat: 'style' replaced by resolver that produces React DOM props if ( t.isJSXAttribute(attribute) && diff --git a/packages/react-strict-dom/src/native/css/index.js b/packages/react-strict-dom/src/native/css/index.js index dc2b7dfe..1be8a56f 100644 --- a/packages/react-strict-dom/src/native/css/index.js +++ b/packages/react-strict-dom/src/native/css/index.js @@ -328,23 +328,16 @@ export function props( nextStyle.minWidth ??= styleValue; } // borderBlock - else if (styleProp === 'borderBlockColor') { - nextStyle.borderTopColor ??= styleValue; - nextStyle.borderBottomColor ??= styleValue; - } else if (styleProp === 'borderBlockStyle') { + else if (styleProp === 'borderBlockStyle') { nextStyle.borderTopStyle ??= styleValue; nextStyle.borderBottomStyle ??= styleValue; } else if (styleProp === 'borderBlockWidth') { nextStyle.borderTopWidth ??= styleValue; nextStyle.borderBottomWidth ??= styleValue; - } else if (styleProp === 'borderBlockEndColor') { - nextStyle.borderBottomColor = flatStyle.borderBottomColor ?? styleValue; } else if (styleProp === 'borderBlockEndStyle') { nextStyle.borderBottomStyle = flatStyle.borderBottomStyle ?? styleValue; } else if (styleProp === 'borderBlockEndWidth') { nextStyle.borderBottomWidth = flatStyle.borderBottomWidth ?? styleValue; - } else if (styleProp === 'borderBlockStartColor') { - nextStyle.borderTopColor = flatStyle.borderTopColor ?? styleValue; } else if (styleProp === 'borderBlockStartStyle') { nextStyle.borderTopStyle = flatStyle.borderTopStyle ?? styleValue; } else if (styleProp === 'borderBlockStartWidth') { @@ -373,16 +366,6 @@ export function props( } else if (styleProp === 'borderInlineStartWidth') { nextStyle.borderStartWidth = styleValue; } - // borderRadius - else if (styleProp === 'borderStartStartRadius') { - nextStyle.borderTopStartRadius = styleValue; - } else if (styleProp === 'borderEndStartRadius') { - nextStyle.borderBottomStartRadius = styleValue; - } else if (styleProp === 'borderStartEndRadius') { - nextStyle.borderTopEndRadius = styleValue; - } else if (styleProp === 'borderEndEndRadius') { - nextStyle.borderBottomEndRadius = styleValue; - } // borderStyle:"none" polyfill else if (styleProp === 'borderStyle' && styleValue === 'none') { nextStyle.borderWidth = 0; @@ -397,63 +380,10 @@ export function props( nativeProps.cursorColor = styleValue; } } - // inset - else if (styleProp === 'inset') { - nextStyle.top ??= styleValue; - nextStyle.start ??= styleValue; - nextStyle.end ??= styleValue; - nextStyle.bottom ??= styleValue; - } else if (styleProp === 'insetBlock') { - nextStyle.top ??= styleValue; - nextStyle.bottom ??= styleValue; - } else if (styleProp === 'insetBlockEnd') { - nextStyle.bottom = flatStyle.bottom ?? styleValue; - } else if (styleProp === 'insetBlockStart') { - nextStyle.top = flatStyle.top ?? styleValue; - } else if (styleProp === 'insetInline') { - nextStyle.end ??= styleValue; - nextStyle.start ??= styleValue; - } else if (styleProp === 'insetInlineEnd') { - nextStyle.end = flatStyle.end ?? styleValue; - } else if (styleProp === 'insetInlineStart') { - nextStyle.start = flatStyle.start ?? styleValue; - } // lineClamp polyfill else if (styleProp === 'lineClamp') { nativeProps.numberOfLines = styleValue; } - // marginBlock - else if (styleProp === 'marginBlock') { - nextStyle.marginVertical = styleValue; - } else if (styleProp === 'marginBlockStart') { - nextStyle.marginTop ??= styleValue; - } else if (styleProp === 'marginBlockEnd') { - nextStyle.marginBottom ??= styleValue; - } - // marginInline - else if (styleProp === 'marginInline') { - nextStyle.marginHorizontal = styleValue; - } else if (styleProp === 'marginInlineStart') { - nextStyle.marginStart = styleValue; - } else if (styleProp === 'marginInlineEnd') { - nextStyle.marginEnd = styleValue; - } - // paddingBlock - else if (styleProp === 'paddingBlock') { - nextStyle.paddingVertical = styleValue; - } else if (styleProp === 'paddingBlockStart') { - nextStyle.paddingTop ??= styleValue; - } else if (styleProp === 'paddingBlockEnd') { - nextStyle.paddingBottom ??= styleValue; - } - // paddingInline - else if (styleProp === 'paddingInline') { - nextStyle.paddingHorizontal = styleValue; - } else if (styleProp === 'paddingInlineStart') { - nextStyle.paddingStart = styleValue; - } else if (styleProp === 'paddingInlineEnd') { - nextStyle.paddingEnd = styleValue; - } // '::placeholder' polyfill else if (styleProp === 'placeholderTextColor') { nativeProps.placeholderTextColor = styleValue; diff --git a/packages/react-strict-dom/src/native/css/isAllowedStyleKey.js b/packages/react-strict-dom/src/native/css/isAllowedStyleKey.js index bfbb0d2b..2c0f9da5 100644 --- a/packages/react-strict-dom/src/native/css/isAllowedStyleKey.js +++ b/packages/react-strict-dom/src/native/css/isAllowedStyleKey.js @@ -7,8 +7,6 @@ * @flow strict */ -import { version } from '../modules/version'; - const allowedStyleKeySet = new Set([ 'alignContent', 'alignItems', @@ -122,6 +120,10 @@ const allowedStyleKeySet = new Set([ 'mixBlendMode', 'objectFit', 'opacity', + 'outlineColor', + 'outlineOffset', + 'outlineStyle', + 'outlineWidth', 'overflow', 'padding', 'paddingBlock', @@ -167,13 +169,6 @@ const allowedStyleKeySet = new Set([ '::placeholder' ]); -if (version.experimental) { - allowedStyleKeySet.add('outlineColor'); - allowedStyleKeySet.add('outlineOffset'); - allowedStyleKeySet.add('outlineStyle'); - allowedStyleKeySet.add('outlineWidth'); -} - export function isAllowedStyleKey(key: string): boolean { return ( allowedStyleKeySet.has(key) || diff --git a/packages/react-strict-dom/src/native/css/isLengthStyleKey.js b/packages/react-strict-dom/src/native/css/isLengthStyleKey.js index e630c6ed..d28af8f5 100644 --- a/packages/react-strict-dom/src/native/css/isLengthStyleKey.js +++ b/packages/react-strict-dom/src/native/css/isLengthStyleKey.js @@ -7,8 +7,6 @@ * @flow strict */ -import { version } from '../modules/version'; - export const lengthStyleKeySet: Set = new Set([ 'blockSize', 'borderBottomLeftRadius', @@ -65,6 +63,8 @@ export const lengthStyleKeySet: Set = new Set([ 'minHeight', 'minInlineSize', 'minWidth', + 'outlineOffset', + 'outlineWidth', 'padding', 'paddingBlock', 'paddingBlockEnd', @@ -81,8 +81,3 @@ export const lengthStyleKeySet: Set = new Set([ 'top', 'width' ]); - -if (version.experimental) { - lengthStyleKeySet.add('outlineOffset'); - lengthStyleKeySet.add('outlineWidth'); -} diff --git a/packages/react-strict-dom/src/native/modules/createStrictDOMTextInputComponent.js b/packages/react-strict-dom/src/native/modules/createStrictDOMTextInputComponent.js index 64d99912..42dface0 100644 --- a/packages/react-strict-dom/src/native/modules/createStrictDOMTextInputComponent.js +++ b/packages/react-strict-dom/src/native/modules/createStrictDOMTextInputComponent.js @@ -221,7 +221,7 @@ export function createStrictDOMTextInputComponent< } if (readOnly != null) { // $FlowFixMe[react-rule-hook-mutation] - nativeProps.editable = !readOnly; + nativeProps.readOnly = readOnly; } if (spellCheck != null) { // $FlowFixMe[react-rule-hook-mutation] diff --git a/packages/react-strict-dom/src/native/modules/version.js b/packages/react-strict-dom/src/native/modules/version.js deleted file mode 100644 index aeaaf67b..00000000 --- a/packages/react-strict-dom/src/native/modules/version.js +++ /dev/null @@ -1,34 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow strict - */ - -// $FlowFixMe[nonstrict-import] -import * as ReactNative from '../react-native'; - -const reactNativeVersion = ReactNative.Platform.constants.reactNativeVersion; -const { major, minor, patch, prerelease } = reactNativeVersion; -// Main branch OSS build, or internal build -const isHead = major === 1000 && minor === 0 && patch === 0; -// Nightly NPM package -const isNightly = - (typeof prerelease === 'string' && prerelease.startsWith('nightly-')) || - false; - -type Version = { - major: number, - minor: number, - patch: number, - experimental: boolean -}; - -export const version: Version = { - major, - minor, - patch, - experimental: isHead || isNightly -}; diff --git a/packages/react-strict-dom/src/types/renderer.native.js b/packages/react-strict-dom/src/types/renderer.native.js index 703cc602..843dfed4 100644 --- a/packages/react-strict-dom/src/types/renderer.native.js +++ b/packages/react-strict-dom/src/types/renderer.native.js @@ -111,6 +111,7 @@ type ReactNativeProps = { pointerEvents?: ViewProps['pointerEvents'], ref?: $FlowFixMe, referrerPolicy?: ImageProps['referrerPolicy'], + readOnly?: TextInputProps['readOnly'], renderToHardwareTextureAndroid?: ViewProps['renderToHardwareTextureAndroid'], role?: ?string, secureTextEntry?: TextInputProps['secureTextEntry'], diff --git a/packages/react-strict-dom/src/web/modules/createStrictDOMComponent.js b/packages/react-strict-dom/src/web/modules/createStrictDOMComponent.js index 78e86020..c1ec5d07 100644 --- a/packages/react-strict-dom/src/web/modules/createStrictDOMComponent.js +++ b/packages/react-strict-dom/src/web/modules/createStrictDOMComponent.js @@ -49,11 +49,6 @@ export function createStrictDOMComponent( if (htmlFor != null) { hostProps.htmlFor = htmlFor; } - if (props.role != null) { - // "presentation" synonym has wider browser support - // $FlowFixMe[incompatible-type] - hostProps.role = props.role === 'none' ? 'presentation' : props.role; - } if (TagName === 'button') { hostProps.type = hostProps.type ? hostProps.type : 'button'; } else if (TagName === 'input' || TagName === 'textarea') { diff --git a/packages/react-strict-dom/tests/__mocks__/react-native/index.js b/packages/react-strict-dom/tests/__mocks__/react-native/index.js index 65e14ca4..ae6cf098 100644 --- a/packages/react-strict-dom/tests/__mocks__/react-native/index.js +++ b/packages/react-strict-dom/tests/__mocks__/react-native/index.js @@ -68,9 +68,9 @@ export const Platform = { get constants() { return { reactNativeVersion: { - major: 1000, - minor: 0, - patch: 0, + major: 0, + minor: 79, + patch: 5, prerelease: undefined } }; diff --git a/packages/react-strict-dom/tests/__snapshots__/babel-test.node.js.snap b/packages/react-strict-dom/tests/__snapshots__/babel-test.node.js.snap index cc694788..52a33326 100644 --- a/packages/react-strict-dom/tests/__snapshots__/babel-test.node.js.snap +++ b/packages/react-strict-dom/tests/__snapshots__/babel-test.node.js.snap @@ -31,7 +31,7 @@ exports[`react-strict-dom/babel-preset [transform] elements other props "import { defaultStyles as _rsdDefaultStyles, merge as _rsdMerge } from "react-strict-dom/runtime"; import { html } from 'react-strict-dom'; function App() { - return
+ return