@hero-design/rn 8.120.2 → 8.121.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hero-design/rn
 
+## 8.121.0
+
+### Minor Changes
+
+- [#4963](https://github.com/Thinkei/hero-design/pull/4963) [`8921509e3c0271abe2c0df377316fc5ded154a05`](https://github.com/Thinkei/hero-design/commit/8921509e3c0271abe2c0df377316fc5ded154a05) Thanks [@ttkien](https://github.com/ttkien)! - [Icon] add 'ai' intent
+
+- [#4968](https://github.com/Thinkei/hero-design/pull/4968) [`654135e5178e2ab74dc6e9d80edb7bdab60275d7`](https://github.com/Thinkei/hero-design/commit/654135e5178e2ab74dc6e9d80edb7bdab60275d7) Thanks [@ttkien](https://github.com/ttkien)! - [PS-2754] Add ai intent to RN Typography components
+
+### Patch Changes
+
+- [#4972](https://github.com/Thinkei/hero-design/pull/4972) [`4caa323ce232ef982bab8e3845aadc6b493a3804`](https://github.com/Thinkei/hero-design/commit/4caa323ce232ef982bab8e3845aadc6b493a3804) Thanks [@ttkien](https://github.com/ttkien)! - Fix GradientText cross-axis stretch in row containers
+
 ## 8.120.2
 
 ### Patch Changes

package/es/index.js

@@ -2,6 +2,8 @@ import * as reactNative from 'react-native';
 import { StyleSheet as StyleSheet$1, Platform, Dimensions, Keyboard, Animated, View, UIManager, LayoutAnimation, TouchableOpacity, Text as Text$1, Easing, useWindowDimensions, TouchableWithoutFeedback, Modal as Modal$1, Image as Image$1, Pressable, SafeAreaView, KeyboardAvoidingView, TouchableHighlight, ScrollView, FlatList, TextInput as TextInput$1, PanResponder, BackHandler, InteractionManager, SectionList, RefreshControl as RefreshControl$1 } from 'react-native';
 import * as React from 'react';
 import React__default, { useState, useEffect, useMemo, useCallback, useRef, useLayoutEffect, createContext, forwardRef, useContext, memo, useReducer, isValidElement, useImperativeHandle } from 'react';
+import MaskedView from '@react-native-masked-view/masked-view';
+import { LinearGradient } from 'expo-linear-gradient';
 import { createIconSet } from 'react-native-vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { MonthYearPickerViewIOS, MonthYearPickerDialogueAndroid } from '@hero-design/react-native-month-year-picker';
@@ -10,7 +12,7 @@ import DateTimePicker from '@react-native-community/datetimepicker';
 import RnSlider from '@react-native-community/slider';
 import MultiSlider from '@ptomasroos/react-native-multi-slider';
 import { RectButton, GestureHandlerRootView, Swipeable as Swipeable$1 } from 'react-native-gesture-handler';
-import LinearGradient from 'react-native-linear-gradient';
+import LinearGradient$1 from 'react-native-linear-gradient';
 import PagerView from 'react-native-pager-view';
 import { EventEmitter } from 'events';
 import { WebView } from 'react-native-webview';
@@ -5426,6 +5428,76 @@ var getShadows = function getShadows(palette) {
   }
 };
 
+var DIAGONAL_ANGLE = 282;
+var HORIZONTAL_ANGLE = 90;
+var DIAGONAL_LOCATIONS = [0, 0.2931, 0.993];
+var HORIZONTAL_LOCATIONS = [0, 0.25, 0.75];
+// Convert CSS gradient angle (degrees) to expo-linear-gradient start/end points.
+// Follows CSS convention: 0° = bottom→top, 90° = left→right,
+// 180° = top→bottom, 270° = right→left.
+var angleToPoints = function angleToPoints(angleDeg) {
+  var rad = (angleDeg - 90) * Math.PI / 180;
+  var x = Math.cos(rad);
+  var y = Math.sin(rad);
+  // Normalize so both components are in [0, 1]
+  var start = {
+    x: Math.round((1 - x) / 2 * 100) / 100,
+    y: Math.round((1 - y) / 2 * 100) / 100
+  };
+  var end = {
+    x: Math.round((1 + x) / 2 * 100) / 100,
+    y: Math.round((1 + y) / 2 * 100) / 100
+  };
+  return {
+    start: start,
+    end: end
+  };
+};
+var getGradients = function getGradients(systemPalette) {
+  var blueMedium = palette$9.blueMedium;
+  var pinkMedium = palette$9.pinkMedium;
+  var brandPrimary = systemPalette.primary;
+  var backgroundFallback = systemPalette.defaultGlobalSurface;
+  return {
+    aiDiagonal: _objectSpread2(_objectSpread2({
+      angle: DIAGONAL_ANGLE
+    }, angleToPoints(DIAGONAL_ANGLE)), {}, {
+      colors: [blueMedium, brandPrimary, pinkMedium],
+      locations: DIAGONAL_LOCATIONS
+    }),
+    aiDiagonal8: _objectSpread2(_objectSpread2({
+      angle: DIAGONAL_ANGLE
+    }, angleToPoints(DIAGONAL_ANGLE)), {}, {
+      colors: [blueMedium, brandPrimary, pinkMedium],
+      locations: DIAGONAL_LOCATIONS,
+      opacity: 0.08,
+      backgroundFallback: backgroundFallback
+    }),
+    aiDiagonal16: _objectSpread2(_objectSpread2({
+      angle: DIAGONAL_ANGLE
+    }, angleToPoints(DIAGONAL_ANGLE)), {}, {
+      colors: [blueMedium, brandPrimary, pinkMedium],
+      locations: DIAGONAL_LOCATIONS,
+      opacity: 0.16,
+      backgroundFallback: backgroundFallback
+    }),
+    aiDiagonal24: _objectSpread2(_objectSpread2({
+      angle: DIAGONAL_ANGLE
+    }, angleToPoints(DIAGONAL_ANGLE)), {}, {
+      colors: [blueMedium, brandPrimary, pinkMedium],
+      locations: DIAGONAL_LOCATIONS,
+      opacity: 0.24,
+      backgroundFallback: backgroundFallback
+    }),
+    aiHorizontal: _objectSpread2(_objectSpread2({
+      angle: HORIZONTAL_ANGLE
+    }, angleToPoints(HORIZONTAL_ANGLE)), {}, {
+      colors: [brandPrimary, pinkMedium, brandPrimary],
+      locations: HORIZONTAL_LOCATIONS
+    })
+  };
+};
+
 var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
   var fonts = getFonts(scale.font);
   var fontSizes = getFontSizes(scale.fontSize);
@@ -5435,8 +5507,11 @@ var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
   var sizes = getSizes(scale.size);
   var radii = getRadii(scale.radius);
   var shadows = getShadows(systemPalette);
+  var gradients = getGradients(systemPalette);
   return {
-    colors: _objectSpread2({}, systemPalette),
+    colors: _objectSpread2(_objectSpread2({}, systemPalette), {}, {
+      gradients: gradients
+    }),
     fonts: fonts,
     fontSizes: fontSizes,
     lineHeights: lineHeights,
@@ -8066,7 +8141,7 @@ var StyledText$4 = index$c(Text$1)(function (_ref) {
   });
 });
 
-var _excluded$O = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
+var _excluded$Q = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
 /**
  * @deprecated Typography.Text is deprecated and will be removed in the next major release, please refer to https://design.employmenthero.com/mobile/Components/typography for the appropriate alternatives.
  */
@@ -8082,7 +8157,7 @@ var Text = function Text(_ref) {
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$O);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$Q);
   useDeprecation('Typography.Text is deprecated and will be removed in the next major release, please refer to https://design.employmenthero.com/mobile/Components/typography for the appropriate alternatives.');
   return /*#__PURE__*/React__default.createElement(StyledText$4, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
@@ -8115,7 +8190,79 @@ var StyledCaption = index$c(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$N = ["children", "fontWeight", "intent", "allowFontScaling", "fontStyle"];
+var ACCESSIBILITY_KEYS = ['accessible', 'accessibilityActions', 'accessibilityLabel', 'accessibilityRole', 'accessibilityState', 'accessibilityHint', 'accessibilityValue', 'onAccessibilityAction',
+// Android
+'accessibilityLabelledBy', 'accessibilityLiveRegion', 'importantForAccessibility',
+// iOS
+'accessibilityElementsHidden', 'accessibilityLanguage', 'accessibilityIgnoresInvertColors', 'accessibilityViewIsModal', 'onAccessibilityEscape', 'onAccessibilityTap', 'onMagicTap', 'accessibilityIgnoresInvertColors'];
+var pickAccessibilityProps = function pickAccessibilityProps(props) {
+  return ACCESSIBILITY_KEYS.filter(function (key) {
+    return key in props;
+  }).reduce(function (acc, key) {
+    return Object.assign(acc, _defineProperty({}, key, props[key]));
+  }, {});
+};
+
+var _excluded$P = ["children"];
+var GradientText = function GradientText(_ref) {
+  var children = _ref.children,
+    accessibilityProps = _objectWithoutProperties(_ref, _excluded$P);
+  var theme = useTheme();
+  var gradient = theme.colors.gradients.aiDiagonal;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    size = _useState2[0],
+    setSize = _useState2[1];
+  var onLayout = useCallback(function (event) {
+    var _event$nativeEvent$la = event.nativeEvent.layout,
+      width = _event$nativeEvent$la.width,
+      height = _event$nativeEvent$la.height;
+    setSize(function (prevSize) {
+      if (prevSize && prevSize.width === width && prevSize.height === height) {
+        return prevSize;
+      }
+      return {
+        width: width,
+        height: height
+      };
+    });
+  }, []);
+  return /*#__PURE__*/React__default.createElement(View, accessibilityProps, /*#__PURE__*/React__default.createElement(MaskedView, {
+    style: {
+      alignSelf: 'stretch'
+    },
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    maskElement: /*#__PURE__*/React__default.createElement(View, {
+      onLayout: onLayout,
+      style: {
+        backgroundColor: 'transparent'
+      },
+      testID: "gradient-text-mask"
+    }, children)
+  }, size ? /*#__PURE__*/React__default.createElement(LinearGradient, {
+    start: gradient.start,
+    end: gradient.end,
+    colors: gradient.colors,
+    locations: gradient.locations,
+    style: {
+      width: size.width,
+      height: size.height
+    }
+  }) :
+  // Render children as fallback until layout is measured, so text
+  // is visible immediately rather than blank on the first frame.
+  children), /*#__PURE__*/React__default.createElement(View, {
+    style: {
+      position: 'absolute',
+      opacity: 0
+    },
+    importantForAccessibility: "yes",
+    accessibilityElementsHidden: false
+  }, children));
+};
+
+var _excluded$O = ["children", "fontWeight", "intent", "allowFontScaling", "fontStyle", "style", "testID"];
 var Caption = function Caption(_ref) {
   var children = _ref.children,
     _ref$fontWeight = _ref.fontWeight,
@@ -8126,13 +8273,22 @@ var Caption = function Caption(_ref) {
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
     _ref$fontStyle = _ref.fontStyle,
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$N);
-  return /*#__PURE__*/React__default.createElement(StyledCaption, _extends$1({}, nativeProps, {
+    style = _ref.style,
+    testID = _ref.testID,
+    nativeProps = _objectWithoutProperties(_ref, _excluded$O);
+  var isAi = intent === 'ai';
+  var styledText = /*#__PURE__*/React__default.createElement(StyledCaption, _extends$1({}, nativeProps, {
     themeFontWeight: fontWeight,
-    themeIntent: intent,
+    themeIntent: isAi ? 'body' : intent,
     themeIsItalic: fontStyle === 'italic',
-    allowFontScaling: allowFontScaling
+    allowFontScaling: allowFontScaling,
+    style: style,
+    testID: testID
   }), children);
+  if (isAi) {
+    return /*#__PURE__*/React__default.createElement(GradientText, pickAccessibilityProps(nativeProps), styledText);
+  }
+  return styledText;
 };
 
 var StyledLabel$1 = index$c(Text$1)(function (_ref) {
@@ -8151,7 +8307,7 @@ var StyledLabel$1 = index$c(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$M = ["children", "intent", "allowFontScaling", "fontStyle"];
+var _excluded$N = ["children", "intent", "allowFontScaling", "fontStyle", "style", "testID"];
 var Label = function Label(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -8160,12 +8316,21 @@ var Label = function Label(_ref) {
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
     _ref$fontStyle = _ref.fontStyle,
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$M);
-  return /*#__PURE__*/React__default.createElement(StyledLabel$1, _extends$1({}, nativeProps, {
-    themeIntent: intent,
+    style = _ref.style,
+    testID = _ref.testID,
+    nativeProps = _objectWithoutProperties(_ref, _excluded$N);
+  var isAi = intent === 'ai';
+  var styledText = /*#__PURE__*/React__default.createElement(StyledLabel$1, _extends$1({}, nativeProps, {
+    themeIntent: isAi ? 'body' : intent,
     themeIsItalic: fontStyle === 'italic',
-    allowFontScaling: allowFontScaling
+    allowFontScaling: allowFontScaling,
+    style: style,
+    testID: testID
   }), children);
+  if (isAi) {
+    return /*#__PURE__*/React__default.createElement(GradientText, pickAccessibilityProps(nativeProps), styledText);
+  }
+  return styledText;
 };
 
 var StyledTitle$1 = index$c(Text$1)(function (_ref) {
@@ -8183,7 +8348,7 @@ var StyledTitle$1 = index$c(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$L = ["children", "intent", "allowFontScaling", "level", "typeface", "fontStyle"];
+var _excluded$M = ["children", "intent", "allowFontScaling", "level", "typeface", "fontStyle", "style", "testID"];
 var Title = function Title(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -8196,14 +8361,23 @@ var Title = function Title(_ref) {
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
     _ref$fontStyle = _ref.fontStyle,
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$L);
-  return /*#__PURE__*/React__default.createElement(StyledTitle$1, _extends$1({}, nativeProps, {
+    style = _ref.style,
+    testID = _ref.testID,
+    nativeProps = _objectWithoutProperties(_ref, _excluded$M);
+  var isAi = intent === 'ai';
+  var styledText = /*#__PURE__*/React__default.createElement(StyledTitle$1, _extends$1({}, nativeProps, {
     themeLevel: level,
     themeTypeface: typeface,
-    themeIntent: intent,
+    themeIntent: isAi ? 'body' : intent,
     themeIsItalic: fontStyle === 'italic',
-    allowFontScaling: allowFontScaling
+    allowFontScaling: allowFontScaling,
+    style: style,
+    testID: testID
   }), children);
+  if (isAi) {
+    return /*#__PURE__*/React__default.createElement(GradientText, pickAccessibilityProps(nativeProps), styledText);
+  }
+  return styledText;
 };
 
 var FONTWEIGHT_MAP = {
@@ -8235,7 +8409,7 @@ var StyledBody$2 = index$c(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$K = ["children", "intent", "allowFontScaling", "typeface", "variant", "fontStyle"];
+var _excluded$L = ["children", "intent", "allowFontScaling", "typeface", "variant", "fontStyle", "style", "testID"];
 var Body = function Body(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -8248,14 +8422,23 @@ var Body = function Body(_ref) {
     variant = _ref$variant === void 0 ? 'regular' : _ref$variant,
     _ref$fontStyle = _ref.fontStyle,
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$K);
-  return /*#__PURE__*/React__default.createElement(StyledBody$2, _extends$1({}, nativeProps, {
+    style = _ref.style,
+    testID = _ref.testID,
+    nativeProps = _objectWithoutProperties(_ref, _excluded$L);
+  var isAi = intent === 'ai';
+  var styledText = /*#__PURE__*/React__default.createElement(StyledBody$2, _extends$1({}, nativeProps, {
     themeTypeface: typeface,
-    themeIntent: intent,
+    themeIntent: isAi ? 'body' : intent,
     themeVariant: variant,
     themeIsItalic: fontStyle === 'italic',
-    allowFontScaling: allowFontScaling
+    allowFontScaling: allowFontScaling,
+    style: style,
+    testID: testID
   }), children);
+  if (isAi) {
+    return /*#__PURE__*/React__default.createElement(GradientText, pickAccessibilityProps(nativeProps), styledText);
+  }
+  return styledText;
 };
 
 var Typography = {
@@ -8865,10 +9048,10 @@ var StyledHeroIcon = index$c(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$J = ["style"];
-var AnimatedIcon = function AnimatedIcon(_ref) {
-  var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$J);
+var SpinWrapper = function SpinWrapper(_ref) {
+  var children = _ref.children,
+    style = _ref.style,
+    testID = _ref.testID;
   var rotateAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(rotateAnimation.current, {
@@ -8879,22 +9062,74 @@ var AnimatedIcon = function AnimatedIcon(_ref) {
     }));
     animation.start();
     return function () {
-      animation.stop();
+      return animation.stop();
     };
   }, []);
-  var interpolatedRotateAnimation = rotateAnimation.current.interpolate({
+  var rotate = rotateAnimation.current.interpolate({
     inputRange: [0, 1],
     outputRange: ['0deg', '360deg']
   });
   return /*#__PURE__*/React__default.createElement(Animated.View, {
+    testID: testID,
     style: [{
       transform: [{
-        rotate: interpolatedRotateAnimation
+        rotate: rotate
       }]
     }, style]
+  }, children);
+};
+
+var _excluded$K = ["style"];
+var AnimatedIcon = function AnimatedIcon(_ref) {
+  var style = _ref.style,
+    otherProps = _objectWithoutProperties(_ref, _excluded$K);
+  return /*#__PURE__*/React__default.createElement(SpinWrapper, {
+    style: style
   }, /*#__PURE__*/React__default.createElement(StyledHeroIcon, otherProps));
 };
 
+var _excluded$J = ["name", "themeSize", "testID", "style"];
+var GradientIcon = function GradientIcon(_ref) {
+  var name = _ref.name,
+    themeSize = _ref.themeSize,
+    testID = _ref.testID,
+    style = _ref.style,
+    accessibilityProps = _objectWithoutProperties(_ref, _excluded$J);
+  var theme = useTheme();
+  var gradient = theme.colors.gradients.aiDiagonal;
+  var size = theme.__hd__.icon.sizes[themeSize];
+  return /*#__PURE__*/React__default.createElement(MaskedView, _extends$1({
+    testID: testID,
+    style: [{
+      width: size,
+      height: size
+    }, style]
+  }, accessibilityProps, {
+    maskElement: /*#__PURE__*/React__default.createElement(View, {
+      style: {
+        backgroundColor: 'transparent',
+        width: size,
+        height: size,
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    }, /*#__PURE__*/React__default.createElement(StyledHeroIcon, {
+      name: name,
+      themeIntent: "text",
+      themeSize: themeSize
+    }))
+  }), /*#__PURE__*/React__default.createElement(LinearGradient, {
+    start: gradient.start,
+    end: gradient.end,
+    colors: gradient.colors,
+    locations: gradient.locations,
+    style: {
+      width: size,
+      height: size
+    }
+  }));
+};
+
 var Icon = function Icon(_ref) {
   var icon = _ref.icon,
     style = _ref.style,
@@ -8930,6 +9165,20 @@ var Icon = function Icon(_ref) {
     accessibilityViewIsModal: accessibilityViewIsModal,
     accessibilityActions: accessibilityActions
   };
+  if (intent === 'ai') {
+    var gradientIcon = /*#__PURE__*/React__default.createElement(GradientIcon, _extends$1({
+      name: icon,
+      themeSize: size,
+      testID: testID,
+      style: spin ? undefined : style
+    }, accessibilityProps));
+    if (spin) {
+      return /*#__PURE__*/React__default.createElement(SpinWrapper, {
+        style: style
+      }, gradientIcon);
+    }
+    return gradientIcon;
+  }
   return spin ? /*#__PURE__*/React__default.createElement(AnimatedIcon, _extends$1({
     name: icon,
     themeIntent: intent,
@@ -27013,7 +27262,7 @@ var StyledGradientContainer = index$c(Box)(function (_ref2) {
 });
 
 var _excluded$b = ["intent", "variant", "style", "onLayout"];
-var AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
+var AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient$1);
 var gradientPositions = {
   start: {
     x: 0,

package/jest.config.js

@@ -19,6 +19,6 @@ module.exports = {
   roots: ['<rootDir>/src'],
   snapshotSerializers: ['@emotion/jest/serializer'],
   transformIgnorePatterns: [
-    'node_modules/(?!((jest-)?@react-native|@emotion/.*|react-native|react-native-linear-gradient|react-native-pager-view|@react-native-community|nanoid|d3|d3-.*|internmap|delaunator|robust-predicates)/)',
+    'node_modules/(?!((jest-)?@react-native|@emotion/.*|react-native|react-native-linear-gradient|react-native-pager-view|@react-native-community|@react-native-masked-view|expo-linear-gradient|nanoid|d3|d3-.*|internmap|delaunator|robust-predicates)/)',
   ],
 };