@nutui/nutui-react-taro 3.0.6 → 3.0.7

package/dist/cjs/packages/empty/style/style.css

@@ -94,18 +94,6 @@
 .nut-button-round {
   border-radius: var(--nutui-button-border-radius, var(--nutui-radius-s, 6px));
 }
-.nut-button-round-xlarge {
-  border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, 8px));
-}
-.nut-button-round-large {
-  border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-base, 8px));
-}
-.nut-button-round-small {
-  border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-s, 6px));
-}
-.nut-button-round-mini {
-  border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, 4px));
-}
 .nut-button-default {
   padding: var(--nutui-button-default-padding, 0px 12px);
   border-style: solid;
@@ -131,7 +119,7 @@
   height: var(--nutui-button-xlarge-height, 48px);
   padding: var(--nutui-button-xlarge-padding, 0px 24px);
   font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
-  border-radius: var(--nutui-radius-base, 8px);
+  border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, 8px));
 }
 .nut-button-xlarge .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
@@ -151,7 +139,7 @@
   height: var(--nutui-button-large-height, 40px);
   padding: var(--nutui-button-large-padding, 0px 16px);
   font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
-  border-radius: var(--nutui-radius-s, 6px);
+  border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-base, 8px));
 }
 .nut-button-large .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
@@ -171,7 +159,7 @@
   height: var(--nutui-button-small-height, 28px);
   padding: var(--nutui-button-small-padding, 0px 8px);
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
-  border-radius: var(--nutui-radius-xs, 4px);
+  border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-s, 6px));
 }
 .nut-button-small .nut-icon {
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
@@ -185,7 +173,7 @@
   height: var(--nutui-button-mini-height, 24px);
   padding: var(--nutui-button-mini-padding, 0px 8px);
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
-  border-radius: var(--nutui-radius-xs, 4px);
+  border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, 4px));
 }
 .nut-button-mini .nut-icon {
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));

package/dist/cjs/packages/imagepreview/style/style.css

@@ -60,7 +60,7 @@
 
 .nut-popup {
   position: fixed;
-  min-height: 46%;
+  min-height: 26%;
   max-height: 100%;
   background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
   -webkit-overflow-scrolling: touch;
@@ -198,12 +198,12 @@
     transform: scale(0.8);
   }
 }
