Added tooltip property for Text (#14470)

* Added tooltip property in Text.windows.js TextProps.windows.js for typescript to recognise it as an attribute of Text component

* Added override Text.d.ts to src-win/Libraries/Text/ to add  tooltip prop to Text component

* Change files

* Added Sample/text for tooltip prop tests

* Added TextPropsWindows to include windows specific prop tooltip

* updated TextProps interface to extednd TextPropsWindows

* lint fix for Sample/text.tsx file

---------

Co-authored-by: Abhijeet Jha <abhijeetjha@microsoft.com>

Author: iamAbhi-916

change/react-native-windows-1d2e90db-6fa1-47f8-aee1-959aadf54774.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Added override Text.d.ts to src-win/Libraries/Text/ to add  tooltip prop to Text component",
+  "packageName": "react-native-windows",
+  "email": "email not defined",
+  "dependentChangeType": "none"
+}

packages/playground/Samples/text.tsx

@@ -5,13 +5,21 @@
  */
 
 import React from 'react';
-import {AppRegistry, StyleSheet, Text, View} from 'react-native';
+import {AppRegistry, StyleSheet, View} from 'react-native';
+import {Text} from 'react-native-windows';
 
 export default class Bootstrap extends React.Component {
   render() {
     return (
       <View style={styles.container}>
         <Text style={styles.welcome}>Welcome to React Native!</Text>
+        <Text
+          style={styles.welcome}
+          tooltip=" tooltip message for the text"
+          accessible={true}
+          selectable={true}>
+          Click here : This is a text with a tooltip.
+        </Text>
       </View>
     );
   }

vnext/overrides.json

@@ -557,6 +557,13 @@
       "type": "platform",
       "file": "src-win/Libraries/StyleSheet/PlatformColorValueTypes.windows.js"
     },
+    {
+      "type": "derived",
+      "file": "src-win/Libraries/Text/Text.d.ts",
+      "baseFile": "packages/react-native/Libraries/Text/Text.d.ts",
+      "baseHash": "21dab7f71254c429d592827ab313f77c18baeda1",
+      "issue": 0
+    },
     {
       "type": "derived",
       "file": "src-win/Libraries/Text/Text.windows.js",
@@ -623,4 +630,4 @@
       "baseHash": "fa0f34a2de33b641bd63863629087644796d8b59"
     }
   ]
-}
+}

vnext/src-win/Libraries/Text/Text.d.ts

