@hero-design/rn 7.1.3-alpha7 → 7.2.1

package/.turbo/turbo-build.log

@@ -0,0 +1,8 @@
+@hero-design/rn:build: cache hit, replaying output 838d0cbb27d952b0
+@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: created lib/index.js, es/index.js in 12.8s
+@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly

package/es/index.js

@@ -1187,6 +1187,21 @@ function prefixer(element, index, children, callback) {
   }
 }
 
+var weakMemoize = function weakMemoize(func) {
+  // $FlowFixMe flow doesn't include all non-primitive types as allowed for weakmaps
+  var cache = new WeakMap();
+  return function (arg) {
+    if (cache.has(arg)) {
+      // $FlowFixMe
+      return cache.get(arg);
+    }
+
+    var ret = func(arg);
+    cache.set(arg, ret);
+    return ret;
+  };
+};
+
 var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
   var previous = 0;
   var character = 0;
@@ -1424,21 +1439,6 @@ function _extends$1() {
   return _extends$1.apply(this, arguments);
 }
 
-var weakMemoize = function weakMemoize(func) {
-  // $FlowFixMe flow doesn't include all non-primitive types as allowed for weakmaps
-  var cache = new WeakMap();
-  return function (arg) {
-    if (cache.has(arg)) {
-      // $FlowFixMe
-      return cache.get(arg);
-    }
-
-    var ret = func(arg);
-    cache.set(arg, ret);
-    return ret;
-  };
-};
-
 var EmotionCacheContext = /* #__PURE__ */createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
 // because this module is primarily intended for the browser and node
 // but it's also required in react native and similar environments sometimes
@@ -1485,6 +1485,17 @@ var ThemeProvider = function ThemeProvider(props) {
   }, props.children);
 };
 
