@hero-design/rn 8.25.1 → 8.25.3

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output 8b413e97d24bd32c
-@hero-design/rn:build: $ yarn build:js && yarn build:types
-@hero-design/rn:build: $ rollup -c
-@hero-design/rn:build: 
-@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
-@hero-design/rn:build: (!) 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`.
-@hero-design/rn:build: (!) 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
-@hero-design/rn:build: created lib/index.js, es/index.js in 37.5s
-@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json
+@hero-design/rn:build: cache hit, replaying output ac666ba5a8b62f90
+@hero-design/rn:build: $ yarn build:js && yarn build:types
+@hero-design/rn:build: $ rollup -c
+@hero-design/rn:build: 
+@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
+@hero-design/rn:build: (!) 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`.
+@hero-design/rn:build: (!) 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
+@hero-design/rn:build: created lib/index.js, es/index.js in 24.3s
+@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -1,6 +1,6 @@
 import * as reactNative from 'react-native';
 import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, UIManager, LayoutAnimation, TouchableOpacity, Text as Text$1, Easing, Image as Image$1, TouchableWithoutFeedback, Pressable, SafeAreaView, KeyboardAvoidingView, TouchableHighlight, ScrollView, Modal, FlatList, useWindowDimensions, TextInput as TextInput$1, PanResponder, InteractionManager, Keyboard, SectionList, RefreshControl as RefreshControl$1 } from 'react-native';
-import React, { useContext, createContext, createElement, useMemo, forwardRef, useEffect, useCallback, useRef, useState, isValidElement, useLayoutEffect, useImperativeHandle } from 'react';
+import React, { useContext, createContext, createElement, useMemo, forwardRef, useEffect, useCallback, useRef, useState, isValidElement, useImperativeHandle, useLayoutEffect } from 'react';
 import { createIconSet } from 'react-native-vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import DateTimePicker from '@react-native-community/datetimepicker';
