@nutui/nutui-react-taro 1.5.11-beta.0 → 1.5.11-beta.2

package/dist/nutui.react.mjs

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react-taro v1.5.11-beta.0 Wed Jul 05 2023 10:55:52 GMT+0800 (中国标准时间)
+* @nutui/nutui-react-taro v1.5.11 Thu Jul 06 2023 16:47:25 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -15,10 +15,15 @@ import Taro, { redirectTo, navigateTo, getEnv, usePageScroll, getSystemInfoSync,
 import { View, ScrollView, PickerView, PickerViewColumn, Image as Image$2 } from "@tarojs/components";
 import ReactDOM, { createPortal, unstable_batchedUpdates } from "react-dom";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
-function getDefaultExportFromCjs(x) {
-  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
-}
-var classname = { exports: {} };
+var classnameExports = {};
+var classname = {
+  get exports() {
+    return classnameExports;
+  },
+  set exports(v) {
+    classnameExports = v;
+  }
+};
 var classname_production_min = {};
 var hasRequiredClassname_production_min;
 function requireClassname_production_min() {
@@ -122,12 +127,13 @@ function requireClassname_development() {
   classname_development.withNaming = withNaming;
   return classname_development;
 }
-if (process.env.NODE_ENV === "production") {
-  classname.exports = requireClassname_production_min();
-} else {
-  classname.exports = requireClassname_development();
-}
-var classnameExports = classname.exports;
+(function(module) {
+  if (process.env.NODE_ENV === "production") {
+    module.exports = requireClassname_production_min();
+  } else {
+    module.exports = requireClassname_development();
+  }
+})(classname);
 const cn = classnameExports.withNaming({ n: "nut-", e: "__", m: "--", v: "-" });
 const defaultProps$1v = {
   name: "",
@@ -743,7 +749,6 @@ function words(string, pattern, guard) {
   return string.match(pattern) || [];
 }
 var lodash_kebabcase = kebabCase;
-const kebabCase$1 = /* @__PURE__ */ getDefaultExportFromCjs(lodash_kebabcase);
 const zhCN = {
   save: "保存",
   confirm: "确认",
@@ -891,7 +896,7 @@ const useConfig$1 = () => {
 function convertThemeVarsToCSSVars(themeVars) {
   const cssVars = {};
   Object.keys(themeVars).forEach((key) => {
-    cssVars[`--${kebabCase$1(key)}`] = themeVars[key];
+    cssVars[`--${lodash_kebabcase(key)}`] = themeVars[key];
   });
   return cssVars;
 }
@@ -1008,7 +1013,15 @@ const Image$1 = (props) => {
 };
 Image$1.defaultProps = defaultProps$1q;
 Image$1.displayName = "NutImage";
-var classnames = { exports: {} };
+var classnamesExports = {};
+var classnames = {
+  get exports() {
+    return classnamesExports;
+  },
+  set exports(v) {
+    classnamesExports = v;
+  }
+};
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
@@ -1055,8 +1068,7 @@ var classnames = { exports: {} };
     }
   })();
 })(classnames);
