@nutui/nutui-react 2.3.6 → 2.3.7

package/dist/nutui.react.umd.js

@@ -8,7 +8,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.7 Fri Jan 19 2024 16:33:26 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -4431,6 +4431,20 @@ Check the top-level render call using <` + t2 + ">.");
     }
     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 {
@@ -11416,7 +11430,9 @@ Please add \`${key}Action\` when creating your handler.`);
         activeType === "line" && /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: `${classPrefix$j}-titles-item-line`,
+            className: classNames(`${classPrefix$j}-titles-item-line`, {
+              [`${classPrefix$j}-titles-item-line-${direction}`]: true
+            }),
             style: tabsActiveStyle
           }
         ),
@@ -11432,9 +11448,7 @@ Please add \`${key}Action\` when creating your handler.`);
           "div",
           {
             className: classNames(
-              {
-                ellipsis: true
-              },
+              `${classPrefix$j}-ellipsis`,
               `${classPrefix$j}-titles-item-text`
             )
           },
@@ -13616,28 +13630,33 @@ Please add \`${key}Action\` when creating your handler.`);
   const Context$1 = CheckboxGroupContext;
   const defaultProps$$ = {
     max: void 0,
+    min: void 0,
     labelPosition: "right",
     direction: "vertical",
     onChange: (value) => {
     },
+    onLimit: (type2) => {
+    },
     options: []
   };
   const classPrefix$i = "nut-checkboxgroup";
   const CheckboxGroup = React.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 };
       React.useImperativeHandle(ref, () => ({
         toggle(state) {
           if (state === false) {
@@ -13682,7 +13701,7 @@ Please add \`${key}Action\` when creating your handler.`);
             }
           );
         });
-      }, [options2, max]);
+      }, [options2, max, min]);
       return /* @__PURE__ */ React.createElement(
         Context$1.Provider,
         {
@@ -13690,13 +13709,22 @@ Please add \`${key}Action\` when creating your handler.`);
             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);
             }
           }
@@ -13835,10 +13863,6 @@ Please add \`${key}Action\` when creating your handler.`);
       if (disabled)
         return;
       const latestChecked = !innerChecked;
-      if (ctx2 && ctx2.max !== void 0) {
-        if (latestChecked && ctx2.value.length >= ctx2.max)
-          return;
-      }
       setChecked(latestChecked);
     };
     const renderButton = () => {
@@ -17022,6 +17046,7 @@ Please add \`${key}Action\` when creating your handler.`);
   const defaultProps$R = {
     ...ComponentDefaults,
     visible: false,
+    rightActions: "",
     type: "default",
     custom: [],
     random: false,
@@ -17032,6 +17057,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const { locale } = useConfig();
     const {
       title,
+      rightActions,
       confirmText,
       visible,
       type: type2,
@@ -17147,7 +17173,7 @@ Please add \`${key}Action\` when creating your handler.`);
           className: `${classPrefix2}-header-close`,
           onClick: onConfirm
         },
-        locale.done
+        rightActions || locale.done
       )), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-body` }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-body-keys` }, keysList == null ? void 0 : keysList.map((item) => {
         return /* @__PURE__ */ React.createElement(NumberKeyboardKey, { key: item.id, item });
       })), type2 === "rightColumn" && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-sidebar` }, /* @__PURE__ */ React.createElement(
@@ -18578,7 +18604,7 @@ Please add \`${key}Action\` when creating your handler.`);
           className: `nut-uploader-preview ${previewType}`,
           key: item.uid
         },
-        previewType === "picture" && deletable && /* @__PURE__ */ React.createElement(
+        previewType === "picture" && !children && deletable && /* @__PURE__ */ React.createElement(
           o$3,
           {
             color: "rgba(0,0,0,0.6)",
@@ -19202,7 +19228,16 @@ Please add \`${key}Action\` when creating your handler.`);
   };
   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.createElement("div", { className: `${classPrefix2}-header` }, title) : null;
@@ -19228,6 +19263,7 @@ Please add \`${key}Action\` when creating your handler.`);
         style: props.style,
         onClick: (e2) => handleClick2(e2)
       },
+      close,
       header,
       /* @__PURE__ */ React.createElement(
         "div",
@@ -19308,6 +19344,8 @@ Please add \`${key}Action\` when creating your handler.`);
     disableConfirmButton: false,
     footerDirection: "horizontal",
     lockScroll: true,
+    closeIconPosition: "top-right",
+    closeIcon: false,
     beforeCancel: () => true,
     beforeClose: () => true
   };
