@react-native-oh/react-native-harmony 0.72.86 → 0.77.18-1

package/Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -0,0 +1,238 @@
+/**
+ * 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-local
+ * @format
+ */
+
+import type {
+  AccessibilityActionEvent,
+  AccessibilityActionInfo,
+  AccessibilityRole,
+  AccessibilityState,
+  AccessibilityValue,
+} from '../../Components/View/ViewAccessibility';
+import type {EdgeInsetsOrSizeProp} from '../../StyleSheet/EdgeInsetsPropType';
+import type {
+  BlurEvent,
+  FocusEvent,
+  LayoutEvent,
+  PressEvent,
+} from '../../Types/CoreEventTypes';
+
+import View from '../../Components/View/View';
+import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
+import usePressability from '../../Pressability/usePressability';
+import TouchableWithoutFeedbackDelegate from './delegates/TouchableWithoutFeedbackDelegate';
+import * as React from 'react';
+import {useMemo} from 'react';
+
+const DELEGATE = new TouchableWithoutFeedbackDelegate({});
+
+type Props = $ReadOnly<{|
+  accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
+  accessibilityElementsHidden?: ?boolean,
+  accessibilityHint?: ?Stringish,
+  accessibilityLanguage?: ?Stringish,
+  accessibilityIgnoresInvertColors?: ?boolean,
+  accessibilityLabel?: ?Stringish,
+  accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'),
+  accessibilityRole?: ?AccessibilityRole,
+  accessibilityState?: ?AccessibilityState,
+  accessibilityValue?: ?AccessibilityValue,
+  'aria-valuemax'?: AccessibilityValue['max'],
+  'aria-valuemin'?: AccessibilityValue['min'],
+  'aria-valuenow'?: AccessibilityValue['now'],
+  'aria-valuetext'?: AccessibilityValue['text'],
+  accessibilityViewIsModal?: ?boolean,
+  'aria-modal'?: ?boolean,
+  accessible?: ?boolean,
+  /**
+   * alias for accessibilityState
+   *
+   * see https://reactnative.dev/docs/accessibility#accessibilitystate
+   */
+  'aria-busy'?: ?boolean,
+  'aria-checked'?: ?boolean | 'mixed',
+  'aria-disabled'?: ?boolean,
+  'aria-expanded'?: ?boolean,
+  'aria-selected'?: ?boolean,
+  'aria-hidden'?: ?boolean,
+  'aria-live'?: ?('polite' | 'assertive' | 'off'),
+  'aria-label'?: ?Stringish,
+  children?: ?React.Node,
+  delayLongPress?: ?number,
+  delayPressIn?: ?number,
+  delayPressOut?: ?number,
+  disabled?: ?boolean,
+  focusable?: ?boolean,
+  hitSlop?: ?EdgeInsetsOrSizeProp,
+  id?: string,
+  importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
+  nativeID?: ?string,
+  onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
+  onBlur?: ?(event: BlurEvent) => mixed,
+  onFocus?: ?(event: FocusEvent) => mixed,
+  onLayout?: ?(event: LayoutEvent) => mixed,
+  onLongPress?: ?(event: PressEvent) => mixed,
+  onPress?: ?(event: PressEvent) => mixed,
+  onPressIn?: ?(event: PressEvent) => mixed,
+  onPressOut?: ?(event: PressEvent) => mixed,
+  pressRetentionOffset?: ?EdgeInsetsOrSizeProp,
+  rejectResponderTermination?: ?boolean,
+  testID?: ?string,
+  touchSoundDisabled?: ?boolean,
+|}>;
+
+const PASSTHROUGH_PROPS = [
+  'accessibilityActions',
+  'accessibilityElementsHidden',
+  'accessibilityHint',
+  'accessibilityLanguage',
+  'accessibilityIgnoresInvertColors',
+  'accessibilityLabel',
+  'accessibilityLiveRegion',
+  'accessibilityRole',
+  'accessibilityValue',
+  'aria-valuemax',
+  'aria-valuemin',
+  'aria-valuenow',
+  'aria-valuetext',
+  'accessibilityViewIsModal',
+  'aria-modal',
+  'hitSlop',
+  'importantForAccessibility',
+  'nativeID',
+  'onAccessibilityAction',
+  'onBlur',
+  'onFocus',
+  'onLayout',
+  'testID',
+];
+
+module.exports = function TouchableWithoutFeedback(props: Props): React.Node {
+  const {
+    disabled,
+    rejectResponderTermination,
+    'aria-disabled': ariaDisabled,
+    accessibilityState,
+    hitSlop,
+    delayLongPress,
+    delayPressIn,
+    delayPressOut,
+    pressRetentionOffset,
+    touchSoundDisabled,
+    onBlur: _onBlur,
+    onFocus: _onFocus,
+    onLongPress,
+    onPress,
+    onPressIn,
+    onPressOut,
+  } = props;
+
+  const pressabilityConfig = useMemo(
+    () => ({
+      cancelable: !rejectResponderTermination,
+      disabled:
+        disabled !== null
+          ? disabled
+          : ariaDisabled ?? accessibilityState?.disabled,
+      hitSlop: hitSlop,
+      delayLongPress: delayLongPress,
+      delayPressIn: delayPressIn,
+      delayPressOut: delayPressOut,
+      minPressDuration: 0,
+      pressRectOffset: pressRetentionOffset,
+      android_disableSound: touchSoundDisabled,
+      onBlur: _onBlur,
+      onFocus: _onFocus,
+      onLongPress: onLongPress,
+      onPress: onPress,
+      onPressIn: onPressIn,
+      onPressOut: onPressOut,
+    }),
+    [
+      rejectResponderTermination,
+      disabled,
+      ariaDisabled,
+      accessibilityState?.disabled,
+      hitSlop,
+      delayLongPress,
+      delayPressIn,
+      delayPressOut,
+      pressRetentionOffset,
+      touchSoundDisabled,
+      _onBlur,
+      _onFocus,
+      onLongPress,
+      onPress,
+      onPressIn,
+      onPressOut,
+    ],
+  );
+
+  const eventHandlers = usePressability(pressabilityConfig);
+
+  const element = React.Children.only<$FlowFixMe>(props.children);
+  const children: Array<React.Node> = [element.props.children];
+  const ariaLive = props['aria-live'];
+
+  if (__DEV__) {
+    if (element.type === View) {
+      children.push(
+        <PressabilityDebugView color="red" hitSlop={props.hitSlop} />,
+      );
+    }
+  }
+
+  let _accessibilityState = {
+    busy: props['aria-busy'] ?? props.accessibilityState?.busy,
+    checked: props['aria-checked'] ?? props.accessibilityState?.checked,
+    disabled: props['aria-disabled'] ?? props.accessibilityState?.disabled,
+    expanded: props['aria-expanded'] ?? props.accessibilityState?.expanded,
+    selected: props['aria-selected'] ?? props.accessibilityState?.selected,
+  };
+
+  // BACKWARD-COMPATIBILITY: Focus and blur events were never supported before
+  // adopting `Pressability`, so preserve that behavior.
+  const {onBlur, onFocus, ...eventHandlersWithoutBlurAndFocus} = eventHandlers;
+
+  const elementProps: {[string]: mixed, ...} = {
+    ...eventHandlersWithoutBlurAndFocus,
+    accessible: props.accessible !== false,
+    accessibilityState:
+      props.disabled != null
+        ? {
+            ..._accessibilityState,
+            disabled: props.disabled,
+          }
+        : _accessibilityState,
+    focusable:
+      props.focusable !== false &&
+      props.onPress !== undefined &&
+      !props.disabled,
+
+    accessibilityElementsHidden:
+      props['aria-hidden'] ?? props.accessibilityElementsHidden,
+    importantForAccessibility:
+      props['aria-hidden'] === true
+        ? 'no-hide-descendants'
+        : props.importantForAccessibility,
+    accessibilityLiveRegion:
+      ariaLive === 'off' ? 'none' : ariaLive ?? props.accessibilityLiveRegion,
+    nativeID: props.id ?? props.nativeID,
+    ...DELEGATE.getExtraProps(),
+  };
+
+  for (const prop of PASSTHROUGH_PROPS) {
+    if (props[prop] !== undefined) {
+      elementProps[prop] = props[prop];
+    }
+  }
+
+  // $FlowFixMe[incompatible-call]
+  return React.cloneElement(element, elementProps, ...children);
+};

