@hero-design/rn 8.87.1 → 8.88.0

package/lib/index.js

@@ -5884,10 +5884,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();
@@ -5909,8 +5909,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;
@@ -8386,7 +8386,7 @@ var StyledContainer$9 = index$a(reactNative.View)(function (_ref2) {
 var StyledIconContainer$1 = index$a(reactNative.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',
@@ -8413,6 +8413,24 @@ var StyledIconContainer$1 = index$a(reactNative.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'
+    }]
   });
 });
 
@@ -8439,42 +8457,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
         };
       }
   }
@@ -8516,6 +8571,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;
+      }
   }
 };
 
@@ -8582,14 +8653,15 @@ var AppCue = function AppCue(_ref) {
       height: event.nativeEvent.layout.height
     });
   };
+  var _useWindowDimensions = reactNative.useWindowDimensions(),
+    windowWidth = _useWindowDimensions.width;
   var pos = calculatePosition({
     position: position,
     contentSize: contentSize,
     placement: placement,
-    offset: offset
+    offset: offset,
+    windowWidth: windowWidth
   });
-  var _useWindowDimensions = reactNative.useWindowDimensions(),
-    windowWidth = _useWindowDimensions.width;
   var maxWidth = calulateContentMaxWidth({
     position: position,
     offset: offset,
@@ -8629,8 +8701,10 @@ var AppCue = function AppCue(_ref) {
   }, /*#__PURE__*/React__namespace.default.createElement(StyledContainer$9, null, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
     style: reactNative.StyleSheet.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
@@ -13998,7 +14072,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) {
@@ -14219,18 +14297,10 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     inputSize = _React$useState2[0],
     setInputSize = _React$useState2[1];
-  var _React$useState3 = React__namespace.default.useState(0),
+  var _React$useState3 = React__namespace.default.useState(false),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    labelWidth = _React$useState4[0],
-    setLabelWidth = _React$useState4[1];
-  var _React$useState5 = React__namespace.default.useState(0),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    prefixWidth = _React$useState6[0],
-    setPrefixWidth = _React$useState6[1];
-  var _React$useState7 = React__namespace.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,
@@ -14260,14 +14330,6 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
       });
     });
   }, []);
-  var onPrefixLayout = React.useCallback(function (event) {
-    var width = event.nativeEvent.layout.width;
-    setPrefixWidth(width);
-  }, []);
-  var onLabelLayout = React.useCallback(function (event) {
-    var width = event.nativeEvent.layout.width;
-    setLabelWidth(width);
-  }, []);
   var innerTextInput = React__namespace.default.useRef();
   React__namespace.default.useImperativeHandle(ref, function () {
     return {
@@ -14374,9 +14436,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
     style: [{
       backgroundColor: backgroundColor
     }, borderStyle]
-  }), /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
-    onLayout: onPrefixLayout
-  }, renderPrefix$1({
+  }), /*#__PURE__*/React__namespace.default.createElement(reactNative.View, null, renderPrefix$1({
     state: state,
     prefix: prefix
   })), /*#__PURE__*/React__namespace.default.createElement(StyledLabelContainerInsideTextInput, {
@@ -14388,12 +14448,12 @@ var TextInput = /*#__PURE__*/React.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({
@@ -14402,21 +14462,20 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
         })
       }]
     }]
-  }, required && /*#__PURE__*/React__namespace.default.createElement(StyledAsteriskLabelInsideTextInput, {
+  }, !!label && /*#__PURE__*/React__namespace.default.createElement(StyledLabelInsideTextInput, {
     style: {
       backgroundColor: backgroundColor
     },
-    themeState: state,
-    testID: "input-label-asterisk"
-  }, "*"), !!label && /*#__PURE__*/React__namespace.default.createElement(StyledLabelInsideTextInput, {
+    nativeID: accessibilityLabelledBy,
+    testID: "input-label",
+    themeState: state
+  }, required && /*#__PURE__*/React__namespace.default.createElement(StyledAsteriskLabelInsideTextInput, {
     style: {
       backgroundColor: backgroundColor
     },
-    nativeID: accessibilityLabelledBy,
-    testID: "input-label",
     themeState: state,
-    onLayout: onLabelLayout
-  }, label)), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
+    testID: "input-label-asterisk"
+  }, "*"), label)), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
     variant: variant,
     nativeInputProps: nativeInputProps,
     renderInputValue: renderInputValue,
