@hero-design/rn 8.36.2 → 8.37.0

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 26.5s
+created lib/index.js, es/index.js in 26.2s
 $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -1669,10 +1669,10 @@ var getShadows = function getShadows(systemPalette) {
         width: 0,
         height: 2
       },
-      shadowColor: systemPalette.secondaryOutline,
-      shadowOpacity: 1,
+      shadowColor: systemPalette.primaryOutline,
+      shadowOpacity: 0.12,
       shadowRadius: 4,
-      elevation: 10
+      elevation: 3
     }
   };
 };
@@ -2095,17 +2095,14 @@ var getCardCarouselTheme = function getCardCarouselTheme(theme) {
     contentContainerPaddingHorizontal: theme.space.large
   };
   var colors = {
-    shadow: theme.colors.primaryOutline,
     carouselItemBackground: theme.colors.defaultSurface
   };
   var shadows = {
-    offset: {
-      width: 0,
-      height: 2
-    },
-    opacity: 0.12,
-    radius: theme.radii.medium,
-    elevation: 4
+    color: theme.shadows["default"].shadowColor,
+    offset: theme.shadows["default"].shadowOffset,
+    opacity: theme.shadows["default"].shadowOpacity,
+    radius: theme.shadows["default"].shadowRadius,
+    elevation: theme.shadows["default"].elevation
   };
   var radii = {
     card: theme.radii.medium
@@ -2307,13 +2304,11 @@ var getFABTheme = function getFABTheme(theme) {
     buttonPressedBackground: theme.colors.pressedSurface,
     buttonActiveBackground: theme.colors.pressedSurface,
     icon: theme.colors.onPrimary,
-    headerText: theme.colors.onDefaultGlobalSurface,
     actionItemBackground: theme.colors.secondary,
     actionItemPressedBackground: theme.colors.pressedSurface,
     backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onPrimary,
-    actionItemText: theme.colors.onPrimary,
-    shadow: theme.colors.primaryOutline
+    actionItemText: theme.colors.onPrimary
   };
   var sizes = {
     width: theme.sizes.xxxxxlarge,
@@ -2322,29 +2317,24 @@ var getFABTheme = function getFABTheme(theme) {
     iconContainerHeight: theme.sizes.large
   };
   var fonts = {
-    header: theme.fonts.neutral.semiBold,
     actionItemText: theme.fonts.neutral.regular,
     title: theme.fonts.neutral.semiBold
   };
   var fontSizes = {
-    header: theme.fontSizes.xxxlarge,
     actionItemText: theme.fontSizes.large,
     title: theme.fontSizes.large
   };
   var lineHeights = {
-    header: theme.lineHeights.xxxlarge,
     actionItemText: theme.lineHeights.medium,
     title: theme.lineHeights.large,
     icon: theme.lineHeights.large
   };
   var shadows = {
-    offset: {
-      width: 0,
-      height: 2
-    },
-    opacity: 0.12,
-    radius: theme.radii.medium,
-    elevation: 2
+    offset: theme.shadows["default"].shadowOffset,
+    opacity: theme.shadows["default"].shadowOpacity,
+    radius: theme.shadows["default"].shadowRadius,
+    elevation: theme.shadows["default"].elevation,
+    color: theme.shadows["default"].shadowColor
   };
   var space = {
     actionItemPadding: theme.space.smallMedium,
@@ -2353,8 +2343,6 @@ var getFABTheme = function getFABTheme(theme) {
     actionItemTextPaddingLeft: theme.space.xsmall,
     buttonMarginTop: theme.space.large,
     buttonMarginRight: theme.space.large,
-    headerTextMarginRight: theme.space.large,
-    headerTextMarginBottom: theme.space.large,
     containerPadding: theme.space.large - theme.space.xsmall,
     titleMarginHorizontal: theme.space.small
   };
@@ -2429,20 +2417,23 @@ var getListTheme = function getListTheme(theme) {
   var radii = {
     item: theme.radii.medium,
     basicItem: theme.radii.base,
-    cardShadow: theme.radii.base,
     leadingStatus: theme.radii.rounded
   };
   var shadows = {
-    cardOffset: theme.shadows["default"].shadowOffset,
-    cardElevation: theme.shadows["default"].elevation
+    card: {
+      offset: theme.shadows["default"].shadowOffset,
+      elevation: theme.shadows["default"].elevation,
+      color: theme.shadows["default"].shadowColor,
+      radius: theme.shadows["default"].shadowRadius,
+      opacity: theme.shadows["default"].shadowOpacity
+    }
   };
   var widths = {
     leadingStatus: 8
   };
   var opacity = {
     disabled: 0.38,
-    enabled: 1,
-    cardShadow: theme.shadows["default"].shadowOpacity
+    enabled: 1
   };
   return {
     colors: colors,
@@ -3046,8 +3037,7 @@ var getToastTheme = function getToastTheme(theme) {
     info: theme.colors.info,
     notification: theme.colors.defaultGlobalSurface,
     snackbar: theme.colors.darkGlobalSurface,
-    divider: theme.colors.secondaryOutline,
-    shadow: theme.colors.primaryOutline
+    divider: theme.colors.secondaryOutline
   };
   var sizes = {
     height: theme.sizes.xxxlarge
@@ -3067,13 +3057,11 @@ var getToastTheme = function getToastTheme(theme) {
     base: theme.borderWidths.base
   };
   var shadows = {
-    offset: {
-      width: 0,
-      height: 2
-    },
-    opacity: 0.12,
-    radius: 4,
-    elevation: 4
+    offset: theme.shadows["default"].shadowOffset,
+    opacity: theme.shadows["default"].shadowOpacity,
+    radius: theme.shadows["default"].shadowRadius,
+    elevation: theme.shadows["default"].elevation,
+    color: theme.shadows["default"].shadowColor
   };
   return {
     colors: colors,
@@ -7850,7 +7838,7 @@ var Divider = function Divider(_ref) {
   }));
 };
 
-var AnimatedPressable$1 = Animated.createAnimatedComponent(Pressable);
+var AnimatedPressable$2 = Animated.createAnimatedComponent(Pressable);
 var AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);
 var StyledWrapper$9 = index$c(View)(_objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
   flexDirection: 'column-reverse'
@@ -7876,7 +7864,7 @@ var StyledBottomSheet = index$c(AnimatedSafeAreaView)(function (_ref) {
     maxHeight: '94%'
   };
 });
-var StyledBackdrop$2 = index$c(AnimatedPressable$1)(function (_ref2) {
+var StyledBackdrop$2 = index$c(AnimatedPressable$2)(function (_ref2) {
   var theme = _ref2.theme;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.bottomSheet.colors.backdrop,
@@ -11705,7 +11693,7 @@ var StyledShadow = index$c(View)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     borderRadius: theme.__hd__.cardCarousel.radii.card,
-    shadowColor: theme.__hd__.cardCarousel.colors.shadow,
+    shadowColor: theme.__hd__.cardCarousel.shadows.color,
     shadowOffset: theme.__hd__.cardCarousel.shadows.offset,
     shadowRadius: theme.__hd__.cardCarousel.shadows.radius,
     shadowOpacity: theme.__hd__.cardCarousel.shadows.opacity,
@@ -12006,17 +11994,14 @@ var index$a = Object.assign(Carousel, {
 
 var StyledWrapper$7 = index$c(TouchableOpacity)(function (_ref) {
   var theme = _ref.theme,
-    themeWithBorder = _ref.themeWithBorder,
     themeState = _ref.themeState;
-  var borderStyle = {
+  return {
+    flexDirection: 'row',
     borderRadius: theme.__hd__.checkbox.radii.wrapper,
     borderWidth: theme.__hd__.checkbox.borderWidths.wrapper,
     padding: theme.__hd__.checkbox.space.wrapperPadding,
     borderColor: theme.__hd__.checkbox.colors.borders[themeState]
   };
-  return _objectSpread2({
-    flexDirection: 'row'
-  }, themeWithBorder && borderStyle);
 });
 var StyledDescription$1 = index$c(Typography.Body)(function (_ref2) {
   var theme = _ref2.theme;
@@ -12076,6 +12061,7 @@ var Checkbox = function Checkbox(_ref2) {
     testID = _ref2.testID,
     _ref2$readonly = _ref2.readonly,
     readonly = _ref2$readonly === void 0 ? false : _ref2$readonly;
+  useDeprecation("Checkbox's withBorder prop will be removed in the next major release, all checkboxes will have border by default. Please remove it.", withBorder === true);
   var themeState = getThemeState({
     disabled: disabled,
     readonly: readonly
@@ -12083,7 +12069,6 @@ var Checkbox = function Checkbox(_ref2) {
   return /*#__PURE__*/React.createElement(StyledWrapper$7, {
     onPress: onPress,
     disabled: disabled || readonly,
-    themeWithBorder: withBorder,
     themeState: themeState,
     style: style,
     testID: testID
@@ -12770,7 +12755,7 @@ var DatePicker = function DatePicker(_ref) {
   return /*#__PURE__*/React.createElement(DatePickerAndroid, props);
 };
 
-var AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+var AnimatedPressable$1 = Animated.createAnimatedComponent(Pressable);
 var StyledContainer$3 = index$c(View)(function (_ref) {
   var theme = _ref.theme,
     enableShadow = _ref.enableShadow;
@@ -12798,7 +12783,7 @@ var StyledDragableContainer = index$c(View)(function (_ref2) {
     flexDirection: 'column-reverse'
   });
 });
-var StyledBackdrop$1 = index$c(AnimatedPressable)(function (_ref3) {
+var StyledBackdrop$1 = index$c(AnimatedPressable$1)(function (_ref3) {
   var theme = _ref3.theme;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.drawer.colors.backdrop
@@ -13006,7 +12991,7 @@ var Drawer = function Drawer(_ref) {
     onDismiss = _ref.onDismiss,
     testID = _ref.testID;
   var animatedValue = useRef(new Animated.Value(visible ? 1 : 0)).current;
-  var _useState = useState(0),
+  var _useState = useState(Dimensions.get('window').height),
     _useState2 = _slicedToArray(_useState, 2),
     height = _useState2[0],
     setHeight = _useState2[1];
@@ -13345,7 +13330,7 @@ var StyledFAB$1 = index$c(TouchableHighlight)(function (_ref) {
     padding: theme.__hd__.fab.space.containerPadding,
     flexDirection: 'row',
     elevation: theme.__hd__.fab.shadows.elevation,
-    shadowColor: theme.__hd__.fab.colors.shadow,
+    shadowColor: theme.__hd__.fab.shadows.color,
     shadowOffset: theme.__hd__.fab.shadows.offset,
     shadowRadius: theme.__hd__.fab.shadows.radius,
     shadowOpacity: theme.__hd__.fab.shadows.opacity
@@ -13624,7 +13609,8 @@ var StyledFAB = index$c(FAB)(function (_ref) {
     alignSelf: 'flex-end'
   };
 });
-var StyledBackdrop = index$c(Animated.View)(function (_ref2) {
+var AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+var StyledBackdrop = index$c(AnimatedPressable)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     position: 'absolute',
@@ -13636,15 +13622,6 @@ var StyledBackdrop = index$c(Animated.View)(function (_ref2) {
     backgroundColor: theme.__hd__.fab.colors.backdropBackground
   };
 });
-var StyledHeaderText = index$c(Typography.Title)(function (_ref3) {
-  var theme = _ref3.theme;
-  return {
-    color: theme.__hd__.fab.colors.headerText,
-    marginRight: theme.__hd__.fab.space.headerTextMarginRight,
-    marginBottom: theme.__hd__.fab.space.headerTextMarginBottom,
-    textAlign: 'right'
-  };
-});
 
 var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var headerTitle = _ref.headerTitle,
@@ -13654,15 +13631,12 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     items = _ref.items,
     testID = _ref.testID,
     fabTitle = _ref.fabTitle,
+    onBackdropPress = _ref.onBackdropPress,
     _ref$fabIcon = _ref.fabIcon,
     fabIcon = _ref$fabIcon === void 0 ? 'add' : _ref$fabIcon;
+  useDeprecation("FAB.ActionGroup's headerTitle prop will be removed in the next major release. Please remove it.", headerTitle !== undefined);
   var fabRef = useRef(null);
   var tranlateXAnimation = useRef(new Animated.Value(active ? 1 : 0));
-  var titleTranslateYValue = React.useRef(new Animated.Value(0));
-  var titleTranslateY = titleTranslateYValue.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: [50, 0]
-  });
   React.useImperativeHandle(ref, function () {
     return {
       showFAB: function showFAB() {
@@ -13680,13 +13654,10 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     };
   }, [fabRef]);
   React.useEffect(function () {
-    Animated.parallel([Animated.spring(tranlateXAnimation.current, {
-      toValue: active ? 1 : 0,
-      useNativeDriver: Platform.OS !== 'web'
-    }), Animated.spring(titleTranslateYValue.current, {
+    Animated.spring(tranlateXAnimation.current, {
       toValue: active ? 1 : 0,
       useNativeDriver: Platform.OS !== 'web'
-    })]).start();
+    }).start();
   }, [active]);
   var interpolatedActionGroupOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
@@ -13722,22 +13693,15 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     testID: testID,
     style: [style]
   }, /*#__PURE__*/React.createElement(StyledBackdrop, {
-    testID: "back-drop"
+    testID: "back-drop",
+    onPress: onBackdropPress
   }), /*#__PURE__*/React.createElement(StyledActionGroupContainer, {
     testID: "action-group",
+    pointerEvents: "box-none",
     style: {
       opacity: interpolatedActionGroupOpacityAnimation
     }
-  }, !!headerTitle && /*#__PURE__*/React.createElement(Animated.View, {
-    style: {
-      transform: [{
-        translateY: titleTranslateY
-      }]
-    }
-  }, /*#__PURE__*/React.createElement(StyledHeaderText, {
-    testID: "header-text",
-    level: "h4"
-  }, headerTitle)), /*#__PURE__*/React.createElement(Box, {
+  }, /*#__PURE__*/React.createElement(Box, {
     style: [style, {
       paddingBottom: 0
     }]
@@ -13782,11 +13746,11 @@ var StyledListItemContainer$1 = index$c(TouchableHighlight)(function (_ref) {
     case 'card':
       return _objectSpread2(_objectSpread2({}, sharedStyles), {}, {
         alignItems: 'center',
-        shadowColor: theme.colors.secondaryOutline,
-        shadowRadius: theme.__hd__.list.radii.cardShadow,
-        shadowOffset: theme.__hd__.list.shadows.cardOffset,
-        shadowOpacity: theme.__hd__.list.opacity.cardShadow,
-        elevation: theme.__hd__.list.shadows.cardElevation
+        shadowColor: theme.__hd__.list.shadows.card.color,
+        shadowRadius: theme.__hd__.list.shadows.card.radius,
+        shadowOffset: theme.__hd__.list.shadows.card.offset,
+        shadowOpacity: theme.__hd__.list.shadows.card.opacity,
+        elevation: theme.__hd__.list.shadows.card.elevation
       });
     default:
       return sharedStyles;
@@ -16886,7 +16850,7 @@ var Container = index$c(Animated.View)(function (_ref2) {
     backgroundColor: theme.__hd__.toast.colors[themeIntent],
     minHeight: theme.__hd__.toast.sizes.height,
     flexDirection: 'row',
-    shadowColor: theme.__hd__.toast.colors.shadow,
+    shadowColor: theme.__hd__.toast.shadows.color,
     shadowOffset: theme.__hd__.toast.shadows.offset,
     shadowRadius: theme.__hd__.toast.shadows.radius,
     shadowOpacity: theme.__hd__.toast.shadows.opacity,