package/Libraries/Components/Touchable/delegates/BaseTouchableHighlightDelegate.ts

@@ -0,0 +1,13 @@
+/**
+ * @format
+ */
+
+export type BaseTouchableHighlightContext = {};
+
+export abstract class BaseTouchableHighlightDelegate {
+  constructor(protected ctx: BaseTouchableHighlightContext) {}
+
+  getExtraContainerProps(): Record<string, any> {
+    return {};
+  }
+}

package/Libraries/Components/Touchable/delegates/BaseTouchableNativeFeedbackDelegate.ts

@@ -0,0 +1,13 @@
+/**
+ * @format
+ */
+
+export type BaseTouchableNativeFeedbackContext = {};
+
+export abstract class BaseTouchableNativeFeedbackDelegate {
+  constructor(protected ctx: BaseTouchableNativeFeedbackContext) {}
+
+  getExtraProps(): Record<string, any> {
+    return {};
+  }
+}

package/Libraries/Components/Touchable/delegates/BaseTouchableWithoutFeedbackDelegate.ts

@@ -0,0 +1,13 @@
+/**
+ * @format
+ */
+
+export type BaseTouchableWithoutFeedbackContext = {};
+
+export abstract class BaseTouchableWithoutFeedbackDelegate {
+  constructor(protected ctx: BaseTouchableWithoutFeedbackContext) {}
+
+  getExtraProps(): Record<string, any> {
+    return {};
+  }
+}

