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

package/dist/nutui.react.es.js

@@ -5,13 +5,13 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react-taro v2.3.6 Fri Jan 12 2024 15:51:36 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.3.8-beta.0 Fri Jan 26 2024 15:05:58 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
 import * as React from "react";
 import React__default, { useCallback, createContext, useContext, useState, useRef, useEffect, useMemo as useMemo$1, useImperativeHandle, isValidElement, forwardRef, Component, Children } from "react";
-import Taro, { getEnv, createSelectorQuery, usePageScroll, getSystemInfoSync, pageScrollTo, nextTick, ENV_TYPE, canvasToTempFilePath, uploadFile, chooseMedia, chooseImage, Events, getCurrentInstance, useReady, createInnerAudioContext, getSystemInfo, createOffscreenCanvas } from "@tarojs/taro";
+import Taro, { getEnv, createSelectorQuery, usePageScroll, getSystemInfoSync, pageScrollTo, nextTick, ENV_TYPE, useReady, canvasToTempFilePath, uploadFile, chooseMedia, chooseImage, Events, getCurrentInstance, createInnerAudioContext, getSystemInfo, createOffscreenCanvas } from "@tarojs/taro";
 import { Image as Image$2, View, ScrollView, PickerView, PickerViewColumn, Input as Input$1, Textarea, Swiper as Swiper$1, SwiperItem as SwiperItem$1, Video as Video$1, Canvas } from "@tarojs/components";
 import ReactDOM, { createPortal } from "react-dom";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -4487,24 +4487,64 @@ const NavBar = (props) => {
       zIndex
     };
   };
+  const leftRef = useRef(null);
+  const rightRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const [contentWidth, setContentWidth] = useState("50%");
+  const getNodeWidth = async (node) => {
+    if (node) {
+      const refe = await getRectByTaro(node);
+      return refe.width;
+    }
+    return 0;
+  };
+  useEffect(() => {
+    if (titleAlign === "left") {
+      return;
+    }
+    if (!(back || left2 || right2)) {
+      setContentWidth("100%");
+    }
+    const init = async () => {
+      const leftRectWidth = await getNodeWidth(leftRef == null ? void 0 : leftRef.current);
+      const rightRectWidth = await getNodeWidth(rightRef == null ? void 0 : rightRef.current);
+      const wrapperWidth = await getNodeWidth(wrapperRef == null ? void 0 : wrapperRef.current);
+      let centerWidth = wrapperWidth / 2;
+      if (leftRectWidth && rightRectWidth) {
+        centerWidth = wrapperWidth - (leftRectWidth > rightRectWidth ? leftRectWidth * 2 : rightRectWidth * 2);
+      } else {
+        centerWidth = wrapperWidth - leftRectWidth * 2 - rightRectWidth * 2;
+      }
+      setContentWidth(centerWidth.toFixed(2));
+    };
+    init();
+  }, [left2, right2, back]);
   const renderLeft = () => {
-    return /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-left` }, back && /* @__PURE__ */ React__default.createElement(
-      "div",
+    return back || left2 ? /* @__PURE__ */ React__default.createElement(View, { className: `${classPrefix2}-left`, ref: leftRef }, back && /* @__PURE__ */ React__default.createElement(
+      View,
       {
         className: `${classPrefix2}-left-back`,
         onClick: (e2) => onBackClick(e2)
       },
       back
-    ), left2);
+    ), left2) : null;
   };
   const renderContent = () => {
-    return /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-title` }, children);
+    let titleStyle = {};
+    if (titleAlign === "center") {
+      const contentRealWidth = `${contentWidth}${/%$/i.test(contentWidth) ? "" : "px"}`;
+      titleStyle = {
+        minWidth: contentRealWidth,
+        width: contentRealWidth
+      };
+    }
+    return /* @__PURE__ */ React__default.createElement(View, { className: `${classPrefix2}-title`, style: titleStyle }, children);
   };
   const renderRight = () => {
-    return /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-right` }, right2);
+    return /* @__PURE__ */ React__default.createElement(View, { className: `${classPrefix2}-right`, ref: rightRef }, right2);
   };
   const renderWrapper = () => {
-    return /* @__PURE__ */ React__default.createElement("div", { className: cls, style: styles() }, renderLeft(), renderContent(), renderRight());
+    return /* @__PURE__ */ React__default.createElement(View, { className: cls, style: styles(), ref: wrapperRef }, renderLeft(), renderContent(), renderRight());
   };
   const classes = classNames({
     [`${classPrefix2}-fixed`]: fixed,
@@ -4512,7 +4552,7 @@ const NavBar = (props) => {
     [`${classPrefix2}-title-align-${titleAlign}`]: true
   });
   const cls = classNames(classPrefix2, classes, className);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, fixed && placeholder ? /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-placeholder` }, renderWrapper()) : renderWrapper());
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, fixed && placeholder ? /* @__PURE__ */ React__default.createElement(View, { className: `${classPrefix2}-placeholder` }, renderWrapper()) : renderWrapper());
 };
 NavBar.defaultProps = defaultProps$1h;
 NavBar.displayName = "NutNavBar";
