@hero-design/rn 7.28.0 → 7.29.0

package/.eslintrc.js

@@ -4,7 +4,8 @@ module.exports = {
     tsconfigRootDir: __dirname,
     project: ['./tsconfig.json'],
   },
-  extends: ['hd'],
+  extends: ['hd', 'plugin:@hero-design/recommendedRn'],
+  plugins: ['@hero-design'],
   rules: {
     'no-underscore-dangle': [2, { allow: ['__hd__'] }],
   },

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output 8ade5cdfeb1cbdab
-@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 32.3s
-@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json
+@hero-design/rn:build: cache hit, replaying output d9bdf9ebe573456b
+@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 27s
+@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -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,17 +1709,16 @@ 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,
     closeIcon: theme.sizes.xxxlarge
   };
   var space = {
     headerWrapperVerticalPadding: theme.space.small,
     headerWrapperHorizontalPadding: theme.space.medium,
     closeIconMargin: theme.space.smallMedium,
-    footerVerticalPadding: theme.space.small,
+    footerVerticalPadding: theme.space.xxsmall,
     footerHorizontalPadding: theme.space.smallMedium
   };
   var shadows = {
@@ -1724,8 +1726,8 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
       width: 0,
       height: 3
     },
-    opacity: 0.27,
-    radius: 4.65,
+    opacity: 0.4,
+    radius: theme.radii.xlarge,
     elevation: 10
   };
   var radii = {
@@ -1964,15 +1966,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 +1992,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
   };
@@ -2303,24 +2306,22 @@ var getSectionHeadingTheme = function getSectionHeadingTheme(theme) {
 };
 
 var getSelectTheme = function getSelectTheme(theme) {
-  var colors = {
-    footerText: theme.colors.secondary
-  };
   var space = {
     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
   };
   return {
     space: space,
-    colors: colors,
     radii: radii
   };
 };
@@ -2689,7 +2690,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 +2699,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 +7047,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) {
@@ -7064,7 +7067,6 @@ var StyledFooter = index$a(View)(function (_ref4) {
   return {
     paddingHorizontal: theme.__hd__.bottomSheet.space.footerHorizontalPadding,
     paddingVertical: theme.__hd__.bottomSheet.space.footerVerticalPadding,
-    minHeight: theme.__hd__.bottomSheet.sizes.sectionHeight,
     alignItems: 'center',
     justifyContent: 'flex-end',
     flexDirection: 'row'
@@ -7597,7 +7599,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);
 };
 
@@ -10795,6 +10797,9 @@ var getVariant$1 = function getVariant(_ref) {
   }
   return 'default';
 };
+// Fix issue: Placeholder is not shown on iOS when multiline is true
+// https://github.com/callstack/react-native-paper/pull/3331
+var EMPTY_PLACEHOLDER_VALUE = ' ';
 var TextInput = function TextInput(_ref2) {
   var _ref3;
   var label = _ref2.label,
@@ -10880,7 +10885,7 @@ var TextInput = function TextInput(_ref2) {
       (_nativeProps$onChange = nativeProps.onChangeText) === null || _nativeProps$onChange === void 0 ? void 0 : _nativeProps$onChange.call(nativeProps, text);
     },
     defaultValue: defaultValue,
-    placeholder: isFocused || label === undefined ? nativeProps.placeholder : undefined
+    placeholder: isFocused || label === undefined ? nativeProps.placeholder : EMPTY_PLACEHOLDER_VALUE
   });
   return /*#__PURE__*/React.createElement(StyledContainer$3, {
     style: style,
@@ -11042,18 +11047,16 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
       return setOpen(false);
     },
     header: label,
-    footer: /*#__PURE__*/React.createElement(TouchableOpacity, {
+    footer: /*#__PURE__*/React.createElement(CompoundButton, {
+      variant: "text",
+      text: confirmLabel,
       onPress: function onPress() {
         if (selectingDate) {
           onChange(selectingDate);
         }
         setOpen(false);
       }
-    }, /*#__PURE__*/React.createElement(Typography.Text, {
-      fontSize: "large",
-      fontWeight: "semi-bold",
-      intent: "primary"
-    }, confirmLabel))
+    })
   }, /*#__PURE__*/React.createElement(StyledPickerWrapper$1, null, /*#__PURE__*/React.createElement(DateTimePicker, {
     testID: "datePickerIOS",
     value: selectingDate,
@@ -11393,7 +11396,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 +11667,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],
@@ -12818,42 +12821,14 @@ var SectionHeading = function SectionHeading(_ref) {
   }, text)), rightChildren);
 };
 