package/Libraries/Components/Touchable/delegates/TouchableHighlightDelegate.harmony.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2024 Huawei Technologies Co., Ltd.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { BaseTouchableHighlightDelegate } from './BaseTouchableHighlightDelegate';
+
+export default class TouchableHighlightDelegate extends BaseTouchableHighlightDelegate {
+  override getExtraContainerProps(): Record<string, any> {
+    return { collapsable: false };
+  }
+}

package/Libraries/Components/Touchable/delegates/TouchableHighlightDelegate.ts

@@ -0,0 +1,6 @@
+/**
+ * @format
+ */
+import {BaseTouchableHighlightDelegate} from './BaseTouchableHighlightDelegate';
+
+export default class TouchableHighlightDelegate extends BaseTouchableHighlightDelegate {}

package/Libraries/Components/Touchable/delegates/TouchableNativeFeedbackDelegate.harmony.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2024 Huawei Technologies Co., Ltd.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { BaseTouchableNativeFeedbackDelegate } from './BaseTouchableNativeFeedbackDelegate';
+
+export default class TouchableNativeFeedbackDelegate extends BaseTouchableNativeFeedbackDelegate {
+  override getExtraProps(): Record<string, any> {
+    return { collapsable: false };
+  }
+}

package/Libraries/Components/Touchable/delegates/TouchableNativeFeedbackDelegate.ts

@@ -0,0 +1,6 @@
+/**
+ * @format
+ */
+import {BaseTouchableNativeFeedbackDelegate} from './BaseTouchableNativeFeedbackDelegate';
+
+export default class TouchableNativeFeedbackDelegate extends BaseTouchableNativeFeedbackDelegate {}

package/Libraries/Components/Touchable/delegates/TouchableWithoutFeedbackDelegate.harmony.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2024 Huawei Technologies Co., Ltd.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { BaseTouchableWithoutFeedbackDelegate } from './BaseTouchableWithoutFeedbackDelegate';
+
+export default class TouchableWithoutFeedbackDelegate extends BaseTouchableWithoutFeedbackDelegate {
+  override getExtraProps(): Record<string, any> {
+    return { collapsable: false };
+  }
+}

package/Libraries/Components/Touchable/delegates/TouchableWithoutFeedbackDelegate.ts

@@ -0,0 +1,6 @@
+/**
+ * @format
+ */
+import {BaseTouchableWithoutFeedbackDelegate} from './BaseTouchableWithoutFeedbackDelegate';
+
+export default class TouchableWithoutFeedbackDelegate extends BaseTouchableWithoutFeedbackDelegate {}

package/Libraries/Components/UnimplementedViews/UnimplementedNativeViewNativeComponent.js

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+export * from '../../../src/private/specs/components/UnimplementedNativeViewNativeComponent';
+import UnimplementedNativeViewNativeComponent from '../../../src/private/specs/components/UnimplementedNativeViewNativeComponent';
+export default UnimplementedNativeViewNativeComponent;

package/Libraries/Components/UnimplementedViews/UnimplementedView.js

