@hero-design/rn 8.27.1 → 8.27.2

package/.turbo/turbo-build.log

@@ -4,5 +4,5 @@ $ rollup -c
 src/index.ts → lib/index.js, es/index.js...
 (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
 (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-created lib/index.js, es/index.js in 29s
+created lib/index.js, es/index.js in 25.6s
 $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -2327,8 +2327,7 @@ var getFABTheme = function getFABTheme(theme) {
     headerTextMarginRight: theme.space.large,
     headerTextMarginBottom: theme.space.large,
     containerPadding: theme.space.large - theme.space.xsmall,
-    titleMarginHorizontal: theme.space.small,
-    internalFABMarginBottom: theme.space.large
+    titleMarginHorizontal: theme.space.small
   };
   var radii = {
     actionItem: theme.radii.rounded
@@ -12037,7 +12036,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     testID: "input-suffix",
     icon: actualSuffix,
     spin: actualSuffix === 'loading',
-    size: "xsmall"
+    size: "medium"
   }) : suffix), /*#__PURE__*/React.createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React.createElement(StyledErrorAndMaxLengthContainer, null, error ? /*#__PURE__*/React.createElement(StyledErrorContainer$2, null, /*#__PURE__*/React.createElement(Icon, {
     testID: "input-error-icon",
     icon: "circle-info",
@@ -13085,11 +13084,10 @@ var StyledBackdrop = index$a(Animated.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     position: 'absolute',
-    flex: 1,
-    height: '100%',
-    width: '100%',
-    bottom: 0,
+    left: 0,
     right: 0,
+    top: 0,
+    bottom: 0,
     backgroundColor: theme.__hd__.fab.colors.backdropBackground
   };
 });
@@ -13105,17 +13103,6 @@ var StyledHeaderText = index$a(Typography.Text)(function (_ref3) {
     textAlign: 'right'
   };
 });
-var StyledModalView = index$a(View)({
-  position: 'absolute',
-  flex: 1,
-  height: '100%',
-  width: '100%',
-  bottom: 0,
-  right: 0,
-  justifyContent: 'flex-end',
-  alignItems: 'flex-end',
-  backgroundColor: 'transparent'
-});
 
 var ActionItemsListComponent = function ActionItemsListComponent(_ref) {
   var style = _ref.style,
@@ -13138,43 +13125,15 @@ var ActionGroup = function ActionGroup(_ref2) {
     fabTitle = _ref2.fabTitle,
     _ref2$fabIcon = _ref2.fabIcon,
     fabIcon = _ref2$fabIcon === void 0 ? 'add' : _ref2$fabIcon;
-  var theme = useTheme();
-  // Internal state to control the animation of the action group
-  var _useState = useState(active),
-    _useState2 = _slicedToArray(_useState, 2),
-    visible = _useState2[0],
-    setVisibility = _useState2[1];
   var tranlateXAnimation = useRef(new Animated.Value(active ? 1 : 0));
   useEffect(function () {
-    if (active && !visible) {
-      setVisibility(true);
-    }
-  }, [active]);
-  useEffect(function () {
-    if (active) {
-      var animation = Animated.timing(tranlateXAnimation.current, {
-        toValue: 1,
-        useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
-        easing: Easing.inOut(Easing.cubic)
-      });
-      animation.start();
-    }
-  }, [active]);
-  //  Make sure the animation finishes running before closing the modal
-  var onInternalFABPress = useCallback(function () {
-    if (!onPress) {
-      return;
-    }
     var animation = Animated.timing(tranlateXAnimation.current, {
-      toValue: 0,
+      toValue: active ? 1 : 0,
       useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
       easing: Easing.inOut(Easing.cubic)
     });
-    animation.start(function () {
-      setVisibility(false);
-      onPress();
-    });
-  }, [visible]);
+    animation.start();
+  }, [active]);
   var interpolatedTranlateXAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
     outputRange: [400, 0]
@@ -13191,18 +13150,13 @@ var ActionGroup = function ActionGroup(_ref2) {
     testID: testID,
     pointerEvents: "box-none",
     style: style
-  }, /*#__PURE__*/React.createElement(Modal, {
-    visible: visible,
-    transparent: true,
-    statusBarTranslucent: true,
-    animationType: "none"
   }, /*#__PURE__*/React.createElement(StyledBackdrop, {
+    pointerEvents: active ? 'auto' : 'box-none',
+    testID: "back-drop",
     style: {
       opacity: interpolatedBackdropOpacityAnimation
-    },
-    testID: "back-drop",
-    pointerEvents: active ? 'auto' : 'box-none'
-  }), /*#__PURE__*/React.createElement(StyledModalView, null, /*#__PURE__*/React.createElement(StyledActionGroupContainer, {
+    }
+  }), /*#__PURE__*/React.createElement(StyledActionGroupContainer, {
     pointerEvents: active ? 'auto' : 'none',
     testID: "action-group",
     style: {
@@ -13215,17 +13169,7 @@ var ActionGroup = function ActionGroup(_ref2) {
     testID: "header-text"
   }, headerTitle), /*#__PURE__*/React.createElement(ActionItemsListComponent, {
     items: items
-  })), active && /*#__PURE__*/React.createElement(StyledFAB, {
-    testID: "fab",
-    icon: fabIcon,
-    onPress: onInternalFABPress,
-    animated: true,
-    active: active,
-    title: fabTitle,
-    style: {
-      marginBottom: theme.__hd__.fab.space.internalFABMarginBottom
-    }
-  }))), !active && /*#__PURE__*/React.createElement(StyledFAB, {
+  })), /*#__PURE__*/React.createElement(StyledFAB, {
     testID: "fab",
     icon: fabIcon,
     onPress: onPress,

package/lib/index.js

@@ -2357,8 +2357,7 @@ var getFABTheme = function getFABTheme(theme) {
     headerTextMarginRight: theme.space.large,
     headerTextMarginBottom: theme.space.large,
     containerPadding: theme.space.large - theme.space.xsmall,
-    titleMarginHorizontal: theme.space.small,
-    internalFABMarginBottom: theme.space.large
+    titleMarginHorizontal: theme.space.small
   };
   var radii = {
     actionItem: theme.radii.rounded
@@ -12067,7 +12066,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     testID: "input-suffix",
     icon: actualSuffix,
     spin: actualSuffix === 'loading',
-    size: "xsmall"
+    size: "medium"
   }) : suffix), /*#__PURE__*/React__default["default"].createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledErrorAndMaxLengthContainer, null, error ? /*#__PURE__*/React__default["default"].createElement(StyledErrorContainer$2, null, /*#__PURE__*/React__default["default"].createElement(Icon, {
     testID: "input-error-icon",
     icon: "circle-info",
@@ -13115,11 +13114,10 @@ var StyledBackdrop = index$a(reactNative.Animated.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     position: 'absolute',
-    flex: 1,
-    height: '100%',
-    width: '100%',
-    bottom: 0,
+    left: 0,
     right: 0,
+    top: 0,
+    bottom: 0,
     backgroundColor: theme.__hd__.fab.colors.backdropBackground
   };
 });
@@ -13135,17 +13133,6 @@ var StyledHeaderText = index$a(Typography.Text)(function (_ref3) {
     textAlign: 'right'
   };
 });
