@nutui/nutui-react-taro 3.0.18 → 3.0.19-beta.2

package/dist/es/packages/lottie/types.js

@@ -1 +1 @@
-import React from "react";
+export { };

package/dist/es/packages/menuitem/menuitem.js

@@ -48,28 +48,30 @@ export var MenuItem = /*#__PURE__*/ forwardRef(function(props, ref) {
         show
     ]);
     var getParentOffset = useCallback(function() {
-        setTimeout(/*#__PURE__*/ _async_to_generator(function() {
-            var p, rect;
-            return _ts_generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        p = parent.menuRef.current;
-                        return [
-                            4,
-                            getRectInMultiPlatform(p)
-                        ];
-                    case 1:
-                        rect = _state.sent();
-                        setPosition({
-                            height: rect.height,
-                            top: rect.top
-                        });
-                        return [
-                            2
-                        ];
-                }
-            });
-        }), 100);
+        setTimeout(function() {
+            return _async_to_generator(function() {
+                var p, rect;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            p = parent.menuRef.current;
+                            return [
+                                4,
+                                getRectInMultiPlatform(p)
+                            ];
+                        case 1:
+                            rect = _state.sent();
+                            setPosition({
+                                height: rect.height,
+                                top: rect.top
+                            });
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        }, 100);
     }, [
         parent.menuRef
     ]);

package/dist/es/packages/noticebar/noticebar.js

