@office-iss/react-native-win32 0.78.4 → 0.79.0-preview.2

package/Libraries/Components/UnimplementedViews/UnimplementedView.js

@@ -9,17 +9,25 @@
  */
 
 'use strict';
+import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
+
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import * as React from 'react';
 
+type Props = $ReadOnly<{
+  style?: ?ViewStyleProp,
+  children?: React.Node,
+  ...
+}>;
+
 /**
  * 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> {
+class UnimplementedView extends React.Component<Props> {
   render(): React.Node {
     // Workaround require cycle from requireNativeComponent
-    const View = require('../View/View');
+    const View = require('../View/View').default;
     return (
       <View style={[styles.unimplementedView, this.props.style]}>
         {this.props.children}
@@ -38,4 +46,4 @@ const styles = StyleSheet.create({
     : {},
 });
 
-module.exports = UnimplementedView;
+export default UnimplementedView;

package/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -10,6 +10,8 @@
 
 import type {AnyAttributeType} from '../../Renderer/shims/ReactNativeTypes';
 
+import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
+import NativeReactNativeFeatureFlags from '../../../src/private/featureflags/specs/NativeReactNativeFeatureFlags';
 import processAspectRatio from '../../StyleSheet/processAspectRatio';
 import processBackgroundImage from '../../StyleSheet/processBackgroundImage';
 import processBoxShadow from '../../StyleSheet/processBoxShadow';
@@ -121,7 +123,13 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /**
    * Filter
    */
-  filter: {process: processFilter},
+  filter:
+    NativeReactNativeFeatureFlags != null &&
+    ReactNativeFeatureFlags.enableNativeCSSParsing()
+      ? true
+      : {
+          process: processFilter,
+        },
 
   /**
    * MixBlendMode
@@ -136,7 +144,13 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /*
    * BoxShadow
    */