-var StyledModalView = index$a(reactNative.View)({
-  position: 'absolute',
-  flex: 1,
-  height: '100%',
-  width: '100%',
-  bottom: 0,
-  right: 0,
-  justifyContent: 'flex-end',
-  alignItems: 'flex-end',
-  backgroundColor: 'transparent'
-});
 
 var ActionItemsListComponent = function ActionItemsListComponent(_ref) {
   var style = _ref.style,
@@ -13168,43 +13155,15 @@ var ActionGroup = function ActionGroup(_ref2) {
     fabTitle = _ref2.fabTitle,
     _ref2$fabIcon = _ref2.fabIcon,
     fabIcon = _ref2$fabIcon === void 0 ? 'add' : _ref2$fabIcon;
-  var theme = useTheme();
-  // Internal state to control the animation of the action group
-  var _useState = React.useState(active),
-    _useState2 = _slicedToArray(_useState, 2),
-    visible = _useState2[0],
-    setVisibility = _useState2[1];
   var tranlateXAnimation = React.useRef(new reactNative.Animated.Value(active ? 1 : 0));
   React.useEffect(function () {
-    if (active && !visible) {
-      setVisibility(true);
-    }
-  }, [active]);
-  React.useEffect(function () {
-    if (active) {
-      var animation = reactNative.Animated.timing(tranlateXAnimation.current, {
-        toValue: 1,
-        useNativeDriver: reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android',
-        easing: reactNative.Easing.inOut(reactNative.Easing.cubic)
-      });
-      animation.start();
-    }
-  }, [active]);
-  //  Make sure the animation finishes running before closing the modal
-  var onInternalFABPress = React.useCallback(function () {
-    if (!onPress) {
-      return;
-    }
     var animation = reactNative.Animated.timing(tranlateXAnimation.current, {
-      toValue: 0,
+      toValue: active ? 1 : 0,
       useNativeDriver: reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android',
       easing: reactNative.Easing.inOut(reactNative.Easing.cubic)
     });
-    animation.start(function () {
-      setVisibility(false);
-      onPress();
-    });
-  }, [visible]);
+    animation.start();
+  }, [active]);
   var interpolatedTranlateXAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
     outputRange: [400, 0]