-.nut-popup-slide-default-enter-active {
+.nut-popup-slide-none-enter-active {
   animation-fill-mode: both;
   animation-name: popup-scale-fade-in;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-default-exit-active {
+.nut-popup-slide-none-exit-active {
   animation-fill-mode: both;
   animation-name: popup-scale-fade-out;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -330,7 +330,7 @@
   animation-name: popup-slide-left-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-default-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
+.nut-popup-slide-none-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
   display: none;
 }
 .nut-popup .nut-overflow-hidden {

package/dist/cjs/packages/numberkeyboard/style/style.css

@@ -60,7 +60,7 @@
 
 .nut-popup {
   position: fixed;
-  min-height: 46%;
+  min-height: 26%;
   max-height: 100%;
   background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
   -webkit-overflow-scrolling: touch;
@@ -198,12 +198,12 @@
     transform: scale(0.8);
   }
 }
-.nut-popup-slide-default-enter-active {
+.nut-popup-slide-none-enter-active {
   animation-fill-mode: both;
   animation-name: popup-scale-fade-in;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-default-exit-active {
+.nut-popup-slide-none-exit-active {
   animation-fill-mode: both;
   animation-name: popup-scale-fade-out;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -330,7 +330,7 @@
   animation-name: popup-slide-left-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-default-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
+.nut-popup-slide-none-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
   display: none;
 }
 .nut-popup .nut-overflow-hidden {

package/dist/cjs/packages/picker/style/style.css

@@ -60,7 +60,7 @@
 
 .nut-popup {
   position: fixed;
-  min-height: 46%;
+  min-height: 26%;
   max-height: 100%;
   background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
   -webkit-overflow-scrolling: touch;
@@ -198,12 +198,12 @@
     transform: scale(0.8);
   }
 }
-.nut-popup-slide-default-enter-active {
+.nut-popup-slide-none-enter-active {
   animation-fill-mode: both;
   animation-name: popup-scale-fade-in;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-default-exit-active {
+.nut-popup-slide-none-exit-active {
   animation-fill-mode: both;
   animation-name: popup-scale-fade-out;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -330,7 +330,7 @@
   animation-name: popup-slide-left-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-default-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
+.nut-popup-slide-none-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
   display: none;
 }
 .nut-popup .nut-overflow-hidden {

package/dist/cjs/packages/popover/popover.d.ts

@@ -1,10 +1,3 @@
 import React, { FunctionComponent } from 'react';
 import { TaroPopoverProps } from "../../types";
-export interface RootPosition {
-    width: number;
-    height: number;
-    left: number;
-    top: number;
-    right: number;
-}
 export declare const Popover: FunctionComponent<Partial<TaroPopoverProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'>>;

package/dist/cjs/packages/popover/popover.js

@@ -19,14 +19,15 @@ var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _ts_generator = require("@swc/helpers/_/_ts_generator");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
-var _taro = /*#__PURE__*/ _interop_require_wildcard._(require("@tarojs/taro"));
+var _taro = require("@tarojs/taro");
 var _components = require("@tarojs/components");
 var _iconsreacttaro = require("@nutui/icons-react-taro");
 var _index = /*#__PURE__*/ _interop_require_default._(require("../popup/index"));
 var _getrectbytaro = require("../../utils/get-rect-by-taro");
 var _typings = require("../../utils/typings");
-var _useclientrect = require("../../hooks/use-client-rect");
 var _index1 = require("../configprovider/index");
+var _pxtransform = /*#__PURE__*/ _interop_require_default._(require("../../utils/px-transform"));
+var _useuuid = /*#__PURE__*/ _interop_require_default._(require("../../hooks/use-uuid"));
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     list: [],
     theme: 'light',
@@ -38,7 +39,6 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     ],
     arrowOffset: 0,
     targetId: '',
-    className: '',
     showArrow: true,
     closeOnOutsideClick: true,
     closeOnActionClick: true,
@@ -73,129 +73,100 @@ var Popover = function Popover(props) {
     var popoverRef = (0, _react.useRef)(null);
     var popoverContentRef = (0, _react.useRef)(null);
     var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), showPopup = _useState[0], setShowPopup = _useState[1];
-    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), elWidth = _useState1[0], setElWidth = _useState1[1];
-    var _useState2 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), elHeight = _useState2[0], setElHeight = _useState2[1];
-    var _useState3 = (0, _sliced_to_array._)((0, _react.useState)(), 2), rootPosition = _useState3[0], setRootPosition = _useState3[1];
+    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), popWidth = _useState1[0], setPopWidth = _useState1[1];
+    var _useState2 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), popHeight = _useState2[0], setPopHeight = _useState2[1];
+    var _useState3 = (0, _sliced_to_array._)((0, _react.useState)(), 2), wrapperPosition = _useState3[0], setWrapperPosition = _useState3[1];
     (0, _react.useEffect)(function() {
         setShowPopup(visible);
         if (visible) {
-            setTimeout(function() {
-                getContentWidth();
-            }, 0);
+            getWrapperPosition();
         }
     }, [
         visible
     ]);
-    var getContentWidth = /*#__PURE__*/ function() {
+    var uid = (0, _useuuid.default)();
+    var popoverId = "popover-".concat(uid);
+    var getWrapperPosition = /*#__PURE__*/ function() {
         var _ref = (0, _async_to_generator._)(function() {
-            var rect;
             return (0, _ts_generator._)(this, function(_state) {
-                (0, _taro.createSelectorQuery)().selectViewport().scrollOffset(/*#__PURE__*/ function() {
-                    var _ref = (0, _async_to_generator._)(function(res) {
-                        var distance;
-                        return (0, _ts_generator._)(this, function(_state) {
-                            switch(_state.label){
-                                case 0:
-                                    distance = res.scrollTop;
-                                    if (!targetId) return [
-                                        3,
-                                        4
-                                    ];
-                                    if (!(_taro.default.getEnv() === _taro.default.ENV_TYPE.WEB)) return [
-                                        3,
-                                        1
-                                    ];
-                                    rect = (0, _useclientrect.getRect)(document.querySelector("#".concat(targetId)));
-                                    return [
-                                        3,
-                                        3
-                                    ];
-                                case 1:
-                                    return [
-                                        4,
-                                        getRectTaro(targetId)
-                                    ];
-                                case 2:
-                                    rect = _state.sent();
-                                    _state.label = 3;
-                                case 3:
-                                    return [
-                                        3,
-                                        6
-                                    ];
-                                case 4:
-                                    return [
-                                        4,
-                                        (0, _getrectbytaro.getRectByTaro)(popoverRef.current)
-                                    ];
-                                case 5:
-                                    rect = _state.sent();
-                                    _state.label = 6;
-                                case 6:
-                                    setRootPosition({
-                                        width: rect.width,
-                                        height: rect.height,
-                                        left: rtl ? rect.right : rect.left,
-                                        top: rect.top + distance,
-                                        right: rtl ? rect.left : rect.right
-                                    });
-                                    return [
-                                        2
-                                    ];
-                            }
-                        });
+                (0, _taro.nextTick)(/*#__PURE__*/ (0, _async_to_generator._)(function() {
+                    var rect, _tmp, width, height, right, left, top;
+                    return (0, _ts_generator._)(this, function(_state) {
+                        switch(_state.label){
+                            case 0:
+                                if (!targetId) return [
+                                    3,
+                                    2
+                                ];
+                                return [
+                                    4,
+                                    (0, _getrectbytaro.getRectByTaro)(document.querySelector("#".concat(targetId)), targetId)
+                                ];
+                            case 1:
+                                _tmp = _state.sent();
+                                return [
+                                    3,
+                                    4
+                                ];
+                            case 2:
+                                return [
+                                    4,
+                                    (0, _getrectbytaro.getRectByTaro)(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 function(res) {
-                        return _ref.apply(this, arguments);
-                    };
-                }()).exec();
-                setTimeout(function() {
-                    getPopoverContentW();
-                }, 300);
+                }));
                 return [
                     2
                 ];
             });
         });
-        return function getContentWidth() {
-            return _ref.apply(this, arguments);
-        };
-    }();
-    var getRectTaro = /*#__PURE__*/ function() {
-        var _ref = (0, _async_to_generator._)(function(targetId) {
-            return (0, _ts_generator._)(this, function(_state) {
-                return [
-                    2,
-                    new Promise(function(resolve) {
-                        (0, _taro.createSelectorQuery)().select("#".concat(targetId)).boundingClientRect().exec(function(res) {
-                            resolve(res[0]);
-                        });
-                    })
-                ];
-            });
-        });
-        return function getRectTaro(targetId) {
+        return function getWrapperPosition() {
             return _ref.apply(this, arguments);
         };
     }();
     var getPopoverContentW = /*#__PURE__*/ function() {
         var _ref = (0, _async_to_generator._)(function() {
-            var rectContent;
             return (0, _ts_generator._)(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        return [
-                            4,
-                            (0, _getrectbytaro.getRectByTaro)(popoverContentRef.current)
-                        ];
-                    case 1:
-                        rectContent = _state.sent();
-                        setElWidth(rectContent.width);
-                        setElHeight(rectContent.height);
-                        return [
-                            2
-                        ];
-                }
+                (0, _taro.nextTick)(/*#__PURE__*/ (0, _async_to_generator._)(function() {
+                    var rectContent;
+                    return (0, _ts_generator._)(this, function(_state) {
+                        switch(_state.label){
+                            case 0:
+                                return [
+                                    4,
+                                    (0, _getrectbytaro.getRectByTaro)(popoverContentRef.current)
+                                ];
+                            case 1:
+                                rectContent = _state.sent();
+                                setPopWidth(rectContent.width);
+                                setPopHeight(rectContent.height);
+                                return [
+                                    2
+                                ];
+                        }
+                    });
+                }));
+                return [
+                    2
+                ];
             });
         });
         return function getPopoverContentW() {
@@ -204,23 +175,23 @@ var Popover = function Popover(props) {
     }();
     var clickAway = function clickAway() {
         if (closeOnOutsideClick) {
-            onClick && onClick();
-            onClose && onClose();
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+            onClose === null || onClose === void 0 ? void 0 : onClose();
         }
     };
-    var _obj;
-    var classes = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(theme), theme === 'dark'), _obj), className);
+    var classes = (0, _classnames.default)(classPrefix, (0, _define_property._)({}, "".concat(classPrefix, "-").concat(theme), theme === 'dark'), className);
     var popoverArrow = function popoverArrow() {
         var prefixCls = 'nut-popover-arrow';
-        return "".concat(prefixCls, " ").concat(prefixCls, "-").concat(location.split('-')[0], " ").concat(prefixCls, "-").concat(location);
+        var direction = location.split('-')[0];
+        return "".concat(prefixCls, " ").concat(prefixCls, "-").concat(direction, " ").concat(prefixCls, "-").concat(location);
     };
-    var getRootPosition = function getRootPosition() {
+    var getPopoverPosition = function getPopoverPosition() {
         var styles = {};
-        if (!rootPosition) {
+        if (!wrapperPosition) {
             styles.visibility = 'hidden';
             return styles;
         }
-        var width = rootPosition.width, height = rootPosition.height, left = rootPosition.left, top = rootPosition.top, right = rootPosition.right;
+        var width = wrapperPosition.width, height = wrapperPosition.height, left = wrapperPosition.left, top = wrapperPosition.top, right = wrapperPosition.right;
         var direction = location.split('-')[0];
         var skew = location.split('-')[1];
         var cross = 0;
@@ -236,36 +207,36 @@ var Popover = function Popover(props) {
                 'bottom',
                 'top'
             ].includes(direction)) {
-                var h = direction === 'bottom' ? height + cross : -(elHeight + cross);
-                styles.top = "".concat(top + h, "px");
+                var h = direction === 'bottom' ? height + cross : -(popHeight + cross);
+                styles.top = (0, _pxtransform.default)(top + h);
                 if (!skew) {
-                    styles[dir] = "".concat(-(elWidth - width) / 2 + rootPosition[dir] + parallel, "px");
+                    styles[dir] = (0, _pxtransform.default)(-(popWidth - width) / 2 + wrapperPosition[dir] + parallel);
                 }
-                if (skew === 'start') {
-                    styles.left = "".concat(left + parallel, "px");
+                if (skew === 'left') {
+                    styles.left = (0, _pxtransform.default)(left + parallel);
                 }
-                if (skew === 'end') {
-                    styles.left = "".concat(right + parallel, "px");
+                if (skew === 'right') {
+                    styles.left = (0, _pxtransform.default)(right + parallel);
                 }
             }
             if ([
                 'left',
                 'right'
             ].includes(direction)) {
-                var contentW = direction === 'left' ? -(elWidth + cross) : width + cross;
-                styles.left = "".concat(left + contentW, "px");
+                var contentW = direction === 'left' ? -(popWidth + cross) : width + cross;
+                styles.left = (0, _pxtransform.default)(left + contentW);
                 if (!skew) {
-                    styles.top = "".concat(top - elHeight / 2 + height / 2 - 4 + parallel, "px");
+                    styles.top = (0, _pxtransform.default)(top - popHeight / 2 + height / 2 - 4 + parallel);
                 }
-                if (skew === 'start') {
-                    styles.top = "".concat(top + parallel, "px");
+                if (skew === 'top') {
+                    styles.top = (0, _pxtransform.default)(top + parallel);
                 }
-                if (skew === 'end') {
-                    styles.top = "".concat(top + height + parallel, "px");
+                if (skew === 'bottom') {
+                    styles.top = (0, _pxtransform.default)(top + height + parallel);
                 }
             }
         }
-        styles.visibility = elWidth === 0 ? 'hidden' : 'initial';
+        styles.visibility = popWidth === 0 ? 'hidden' : 'initial';
         return styles;
     };
     var popoverArrowStyle = function popoverArrowStyle() {
@@ -283,10 +254,10 @@ var Popover = function Popover(props) {
                 if (!skew) {
                     styles[dir] = "calc(50% + ".concat(arrowOffset, "px)");
                 }
-                if (skew === 'start') {
+                if (skew === 'left') {
                     styles[dir] = "".concat(base + arrowOffset, "px");
                 }
-                if (skew === 'end') {
+                if (skew === 'right') {
                     styles[dir2] = "".concat(base - arrowOffset, "px");
                 }
             }
@@ -297,10 +268,10 @@ var Popover = function Popover(props) {
                 if (!skew) {
                     styles.top = "calc(50% - ".concat(arrowOffset, "px)");
                 }
-                if (skew === 'start') {
+                if (skew === 'top') {
                     styles.top = "".concat(base - arrowOffset, "px");
                 }
-                if (skew === 'end') {
+                if (skew === 'bottom') {
                     styles.bottom = "".concat(base + arrowOffset, "px");
                 }
             }
@@ -319,6 +290,7 @@ var Popover = function Popover(props) {
     return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, !targetId && /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "nut-popover-wrapper",
         ref: popoverRef,
+        id: popoverId,
         onClick: function onClick() {
             var _props_onClick;
             props === null || props === void 0 ? void 0 : (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props);
@@ -331,7 +303,7 @@ var Popover = function Popover(props) {
         style: style
     }, Array.isArray(children) ? children[0] : children), /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: classes,
-        style: getRootPosition()
+        style: (0, _object_spread._)({}, getPopoverPosition(), style)
     }, /*#__PURE__*/ _react.default.createElement(_index.default, (0, _object_spread._)({
         className: "nut-popover-content nut-popover-content-".concat(location),
         position: "none",
@@ -346,22 +318,23 @@ var Popover = function Popover(props) {
     }, /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.ArrowRadius, {
         width: 8,
         height: 4
-    })), Array.isArray(children) ? children[1] : '', list.map(function(item, index) {
+    })), Array.isArray(children) ? children[1] : null, list.map(function(item, index) {
+        var _item_action;
         return /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: (0, _classnames.default)({
-                'nut-popover-menu-item': true,
-                'nut-popover-menu-disabled': item.disabled
+                'nut-popover-item': true,
+                'nut-popover-item-disabled': item.disabled
             }, item.className),
             key: item.key || index,
             onClick: function onClick() {
                 return handleSelect(item, index);
             }
         }, item.icon && /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: "nut-popover-menu-item-icon"
-        }, item.icon), /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: "nut-popover-menu-item-name"
-        }, item.name), item.action && item.action.icon && /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: "nut-popover-menu-item-action-icon",
+            className: "nut-popover-item-icon"
+        }, item.icon), /*#__PURE__*/ _react.default.createElement(_components.Text, {
+            className: "nut-popover-item-name"
+        }, item.name), ((_item_action = item.action) === null || _item_action === void 0 ? void 0 : _item_action.icon) && /*#__PURE__*/ _react.default.createElement(_components.View, {
+            className: "nut-popover-item-action-icon",
             onClick: function onClick(e) {
                 var _item_action_onClick, _item_action;
                 return (_item_action = item.action) === null || _item_action === void 0 ? void 0 : (_item_action_onClick = _item_action.onClick) === null || _item_action_onClick === void 0 ? void 0 : _item_action_onClick.call(_item_action, e);