@hero-design/rn 7.28.0 → 8.0.0-rc.0

package/es/index.js

@@ -1,5 +1,5 @@
 import * as reactNative from 'react-native';
-import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, Easing, TouchableOpacity, Text as Text$1, Image as Image$1, TouchableWithoutFeedback, Pressable, SafeAreaView, KeyboardAvoidingView, Modal, TextInput as TextInput$1, PanResponder, TouchableHighlight, InteractionManager, useWindowDimensions, Keyboard, SectionList, FlatList, LayoutAnimation, RefreshControl as RefreshControl$1 } from 'react-native';
+import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, Easing, TouchableOpacity, Text as Text$1, Image as Image$1, TouchableWithoutFeedback, Pressable, SafeAreaView, KeyboardAvoidingView, Modal, TextInput as TextInput$1, PanResponder, TouchableHighlight, InteractionManager, useWindowDimensions, SectionList, Keyboard, FlatList, LayoutAnimation, RefreshControl as RefreshControl$1 } from 'react-native';
 import React, { useContext, createContext, createElement, useMemo, forwardRef, useEffect, useCallback, useRef, useState, useLayoutEffect, useImperativeHandle } from 'react';
 import { createIconSet } from 'react-native-vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -76,7 +76,7 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 function _extends$1() {