@@ -13221,18 +13180,13 @@ var ActionGroup = function ActionGroup(_ref2) {
     testID: testID,
     pointerEvents: "box-none",
     style: style
-  }, /*#__PURE__*/React__default["default"].createElement(reactNative.Modal, {
-    visible: visible,
-    transparent: true,
-    statusBarTranslucent: true,
-    animationType: "none"
   }, /*#__PURE__*/React__default["default"].createElement(StyledBackdrop, {
+    pointerEvents: active ? 'auto' : 'box-none',
+    testID: "back-drop",
     style: {
       opacity: interpolatedBackdropOpacityAnimation
-    },
-    testID: "back-drop",
-    pointerEvents: active ? 'auto' : 'box-none'
-  }), /*#__PURE__*/React__default["default"].createElement(StyledModalView, null, /*#__PURE__*/React__default["default"].createElement(StyledActionGroupContainer, {
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(StyledActionGroupContainer, {
     pointerEvents: active ? 'auto' : 'none',
     testID: "action-group",
     style: {
@@ -13245,17 +13199,7 @@ var ActionGroup = function ActionGroup(_ref2) {
     testID: "header-text"
   }, headerTitle), /*#__PURE__*/React__default["default"].createElement(ActionItemsListComponent, {
     items: items
-  })), active && /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
-    testID: "fab",
-    icon: fabIcon,
-    onPress: onInternalFABPress,
-    animated: true,
-    active: active,
-    title: fabTitle,
-    style: {
-      marginBottom: theme.__hd__.fab.space.internalFABMarginBottom
-    }
-  }))), !active && /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
+  })), /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
     testID: "fab",
     icon: fabIcon,
     onPress: onPress,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.27.1",
+  "version": "8.27.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.27.1",
+    "@hero-design/colors": "8.27.2",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -45,7 +45,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.27.1",
+    "@hero-design/eslint-plugin": "8.27.2",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -61,10 +61,10 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.27.1",
+    "eslint-config-hd": "8.27.2",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.27.1",
+    "prettier-config-hd": "8.27.2",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap

@@ -187,14 +187,14 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
             Array [
               Object {
                 "color": "#001f23",
-                "fontSize": 16,
+                "fontSize": 24,
               },
               undefined,
             ]
           }
           testID="input-suffix"
           themeIntent="text"
-          themeSize="xsmall"
+          themeSize="medium"
         />
       </View>
       <View
@@ -412,14 +412,14 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
             Array [
               Object {
                 "color": "#001f23",
-                "fontSize": 16,
+                "fontSize": 24,
               },
               undefined,
             ]
           }
           testID="input-suffix"
           themeIntent="text"
-          themeSize="xsmall"
+          themeSize="medium"
         />
       </View>
       <View
@@ -643,14 +643,14 @@ exports[`DatePicker renders variant Calendar 1`] = `
             Array [
               Object {
                 "color": "#001f23",
-                "fontSize": 16,
+                "fontSize": 24,
               },
               undefined,
             ]
           }
           testID="input-suffix"
           themeIntent="text"
-          themeSize="xsmall"
+          themeSize="medium"
         />
       </View>
       <View

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap

@@ -187,14 +187,14 @@ exports[`DatePickerAndroid renders correctly 1`] = `
             Array [
               Object {
                 "color": "#001f23",
-                "fontSize": 16,
+                "fontSize": 24,
               },
               undefined,
             ]
           }
           testID="input-suffix"
           themeIntent="text"
-          themeSize="xsmall"
+          themeSize="medium"
         />
       </View>
       <View

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap

@@ -187,14 +187,14 @@ exports[`DatePickerCalendar renders correctly 1`] = `
             Array [
               Object {
                 "color": "#001f23",
-                "fontSize": 16,
+                "fontSize": 24,
               },
               undefined,
             ]
           }
           testID="input-suffix"
           themeIntent="text"
-          themeSize="xsmall"
+          themeSize="medium"
         />
       </View>
       <View

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -187,14 +187,14 @@ exports[`DatePickerIOS renders correctly 1`] = `
             Array [
               Object {
                 "color": "#001f23",
-                "fontSize": 16,
+                "fontSize": 24,
               },
               undefined,
             ]
           }
           testID="input-suffix"
           themeIntent="text"
-          themeSize="xsmall"
+          themeSize="medium"
         />
       </View>
       <View

package/src/components/FAB/ActionGroup/StyledActionGroup.tsx

@@ -34,11 +34,10 @@ const StyledBackdrop = styled(Animated.View)<
   ComponentProps<typeof Animated.View>
 >(({ theme }) => ({
   position: 'absolute',
-  flex: 1,
-  height: '100%',
-  width: '100%',
-  bottom: 0,
+  left: 0,
   right: 0,
+  top: 0,
+  bottom: 0,
   backgroundColor: theme.__hd__.fab.colors.backdropBackground,
 }));
 
@@ -52,23 +51,10 @@ const StyledHeaderText = styled(Typography.Text)<TextProps>(({ theme }) => ({
   textAlign: 'right',
 }));
 
-const StyledModalView = styled(View)({
-  position: 'absolute',
-  flex: 1,
-  height: '100%',
-  width: '100%',
-  bottom: 0,
-  right: 0,
-  justifyContent: 'flex-end',
-  alignItems: 'flex-end',
-  backgroundColor: 'transparent',
-});
-
 export {
   StyledHeaderText,
   StyledBackdrop,
   StyledContainer,
   StyledActionGroupContainer,
   StyledFAB,
-  StyledModalView,
 };