@@ -0,0 +1,41 @@
+/**
+ * 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-local
+ * @format
+ */
+
+'use strict';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import * as React from 'react';
+
+/**
+ * Common implementation for a simple stubbed view. Simply applies the view's styles to the inner
+ * View component and renders its children.
+ */
+class UnimplementedView extends React.Component<$FlowFixMeProps> {
+  render(): React.Node {
+    // Workaround require cycle from requireNativeComponent
+    const View = require('../View/View');
+    return (
+      <View style={[styles.unimplementedView, this.props.style]}>
+        {this.props.children}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  unimplementedView: __DEV__
+    ? {
+        alignSelf: 'flex-start',
+        borderColor: 'red',
+        borderWidth: 1,
+      }
+    : {},
+});
+
+module.exports = UnimplementedView;

package/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -0,0 +1,218 @@
+/**
+ * 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.
+ *
+ * @format strict-local
+ * @flow strict-local
+ */
+
+import type {AnyAttributeType} from '../../Renderer/shims/ReactNativeTypes';
+
+import processAspectRatio from '../../StyleSheet/processAspectRatio';
+import processBackgroundImage from '../../StyleSheet/processBackgroundImage';
+import processBoxShadow from '../../StyleSheet/processBoxShadow';
+import processColor from '../../StyleSheet/processColor';
+import processFilter from '../../StyleSheet/processFilter';
+import processFontVariant from '../../StyleSheet/processFontVariant';
+import processTransform from '../../StyleSheet/processTransform';
+import processTransformOrigin from '../../StyleSheet/processTransformOrigin';
+import sizesDiffer from '../../Utilities/differ/sizesDiffer';
+
+const colorAttributes = {process: processColor};
+
+const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
+  /**
+   * Layout
+   */
+  alignContent: true,
+  alignItems: true,
+  alignSelf: true,
+  aspectRatio: {process: processAspectRatio},
+  borderBottomWidth: true,
+  borderEndWidth: true,
+  borderLeftWidth: true,
+  borderRightWidth: true,
+  borderStartWidth: true,
+  borderTopWidth: true,
+  boxSizing: true,
+  columnGap: true,
+  borderWidth: true,
+  bottom: true,
+  direction: true,
+  display: true,
+  end: true,
+  flex: true,
+  flexBasis: true,
+  flexDirection: true,
+  flexGrow: true,
+  flexShrink: true,
+  flexWrap: true,
+  gap: true,
+  height: true,
+  inset: true,
+  insetBlock: true,
+  insetBlockEnd: true,
+  insetBlockStart: true,
+  insetInline: true,
+  insetInlineEnd: true,
+  insetInlineStart: true,
+  justifyContent: true,
+  left: true,
+  margin: true,
+  marginBlock: true,
+  marginBlockEnd: true,
+  marginBlockStart: true,
+  marginBottom: true,
+  marginEnd: true,
+  marginHorizontal: true,
+  marginInline: true,
+  marginInlineEnd: true,
+  marginInlineStart: true,
+  marginLeft: true,
+  marginRight: true,
+  marginStart: true,
+  marginTop: true,
+  marginVertical: true,
+  maxHeight: true,
+  maxWidth: true,
+  minHeight: true,
+  minWidth: true,
+  overflow: true,
+  padding: true,
+  paddingBlock: true,
+  paddingBlockEnd: true,
+  paddingBlockStart: true,
+  paddingBottom: true,
+  paddingEnd: true,
+  paddingHorizontal: true,
+  paddingInline: true,
+  paddingInlineEnd: true,
+  paddingInlineStart: true,
+  paddingLeft: true,
+  paddingRight: true,
+  paddingStart: true,
+  paddingTop: true,
+  paddingVertical: true,
+  position: true,
+  right: true,
+  rowGap: true,
+  start: true,
+  top: true,
+  width: true,
+  zIndex: true,
+
+  /**
+   * Shadow
+   */
+  elevation: true,
+  shadowColor: colorAttributes,
+  shadowOffset: {diff: sizesDiffer},
+  shadowOpacity: true,
+  shadowRadius: true,
+
+  /**
+   * Transform
+   */
+  transform: {process: processTransform},
+  transformOrigin: {process: processTransformOrigin},
+
+  /**
+   * Filter
+   */
+  filter: {process: processFilter},
+
+  /**
+   * MixBlendMode
+   */
+  mixBlendMode: true,
+
+  /**
+   * Isolation
+   */
+  isolation: true,
+
+  /*
+   * BoxShadow
+   */
+  boxShadow: {process: processBoxShadow},
+
+  /**
+   * Linear Gradient
+   */
+  experimental_backgroundImage: {process: processBackgroundImage},
+
+  /**
+   * View
+   */
+  backfaceVisibility: true,
+  backgroundColor: colorAttributes,
+  borderBlockColor: colorAttributes,
+  borderBlockEndColor: colorAttributes,
+  borderBlockStartColor: colorAttributes,
+  borderBottomColor: colorAttributes,
+  borderBottomEndRadius: true,
+  borderBottomLeftRadius: true,
+  borderBottomRightRadius: true,
+  borderBottomStartRadius: true,
+  borderColor: colorAttributes,
+  borderCurve: true,
+  borderEndColor: colorAttributes,
+  borderEndEndRadius: true,
+  borderEndStartRadius: true,
+  borderLeftColor: colorAttributes,
+  borderRadius: true,
+  borderRightColor: colorAttributes,
+  borderStartColor: colorAttributes,
+  borderStartEndRadius: true,
+  borderStartStartRadius: true,
+  borderStyle: true,
+  borderTopColor: colorAttributes,
+  borderTopEndRadius: true,
+  borderTopLeftRadius: true,
+  borderTopRightRadius: true,
+  borderTopStartRadius: true,
+  cursor: true,
+  opacity: true,
+  outlineColor: colorAttributes,
+  outlineOffset: true,
+  outlineStyle: true,
+  outlineWidth: true,
+  pointerEvents: true,
+
+  /**
+   * Text
+   */
+  color: colorAttributes,
+  fontFamily: true,
+  fontSize: true,
+  fontStyle: true,
+  fontVariant: {process: processFontVariant},
+  fontWeight: true,
+  includeFontPadding: true,
+  letterSpacing: true,
+  lineHeight: true,
+  textAlign: true,
+  textAlignVertical: true,
+  textDecorationColor: colorAttributes,
+  textDecorationLine: true,
+  textDecorationStyle: true,
+  textShadowColor: colorAttributes,
+  textShadowOffset: true,
+  textShadowRadius: true,
+  textTransform: true,
+  userSelect: true,
+  verticalAlign: true,
+  writingDirection: true,
+
+  /**
+   * Image
+   */
+  overlayColor: colorAttributes,
+  resizeMode: true,
+  tintColor: colorAttributes,
+  objectFit: true,
+};
+
+module.exports = ReactNativeStyleAttributes;