-  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
+  _extends$1 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1231,6 +1231,7 @@ var globalPalette = {
   disabledOnDefaultGlobalSurface: palette$6.greyLight30,
   darkGlobalSurface: palette$6.maasstrichtBlue,
   onDarkGlobalSurface: palette$6.white,
+  overlayGlobalSurface: palette$6.black,
   // Outlines
   primaryOutline: palette$6.maasstrichtBlue,
   secondaryOutline: palette$6.greyLight75,
@@ -1416,7 +1417,7 @@ var getFonts = function getFonts(_ref) {
   };
 };
 var getFontSizes = function getFontSizes(baseFontSize) {
-  var fontSizes = Array.from(new Array(9));
+  var fontSizes = Array.from(new Array(11));
   fontSizes.forEach(function (_, index) {
     if (index === 0) {
       fontSizes[0] = baseFontSize;
@@ -1426,6 +1427,7 @@ var getFontSizes = function getFontSizes(baseFontSize) {
     return undefined;
   });
   return {
+    '7xlarge': scale(fontSizes[10]),
     xxxxxlarge: scale(fontSizes[8]),
     xxxxlarge: scale(fontSizes[7]),
     xxxlarge: scale(fontSizes[6]),
@@ -1441,6 +1443,7 @@ var getFontSizes = function getFontSizes(baseFontSize) {
 var getLineHeights = function getLineHeights(fontSizes) {
   var additionalSpace = 8;
   return {
+    '7xlarge': fontSizes['7xlarge'] + additionalSpace,
     xxxxxlarge: fontSizes.xxxxxlarge + additionalSpace,
     xxxxlarge: fontSizes.xxxxlarge + additionalSpace,
     xxxlarge: fontSizes.xxxlarge + additionalSpace,
@@ -1706,7 +1709,7 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
   var colors = {
     shadow: theme.colors.primaryOutline,
     background: theme.colors.defaultGlobalSurface,
-    backdrop: theme.colors.darkGlobalSurface
+    backdrop: theme.colors.overlayGlobalSurface
   };
   var sizes = {
     sectionHeight: theme.sizes.xxxxxlarge,
@@ -1716,16 +1719,16 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
     headerWrapperVerticalPadding: theme.space.small,
     headerWrapperHorizontalPadding: theme.space.medium,
     closeIconMargin: theme.space.smallMedium,
-    footerVerticalPadding: theme.space.small,
-    footerHorizontalPadding: theme.space.smallMedium
+    footerVerticalPadding: theme.space.medium,
+    footerHorizontalPadding: theme.space.large
   };
   var shadows = {
     offset: {
       width: 0,
       height: 3
     },
-    opacity: 0.27,
-    radius: 4.65,
+    opacity: 0.4,
+    radius: theme.radii.xlarge,
     elevation: 10
   };
   var radii = {
@@ -1964,15 +1967,16 @@ var getEmptyTheme = function getEmptyTheme(theme) {
   var colors = {
     text: theme.colors.onDefaultGlobalSurface,
     invertedText: theme.colors.onDarkGlobalSurface,
-    subduedText: theme.colors.disabledOnDefaultGlobalSurface
+    subduedText: theme.colors.mutedOnDefaultGlobalSurface,
+    invertedSubduedText: theme.colors.onDarkGlobalSurface
   };
   var fontSizes = {
-    title: theme.fontSizes.xxxxlarge,
-    description: theme.fontSizes.large
+    title: theme.fontSizes.xxxlarge,
+    description: theme.fontSizes.xlarge
   };
   var fonts = {
-    title: theme.fonts.neutral.semiBold,
-    description: theme.fonts.neutral.light
+    title: theme.fonts.playful.semiBold,
+    description: theme.fonts.playful.regular
   };
   return {
     fontSizes: fontSizes,
@@ -1989,7 +1993,7 @@ var getFABTheme = function getFABTheme(theme) {
     icon: theme.colors.onPrimary,
     headerText: theme.colors.onDarkGlobalSurface,
     actionItemBackground: theme.colors.primary,
-    backdropBackground: theme.colors.darkGlobalSurface,
+    backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onDarkGlobalSurface,
     actionItemText: theme.colors.onPrimary
   };
@@ -2310,10 +2314,12 @@ var getSelectTheme = function getSelectTheme(theme) {
     minimumOptionListHeight: theme.space.xxxxlarge * 5,
     sectionSpacing: theme.space.smallMedium,
     optionSpacing: theme.space.xsmall,
-    optionHorizontalMargin: theme.space.smallMedium,
+    optionListHorizontalPadding: theme.space.smallMedium,
     searchBarMarginTopSpacing: theme.space.small,
     searchBarHorizontalSpacing: theme.space.medium,
-    searchBarBottomSpacing: theme.space.small
+    searchBarBottomSpacing: theme.space.small,
+    singleSelectContentPaddingBottom: theme.space.medium,
+    suffixMarginRight: theme.space.smallMedium
   };
   var radii = {
     option: theme.radii.base
@@ -2689,7 +2695,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     large: theme.fontSizes.large,
     xlarge: theme.fontSizes.xlarge,
     xxxlarge: theme.fontSizes.xxxlarge,
-    xxxxxlarge: theme.fontSizes.xxxxxlarge
+    xxxxxlarge: theme.fontSizes.xxxxxlarge,
+    '7xlarge': theme.fontSizes['7xlarge']
   };
   var lineHeights = {
     small: theme.lineHeights.small,
@@ -2697,7 +2704,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     large: theme.lineHeights.large,
     xlarge: theme.lineHeights.xlarge,
     xxxlarge: theme.lineHeights.xxxlarge,
-    xxxxxlarge: theme.lineHeights.xxxxxlarge
+    xxxxxlarge: theme.lineHeights.xxxxxlarge,
+    '7xlarge': theme.lineHeights['7xlarge']
   };
   return {
     colors: colors,
@@ -7044,7 +7052,7 @@ var StyledBackdrop$2 = index$a(AnimatedPressable$1)(function (_ref2) {
   var theme = _ref2.theme;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.bottomSheet.colors.backdrop,
-    opacity: 0.48
+    opacity: 0.4
   });
 });
 var StyledHeaderWrapper = index$a(View)(function (_ref3) {
@@ -7597,7 +7605,7 @@ var Header = function Header(_ref) {
     onPress: onRequestClose,
     intent: "text",
     testID: "bottom-sheet-close-icon",
-    size: "small"
+    size: "xsmall"
   })) : null), showDivider ? /*#__PURE__*/React.createElement(Divider, null) : null);
 };
 
@@ -11167,7 +11175,7 @@ var calculateSnapPointsData = function calculateSnapPointsData(minimumHeight, he
   var uniqSnapPointOffsetValues = Array.from(new Set([].concat(_toConsumableArray(snapPointsOffsetValues), [0])));
   return {
     list: uniqSnapPointOffsetValues,
-    minHeightOffset: Math.max.apply(Math, uniqSnapPointOffsetValues),
+    minHeightOffset: Math.max.apply(Math, _toConsumableArray(uniqSnapPointOffsetValues)),
     maxHeightOffset: 0 // Max height
   };
 };
@@ -11393,7 +11401,7 @@ var StyledDescription = index$a(Text$1)(function (_ref3) {
     fontFamily: theme.__hd__.empty.fonts.description,
     fontSize: theme.__hd__.empty.fontSizes.description,
     textAlign: 'center',
-    color: themeVariant === 'dark' ? theme.__hd__.empty.colors.invertedText : theme.__hd__.empty.colors.subduedText
+    color: themeVariant === 'dark' ? theme.__hd__.empty.colors.invertedSubduedText : theme.__hd__.empty.colors.subduedText
   };
 });
 
@@ -11664,7 +11672,7 @@ var ActionGroup = function ActionGroup(_ref2) {
   });
   var interpolatedBackdropOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
-    outputRange: [0, 0.9]
+    outputRange: [0, 0.4]
   });
   var interpolatedActionGroupOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
@@ -12844,6 +12852,12 @@ var StyledSearchBar = index$a(View)(function (_ref4) {
     paddingBottom: theme.__hd__.select.space.searchBarBottomSpacing
   };
 });
+var StyledSectionList = index$a(SectionList)(function (_ref5) {
+  var theme = _ref5.theme;
+  return {
+    paddingHorizontal: theme.__hd__.select.space.optionListHorizontalPadding
+  };
+});
 
 var Footer = function Footer(_ref) {
   var label = _ref.label,
@@ -12918,7 +12932,7 @@ var useKeyboard = function useKeyboard() {
   };
 };
 
-var StyledOptionList = function StyledOptionList(_ref) {
+var BaseOptionList = function BaseOptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
     onEndReached = _ref.onEndReached,
@@ -12931,7 +12945,7 @@ var StyledOptionList = function StyledOptionList(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     onEndReachedCalled = _useState2[0],
     setOnEndReachedCalled = _useState2[1];
-  return /*#__PURE__*/React.createElement(SectionList, {
+  return /*#__PURE__*/React.createElement(StyledSectionList, {
     ref: sectionListRef,
     style: _objectSpread2({}, onQueryChange ? {
       height: Dimensions.get('screen').height
@@ -12973,18 +12987,25 @@ var Option$2 = function Option(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     selected = _ref.selected,
-    onPress = _ref.onPress;
+    onPress = _ref.onPress,
+    _ref$highlighted = _ref.highlighted,
+    highlighted = _ref$highlighted === void 0 ? false : _ref$highlighted;
   var theme = useTheme();
-  return /*#__PURE__*/React.createElement(List.BasicItem, {
+  var props = {
     selected: selected,
     disabled: disabled,
     onPress: onPress,
     title: text,
-    suffix: selected ? 'checkmark' : undefined,
-    style: {
-      marginHorizontal: theme.__hd__.select.space.optionHorizontalMargin
-    }
-  });
+    suffix: selected === true ? /*#__PURE__*/React.createElement(Icon, {
+      icon: "checkmark",
+      intent: disabled ? 'disabled-text' : 'primary',
+      size: "small",
+      style: {
+        marginRight: theme.__hd__.select.space.suffixMarginRight
+      }
+    }) : undefined
+  };
+  return highlighted === true ? /*#__PURE__*/React.createElement(List.Item, props) : /*#__PURE__*/React.createElement(List.BasicItem, props);
 };
 
 var OptionList$1 = function OptionList(_ref) {
@@ -13016,10 +13037,11 @@ var OptionList$1 = function OptionList(_ref) {
       selected: selected,
       text: item.text,
       disabled: item.disabled,
-      onPress: onItemPress
+      onPress: onItemPress,
+      highlighted: item.highlighted
     });
   };
-  return /*#__PURE__*/React.createElement(StyledOptionList, {
+  return /*#__PURE__*/React.createElement(BaseOptionList, {
     keyExtractor: keyExtractor,
     loading: loading,
     onEndReached: onEndReached,
@@ -13074,6 +13096,9 @@ function MultiSelect(_ref) {
   }).map(function (opt) {
     return opt.text;
   }).join(', ');
+  useDeprecation("Select's onDimiss is deprecated and will be removed in the next major release. Please use onDismiss instead.", onDimiss !== undefined);
+  useDeprecation("Select's numberOfLines is deprecated and will be removed in the next major release. Please use inputProps.numberOfLines instead.", numberOfLines !== undefined);
+  useDeprecation("Select's inputProps.required is deprecated and will be removed in the next major release. Please use Select's required prop instead.", (inputProps === null || inputProps === void 0 ? void 0 : inputProps.required) !== undefined);
   useEffect(function () {
     setSelectingValue(value);
   }, [open]);
@@ -13158,19 +13183,25 @@ var Option$1 = function Option(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     selected = _ref.selected,
-    onPress = _ref.onPress;
-  var theme = useTheme();
-  return /*#__PURE__*/React.createElement(List.BasicItem, {
+    onPress = _ref.onPress,
+    _ref$highlighted = _ref.highlighted,
+    highlighted = _ref$highlighted === void 0 ? false : _ref$highlighted;
+  var props = {
     selected: selected,
     disabled: disabled,
     onPress: onPress,
-    title: text,
-    style: {
-      marginHorizontal: theme.__hd__.select.space.optionHorizontalMargin
-    }
-  });
+    title: text
+  };
+  return highlighted === true ? /*#__PURE__*/React.createElement(List.Item, props) : /*#__PURE__*/React.createElement(List.BasicItem, props);
 };
 
+var StyledOptionList = index$a(BaseOptionList)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    paddingBottom: theme.__hd__.select.space.singleSelectContentPaddingBottom
+  };
+});
+
 var OptionList = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -13198,7 +13229,8 @@ var OptionList = function OptionList(_ref) {
       selected: selected,
       text: item.text,
       disabled: item.disabled,
-      onPress: onItemPress
+      onPress: onItemPress,
+      highlighted: item.highlighted
     });
   };
   return /*#__PURE__*/React.createElement(StyledOptionList, {
@@ -13250,6 +13282,9 @@ var SingleSelect = function SingleSelect(_ref) {
   var displayedValue = (_flatOptions$find = flatOptions.find(function (opt) {
     return value === opt.value;
   })) === null || _flatOptions$find === void 0 ? void 0 : _flatOptions$find.text;
+  useDeprecation("Select's onDimiss is deprecated and will be removed in the next major release. Please use onDismiss instead.", onDimiss !== undefined);
+  useDeprecation("Select's numberOfLines is deprecated and will be removed in the next major release. Please use inputProps.numberOfLines instead.", numberOfLines !== undefined);
+  useDeprecation("Select's inputProps.required is deprecated and will be removed in the next major release. Please use Select's required prop instead.", (inputProps === null || inputProps === void 0 ? void 0 : inputProps.required) !== undefined);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
     pointerEvents: !editable || disabled || inputProps !== null && inputProps !== void 0 && inputProps.loading ? 'none' : 'auto'
   }, /*#__PURE__*/React.createElement(TouchableOpacity, {
@@ -13665,7 +13700,9 @@ var getTabItem$1 = function getTabItem(_ref) {
       icon: item,
       testID: "hero-icon-".concat(item),
       size: "small",
-      intent: active ? 'info' : 'text'
+      style: {
+        color: color
+      }
     });
   }
   if (typeof item === 'string') {
@@ -14014,7 +14051,7 @@ var Tag = function Tag(_ref) {
     style = _ref.style,
     testID = _ref.testID,
     nativeProps = _objectWithoutProperties(_ref, _excluded);
-  useDeprecation("Tag's default intent is deprecated and will be removed in the next major release.\nPlease use other intents instead.", intent !== 'default');
+  useDeprecation("Tag's default intent is deprecated and will be removed in the next major release.\nPlease use primary intent instead.", intent !== 'default');
   return /*#__PURE__*/React.createElement(StyledView, _extends$1({}, nativeProps, {
     themeIntent: intent,
     themeVariant: variant,
@@ -14370,7 +14407,7 @@ var ToastContainer = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var _ref2$displayType = _ref2.displayType,
     displayType = _ref2$displayType === void 0 ? 'single' : _ref2$displayType,
     _ref2$position = _ref2.position,
-    position = _ref2$position === void 0 ? 'top' : _ref2$position,
+    position = _ref2$position === void 0 ? 'bottom' : _ref2$position,
     style = _ref2.style;
   var theme = useTheme$1();
   var _useState = useState([]),
@@ -14433,8 +14470,9 @@ var ToastProvider = function ToastProvider(_ref) {
   var children = _ref.children,
     _ref$displayType = _ref.displayType,
     displayType = _ref$displayType === void 0 ? 'single' : _ref$displayType,
-    _ref$position = _ref.position,
-    position = _ref$position === void 0 ? 'top' : _ref$position;
+    _position = _ref.position;
+  var position = _position === undefined ? 'bottom' : _position;
+  useDeprecation("Toast's position prop is deprecated and will be removed in the next major release.\nPlease remove it.", _position !== undefined);
   var toastRef = useRef(null);
   // @ts-expect-error: TODO: @tungv Fix this type error
   var _useState = useState(null),
@@ -25620,7 +25658,8 @@ function checkDCE() {
                       voids: a
                     }));
                     if (v.length > 0) if ("continue" === function () {
-                      var r = v[0],
+                      var _v = _slicedToArray(v, 1),
+                        r = _v[0],
                         n = v[v.length - 1],
                         _r4 = _slicedToArray(r, 2),
                         o = _r4[1],