-  boxShadow: {process: processBoxShadow},
+  boxShadow:
+    NativeReactNativeFeatureFlags != null &&
+    ReactNativeFeatureFlags.enableNativeCSSParsing()
+      ? true
+      : {
+          process: processBoxShadow,
+        },
 
   /**
    * Linear Gradient
@@ -215,4 +229,4 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   objectFit: true,
 };
 
-module.exports = ReactNativeStyleAttributes;
+export default ReactNativeStyleAttributes;

package/Libraries/Components/View/ReactNativeViewAttributes.js

@@ -57,4 +57,4 @@ const ReactNativeViewAttributes = {
   RCTView: RCTView,
 };
 
-module.exports = ReactNativeViewAttributes;
+export default ReactNativeViewAttributes;

package/Libraries/Components/View/ReactNativeViewAttributes.win32.js

@@ -91,4 +91,4 @@ const ReactNativeViewAttributes = {
   RCTView: RCTView,
 };
 
-module.exports = ReactNativeViewAttributes;
+export default ReactNativeViewAttributes;

package/Libraries/Components/View/View.js

@@ -24,7 +24,7 @@ export type Props = ViewProps;
  * @see https://reactnative.dev/docs/view
  */
 const View: component(
-  ref: React.RefSetter<React.ElementRef<typeof ViewNativeComponent>>,
+  ref?: React.RefSetter<React.ElementRef<typeof ViewNativeComponent>>,
   ...props: ViewProps
 ) = React.forwardRef(
   (
@@ -130,4 +130,4 @@ const View: component(
 
 View.displayName = 'View';
 
-module.exports = View;
+export default View;

package/Libraries/Components/View/View.win32.js

@@ -28,7 +28,7 @@ export type Props = ViewProps;
  * @see https://reactnative.dev/docs/view
  */
 const View: component(
-  ref: React.RefSetter<React.ElementRef<typeof ViewNativeComponent>>,
+  ref?: React.RefSetter<React.ElementRef<typeof ViewNativeComponent>>,
   ...props: ViewProps
 ) = React.forwardRef(
   (
@@ -273,4 +273,4 @@ const View: component(
 
 View.displayName = 'View';
 
-module.exports = View;
+export default View;

package/Libraries/Components/View/ViewAccessibility.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import type {SyntheticEvent} from '../../Types/CoreEventTypes';
+import type {NativeSyntheticEvent} from '../../Types/CoreEventTypes';
 
 // This must be kept in sync with the AccessibilityRolesMask in RCTViewManager.m
 export type AccessibilityRole =
@@ -123,28 +123,72 @@ export type Role =
   | 'treegrid'
   | 'treeitem';
 
+export type AccessibilityActionName =
+  /**
+   * Generated when a screen reader user double taps the component.
+   */
+  | 'activate'
+  /**
+   * Generated when a screen reader user increments an adjustable component.
+   */
+  | 'increment'
+  /**
+   * Generated when a screen reader user decrements an adjustable component.
+   */
+  | 'decrement'
+  /**
+   * Generated when a TalkBack user places accessibility focus on the component and double taps and holds one finger on the screen.
+   * @platform android
+   */
+  | 'longpress'
+  /**
+   * Generated when a VoiceOver user places focus on or inside the component and double taps with two fingers.
+   * @platform ios
+   * */
+  | 'magicTap'
+  /**
+   * Generated when a VoiceOver user places focus on or inside the component and performs a two finger scrub gesture (left, right, left).
+   * @platform ios
+   * */
+  | 'escape';
+
 // the info associated with an accessibility action
 export type AccessibilityActionInfo = $ReadOnly<{
-  name: string,
+  name: AccessibilityActionName | string,
   label?: string,
   ...
 }>;
 
 // The info included in the event sent to onAccessibilityAction
-export type AccessibilityActionEvent = SyntheticEvent<
+export type AccessibilityActionEvent = NativeSyntheticEvent<
   $ReadOnly<{actionName: string, ...}>,
 >;
 
 export type AccessibilityState = {
+  /**
+   * When true, informs accessible tools if the element is disabled
+   */
   disabled?: ?boolean,
+  /**
+   * When true, informs accessible tools if the element is selected
+   */
   selected?: ?boolean,
+  /**
+   * For items like Checkboxes and Toggle switches, reports their state to accessible tools
+   */
   checked?: ?boolean | 'mixed',
+  /**
+   *  When present, informs accessible tools if the element is busy
+   */
   busy?: ?boolean,
+  /**
+   *  When present, informs accessible tools the element is expanded or collapsed
+   */
   expanded?: ?boolean,
   ...
 };
 
-export type AccessibilityValue = $ReadOnly<{|
+export type AccessibilityValue = $ReadOnly<{
   /**
    * The minimum value of this component's range. (should be an integer)
    */
@@ -164,4 +208,200 @@ export type AccessibilityValue = $ReadOnly<{|
    * A textual description of this component's value. (will override minimum, current, and maximum if set)
    */
   text?: Stringish,
-|}>;
+}>;
+
+export type AccessibilityPropsAndroid = $ReadOnly<{
+  /**
+   * Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props,
+   * the text is read aloud. The value should should match the nativeID of the related element.
+   *
+   * @platform android
+   */
+  accessibilityLabelledBy?: ?string | ?Array<string>,
+
+  /**
+   * Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props,
+   * the text is read aloud. The value should should match the nativeID of the related element.
+   *
+   * @platform android
+   */
+  'aria-labelledby'?: ?string,
+
+  /**
+   * Indicates to accessibility services whether the user should be notified
+   * when this view changes. Works for Android API >= 19 only.
+   *
+   * @platform android
+   *
+   * See https://reactnative.dev/docs/view#accessibilityliveregion
+   */
+  accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'),
+
+  /**
+   * Indicates to accessibility services whether the user should be notified
+   * when this view changes. Works for Android API >= 19 only.
+   *
+   * @platform android
+   *
+   * See https://reactnative.dev/docs/view#accessibilityliveregion
+   */
+  'aria-live'?: ?('polite' | 'assertive' | 'off'),
+
+  /**
+   * Controls how view is important for accessibility which is if it
+   * fires accessibility events and if it is reported to accessibility services
+   * that query the screen. Works for Android only.
+   *
+   * @platform android
+   *
+   * See https://reactnative.dev/docs/view#importantforaccessibility
+   */
+  importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
+}>;
+
+export type AccessibilityPropsIOS = $ReadOnly<{
+  /**
+   * Prevents view from being inverted if set to true and color inversion is turned on.
+   *
+   * @platform ios
+   */
+  accessibilityIgnoresInvertColors?: ?boolean,
+
+  /**
+   * A value indicating whether VoiceOver should ignore the elements
+   * within views that are siblings of the receiver.
+   * Default is `false`.
+   *
+   * @platform ios
+   *
+   * See https://reactnative.dev/docs/view#accessibilityviewismodal
+   */
+  accessibilityViewIsModal?: ?boolean,
+
+  /**
+   * @platform ios
+   *
+   * See https://reactnative.dev/docs/view#accessibilityshowslargecontentviewer
+   */
+  accessibilityShowsLargeContentViewer?: ?boolean,
+
+  /**
+   * @platform ios
+   *
+   * See https://reactnative.dev/docs/view#accessibilitylargecontenttitle
+   */
+  accessibilityLargeContentTitle?: ?string,
+
+  /**
+   * The aria-modal attribute indicates content contained within a modal with aria-modal="true"
+   * should be accessible to the user.
+   * Default is `false`.
+   *
+   *  @platform ios
+   */
+  'aria-modal'?: ?boolean,
+
+  /**
+   * A value indicating whether the accessibility elements contained within
+   * this accessibility element are hidden.
+   *
+   * @platform ios
+   *
+   * See https://reactnative.dev/docs/view#accessibilityElementsHidden
+   */
+  accessibilityElementsHidden?: ?boolean,
+
+  /**
+   * Indicates to the accessibility services that the UI component is in
+   * a specific language. The provided string should be formatted following
+   * the BCP 47 specification (https://www.rfc-editor.org/info/bcp47).
+   *
+   * @platform ios
+   */
+  accessibilityLanguage?: ?Stringish,
+}>;
+
+export type AccessibilityProps = $ReadOnly<{
+  ...AccessibilityPropsAndroid,
+  ...AccessibilityPropsIOS,
+  /**
+   * When `true`, indicates that the view is an accessibility element.
+   * By default, all the touchable elements are accessible.
+   *
+   * See https://reactnative.dev/docs/view#accessible
+   */
+  accessible?: ?boolean,
+
+  /**
+   * Overrides the text that's read by the screen reader when the user interacts
+   * with the element. By default, the label is constructed by traversing all
+   * the children and accumulating all the `Text` nodes separated by space.
+   *
+   * See https://reactnative.dev/docs/view#accessibilitylabel
+   */
+  accessibilityLabel?: ?Stringish,
+
+  /**
+   * An accessibility hint helps users understand what will happen when they perform
+   * an action on the accessibility element when that result is not obvious from the
+   * accessibility label.
+   *
+   *
+   * See https://reactnative.dev/docs/view#accessibilityHint
+   */
+  accessibilityHint?: ?Stringish,
+
+  /**
+   * Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel
+   * https://github.com/facebook/react-native/issues/34424
+   */
+  'aria-label'?: ?Stringish,
+
+  /**
+   * Indicates to accessibility services to treat UI component like a specific role.
+   */
+  accessibilityRole?: ?AccessibilityRole,
+
+  /**
+   * Alias for accessibilityRole
+   */
+  role?: ?Role,
+
+  /**
+   * Indicates to accessibility services that UI Component is in a specific State.
+   */
+  accessibilityState?: ?AccessibilityState,
+  accessibilityValue?: ?AccessibilityValue,
+
+  /**
+   * alias for accessibilityState
+   * It represents textual description of a component's value, or for range-based components, such as sliders and progress bars.
+   */
+  'aria-valuemax'?: ?AccessibilityValue['max'],
+  'aria-valuemin'?: ?AccessibilityValue['min'],
+  'aria-valuenow'?: ?AccessibilityValue['now'],
+  'aria-valuetext'?: ?AccessibilityValue['text'],
+
+  /**
+   * Provides an array of custom actions available for accessibility.
+   *
+   */
+  accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
+
+  /**
+   * 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,
+  /** A value indicating whether the accessibility elements contained within
+   * this accessibility element are hidden.
+   *
+   * See https://reactnative.dev/docs/view#aria-hidden
+   */
+  'aria-hidden'?: ?boolean,
+}>;

package/Libraries/Components/View/ViewAccessibility.win32.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import type {SyntheticEvent} from '../../Types/CoreEventTypes';
+import type {NativeSyntheticEvent} from '../../Types/CoreEventTypes';
 
 // This must be kept in sync with the AccessibilityRolesMask in RCTViewManager.m
 export type AccessibilityRole =
@@ -134,30 +134,74 @@ export type Role =
   | 'treegrid'
   | 'treeitem';
 
+export type AccessibilityActionName =
+  /**
+   * Generated when a screen reader user double taps the component.
+   */
+  | 'activate'
+  /**
+   * Generated when a screen reader user increments an adjustable component.
+   */
+  | 'increment'
+  /**
+   * Generated when a screen reader user decrements an adjustable component.
+   */
+  | 'decrement'
+  /**
+   * Generated when a TalkBack user places accessibility focus on the component and double taps and holds one finger on the screen.
+   * @platform android
+   */
+  | 'longpress'
+  /**
+   * Generated when a VoiceOver user places focus on or inside the component and double taps with two fingers.
+   * @platform ios
+   * */
+  | 'magicTap'
+  /**
+   * Generated when a VoiceOver user places focus on or inside the component and performs a two finger scrub gesture (left, right, left).
+   * @platform ios
+   * */
+  | 'escape';
+
 // the info associated with an accessibility action
 export type AccessibilityActionInfo = $ReadOnly<{
-  name: string,
+  name: AccessibilityActionName | string,
   label?: string,
   ...
 }>;
 
 // The info included in the event sent to onAccessibilityAction
-export type AccessibilityActionEvent = SyntheticEvent<
+export type AccessibilityActionEvent = NativeSyntheticEvent<
   $ReadOnly<{actionName: string, ...}>,
 >;
 
 export type AccessibilityState = {
+  /**
+   * When true, informs accessible tools if the element is disabled
+   */
   disabled?: ?boolean,
+  /**
+   * When true, informs accessible tools if the element is selected
+   */
   selected?: ?boolean,
+  /**
+   * For items like Checkboxes and Toggle switches, reports their state to accessible tools
+   */
   checked?: ?boolean | 'mixed',
+  /**
+   *  When present, informs accessible tools if the element is busy
+   */
   busy?: ?boolean,
+  /**
+   *  When present, informs accessible tools the element is expanded or collapsed
+   */
   expanded?: ?boolean,
   multiselectable?: ?boolean, // Win32
   required?: ?boolean, // Win32
   ...
 };
 
-export type AccessibilityValue = $ReadOnly<{|
+export type AccessibilityValue = $ReadOnly<{
   /**
    * The minimum value of this component's range. (should be an integer)
    */
@@ -177,4 +221,200 @@ export type AccessibilityValue = $ReadOnly<{|
    * A textual description of this component's value. (will override minimum, current, and maximum if set)
    */
   text?: Stringish,
-|}>;
+}>;
+
+export type AccessibilityPropsAndroid = $ReadOnly<{
+  /**
+   * Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props,
+   * the text is read aloud. The value should should match the nativeID of the related element.
+   *
+   * @platform android
+   */
+  accessibilityLabelledBy?: ?string | ?Array<string>,
+
+  /**
+   * Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props,
+   * the text is read aloud. The value should should match the nativeID of the related element.
+   *
+   * @platform android
+   */
+  'aria-labelledby'?: ?string,
+
+  /**
+   * Indicates to accessibility services whether the user should be notified
+   * when this view changes. Works for Android API >= 19 only.
+   *
+   * @platform android
+   *
+   * See https://reactnative.dev/docs/view#accessibilityliveregion
+   */
+  accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'),
+
+  /**
+   * Indicates to accessibility services whether the user should be notified
+   * when this view changes. Works for Android API >= 19 only.
+   *
+   * @platform android
+   *
+   * See https://reactnative.dev/docs/view#accessibilityliveregion
+   */
+  'aria-live'?: ?('polite' | 'assertive' | 'off'),
+
+  /**
+   * Controls how view is important for accessibility which is if it
+   * fires accessibility events and if it is reported to accessibility services
+   * that query the screen. Works for Android only.
+   *
+   * @platform android
+   *
+   * See https://reactnative.dev/docs/view#importantforaccessibility
+   */
+  importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
+}>;
+
+export type AccessibilityPropsIOS = $ReadOnly<{
+  /**
+   * Prevents view from being inverted if set to true and color inversion is turned on.
+   *
+   * @platform ios
+   */
+  accessibilityIgnoresInvertColors?: ?boolean,
+
+  /**
+   * A value indicating whether VoiceOver should ignore the elements
+   * within views that are siblings of the receiver.
+   * Default is `false`.
+   *
+   * @platform ios
+   *
+   * See https://reactnative.dev/docs/view#accessibilityviewismodal
+   */
+  accessibilityViewIsModal?: ?boolean,
+
+  /**
+   * @platform ios
+   *
+   * See https://reactnative.dev/docs/view#accessibilityshowslargecontentviewer
+   */
+  accessibilityShowsLargeContentViewer?: ?boolean,
+
+  /**
+   * @platform ios
+   *
+   * See https://reactnative.dev/docs/view#accessibilitylargecontenttitle
+   */
+  accessibilityLargeContentTitle?: ?string,
+
+  /**
+   * The aria-modal attribute indicates content contained within a modal with aria-modal="true"
+   * should be accessible to the user.
+   * Default is `false`.
+   *
+   *  @platform ios
+   */
+  'aria-modal'?: ?boolean,
+
+  /**
+   * A value indicating whether the accessibility elements contained within
+   * this accessibility element are hidden.
+   *
+   * @platform ios
+   *
+   * See https://reactnative.dev/docs/view#accessibilityElementsHidden
+   */
+  accessibilityElementsHidden?: ?boolean,
+
+  /**
+   * Indicates to the accessibility services that the UI component is in
+   * a specific language. The provided string should be formatted following
+   * the BCP 47 specification (https://www.rfc-editor.org/info/bcp47).
+   *
+   * @platform ios
+   */
+  accessibilityLanguage?: ?Stringish,
+}>;
+
+export type AccessibilityProps = $ReadOnly<{
+  ...AccessibilityPropsAndroid,
+  ...AccessibilityPropsIOS,
+  /**
+   * When `true`, indicates that the view is an accessibility element.
+   * By default, all the touchable elements are accessible.
+   *
+   * See https://reactnative.dev/docs/view#accessible
+   */
+  accessible?: ?boolean,
+
+  /**
+   * Overrides the text that's read by the screen reader when the user interacts
+   * with the element. By default, the label is constructed by traversing all
+   * the children and accumulating all the `Text` nodes separated by space.
+   *
+   * See https://reactnative.dev/docs/view#accessibilitylabel
+   */
+  accessibilityLabel?: ?Stringish,
+
+  /**
+   * An accessibility hint helps users understand what will happen when they perform
+   * an action on the accessibility element when that result is not obvious from the
+   * accessibility label.
+   *
+   *
+   * See https://reactnative.dev/docs/view#accessibilityHint
+   */
+  accessibilityHint?: ?Stringish,
+
+  /**
+   * Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel
+   * https://github.com/facebook/react-native/issues/34424
+   */
+  'aria-label'?: ?Stringish,
+
+  /**
+   * Indicates to accessibility services to treat UI component like a specific role.
+   */
+  accessibilityRole?: ?AccessibilityRole,
+
+  /**
+   * Alias for accessibilityRole
+   */
+  role?: ?Role,
+
+  /**
+   * Indicates to accessibility services that UI Component is in a specific State.
+   */
+  accessibilityState?: ?AccessibilityState,
+  accessibilityValue?: ?AccessibilityValue,
+
+  /**
+   * alias for accessibilityState
+   * It represents textual description of a component's value, or for range-based components, such as sliders and progress bars.
+   */
+  'aria-valuemax'?: ?AccessibilityValue['max'],
+  'aria-valuemin'?: ?AccessibilityValue['min'],
+  'aria-valuenow'?: ?AccessibilityValue['now'],
+  'aria-valuetext'?: ?AccessibilityValue['text'],
+
+  /**
+   * Provides an array of custom actions available for accessibility.
+   *
+   */
+  accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
+
+  /**
+   * 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,
+  /** A value indicating whether the accessibility elements contained within
+   * this accessibility element are hidden.
+   *
+   * See https://reactnative.dev/docs/view#aria-hidden
+   */
+  'aria-hidden'?: ?boolean,
+}>;