@@ -19323,6 +19361,8 @@ Please add \`${key}Action\` when creating your handler.`);
       closeOnOverlayClick,
       confirmText,
       cancelText,
+      closeIconPosition,
+      closeIcon,
       onClose,
       onCancel,
       onConfirm,
@@ -19369,6 +19409,23 @@ Please add \`${key}Action\` when creating your handler.`);
         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.createElement("div", { className: closeClasses, onClick: handleCancel }, React.isValidElement(closeIcon) ? closeIcon : /* @__PURE__ */ React.createElement(r$2, null));
+    };
     return /* @__PURE__ */ React.createElement("div", { style: { display: visible ? "block" : "none" } }, /* @__PURE__ */ React.createElement(
       DialogWrap,
       {
@@ -19376,6 +19433,7 @@ Please add \`${key}Action\` when creating your handler.`);
         visible,
         lockScroll,
         footer: renderFooter(),
+        close: renderCloseIcon(),
         onClose,
         onCancel
       }
@@ -20359,8 +20417,6 @@ Please add \`${key}Action\` when creating your handler.`);
     const popoverRef = React.useRef(null);
     const popoverContentRef = React.useRef(null);
     const [showPopup, setShowPopup] = React.useState(false);
-    const [elWidth, setElWidth] = React.useState(0);
-    const [elHeight, setElHeight] = React.useState(0);
     const [rootPosition, setRootPosition] = React.useState();
     React.useEffect(() => {
       setShowPopup(visible);
@@ -20369,19 +20425,34 @@ Please add \`${key}Action\` when creating your handler.`);
           getContentWidth();
         }, 0);
       }
+    }, [visible, location]);
+    const update2 = React.useRef((e2) => {
+      getContentWidth();
+    });
+    React.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",
@@ -20389,37 +20460,20 @@ Please add \`${key}Action\` when creating your handler.`);
       visible,
       closeOnOutsideClick
     );
+    const scrollableParents = React.useMemo(() => {
+      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(
       {
@@ -20429,16 +20483,16 @@ Please add \`${key}Action\` when creating your handler.`);
     );
     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];
@@ -20478,7 +20532,7 @@ Please add \`${key}Action\` when creating your handler.`);
       }
       return styles;
     };
-    const popoverArrowStyle = () => {
+    const arrowStyle = () => {
       const styles = {};
       const direction = location.split("-")[0];
       const skew = location.split("-")[1];
@@ -20510,12 +20564,13 @@ Please add \`${key}Action\` when creating your handler.`);
       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.createElement(React.Fragment, null, !targetId && /* @__PURE__ */ React.createElement(
@@ -20524,55 +20579,69 @@ Please add \`${key}Action\` when creating your handler.`);
         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.createElement("div", { className: classes, style: getRootPosition() }, /* @__PURE__ */ React.createElement(
-      Popup,
-      {
-        className: `nut-popover-content nut-popover-content-${location}`,
-        visible: showPopup,
-        overlay,
-        position: "default",
-        ...rest
-      },
-      /* @__PURE__ */ React.createElement("div", { className: "nut-popover-content-group", ref: popoverContentRef }, showArrow && /* @__PURE__ */ React.createElement("div", { className: popoverArrow(), style: popoverArrowStyle() }), Array.isArray(children) ? children[1] : "", list.map((item, index) => {
-        return /* @__PURE__ */ React.createElement(
+    ), ReactDOM.createPortal(
+      /* @__PURE__ */ React.createElement("div", { className: classes, style: getRootPosition() }, /* @__PURE__ */ React.createElement(
+        Popup,
+        {
+          className: `nut-popover-content nut-popover-content-${location}`,
+          visible: showPopup,
+          overlay,
+          position: "default",
+          lockScroll: false,
+          ...rest
+        },
+        /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: classNames(
+            className: "nut-popover-content-group",
+            ref: popoverContentRef
+          },
+          showArrow && /* @__PURE__ */ React.createElement("div", { className: popoverArrow(), style: arrowStyle() }),
+          Array.isArray(children) ? children[1] : null,
+          list.map((item, index) => {
+            return /* @__PURE__ */ React.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.createElement("div", { className: "nut-popover-menu-item-icon" }, item.icon) : null,
-          /* @__PURE__ */ React.createElement("div", { className: "nut-popover-menu-item-name" }, item.name),
-          item.action && item.action.icon ? /* @__PURE__ */ React.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.createElement("div", { className: "nut-popover-menu-item-icon" }, item.icon) : null,
+              /* @__PURE__ */ React.createElement("div", { className: "nut-popover-menu-item-name" }, item.name),
+              item.action && item.action.icon ? /* @__PURE__ */ React.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";
@@ -22984,6 +23053,8 @@ Please add \`${key}Action\` when creating your handler.`);
     closeOnContentClick: false,
     indicator: false,
     indicatorColor: "#fff",
+    closeIcon: false,
+    closeIconPosition: "top-right",
     onChange: (value) => {
     },
     onClose: () => {
@@ -23001,6 +23072,8 @@ Please add \`${key}Action\` when creating your handler.`);
       indicator,
       autoPlay,
       closeOnContentClick,
+      closeIcon,
+      closeIconPosition,
       onClose
     } = props;
     const classPrefix2 = "nut-imagepreview";
@@ -23183,7 +23256,15 @@ Please add \`${key}Action\` when creating your handler.`);
           )
         )
       ),
-      /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-index` }, active, "/", (images ? images.length : 0) + (videos ? videos.length : 0))
+      /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-index` }, active, "/", (images ? images.length : 0) + (videos ? videos.length : 0)),
+      closeIcon !== false ? /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: `${classPrefix2}-close ${closeIconPosition}`,
+          onClick: onCloseInner
+        },
+        closeIcon === true ? /* @__PURE__ */ React.createElement(r$2, null) : closeIcon
+      ) : null
     );
   };
   ImagePreview.defaultProps = defaultProps$f;