@@ -0,0 +1,234 @@
+/**
+ * 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
+ */
+
+import type * as React from 'react';
+import {Constructor} from '../../types/private/Utilities';
+import {AccessibilityProps} from '../Components/View/ViewAccessibility';
+import {NativeMethods} from '../../types/public/ReactNativeTypes';
+import {ColorValue, StyleProp} from '../StyleSheet/StyleSheet';
+import {TextStyle, ViewStyle} from '../StyleSheet/StyleSheetTypes';
+import {
+  GestureResponderEvent,
+  LayoutChangeEvent,
+  NativeSyntheticEvent,
+  TextLayoutEventData,
+} from '../Types/CoreEventTypes';
+
+export interface TextPropsIOS {
+  /**
+   * Specifies whether font should be scaled down automatically to fit given style constraints.
+   */
+  adjustsFontSizeToFit?: boolean | undefined;
+
+  /**
+   * The Dynamic Type scale ramp to apply to this element on iOS.
+   */
+  dynamicTypeRamp?:
+    | 'caption2'
+    | 'caption1'
+    | 'footnote'
+    | 'subheadline'
+    | 'callout'
+    | 'body'
+    | 'headline'
+    | 'title3'
+    | 'title2'
+    | 'title1'
+    | 'largeTitle'
+    | undefined;
+
+  /**
+   * When `true`, no visual change is made when text is pressed down. By
+   * default, a gray oval highlights the text on press down.
+   */
+  suppressHighlighting?: boolean | undefined;
+
+  /**
+   * Set line break strategy on iOS.
+   */
+  lineBreakStrategyIOS?:
+    | 'none'
+    | 'standard'
+    | 'hangul-word'
+    | 'push-out'
+    | undefined;
+}
+
+export interface TextPropsAndroid {
+  /**
+   * Specifies the disabled state of the text view for testing purposes.
+   */
+  disabled?: boolean | undefined;
+
+  /**
+   * Lets the user select text, to use the native copy and paste functionality.
+   */
+  selectable?: boolean | undefined;
+
+  /**
+   * The highlight color of the text.
+   */
+  selectionColor?: ColorValue | undefined;
+
+  /**
+   * Set text break strategy on Android API Level 23+
+   * default is `highQuality`.
+   */
+  textBreakStrategy?: 'simple' | 'highQuality' | 'balanced' | undefined;
+
+  /**
+   * Determines the types of data converted to clickable URLs in the text element.
+   * By default no data types are detected.
+   */
+  dataDetectorType?:
+    | null
+    | 'phoneNumber'
+    | 'link'
+    | 'email'
+    | 'none'
+    | 'all'
+    | undefined;
+
+  /**
+   * Hyphenation strategy
+   */
+  android_hyphenationFrequency?: 'normal' | 'none' | 'full' | undefined;
+}
+
+export interface TextPropsWindows {
+  /**
+   * The tooltip to show when the text is clicked.
+   */
+  // [Windows
+  tooltip?: string | undefined;
+  //  Windows]
+}
+
+// https://reactnative.dev/docs/text#props
+export interface TextProps
+  extends TextPropsIOS,
+    TextPropsAndroid,
+    TextPropsWindows,
+    AccessibilityProps {
+  /**
+   * Specifies whether fonts should scale to respect Text Size accessibility settings.
+   * The default is `true`.
+   */
+  allowFontScaling?: boolean | undefined;
+
+  children?: React.ReactNode | undefined;
+
+  /**
+   * This can be one of the following values:
+   *
+   * - `head` - The line is displayed so that the end fits in the container and the missing text
+   * at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz"
+   * - `middle` - The line is displayed so that the beginning and end fit in the container and the
+   * missing text in the middle is indicated by an ellipsis glyph. "ab...yz"
+   * - `tail` - The line is displayed so that the beginning fits in the container and the
+   * missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."
+   * - `clip` - Lines are not drawn past the edge of the text container.
+   *
+   * The default is `tail`.
+   *
+   * `numberOfLines` must be set in conjunction with this prop.
+   *
+   * > `clip` is working only for iOS
+   */
+  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip' | undefined;
+
+  /**
+   * Used to reference react managed views from native code.
+   */
+  id?: string | undefined;
+
+  /**
+   * Line Break mode. Works only with numberOfLines.
+   * clip is working only for iOS
+   */
+  lineBreakMode?: 'head' | 'middle' | 'tail' | 'clip' | undefined;
+
+  /**
+   * Used to truncate the text with an ellipsis after computing the text
+   * layout, including line wrapping, such that the total number of lines
+   * does not exceed this number.
+   *
+   * This prop is commonly used with `ellipsizeMode`.
+   */
+  numberOfLines?: number | undefined;
+
+  /**
+   * Invoked on mount and layout changes with
+   *
+   * {nativeEvent: { layout: {x, y, width, height}}}.
+   */
+  onLayout?: ((event: LayoutChangeEvent) => void) | undefined;
+
+  /**
+   * Invoked on Text layout
+   */
+  onTextLayout?:
+    | ((event: NativeSyntheticEvent<TextLayoutEventData>) => void)
+    | undefined;
+
+  /**
+   * This function is called on press.
+   * Text intrinsically supports press handling with a default highlight state (which can be disabled with suppressHighlighting).
+   */
+  onPress?: ((event: GestureResponderEvent) => void) | undefined;
+
+  onPressIn?: ((event: GestureResponderEvent) => void) | undefined;
+  onPressOut?: ((event: GestureResponderEvent) => void) | undefined;
+
+  /**
+   * This function is called on long press.
+   * e.g., `onLongPress={this.increaseSize}>``
+   */
+  onLongPress?: ((event: GestureResponderEvent) => void) | undefined;
+
+  /**
+   * @see https://reactnative.dev/docs/text#style
+   */
+  style?: StyleProp<TextStyle> | undefined;
+
+  /**
+   * Used to locate this view in end-to-end tests.
+   */
+  testID?: string | undefined;
+
+  /**
+   * Used to reference react managed views from native code.
+   */
+  nativeID?: string | undefined;
+
+  /**
+   * Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values:
+   * - null/undefined (default): inherit from the parent node or the global default (0)
+   * - 0: no max, ignore parent/global default
+   * - >= 1: sets the maxFontSizeMultiplier of this node to this value
+   */
+  maxFontSizeMultiplier?: number | null | undefined;
+
+  /**
+   * Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).
+   */
+  minimumFontScale?: number | undefined;
+
+  /**
+   * Controls how touch events are handled. Similar to `View`'s `pointerEvents`.
+   */
+  pointerEvents?: ViewStyle['pointerEvents'] | undefined;
+}
+
+/**
+ * A React component for displaying text which supports nesting, styling, and touch handling.
+ */
+declare class TextComponent extends React.Component<TextProps> {}
+declare const TextBase: Constructor<NativeMethods> & typeof TextComponent;
+export class Text extends TextBase {}