@hero-design/rn 8.87.1 → 8.88.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:2961) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:3003) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 (Use `node --trace-warnings ...` to show where the warning was created)
 
 src/index.ts → lib/index.js, es/index.js...
@@ -10,4 +10,4 @@
                                      ~~~~~~~~~~~~~~~~~~~
 
 (!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 52.6s
+created lib/index.js, es/index.js in 52.4s

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @hero-design/rn
 
+## 8.88.0
+
+### Minor Changes
+
+- [#3630](https://github.com/Thinkei/hero-design/pull/3630) [`b4ae9bf3fe00b4a7a27d2919eb7ef83a7d391e59`](https://github.com/Thinkei/hero-design/commit/b4ae9bf3fe00b4a7a27d2919eb7ef83a7d391e59) Thanks [@phucdph](https://github.com/phucdph)! - [AppCue] Support top-left, top-right, bottom-left, bottom-right placement
+
+### Patch Changes
+
+- [#3633](https://github.com/Thinkei/hero-design/pull/3633) [`040aa3235d512304df0dc00c4aa3c26766f1fc1c`](https://github.com/Thinkei/hero-design/commit/040aa3235d512304df0dc00c4aa3c26766f1fc1c) Thanks [@luanlai2201](https://github.com/luanlai2201)! - [TextInput] Fix label when has value do not align with another TextInput
+
+- [#3638](https://github.com/Thinkei/hero-design/pull/3638) [`4a5628d321f2c6b9dcb96c62b1ceed999a6ec7b7`](https://github.com/Thinkei/hero-design/commit/4a5628d321f2c6b9dcb96c62b1ceed999a6ec7b7) Thanks [@ttkien](https://github.com/ttkien)! - [Empty] Update descrption typeface and font size
+
+## 8.87.2
+
+### Patch Changes
+
+- [#3623](https://github.com/Thinkei/hero-design/pull/3623) [`4898fef1ef1a0c8b4c809188471ba487474bbb28`](https://github.com/Thinkei/hero-design/commit/4898fef1ef1a0c8b4c809188471ba487474bbb28) Thanks [@khoaddtran](https://github.com/khoaddtran)! - Bump hero-editor to 1.15.5
+
 ## 8.87.1
 
 ### Patch Changes

package/es/index.js

@@ -5856,10 +5856,10 @@ function requireUnit() {
   return unit;
 }
 
-var lib$1;
+var lib$2;
 var hasRequiredLib$1;
 function requireLib$1() {
-  if (hasRequiredLib$1) return lib$1;
+  if (hasRequiredLib$1) return lib$2;
   hasRequiredLib$1 = 1;
   var parse = requireParse();
   var walk = requireWalk();
@@ -5881,8 +5881,8 @@ function requireLib$1() {
   ValueParser.unit = requireUnit();
   ValueParser.walk = walk;
   ValueParser.stringify = stringify;
-  lib$1 = ValueParser;
-  return lib$1;
+  lib$2 = ValueParser;
+  return lib$2;
 }
 
 var camelize;
@@ -8358,7 +8358,7 @@ var StyledContainer$9 = index$a(View)(function (_ref2) {
 var StyledIconContainer$1 = index$a(Animated.View)(function (_ref3) {
   var theme = _ref3.theme,
     themePlacement = _ref3.themePlacement;
-  return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
+  return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
     position: 'absolute',
     color: theme.__hd__.appCue.colors.background,
     display: 'flex',
@@ -8385,6 +8385,24 @@ var StyledIconContainer$1 = index$a(Animated.View)(function (_ref3) {
       rotate: '-90deg'
     }],
     height: '100%'
+  }), themePlacement === 'top-left' && {
+    bottom: -theme.__hd__.appCue.space.arrowOffset,
+    right: theme.__hd__.appCue.space.arrowOffset
+  }), themePlacement === 'top-right' && {
+    bottom: -theme.__hd__.appCue.space.arrowOffset,
+    left: theme.__hd__.appCue.space.arrowOffset
+  }), themePlacement === 'bottom-left' && {
+    top: -theme.__hd__.appCue.space.arrowOffset,
+    right: theme.__hd__.appCue.space.arrowOffset,
+    transform: [{
+      rotate: '180deg'
+    }]
+  }), themePlacement === 'bottom-right' && {
+    top: -theme.__hd__.appCue.space.arrowOffset,
+    left: theme.__hd__.appCue.space.arrowOffset,
+    transform: [{
+      rotate: '180deg'
+    }]
   });
 });
 
@@ -8411,42 +8429,79 @@ var calculatePosition = function calculatePosition(_ref) {
   var placement = _ref.placement,
     position = _ref.position,
     contentSize = _ref.contentSize,
-    offset = _ref.offset;
+    offset = _ref.offset,
+    windowWidth = _ref.windowWidth;
   switch (placement) {
     case 'top':
       {
         return {
           // The X coordinate is calculated by adding the half of the width of the target element to the X coordinate of the target element.
-          x: position.pageX + (position.width - contentSize.width) / 2,
+          left: position.pageX + (position.width - contentSize.width) / 2,
           // The Y coordinate is calculated by subtracting the height of the content and the offset from the Y coordinate of the target element
-          y: position.pageY - contentSize.height - offset
+          top: position.pageY - contentSize.height - offset
         };
       }
     case 'bottom':
       {
         return {
           // The X coordinate is calculated by adding the half of the width of the target element to the X coordinate of the target element.
-          x: position.pageX + (position.width - contentSize.width) / 2,
+          left: position.pageX + (position.width - contentSize.width) / 2,
           // The Y coordinate is calculated by adding the height of the target element and the offset to the Y coordinate of the target element.
-          y: position.pageY + position.height + offset
+          top: position.pageY + position.height + offset
         };
       }
     case 'right':
       {
         return {
           // The X coordinate is calculated by adding the width of the target element and the offset to the X coordinate of the target element.
-          x: position.pageX + position.width + offset,
+          left: position.pageX + position.width + offset,
           // The Y coordinate is calculated by adding half of the height of the target element to the Y coordinate of the target element.
-          y: position.pageY + (position.height - contentSize.height) / 2
+          top: position.pageY + (position.height - contentSize.height) / 2
         };
       }
     case 'left':
       {
         return {
           // The X coordinate is calculated by subtracting the width of the content and the offset from the X coordinate of the target element.
-          x: position.pageX - contentSize.width - offset,
+          left: position.pageX - contentSize.width - offset,
           // The Y coordinate is calculated by adding half of the height of the target element to the Y coordinate of the target element.
-          y: position.pageY + (position.height - contentSize.height) / 2
+          top: position.pageY + (position.height - contentSize.height) / 2
+        };
+      }
+    case 'top-left':
+      {
+        return {
+          // The X coordinate is calculated by subtracting the width of the content from the X coordinate of the target element.
+          right: windowWidth - position.pageX - position.width,
+          // The Y coordinate is calculated by subtracting the height of the content and the offset from the Y coordinate of the target element
+          top: position.pageY - contentSize.height - offset
+        };
+      }
+    case 'top-right':
+      {
+        return {
+          // The X coordinate is calculated by adding the width of the target element to the X coordinate of the target element.
+          left: position.pageX,
+          // The Y coordinate is calculated by subtracting the height of the content and the offset from the Y coordinate of the target element.
+          top: position.pageY - contentSize.height - offset
+        };
+      }
+    case 'bottom-left':
+      {
+        return {
+          // The X coordinate is calculated by subtracting the width of the content from the X coordinate of the target element.
+          right: windowWidth - position.pageX - position.width,
+          // The Y coordinate is calculated by adding the height of the target element and the offset to the Y coordinate of the target element.
+          top: position.pageY + position.height + offset
+        };
+      }
+    case 'bottom-right':
+      {
+        return {
+          // The X coordinate is calculated by adding the width of the target element to the X coordinate of the target element.
+          left: position.pageX,
+          // The Y coordinate is calculated by adding the height of the target element and the offset to the Y coordinate of the target element.
+          top: position.pageY + position.height + offset
         };
       }
   }
@@ -8488,6 +8543,22 @@ var calulateContentMaxWidth = function calulateContentMaxWidth(_ref2) {
       {
         return position.pageX - offset;
       }
+    case 'top-left':
+      {
+        return position.pageX + position.width;
+      }
+    case 'top-right':
+      {
+        return windowWidth - position.pageX;
+      }
+    case 'bottom-left':
+      {
+        return position.pageX + position.width;
+      }
+    case 'bottom-right':
+      {
+        return windowWidth - position.pageX;
+      }
   }
 };
 
@@ -8554,14 +8625,15 @@ var AppCue = function AppCue(_ref) {
       height: event.nativeEvent.layout.height
     });
   };
