@nutui/nutui-react 2.3.6 → 2.3.8-beta.0

package/dist/nutui.react.es.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react v2.3.6 Fri Jan 12 2024 15:48:36 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.3.8-beta.0 Tue Jan 23 2024 11:20:59 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -4413,6 +4413,20 @@ function getScrollParent(el, root2 = defaultRoot) {
   }
   return root2;
 }
+function getAllScrollableParents(element, scrollableParents = []) {
+  if (!element) {
+    return scrollableParents;
+  }
+  const isScrollable = element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
+  if (isScrollable) {
+    if (element.nodeName === "HTML") {
+      scrollableParents.push(document);
+    } else {
+      scrollableParents.push(element);
+    }
+  }
+  return getAllScrollableParents(element.parentElement, scrollableParents);
+}
 let passiveSupported = false;
 if (canUseDom) {
   try {
@@ -11398,7 +11412,9 @@ const Tabs = (props) => {
       activeType === "line" && /* @__PURE__ */ React__default.createElement(
         "div",
         {
-          className: `${classPrefix$j}-titles-item-line`,
+          className: classNames(`${classPrefix$j}-titles-item-line`, {
+            [`${classPrefix$j}-titles-item-line-${direction}`]: true
+          }),
           style: tabsActiveStyle
         }
       ),
@@ -11414,9 +11430,7 @@ const Tabs = (props) => {
         "div",
         {
           className: classNames(
-            {
-              ellipsis: true
-            },
+            `${classPrefix$j}-ellipsis`,
             `${classPrefix$j}-titles-item-text`
           )
         },
@@ -13598,28 +13612,33 @@ const CheckboxGroupContext = createContext(null);
 const Context$1 = CheckboxGroupContext;
 const defaultProps$$ = {
   max: void 0,
+  min: void 0,
   labelPosition: "right",
   direction: "vertical",
   onChange: (value) => {
   },
+  onLimit: (type4) => {
+  },
   options: []
 };
 const classPrefix$i = "nut-checkboxgroup";
 const CheckboxGroup = React__default.forwardRef(
   (props, ref) => {
-    const { children } = { ...defaultProps$$, ...props };
     const {
+      children,
       className,
       disabled,
       onChange,
       value,
       defaultValue,
       max,
+      min,
+      onLimit,
       labelPosition,
       direction,
       options: options2,
       ...rest
-    } = props;
+    } = { ...defaultProps$$, ...props };
     useImperativeHandle(ref, () => ({
       toggle(state) {
         if (state === false) {
@@ -13664,7 +13683,7 @@ const CheckboxGroup = React__default.forwardRef(
           }
         );
       });
-    }, [options2, max]);
+    }, [options2, max, min]);
     return /* @__PURE__ */ React__default.createElement(
       Context$1.Provider,
       {
@@ -13672,13 +13691,22 @@ const CheckboxGroup = React__default.forwardRef(
           labelPosition: labelPosition || "right",
           disabled,
           max,
+          onLimit,
           value: _value,
           check: (value2) => {
             const combined = [..._value, value2];
+            if (max !== void 0) {
+              if (combined.length > max) {
+                return onLimit == null ? void 0 : onLimit("max");
+              }
+            }
             setValue(combined);
           },
           uncheck: (value2) => {
             const reduced = _value.filter((item) => item !== value2);
+            if (min !== void 0 && reduced.length < min) {
+              return onLimit == null ? void 0 : onLimit("min");
+            }
             setValue(reduced);
           }
         }
@@ -13817,10 +13845,6 @@ const Checkbox = (props) => {
     if (disabled)
       return;
     const latestChecked = !innerChecked;
-    if (ctx2 && ctx2.max !== void 0) {
-      if (latestChecked && ctx2.value.length >= ctx2.max)
-        return;
-    }
     setChecked(latestChecked);
   };
   const renderButton = () => {
@@ -17004,6 +17028,7 @@ Menu.Item = MenuItem;
 const defaultProps$R = {
   ...ComponentDefaults,
   visible: false,
+  rightActions: "",
   type: "default",
   custom: [],
   random: false,
@@ -17014,6 +17039,7 @@ const NumberKeyboard = (props) => {
   const { locale } = useConfig();
   const {
     title,
+    rightActions,
     confirmText,
     visible,
     type: type4,
@@ -17129,7 +17155,7 @@ const NumberKeyboard = (props) => {
         className: `${classPrefix2}-header-close`,
         onClick: onConfirm
       },
-      locale.done
+      rightActions || locale.done
     )), /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-body` }, /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-body-keys` }, keysList == null ? void 0 : keysList.map((item) => {
       return /* @__PURE__ */ React__default.createElement(NumberKeyboardKey, { key: item.id, item });
     })), type4 === "rightColumn" && /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-sidebar` }, /* @__PURE__ */ React__default.createElement(
@@ -18560,7 +18586,7 @@ const Preview = ({
         className: `nut-uploader-preview ${previewType}`,
         key: item.uid
       },
-      previewType === "picture" && deletable && /* @__PURE__ */ React__default.createElement(
+      previewType === "picture" && !children && deletable && /* @__PURE__ */ React__default.createElement(
         o$3,
         {
           color: "rgba(0,0,0,0.6)",
@@ -19184,7 +19210,16 @@ const confirm = (config2, renderFunc) => {
 };
 const confirm$1 = confirm;
 const Content = (props) => {
-  const { visible, title, header, footer, footerDirection, onClick, children } = props;
+  const {
+    visible,
+    title,
+    header,
+    footer,
+    close,
+    footerDirection,
+    onClick,
+    children
+  } = props;
   const classPrefix2 = "nut-dialog";
   const renderHeader = () => {
     return title ? /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-header` }, title) : null;
@@ -19210,6 +19245,7 @@ const Content = (props) => {
       style: props.style,
       onClick: (e2) => handleClick2(e2)
     },
+    close,
     header,
     /* @__PURE__ */ React__default.createElement(
       "div",
@@ -19290,6 +19326,8 @@ const defaultProps$E = {
   disableConfirmButton: false,
   footerDirection: "horizontal",
   lockScroll: true,
+  closeIconPosition: "top-right",
+  closeIcon: false,
   beforeCancel: () => true,
   beforeClose: () => true
 };
@@ -19305,6 +19343,8 @@ const BaseDialog = (props, ref) => {
     closeOnOverlayClick,
     confirmText,
     cancelText,
+    closeIconPosition,
+    closeIcon,
     onClose,
     onCancel,
     onConfirm,
@@ -19351,6 +19391,23 @@ const BaseDialog = (props, ref) => {
       confirmText || locale.confirm
     ));
   };
+  const renderCloseIcon = () => {
+    if (!closeIcon)
+      return null;
+    const handleCancel = () => {
+      if (!(beforeCancel == null ? void 0 : beforeCancel()))
+        return;
+      if (!(beforeClose == null ? void 0 : beforeClose()))
+        return;
+      onClose == null ? void 0 : onClose();
+      onCancel == null ? void 0 : onCancel();
+    };
+    const closeClasses = classNames({
+      [`${classPrefix2}-close`]: true,
+      [`${classPrefix2}-close-${closeIconPosition}`]: true
+    });
+    return /* @__PURE__ */ React__default.createElement("div", { className: closeClasses, onClick: handleCancel }, React__default.isValidElement(closeIcon) ? closeIcon : /* @__PURE__ */ React__default.createElement(r$2, null));
+  };
   return /* @__PURE__ */ React__default.createElement("div", { style: { display: visible ? "block" : "none" } }, /* @__PURE__ */ React__default.createElement(
     DialogWrap,
     {
@@ -19358,6 +19415,7 @@ const BaseDialog = (props, ref) => {
       visible,
       lockScroll,
       footer: renderFooter(),
+      close: renderCloseIcon(),
       onClose,
       onCancel
     }
@@ -20341,8 +20399,6 @@ const Popover = (props) => {
   const popoverRef = useRef(null);
   const popoverContentRef = useRef(null);
   const [showPopup, setShowPopup] = useState(false);
-  const [elWidth, setElWidth] = useState(0);
-  const [elHeight, setElHeight] = useState(0);
   const [rootPosition, setRootPosition] = useState();
   useEffect(() => {
     setShowPopup(visible);
@@ -20351,19 +20407,34 @@ const Popover = (props) => {
         getContentWidth();
       }, 0);
     }
+  }, [visible, location]);
+  const update2 = useRef((e2) => {
+    getContentWidth();
+  });
+  useEffect(() => {
+    if (visible) {
+      scrollableParents.forEach((parent) => {
+        parent.addEventListener("scroll", update2.current, { passive: true });
+      });
+    } else {
+      scrollableParents.forEach(
+        (parent) => parent.removeEventListener("scroll", update2.current)
+      );
+    }
   }, [visible]);
-  let element;
-  if (canUseDom) {
-    element = targetId && document.querySelector(`#${targetId}`);
+  let element = null;
+  let targetSet = [];
+  if (canUseDom && targetId) {
+    element = document.querySelector(`#${targetId}`);
+    targetSet = [element, popoverContentRef.current];
+  } else {
+    targetSet = [popoverRef.current, popoverContentRef.current];
   }
-  const targetSet = [
-    targetId ? element : popoverRef.current,
-    popoverContentRef.current
-  ];
   useClickAway(
     () => {
-      props.onClick && props.onClick();
-      onClose && onClose();
+      var _a2;
+      (_a2 = props.onClick) == null ? void 0 : _a2.call(props);
+      onClose == null ? void 0 : onClose();
     },
     targetSet,
     "touchstart",
@@ -20371,37 +20442,20 @@ const Popover = (props) => {
     visible,
     closeOnOutsideClick
   );
+  const scrollableParents = useMemo$1(() => {
+    return getAllScrollableParents(element || popoverRef.current);
+  }, [element, popoverRef.current]);
   const getContentWidth = () => {
-    let rect = getRect(popoverRef.current);
-    const scrollDis = document.documentElement.scrollTop || window.scrollY;
-    if (targetId) {
-      setTimeout(() => {
-        rect = getRect(document.querySelector(`#${targetId}`));
-        setRootPosition({
-          width: rect.width,
-          height: rect.height,
-          left: rect.left,
-          top: rect.top + scrollDis,
-          right: rect.right
-        });
-        if (popoverContentRef.current) {
-          setElWidth(popoverContentRef.current.clientWidth);
-          setElHeight(popoverContentRef.current.clientHeight);
-        }
-      }, 0);
-    } else {
-      setRootPosition({
-        width: rect.width,
-        height: rect.height,
-        left: rect.left,
-        top: rect.top + scrollDis,
-        right: rect.right
-      });
-      if (popoverContentRef.current) {
-        setElWidth(popoverContentRef.current.clientWidth);
-        setElHeight(popoverContentRef.current.clientHeight);
-      }
-    }
+    const rect = getRect(
+      targetId ? document.querySelector(`#${targetId}`) : popoverRef.current
+    );
+    setRootPosition({
+      width: rect.width,
+      height: rect.height,
+      left: rect.left,
+      top: rect.top + Math.max(document.documentElement.scrollTop, document.body.scrollTop),
+      right: rect.right
+    });
   };
   const classes = classNames(
     {
@@ -20411,16 +20465,16 @@ const Popover = (props) => {
   );
   const popoverArrow = () => {
     const prefixCls2 = "nut-popover-arrow";
-    const loca = location;
-    const direction = loca.split("-")[0];
-    return `${prefixCls2} ${prefixCls2}-${direction} ${prefixCls2}-${loca}`;
+    const direction = location.split("-")[0];
+    return `${prefixCls2} ${prefixCls2}-${direction} ${prefixCls2}-${location}`;
   };
   const getRootPosition = () => {
+    var _a2, _b;
     const styles = {};
     if (!rootPosition)
       return {};
-    const contentWidth = elWidth;
-    const contentHeight = elHeight;
+    const contentWidth = (_a2 = popoverContentRef.current) == null ? void 0 : _a2.clientWidth;
+    const contentHeight = (_b = popoverContentRef.current) == null ? void 0 : _b.clientHeight;
     const { width, height, left, top, right } = rootPosition;
     const direction = location.split("-")[0];
     const skew = location.split("-")[1];
@@ -20460,7 +20514,7 @@ const Popover = (props) => {
     }
     return styles;
   };
-  const popoverArrowStyle = () => {
+  const arrowStyle = () => {
     const styles = {};
     const direction = location.split("-")[0];
     const skew = location.split("-")[1];
@@ -20492,12 +20546,13 @@ const Popover = (props) => {
     return styles;
   };
   const handleSelect = (item, index) => {
+    var _a2;
     if (!item.disabled) {
-      onSelect && onSelect(item, index);
+      onSelect == null ? void 0 : onSelect(item, index);
     }
     if (closeOnActionClick) {
-      props.onClick && props.onClick();
-      onClose && onClose();
+      (_a2 = props.onClick) == null ? void 0 : _a2.call(props);
+      onClose == null ? void 0 : onClose();
     }
   };
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !targetId && /* @__PURE__ */ React__default.createElement(
@@ -20506,55 +20561,69 @@ const Popover = (props) => {
       className: "nut-popover-wrapper",
       ref: popoverRef,
       onClick: () => {
-        props.onClick && props.onClick();
+        var _a2;
+        (_a2 = props.onClick) == null ? void 0 : _a2.call(props);
         if (!visible) {
-          onOpen && onOpen();
+          onOpen == null ? void 0 : onOpen();
         } else {
-          onClose && onClose();
+          onClose == null ? void 0 : onClose();
         }
       },
       style
     },
     Array.isArray(children) ? children[0] : children
-  ), /* @__PURE__ */ React__default.createElement("div", { className: classes, style: getRootPosition() }, /* @__PURE__ */ React__default.createElement(
-    Popup,
-    {
-      className: `nut-popover-content nut-popover-content-${location}`,
-      visible: showPopup,
-      overlay,
-      position: "default",
-      ...rest
-    },
-    /* @__PURE__ */ React__default.createElement("div", { className: "nut-popover-content-group", ref: popoverContentRef }, showArrow && /* @__PURE__ */ React__default.createElement("div", { className: popoverArrow(), style: popoverArrowStyle() }), Array.isArray(children) ? children[1] : "", list.map((item, index) => {
-      return /* @__PURE__ */ React__default.createElement(
+  ), createPortal(
+    /* @__PURE__ */ React__default.createElement("div", { className: classes, style: getRootPosition() }, /* @__PURE__ */ React__default.createElement(
+      Popup,
+      {
+        className: `nut-popover-content nut-popover-content-${location}`,
+        visible: showPopup,
+        overlay,
+        position: "default",
+        lockScroll: false,
+        ...rest
+      },
+      /* @__PURE__ */ React__default.createElement(
         "div",
         {
-          className: classNames(
+          className: "nut-popover-content-group",
+          ref: popoverContentRef
+        },
+        showArrow && /* @__PURE__ */ React__default.createElement("div", { className: popoverArrow(), style: arrowStyle() }),
+        Array.isArray(children) ? children[1] : null,
+        list.map((item, index) => {
+          return /* @__PURE__ */ React__default.createElement(
+            "div",
             {
-              "nut-popover-menu-item": true,
-              "nut-popover-menu-disabled": item.disabled
+              className: classNames(
+                {
+                  "nut-popover-menu-item": true,
+                  "nut-popover-menu-disabled": item.disabled
+                },
+                item.className
+              ),
+              key: item.key || index,
+              onClick: () => handleSelect(item, index)
             },
-            item.className
-          ),
-          key: item.key || index,
-          onClick: () => handleSelect(item, index)
-        },
-        item.icon ? /* @__PURE__ */ React__default.createElement("div", { className: "nut-popover-menu-item-icon" }, item.icon) : null,
-        /* @__PURE__ */ React__default.createElement("div", { className: "nut-popover-menu-item-name" }, item.name),
-        item.action && item.action.icon ? /* @__PURE__ */ React__default.createElement(
-          "div",
-          {
-            className: "nut-popover-menu-item-action-icon",
-            onClick: (e2) => {
-              var _a2, _b;
-              return (_b = (_a2 = item.action) == null ? void 0 : _a2.onClick) == null ? void 0 : _b.call(_a2, e2);
-            }
-          },
-          item.action.icon
-        ) : null
-      );
-    }))
-  )));
+            item.icon ? /* @__PURE__ */ React__default.createElement("div", { className: "nut-popover-menu-item-icon" }, item.icon) : null,
+            /* @__PURE__ */ React__default.createElement("div", { className: "nut-popover-menu-item-name" }, item.name),
+            item.action && item.action.icon ? /* @__PURE__ */ React__default.createElement(
+              "div",
+              {
+                className: "nut-popover-menu-item-action-icon",
+                onClick: (e2) => {
+                  var _a2, _b;
+                  return (_b = (_a2 = item.action) == null ? void 0 : _a2.onClick) == null ? void 0 : _b.call(_a2, e2);
+                }
+              },
+              item.action.icon
+            ) : null
+          );
+        })
+      )
+    )),
+    document.body
+  ));
 };
 Popover.defaultProps = defaultProps$y;
 Popover.displayName = "NutPopover";
@@ -22650,10 +22719,12 @@ const Swiper = React__default.forwardRef((props, ref) => {
     resetPosition();
     touch.reset();
     requestAniFrame$1(() => {
-      swiperRef.current.moving = false;
-      move({
-        pace: -1,
-        isEmit: true
+      requestAniFrame$1(() => {
+        swiperRef.current.moving = false;
+        move({
+          pace: -1,
+          isEmit: true
+        });
       });
     });
   };
@@ -22661,10 +22732,12 @@ const Swiper = React__default.forwardRef((props, ref) => {
     resetPosition();
     touch.reset();
     requestAniFrame$1(() => {
-      swiperRef.current.moving = false;
-      move({
-        pace: 1,
-        isEmit: true
+      requestAniFrame$1(() => {
+        swiperRef.current.moving = false;
+        move({
+          pace: 1,
+          isEmit: true
+        });
       });
     });
   };
@@ -22672,16 +22745,18 @@ const Swiper = React__default.forwardRef((props, ref) => {
     resetPosition();
     touch.reset();
     requestAniFrame$1(() => {
-      swiperRef.current.moving = false;
-      let targetIndex;
-      if (props.loop && swiperItemCount === index) {
-        targetIndex = active === 0 ? 0 : index;
-      } else {
-        targetIndex = index % swiperItemCount;
-      }
-      move({
-        pace: targetIndex - active,
-        isEmit: true
+      requestAniFrame$1(() => {
+        swiperRef.current.moving = false;
+        let targetIndex;
+        if (props.loop && swiperItemCount === index) {
+          targetIndex = active === 0 ? 0 : index;
+        } else {
+          targetIndex = index % swiperItemCount;
+        }
+        move({
+          pace: targetIndex - active,
+          isEmit: true
+        });
       });
     });
   };
@@ -22755,6 +22830,8 @@ const Swiper = React__default.forwardRef((props, ref) => {
   });
   const getStyle = (moveOffset = offset) => {
     const target = innerRef.current;
+    if (!target)
+      return;
     let _offset = 0;
     if (!center) {
       _offset = moveOffset;
@@ -22863,10 +22940,6 @@ const Swiper = React__default.forwardRef((props, ref) => {
     }
     return () => setReady(false);
   }, [ready]);
-  useEffect(() => {
-    stopAutoPlay();
-    startPlay();
-  }, [children]);
   useEffect(() => {
     const events = [
       { name: "touchstart", e: onTouchStart },
@@ -22966,6 +23039,8 @@ const defaultProps$f = {
   closeOnContentClick: false,
   indicator: false,
   indicatorColor: "#fff",
+  closeIcon: false,
+  closeIconPosition: "top-right",
   onChange: (value) => {
   },
   onClose: () => {
@@ -22983,6 +23058,8 @@ const ImagePreview = (props) => {
     indicator,
     autoPlay,
     closeOnContentClick,
+    closeIcon,
+    closeIconPosition,
     onClose
   } = props;
   const classPrefix2 = "nut-imagepreview";
@@ -23165,7 +23242,15 @@ const ImagePreview = (props) => {
         )
       )
     ),
-    /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-index` }, active, "/", (images ? images.length : 0) + (videos ? videos.length : 0))
+    /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-index` }, active, "/", (images ? images.length : 0) + (videos ? videos.length : 0)),
+    closeIcon !== false ? /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: `${classPrefix2}-close ${closeIconPosition}`,
+        onClick: onCloseInner
+      },
+      closeIcon === true ? /* @__PURE__ */ React__default.createElement(r$2, null) : closeIcon
+    ) : null
   );
 };
 ImagePreview.defaultProps = defaultProps$f;
@@ -23653,16 +23738,25 @@ const Table = (props) => {
       return /* @__PURE__ */ React__default.createElement("div", { className: bodyClassPrefix, key: index }, renderBodyTds(item, index));
     });
   };
-  return /* @__PURE__ */ React__default.createElement("div", { className: cls, ...rest }, /* @__PURE__ */ React__default.createElement("div", { className: classNames(`${classPrefix2}-wrapper`), style }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { className: cls, ...rest }, /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: classNames(`${classPrefix2}-main`, {
-        [`${classPrefix2}-main-striped`]: striped
-      })
+      className: classNames(
+        `${classPrefix2}-wrapper ${isSticky ? `${classPrefix2}-wrapper-sticky` : ""}`
+      ),
+      style
     },
-    showHeader && /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-main-head` }, /* @__PURE__ */ React__default.createElement("div", { className: headerClassPrefix }, renderHeadCells())),
-    /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-main-body` }, renderBodyTrs())
-  )), isSticky ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: classNames(`${classPrefix2}-main`, {
+          [`${classPrefix2}-main-striped`]: striped
+        })
+      },
+      showHeader && /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-main-head` }, /* @__PURE__ */ React__default.createElement("div", { className: headerClassPrefix }, renderHeadCells())),
+      /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-main-body` }, renderBodyTrs())
+    )
+  ), isSticky ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
     "div",
     {
       className: `${classPrefix2}-sticky-left`,