@@ -12872,12 +12872,15 @@ var StyledFAB$1 = index$a(TouchableHighlight)(function (_ref) {
     borderRadius: theme.radii.rounded,
     alignItems: 'center',
     justifyContent: 'center',
-    overflow: 'hidden',
     alignSelf: 'flex-start',
     paddingHorizontal: theme.__hd__.fab.space.containerPaddingHorizontal,
     paddingVertical: theme.__hd__.fab.space.containerPaddingVertical,
     flexDirection: 'row',
-    elevation: theme.__hd__.fab.shadows.elevation
+    elevation: theme.__hd__.fab.shadows.elevation,
+    shadowColor: theme.__hd__.fab.colors.shadow,
+    shadowOffset: theme.__hd__.fab.shadows.offset,
+    shadowRadius: theme.__hd__.fab.shadows.radius,
+    shadowOpacity: theme.__hd__.fab.shadows.opacity
   };
 });
 var StyledFABIcon = index$a(Icon)(function (_ref2) {
@@ -12901,15 +12904,6 @@ var StyledFABText = index$a(Typography.Text)(function (_ref3) {
     marginHorizontal: theme.__hd__.fab.space.titleMarginHorizontal
   };
 });
-var StyledFABContainer = index$a(Box)(function (_ref4) {
-  var theme = _ref4.theme;
-  return {
-    shadowColor: theme.__hd__.fab.colors.shadow,
-    shadowOffset: theme.__hd__.fab.shadows.offset,
-    shadowRadius: theme.__hd__.fab.shadows.radius,
-    shadowOpacity: theme.__hd__.fab.shadows.opacity
-  };
-});
 
 var _excluded$b = ["active"];
 var AnimatedIcons = Animated.createAnimatedComponent(StyledFABIcon);
@@ -12975,12 +12969,11 @@ var FAB = function FAB(_ref3) {
     style = _ref3.style;
   var isIconOnly = !title;
   var theme = useTheme();
-  return /*#__PURE__*/React.createElement(StyledFABContainer, {
+  return /*#__PURE__*/React.createElement(StyledFAB$1, {
+    underlayColor: theme.__hd__.fab.colors.buttonPressedBackground,
+    onPress: onPress,
     style: style,
     testID: testID
-  }, /*#__PURE__*/React.createElement(StyledFAB$1, {
-    underlayColor: theme.__hd__.fab.colors.buttonPressedBackground,
-    onPress: onPress
   }, isIconOnly ? /*#__PURE__*/React.createElement(IconOnlyContent, {
     animated: animated,
     active: active,
@@ -12988,7 +12981,7 @@ var FAB = function FAB(_ref3) {
   }) : /*#__PURE__*/React.createElement(IconWithTextContent, {
     icon: icon,
     title: title
-  })));
+  }));
 };
 
 var StyledActionItem = index$a(TouchableHighlight)(function (_ref) {
@@ -13486,7 +13479,7 @@ function getState(_ref) {
   }
   return 'default';
 }
-function PinInput(_ref2) {
+var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var _ref2$value = _ref2.value,
     value = _ref2$value === void 0 ? '' : _ref2$value,
     onChangeText = _ref2.onChangeText,
@@ -13525,19 +13518,23 @@ function PinInput(_ref2) {
   }, []);
   var changeText = useCallback(function (text) {
     var pin = (text.match(/[0-9]/g) || []).join('');
-    if (onChangeText) {
-      onChangeText(pin);
-    }
-    if (pin.length === length && onFulfill) {
-      onFulfill(pin);
+    onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(pin);
+    if (pin.length === length) {
+      onFulfill === null || onFulfill === void 0 ? void 0 : onFulfill(pin);
     }
-  }, []);
+  }, [length, onChangeText, onFulfill]);
   useEffect(function () {
     // Must run after animations for keyboard to automatically open
     if (autoFocus) {
       InteractionManager.runAfterInteractions(focus);
     }
   }, [inputRef]);
+  useImperativeHandle(ref, function () {
+    return {
+      focus: focus,
+      blur: blur
+    };
+  });
   return /*#__PURE__*/React.createElement(StyledWrapper$4, {
     style: style,
     testID: testID
@@ -13572,7 +13569,7 @@ function PinInput(_ref2) {
     pointerEvents: "box-only",
     testID: "pin-hidden-input"
   }));
-}
+});
 
 var THEME_INTENT_MAP = {
   primary: 'primary',

package/lib/index.js

@@ -12902,12 +12902,15 @@ var StyledFAB$1 = index$a(reactNative.TouchableHighlight)(function (_ref) {
     borderRadius: theme.radii.rounded,
     alignItems: 'center',
     justifyContent: 'center',
-    overflow: 'hidden',
     alignSelf: 'flex-start',
     paddingHorizontal: theme.__hd__.fab.space.containerPaddingHorizontal,
     paddingVertical: theme.__hd__.fab.space.containerPaddingVertical,
     flexDirection: 'row',
-    elevation: theme.__hd__.fab.shadows.elevation
+    elevation: theme.__hd__.fab.shadows.elevation,
+    shadowColor: theme.__hd__.fab.colors.shadow,
+    shadowOffset: theme.__hd__.fab.shadows.offset,
+    shadowRadius: theme.__hd__.fab.shadows.radius,
+    shadowOpacity: theme.__hd__.fab.shadows.opacity
   };
 });
 var StyledFABIcon = index$a(Icon)(function (_ref2) {
@@ -12931,15 +12934,6 @@ var StyledFABText = index$a(Typography.Text)(function (_ref3) {
     marginHorizontal: theme.__hd__.fab.space.titleMarginHorizontal
   };
 });
-var StyledFABContainer = index$a(Box)(function (_ref4) {
-  var theme = _ref4.theme;
-  return {
-    shadowColor: theme.__hd__.fab.colors.shadow,
-    shadowOffset: theme.__hd__.fab.shadows.offset,
-    shadowRadius: theme.__hd__.fab.shadows.radius,
-    shadowOpacity: theme.__hd__.fab.shadows.opacity
-  };
-});
 
 var _excluded$b = ["active"];
 var AnimatedIcons = reactNative.Animated.createAnimatedComponent(StyledFABIcon);
@@ -13005,12 +12999,11 @@ var FAB = function FAB(_ref3) {
     style = _ref3.style;
   var isIconOnly = !title;
   var theme = useTheme();
-  return /*#__PURE__*/React__default["default"].createElement(StyledFABContainer, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledFAB$1, {
+    underlayColor: theme.__hd__.fab.colors.buttonPressedBackground,
+    onPress: onPress,
     style: style,
     testID: testID
-  }, /*#__PURE__*/React__default["default"].createElement(StyledFAB$1, {
-    underlayColor: theme.__hd__.fab.colors.buttonPressedBackground,
-    onPress: onPress
   }, isIconOnly ? /*#__PURE__*/React__default["default"].createElement(IconOnlyContent, {
     animated: animated,
     active: active,
@@ -13018,7 +13011,7 @@ var FAB = function FAB(_ref3) {
   }) : /*#__PURE__*/React__default["default"].createElement(IconWithTextContent, {
     icon: icon,
     title: title
-  })));
+  }));
 };
 
 var StyledActionItem = index$a(reactNative.TouchableHighlight)(function (_ref) {
@@ -13516,7 +13509,7 @@ function getState(_ref) {
   }
   return 'default';
 }
-function PinInput(_ref2) {
+var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var _ref2$value = _ref2.value,
     value = _ref2$value === void 0 ? '' : _ref2$value,
     onChangeText = _ref2.onChangeText,
@@ -13555,19 +13548,23 @@ function PinInput(_ref2) {
   }, []);
   var changeText = React.useCallback(function (text) {
     var pin = (text.match(/[0-9]/g) || []).join('');
-    if (onChangeText) {
-      onChangeText(pin);
-    }
-    if (pin.length === length && onFulfill) {
-      onFulfill(pin);
+    onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(pin);
+    if (pin.length === length) {
+      onFulfill === null || onFulfill === void 0 ? void 0 : onFulfill(pin);
     }
-  }, []);
+  }, [length, onChangeText, onFulfill]);
   React.useEffect(function () {
     // Must run after animations for keyboard to automatically open
     if (autoFocus) {
       reactNative.InteractionManager.runAfterInteractions(focus);
     }
   }, [inputRef]);
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: focus,
+      blur: blur
+    };
+  });
   return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$4, {
     style: style,
     testID: testID
@@ -13602,7 +13599,7 @@ function PinInput(_ref2) {
     pointerEvents: "box-only",
     testID: "pin-hidden-input"
   }));