@@ -121,46 +121,48 @@ export var NoticeBar = function(props) {
         if (showNoticeBar === false) {
             return;
         }
-        setTimeout(/*#__PURE__*/ _async_to_generator(function() {
-            var warpRes, contentRes, wrapW, offsetW, canScroll;
-            return _ts_generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        if (!wrapRef.current || !contentRef.current) {
+        setTimeout(function() {
+            return _async_to_generator(function() {
+                var warpRes, contentRes, wrapW, offsetW, canScroll;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            if (!wrapRef.current || !contentRef.current) {
+                                return [
+                                    2
+                                ];
+                            }
+                            return [
+                                4,
+                                getRectInMultiPlatform(wrapRef.current)
+                            ];
+                        case 1:
+                            warpRes = _state.sent();
+                            return [
+                                4,
+                                getRectInMultiPlatform(contentRef.current)
+                            ];
+                        case 2:
+                            contentRes = _state.sent();
+                            wrapW = warpRes.width;
+                            offsetW = contentRes.width;
+                            canScroll = align === 'left' && scrollable == null ? offsetW > wrapW : scrollable;
+                            SetIsCanScroll(canScroll);
+                            if (canScroll) {
+                                SetWrapWidth(wrapW);
+                                SetOffsetW(offsetW);
+                                SetAnimationDuration(offsetW / speed);
+                                SetAnimationClass('play');
+                            } else {
+                                SetAnimationClass('');
+                            }
                             return [
                                 2
                             ];
-                        }
-                        return [
-                            4,
-                            getRectInMultiPlatform(wrapRef.current)
-                        ];
-                    case 1:
-                        warpRes = _state.sent();
-                        return [
-                            4,
-                            getRectInMultiPlatform(contentRef.current)
-                        ];
-                    case 2:
-                        contentRes = _state.sent();
-                        wrapW = warpRes.width;
-                        offsetW = contentRes.width;
-                        canScroll = align === 'left' && scrollable == null ? offsetW > wrapW : scrollable;
-                        SetIsCanScroll(canScroll);
-                        if (canScroll) {
-                            SetWrapWidth(wrapW);
-                            SetOffsetW(offsetW);
-                            SetAnimationDuration(offsetW / speed);
-                            SetAnimationClass('play');
-                        } else {
-                            SetAnimationClass('');
-                        }
-                        return [
-                            2
-                        ];
-                }
-            });
-        }), 0);
+                    }
+                });
+            })();
+        }, 0);
     };
     var handleClick = function(event) {
         click && click(event);
@@ -225,36 +227,38 @@ export var NoticeBar = function(props) {
     var init = function() {
         var activeIndex = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 0;
         if (!(container === null || container === void 0 ? void 0 : container.current)) return;
-        setTimeout(/*#__PURE__*/ _async_to_generator(function() {
-            var rects, _active, _height, targetOffset;
-            return _ts_generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        return [
-                            4,
-                            getRectInMultiPlatform(container === null || container === void 0 ? void 0 : container.current)
-                        ];
-                    case 1:
-                        rects = _state.sent();
-                        _active = Math.max(Math.min(childCount - 1, activeIndex), 0);
-                        _height = rects === null || rects === void 0 ? void 0 : rects.height;
-                        trackSize = childCount * Number(_height);
-                        targetOffset = getOffset(_active);
-                        activeRef.current = _active;
-                        setRect(rects);
-                        setOffset(targetOffset);
-                        setChildOffset(new Array(childCount).fill(0));
-                        // 关闭动画并立即设置样式
-                        swiperRef.current.moving = true;
-                        setStyle(targetOffset, rects);
-                        swiperRef.current.moving = false;
-                        setReady(true);
-                        return [
-                            2
-                        ];
-                }
-            });
-        }), 0);
+        setTimeout(function() {
+            return _async_to_generator(function() {
+                var rects, _active, _height, targetOffset;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            return [
+                                4,
+                                getRectInMultiPlatform(container === null || container === void 0 ? void 0 : container.current)
+                            ];
+                        case 1:
+                            rects = _state.sent();
+                            _active = Math.max(Math.min(childCount - 1, activeIndex), 0);
+                            _height = rects === null || rects === void 0 ? void 0 : rects.height;
+                            trackSize = childCount * Number(_height);
+                            targetOffset = getOffset(_active);
+                            activeRef.current = _active;
+                            setRect(rects);
+                            setOffset(targetOffset);
+                            setChildOffset(new Array(childCount).fill(0));
+                            // 关闭动画并立即设置样式
+                            swiperRef.current.moving = true;
+                            setStyle(targetOffset, rects);
+                            swiperRef.current.moving = false;
+                            setReady(true);
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        }, 0);
     };
     useEffect(function() {
         if (ready) {

package/dist/es/packages/numberkeyboard/style/style.harmony.css

@@ -134,9 +134,6 @@
 .nut-popup-center.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
 }
-.nut-popup-bottom, .nut-popup-top {
-  max-height: 87%;
-}
 .nut-popup-bottom {
   bottom: 0;
   left: 0;

package/dist/es/packages/picker/style/style.harmony.css

@@ -134,9 +134,6 @@
 .nut-popup-center.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
 }
-.nut-popup-bottom, .nut-popup-top {
-  max-height: 87%;
-}
 .nut-popup-bottom {
   bottom: 0;
   left: 0;

package/dist/es/packages/pickerview/pickerroller.js

@@ -114,8 +114,8 @@ var InternalPickerRoller = function(props, ref) {
         setTouchTime(0);
         selectValue(scrollDistance);
     };
-    var getReactHeight = /*#__PURE__*/ function() {
-        var _ref = _async_to_generator(function() {
+    var getReactHeight = function() {
+        return _async_to_generator(function() {
             var placeholder, placeholderHeight, error;
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
@@ -150,11 +150,8 @@ var InternalPickerRoller = function(props, ref) {
                         ];
                 }
             });
-        });
-        return function getReactHeight() {
-            return _ref.apply(this, arguments);
-        };
-    }();
+        })();
+    };
     // lineSpacing.current CSS variable
     useEffect(function() {
         var element = pickerRollerRef.current;

package/dist/es/packages/pickerview/pickerview.js

@@ -54,8 +54,7 @@ var InternalPickerView = function(props, ref) {
                 var index = currentOptions.findIndex(function(columnItem) {
                     return columnItem.value === currentValue;
                 });
-                columnOptions = currentOptions[index === -1 ? 0 : index] // 如果未找到，默认取第一个
-                ;
+                columnOptions = currentOptions[index === -1 ? 0 : index]; // 如果未找到，默认取第一个
             } else {
                 return "break" // 如果 currentValue 不存在，终止循环
                 ;

package/dist/es/packages/popover/popover.js

@@ -74,93 +74,91 @@ export var Popover = function(props) {
     ]);
     var uid = useUuid();
     var popoverId = "popover-".concat(uid);
-    var getWrapperPosition = /*#__PURE__*/ function() {
-        var _ref = _async_to_generator(function() {
+    var getWrapperPosition = function() {
+        return _async_to_generator(function() {
             return _ts_generator(this, function(_state) {
-                nextTick(/*#__PURE__*/ _async_to_generator(function() {
-                    var rect, _tmp, width, height, right, left, top;
-                    return _ts_generator(this, function(_state) {
-                        switch(_state.label){
-                            case 0:
-                                if (!targetId) return [
-                                    3,
-                                    2
-                                ];
-                                return [
-                                    4,
-                                    getRectInMultiPlatform(document.querySelector("#".concat(targetId)), targetId)
-                                ];
-                            case 1:
-                                _tmp = _state.sent();
-                                return [
-                                    3,
-                                    4
-                                ];
-                            case 2:
-                                return [
-                                    4,
-                                    getRectInMultiPlatform(popoverRef.current, popoverId)
-                                ];
-                            case 3:
-                                _tmp = _state.sent();
-                                _state.label = 4;
-                            case 4:
-                                rect = _tmp;
-                                width = rect.width, height = rect.height, right = rect.right, left = rect.left, top = rect.top;
-                                setWrapperPosition({
-                                    width: width,
-                                    height: height,
-                                    left: rtl ? right : left,
-                                    top: top,
-                                    right: rtl ? left : right
-                                });
-                                getPopoverContentW();
-                                return [
-                                    2
-                                ];
-                        }
-                    });
-                }));
+                nextTick(function() {
+                    return _async_to_generator(function() {
+                        var rect, _tmp, width, height, right, left, top;
+                        return _ts_generator(this, function(_state) {
+                            switch(_state.label){
+                                case 0:
+                                    if (!targetId) return [
+                                        3,
+                                        2
+                                    ];
+                                    return [
+                                        4,
+                                        getRectInMultiPlatform(document.querySelector("#".concat(targetId)), targetId)
+                                    ];
+                                case 1:
+                                    _tmp = _state.sent();
+                                    return [
+                                        3,
+                                        4
+                                    ];
+                                case 2:
+                                    return [
+                                        4,
+                                        getRectInMultiPlatform(popoverRef.current, popoverId)
+                                    ];
+                                case 3:
+                                    _tmp = _state.sent();
+                                    _state.label = 4;
+                                case 4:
+                                    rect = _tmp;
+                                    width = rect.width, height = rect.height, right = rect.right, left = rect.left, top = rect.top;
+                                    setWrapperPosition({
+                                        width: width,
+                                        height: height,
+                                        left: rtl ? right : left,
+                                        top: top,
+                                        right: rtl ? left : right
+                                    });
+                                    getPopoverContentW();
+                                    return [
+                                        2
+                                    ];
+                            }
+                        });
+                    })();
+                });
                 return [
                     2
                 ];
             });
-        });
-        return function getWrapperPosition() {
-            return _ref.apply(this, arguments);
-        };
-    }();
-    var getPopoverContentW = /*#__PURE__*/ function() {
-        var _ref = _async_to_generator(function() {
+        })();
+    };
+    var getPopoverContentW = function() {
+        return _async_to_generator(function() {
             return _ts_generator(this, function(_state) {
-                nextTick(/*#__PURE__*/ _async_to_generator(function() {
-                    var rectContent;
-                    return _ts_generator(this, function(_state) {
-                        switch(_state.label){
-                            case 0:
-                                return [
-                                    4,
-                                    getRectInMultiPlatform(popoverContentRef.current)
-                                ];
-                            case 1:
-                                rectContent = _state.sent();
-                                setPopWidth(rectContent.width);
-                                setPopHeight(rectContent.height);
-                                return [
-                                    2
-                                ];
-                        }
-                    });
-                }));
+                nextTick(function() {
+                    return _async_to_generator(function() {
+                        var rectContent;
+                        return _ts_generator(this, function(_state) {
+                            switch(_state.label){
+                                case 0:
+                                    return [
+                                        4,
+                                        getRectInMultiPlatform(popoverContentRef.current)
+                                    ];
+                                case 1:
+                                    rectContent = _state.sent();
+                                    setPopWidth(rectContent.width);
+                                    setPopHeight(rectContent.height);
+                                    return [
+                                        2
+                                    ];
+                            }
+                        });
+                    })();
+                });
                 return [
                     2
                 ];
             });
-        });
-        return function getPopoverContentW() {
-            return _ref.apply(this, arguments);
-        };
-    }();
+        })();
+    };
     var clickAway = function() {
         if (closeOnOutsideClick) {
             onClick === null || onClick === void 0 ? void 0 : onClick();

package/dist/es/packages/popover/style/style.harmony.css

@@ -134,9 +134,6 @@
 .nut-popup-center.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
 }
-.nut-popup-bottom, .nut-popup-top {
-  max-height: 87%;
-}
 .nut-popup-bottom {
   bottom: 0;
   left: 0;

package/dist/es/packages/popup/popup.d.ts

@@ -1,3 +1,3 @@
 import React, { FunctionComponent } from 'react';
 import { TaroPopupProps } from "../../types";
-export declare const Popup: FunctionComponent<Partial<TaroPopupProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'title'>>;
+export declare const Popup: FunctionComponent<Partial<TaroPopupProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'title' | 'onTouchStart' | 'onTouchMove' | 'onTouchEnd'>>;

package/dist/es/packages/popup/popup.js

@@ -1,17 +1,21 @@
+import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
 import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
-import React, { useState, useEffect } from "react";
+import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
+import React, { useState, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import { CSSTransition } from "react-transition-group";
 import classNames from "classnames";
 import { Close } from "@nutui/icons-react-taro";
 import { View } from "@tarojs/components";
+import { getRectInMultiPlatformWithoutCache } from "../../utils/taro/get-rect";
 import { defaultOverlayProps } from "../overlay/overlay";
 import Overlay from "../overlay/index";
 import { useLockScrollTaro } from "../../hooks/taro/use-lock-scoll";
 import { harmony } from "../../utils/taro/platform";
+import { pxTransform } from "../../utils/taro/px-transform";
 var defaultProps = _object_spread_props(_object_spread({}, defaultOverlayProps), {
     position: 'center',
     transition: '',
@@ -24,6 +28,8 @@ var defaultProps = _object_spread_props(_object_spread({}, defaultOverlayProps),
     portal: null,
     overlay: true,
     round: false,
+    resizable: false,
+    minHeight: '',
     onOpen: function() {},
     onClose: function() {},
     onOverlayClick: function() {
@@ -31,29 +37,51 @@ var defaultProps = _object_spread_props(_object_spread({}, defaultOverlayProps),
     },
     onCloseIconClick: function() {
         return true;
-    }
+    },
+    onTouchStart: function() {},
+    onTouchMove: function() {},
+    onTouchEnd: function() {}
 });
 // 默认1000，参看variables
 var _zIndex = 1100;
 export var Popup = function(props) {
-    var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, visible = _$_object_spread.visible, overlay = _$_object_spread.overlay, closeOnOverlayClick = _$_object_spread.closeOnOverlayClick, overlayStyle = _$_object_spread.overlayStyle, overlayClassName = _$_object_spread.overlayClassName, zIndex = _$_object_spread.zIndex, lockScroll = _$_object_spread.lockScroll, duration = _$_object_spread.duration, closeable = _$_object_spread.closeable, closeIconPosition = _$_object_spread.closeIconPosition, closeIcon = _$_object_spread.closeIcon, left = _$_object_spread.left, title = _$_object_spread.title, description = _$_object_spread.description, style = _$_object_spread.style, transition = _$_object_spread.transition, round = _$_object_spread.round, position = _$_object_spread.position, className = _$_object_spread.className, destroyOnClose = _$_object_spread.destroyOnClose, portal = _$_object_spread.portal, onOpen = _$_object_spread.onOpen, onClose = _$_object_spread.onClose, onOverlayClick = _$_object_spread.onOverlayClick, onCloseIconClick = _$_object_spread.onCloseIconClick, afterShow = _$_object_spread.afterShow, afterClose = _$_object_spread.afterClose, onClick = _$_object_spread.onClick;
+    var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, visible = _$_object_spread.visible, overlay = _$_object_spread.overlay, closeOnOverlayClick = _$_object_spread.closeOnOverlayClick, overlayStyle = _$_object_spread.overlayStyle, overlayClassName = _$_object_spread.overlayClassName, zIndex = _$_object_spread.zIndex, lockScroll = _$_object_spread.lockScroll, duration = _$_object_spread.duration, closeable = _$_object_spread.closeable, closeIconPosition = _$_object_spread.closeIconPosition, closeIcon = _$_object_spread.closeIcon, left = _$_object_spread.left, title = _$_object_spread.title, description = _$_object_spread.description, style = _$_object_spread.style, transition = _$_object_spread.transition, round = _$_object_spread.round, position = _$_object_spread.position, className = _$_object_spread.className, destroyOnClose = _$_object_spread.destroyOnClose, portal = _$_object_spread.portal, resizable = _$_object_spread.resizable, minHeight = _$_object_spread.minHeight, onOpen = _$_object_spread.onOpen, onClose = _$_object_spread.onClose, onOverlayClick = _$_object_spread.onOverlayClick, onCloseIconClick = _$_object_spread.onCloseIconClick, afterShow = _$_object_spread.afterShow, afterClose = _$_object_spread.afterClose, onClick = _$_object_spread.onClick, onTouchStart = _$_object_spread.onTouchStart, onTouchMove = _$_object_spread.onTouchMove, onTouchEnd = _$_object_spread.onTouchEnd;
     var innerIndex = zIndex || _zIndex;
     var _useState = _sliced_to_array(useState(innerIndex), 2), index = _useState[0], setIndex = _useState[1];
     var _useState1 = _sliced_to_array(useState(visible), 2), innerVisible = _useState1[0], setInnerVisible = _useState1[1];
     var _useState2 = _sliced_to_array(useState(true), 2), showChildren = _useState2[0], setShowChildren = _useState2[1];
     var _useState3 = _sliced_to_array(useState(''), 2), transitionName = _useState3[0], setTransitionName = _useState3[1];
-    var refObject = useLockScrollTaro(innerVisible && lockScroll);
+    var nodeRef = useLockScrollTaro(innerVisible && lockScroll);
+    var rootRect = useRef(null);
+    var touchStartRef = useRef(0);
+    var touchMoveDistanceRef = useRef(0);
+    var heightRef = useRef(0);
+    var defaultHeightRef = useRef(0);
+    var isTouching = useRef(false);
     var classPrefix = 'nut-popup';
     var overlayStyles = _object_spread({}, overlayStyle);
     var contentZIndex = harmony() ? index + 1 : index // 解决harmony层级问题
     ;
     var popStyles = _object_spread({
-        zIndex: contentZIndex
+        zIndex: contentZIndex,
+        minHeight: minHeight
     }, style);
     var _obj;
     var popClassName = classNames(classPrefix, (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-round"), round || position === 'bottom'), _define_property(_obj, "".concat(classPrefix, "-").concat(position), true), _obj), className);
+    var _useState4 = _sliced_to_array(useState(''), 2), popupHeight = _useState4[0], setPopupHeight = _useState4[1];
+    var resizeStyles = function() {
+        if (popupHeight !== '') {
+            return {
+                height: popupHeight
+            };
+        }
+    };
     var open = function() {
         if (!innerVisible) {
+            // 当高度改变后，再次打开时，将高度置为初始高度
+            if (position === 'bottom' && resizable && nodeRef.current && heightRef.current) {
+                setPopupHeight(pxTransform(defaultHeightRef.current));
+            }
             setInnerVisible(true);
             setIndex(++innerIndex);
         }
@@ -107,18 +135,83 @@ export var Popup = function(props) {
             return renderCloseIcon();
         }
     };
+    var handleTouchStart = function(event) {
+        return _async_to_generator(function() {
+            var _nodeRef_current, _rootRect_current, e, rect;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        if (position !== 'bottom' || !resizable || !nodeRef.current) return [
+                            2
+                        ];
+                        e = event;
+                        // 开始touch，记录下touch的pageY，用以判断是向上滑动还是向下滑动
+                        touchStartRef.current = e.touches[0].pageY;
+                        // 标记开始滑动
+                        isTouching.current = true;
+                        return [
+                            4,
+                            getRectInMultiPlatformWithoutCache(nodeRef.current)
+                        ];
+                    case 1:
+                        rect = _state.sent();
+                        rootRect.current = rect;
+                        heightRef.current = ((_nodeRef_current = nodeRef.current) === null || _nodeRef_current === void 0 ? void 0 : _nodeRef_current.offsetHeight) || ((_rootRect_current = rootRect.current) === null || _rootRect_current === void 0 ? void 0 : _rootRect_current.height) || 0;
+                        if (!defaultHeightRef.current) defaultHeightRef.current = heightRef.current;
+                        onTouchStart === null || onTouchStart === void 0 ? void 0 : onTouchStart(heightRef.current, e);
+                        return [
+                            2
+                        ];
+                }
+            });
+        })();
+    };
+    var handleTouchMove = function(event) {
+        if (position !== 'bottom' || !resizable || !nodeRef.current || !rootRect.current) return;
+        var e = event;
+        e.stopPropagation();
+        // 计算位移：move过程中，当前的pageY 与 start值比较
+        touchMoveDistanceRef.current = e.touches[0].pageY - touchStartRef.current;
+        var handleMove = function() {
+            var min = typeof minHeight === 'number' ? minHeight : parseInt(String(minHeight || 0), 10) || 0;
+            var currentHeight = Math.max(min, heightRef.current - touchMoveDistanceRef.current);
+            setPopupHeight(pxTransform(currentHeight));
+            if (touchMoveDistanceRef.current > 0 && isTouching.current) {
+                // 向下滑动
+                onTouchMove === null || onTouchMove === void 0 ? void 0 : onTouchMove(currentHeight, e, 'down');
+            } else {
+                // 向上滑动
+                onTouchMove === null || onTouchMove === void 0 ? void 0 : onTouchMove(currentHeight, e, 'up');
+            }
+        };
+        requestAnimationFrame(handleMove);
+    };
+    var handleTouchEnd = function(event) {
+        if (position !== 'bottom' || !resizable || !nodeRef.current || !rootRect.current) return;
+        var e = event;
+        isTouching.current = false;
+        var min = typeof minHeight === 'number' ? minHeight : parseInt(String(minHeight || 0), 10) || 0;
+        var currentHeight = Math.max(min, heightRef.current - touchMoveDistanceRef.current);
+        onTouchEnd === null || onTouchEnd === void 0 ? void 0 : onTouchEnd(currentHeight, e);
+    };
     var renderContent = function() {
-        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(View, {
-            ref: refObject,
-            style: popStyles,
+        return /*#__PURE__*/ React.createElement(View, {
+            ref: nodeRef,
+            style: _object_spread(_object_spread_props(_object_spread({}, popStyles), {
+                display: innerVisible ? 'block' : 'none'
+            }), resizeStyles()),
             className: popClassName,
             onClick: onClick,
-            catchMove: lockScroll
-        }, renderTitle(), showChildren ? children : null));
+            catchMove: lockScroll,
+            onTouchStart: handleTouchStart,
+            onTouchMove: handleTouchMove,
+            onTouchEnd: handleTouchEnd,
+            onTouchCancel: handleTouchEnd
+        }, renderTitle(), showChildren ? children : null);
     };
     var renderPop = function() {
         return /*#__PURE__*/ React.createElement(CSSTransition, {
-            nodeRef: refObject,
+            nodeRef: nodeRef,
             classNames: transitionName,
             mountOnEnter: true,
             unmountOnExit: destroyOnClose,