-var SectionSpacer = index$a(View)(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    marginTop: theme.__hd__.select.space.sectionSpacing
-  };
-});
-var OptionSpacer = index$a(View)(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    marginTop: theme.__hd__.select.space.optionSpacing
-  };
-});
-var FooterText = index$a(Typography.Text)(function (_ref3) {
-  var theme = _ref3.theme;
-  return {
-    color: theme.__hd__.select.colors.footerText
-  };
-});
-var StyledSearchBar = index$a(View)(function (_ref4) {
-  var theme = _ref4.theme;
-  return {
-    marginTop: theme.__hd__.select.space.searchBarMarginTopSpacing,
-    paddingHorizontal: theme.__hd__.select.space.searchBarHorizontalSpacing,
-    paddingBottom: theme.__hd__.select.space.searchBarBottomSpacing
-  };
-});
-
 var Footer = function Footer(_ref) {
   var label = _ref.label,
     onPress = _ref.onPress;
-  return /*#__PURE__*/React.createElement(TouchableOpacity, {
+  return /*#__PURE__*/React.createElement(CompoundButton, {
+    variant: "text",
+    text: label,
     onPress: onPress
-  }, /*#__PURE__*/React.createElement(FooterText, {
-    fontSize: "large",
-    fontWeight: "semi-bold"
-  }, label));
+  });
 };
 
 var isSections = function isSections(options) {
@@ -12918,7 +12893,34 @@ var useKeyboard = function useKeyboard() {
   };
 };
 
-var StyledOptionList = function StyledOptionList(_ref) {
+var SectionSpacer = index$a(View)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    marginTop: theme.__hd__.select.space.sectionSpacing
+  };
+});
+var OptionSpacer = index$a(View)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    marginTop: theme.__hd__.select.space.optionSpacing
+  };
+});
+var StyledSearchBar = index$a(View)(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    marginTop: theme.__hd__.select.space.searchBarMarginTopSpacing,
+    paddingHorizontal: theme.__hd__.select.space.searchBarHorizontalSpacing,
+    paddingBottom: theme.__hd__.select.space.searchBarBottomSpacing
+  };
+});
+var StyledSectionList = index$a(SectionList)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    paddingHorizontal: theme.__hd__.select.space.optionListHorizontalPadding
+  };
+});
+
+var BaseOptionList = function BaseOptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
     onEndReached = _ref.onEndReached,
@@ -12931,7 +12933,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 +12975,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 +13025,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 +13084,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 +13171,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 +13217,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 +13270,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 +13688,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 +14039,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,
@@ -14138,18 +14163,16 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
       return setOpen(false);
     },
     header: label,
-    footer: /*#__PURE__*/React.createElement(TouchableOpacity, {
+    footer: /*#__PURE__*/React.createElement(CompoundButton, {
+      variant: "text",
+      text: confirmLabel,
       onPress: function onPress() {
         if (selectingDate) {
           onChange(selectingDate);
         }
         setOpen(false);
       }
-    }, /*#__PURE__*/React.createElement(Typography.Text, {
-      fontSize: "large",
-      fontWeight: "semi-bold",
-      intent: "primary"
-    }, confirmLabel))
+    })
   }, /*#__PURE__*/React.createElement(StyledPickerWrapper, null, /*#__PURE__*/React.createElement(DateTimePicker, {
     testID: "timePickerIOS",
     value: selectingDate,
@@ -14370,7 +14393,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 +14456,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),