@hero-design/rn 8.78.0 → 8.79.0

package/.turbo/turbo-build.log

@@ -1,7 +1,7 @@
-(node:2884) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:2821) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 (Use `node --trace-warnings ...` to show where the warning was created)
 
 src/index.ts → lib/index.js, es/index.js...
 (!) [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`.
 (!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 50.6s
+created lib/index.js, es/index.js in 50s

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hero-design/rn
 
+## 8.79.0
+
+### Minor Changes
+
+- [#3489](https://github.com/Thinkei/hero-design/pull/3489) [`94719952550e8923edd82d6d236c366e4d220c44`](https://github.com/Thinkei/hero-design/commit/94719952550e8923edd82d6d236c366e4d220c44) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Select] Support custom BottomSheet config
+
+## 8.78.1
+
+### Patch Changes
+
+- [#3487](https://github.com/Thinkei/hero-design/pull/3487) [`5bcbcf14116726514e58aef14c9f7758cd8d1683`](https://github.com/Thinkei/hero-design/commit/5bcbcf14116726514e58aef14c9f7758cd8d1683) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [BottomSheet] Add missing dependencies
+
 ## 8.78.0
 
 ### Minor Changes

package/es/index.js

@@ -9718,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 () {
@@ -9736,13 +9744,7 @@ var BottomSheet = function BottomSheet(_ref) {
       easing: Easing.inOut(Easing.cubic),
       useNativeDriver: true
     });
-    animation.start(function () {
-      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();
     };
@@ -17429,7 +17431,9 @@ function MultiSelect(_ref) {
     testID = _ref.testID,
     value = _ref.value,
     _ref$supportedOrienta = _ref.supportedOrientations,
-    supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta;
+    supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta,
+    _ref$bottomSheetConfi = _ref.bottomSheetConfig,
+    bottomSheetConfig = _ref$bottomSheetConfi === void 0 ? {} : _ref$bottomSheetConfi;
   var _useKeyboard = useKeyboard(),
     isKeyboardVisible = _useKeyboard.isKeyboardVisible,
     keyboardHeight = _useKeyboard.keyboardHeight;
@@ -17450,6 +17454,8 @@ function MultiSelect(_ref) {
     return opt.text;
   }).join(', ');
   var rawValue = value.length > 0 ? value.join(', ') : '';
+  var bottomSheetVariant = bottomSheetConfig.variant,
+    bottomSheetHeader = bottomSheetConfig.header;
   useEffect(function () {
     setSelectingValue(value);
   }, [open, value]);
@@ -17477,12 +17483,13 @@ function MultiSelect(_ref) {
       return renderSelectedValue(value, props);
     } : undefined
   }))))), /*#__PURE__*/React__default.createElement(BottomSheet$1, {
+    variant: bottomSheetVariant || 'fixed',
     open: open,
     onRequestClose: function onRequestClose() {
       onDismiss === null || onDismiss === void 0 || onDismiss();
       setOpen(false);
     },
-    header: label,
+    header: bottomSheetHeader || label,
     style: {
       paddingBottom: isKeyboardVisible ? keyboardHeight : 0
     },
@@ -17632,7 +17639,9 @@ var SingleSelect = function SingleSelect(_ref) {
     testID = _ref.testID,
     value = _ref.value,
     _ref$supportedOrienta = _ref.supportedOrientations,
-    supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta;
+    supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta,
+    _ref$bottomSheetConfi = _ref.bottomSheetConfig,
+    bottomSheetConfig = _ref$bottomSheetConfi === void 0 ? {} : _ref$bottomSheetConfi;
   var _useKeyboard = useKeyboard(),
     isKeyboardVisible = _useKeyboard.isKeyboardVisible,
     keyboardHeight = _useKeyboard.keyboardHeight;
@@ -17647,6 +17656,8 @@ var SingleSelect = function SingleSelect(_ref) {
     return value === opt.value;
   })) === null || _flatOptions$find === void 0 ? void 0 : _flatOptions$find.text;
   var rawValue = value ? String(value) : undefined;
+  var bottomSheetVariant = bottomSheetConfig.variant,
+    bottomSheetHeader = bottomSheetConfig.header;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: !editable || disabled || inputProps !== null && inputProps !== void 0 && inputProps.loading ? 'none' : 'auto'
   }, /*#__PURE__*/React__default.createElement(TouchableOpacity, {
@@ -17671,12 +17682,13 @@ var SingleSelect = function SingleSelect(_ref) {
       return renderSelectedValue(value, props);
     } : undefined
   }))))), /*#__PURE__*/React__default.createElement(BottomSheet$1, {
+    variant: bottomSheetVariant || 'fixed',
     open: open,
     onRequestClose: function onRequestClose() {
       onDismiss === null || onDismiss === void 0 || onDismiss();
       setOpen(false);
     },
-    header: label,
+    header: bottomSheetHeader || label,
     style: {
       paddingBottom: isKeyboardVisible ? keyboardHeight : 0
     },

package/lib/index.js

@@ -9745,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 () {
@@ -9763,13 +9771,7 @@ var BottomSheet = function BottomSheet(_ref) {
       easing: reactNative.Easing.inOut(reactNative.Easing.cubic),
       useNativeDriver: true
     });
-    animation.start(function () {
-      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();
     };
@@ -17456,7 +17458,9 @@ function MultiSelect(_ref) {
     testID = _ref.testID,
     value = _ref.value,
     _ref$supportedOrienta = _ref.supportedOrientations,
-    supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta;
+    supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta,
+    _ref$bottomSheetConfi = _ref.bottomSheetConfig,
+    bottomSheetConfig = _ref$bottomSheetConfi === void 0 ? {} : _ref$bottomSheetConfi;
   var _useKeyboard = useKeyboard(),
     isKeyboardVisible = _useKeyboard.isKeyboardVisible,
     keyboardHeight = _useKeyboard.keyboardHeight;
@@ -17477,6 +17481,8 @@ function MultiSelect(_ref) {
     return opt.text;
   }).join(', ');
   var rawValue = value.length > 0 ? value.join(', ') : '';
+  var bottomSheetVariant = bottomSheetConfig.variant,
+    bottomSheetHeader = bottomSheetConfig.header;
   React.useEffect(function () {
     setSelectingValue(value);
   }, [open, value]);
@@ -17504,12 +17510,13 @@ function MultiSelect(_ref) {
       return renderSelectedValue(value, props);
     } : undefined
   }))))), /*#__PURE__*/React__namespace.default.createElement(BottomSheet$1, {
+    variant: bottomSheetVariant || 'fixed',
     open: open,
     onRequestClose: function onRequestClose() {
       onDismiss === null || onDismiss === void 0 || onDismiss();
       setOpen(false);
     },
-    header: label,
+    header: bottomSheetHeader || label,
     style: {
       paddingBottom: isKeyboardVisible ? keyboardHeight : 0
     },
@@ -17659,7 +17666,9 @@ var SingleSelect = function SingleSelect(_ref) {
     testID = _ref.testID,
     value = _ref.value,
     _ref$supportedOrienta = _ref.supportedOrientations,
-    supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta;
+    supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta,
+    _ref$bottomSheetConfi = _ref.bottomSheetConfig,
+    bottomSheetConfig = _ref$bottomSheetConfi === void 0 ? {} : _ref$bottomSheetConfi;
   var _useKeyboard = useKeyboard(),
     isKeyboardVisible = _useKeyboard.isKeyboardVisible,
     keyboardHeight = _useKeyboard.keyboardHeight;
@@ -17674,6 +17683,8 @@ var SingleSelect = function SingleSelect(_ref) {
     return value === opt.value;
   })) === null || _flatOptions$find === void 0 ? void 0 : _flatOptions$find.text;
   var rawValue = value ? String(value) : undefined;
+  var bottomSheetVariant = bottomSheetConfig.variant,
+    bottomSheetHeader = bottomSheetConfig.header;
   return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
     pointerEvents: !editable || disabled || inputProps !== null && inputProps !== void 0 && inputProps.loading ? 'none' : 'auto'
   }, /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
@@ -17698,12 +17709,13 @@ var SingleSelect = function SingleSelect(_ref) {
       return renderSelectedValue(value, props);
     } : undefined
   }))))), /*#__PURE__*/React__namespace.default.createElement(BottomSheet$1, {
+    variant: bottomSheetVariant || 'fixed',
     open: open,
     onRequestClose: function onRequestClose() {
       onDismiss === null || onDismiss === void 0 || onDismiss();
       setOpen(false);
     },
-    header: label,
+    header: bottomSheetHeader || label,
     style: {
       paddingBottom: isKeyboardVisible ? keyboardHeight : 0
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.78.0",
+  "version": "8.79.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/BottomSheet/index.tsx

@@ -22,7 +22,7 @@ import {
   StyledWrapper,
 } from './StyledBottomSheet';
 
-interface BottomSheetProps {
+export interface BottomSheetProps {
   /**
    * Bottom sheet open state.
    */
@@ -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,14 +143,7 @@ const BottomSheet = ({
       useNativeDriver: true,
     });
 
-    animation.start(() => {
-      if (!open && canCallOnDismiss.current) {
-        setVisibility(false);
-        onDismiss?.();
-      }
-
-      onAnimationEnd?.();
-    });
+    animation.start(onAnimationEnd);
 
     return () => animation.stop();
   }, [open]);