@@ -15139,8 +15198,8 @@ var Empty = function Empty(_ref) {
     level: "h4",
     typeface: "playful"
   }, title), !!description && /*#__PURE__*/React__namespace.default.createElement(StyledDescription, {
-    themeVariant: variant,
-    typeface: "playful"
+    variant: "small",
+    themeVariant: variant
   }, description));
 };
 
@@ -20640,7 +20699,7 @@ var MentionList = function MentionList(_ref) {
   }));
 };
 
-var lib = {exports: {}};
+var lib$1 = {exports: {}};
 
 var reactDom = {exports: {}};
 
@@ -28068,14 +28127,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__namespace.default, requireReactDom());
-    }(self, function (e, t) {
+    }("undefined" != typeof self ? self : lib, function (e, t) {
       return function () {
         var r = {
             394: function _(e) {
@@ -39114,8 +39174,8 @@ function requireLib() {
         }(), o;
       }();
     });
-  })(lib);
-  return lib.exports;
+  })(lib$1);
+  return lib$1.exports;
 }
 
 var libExports = requireLib();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.87.1",
+  "version": "8.88.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,7 +24,7 @@
     "@emotion/react": "^11.9.3",
     "@hero-design/colors": "8.45.2",
     "date-fns": "^2.16.1",
-    "hero-editor": "^1.15.4",
+    "hero-editor": "^1.15.5",
     "nanoid": "^5.0.9"
   },
   "peerDependencies": {

package/src/components/AppCue/StyledAppCue.tsx

@@ -1,7 +1,15 @@
 import styled from '@emotion/native';
 import { View, Animated } from 'react-native';
 
-export type Placement = 'top' | 'bottom' | 'right' | 'left';
+export type Placement =
+  | 'top'
+  | 'bottom'
+  | 'right'
+  | 'left'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right';
 
 export const StyledContent = styled(View)(({ theme }) => ({
   padding: theme.__hd__.appCue.space.padding,
@@ -43,4 +51,22 @@ export const StyledIconContainer = styled(Animated.View)<{
     transform: [{ 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' }],
+  }),
 }));

package/src/components/AppCue/__tests__/StyledAppCue.tsx

@@ -9,6 +9,10 @@ describe('AppCue', () => {
     ${'bottom'}
     ${'left'}
     ${'right'}
+    ${'top-left'}
+    ${'top-right'}
+    ${'bottom-left'}
+    ${'bottom-right'}
   `('renders icon $placement correctly', ({ placement }) => {
     const { toJSON } = renderWithTheme(
       <StyledIconContainer themePlacement={placement} />

package/src/components/AppCue/__tests__/__snapshots__/StyledAppCue.tsx.snap

@@ -51,6 +51,108 @@ exports[`AppCue renders icon bottom correctly 1`] = `
 </View>
 `;
 
+exports[`AppCue renders icon bottom-left correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      {
+        "alignItems": "center",
+        "color": "#001f23",
+        "display": "flex",
+        "justifyContent": "center",
+        "position": "absolute",
+        "right": 12,
+        "top": -12,
+        "transform": [
+          {
+            "rotate": "180deg",
+          },
+        ],
+      }
+    }
+    themePlacement="bottom-left"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`AppCue renders icon bottom-right correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      {
+        "alignItems": "center",
+        "color": "#001f23",
+        "display": "flex",
+        "justifyContent": "center",
+        "left": 12,
+        "position": "absolute",
+        "top": -12,
+        "transform": [
+          {
+            "rotate": "180deg",
+          },
+        ],
+      }
+    }
+    themePlacement="bottom-right"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`AppCue renders icon left correctly 1`] = `
 <View
   style={
@@ -198,3 +300,95 @@ exports[`AppCue renders icon top correctly 1`] = `
   />
 </View>
 `;
+
+exports[`AppCue renders icon top-left correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      {
+        "alignItems": "center",
+        "bottom": -12,
+        "color": "#001f23",
+        "display": "flex",
+        "justifyContent": "center",
+        "position": "absolute",
+        "right": 12,
+      }
+    }
+    themePlacement="top-left"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`AppCue renders icon top-right correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      {
+        "alignItems": "center",
+        "bottom": -12,
+        "color": "#001f23",
+        "display": "flex",
+        "justifyContent": "center",
+        "left": 12,
+        "position": "absolute",
+      }
+    }
+    themePlacement="top-right"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;