@hero-design/rn 8.3.0 → 8.3.2

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output eb885563f0cea779
-@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 25.7s
-@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json
+@hero-design/rn:build: cache hit, replaying output 5e986a2b883ef3bb
+@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 28.6s
+@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

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, ScrollView, Modal, useWindowDimensions, FlatList, TextInput as TextInput$2, PanResponder, TouchableHighlight, InteractionManager, Keyboard, SectionList, 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, ScrollView, Modal, useWindowDimensions, FlatList, TextInput as TextInput$1, PanResponder, TouchableHighlight, InteractionManager, Keyboard, SectionList, 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';
@@ -1376,6 +1376,7 @@ var getFontSizes = function getFontSizes(baseFontSize) {
   });
   return {
     '7xlarge': scale(fontSizes[10]),
+    '6xlarge': scale(fontSizes[9]),
     xxxxxlarge: scale(fontSizes[8]),
     xxxxlarge: scale(fontSizes[7]),
     xxxlarge: scale(fontSizes[6]),
@@ -1392,6 +1393,7 @@ var getLineHeights = function getLineHeights(fontSizes) {
   var additionalSpace = 8;
   return {
     '7xlarge': fontSizes['7xlarge'] + additionalSpace,
+    '6xlarge': fontSizes['6xlarge'] + additionalSpace,
     xxxxxlarge: fontSizes.xxxxxlarge + additionalSpace,
     xxxxlarge: fontSizes.xxxxlarge + additionalSpace,
     xxxlarge: fontSizes.xxxlarge + additionalSpace,
@@ -1804,7 +1806,10 @@ var getCarouselTheme = function getCarouselTheme(theme) {
   var space = {
     headingMarginTop: theme.space.small,
     headingMarginBottom: theme.space.medium,
-    paginatorMarginHorizontal: theme.space.small
+    paginatorMarginHorizontal: theme.space.small,
+    footerPaddingHorizontal: theme.space.large,
+    footerPaddingVertical: theme.space.medium,
+    footerMarginBottom: theme.space.large
   };
   var sizes = {
     indicatorWidth: theme.sizes.medium,
@@ -1815,13 +1820,13 @@ var getCarouselTheme = function getCarouselTheme(theme) {
     paginatorBorderRadius: theme.radii.rounded
   };
   var fontSizes = {
-    heading: theme.fontSizes.xxxxxlarge
+    heading: theme.fontSizes['6xlarge']
   };
   var fonts = {
     heading: theme.fonts.playful.semiBold
   };
   var lineHeights = {
-    heading: theme.lineHeights.xxxlarge
+    heading: theme.lineHeights['6xlarge']
   };
   return {
     colors: colors,
@@ -2669,6 +2674,7 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     xlarge: theme.fontSizes.xlarge,
     xxxlarge: theme.fontSizes.xxxlarge,
     xxxxxlarge: theme.fontSizes.xxxxxlarge,
+    '6xlarge': theme.fontSizes['6xlarge'],
     '7xlarge': theme.fontSizes['7xlarge']
   };
   var lineHeights = {
@@ -2678,6 +2684,7 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     xlarge: theme.lineHeights.xlarge,
     xxxlarge: theme.lineHeights.xxxlarge,
     xxxxxlarge: theme.lineHeights.xxxxxlarge,
+    '6xlarge': theme.lineHeights['6xlarge'],
     '7xlarge': theme.lineHeights['7xlarge']
   };
   return {
@@ -10489,7 +10496,8 @@ var Calendar = function Calendar(_ref) {
 var StyledCarouselPaginator = index$a(View)(function () {
   return {
     flexDirection: 'row',
-    alignItems: 'center'
+    alignItems: 'center',
+    marginStart: 'auto'
   };
 });
 var StyledCarouselPaginatorAnimatedView = index$a(Animated.View)(function (_ref) {
@@ -10510,7 +10518,7 @@ var CarouselPaginator = function CarouselPaginator(_ref) {
     width = _useWindowDimensions.width;
   var theme = useTheme();
   return /*#__PURE__*/React.createElement(StyledCarouselPaginator, null, new Array(numberOfSlides).fill('').map(function (_, index) {
-    var inputRange = [(index - 1) * width, index * width, (index + 1) * width];
+    var inputRange = [(index - 1) * width - 1, index * width - 1, (index + 1) * width];
     var indicatorWidth = scrollX.interpolate({
       inputRange: inputRange,
       outputRange: [theme.space.small, theme.space.large, theme.space.small],
@@ -10522,7 +10530,6 @@ var CarouselPaginator = function CarouselPaginator(_ref) {
       extrapolate: 'clamp'
     });
     return /*#__PURE__*/React.createElement(StyledCarouselPaginatorAnimatedView, {
-      indicatorWidth: indicatorWidth,
       style: [{
         width: indicatorWidth,
         opacity: opacity
@@ -10553,10 +10560,9 @@ var Image = function Image(_ref) {
   }, imageNativeProps));
 };
 
-var StyledCarousel = index$a(View)(function (_ref) {
+var StyledBackDrop = index$a(View)(function (_ref) {
   var themeSlideBackground = _ref.themeSlideBackground;
   return {
-    zIndex: 99999,
     position: 'absolute',
     backgroundColor: themeSlideBackground,
     top: 0,
@@ -10567,8 +10573,8 @@ var StyledCarousel = index$a(View)(function (_ref) {
 });
 var StyledCarouselView = index$a(View)(function () {
   return {
-    justifyContent: 'space-between',
-    height: '100%'
+    flexGrow: 2,
+    justifyContent: 'space-between'
   };
 });
 var StyledCarouselHeading = index$a(Typography.Text)(function (_ref2) {
@@ -10594,9 +10600,14 @@ var StyledCarouselContentWrapper = index$a(Box)(function (_ref3) {
     width: width
   };
 });
-var StyledCarouselFooterWrapper = index$a(Box)(function () {
+var StyledCarouselFooterWrapper = index$a(View)(function (_ref4) {
+  var theme = _ref4.theme;
   return {
-    width: '100%'
+    paddingHorizontal: theme.__hd__.carousel.space.footerPaddingHorizontal,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: theme.__hd__.carousel.space.footerPaddingVertical,
+    marginBottom: theme.__hd__.carousel.space.footerMarginBottom
   };
 });
 
@@ -10605,8 +10616,7 @@ var CarouselItem = function CarouselItem(_ref) {
     image = _ref.image,
     content = _ref.content,
     heading = _ref.heading,
-    body = _ref.body,
-    minHeight = _ref.minHeight;
+    body = _ref.body;
   return /*#__PURE__*/React.createElement(Box, {
     style: {
       width: width
@@ -10618,67 +10628,71 @@ var CarouselItem = function CarouselItem(_ref) {
   }), /*#__PURE__*/React.createElement(StyledCarouselContentWrapper, {
     paddingHorizontal: "large",
     marginTop: "large",
-    width: width,
-    style: {
-      minHeight: minHeight
-    }
-  }, content, /*#__PURE__*/React.createElement(StyledCarouselHeading, null, heading), body ? /*#__PURE__*/React.createElement(Typography.Text, {
-    fontSize: "large"
-  }, body) : null));
+    width: width
+  }, content, /*#__PURE__*/React.createElement(StyledCarouselHeading, null, heading), body ? /*#__PURE__*/React.createElement(Typography.Text, null, body) : null));
 };
 
-var _excluded$9 = ["items", "onFinishPress", "onSkipPress", "onSlideChange", "finishButtonLabel", "skipButtonLabel", "footerHeight", "minContentHeight"];
+var _excluded$9 = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style"];
+function useStateFromProp(initialValue) {
+  var _useState = useState(initialValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  useEffect(function () {
+    return setValue(initialValue);
+  }, [initialValue]);
+  return [value, setValue];
+}
 var Carousel = function Carousel(_ref) {
   var items = _ref.items,
-    onFinishPress = _ref.onFinishPress,
-    onSkipPress = _ref.onSkipPress,
-    onSlideChange = _ref.onSlideChange,
-    _ref$finishButtonLabe = _ref.finishButtonLabel,
-    finishButtonLabel = _ref$finishButtonLabe === void 0 ? "Let's go!" : _ref$finishButtonLabe,
-    _ref$skipButtonLabel = _ref.skipButtonLabel,
-    skipButtonLabel = _ref$skipButtonLabel === void 0 ? 'Skip' : _ref$skipButtonLabel,
-    _ref$footerHeight = _ref.footerHeight,
-    footerHeight = _ref$footerHeight === void 0 ? 70 : _ref$footerHeight,
-    _ref$minContentHeight = _ref.minContentHeight,
-    minContentHeight = _ref$minContentHeight === void 0 ? 250 : _ref$minContentHeight,
+    onItemIndexChange = _ref.onItemIndexChange,
+    renderActions = _ref.renderActions,
+    _ref$selectedItemInde = _ref.selectedItemIndex,
+    selectedItemIndex = _ref$selectedItemInde === void 0 ? 0 : _ref$selectedItemInde,
+    style = _ref.style,
     nativeProps = _objectWithoutProperties(_ref, _excluded$9);
   var carouselRef = useRef(null);
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    currentSlideIndex = _useState2[0],
-    setCurrentSlideIndex = _useState2[1];
+  var _useStateFromProp = useStateFromProp(selectedItemIndex),
+    _useStateFromProp2 = _slicedToArray(_useStateFromProp, 2),
+    currentSlideIndex = _useStateFromProp2[0],
+    setCurrentSlideIndex = _useStateFromProp2[1];
+  var internalOnItemIndexChange = useCallback(function (index) {
+    setCurrentSlideIndex(index);
+    if (onItemIndexChange) {
+      onItemIndexChange(index);
+    }
+  }, [setCurrentSlideIndex, onItemIndexChange]);
   var _useWindowDimensions = useWindowDimensions(),
     width = _useWindowDimensions.width;
   var scrollX = useRef(new Animated.Value(0)).current;
+  useEffect(function () {
+    // must use setTimeout since when layout is mounted, the pagination dots are not set correct scrollX
+    var handle = setTimeout(function () {
+      var _carouselRef$current;
+      scrollX.setValue(currentSlideIndex * width);
+      (_carouselRef$current = carouselRef.current) === null || _carouselRef$current === void 0 ? void 0 : _carouselRef$current.scrollToOffset({
+        offset: currentSlideIndex * width,
+        animated: true
+      });
+    }, 100);
+    return function () {
+      clearTimeout(handle);
+    };
+  }, [currentSlideIndex, carouselRef]);
   var visibleSlideChanged = useCallback(function (_ref2) {
     var viewableItems = _ref2.viewableItems;
     if (!viewableItems || viewableItems && !viewableItems.length) return;
-    var currentIndex = viewableItems[0].index;
-    setCurrentSlideIndex(viewableItems[0].index);
-    var currentSlide = items[currentIndex];
-    if (onSlideChange) {
-      onSlideChange(currentSlide);
-    }
-  }, [items, onSlideChange]);
-  var skipCarousel = useCallback(function () {
-    var currentSlide = items[currentSlideIndex];
-    if (onSkipPress) {
-      onSkipPress(currentSlide);
-    }
-  }, [currentSlideIndex, onSkipPress, items]);
-  var finishCarousel = useCallback(function () {
-    var currentSlide = items[currentSlideIndex];
-    if (onFinishPress) {
-      onFinishPress(currentSlide);
-    }
-  }, [onFinishPress, items, currentSlideIndex]);
+    var index = viewableItems[0].index;
+    internalOnItemIndexChange(index);
+  }, []);
   var viewConfig = useRef({
     viewAreaCoveragePercentThreshold: 50
   }).current;
-  var isLastSlide = currentSlideIndex === items.length - 1;
-  return /*#__PURE__*/React.createElement(StyledCarousel, _extends$1({
+  return /*#__PURE__*/React.createElement(View, _extends$1({
+    style: style
+  }, nativeProps), /*#__PURE__*/React.createElement(StyledBackDrop, {
     themeSlideBackground: items[currentSlideIndex].background
-  }, nativeProps), /*#__PURE__*/React.createElement(StyledCarouselView, null, /*#__PURE__*/React.createElement(FlatList, {
+  }), /*#__PURE__*/React.createElement(StyledCarouselView, null, /*#__PURE__*/React.createElement(FlatList, {
     horizontal: true,
     showsHorizontalScrollIndicator: false,
     pagingEnabled: true,
@@ -10709,23 +10723,10 @@ var Carousel = function Carousel(_ref) {
         heading: heading,
         body: body,
         content: content,
-        minHeight: minContentHeight,
         width: width
       });
     }
-  }), /*#__PURE__*/React.createElement(StyledCarouselFooterWrapper, {
-    paddingHorizontal: "large",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    style: {
-      height: footerHeight
-    }
-  }, /*#__PURE__*/React.createElement(CompoundButton, {
-    variant: isLastSlide ? 'filled' : 'text',
-    intent: "primary",
-    onPress: isLastSlide ? finishCarousel : skipCarousel,
-    text: isLastSlide ? finishButtonLabel : skipButtonLabel
-  }), /*#__PURE__*/React.createElement(CarouselPaginator, {
+  }), /*#__PURE__*/React.createElement(StyledCarouselFooterWrapper, null, renderActions && renderActions(currentSlideIndex), /*#__PURE__*/React.createElement(CarouselPaginator, {
     numberOfSlides: items.length,
     scrollX: scrollX
   }))));
@@ -10957,7 +10958,7 @@ var StyledHelperText = index$a(Typography.Text)(function (_ref10) {
     fontSize: theme.__hd__.textInput.fontSizes.error
   };
 });
-var StyledTextInput = index$a(TextInput$2)(function (_ref11) {
+var StyledTextInput = index$a(TextInput$1)(function (_ref11) {
   var theme = _ref11.theme;
   return {
     textAlignVertical: 'center',
@@ -11034,7 +11035,7 @@ var getVariant$1 = function getVariant(_ref) {
 // 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, ref) {
+var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var _ref3;
   var label = _ref2.label,
     prefix = _ref2.prefix,
@@ -11203,8 +11204,7 @@ var TextInput = function TextInput(_ref2, ref) {
     themeVariant: variant,
     fontSize: "small"
   }, displayText.length, "/", maxLength)), !!helpText && /*#__PURE__*/React.createElement(StyledHelperText, null, helpText)));
-};
-var TextInput$1 = /*#__PURE__*/React.forwardRef(TextInput);
+});
 
 var DatePickerAndroid = function DatePickerAndroid(_ref) {
   var value = _ref.value,
@@ -11236,7 +11236,7 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none",
     testID: "datePickerInputAndroid"
-  }, /*#__PURE__*/React.createElement(TextInput$1, {
+  }, /*#__PURE__*/React.createElement(TextInput, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -11304,7 +11304,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none",
     testID: "datePickerInputIOS"
-  }, /*#__PURE__*/React.createElement(TextInput$1, {
+  }, /*#__PURE__*/React.createElement(TextInput, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -12237,7 +12237,7 @@ var StyledFilledMask = index$a(View)(function (_ref5) {
     backgroundColor: theme.__hd__.pinInput.colors[themeState]
   };
 });
-var StyledHiddenInput = index$a(TextInput$2)(function (_ref6) {
+var StyledHiddenInput = index$a(TextInput$1)(function (_ref6) {
   var themePinLength = _ref6.themePinLength,
     theme = _ref6.theme;
   var cellWidth = theme.__hd__.pinInput.sizes.cellWidth;
@@ -13349,7 +13349,7 @@ function MultiSelect(_ref) {
     }
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none"
-  }, /*#__PURE__*/React.createElement(TextInput$1, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React.createElement(TextInput, _extends$1({}, inputProps, {
     label: label,
     value: displayedValue,
     suffix: "arrow-down",
@@ -13397,7 +13397,7 @@ function MultiSelect(_ref) {
         (_sectionListRef$curre = sectionListRef.current) === null || _sectionListRef$curre === void 0 ? void 0 : _sectionListRef$curre.scrollToLocation(scrollParams);
       }
     }
-  }, onQueryChange && /*#__PURE__*/React.createElement(StyledSearchBar, null, /*#__PURE__*/React.createElement(TextInput$1, {
+  }, onQueryChange && /*#__PURE__*/React.createElement(StyledSearchBar, null, /*#__PURE__*/React.createElement(TextInput, {
     editable: true,
     placeholder: "Search",
     suffix: "search-outlined",
@@ -13525,7 +13525,7 @@ var SingleSelect = function SingleSelect(_ref) {
     }
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none"
-  }, /*#__PURE__*/React.createElement(TextInput$1, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React.createElement(TextInput, _extends$1({}, inputProps, {
     label: label,
     value: displayedValue,
     suffix: "arrow-down",
@@ -13557,7 +13557,7 @@ var SingleSelect = function SingleSelect(_ref) {
         (_sectionListRef$curre = sectionListRef.current) === null || _sectionListRef$curre === void 0 ? void 0 : _sectionListRef$curre.scrollToLocation(scrollParams);
       }
     }
-  }, onQueryChange && /*#__PURE__*/React.createElement(StyledSearchBar, null, /*#__PURE__*/React.createElement(TextInput$1, {
+  }, onQueryChange && /*#__PURE__*/React.createElement(StyledSearchBar, null, /*#__PURE__*/React.createElement(TextInput, {
     editable: true,
     placeholder: "Search",
     suffix: "search-outlined",
@@ -14298,7 +14298,7 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none",
     testID: "timePickerInputAndroid"
-  }, /*#__PURE__*/React.createElement(TextInput$1, {
+  }, /*#__PURE__*/React.createElement(TextInput, {
     label: label,
     value: displayValue,
     suffix: showSuffix ? 'clock-3' : undefined,
@@ -14366,7 +14366,7 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none",
     testID: "timePickerInputIOS"
-  }, /*#__PURE__*/React.createElement(TextInput$1, {
+  }, /*#__PURE__*/React.createElement(TextInput, {
     label: label,
     value: displayValue,
     suffix: showSuffix ? 'clock-3' : undefined,
@@ -31209,4 +31209,4 @@ var index = Object.assign(RichTextEditor$1, {
   Toolbar: EditorToolbar
 });
 
-export { Accordion, Alert, Attachment, index$9 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar, index$8 as Card, Carousel, Checkbox, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, index$6 as FAB, Icon, Image, List, PinInput, Progress, CompoundRadio as Radio, RefreshControl, index as RichTextEditor, SectionHeading, index$4 as Select, Slider, Spinner, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput$1 as TextInput, ThemeProvider, ThemeSwitcher, TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, getTheme$1 as getTheme, jobsSystemPalette, scale, swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, workSystemPalette };
+export { Accordion, Alert, Attachment, index$9 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar, index$8 as Card, Carousel, Checkbox, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, index$6 as FAB, Icon, Image, List, PinInput, Progress, CompoundRadio as Radio, RefreshControl, index as RichTextEditor, SectionHeading, index$4 as Select, Slider, Spinner, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, getTheme$1 as getTheme, jobsSystemPalette, scale, swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, workSystemPalette };