@nutui/nutui-react 1.5.12-beta.0 → 1.5.13-beta.0

package/dist/nutui.react.umd.js

@@ -9,7 +9,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react v1.5.11 Wed Jul 05 2023 11:12:19 GMT+0800 (中国标准时间)
+* @nutui/nutui-react v1.5.13-beta.0 Mon Dec 11 2023 11:23:55 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -33,10 +33,15 @@ var __publicField = (obj, key, value) => {
   const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
   const ReactDOM__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactDOM);
   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() {
@@ -140,12 +145,13 @@ var __publicField = (obj, key, value) => {
     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(module2) {
+    if (process.env.NODE_ENV === "production") {
+      module2.exports = requireClassname_production_min();
+    } else {
+      module2.exports = requireClassname_development();
+    }
+  })(classname);
   const cn = classnameExports.withNaming({ n: "nut-", e: "__", m: "--", v: "-" });
   const defaultProps$1s = {
     name: "",
@@ -757,7 +763,6 @@ var __publicField = (obj, key, value) => {
     return string2.match(pattern2) || [];
   }
   var lodash_kebabcase = kebabCase;
-  const kebabCase$1 = /* @__PURE__ */ getDefaultExportFromCjs(lodash_kebabcase);
   const zhCN = {
     save: "保存",
     confirm: "确认",
@@ -905,7 +910,7 @@ var __publicField = (obj, key, value) => {
   function convertThemeVarsToCSSVars(themeVars) {
     const cssVars = {};
     Object.keys(themeVars).forEach((key) => {
-      cssVars[`--${kebabCase$1(key)}`] = themeVars[key];
+      cssVars[`--${lodash_kebabcase(key)}`] = themeVars[key];
     });
     return cssVars;
   }
@@ -1083,7 +1088,15 @@ var __publicField = (obj, key, value) => {
   };
   Image$1.defaultProps = defaultProps$1n;
   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
@@ -1130,8 +1143,7 @@ var __publicField = (obj, key, value) => {
       }
     })();
   })(classnames);