package/Libraries/Components/View/ReactNativeViewAttributes.js

@@ -0,0 +1,60 @@
+/**
+ * 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-local
+ * @format
+ */
+
+'use strict';
+import ReactNativeStyleAttributes from './ReactNativeStyleAttributes';
+
+const UIView = {
+  pointerEvents: true,
+  accessible: true,
+  accessibilityActions: true,
+  accessibilityLabel: true,
+  accessibilityLiveRegion: true,
+  accessibilityRole: true,
+  accessibilityState: true,
+  accessibilityValue: true,
+  accessibilityHint: true,
+  accessibilityLanguage: true,
+  accessibilityShowsLargeContentViewer: true,
+  accessibilityLargeContentTitle: true,
+  importantForAccessibility: true,
+  nativeID: true,
+  testID: true,
+  renderToHardwareTextureAndroid: true,
+  shouldRasterizeIOS: true,
+  onLayout: true,
+  onAccessibilityAction: true,
+  onAccessibilityTap: true,
+  onMagicTap: true,
+  onAccessibilityEscape: true,
+  collapsable: true,
+  collapsableChildren: true,
+  needsOffscreenAlphaCompositing: true,
+  style: ReactNativeStyleAttributes,
+  role: true,
+};
+
+const RCTView = {
+  ...UIView,
+
+  // This is a special performance property exposed by RCTView and useful for
+  // scrolling content when there are many subviews, most of which are offscreen.
+  // For this property to be effective, it must be applied to a view that contains
+  // many subviews that extend outside its bound. The subviews must also have
+  // overflow: hidden, as should the containing view (or one of its superviews).
+  removeClippedSubviews: true,
+};
+
+const ReactNativeViewAttributes = {
+  UIView: UIView,
+  RCTView: RCTView,
+};
+
+module.exports = ReactNativeViewAttributes;