+  var _useWindowDimensions = useWindowDimensions(),
+    windowWidth = _useWindowDimensions.width;
   var pos = calculatePosition({
     position: position,
     contentSize: contentSize,
     placement: placement,
-    offset: offset
+    offset: offset,
+    windowWidth: windowWidth
   });
-  var _useWindowDimensions = useWindowDimensions(),
-    windowWidth = _useWindowDimensions.width;
   var maxWidth = calulateContentMaxWidth({
     position: position,
     offset: offset,
@@ -8601,8 +8673,10 @@ var AppCue = function AppCue(_ref) {
   }, /*#__PURE__*/React__default.createElement(StyledContainer$9, null, /*#__PURE__*/React__default.createElement(View, {
     style: StyleSheet$1.flatten([{
       position: 'absolute',
-      top: pos.y,
-      left: pos.x
+      top: pos.top,
+      left: pos.left,
+      bottom: pos.bottom,
+      right: pos.right
     }, style]),
     onLayout: measureContent,
     testID: testID
@@ -13970,7 +14044,11 @@ var StyledLabelInsideTextInput = index$a(Typography.Body)(function (_ref3) {
     alignContent: 'center',
     alignItems: 'center',
     color: theme.__hd__.textInput.colors.labelsInsideTextInput[themeState],
-    marginTop: theme.__hd__.textInput.space.labelInsideTextInputMarginTop
+    marginTop: theme.__hd__.textInput.space.labelInsideTextInputMarginTop,
+    position: 'absolute',
+    zIndex: 1,
+    left: 0,
+    top: '50%'
   };
 });
 var StyledAsteriskLabelInsideTextInput = index$a(Typography.Body)(function (_ref4) {
@@ -14191,18 +14269,10 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     inputSize = _React$useState2[0],
     setInputSize = _React$useState2[1];
-  var _React$useState3 = React__default.useState(0),
+  var _React$useState3 = React__default.useState(false),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    labelWidth = _React$useState4[0],
-    setLabelWidth = _React$useState4[1];
-  var _React$useState5 = React__default.useState(0),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    prefixWidth = _React$useState6[0],
-    setPrefixWidth = _React$useState6[1];
-  var _React$useState7 = React__default.useState(false),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    isFocused = _React$useState8[0],
-    setIsFocused = _React$useState8[1];
+    isFocused = _React$useState4[0],
+    setIsFocused = _React$useState4[1];
   var state = getState$3({
     disabled: disabled,
     error: error,
@@ -14232,14 +14302,6 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
       });
     });
   }, []);
-  var onPrefixLayout = useCallback(function (event) {
-    var width = event.nativeEvent.layout.width;
-    setPrefixWidth(width);
-  }, []);
-  var onLabelLayout = useCallback(function (event) {
-    var width = event.nativeEvent.layout.width;
-    setLabelWidth(width);
-  }, []);
   var innerTextInput = React__default.useRef();
   React__default.useImperativeHandle(ref, function () {
     return {
@@ -14346,9 +14408,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     style: [{
       backgroundColor: backgroundColor
     }, borderStyle]
-  }), /*#__PURE__*/React__default.createElement(View, {
-    onLayout: onPrefixLayout
-  }, renderPrefix$1({
+  }), /*#__PURE__*/React__default.createElement(View, null, renderPrefix$1({
     state: state,
     prefix: prefix
   })), /*#__PURE__*/React__default.createElement(StyledLabelContainerInsideTextInput, {
@@ -14360,12 +14420,12 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
       transform: [{
         translateY: focusAnimation.interpolate({
           inputRange: [0, 1],
-          outputRange: [variant !== 'textarea' ? inputSize.height / 2 : theme.space.large, 0]
+          outputRange: [variant !== 'textarea' ? inputSize.height / 2 : theme.space.large, theme.space.xsmall]
         })
       }, {
         translateX: focusAnimation.interpolate({
           inputRange: [0, 1],
-          outputRange: [-inputSize.width / 2 + labelWidth / 2 + prefixWidth + theme.space.large, -inputSize.width / 2 + labelWidth / 2 + theme.space.small]
+          outputRange: [prefix ? theme.space.xxlarge : theme.space.medium, -theme.space.xlarge + theme.space.xsmall]
         })
       }, {
         scale: focusAnimation.interpolate({
@@ -14374,21 +14434,20 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
         })
       }]
     }]
-  }, required && /*#__PURE__*/React__default.createElement(StyledAsteriskLabelInsideTextInput, {
+  }, !!label && /*#__PURE__*/React__default.createElement(StyledLabelInsideTextInput, {
     style: {
       backgroundColor: backgroundColor
     },
-    themeState: state,
-    testID: "input-label-asterisk"
-  }, "*"), !!label && /*#__PURE__*/React__default.createElement(StyledLabelInsideTextInput, {
+    nativeID: accessibilityLabelledBy,
+    testID: "input-label",
+    themeState: state
+  }, required && /*#__PURE__*/React__default.createElement(StyledAsteriskLabelInsideTextInput, {
     style: {
       backgroundColor: backgroundColor
     },
-    nativeID: accessibilityLabelledBy,
-    testID: "input-label",
     themeState: state,
-    onLayout: onLabelLayout
-  }, label)), /*#__PURE__*/React__default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
+    testID: "input-label-asterisk"
+  }, "*"), label)), /*#__PURE__*/React__default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
     variant: variant,
     nativeInputProps: nativeInputProps,
     renderInputValue: renderInputValue,