+var BASE_BORDER_WIDTH = 1;
+var BASE_SPACE = 8;
+var BASE_FONT = 'BeVietnamPro';
+var BASE_FONT_SIZE = 10;
+var scale$1 = {
+  borderWidth: BASE_BORDER_WIDTH,
+  space: BASE_SPACE,
+  font: BASE_FONT,
+  fontSize: BASE_FONT_SIZE
+};
+
 var palette = {
   black: '#000000',
   blue: '#1dbeee',
@@ -1552,6 +1563,7 @@ var palette = {
   smaltDark75: '#000d20',
   smaltLight30: '#4d72a6',
   smaltLight45: '#7390b9',
+  smaltLight75: '#bfcddf',
   smaltLight90: '#e6ebf2',
   violet: '#7622d7',
   violetDark15: '#641db7',
@@ -1610,60 +1622,94 @@ var scale = function scale(size) {
   return size + (horizontalScale(size) - size) * factor;
 };
 
-var BASE$1 = 8;
-var space = {
-  xxsmall: scale(BASE$1 * 0.25),
-  xsmall: scale(BASE$1 * 0.5),
-  small: scale(BASE$1),
-  medium: scale(BASE$1 * 2),
-  large: scale(BASE$1 * 3),
-  xlarge: scale(BASE$1 * 4),
-  xxlarge: scale(BASE$1 * 5),
-  xxxlarge: scale(BASE$1 * 6),
-  xxxxlarge: scale(BASE$1 * 7)
+// https://www.ibm.com/design/language/typography/type-specs-ui#scales
+
+var genFontSize = function genFontSize(prev, at) {
+  return prev + Math.floor(Math.abs((at - 2) / 4) + 1) * 2;
+};
+
+var getFonts = function getFonts(baseFont) {
+  return {
+    light: "".concat(baseFont, "-Light"),
+    regular: "".concat(baseFont, "-Regular"),
+    semiBold: "".concat(baseFont, "-SemiBold")
+  };
 };
 
-var BASE = 16;
-var fonts = {
-  light: 'BeVietnamPro-Light',
-  regular: 'BeVietnamPro-Regular',
-  semiBold: 'BeVietnamPro-SemiBold'
+var getFontSizes = function getFontSizes(baseFontSize) {
+  var fontSizes = Array.from(new Array(9));
+  fontSizes.forEach(function (_, index) {
+    if (index === 0) {
+      fontSizes[0] = baseFontSize;
+    } else {
+      fontSizes[index] = genFontSize(fontSizes[index - 1], index);
+    }
+
+    return undefined;
+  });
+  return {
+    xxxxxlarge: scale(fontSizes[8]),
+    xxxxlarge: scale(fontSizes[7]),
+    xxxlarge: scale(fontSizes[6]),
+    xxlarge: scale(fontSizes[5]),
+    xlarge: scale(fontSizes[4]),
+    large: scale(fontSizes[3]),
+    medium: scale(fontSizes[2]),
+    small: scale(fontSizes[1]),
+    xsmall: scale(fontSizes[0]) //     10
+
+  };
 };
-var fontSizes = {
-  xxxxxlarge: scale(BASE * 2),
-  xxxxlarge: scale(BASE * 1.75),
-  xxxlarge: scale(BASE * 1.5),
-  xxlarge: scale(BASE * 1.25),
-  xlarge: scale(BASE * 1.125),
-  large: scale(BASE),
-  medium: scale(BASE * 0.875),
-  small: scale(BASE * 0.75),
-  xsmall: scale(BASE * 0.625) //      10
 
+var getLineHeights = function getLineHeights(fontSizes) {
+  var additionalSpace = 8;
+  return {
+    xxxxxlarge: fontSizes.xxxxxlarge + additionalSpace,
+    xxxxlarge: fontSizes.xxxxlarge + additionalSpace,
+    xxxlarge: fontSizes.xxxlarge + additionalSpace,
+    xxlarge: fontSizes.xxlarge + additionalSpace,
+    xlarge: fontSizes.xlarge + additionalSpace,
+    large: fontSizes.large + additionalSpace,
+    medium: fontSizes.medium + additionalSpace,
+    small: fontSizes.small + additionalSpace,
+    xsmall: fontSizes.xsmall + additionalSpace
+  };
 };
-var lineHeights = {
-  xxxxxlarge: fontSizes.xxxxxlarge + 8,
-  xxxxlarge: fontSizes.xxxxlarge + 8,
-  xxxlarge: fontSizes.xxxlarge + 8,
-  xxlarge: fontSizes.xxlarge + 8,
-  xlarge: fontSizes.xlarge + 8,
-  large: fontSizes.large + 8,
-  medium: fontSizes.medium + 8,
-  small: fontSizes.small + 8,
-  xsmall: fontSizes.xsmall + 8
+
+var getSpace = function getSpace(baseSpace) {
+  return {
+    xxsmall: scale(baseSpace * 0.25),
+    xsmall: scale(baseSpace * 0.5),
+    small: scale(baseSpace),
+    medium: scale(baseSpace * 2),
+    large: scale(baseSpace * 3),
+    xlarge: scale(baseSpace * 4),
+    xxlarge: scale(baseSpace * 5),
+    xxxlarge: scale(baseSpace * 6),
+    xxxxlarge: scale(baseSpace * 7)
+  };
 };
 
-var borderWidths = {
-  base: 1
+var getBorderWidths = function getBorderWidths(baseBorderWidth) {
+  return {
+    base: baseBorderWidth
+  };
 };
 
-var globalTheme = {
-  colors: _objectSpread2({}, systemPalette),
-  space: space,
-  fonts: fonts,
-  fontSizes: fontSizes,
-  lineHeights: lineHeights,
-  borderWidths: borderWidths
+var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
+  var fonts = getFonts(scale.font);
+  var fontSizes = getFontSizes(scale.fontSize);
+  var lineHeights = getLineHeights(fontSizes);
+  var borderWidths = getBorderWidths(scale.borderWidth);
+  var space = getSpace(scale.space);
+  return {
+    colors: _objectSpread2({}, systemPalette),
+    fonts: fonts,
+    fontSizes: fontSizes,
+    lineHeights: lineHeights,
+    borderWidths: borderWidths,
+    space: space
+  };
 };
 
 var getBadgeTheme = function getBadgeTheme(theme) {
@@ -1889,17 +1935,19 @@ var getFABTheme = function getFABTheme(theme) {
 };
 
 var getTheme = function getTheme() {
-  var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : globalTheme;
-  return _objectSpread2(_objectSpread2({}, theme), {}, {
+  var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : scale$1;
+  var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : systemPalette;
+  var globalTheme = getGlobalTheme(scale, systemPallete);
+  return _objectSpread2(_objectSpread2({}, globalTheme), {}, {
     __hd__: {
-      badge: getBadgeTheme(theme),
-      bottomNavigation: getBottomNavigationTheme(theme),
-      card: getCardTheme(theme),
-      divider: getDividerTheme(theme),
-      icon: getIconTheme(theme),
-      tabs: getTabsTheme(theme),
-      typography: getTypographyTheme(theme),
-      fab: getFABTheme(theme)
+      badge: getBadgeTheme(globalTheme),
+      bottomNavigation: getBottomNavigationTheme(globalTheme),
+      card: getCardTheme(globalTheme),
+      divider: getDividerTheme(globalTheme),
+      icon: getIconTheme(globalTheme),
+      tabs: getTabsTheme(globalTheme),
+      typography: getTypographyTheme(globalTheme),
+      fab: getFABTheme(globalTheme)
     }
   });
 };
@@ -13639,7 +13687,7 @@ var StyledBottomBarText = index$1(Typography.Text)(function (_ref3) {
 var isIOS = Platform.OS === 'ios';
 Platform.OS === 'android';
 
-var _excluded$3 = ["onChange", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$3 = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
@@ -13647,7 +13695,7 @@ var getInactiveIcon = function getInactiveIcon(icon) {
 };
 
 var BottomNavigation = function BottomNavigation(_ref) {
-  var onChange = _ref.onChange,
+  var onTabPress = _ref.onTabPress,
       _ref$renderActiveTabO = _ref.renderActiveTabOnly,
       renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
       selectedTabKey = _ref.selectedTabKey,
@@ -13673,7 +13721,8 @@ var BottomNavigation = function BottomNavigation(_ref) {
 
   return /*#__PURE__*/React.createElement(BottomNavigationContainer, nativeProps, /*#__PURE__*/React.createElement(ContentWrapper$1, null, tabs.map(function (tab) {
     var key = tab.key,
-        component = tab.component;
+        component = tab.component,
+        testID = tab.testID;
     var active = selectedTabKey === key;
 
     if (renderActiveTabOnly && !active) {
@@ -13687,7 +13736,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
 
     return /*#__PURE__*/React.createElement(BottomNavigationTab, {
       key: key,
-      testID: "route-screen-".concat(selectedTabKey),
+      testID: testID ? "route-screen-".concat(testID) : undefined,
       pointerEvents: active ? 'auto' : 'none',
       accessibilityElementsHidden: !active,
       importantForAccessibility: active ? 'auto' : 'no-hide-descendants',
@@ -13709,9 +13758,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     return /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
       key: key,
       onPress: function onPress() {
-        if (key !== selectedTabKey) {
-          onChange(key);
-        }
+        return onTabPress(key);
       },
       testID: testID
     }, /*#__PURE__*/React.createElement(BottomBarItem, null, /*#__PURE__*/React.createElement(Icon, {
@@ -14084,10 +14131,10 @@ var StyledHeaderTabText = index$1(Typography.Text)(function (_ref6) {
   };
 });
 
-var _excluded = ["onChange", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 
 var Tabs = function Tabs(_ref) {
-  var onChange = _ref.onChange,
+  var onTabPress = _ref.onTabPress,
       _ref$renderActiveTabO = _ref.renderActiveTabOnly,
       renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
       selectedTabKey = _ref.selectedTabKey,
@@ -14105,6 +14152,21 @@ var Tabs = function Tabs(_ref) {
       loaded = _React$useState2[0],
       setLoaded = _React$useState2[1];
 
+  React.useEffect(function () {
+    var selectedTabIndex = tabs.findIndex(function (item) {
+      return item.key === selectedTabKey;
+    });
+
+    if (selectedTabIndex !== -1) {
+      var _flatListRef$current;
+
+      (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
+        index: selectedTabIndex,
+        viewPosition: 0.5
+      });
+    }
+  }, [selectedTabKey, tabs]);
+
   if (!loaded.includes(selectedTabKey)) {
     // Set the current tab to be loaded if it was not loaded before
     setLoaded(function (loadedState) {
@@ -14125,17 +14187,16 @@ var Tabs = function Tabs(_ref) {
     onScrollToIndexFailed: function onScrollToIndexFailed(_ref2) {
       var index = _ref2.index;
       setTimeout(function () {
-        var _flatListRef$current;
+        var _flatListRef$current2;
 
-        return (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
+        return (_flatListRef$current2 = flatListRef.current) === null || _flatListRef$current2 === void 0 ? void 0 : _flatListRef$current2.scrollToIndex({
           index: index,
           viewPosition: 0.5
         });
       }, 100);
     },
     renderItem: function renderItem(_ref3) {
-      var tab = _ref3.item,
-          index = _ref3.index;
+      var tab = _ref3.item;
       var key = tab.key,
           icon = tab.icon,
           title = tab.title,
@@ -14144,15 +14205,7 @@ var Tabs = function Tabs(_ref) {
       return /*#__PURE__*/React.createElement(TouchableOpacity, {
         key: key,
         onPress: function onPress() {
-          if (key !== selectedTabKey) {
-            var _flatListRef$current2;
-
-            onChange(key);
-            (_flatListRef$current2 = flatListRef.current) === null || _flatListRef$current2 === void 0 ? void 0 : _flatListRef$current2.scrollToIndex({
-              index: index,
-              viewPosition: 0.5
-            });
-          }
+          return onTabPress(key);
         },
         testID: testID
       }, /*#__PURE__*/React.createElement(HeaderTabItem, null, /*#__PURE__*/React.createElement(StyledHeaderTabIcon, {
@@ -14167,7 +14220,8 @@ var Tabs = function Tabs(_ref) {
     }
   })), /*#__PURE__*/React.createElement(ContentWrapper, null, tabs.map(function (tab) {
     var key = tab.key,
-        component = tab.component;
+        component = tab.component,
+        testID = tab.testID;
     var active = selectedTabKey === key;
 
     if (renderActiveTabOnly && !active) {
@@ -14181,7 +14235,7 @@ var Tabs = function Tabs(_ref) {
 
     return /*#__PURE__*/React.createElement(TabScreen, {
       key: key,
-      testID: "tab-screen-".concat(selectedTabKey),
+      testID: testID ? "tab-screen-".concat(testID) : undefined,
       pointerEvents: active ? 'auto' : 'none',
       accessibilityElementsHidden: !active,
       importantForAccessibility: active ? 'auto' : 'no-hide-descendants',