@hero-design/rn 8.79.2-test.0 → 8.80.0-alpha.1

package/CHANGELOG.md

@@ -1,10 +1,10 @@
 # @hero-design/rn
 
-## 8.79.2-test.0
+## 8.80.0
 
-### Patch Changes
+### Minor Changes
 
-- [`6205254b327679c8e861ba015c965e1e7776e1cb`](https://github.com/Thinkei/hero-design/commit/6205254b327679c8e861ba015c965e1e7776e1cb) Thanks [@ttkien](https://github.com/ttkien)! - [BottomSheet] fix onDismiss call twice
+- [#3502](https://github.com/Thinkei/hero-design/pull/3502) [`88c11405abfaf87625b9fde266d58d7fd09e25e9`](https://github.com/Thinkei/hero-design/commit/88c11405abfaf87625b9fde266d58d7fd09e25e9) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Chip] Add compact-outlined variant
 
 ## 8.79.1
 

package/es/index.js

@@ -2646,9 +2646,7 @@ var getChipTheme = function getChipTheme(theme) {
     outlinedDefaultBackground: theme.colors.defaultGlobalSurface,
     outlinedSelectedBackground: theme.colors.secondaryOutline,
     outlinedSelectedBorder: theme.colors.primaryOutline,
-    outlinedDefaultBorder: theme.colors.disabledOnDefaultGlobalSurface,
-    compactDefaultBackground: theme.colors.defaultGlobalSurface,
-    compactSelectedBackground: theme.colors.neutralGlobalSurface
+    outlinedDefaultBorder: theme.colors.disabledOnDefaultGlobalSurface
   };
   var space = {
     wrapperHorizontalPadding: theme.space.smallMedium,
@@ -9720,16 +9718,24 @@ var BottomSheet = function BottomSheet(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     internalShowDivider = _useState4[0],
     setInternalShowDivider = _useState4[1];
-  var canCallOnDismiss = useRef(false);
   useEffect(function () {
-    // Prevent calling onDismiss when the component has not yet opened
-    if (open && !canCallOnDismiss.current) {
-      canCallOnDismiss.current = true;
-    }
     // Show the modal before the open animation start
     if (open && !visible) {
       setVisibility(open);
     }
+    // Delay closing the modal until after the closing animation end
+    animatedValue.current.removeAllListeners();
+    animatedValue.current.addListener(function (_ref2) {
+      var value = _ref2.value;
+      var endValueOfTransition = open ? 1 : 0;
+      if (endValueOfTransition === 0 && value === endValueOfTransition) {
+        setVisibility(false);
+        onDismiss === null || onDismiss === void 0 || onDismiss();
+      }
+    });
+    return function () {
+      return animatedValue.current.removeAllListeners();
+    };
   }, [open]);
   // Animation
   useEffect(function () {
@@ -9738,16 +9744,7 @@ var BottomSheet = function BottomSheet(_ref) {
       easing: Easing.inOut(Easing.cubic),
       useNativeDriver: true
     });
-    animation.start(function (_ref2) {
-      var finished = _ref2.finished;
-      if (finished) {
-        if (!open && canCallOnDismiss.current) {
-          setVisibility(false);
-          onDismiss === null || onDismiss === void 0 || onDismiss();
-        }
-        onAnimationEnd === null || onAnimationEnd === void 0 || onAnimationEnd();
-      }
-    });
+    animation.start(onAnimationEnd);
     return function () {
       return animation.stop();
     };
@@ -13059,12 +13056,14 @@ var StyledChipWrapper = index$a(TouchableOpacity)(function (_ref) {
       case 'filled':
         return _objectSpread2({}, theme.__hd__.chip.shadows.filledWrapper);
       case 'outlined':
+      case 'compact-outlined':
         return undefined;
     }
   };
   var getBorderStyles = function getBorderStyles() {
     switch (themeVariant) {
       case 'outlined':
+      case 'compact-outlined':
         {
           return {
             borderColor: themeSelected ? theme.__hd__.chip.colors.outlinedSelectedBorder : theme.__hd__.chip.colors.outlinedDefaultBorder,
@@ -13084,42 +13083,34 @@ var StyledChipWrapper = index$a(TouchableOpacity)(function (_ref) {
     if (themeSelected) {
       switch (themeVariant) {
         case 'outlined':
+        case 'compact-outlined':
           {
             return {
               backgroundColor: themeSelected ? theme.__hd__.chip.colors.outlinedSelectedBackground : theme.__hd__.chip.colors.outlinedDefaultBackground
             };
           }
         case 'filled':
-          {
-            return {
-              backgroundColor: theme.__hd__.chip.colors.secondaryBackground
-            };
-          }
         case 'compact':
           {
             return {
-              backgroundColor: theme.__hd__.chip.colors.compactSelectedBackground
+              backgroundColor: theme.__hd__.chip.colors.secondaryBackground
             };
           }
       }
     } else {
       switch (themeVariant) {
         case 'outlined':
+        case 'compact-outlined':
           {
             return {
               backgroundColor: theme.__hd__.chip.colors.outlinedDefaultBackground
             };
           }
         case 'filled':
-          {
-            return {
-              backgroundColor: theme.__hd__.chip.colors.filledBackground
-            };
-          }
         case 'compact':
           {
             return {
-              backgroundColor: theme.__hd__.chip.colors.compactDefaultBackground
+              backgroundColor: theme.__hd__.chip.colors.filledBackground
             };
           }
       }
@@ -13128,6 +13119,7 @@ var StyledChipWrapper = index$a(TouchableOpacity)(function (_ref) {
   var getPaddingStyles = function getPaddingStyles() {
     switch (themeVariant) {
       case 'compact':
+      case 'compact-outlined':
         {
           return {
             paddingHorizontal: theme.__hd__.chip.space.compactWrapperHorizontalPadding,
@@ -16290,15 +16282,12 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       // Slice the text, starting from the length position
       var slicedText = text.slice(length);
       onChangeText === null || onChangeText === void 0 || onChangeText(normalizeValue(slicedText, length));
-      if (slicedText.length === length) {
-        onFulfill === null || onFulfill === void 0 || onFulfill(slicedText);
-      }
     } else {
       // Prevent user from entering more than the length
       onChangeText === null || onChangeText === void 0 || onChangeText(trimmedPin);
-      if (trimmedPin.length === length) {
-        onFulfill === null || onFulfill === void 0 || onFulfill(trimmedPin);
-      }
+    }
+    if (trimmedPin.length === length) {
+      onFulfill === null || onFulfill === void 0 || onFulfill(trimmedPin);
     }
   }, [length, onChangeText, onFulfill, trimmedValue.length]);
   useEffect(function () {

package/lib/index.js

@@ -2673,9 +2673,7 @@ var getChipTheme = function getChipTheme(theme) {
     outlinedDefaultBackground: theme.colors.defaultGlobalSurface,
     outlinedSelectedBackground: theme.colors.secondaryOutline,
     outlinedSelectedBorder: theme.colors.primaryOutline,
-    outlinedDefaultBorder: theme.colors.disabledOnDefaultGlobalSurface,
-    compactDefaultBackground: theme.colors.defaultGlobalSurface,
-    compactSelectedBackground: theme.colors.neutralGlobalSurface
+    outlinedDefaultBorder: theme.colors.disabledOnDefaultGlobalSurface
   };
   var space = {
     wrapperHorizontalPadding: theme.space.smallMedium,
@@ -9747,16 +9745,24 @@ var BottomSheet = function BottomSheet(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     internalShowDivider = _useState4[0],
     setInternalShowDivider = _useState4[1];
-  var canCallOnDismiss = React.useRef(false);
   React.useEffect(function () {
-    // Prevent calling onDismiss when the component has not yet opened
-    if (open && !canCallOnDismiss.current) {
-      canCallOnDismiss.current = true;
-    }
     // Show the modal before the open animation start
     if (open && !visible) {
       setVisibility(open);
     }
+    // Delay closing the modal until after the closing animation end
+    animatedValue.current.removeAllListeners();
+    animatedValue.current.addListener(function (_ref2) {
+      var value = _ref2.value;
+      var endValueOfTransition = open ? 1 : 0;
+      if (endValueOfTransition === 0 && value === endValueOfTransition) {
+        setVisibility(false);
+        onDismiss === null || onDismiss === void 0 || onDismiss();
+      }
+    });
+    return function () {
+      return animatedValue.current.removeAllListeners();
+    };
   }, [open]);
   // Animation
   React.useEffect(function () {
@@ -9765,16 +9771,7 @@ var BottomSheet = function BottomSheet(_ref) {
       easing: reactNative.Easing.inOut(reactNative.Easing.cubic),
       useNativeDriver: true
     });
-    animation.start(function (_ref2) {
-      var finished = _ref2.finished;
-      if (finished) {
-        if (!open && canCallOnDismiss.current) {
-          setVisibility(false);
-          onDismiss === null || onDismiss === void 0 || onDismiss();
-        }
-        onAnimationEnd === null || onAnimationEnd === void 0 || onAnimationEnd();
-      }
-    });
+    animation.start(onAnimationEnd);
     return function () {
       return animation.stop();
     };
@@ -13086,12 +13083,14 @@ var StyledChipWrapper = index$a(reactNative.TouchableOpacity)(function (_ref) {
       case 'filled':
         return _objectSpread2({}, theme.__hd__.chip.shadows.filledWrapper);
       case 'outlined':
+      case 'compact-outlined':
         return undefined;
     }
   };
   var getBorderStyles = function getBorderStyles() {
     switch (themeVariant) {
       case 'outlined':
+      case 'compact-outlined':
         {
           return {
             borderColor: themeSelected ? theme.__hd__.chip.colors.outlinedSelectedBorder : theme.__hd__.chip.colors.outlinedDefaultBorder,
@@ -13111,42 +13110,34 @@ var StyledChipWrapper = index$a(reactNative.TouchableOpacity)(function (_ref) {
     if (themeSelected) {
       switch (themeVariant) {
         case 'outlined':
+        case 'compact-outlined':
           {
             return {
               backgroundColor: themeSelected ? theme.__hd__.chip.colors.outlinedSelectedBackground : theme.__hd__.chip.colors.outlinedDefaultBackground
             };
           }
         case 'filled':
-          {
-            return {
-              backgroundColor: theme.__hd__.chip.colors.secondaryBackground
-            };
-          }
         case 'compact':
           {
             return {
-              backgroundColor: theme.__hd__.chip.colors.compactSelectedBackground
+              backgroundColor: theme.__hd__.chip.colors.secondaryBackground
             };
           }
       }
     } else {
       switch (themeVariant) {
         case 'outlined':
+        case 'compact-outlined':
           {
             return {
               backgroundColor: theme.__hd__.chip.colors.outlinedDefaultBackground
             };
           }
         case 'filled':
-          {
-            return {
-              backgroundColor: theme.__hd__.chip.colors.filledBackground
-            };
-          }
         case 'compact':
           {
             return {
-              backgroundColor: theme.__hd__.chip.colors.compactDefaultBackground
+              backgroundColor: theme.__hd__.chip.colors.filledBackground
             };
           }
       }
@@ -13155,6 +13146,7 @@ var StyledChipWrapper = index$a(reactNative.TouchableOpacity)(function (_ref) {
   var getPaddingStyles = function getPaddingStyles() {
     switch (themeVariant) {
       case 'compact':
+      case 'compact-outlined':
         {
           return {
             paddingHorizontal: theme.__hd__.chip.space.compactWrapperHorizontalPadding,
@@ -16317,15 +16309,12 @@ var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       // Slice the text, starting from the length position
       var slicedText = text.slice(length);
       onChangeText === null || onChangeText === void 0 || onChangeText(normalizeValue(slicedText, length));
-      if (slicedText.length === length) {
-        onFulfill === null || onFulfill === void 0 || onFulfill(slicedText);
-      }
     } else {
       // Prevent user from entering more than the length
       onChangeText === null || onChangeText === void 0 || onChangeText(trimmedPin);
-      if (trimmedPin.length === length) {
-        onFulfill === null || onFulfill === void 0 || onFulfill(trimmedPin);
-      }
+    }
+    if (trimmedPin.length === length) {
+      onFulfill === null || onFulfill === void 0 || onFulfill(trimmedPin);
     }
   }, [length, onChangeText, onFulfill, trimmedValue.length]);
   React.useEffect(function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.79.2-test.0",
+  "version": "8.80.0-alpha.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -93,5 +93,6 @@
     "ts-jest": "^29.1.1",
     "typescript": "4.8.4"
   },
-  "prettier": "prettier-config-hd"
+  "prettier": "prettier-config-hd",
+  "react-native": "src/index.ts"
 }

package/src/components/BottomSheet/index.tsx

@@ -115,18 +115,24 @@ const BottomSheet = ({
   const animatedValue = useRef(new Animated.Value(open ? 0 : 1));
   const [internalShowDivider, setInternalShowDivider] =
     useState<boolean>(showDivider);
-  const canCallOnDismiss = useRef(false);
 
   useEffect(() => {
-    // Prevent calling onDismiss when the component has not yet opened
-    if (open && !canCallOnDismiss.current) {
-      canCallOnDismiss.current = true;
-    }
-
     // Show the modal before the open animation start
     if (open && !visible) {
       setVisibility(open);
     }
+
+    // Delay closing the modal until after the closing animation end
+    animatedValue.current.removeAllListeners();
+    animatedValue.current.addListener(({ value }) => {
+      const endValueOfTransition = open ? 1 : 0;
+      if (endValueOfTransition === 0 && value === endValueOfTransition) {
+        setVisibility(false);
+        onDismiss?.();
+      }
+    });
+
+    return () => animatedValue.current.removeAllListeners();
   }, [open]);
 
   // Animation
@@ -137,15 +143,7 @@ const BottomSheet = ({
       useNativeDriver: true,
     });
 
-    animation.start(({ finished }) => {
-      if (finished) {
-        if (!open && canCallOnDismiss.current) {
-          setVisibility(false);
-          onDismiss?.();
-        }
-        onAnimationEnd?.();
-      }
-    });
+    animation.start(onAnimationEnd);
 
     return () => animation.stop();
   }, [open]);

package/src/components/Chip/StyledChip.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/native';
 import { TouchableOpacity } from 'react-native';
 
 type StyledChipWrapperProps = {
-  themeVariant?: 'outlined' | 'filled' | 'compact';
+  themeVariant?: 'outlined' | 'filled' | 'compact' | 'compact-outlined';
   themeSelected?: boolean;
 };
 
@@ -16,13 +16,15 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
             ...theme.__hd__.chip.shadows.filledWrapper,
           };
         case 'outlined':
+        case 'compact-outlined':
           return undefined;
       }
     };
 
     const getBorderStyles = () => {
       switch (themeVariant) {
-        case 'outlined': {
+        case 'outlined':
+        case 'compact-outlined': {
           return {
             borderColor: themeSelected
               ? theme.__hd__.chip.colors.outlinedSelectedBorder
@@ -42,43 +44,34 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
     const getBackgroundStyles = () => {
       if (themeSelected) {
         switch (themeVariant) {
-          case 'outlined': {
+          case 'outlined':
+          case 'compact-outlined': {
             return {
               backgroundColor: themeSelected
                 ? theme.__hd__.chip.colors.outlinedSelectedBackground
                 : theme.__hd__.chip.colors.outlinedDefaultBackground,
             };
           }
-          case 'filled': {
-            return {
-              backgroundColor: theme.__hd__.chip.colors.secondaryBackground,
-            };
-          }
-
+          case 'filled':
           case 'compact': {
             return {
-              backgroundColor:
-                theme.__hd__.chip.colors.compactSelectedBackground,
+              backgroundColor: theme.__hd__.chip.colors.secondaryBackground,
             };
           }
         }
       } else {
         switch (themeVariant) {
-          case 'outlined': {
+          case 'outlined':
+          case 'compact-outlined': {
             return {
               backgroundColor:
                 theme.__hd__.chip.colors.outlinedDefaultBackground,
             };
           }
-          case 'filled': {
-            return {
-              backgroundColor: theme.__hd__.chip.colors.filledBackground,
-            };
-          }
+          case 'filled':
           case 'compact': {
             return {
-              backgroundColor:
-                theme.__hd__.chip.colors.compactDefaultBackground,
+              backgroundColor: theme.__hd__.chip.colors.filledBackground,
             };
           }
         }
@@ -87,7 +80,8 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
 
     const getPaddingStyles = () => {
       switch (themeVariant) {
-        case 'compact': {
+        case 'compact':
+        case 'compact-outlined': {
           return {
             paddingHorizontal:
               theme.__hd__.chip.space.compactWrapperHorizontalPadding,

package/src/components/Chip/__tests__/__snapshots__/index.spec.tsx.snap

@@ -942,7 +942,7 @@ exports[`Chip renders correctly with variant compact and selected true 1`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#f6f6f7",
+        "backgroundColor": "#ece8ef",
         "borderColor": "transparent",
         "borderRadius": 999,
         "elevation": 3,
@@ -1006,6 +1006,200 @@ exports[`Chip renders correctly with variant compact and selected true 1`] = `
 </View>
 `;
 
+exports[`Chip renders correctly with variant compact-outlined and selected false 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#ffffff",
+        "borderColor": "#bfc1c5",
+        "borderRadius": 999,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "opacity": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 4,
+      }
+    }
+    testID="chip"
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="regular"
+    >
+      Cover my bills
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Chip renders correctly with variant compact-outlined and selected true 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#e8e9ea",
+        "borderColor": "#001f23",
+        "borderRadius": 999,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "opacity": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 4,
+      }
+    }
+    testID="chip"
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="regular"
+    >
+      Cover my bills
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`Chip renders correctly with variant filled and selected false 1`] = `
 <View
   style={

package/src/components/Chip/__tests__/index.spec.tsx

@@ -81,13 +81,15 @@ describe('Chip', () => {
   });
 
   it.each`
-    variant       | selected
-    ${'filled'}   | ${true}
-    ${'filled'}   | ${false}
-    ${'outlined'} | ${true}
-    ${'outlined'} | ${false}
-    ${'compact'}  | ${true}
-    ${'compact'}  | ${false}
+    variant               | selected
+    ${'filled'}           | ${true}
+    ${'filled'}           | ${false}
+    ${'outlined'}         | ${true}
+    ${'outlined'}         | ${false}
+    ${'compact'}          | ${true}
+    ${'compact'}          | ${false}
+    ${'compact-outlined'} | ${true}
+    ${'compact-outlined'} | ${false}
   `(
     'renders correctly with variant $variant and selected $selected',
     ({ variant, selected }) => {