@@ -5195,14 +5235,14 @@ const Tabs = (props) => {
   };
   const getRect2 = (selector) => {
     return new Promise((resolve) => {
-      Taro.createSelectorQuery().select(selector).boundingClientRect().exec((rect = []) => {
+      createSelectorQuery().select(selector).boundingClientRect().exec((rect = []) => {
         resolve(rect[0]);
       });
     });
   };
   const getAllRect = (selector) => {
     return new Promise((resolve) => {
-      Taro.createSelectorQuery().selectAll(selector).boundingClientRect().exec((rect = []) => {
+      createSelectorQuery().selectAll(selector).boundingClientRect().exec((rect = []) => {
         resolve(rect[0]);
       });
     });
@@ -5309,7 +5349,12 @@ const Tabs = (props) => {
         activeType === "line" && /* @__PURE__ */ React__default.createElement(
           View,
           {
-            className: `${classPrefix$k}-titles-item-line`,
+            className: classNames(
+              `${classPrefix$k}-titles-item-line`,
+              {
+                [`${classPrefix$k}-titles-item-line-${direction}`]: true
+              }
+            ),
             style: tabsActiveStyle
           }
         ),
@@ -5325,9 +5370,7 @@ const Tabs = (props) => {
           View,
           {
             className: classNames(
-              {
-                ellipsis: true
-              },
+              `${classPrefix$k}-ellipsis`,
               `${classPrefix$k}-titles-item-text`
             )
           },
@@ -7491,28 +7534,33 @@ const CheckboxGroupContext = createContext(null);
 const Context$1 = CheckboxGroupContext;
 const defaultProps$11 = {
   max: void 0,
+  min: void 0,
   labelPosition: "right",
   direction: "vertical",
   onChange: (value) => {
   },
+  onLimit: (type4) => {
+  },
   options: []
 };
 const classPrefix$j = "nut-checkboxgroup";
 const CheckboxGroup = React__default.forwardRef(
   (props, ref) => {
-    const { children } = { ...defaultProps$11, ...props };
     const {
+      children,
       className,
       disabled,
       onChange,
       value,
       defaultValue,
       max,
+      min,
+      onLimit,
       labelPosition,
       direction,
       options,
       ...rest
-    } = props;
+    } = { ...defaultProps$11, ...props };
     useImperativeHandle(ref, () => ({
       toggle(state) {
         if (state === false) {
@@ -7557,7 +7605,7 @@ const CheckboxGroup = React__default.forwardRef(
           }
         );
       });
-    }, [options, max]);
+    }, [options, max, min]);
     return /* @__PURE__ */ React__default.createElement(
       Context$1.Provider,
       {
@@ -7565,13 +7613,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);
           }
         }
@@ -7707,10 +7764,6 @@ const Checkbox = (props) => {
     if (disabled)
       return;
     const latestChecked = !innerChecked;
-    if (ctx && ctx.max !== void 0) {
-      if (latestChecked && ctx.value.length >= ctx.max)
-        return;
-    }
     setChecked(latestChecked);
   };
   const renderButton = () => {
@@ -10939,6 +10992,7 @@ Menu.Item = MenuItem;
 const defaultProps$T = {
   ...ComponentDefaults,
   visible: false,
+  rightActions: "",
   type: "default",
   custom: [],
   random: false,
@@ -10949,6 +11003,7 @@ const NumberKeyboard = (props) => {
   const { locale } = useConfig$1();
   const {
     title,
+    rightActions,
     confirmText,
     visible,
     type: type4,
@@ -11058,7 +11113,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(
@@ -11101,6 +11156,7 @@ const RadioGroup = React__default.forwardRef(
       value,
       defaultValue,
       onChange,
+      shape,
       labelPosition,
       direction,
       options,
@@ -11136,6 +11192,7 @@ const RadioGroup = React__default.forwardRef(
         value: {
           labelPosition: labelPosition || "right",
           disabled,
+          shape,
           value: val2State,
           check: (value2) => {
             setVal2State(value2);
@@ -11263,11 +11320,11 @@ const Radio = (props) => {
       className: classNames(color())
     }) : /* @__PURE__ */ React__default.createElement(I$1, { className: classNames(color()) });
   };
+  const renderByShape = (shape2) => {
+    return shape2 === "button" ? renderButton() : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, renderIcon(), renderLabel());
+  };
   const renderRadioItem = () => {
-    if (shape === "button") {
-      return renderButton();
-    }
-    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, renderIcon(), renderLabel());
+    return renderByShape(context && context.shape ? context.shape : shape);
   };
   const handleClick = (e2) => {
     if (disabled || checkedStatement)
@@ -11609,7 +11666,8 @@ const defaultProps$P = {
   uncheckedIcon: null,
   disabled: false,
   readOnly: false,
-  allowHalf: false
+  allowHalf: false,
+  touchable: false
 };
 const Rate = (props) => {
   const {
@@ -11624,13 +11682,17 @@ const Rate = (props) => {
     disabled,
     readOnly,
     allowHalf,
-    onChange
+    touchable,
+    onChange,
+    onTouchEnd
   } = {
     ...defaultProps$P,
     ...props
   };
   const classPrefix2 = "nut-rate";
   const [countArray, setCountArray] = useState([1, 2, 3, 4, 5]);
+  const [refs, setRefs] = useRefs();
+  const rateRects = useRef([]);
   const [score, setScore] = usePropsValue({
     value,
     defaultValue: Math.max(defaultValue || 0, min),
@@ -11667,8 +11729,70 @@ const Rate = (props) => {
     const value2 = Math.max(min, n - 0.5);
     setScore(value2);
   };
+  const getScoreByPosition = (x) => {
+    var _a;
+    if ((_a = rateRects.current) == null ? void 0 : _a.length) {
+      for (let index = rateRects.current.length - 1; index >= 0; index--) {
+        const item = rateRects.current[index];
+        if (item && x > item.left) {
+          return allowHalf ? index + (x > item.left + item.width / 2 ? 1 : 0.5) : index + 1;
+        }
+      }
+      return 0;
+    }
+  };
+  const updateRects = () => {
+    for (let index = 0; index < refs.length; index++) {
+      const item = refs[index];
+      if (item) {
+        getRectByTaro(item).then((res) => {
+          rateRects.current[index] = res;
+        });
+      }
+    }
+  };
+  useReady(() => {
+    updateRects();
+  });
+  const handleTouchStart = (e2) => {
+    if (!touchable || readOnly || disabled) {
+      return;
+    }
+    if (e2.cancelable) {
+      e2.preventDefault();
+    }
+    e2.stopPropagation();
+    updateRects();
+  };
+  const handleTouchMove = (e2) => {
+    if (!touchable || readOnly || disabled) {
+      return;
+    }
+    if (e2.cancelable) {
+      e2.preventDefault();
+    }
+    e2.stopPropagation();
+    const val = getScoreByPosition(e2.touches[0].clientX);
+    if (val !== void 0) {
+      setScore(Math.max(min, val));
+    }
+  };
+  const handleTouchEnd = (e2) => {
+    if (!touchable || readOnly || disabled) {
+      return;
+    }
+    if (e2.cancelable) {
+      e2.preventDefault();
+    }
+    e2.stopPropagation();
+    const val = getScoreByPosition(e2.changedTouches[0].clientX);
+    if (val !== void 0) {
+      setScore(Math.max(min, val));
+      onTouchEnd && onTouchEnd(e2, Math.max(min, val));
+    }
+  };
   return /* @__PURE__ */ React__default.createElement(
-    "div",
+    View,
     {
       className: classNames(
         classPrefix2,
@@ -11678,14 +11802,20 @@ const Rate = (props) => {
         },
         className
       ),
-      style
+      catchMove: true,
+      style,
+      onTouchStart: handleTouchStart,
+      onTouchMove: handleTouchMove,
+      onTouchEnd: handleTouchEnd,
+      onTouchCancel: handleTouchEnd
     },
-    countArray.map((n) => {
+    countArray.map((n, index) => {
       return /* @__PURE__ */ React__default.createElement(
         "div",
         {
           className: `${classPrefix2}-item`,
           key: n,
+          ref: setRefs(index),
           onClick: (event) => onClick(event, n)
         },
         /* @__PURE__ */ React__default.createElement(
@@ -12556,7 +12686,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(
         j$3,
         {
           color: "rgba(0,0,0,0.6)",
@@ -13042,7 +13172,16 @@ const ActionSheet = (props) => {
 ActionSheet.defaultProps = defaultProps$H;
 ActionSheet.displayName = "NutActionSheet";
 const Content = (props) => {
-  const { visible, title, header, footer, footerDirection, onClick, children } = props;
+  const {
+    visible,
+    title,
+    header,
+    footer,
+    close: close2,
+    footerDirection,
+    onClick,
+    children
+  } = props;
   const classPrefix2 = "nut-dialog";
   const renderHeader = () => {
     return title ? /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-header` }, title) : null;
@@ -13068,6 +13207,7 @@ const Content = (props) => {
       style: props.style,
       onClick: (e2) => handleClick(e2)
     },
+    close2,
     header,
     /* @__PURE__ */ React__default.createElement(
       "div",
@@ -13136,6 +13276,8 @@ const defaultProps$G = {
   disableConfirmButton: false,
   footerDirection: "horizontal",
   lockScroll: true,
+  closeIconPosition: "top-right",
+  closeIcon: false,
   beforeCancel: () => true,
   beforeClose: () => true,
   onOverlayClick: () => true
@@ -13164,6 +13306,8 @@ const BaseDialog = (props) => {
       confirmText,
       cancelText,
       overlay,
+      closeIconPosition,
+      closeIcon,
       onClose,
       onCancel,
       onConfirm,
@@ -13221,6 +13365,23 @@ const BaseDialog = (props) => {
       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(View, { className: closeClasses, onClick: handleCancel }, React__default.isValidElement(closeIcon) ? closeIcon : /* @__PURE__ */ React__default.createElement(A$1, null));
+  };
   const onHandleClickOverlay = (e2) => {
     if (closeOnOverlayClick && visible && e2.target === e2.currentTarget) {
       const closed = onOverlayClick && onOverlayClick();
@@ -13260,6 +13421,7 @@ const BaseDialog = (props) => {
           style,
           title,
           header,
+          close: renderCloseIcon(),
           footer: renderFooter(),
           footerDirection,
           visible
@@ -14230,7 +14392,7 @@ const Popover = (props) => {
   };
   const getRectTaro = async (targetId2) => {
     return new Promise((resolve) => {
-      const query = Taro.createSelectorQuery();
+      const query = createSelectorQuery();
       query.select(`#${targetId2}`) && query.select(`#${targetId2}`).boundingClientRect();
       query.exec((res) => {
         resolve(res[0]);
@@ -15666,7 +15828,7 @@ const CollapseItem = (props) => {
   );
   const getRect2 = (selector) => {
     return new Promise((resolve) => {
-      Taro.createSelectorQuery().select(selector).boundingClientRect().exec((rect = []) => {
+      createSelectorQuery().select(selector).boundingClientRect().exec((rect = []) => {
         resolve(rect[0]);
       });
     });
@@ -16110,10 +16272,10 @@ const Ellipsis = (props) => {
   const [contentCopy, setContentCopy] = useState(content);
   const lineH = useRef(0);
   const originHeight = useRef(0);
-  const refRandomId = Math.random().toString(36).slice(-8);
+  const refRandomId = useRef(Math.random().toString(36).slice(-8));
   const widthRef = useRef("auto");
-  let widthBase = [14, 10, 7, 8.4, 10];
-  let symbolTextWidth = widthBase[0] * 0.7921;
+  const widthBase = useRef([14, 10, 7, 8.4, 10]);
+  const symbolTextWidth = useRef(widthBase.current[0] * 0.7921);
   const chineseReg = /^[\u4e00-\u9fa5]+$/;
   const digitReg = /^[0-9]+$/;
   const letterUpperReg = /^[A-Z]+$/;
@@ -16123,23 +16285,16 @@ const Ellipsis = (props) => {
     width ? `${classPrefix$6}-width` : "",
     className
   );
-  const init = () => {
-    setExceeded(false);
-    setExpanded(false);
+  useEffect(() => {
     setContentCopy(content);
     nextTick(() => {
       getSymbolInfo();
       getReference();
     });
-  };
-  useReady(() => init());
-  useEffect(
-    () => init(),
-    [content, lineH.current, maxHeight.current, originHeight.current]
-  );
+  }, [content]);
   const getSymbolInfo = async () => {
     const refe = await getRectByTaro(symbolContain == null ? void 0 : symbolContain.current);
-    symbolTextWidth = refe.width ? Math.ceil(refe.width) : Math.ceil(widthBase[0] * 0.7921);
+    symbolTextWidth.current = refe.width ? Math.ceil(refe.width) : Math.ceil(widthBase.current[0] * 0.7921);
   };
   const symbolText = () => {
     if (direction === "end" || direction === "middle") {
@@ -16148,9 +16303,8 @@ const Ellipsis = (props) => {
     return `${symbol}${expandText}${symbol}`;
   };
   const getReference = async () => {
-    const element = root2.current;
     const query = createSelectorQuery();
-    query.select(`#${element.id}`) && query.select(`#${element.id}`).fields(
+    query.select(`#root${refRandomId.current}`) && query.select(`#root${refRandomId.current}`).fields(
       {
         computedStyle: [
           "width",
@@ -16173,7 +16327,7 @@ const Ellipsis = (props) => {
         originHeight.current = pxToNumber(res.height);
         widthRef.current = res.width;
         const bsize = pxToNumber(res.fontSize);
-        widthBase = [
+        widthBase.current = [
           bsize,
           bsize * 0.72,
           bsize * 0.53,
@@ -16244,7 +16398,7 @@ const Ellipsis = (props) => {
     setContentCopy(newContent);
   };
   const tailorContent = (left2, right2, type4 = "") => {
-    const threeDotWidth = symbolTextWidth;
+    const threeDotWidth = symbolTextWidth.current;
     const direc = direction === "middle" && type4 ? type4 : direction;
     setExceeded(true);
     let widthPart = -1;
@@ -16264,15 +16418,15 @@ const Ellipsis = (props) => {
     while (widthPart < contentPartWidth) {
       const zi = content[marking];
       if (chineseReg.test(zi)) {
-        widthPart = Number(widthPart + widthBase[0]);
+        widthPart = Number(widthPart + widthBase.current[0]);
       } else if (letterUpperReg.test(zi)) {
-        widthPart = Number(widthPart + widthBase[1]);
+        widthPart = Number(widthPart + widthBase.current[1]);
       } else if (letterLowerReg.test(zi)) {
-        widthPart = Number(widthPart + widthBase[2]);
+        widthPart = Number(widthPart + widthBase.current[2]);
       } else if (digitReg.test(zi)) {
-        widthPart = Number(widthPart + widthBase[3]);
+        widthPart = Number(widthPart + widthBase.current[3]);
       } else {
-        widthPart = Number(widthPart + widthBase[4]);
+        widthPart = Number(widthPart + widthBase.current[4]);
       }
       cutoff = marking;
       direc === "end" ? marking++ : marking--;
@@ -16306,20 +16460,22 @@ const Ellipsis = (props) => {
       className: classes,
       onClick: handleClick,
       ref: root2,
-      id: `root${refRandomId}`,
+      id: `root${refRandomId.current}`,
       ...rest
     },
-    /* @__PURE__ */ React__default.createElement("div", null, !exceeded ? /* @__PURE__ */ React__default.createElement(
-      "div",
+    /* @__PURE__ */ React__default.createElement(View, null, !exceeded ? /* @__PURE__ */ React__default.createElement(
+      View,
       {
         className: "nut-ellipsis-wordbreak",
         style: {
-          width: `${!Number.isNaN(Number(width)) ? `${width}px` : "auto"}`
+          width: `${!Number.isNaN(Number(width)) ? `${width}px` : "auto"}`,
+          height: "20px",
+          overflow: "hidden"
         }
       },
       content
-    ) : null, exceeded && !expanded ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
-      "div",
+    ) : null, exceeded && !expanded ? /* @__PURE__ */ React__default.createElement(
+      View,
       {
         className: "nut-ellipsis-wordbreak",
         style: {
@@ -16341,8 +16497,8 @@ const Ellipsis = (props) => {
       ) : null,
       ((_c = ellipsis.current) == null ? void 0 : _c.tailing) && symbol,
       (_d = ellipsis.current) == null ? void 0 : _d.tailing
-    )) : null, exceeded && expanded ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
-      "div",
+    ) : null, exceeded && expanded ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+      View,
       {
         style: {
           width: `${!Number.isNaN(Number(width)) ? `${width}px` : "auto"}`
@@ -16361,20 +16517,20 @@ const Ellipsis = (props) => {
       collapseText
     ) : null) : null)
   ), /* @__PURE__ */ React__default.createElement(
-    "div",
+    View,
     {
       className: "nut-ellipsis-copy",
       ref: rootContain,
-      id: `rootContain${refRandomId}`,
+      id: `rootContain${refRandomId.current}`,
       style: { width: `${widthRef}` }
     },
-    /* @__PURE__ */ React__default.createElement("div", null, contentCopy)
+    /* @__PURE__ */ React__default.createElement(View, null, contentCopy)
   ), /* @__PURE__ */ React__default.createElement(
-    "div",
+    View,
     {
       className: "nut-ellipsis-copy",
       ref: symbolContain,
-      id: `symbolContain${refRandomId}`,
+      id: `symbolContain${refRandomId.current}`,
       style: { display: "inline" }
     },
     symbolText()
@@ -16567,6 +16723,8 @@ const defaultProps$g = {
   closeOnContentClick: false,
   indicator: false,
   indicatorColor: "#fff",
+  closeIcon: false,
+  closeIconPosition: "top-right",
   showMenuByLongpress: false,
   onChange: (value) => {
   },
@@ -16585,6 +16743,8 @@ const ImagePreview = (props) => {
     indicator,
     autoPlay,
     closeOnContentClick,
+    closeIcon,
+    closeIconPosition,
     showMenuByLongpress,
     onClose
   } = props;
@@ -16800,7 +16960,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(A$1, null) : closeIcon
+    ) : null
   );
 };
 ImagePreview.defaultProps = defaultProps$g;
@@ -17061,7 +17229,7 @@ const Step = (props) => {
     }
     return `${classPrefix2}-icon`;
   };
-  return /* @__PURE__ */ React__default.createElement("div", { className: classes, ...restProps, onClick: handleClickStep }, /* @__PURE__ */ React__default.createElement("div", { className: "nut-step-head" }, /* @__PURE__ */ React__default.createElement("div", { className: "nut-step-line" }), /* @__PURE__ */ React__default.createElement("div", { className: renderIconClass() }, icon || !dot && /* @__PURE__ */ React__default.createElement("span", { className: "nut-step-inner" }, value))), /* @__PURE__ */ React__default.createElement("div", { className: "nut-step-main" }, /* @__PURE__ */ React__default.createElement("span", { className: "nut-step-title" }, title), description && /* @__PURE__ */ React__default.createElement("span", { className: "nut-step-description" }, description)));
+  return /* @__PURE__ */ React__default.createElement("div", { className: classes, ...restProps, onClick: handleClickStep }, /* @__PURE__ */ React__default.createElement(View, { className: "nut-step-head" }, /* @__PURE__ */ React__default.createElement(View, { className: "nut-step-line" }), /* @__PURE__ */ React__default.createElement(View, { className: renderIconClass() }, icon || !dot && /* @__PURE__ */ React__default.createElement("span", { className: "nut-step-inner" }, value))), (title || description) && /* @__PURE__ */ React__default.createElement(View, { className: "nut-step-main" }, /* @__PURE__ */ React__default.createElement("span", { className: "nut-step-title" }, title), description && /* @__PURE__ */ React__default.createElement("span", { className: "nut-step-description" }, description)));
 };
 Step.defaultProps = defaultProps$d;
 Step.displayName = "NutStep";
@@ -17094,14 +17262,7 @@ const Steps = (props) => {
     },
     className
   );
-  return /* @__PURE__ */ React__default.createElement(DataContext.Provider, { value: parentSteps }, React__default.createElement(
-    "div",
-    {
-      className: classes,
-      ...restProps
-    },
-    children
-  ));
+  return /* @__PURE__ */ React__default.createElement(DataContext.Provider, { value: parentSteps }, /* @__PURE__ */ React__default.createElement("div", { className: classes, ...restProps }, children));
 };
 Steps.defaultProps = defaultProps$c;
 Steps.displayName = "NutSteps";
@@ -17297,16 +17458,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`,
@@ -17433,7 +17603,7 @@ const getTaroRectById = (id) => {
       }
       reject();
     } else {
-      const query = Taro.createSelectorQuery();
+      const query = createSelectorQuery();
       query.select(`#${id}`).boundingClientRect().exec(function(rect) {
         if (rect[0]) {
           resolve(rect[0]);
@@ -17623,7 +17793,6 @@ const Tour = (props) => {
 Tour.defaultProps = defaultProps$9;
 Tour.displayName = "NutTour";
 const defaultProps$8 = {
-  ...ComponentDefaults,
   source: {
     type: {},
     src: ""
@@ -17645,6 +17814,7 @@ const Video = (props) => {
     source,
     options,
     className,
+    style,
     onPlay,
     onPause,
     onPlayEnd,
@@ -17654,7 +17824,7 @@ const Video = (props) => {
     ...props
   };
   const classes = classNames(classPrefix$2, className);
-  return /* @__PURE__ */ React__default.createElement("div", { className: classes, ...restProps }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(View, { className: classes, style }, /* @__PURE__ */ React__default.createElement(
     Video$1,
     {
       className: "nut-video-player",
@@ -17666,7 +17836,8 @@ const Video = (props) => {
       src: source.src,
       onPlay,
       onPause,
-      onEnded: onPlayEnd
+      onEnded: onPlayEnd,
+      ...restProps
     }
   ));
 };
@@ -18519,7 +18690,7 @@ const AvatarCropper = (props) => {
   useReady(() => {
     if (showAlipayCanvas2D) {
       const { canvasId } = canvasAll;
-      Taro.createSelectorQuery().select(`#${canvasId}`).node(({ node: canvas }) => {
+      createSelectorQuery().select(`#${canvasId}`).node(({ node: canvas }) => {
         canvas.width = state.displayWidth;
         canvas.height = state.displayHeight;
         setCanvasAll({ ...canvasAll, cropperCanvas: canvas });