@@ -15111,8 +15170,8 @@ var Empty = function Empty(_ref) {
     level: "h4",
     typeface: "playful"
   }, title), !!description && /*#__PURE__*/React__default.createElement(StyledDescription, {
-    themeVariant: variant,
-    typeface: "playful"
+    variant: "small",
+    themeVariant: variant
   }, description));
 };
 
@@ -20612,7 +20671,7 @@ var MentionList = function MentionList(_ref) {
   }));
 };
 
-var lib = {exports: {}};
+var lib$1 = {exports: {}};
 
 var reactDom = {exports: {}};
 
@@ -28040,14 +28099,15 @@ function requireReactDom() {
   return reactDom.exports;
 }
 
+var lib = lib$1.exports;
 var hasRequiredLib;
 function requireLib() {
-  if (hasRequiredLib) return lib.exports;
+  if (hasRequiredLib) return lib$1.exports;
   hasRequiredLib = 1;
   (function (module, exports) {
     !function (e, t) {
       module.exports = t(React__default, requireReactDom());
-    }(self, function (e, t) {
+    }("undefined" != typeof self ? self : lib, function (e, t) {
       return function () {
         var r = {
             394: function _(e) {
@@ -39086,8 +39146,8 @@ function requireLib() {
         }(), o;
       }();
     });
-  })(lib);
-  return lib.exports;
+  })(lib$1);
+  return lib$1.exports;
 }
 
 var libExports = requireLib();