@@ -23671,16 +23752,25 @@ Please add \`${key}Action\` when creating your handler.`);
         return /* @__PURE__ */ React.createElement("div", { className: bodyClassPrefix, key: index }, renderBodyTds(item, index));
       });
     };
-    return /* @__PURE__ */ React.createElement("div", { className: cls, ...rest }, /* @__PURE__ */ React.createElement("div", { className: classNames(`${classPrefix2}-wrapper`), style }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("div", { className: cls, ...rest }, /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: classNames(`${classPrefix2}-main`, {
-          [`${classPrefix2}-main-striped`]: striped
-        })
+        className: classNames(
+          `${classPrefix2}-wrapper ${isSticky ? `${classPrefix2}-wrapper-sticky` : ""}`
+        ),
+        style
       },
-      showHeader && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-main-head` }, /* @__PURE__ */ React.createElement("div", { className: headerClassPrefix }, renderHeadCells())),
-      /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-main-body` }, renderBodyTrs())
-    )), isSticky ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(`${classPrefix2}-main`, {
+            [`${classPrefix2}-main-striped`]: striped
+          })
+        },
+        showHeader && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-main-head` }, /* @__PURE__ */ React.createElement("div", { className: headerClassPrefix }, renderHeadCells())),
+        /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-main-body` }, renderBodyTrs())
+      )
+    ), isSticky ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       "div",
       {
         className: `${classPrefix2}-sticky-left`,

package/dist/packages/circleprogress/circleprogress.scss

@@ -3,7 +3,9 @@
 
   &-hover {
     stroke: $circleprogress-primary-color;
-    transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;
+    transition:
+      stroke-dasharray 0.2s ease-in-out 0s,
+      stroke 0.2s ease 0s;
   }
 
   &-path {

package/dist/packages/dialog/dialog.scss

@@ -32,6 +32,31 @@
     animation-duration: 0.3s;
   }
 
+  &-close {
+    position: absolute !important;
+    z-index: 1;
+    cursor: pointer;
+    width: $dialog-close-width;
+    height: $dialog-close-height;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: $dialog-close-top;
+    color: $dialog-close-color;
+
+    &-top-right {
+      right: $dialog-close-right;
+    }
+
+    &-top-left {
+      left: $dialog-close-left;
+    }
+
+    &:active {
+      opacity: 0.7;
+    }
+  }
+
   &-header {
     display: block;
     text-align: center;

package/dist/packages/imagepreview/imagepreview.scss

@@ -26,6 +26,30 @@
     }
   }
 
+  &-close {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2002;
+    background: transparent;
+    color: $white;
+    &.top-right {
+      top: 50px;
+      right: 20px;
+    }
+    &.top-left {
+      top: 50px;
+      left: 20px;
+    }
+    &.bottom {
+      bottom: 50px;
+      left: 0;
+      right: 0;
+      text-align: center;
+    }
+  }
+
   &-pop {
     height: 100%;
     background: transparent !important;

package/dist/packages/popover/popover.scss

@@ -96,7 +96,7 @@
       border-bottom: 1px solid $popover-divider-color;
 
       &:last-child {
-        margin-bottom: 2px;
+        margin-bottom: 0px;
         border-bottom: none;
       }