-var classnamesExports = classnames.exports;
-const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
+const classNames = classnamesExports;
 const defaultOverlayProps = {
   zIndex: 2e3,
   duration: 0.3,
@@ -1182,8 +1194,24 @@ function _inheritsLoose(subClass, superClass) {
   subClass.prototype.constructor = subClass;
   _setPrototypeOf(subClass, superClass);
 }
-var propTypes = { exports: {} };
-var reactIs = { exports: {} };
+var propTypesExports = {};
+var propTypes = {
+  get exports() {
+    return propTypesExports;
+  },
+  set exports(v) {
+    propTypesExports = v;
+  }
+};
+var reactIsExports = {};
+var reactIs = {
+  get exports() {
+    return reactIsExports;
+  },
+  set exports(v) {
+    reactIsExports = v;
+  }
+};
 var reactIs_production_min = {};
 /** @license React v16.13.1
  * react-is.production.min.js
@@ -1454,14 +1482,16 @@ function requireReactIs_development() {
 var hasRequiredReactIs;
 function requireReactIs() {
   if (hasRequiredReactIs)
-    return reactIs.exports;
+    return reactIsExports;
   hasRequiredReactIs = 1;
-  if (process.env.NODE_ENV === "production") {
-    reactIs.exports = requireReactIs_production_min();
-  } else {
-    reactIs.exports = requireReactIs_development();
-  }
-  return reactIs.exports;
+  (function(module) {
+    if (process.env.NODE_ENV === "production") {
+      module.exports = requireReactIs_production_min();
+    } else {
+      module.exports = requireReactIs_development();
+    }
+  })(reactIs);
+  return reactIsExports;
 }
 /*
 object-assign
@@ -2128,8 +2158,6 @@ if (process.env.NODE_ENV !== "production") {
 } else {
   propTypes.exports = requireFactoryWithThrowingShims()();
 }
-var propTypesExports = propTypes.exports;
-const PropTypes = /* @__PURE__ */ getDefaultExportFromCjs(propTypesExports);
 function hasClass(element, className) {
   if (element.classList)
     return !!className && element.classList.contains(className);
@@ -2159,22 +2187,22 @@ function removeClass$1(element, className) {
 const config$1 = {
   disabled: false
 };
-var timeoutsShape = process.env.NODE_ENV !== "production" ? PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-  enter: PropTypes.number,
-  exit: PropTypes.number,
-  appear: PropTypes.number
+var timeoutsShape = process.env.NODE_ENV !== "production" ? propTypesExports.oneOfType([propTypesExports.number, propTypesExports.shape({
+  enter: propTypesExports.number,
+  exit: propTypesExports.number,
+  appear: propTypesExports.number
 }).isRequired]) : null;
-var classNamesShape = process.env.NODE_ENV !== "production" ? PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
-  enter: PropTypes.string,
-  exit: PropTypes.string,
-  active: PropTypes.string
-}), PropTypes.shape({
-  enter: PropTypes.string,
-  enterDone: PropTypes.string,
-  enterActive: PropTypes.string,
-  exit: PropTypes.string,
-  exitDone: PropTypes.string,
-  exitActive: PropTypes.string
+var classNamesShape = process.env.NODE_ENV !== "production" ? propTypesExports.oneOfType([propTypesExports.string, propTypesExports.shape({
+  enter: propTypesExports.string,
+  exit: propTypesExports.string,
+  active: propTypesExports.string
+}), propTypesExports.shape({
+  enter: propTypesExports.string,
+  enterDone: propTypesExports.string,
+  enterActive: propTypesExports.string,
+  exit: propTypesExports.string,
+  exitDone: propTypesExports.string,
+  exitActive: propTypesExports.string
 })]) : null;
 const TransitionGroupContext = React__default.createContext(null);
 var forceReflow = function forceReflow2(node) {
@@ -2424,10 +2452,10 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *     (see
    *     [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).
    */
-  nodeRef: PropTypes.shape({
-    current: typeof Element === "undefined" ? PropTypes.any : function(propValue, key, componentName, location, propFullName, secret) {
+  nodeRef: propTypesExports.shape({
+    current: typeof Element === "undefined" ? propTypesExports.any : function(propValue, key, componentName, location, propFullName, secret) {
       var value = propValue[key];
-      return PropTypes.instanceOf(value && "ownerDocument" in value ? value.ownerDocument.defaultView.Element : Element)(propValue, key, componentName, location, propFullName, secret);
+      return propTypesExports.instanceOf(value && "ownerDocument" in value ? value.ownerDocument.defaultView.Element : Element)(propValue, key, componentName, location, propFullName, secret);
     }
   }),
   /**
@@ -2444,23 +2472,23 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    * </Transition>
    * ```
    */
-  children: PropTypes.oneOfType([PropTypes.func.isRequired, PropTypes.element.isRequired]).isRequired,
+  children: propTypesExports.oneOfType([propTypesExports.func.isRequired, propTypesExports.element.isRequired]).isRequired,
   /**
    * Show the component; triggers the enter or exit states
    */
-  in: PropTypes.bool,
+  in: propTypesExports.bool,
   /**
    * By default the child component is mounted immediately along with
    * the parent `Transition` component. If you want to "lazy mount" the component on the
    * first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay
    * mounted, even on "exited", unless you also specify `unmountOnExit`.
    */
-  mountOnEnter: PropTypes.bool,
+  mountOnEnter: propTypesExports.bool,
   /**
    * By default the child component stays mounted after it reaches the `'exited'` state.
    * Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting.
    */
-  unmountOnExit: PropTypes.bool,
+  unmountOnExit: propTypesExports.bool,
   /**
    * By default the child component does not perform the enter transition when
    * it first mounts, regardless of the value of `in`. If you want this
@@ -2472,15 +2500,15 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    * > additional `.appear-*` classes, that way you can choose to style it
    * > differently.
    */
-  appear: PropTypes.bool,
+  appear: propTypesExports.bool,
   /**
    * Enable or disable enter transitions.
    */
-  enter: PropTypes.bool,
+  enter: propTypesExports.bool,
   /**
    * Enable or disable exit transitions.
    */
-  exit: PropTypes.bool,
+  exit: propTypesExports.bool,
   /**
    * The duration of the transition, in milliseconds.
    * Required unless `addEndListener` is provided.
@@ -2530,7 +2558,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    * }}
    * ```
    */
-  addEndListener: PropTypes.func,
+  addEndListener: propTypesExports.func,
   /**
    * Callback fired before the "entering" status is applied. An extra parameter
    * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
@@ -2539,7 +2567,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement, isAppearing: bool) -> void
    */
-  onEnter: PropTypes.func,
+  onEnter: propTypesExports.func,
   /**
    * Callback fired after the "entering" status is applied. An extra parameter
    * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
@@ -2548,7 +2576,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement, isAppearing: bool)
    */
-  onEntering: PropTypes.func,
+  onEntering: propTypesExports.func,
   /**
    * Callback fired after the "entered" status is applied. An extra parameter
    * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
@@ -2557,7 +2585,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement, isAppearing: bool) -> void
    */
-  onEntered: PropTypes.func,
+  onEntered: propTypesExports.func,
   /**
    * Callback fired before the "exiting" status is applied.
    *
@@ -2565,7 +2593,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement) -> void
    */
-  onExit: PropTypes.func,
+  onExit: propTypesExports.func,
   /**
    * Callback fired after the "exiting" status is applied.
    *
@@ -2573,7 +2601,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement) -> void
    */
-  onExiting: PropTypes.func,
+  onExiting: propTypesExports.func,
   /**
    * Callback fired after the "exited" status is applied.
    *
@@ -2581,7 +2609,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement) -> void
    */
-  onExited: PropTypes.func
+  onExited: propTypesExports.func
 } : {};
 function noop$2() {
 }
@@ -2820,7 +2848,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$3({},
    *
    * @type Function(node: HtmlElement, isAppearing: bool)
    */
-  onEnter: PropTypes.func,
+  onEnter: propTypesExports.func,
   /**
    * A `<Transition>` callback fired immediately after the 'enter-active' or
    * 'appear-active' class is applied.
@@ -2829,7 +2857,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$3({},
    *
    * @type Function(node: HtmlElement, isAppearing: bool)
    */
-  onEntering: PropTypes.func,
+  onEntering: propTypesExports.func,
   /**
    * A `<Transition>` callback fired immediately after the 'enter' or
    * 'appear' classes are **removed** and the `done` class is added to the DOM node.
@@ -2838,7 +2866,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$3({},
    *
    * @type Function(node: HtmlElement, isAppearing: bool)
    */
-  onEntered: PropTypes.func,
+  onEntered: propTypesExports.func,
   /**
    * A `<Transition>` callback fired immediately after the 'exit' class is
    * applied.
@@ -2847,7 +2875,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$3({},
    *
    * @type Function(node: HtmlElement)
    */
-  onExit: PropTypes.func,
+  onExit: propTypesExports.func,
   /**
    * A `<Transition>` callback fired immediately after the 'exit-active' is applied.
    *
@@ -2855,7 +2883,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$3({},
    *
    * @type Function(node: HtmlElement)
    */
-  onExiting: PropTypes.func,
+  onExiting: propTypesExports.func,
   /**
    * A `<Transition>` callback fired immediately after the 'exit' classes
    * are **removed** and the `exit-done` class is added to the DOM node.
@@ -2864,7 +2892,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$3({},
    *
    * @type Function(node: HtmlElement)
    */
-  onExited: PropTypes.func
+  onExited: propTypesExports.func
 }) : {};
 const CSSTransition$1 = CSSTransition;
 const defaultProps$1p = {
@@ -4103,6 +4131,19 @@ const MenuItem = forwardRef((props, ref) => {
   useEffect(() => {
     getParentOffset();
   }, [_showPopup]);
+  const windowHeight = useMemo(() => getSystemInfoSync().windowHeight, []);
+  const updateItemOffset = useCallback(() => {
+    const p = parent.parent().current;
+    p.getBoundingClientRect().then((rect) => {
+      if (rect) {
+        setPosition({
+          height: rect.height,
+          top: rect.top
+        });
+      }
+    });
+  }, [direction, windowHeight]);
+  usePageScroll(updateItemOffset);
   useImperativeHandle(ref, () => ({
     toggle: parent.toggleItemShow
   }));
@@ -4143,114 +4184,103 @@ const MenuItem = forwardRef((props, ref) => {
     return { display: "none" };
   };
   const getPosition = () => {
-    return direction === "down" ? { position: "absolute", height: `${window.innerHeight}px` } : {
-      position: "absolute",
-      bottom: "100%",
-      top: "auto",
-      height: `${window.innerHeight}px`
+    return direction === "down" ? { top: `${position.top + position.height}px` } : {
+      bottom: `${getSystemInfoSync().windowHeight - position.top}px`,
+      top: "0",
+      height: "initial"
     };
   };
   const placeholderStyle = () => {
     if (direction === "down") {
       return {
         height: `${position.top + position.height}px`,
-        top: "auto",
-        bottom: "-100%",
-        ...isShow()
+        ...isShow(),
+        ...style
       };
     }
     return {
       height: `${getSystemInfoSync().windowHeight - position.top}px`,
-      bottom: `auto`,
-      top: "0",
-      ...isShow()
+      top: "auto",
+      ...isShow(),
+      ...style
     };
   };
-  return /* @__PURE__ */ React__default.createElement(
-    "div",
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+    View,
     {
-      className: "nut-menu-item-container",
-      style: { position: "absolute", left: 0, right: 0 }
-    },
-    /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        className: `placeholder-element ${classNames({
-          up: direction === "up"
-        })}`,
-        style: placeholderStyle(),
-        onClick: () => parent.toggleItemShow(orderKey)
+      className: `placeholder-element ${classNames({
+        up: direction === "up"
+      })}`,
+      style: placeholderStyle(),
+      onClick: () => parent.toggleItemShow(orderKey)
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    Overlay,
+    {
+      overlayClass: "nut-menu__overlay",
+      style: getPosition(),
+      lockScroll: parent.lockScroll,
+      visible: _showPopup,
+      closeOnClickOverlay: parent.closeOnClickOverlay,
+      onClick: () => {
+        parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
       }
-    ),
-    /* @__PURE__ */ React__default.createElement(
-      Overlay,
-      {
-        overlayClass: "nut-menu__overlay",
-        style: getPosition(),
-        lockScroll: parent.lockScroll,
-        visible: _showPopup,
-        closeOnClickOverlay: parent.closeOnClickOverlay,
-        onClick: () => {
-          parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
-        }
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    View,
+    {
+      className: direction === "down" ? "nut-menu-item__wrap" : "nut-menu-item__wrap-up",
+      style: {
+        // ...getPosition(),
+        ...isShow()
       }
-    ),
+    },
     /* @__PURE__ */ React__default.createElement(
-      "div",
+      CSSTransition$1,
       {
-        className: direction === "down" ? "nut-menu-item__wrap" : "nut-menu-item__wrap-up",
-        style: {
-          // ...getPosition(),
-          ...isShow()
-        }
+        in: _showPopup,
+        timeout: 100,
+        classNames: direction === "down" ? "menu-item" : "menu-item-up"
       },
-      /* @__PURE__ */ React__default.createElement(
-        CSSTransition$1,
-        {
-          in: _showPopup,
-          timeout: 100,
-          classNames: direction === "down" ? "menu-item" : "menu-item-up"
-        },
-        /* @__PURE__ */ React__default.createElement("div", { className: "nut-menu-item__content" }, options == null ? void 0 : options.map((item, index) => {
-          return /* @__PURE__ */ React__default.createElement(
-            "div",
+      /* @__PURE__ */ React__default.createElement(View, { className: "nut-menu-item__content" }, options == null ? void 0 : options.map((item, index) => {
+        return /* @__PURE__ */ React__default.createElement(
+          View,
+          {
+            className: `nut-menu-item__option ${classNames({
+              active: item.value === _value
+            })}`,
+            key: item.text,
+            style: {
+              flexBasis: `${100 / columns}%`
+            },
+            onClick: () => {
+              handleClick(item);
+            }
+          },
+          item.value === _value ? /* @__PURE__ */ React__default.createElement(
+            Icon$1,
+            {
+              classPrefix: iconClassPrefix,
+              fontClassName: iconFontClassName,
+              className: getIconCName(item.value, value),
+              name: optionsIcon,
+              color: activeColor
+            }
+          ) : null,
+          /* @__PURE__ */ React__default.createElement(
+            View,
             {
-              className: `nut-menu-item__option ${classNames({
-                active: item.value === _value
-              })}`,
-              key: item.text,
+              className: getIconCName(item.value, value),
               style: {
-                flexBasis: `${100 / columns}%`
-              },
-              onClick: () => {
-                handleClick(item);
+                color: `${item.value === _value ? activeColor : ""}`
               }
             },
-            item.value === _value ? /* @__PURE__ */ React__default.createElement(
-              Icon$1,
-              {
-                classPrefix: iconClassPrefix,
-                fontClassName: iconFontClassName,
-                className: getIconCName(item.value, value),
-                name: optionsIcon,
-                color: activeColor
-              }
-            ) : null,
-            /* @__PURE__ */ React__default.createElement(
-              "div",
-              {
-                className: getIconCName(item.value, value),
-                style: {
-                  color: `${item.value === _value ? activeColor : ""}`
-                }
-              },
-              item.text
-            )
-          );
-        }), children)
-      )
+            item.text
+          )
+        );
+      }), children)
     )
-  );
+  ));
 });
 MenuItem.defaultProps = defaultProps$1d;
 MenuItem.displayName = "NutMenuItem";