-}
+});
 
 var THEME_INTENT_MAP = {
   primary: 'primary',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.25.1",
+  "version": "8.25.3",
   "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.25.1",
+    "@hero-design/colors": "8.25.3",
     "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.25.1",
+    "@hero-design/eslint-plugin": "8.25.3",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -61,9 +61,9 @@
     "@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.25.1",
+    "eslint-config-hd": "8.25.3",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.25.1",
+    "prettier-config-hd": "8.25.3",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap

@@ -494,116 +494,102 @@ exports[`ActionGroup has active false 1`] = `
     </View>
   </View>
   <View
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
     style={
       Array [
-        Object {},
+        Object {
+          "alignItems": "center",
+          "alignSelf": "flex-start",
+          "backgroundColor": "#401960",
+          "borderRadius": 999,
+          "elevation": 2,
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 16,
+          "shadowColor": "#001f23",
+          "shadowOffset": Object {
+            "height": 2,
+            "width": 0,
+          },
+          "shadowOpacity": 0.12,
+          "shadowRadius": 8,
+        },
         Array [
           Object {
-            "shadowColor": "#001f23",
-            "shadowOffset": Object {
-              "height": 2,
-              "width": 0,
-            },
-            "shadowOpacity": 0.12,
-            "shadowRadius": 8,
+            "alignSelf": "flex-end",
+            "marginRight": 24,
+            "marginTop": 24,
           },
-          Array [
-            Object {
-              "alignSelf": "flex-end",
-              "marginRight": 24,
-              "marginTop": 24,
-            },
-            undefined,
-          ],
+          undefined,
         ],
       ]
     }
     testID="fab"
   >
-    <View
-      accessible={true}
-      focusable={false}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+    <HeroIcon
+      name="add"
       style={
         Array [
           Object {
-            "alignItems": "center",
-            "alignSelf": "flex-start",
-            "backgroundColor": "#401960",
-            "borderRadius": 999,
-            "elevation": 2,
-            "flexDirection": "row",
-            "justifyContent": "center",
-            "overflow": "hidden",
-            "paddingHorizontal": 16,
-            "paddingVertical": 16,
+            "color": "#001f23",
+            "fontSize": 16,
           },
-          undefined,
-        ]
-      }
-    >
-      <HeroIcon
-        name="add"
-        style={
           Array [
             Object {
-              "color": "#001f23",
-              "fontSize": 16,
+              "color": "#ffffff",
+              "lineHeight": 24,
+              "textAlign": "center",
+              "textAlignVertical": "center",
             },
-            Array [
-              Object {
-                "color": "#ffffff",
-                "lineHeight": 24,
-                "textAlign": "center",
-                "textAlignVertical": "center",
-              },
-              undefined,
-            ],
-          ]
-        }
-        testID="styled-fab-icon"
-        themeIntent="text"
-        themeSize="xsmall"
-      />
-      <Text
-        allowFontScaling={false}
-        style={
+            undefined,
+          ],
+        ]
+      }
+      testID="styled-fab-icon"
+      themeIntent="text"
+      themeSize="xsmall"
+    />
+    <Text
+      allowFontScaling={false}
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
           Array [
             Object {
-              "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 14,
-              "letterSpacing": 0.42,
-              "lineHeight": 22,
+              "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 16,
+              "lineHeight": 24,
+              "marginHorizontal": 8,
+              "textAlign": "center",
+              "textAlignVertical": "center",
             },
-            Array [
-              Object {
-                "color": "#ffffff",
-                "fontFamily": "BeVietnamPro-SemiBold",
-                "fontSize": 16,
-                "lineHeight": 24,
-                "marginHorizontal": 8,
-                "textAlign": "center",
-                "textAlignVertical": "center",
-              },
-              undefined,
-            ],
-          ]
-        }
-        themeFontSize="medium"
-        themeFontWeight="regular"
-        themeIntent="body"
-        themeTypeface="neutral"
-      >
-        Shout out
-      </Text>
-    </View>
+            undefined,
+          ],
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+      themeTypeface="neutral"
+    >
+      Shout out
+    </Text>
   </View>
 </View>
 `;
@@ -1102,116 +1088,102 @@ exports[`ActionGroup has active true 1`] = `
     </View>
   </View>
   <View
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
     style={
       Array [
-        Object {},
+        Object {
+          "alignItems": "center",
+          "alignSelf": "flex-start",
+          "backgroundColor": "#401960",
+          "borderRadius": 999,
+          "elevation": 2,
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 16,
+          "shadowColor": "#001f23",
+          "shadowOffset": Object {
+            "height": 2,
+            "width": 0,
+          },
+          "shadowOpacity": 0.12,
+          "shadowRadius": 8,
+        },
         Array [
           Object {
-            "shadowColor": "#001f23",
-            "shadowOffset": Object {
-              "height": 2,
-              "width": 0,
-            },
-            "shadowOpacity": 0.12,
-            "shadowRadius": 8,
+            "alignSelf": "flex-end",
+            "marginRight": 24,
+            "marginTop": 24,
           },
-          Array [
-            Object {
-              "alignSelf": "flex-end",
-              "marginRight": 24,
-              "marginTop": 24,
-            },
-            undefined,
-          ],
+          undefined,
         ],
       ]
     }
     testID="fab"
   >
-    <View
-      accessible={true}
-      focusable={false}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+    <HeroIcon
+      name="add"
       style={
         Array [
           Object {
-            "alignItems": "center",
-            "alignSelf": "flex-start",
-            "backgroundColor": "#401960",
-            "borderRadius": 999,
-            "elevation": 2,
-            "flexDirection": "row",
-            "justifyContent": "center",
-            "overflow": "hidden",
-            "paddingHorizontal": 16,
-            "paddingVertical": 16,
+            "color": "#001f23",
+            "fontSize": 16,
           },
-          undefined,
-        ]
-      }
-    >
-      <HeroIcon
-        name="add"
-        style={
           Array [
             Object {
-              "color": "#001f23",
-              "fontSize": 16,
+              "color": "#ffffff",
+              "lineHeight": 24,
+              "textAlign": "center",
+              "textAlignVertical": "center",
             },
-            Array [
-              Object {
-                "color": "#ffffff",
-                "lineHeight": 24,
-                "textAlign": "center",
-                "textAlignVertical": "center",
-              },
-              undefined,
-            ],
-          ]
-        }
-        testID="styled-fab-icon"
-        themeIntent="text"
-        themeSize="xsmall"
-      />
-      <Text
-        allowFontScaling={false}
-        style={
+            undefined,
+          ],
+        ]
+      }
+      testID="styled-fab-icon"
+      themeIntent="text"
+      themeSize="xsmall"
+    />
+    <Text
+      allowFontScaling={false}
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
           Array [
             Object {
-              "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 14,
-              "letterSpacing": 0.42,
-              "lineHeight": 22,
+              "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 16,
+              "lineHeight": 24,
+              "marginHorizontal": 8,
+              "textAlign": "center",
+              "textAlignVertical": "center",
             },
-            Array [
-              Object {
-                "color": "#ffffff",
-                "fontFamily": "BeVietnamPro-SemiBold",
-                "fontSize": 16,
-                "lineHeight": 24,
-                "marginHorizontal": 8,
-                "textAlign": "center",
-                "textAlignVertical": "center",
-              },
-              undefined,
-            ],
-          ]
-        }
-        themeFontSize="medium"
-        themeFontWeight="regular"
-        themeIntent="body"
-        themeTypeface="neutral"
-      >
-        Shout out
-      </Text>
-    </View>
+            undefined,
+          ],
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+      themeTypeface="neutral"
+    >
+      Shout out
+    </Text>
   </View>
 </View>
 `;