-  var classnamesExports = classnames.exports;
-  const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
+  const classNames = classnamesExports;
   const defaultOverlayProps = {
     zIndex: 1e3,
     duration: 0.3,
@@ -1246,8 +1258,24 @@ var __publicField = (obj, key, value) => {
     subClass.prototype.constructor = subClass;
     _setPrototypeOf$1(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
@@ -1518,14 +1546,16 @@ var __publicField = (obj, key, value) => {
   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(module2) {
+      if (process.env.NODE_ENV === "production") {
+        module2.exports = requireReactIs_production_min();
+      } else {
+        module2.exports = requireReactIs_development();
+      }
+    })(reactIs);
+    return reactIsExports;
   }
   /*
   object-assign
@@ -2192,8 +2222,6 @@ var __publicField = (obj, key, value) => {
   } 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);
@@ -2223,22 +2251,22 @@ var __publicField = (obj, key, value) => {
   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.createContext(null);
   var forceReflow = function forceReflow2(node) {
@@ -2488,10 +2516,10 @@ var __publicField = (obj, key, value) => {
      *     (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);
       }
     }),
     /**
@@ -2508,23 +2536,23 @@ var __publicField = (obj, key, value) => {
      * </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
@@ -2536,15 +2564,15 @@ var __publicField = (obj, key, value) => {
      * > 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.
@@ -2594,7 +2622,7 @@ var __publicField = (obj, key, value) => {
      * }}
      * ```
      */
-    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
@@ -2603,7 +2631,7 @@ var __publicField = (obj, key, value) => {
      *
      * @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
@@ -2612,7 +2640,7 @@ var __publicField = (obj, key, value) => {
      *
      * @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
@@ -2621,7 +2649,7 @@ var __publicField = (obj, key, value) => {
      *
      * @type Function(node: HtmlElement, isAppearing: bool) -> void
      */
-    onEntered: PropTypes.func,
+    onEntered: propTypesExports.func,
     /**
      * Callback fired before the "exiting" status is applied.
      *
@@ -2629,7 +2657,7 @@ var __publicField = (obj, key, value) => {
      *
      * @type Function(node: HtmlElement) -> void
      */
-    onExit: PropTypes.func,
+    onExit: propTypesExports.func,
     /**
      * Callback fired after the "exiting" status is applied.
      *
@@ -2637,7 +2665,7 @@ var __publicField = (obj, key, value) => {
      *
      * @type Function(node: HtmlElement) -> void
      */
-    onExiting: PropTypes.func,
+    onExiting: propTypesExports.func,
     /**
      * Callback fired after the "exited" status is applied.
      *
@@ -2645,7 +2673,7 @@ var __publicField = (obj, key, value) => {
      *
      * @type Function(node: HtmlElement) -> void
      */
-    onExited: PropTypes.func
+    onExited: propTypesExports.func
   } : {};
   function noop$2() {
   }
@@ -2884,7 +2912,7 @@ var __publicField = (obj, key, value) => {
      *
      * @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.
@@ -2893,7 +2921,7 @@ var __publicField = (obj, key, value) => {
      *
      * @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.
@@ -2902,7 +2930,7 @@ var __publicField = (obj, key, value) => {
      *
      * @type Function(node: HtmlElement, isAppearing: bool)
      */
-    onEntered: PropTypes.func,
+    onEntered: propTypesExports.func,
     /**
      * A `<Transition>` callback fired immediately after the 'exit' class is
      * applied.
@@ -2911,7 +2939,7 @@ var __publicField = (obj, key, value) => {
      *
      * @type Function(node: HtmlElement)
      */
-    onExit: PropTypes.func,
+    onExit: propTypesExports.func,
     /**
      * A `<Transition>` callback fired immediately after the 'exit-active' is applied.
      *
@@ -2919,7 +2947,7 @@ var __publicField = (obj, key, value) => {
      *
      * @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.
@@ -2928,7 +2956,7 @@ var __publicField = (obj, key, value) => {
      *
      * @type Function(node: HtmlElement)
      */
-    onExited: PropTypes.func
+    onExited: propTypesExports.func
   }) : {};
   const CSSTransition$1 = CSSTransition;
   const defaultProps$1m = {
@@ -3319,6 +3347,7 @@ var __publicField = (obj, key, value) => {
       iconClassPrefix,
       iconFontClassName,
       onClick,
+      style,
       ...rest
     } = {
       ...defaultProps$1i,
@@ -3330,18 +3359,18 @@ var __publicField = (obj, key, value) => {
       return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
     };
     const rootStyle = () => {
-      const style = {
+      const rootStyle2 = {
         flexBasis: `${100 / +columnNum}%`
       };
       if (square) {
-        style.paddingTop = `${100 / +columnNum}%`;
+        rootStyle2.paddingTop = `${100 / +columnNum}%`;
       } else if (gutter) {
-        style.paddingRight = pxCheck2(gutter);
+        rootStyle2.paddingRight = pxCheck2(gutter);
         if (index >= columnNum) {
-          style.marginTop = pxCheck2(gutter);
+          rootStyle2.marginTop = pxCheck2(gutter);
         }
       }
-      return style;
+      return { ...rootStyle2, ...style };
     };
     const contentClass = () => {
       return classNames(b2("content"), {
@@ -9342,116 +9371,99 @@ Please add \`${key}Action\` when creating your handler.`);
       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: `${window.innerHeight - position.top}px`, top: "auto" };
     };
     const placeholderStyle = () => {
       if (direction === "down") {
         return {
           height: `${position.top + position.height}px`,
-          top: "auto",
-          bottom: "-100%",
           ...isShow(),
           ...style
         };
       }
       return {
         height: `${window.innerHeight - position.top}px`,
-        bottom: `auto`,
-        top: "0",
+        top: "auto",
         ...isShow(),
         ...style
       };
     };
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: "nut-menu-item-container",
-        style: { position: "absolute", left: 0, right: 0 }
-      },
-      /* @__PURE__ */ React.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.createElement(
+      Overlay,
+      {
+        overlayClass: "nut-menu__overlay",
+        style: getPosition(),
+        lockScroll: parent.lockScroll,
+        visible: _showPopup,
+        closeOnClickOverlay: parent.closeOnClickOverlay,
+        onClick: () => {
+          parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
         }
-      ),
-      /* @__PURE__ */ React.createElement(
-        Overlay,
-        {
-          overlayClass: "nut-menu__overlay",
-          style: getPosition(),
-          lockScroll: parent.lockScroll,
-          visible: _showPopup,
-          closeOnClickOverlay: parent.closeOnClickOverlay,
-          onClick: () => {
-            parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
-          }
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: direction === "down" ? "nut-menu-item__wrap" : "nut-menu-item__wrap-up",
+        style: {
+          // ...getPosition(),
+          ...isShow()
         }
-      ),
+      },
       /* @__PURE__ */ React.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.createElement(
-          CSSTransition$1,
-          {
-            in: _showPopup,
-            timeout: 100,
-            classNames: direction === "down" ? "menu-item" : "menu-item-up"
-          },
-          /* @__PURE__ */ React.createElement("div", { className: "nut-menu-item__content" }, options2 == null ? void 0 : options2.map((item, index) => {
-            return /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React.createElement("div", { className: "nut-menu-item__content" }, options2 == null ? void 0 : options2.map((item, index) => {
+          return /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              className: `nut-menu-item__option ${classNames({
+                active: item.value === _value
+              })}`,
+              key: item.text,
+              style: {
+                flexBasis: `${100 / columns}%`
+              },
+              onClick: () => {
+                handleClick2(item);
+              }
+            },
+            item.value === _value ? /* @__PURE__ */ React.createElement(
+              Icon,
+              {
+                classPrefix: iconClassPrefix,
+                fontClassName: iconFontClassName,
+                className: getIconCName(item.value, value),
+                name: optionsIcon,
+                color: activeColor
+              }
+            ) : null,
+            /* @__PURE__ */ React.createElement(
               "div",
               {
-                className: `nut-menu-item__option ${classNames({
-                  active: item.value === _value
-                })}`,
-                key: item.text,
+                className: getIconCName(item.value, value),
                 style: {
-                  flexBasis: `${100 / columns}%`
-                },
-                onClick: () => {
-                  handleClick2(item);
+                  color: `${item.value === _value ? activeColor : ""}`
                 }
               },
-              item.value === _value ? /* @__PURE__ */ React.createElement(
-                Icon,
-                {
-                  classPrefix: iconClassPrefix,
-                  fontClassName: iconFontClassName,
-                  className: getIconCName(item.value, value),
-                  name: optionsIcon,
-                  color: activeColor
-                }
-              ) : null,
-              /* @__PURE__ */ React.createElement(
-                "div",
-                {
-                  className: getIconCName(item.value, value),
-                  style: {
-                    color: `${item.value === _value ? activeColor : ""}`
-                  }
-                },
-                item.text
-              )
-            );
-          }), children)
-        )
+              item.text
+            )
+          );
+        }), children)
       )
-    );
+    ));
   });
   MenuItem.defaultProps = defaultProps$1a;
   MenuItem.displayName = "NutMenuItem";
