@office-iss/react-native-win32 0.0.0-canary.256 → 0.0.0-canary.258

package/Libraries/Share/Share.d.ts

@@ -12,11 +12,13 @@ import {ColorValue} from '../StyleSheet/StyleSheet';
 export type ShareContent =
   | {
       title?: string | undefined;
-      message: string;
+      url: string;
+      message?: string | undefined;
     }
   | {
       title?: string | undefined;
-      url: string;
+      url?: string | undefined;
+      message: string;
     };
 
 export type ShareOptions = {
@@ -40,29 +42,33 @@ export interface ShareStatic {
    * If the user dismissed the dialog, the Promise will still be resolved with action being `Share.dismissedAction`
    * and all the other keys being undefined.
    *
-   * In Android, Returns a Promise which always be resolved with action being `Share.sharedAction`.
+   * In Android, Returns a Promise which always resolves with action being `Share.sharedAction`.
    *
    * ### Content
    *
+   * #### iOS
+   *
+   *  - `url` - a URL to share
    *  - `message` - a message to share
-   *  - `title` - title of the message
    *
-   * #### iOS
+   * At least one of `URL` or `message` is required.
    *
-   *  - `url` - an URL to share
+   * #### Android
    *
-   * At least one of URL and message is required.
+   * - `title` - title of the message (optional)
+   * - `message` - a message to share (often will include a URL).
    *
    * ### Options
    *
    * #### iOS
    *
-   * - `excludedActivityTypes`
-   * - `tintColor`
+   *  - `subject` - a subject to share via email
+   *  - `excludedActivityTypes`
+   *  - `tintColor`
    *
    * #### Android
    *
-   * - `dialogTitle`
+   *  - `dialogTitle`
    *
    */
   share(content: ShareContent, options?: ShareOptions): Promise<ShareAction>;

package/Libraries/Share/Share.js

@@ -15,24 +15,23 @@ const processColor = require('../StyleSheet/processColor').default;
 const Platform = require('../Utilities/Platform');
 const invariant = require('invariant');
 
-type Content =
+export type ShareContent =
   | {
       title?: string,
-      message: string,
-      ...
+      url: string,
+      message?: string,
     }
   | {
       title?: string,
-      url: string,
-      ...
+      url?: string,
+      message: string,
     };
-type Options = {
+export type ShareOptions = {
   dialogTitle?: string,
   excludedActivityTypes?: Array<string>,
   tintColor?: string,
   subject?: string,
   anchor?: number,
-  ...
 };
 
 class Share {
@@ -43,21 +42,21 @@ class Share {
    * If the user dismissed the dialog, the Promise will still be resolved with action being `Share.dismissedAction`
    * and all the other keys being undefined.
    *
-   * In Android, Returns a Promise which always be resolved with action being `Share.sharedAction`.
+   * In Android, Returns a Promise which always resolves with action being `Share.sharedAction`.
    *
    * ### Content
    *
-   *  - `message` - a message to share
-   *
    * #### iOS
    *
    *  - `url` - a URL to share
+   *  - `message` - a message to share
    *
-   * At least one of URL and message is required.
+   * At least one of `URL` or `message` is required.
    *
    * #### Android
    *
-   * - `title` - title of the message
+   * - `title` - title of the message (optional)
+   * - `message` - a message to share (often will include a URL).
    *
    * ### Options
    *
@@ -73,8 +72,8 @@ class Share {
    *
    */
   static share(
-    content: Content,
-    options: Options = {},
+    content: ShareContent,
+    options: ShareOptions = {},
   ): Promise<{action: string, activityType: ?string}> {
     invariant(
       typeof content === 'object' && content !== null,
@@ -82,7 +81,7 @@ class Share {
     );
     invariant(
       typeof content.url === 'string' || typeof content.message === 'string',
-      'At least one of URL and message is required',
+      'At least one of URL or message is required',
     );
     invariant(
       typeof options === 'object' && options !== null,

package/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -11,6 +11,25 @@ import {Animated} from '../Animated/Animated';
 import {ImageResizeMode} from '../Image/ImageResizeMode';
 import {ColorValue} from './StyleSheet';
 
+export type FilterPrimitive =
+  | {brightness: number | string}
+  | {blur: number | string}
+  | {contrast: number | string}
+  | {grayscale: number | string}
+  | {'hue-rotate': number | string}
+  | {invert: number | string}
+  | {opacity: number | string}
+  | {saturate: number | string}
+  | {sepia: number | string}
+  | {'drop-shadow': DropShadowPrimitive | string};
+
+export type DropShadowPrimitive = {
+  offsetX: number | string;
+  offsetY: number | string;
+  standardDeviation?: number | string | undefined;
+  color?: ColorValue | number | undefined;
+};
+
 type FlexAlignType =
   | 'flex-start'
   | 'flex-end'

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -11,7 +11,6 @@
 'use strict';
 
 import type AnimatedNode from '../Animated/nodes/AnimatedNode';
-import type {FilterPrimitive} from '../StyleSheet/processFilter';
 import type {
   ____DangerouslyImpreciseStyle_InternalOverrides,
   ____ImageStyle_InternalOverrides,
@@ -35,6 +34,25 @@ export type EdgeInsetsValue = {
   bottom: number,
 };
 
+export type FilterPrimitive =
+  | {brightness: number | string}
+  | {blur: number | string}
+  | {contrast: number | string}
+  | {grayscale: number | string}
+  | {'hue-rotate': number | string}
+  | {invert: number | string}
+  | {opacity: number | string}
+  | {saturate: number | string}
+  | {sepia: number | string}
+  | {'drop-shadow': DropShadowPrimitive | string};
+
+export type DropShadowPrimitive = {
+  offsetX: number | string,
+  offsetY: number | string,
+  standardDeviation?: number | string,
+  color?: ____ColorValue_Internal | number,
+};
+
 export type DimensionValue = number | string | 'auto' | AnimatedNode | null;
 export type AnimatableNumericValue = number | AnimatedNode;
 

package/Libraries/StyleSheet/processFilter.js

@@ -4,64 +4,97 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
+ * @format strict-local
  * @flow
+ * @oncall react-native
  */
 
 'use strict';
 
-export type FilterPrimitive =
-  | {brightness: number | string}
-  | {blur: number | string}
-  | {contrast: number | string}
-  | {grayscale: number | string}
-  | {hueRotate: number | string}
-  | {invert: number | string}
-  | {opacity: number | string}
-  | {saturate: number | string}
-  | {sepia: number | string};
+import type {ColorValue} from './StyleSheet';
+import type {DropShadowPrimitive, FilterPrimitive} from './StyleSheetTypes';
+
+import processColor from './processColor';
+
+type ParsedFilter =
+  | {brightness: number}
+  | {blur: number}
+  | {contrast: number}
+  | {grayscale: number}
+  | {'hue-rotate': number}
+  | {invert: number}
+  | {opacity: number}
+  | {saturate: number}
+  | {sepia: number}
+  | {'drop-shadow': ParsedDropShadow};
+
+type ParsedDropShadow = {
+  offsetX: number,
+  offsetY: number,
+  standardDeviation?: number,
+  color?: ColorValue,
+};
 
 export default function processFilter(
   filter: $ReadOnlyArray<FilterPrimitive> | string,
-): $ReadOnlyArray<FilterPrimitive> {
-  let result: Array<FilterPrimitive> = [];
+): $ReadOnlyArray<ParsedFilter> {
+  let result: Array<ParsedFilter> = [];
   if (typeof filter === 'string') {
-    // matches on functions with args like "brightness(1.5)"
-    const regex = new RegExp(/(\w+)\(([^)]+)\)/g);
+    // matches on functions with args like "drop-shadow(1.5)"
+    const regex = /([\w-]+)\(([^)]+)\)/g;
     let matches;
 
     while ((matches = regex.exec(filter))) {
-      const amount = _getFilterAmount(matches[1], matches[2]);
-
-      if (amount != null) {
-        const filterPrimitive = {};
-        // $FlowFixMe The key will be the correct one but flow can't see that.
-        filterPrimitive[matches[1]] = amount;
-        // $FlowFixMe The key will be the correct one but flow can't see that.
-        result.push(filterPrimitive);
+      let filterName = matches[1].toLowerCase();
+      if (filterName === 'drop-shadow') {
+        const dropShadow = parseDropShadow(matches[2]);
+        if (dropShadow != null) {
+          result.push({'drop-shadow': dropShadow});
+        } else {
+          return [];
+        }
       } else {
-        // If any primitive is invalid then apply none of the filters. This is how
-        // web works and makes it clear that something is wrong becuase no
-        // graphical effects are happening.
-        return [];
+        const amount = _getFilterAmount(filterName, matches[2]);
+
+        if (amount != null) {
+          const filterPrimitive = {};
+          // $FlowFixMe The key will be the correct one but flow can't see that.
+          filterPrimitive[filterName] = amount;
+          // $FlowFixMe The key will be the correct one but flow can't see that.
+          result.push(filterPrimitive);
+        } else {
+          // If any primitive is invalid then apply none of the filters. This is how
+          // web works and makes it clear that something is wrong becuase no
+          // graphical effects are happening.
+          return [];
+        }
       }
     }
   } else {
     for (const filterPrimitive of filter) {
       const [filterName, filterValue] = Object.entries(filterPrimitive)[0];
-      const amount = _getFilterAmount(filterName, filterValue);
-
-      if (amount != null) {
-        const resultObject = {};
+      if (filterName === 'drop-shadow') {
         // $FlowFixMe
-        resultObject[filterName] = amount;
-        // $FlowFixMe
-        result.push(resultObject);
+        const dropShadow = parseDropShadow(filterValue);
+        if (dropShadow == null) {
+          return [];
+        }
+        result.push({'drop-shadow': dropShadow});
       } else {
-        // If any primitive is invalid then apply none of the filters. This is how
-        // web works and makes it clear that something is wrong becuase no
-        // graphical effects are happening.
-        return [];
+        const amount = _getFilterAmount(filterName, filterValue);
+
+        if (amount != null) {
+          const resultObject = {};
+          // $FlowFixMe
+          resultObject[filterName] = amount;
+          // $FlowFixMe
+          result.push(resultObject);
+        } else {
+          // If any primitive is invalid then apply none of the filters. This is how
+          // web works and makes it clear that something is wrong becuase no
+          // graphical effects are happening.
+          return [];
+        }
       }
     }
   }
@@ -92,7 +125,7 @@ function _getFilterAmount(filterName: string, filterArgs: mixed): ?number {
   switch (filterName) {
     // Hue rotate takes some angle that can have a unit and can be
     // negative. Additionally, 0 with no unit is allowed.
-    case 'hueRotate':
+    case 'hue-rotate':
       if (filterArgAsNumber === 0) {
         return 0;
       }
@@ -130,3 +163,145 @@ function _getFilterAmount(filterName: string, filterArgs: mixed): ?number {
       return undefined;
   }
 }
+
+function parseDropShadow(
+  rawDropShadow: string | DropShadowPrimitive,
+): ?ParsedDropShadow {
+  const dropShadow =
+    typeof rawDropShadow === 'string'
+      ? parseDropShadowString(rawDropShadow)
+      : rawDropShadow;
+
+  const parsedDropShadow: ParsedDropShadow = {
+    offsetX: 0,
+    offsetY: 0,
+  };
+  let offsetX: number;
+  let offsetY: number;
+
+  for (const arg in dropShadow) {
+    let value;
+    switch (arg) {
+      case 'offsetX':
+        value =
+          typeof dropShadow.offsetX === 'string'
+            ? parseLength(dropShadow.offsetX)
+            : dropShadow.offsetX;
+        if (value == null) {
+          return null;
+        }
+        offsetX = value;
+        break;
+      case 'offsetY':
+        value =
+          typeof dropShadow.offsetY === 'string'
+            ? parseLength(dropShadow.offsetY)
+            : dropShadow.offsetY;
+        if (value == null) {
+          return null;
+        }
+        offsetY = value;
+        break;
+      case 'standardDeviation':
+        value =
+          typeof dropShadow.standardDeviation === 'string'
+            ? parseLength(dropShadow.standardDeviation)
+            : dropShadow.standardDeviation;
+        if (value == null || value < 0) {
+          return null;
+        }
+        parsedDropShadow.standardDeviation = value;
+        break;
+      case 'color':
+        const color = processColor(dropShadow.color);
+        if (color == null) {
+          return null;
+        }
+        parsedDropShadow.color = color;
+        break;
+      default:
+        return null;
+    }
+  }
+
+  if (offsetX == null || offsetY == null) {
+    return null;
+  }
+
+  parsedDropShadow.offsetX = offsetX;
+  parsedDropShadow.offsetY = offsetY;
+
+  return parsedDropShadow;
+}
+
+function parseDropShadowString(rawDropShadow: string): ?DropShadowPrimitive {
+  const dropShadow: DropShadowPrimitive = {
+    offsetX: 0,
+    offsetY: 0,
+  };
+  let offsetX: string;
+  let offsetY: string;
+  let lengthCount = 0;
+  let keywordDetectedAfterLength = false;
+
+  // split on all whitespaces
+  for (const arg of rawDropShadow.split(/\s+/)) {
+    const processedColor = processColor(arg);
+    if (processedColor != null) {
+      if (dropShadow.color != null) {
+        return null;
+      }
+      if (offsetX != null) {
+        keywordDetectedAfterLength = true;
+      }
+      dropShadow.color = arg;
+      continue;
+    }
+
+    switch (lengthCount) {
+      case 0:
+        offsetX = arg;
+        lengthCount++;
+        break;
+      case 1:
+        if (keywordDetectedAfterLength) {
+          return null;
+        }
+        offsetY = arg;
+        lengthCount++;
+        break;
+      case 2:
+        if (keywordDetectedAfterLength) {
+          return null;
+        }
+        dropShadow.standardDeviation = arg;
+        lengthCount++;
+        break;
+      default:
+        return null;
+    }
+  }
+  if (offsetX == null || offsetY == null) {
+    return null;
+  }
+
+  dropShadow.offsetX = offsetX;
+  dropShadow.offsetY = offsetY;
+  return dropShadow;
+}
+
+function parseLength(length: string): ?number {
+  // matches on args with units like "1.5 5% -80deg"
+  const argsWithUnitsRegex = /([+-]?\d*(\.\d+)?)([\w\W]+)?/g;
+  const match = argsWithUnitsRegex.exec(length);
+
+  if (!match || Number.isNaN(match[1])) {
+    return null;
+  }
+
+  if (match[3] != null && match[3] !== 'px') {
+    return null;
+  }
+
+  return Number(match[1]);
+}

package/Libraries/Text/Text.js

@@ -11,6 +11,7 @@
 import type {PressEvent} from '../Types/CoreEventTypes';
 import type {TextProps} from './TextProps';
 
+import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import * as PressabilityDebug from '../Pressability/PressabilityDebug';
 import usePressability from '../Pressability/usePressability';
 import flattenStyle from '../StyleSheet/flattenStyle';
@@ -18,6 +19,7 @@ import processColor from '../StyleSheet/processColor';
 import Platform from '../Utilities/Platform';
 import TextAncestor from './TextAncestor';
 import {NativeText, NativeVirtualText} from './TextNativeComponent';
+import TextOptimized from './TextOptimized';
 import * as React from 'react';
 import {useContext, useMemo, useState} from 'react';
 
@@ -26,7 +28,7 @@ import {useContext, useMemo, useState} from 'react';
  *
  * @see https://reactnative.dev/docs/text
  */
-const Text: React.AbstractComponent<
+const TextLegacy: React.AbstractComponent<
   TextProps,
   React.ElementRef<typeof NativeText | typeof NativeVirtualText>,
 > = React.forwardRef((props: TextProps, forwardedRef) => {
@@ -42,8 +44,10 @@ const Text: React.AbstractComponent<
     'aria-label': ariaLabel,
     'aria-selected': ariaSelected,
     ellipsizeMode,
+    disabled,
     id,
     nativeID,
+    numberOfLines,
     onLongPress,
     onPress,
     onPressIn,
@@ -55,7 +59,10 @@ const Text: React.AbstractComponent<
     onResponderTerminationRequest,
     onStartShouldSetResponder,
     pressRetentionOffset,
+    selectable,
+    selectionColor,
     suppressHighlighting,
+    style,
     ...restProps
   } = props;
 
@@ -92,7 +99,7 @@ const Text: React.AbstractComponent<
   }
 
   const _accessibilityStateDisabled = _accessibilityState?.disabled;
-  const _disabled = restProps.disabled ?? _accessibilityStateDisabled;
+  const _disabled = disabled ?? _accessibilityStateDisabled;
 
   const isPressable =
     (onPress != null ||
@@ -195,29 +202,28 @@ const Text: React.AbstractComponent<
   );
 
   // TODO: Move this processing to the view configuration.
-  const selectionColor =
-    restProps.selectionColor == null
-      ? null
-      : processColor(restProps.selectionColor);
+  const _selectionColor =
+    selectionColor == null ? null : processColor(selectionColor);
 
-  let style = restProps.style;
+  let _style = style;
   if (__DEV__) {
     if (PressabilityDebug.isEnabled() && onPress != null) {
-      style = [restProps.style, {color: 'magenta'}];
+      _style = [style, {color: 'magenta'}];
     }
   }
 
-  let numberOfLines = restProps.numberOfLines;
-  if (numberOfLines != null && !(numberOfLines >= 0)) {
-    console.error(
-      `'numberOfLines' in <Text> must be a non-negative number, received: ${numberOfLines}. The value will be set to 0.`,
-    );
-    numberOfLines = 0;
+  let _numberOfLines = numberOfLines;
+  if (_numberOfLines != null && !(_numberOfLines >= 0)) {
+    if (__DEV__) {
+      console.error(
+        `'numberOfLines' in <Text> must be a non-negative number, received: ${_numberOfLines}. The value will be set to 0.`,
+      );
+    }
+    _numberOfLines = 0;
   }
 
-  let _selectable = restProps.selectable;
-
-  const processedStyle = flattenStyle(style);
+  let _selectable = selectable;
+  const processedStyle = flattenStyle(_style);
   if (processedStyle != null) {
     if (typeof processedStyle.fontWeight === 'number') {
       // $FlowFixMe[cannot-write]
@@ -252,11 +258,12 @@ const Text: React.AbstractComponent<
         isHighlighted={isHighlighted}
         isPressable={isPressable}
         nativeID={_nativeID}
-        numberOfLines={numberOfLines}
+        numberOfLines={_numberOfLines}
         ref={forwardedRef}
         selectable={_selectable}
-        selectionColor={selectionColor}
+        selectionColor={_selectionColor}
         style={processedStyle}
+        disabled={disabled}
       />
     );
   }
@@ -292,17 +299,17 @@ const Text: React.AbstractComponent<
         ellipsizeMode={ellipsizeMode ?? 'tail'}
         isHighlighted={isHighlighted}
         nativeID={_nativeID}
-        numberOfLines={numberOfLines}
+        numberOfLines={_numberOfLines}
         ref={forwardedRef}
         selectable={_selectable}
-        selectionColor={selectionColor}
+        selectionColor={_selectionColor}
         style={processedStyle}
       />
     </TextAncestor.Provider>
   );
 });
 
-Text.displayName = 'Text';
+TextLegacy.displayName = 'TextLegacy';
 
 /**
  * Returns false until the first time `newValue` is true, after which this will
@@ -332,4 +339,17 @@ const verticalAlignToTextAlignVerticalMap = {
   middle: 'center',
 };
 
+const Text: React.AbstractComponent<
+  TextProps,
+  React.ElementRef<typeof NativeText | typeof NativeVirtualText>,
+> = React.forwardRef((props: TextProps, forwardedRef) => {
+  if (ReactNativeFeatureFlags.shouldUseOptimizedText()) {
+    return <TextOptimized {...props} ref={forwardedRef} />;
+  } else {
+    return <TextLegacy {...props} ref={forwardedRef} />;
+  }
+});
+
+Text.displayName = 'Text';
+
 module.exports = Text;