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

package/dist/nutui.react.mjs

@@ -6,7 +6,7 @@ var __publicField = (obj, key, value) => {
 };
 var _a;
 /*!
-* @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.
 */
@@ -15,10 +15,15 @@ import React__default, { useCallback, useState, useEffect, createContext, useMem
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { 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$1s = {
   name: "",
@@ -739,7 +745,6 @@ function words(string3, pattern4, guard) {
   return string3.match(pattern4) || [];
 }
 var lodash_kebabcase = kebabCase;
-const kebabCase$1 = /* @__PURE__ */ getDefaultExportFromCjs(lodash_kebabcase);
 const zhCN = {
   save: "保存",
   confirm: "确认",
@@ -887,7 +892,7 @@ const useConfig = () => {
 function convertThemeVarsToCSSVars(themeVars) {
   const cssVars = {};
   Object.keys(themeVars).forEach((key) => {
-    cssVars[`--${kebabCase$1(key)}`] = themeVars[key];
+    cssVars[`--${lodash_kebabcase(key)}`] = themeVars[key];
   });
   return cssVars;
 }
@@ -1065,7 +1070,15 @@ const Image$1 = (props) => {
 };
 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
@@ -1112,8 +1125,7 @@ var classnames = { exports: {} };
     }
   })();
 })(classnames);
-var classnamesExports = classnames.exports;
-const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
+const classNames = classnamesExports;
 const defaultOverlayProps = {
   zIndex: 1e3,
   duration: 0.3,
@@ -1228,8 +1240,24 @@ function _inheritsLoose$1(subClass, superClass) {
   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
@@ -1500,14 +1528,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
@@ -2174,8 +2204,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);
@@ -2205,22 +2233,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) {
@@ -2470,10 +2498,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);
     }
   }),
   /**
@@ -2490,23 +2518,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
@@ -2518,15 +2546,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.
@@ -2576,7 +2604,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
@@ -2585,7 +2613,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
@@ -2594,7 +2622,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
@@ -2603,7 +2631,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.
    *
@@ -2611,7 +2639,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.
    *
@@ -2619,7 +2647,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.
    *
@@ -2627,7 +2655,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement) -> void
    */
-  onExited: PropTypes.func
+  onExited: propTypesExports.func
 } : {};
 function noop$2() {
 }
@@ -2866,7 +2894,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$4({},
    *
    * @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.
@@ -2875,7 +2903,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$4({},
    *
    * @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.
@@ -2884,7 +2912,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$4({},
    *
    * @type Function(node: HtmlElement, isAppearing: bool)
    */
-  onEntered: PropTypes.func,
+  onEntered: propTypesExports.func,
   /**
    * A `<Transition>` callback fired immediately after the 'exit' class is
    * applied.
@@ -2893,7 +2921,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$4({},
    *
    * @type Function(node: HtmlElement)
    */
-  onExit: PropTypes.func,
+  onExit: propTypesExports.func,
   /**
    * A `<Transition>` callback fired immediately after the 'exit-active' is applied.
    *
@@ -2901,7 +2929,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$4({},
    *
    * @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.
@@ -2910,7 +2938,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$4({},
    *
    * @type Function(node: HtmlElement)
    */
-  onExited: PropTypes.func
+  onExited: propTypesExports.func
 }) : {};
 const CSSTransition$1 = CSSTransition;
 const defaultProps$1m = {
@@ -3301,6 +3329,7 @@ const GridItem = (props) => {
     iconClassPrefix,
     iconFontClassName,
     onClick,
+    style,
     ...rest
   } = {
     ...defaultProps$1i,
@@ -3312,18 +3341,18 @@ const GridItem = (props) => {
     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"), {
@@ -9324,116 +9353,99 @@ 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: `${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__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      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(
+    "div",
+    {
+      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" }, options2 == null ? void 0 : options2.map((item, index) => {
-          return /* @__PURE__ */ React__default.createElement(
+      /* @__PURE__ */ React__default.createElement("div", { className: "nut-menu-item__content" }, options2 == null ? void 0 : options2.map((item, index) => {
+        return /* @__PURE__ */ React__default.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__default.createElement(
+            Icon,
+            {
+              classPrefix: iconClassPrefix,
+              fontClassName: iconFontClassName,
+              className: getIconCName(item.value, value),
+              name: optionsIcon,
+              color: activeColor
+            }
+          ) : null,
+          /* @__PURE__ */ React__default.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__default.createElement(
-              Icon,
-              {
-                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$1a;
 MenuItem.displayName = "NutMenuItem";
@@ -16165,6 +16177,7 @@ const ShortPassword = (props) => {
         type: "number",
         style: systemStyle(),
         maxLength: 6,
+        pattern: "[0-9]*",
         value: inputValue,
         autoFocus,
         onChange: (e) => changeValue(e)
@@ -17642,7 +17655,7 @@ const Infiniteloading = (props) => {
     return () => {
       scrollEl.current.removeEventListener("scroll", handleScroll, useCapture);
     };
-  }, [hasMore, isInfiniting]);
+  }, [hasMore, isInfiniting, onLoadMore]);
   useEffect(() => {
     const element = scroller.current;
     element.addEventListener("touchmove", touchMove, { passive: false });
@@ -19249,7 +19262,7 @@ const CollapseItem = (props) => {
   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);