@@ -16183,6 +16195,7 @@ Please add \`${key}Action\` when creating your handler.`);
           type: "number",
           style: systemStyle(),
           maxLength: 6,
+          pattern: "[0-9]*",
           value: inputValue,
           autoFocus,
           onChange: (e) => changeValue(e)
@@ -17660,7 +17673,7 @@ Please add \`${key}Action\` when creating your handler.`);
       return () => {
         scrollEl.current.removeEventListener("scroll", handleScroll, useCapture);
       };
-    }, [hasMore, isInfiniting]);
+    }, [hasMore, isInfiniting, onLoadMore]);
     React.useEffect(() => {
       const element = scroller.current;
       element.addEventListener("touchmove", touchMove, { passive: false });
@@ -19267,7 +19280,7 @@ Please add \`${key}Action\` when creating your handler.`);
     React.useEffect(() => {
       setTimeout(() => {
         if (domHeight !== -1) {
-          isOpen ? setCurrHeight(`${domHeight}px`) : setCurrHeight("0px");
+          isOpen ? setCurrHeight(`auto`) : setCurrHeight("0px");
         }
         const newIconStyle = isOpen ? { transform: `translateY(-50%) rotate(${rotate}deg)` } : { transform: "translateY(-50%)" };
         setIconStyle(newIconStyle);

package/dist/packages/menuitem/menuitem.scss

@@ -65,15 +65,15 @@
 }
 
 .placeholder-element {
-  position: absolute;
-  top: -$menu-bar-line-height;
+  position: fixed;
+  top: $menu-placeholder-top;
   left: 0;
   right: 0;
   z-index: $menu-bar-opened-z-index;
   background-color: transparent;
 
   &.up {
-    bottom: -$menu-bar-line-height;
+    bottom: $menu-placeholder-top;
   }
 }