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

package/dist/nutui.react.umd.js

@@ -8,7 +8,7 @@ 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.
 */
@@ -4503,24 +4503,64 @@ var __publicField = (obj, key, value) => {
         zIndex
       };
     };
+    const leftRef = React.useRef(null);
+    const rightRef = React.useRef(null);
+    const wrapperRef = React.useRef(null);
+    const [contentWidth, setContentWidth] = React.useState("50%");
+    const getNodeWidth = async (node) => {
+      if (node) {
+        const refe = await getRectByTaro(node);
+        return refe.width;
+      }
+      return 0;
+    };
+    React.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.createElement("div", { className: `${classPrefix2}-left` }, back && /* @__PURE__ */ React.createElement(
-        "div",
+      return back || left2 ? /* @__PURE__ */ React.createElement(components.View, { className: `${classPrefix2}-left`, ref: leftRef }, back && /* @__PURE__ */ React.createElement(
+        components.View,
         {
           className: `${classPrefix2}-left-back`,
           onClick: (e2) => onBackClick(e2)
         },
         back
-      ), left2);
+      ), left2) : null;
     };
     const renderContent = () => {
-      return /* @__PURE__ */ React.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.createElement(components.View, { className: `${classPrefix2}-title`, style: titleStyle }, children);
     };
     const renderRight = () => {
-      return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-right` }, right2);
+      return /* @__PURE__ */ React.createElement(components.View, { className: `${classPrefix2}-right`, ref: rightRef }, right2);
     };
     const renderWrapper = () => {
-      return /* @__PURE__ */ React.createElement("div", { className: cls, style: styles() }, renderLeft(), renderContent(), renderRight());
+      return /* @__PURE__ */ React.createElement(components.View, { className: cls, style: styles(), ref: wrapperRef }, renderLeft(), renderContent(), renderRight());
     };
     const classes = classNames({
       [`${classPrefix2}-fixed`]: fixed,
@@ -4528,7 +4568,7 @@ var __publicField = (obj, key, value) => {
       [`${classPrefix2}-title-align-${titleAlign}`]: true
     });
     const cls = classNames(classPrefix2, classes, className);
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, fixed && placeholder ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-placeholder` }, renderWrapper()) : renderWrapper());
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, fixed && placeholder ? /* @__PURE__ */ React.createElement(components.View, { className: `${classPrefix2}-placeholder` }, renderWrapper()) : renderWrapper());
   };
   NavBar.defaultProps = defaultProps$1h;
   NavBar.displayName = "NutNavBar";
@@ -5325,7 +5365,12 @@ var __publicField = (obj, key, value) => {
           activeType === "line" && /* @__PURE__ */ React.createElement(
             components.View,
             {
-              className: `${classPrefix$k}-titles-item-line`,
+              className: classNames(
+                `${classPrefix$k}-titles-item-line`,
+                {
+                  [`${classPrefix$k}-titles-item-line-${direction}`]: true
+                }
+              ),
               style: tabsActiveStyle
             }
           ),
@@ -5341,9 +5386,7 @@ var __publicField = (obj, key, value) => {
             components.View,
             {
               className: classNames(
-                {
-                  ellipsis: true
-                },
+                `${classPrefix$k}-ellipsis`,
                 `${classPrefix$k}-titles-item-text`
               )
             },
@@ -7507,28 +7550,33 @@ var __publicField = (obj, key, value) => {
   const Context$1 = CheckboxGroupContext;
   const defaultProps$11 = {
     max: void 0,
+    min: void 0,
     labelPosition: "right",
     direction: "vertical",
     onChange: (value) => {
     },
+    onLimit: (type2) => {
+    },
     options: []
   };
   const classPrefix$j = "nut-checkboxgroup";
   const CheckboxGroup = React.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 };
       React.useImperativeHandle(ref, () => ({
         toggle(state) {
           if (state === false) {
@@ -7573,7 +7621,7 @@ var __publicField = (obj, key, value) => {
             }
           );
         });
-      }, [options, max]);
+      }, [options, max, min]);
       return /* @__PURE__ */ React.createElement(
         Context$1.Provider,
         {
@@ -7581,13 +7629,22 @@ var __publicField = (obj, key, value) => {
             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);
             }
           }
@@ -7723,10 +7780,6 @@ var __publicField = (obj, key, value) => {
       if (disabled)
         return;
       const latestChecked = !innerChecked;
-      if (ctx && ctx.max !== void 0) {
-        if (latestChecked && ctx.value.length >= ctx.max)
-          return;
-      }
       setChecked(latestChecked);
     };
     const renderButton = () => {
@@ -10955,6 +11008,7 @@ var __publicField = (obj, key, value) => {
   const defaultProps$T = {
     ...ComponentDefaults,
     visible: false,
+    rightActions: "",
     type: "default",
     custom: [],
     random: false,
@@ -10965,6 +11019,7 @@ var __publicField = (obj, key, value) => {
     const { locale } = useConfig$1();
     const {
       title,
+      rightActions,
       confirmText,
       visible,
       type: type2,
@@ -11074,7 +11129,7 @@ var __publicField = (obj, key, value) => {
           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(
@@ -11117,6 +11172,7 @@ var __publicField = (obj, key, value) => {
         value,
         defaultValue,
         onChange,
+        shape,
         labelPosition,
         direction,
         options,
@@ -11152,6 +11208,7 @@ var __publicField = (obj, key, value) => {
           value: {
             labelPosition: labelPosition || "right",
             disabled,
+            shape,
             value: val2State,
             check: (value2) => {
               setVal2State(value2);
@@ -11279,11 +11336,11 @@ var __publicField = (obj, key, value) => {
         className: classNames(color())
       }) : /* @__PURE__ */ React.createElement(I$1, { className: classNames(color()) });
     };
+    const renderByShape = (shape2) => {
+      return shape2 === "button" ? renderButton() : /* @__PURE__ */ React.createElement(React.Fragment, null, renderIcon(), renderLabel());
+    };
     const renderRadioItem = () => {
-      if (shape === "button") {
-        return renderButton();
-      }
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, renderIcon(), renderLabel());
+      return renderByShape(context && context.shape ? context.shape : shape);
     };
     const handleClick = (e2) => {
       if (disabled || checkedStatement)
@@ -11625,7 +11682,8 @@ var __publicField = (obj, key, value) => {
     uncheckedIcon: null,
     disabled: false,
     readOnly: false,
-    allowHalf: false
+    allowHalf: false,
+    touchable: false
   };
   const Rate = (props) => {
     const {
@@ -11640,13 +11698,17 @@ var __publicField = (obj, key, value) => {
       disabled,
       readOnly,
       allowHalf,
-      onChange
+      touchable,
+      onChange,
+      onTouchEnd
     } = {
       ...defaultProps$P,
       ...props
     };
     const classPrefix2 = "nut-rate";
     const [countArray, setCountArray] = React.useState([1, 2, 3, 4, 5]);
+    const [refs, setRefs] = useRefs();
+    const rateRects = React.useRef([]);
     const [score, setScore] = usePropsValue({
       value,
       defaultValue: Math.max(defaultValue || 0, min),
@@ -11683,8 +11745,70 @@ var __publicField = (obj, key, value) => {
       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;
+          });
+        }
+      }
+    };
+    Taro.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.createElement(
-      "div",
+      components.View,
       {
         className: classNames(
           classPrefix2,
@@ -11694,14 +11818,20 @@ var __publicField = (obj, key, value) => {
           },
           className
         ),
-        style
+        catchMove: true,
+        style,
+        onTouchStart: handleTouchStart,
+        onTouchMove: handleTouchMove,
+        onTouchEnd: handleTouchEnd,
+        onTouchCancel: handleTouchEnd
       },
-      countArray.map((n) => {
+      countArray.map((n, index) => {
         return /* @__PURE__ */ React.createElement(
           "div",
           {
             className: `${classPrefix2}-item`,
             key: n,
+            ref: setRefs(index),
             onClick: (event) => onClick(event, n)
           },
           /* @__PURE__ */ React.createElement(
@@ -12572,7 +12702,7 @@ var __publicField = (obj, key, value) => {
           className: `nut-uploader-preview ${previewType}`,
           key: item.uid
         },
-        previewType === "picture" && deletable && /* @__PURE__ */ React.createElement(
+        previewType === "picture" && !children && deletable && /* @__PURE__ */ React.createElement(
           j$3,
           {
             color: "rgba(0,0,0,0.6)",
@@ -13058,7 +13188,16 @@ var __publicField = (obj, key, value) => {
   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.createElement("div", { className: `${classPrefix2}-header` }, title) : null;
@@ -13084,6 +13223,7 @@ var __publicField = (obj, key, value) => {
         style: props.style,
         onClick: (e2) => handleClick(e2)
       },
+      close2,
       header,
       /* @__PURE__ */ React.createElement(
         "div",
@@ -13152,6 +13292,8 @@ var __publicField = (obj, key, value) => {
     disableConfirmButton: false,
     footerDirection: "horizontal",
     lockScroll: true,
+    closeIconPosition: "top-right",
+    closeIcon: false,
     beforeCancel: () => true,
     beforeClose: () => true,
     onOverlayClick: () => true
@@ -13180,6 +13322,8 @@ var __publicField = (obj, key, value) => {
         confirmText,
         cancelText,
         overlay,
+        closeIconPosition,
+        closeIcon,
         onClose,
         onCancel,
         onConfirm,
@@ -13237,6 +13381,23 @@ var __publicField = (obj, key, value) => {
         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(components.View, { className: closeClasses, onClick: handleCancel }, React.isValidElement(closeIcon) ? closeIcon : /* @__PURE__ */ React.createElement(A$1, null));
+    };
     const onHandleClickOverlay = (e2) => {
       if (closeOnOverlayClick && visible && e2.target === e2.currentTarget) {
         const closed = onOverlayClick && onOverlayClick();
@@ -13276,6 +13437,7 @@ var __publicField = (obj, key, value) => {
             style,
             title,
             header,
+            close: renderCloseIcon(),
             footer: renderFooter(),
             footerDirection,
             visible
@@ -16126,10 +16288,10 @@ var __publicField = (obj, key, value) => {
     const [contentCopy, setContentCopy] = React.useState(content);
     const lineH = React.useRef(0);
     const originHeight = React.useRef(0);
-    const refRandomId = Math.random().toString(36).slice(-8);
+    const refRandomId = React.useRef(Math.random().toString(36).slice(-8));
     const widthRef = React.useRef("auto");
-    let widthBase = [14, 10, 7, 8.4, 10];
-    let symbolTextWidth = widthBase[0] * 0.7921;
+    const widthBase = React.useRef([14, 10, 7, 8.4, 10]);
+    const symbolTextWidth = React.useRef(widthBase.current[0] * 0.7921);
     const chineseReg = /^[\u4e00-\u9fa5]+$/;
     const digitReg = /^[0-9]+$/;
     const letterUpperReg = /^[A-Z]+$/;
@@ -16139,23 +16301,16 @@ var __publicField = (obj, key, value) => {
       width ? `${classPrefix$6}-width` : "",
       className
     );
-    const init = () => {
-      setExceeded(false);
-      setExpanded(false);
+    React.useEffect(() => {
       setContentCopy(content);
       Taro.nextTick(() => {
         getSymbolInfo();
         getReference();
       });
-    };
-    Taro.useReady(() => init());
-    React.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") {
@@ -16164,9 +16319,8 @@ var __publicField = (obj, key, value) => {
       return `${symbol}${expandText}${symbol}`;
     };
     const getReference = async () => {
-      const element = root2.current;
       const query = Taro.createSelectorQuery();
-      query.select(`#${element.id}`) && query.select(`#${element.id}`).fields(
+      query.select(`#root${refRandomId.current}`) && query.select(`#root${refRandomId.current}`).fields(
         {
           computedStyle: [
             "width",
@@ -16189,7 +16343,7 @@ var __publicField = (obj, key, value) => {
           originHeight.current = pxToNumber(res.height);
           widthRef.current = res.width;
           const bsize = pxToNumber(res.fontSize);
-          widthBase = [
+          widthBase.current = [
             bsize,
             bsize * 0.72,
             bsize * 0.53,
@@ -16260,7 +16414,7 @@ var __publicField = (obj, key, value) => {
       setContentCopy(newContent);
     };
     const tailorContent = (left2, right2, type2 = "") => {
-      const threeDotWidth = symbolTextWidth;
+      const threeDotWidth = symbolTextWidth.current;
       const direc = direction === "middle" && type2 ? type2 : direction;
       setExceeded(true);
       let widthPart = -1;
@@ -16280,15 +16434,15 @@ var __publicField = (obj, key, value) => {
       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--;
@@ -16322,20 +16476,22 @@ var __publicField = (obj, key, value) => {
         className: classes,
         onClick: handleClick,
         ref: root2,
-        id: `root${refRandomId}`,
+        id: `root${refRandomId.current}`,
         ...rest
       },
-      /* @__PURE__ */ React.createElement("div", null, !exceeded ? /* @__PURE__ */ React.createElement(
-        "div",
+      /* @__PURE__ */ React.createElement(components.View, null, !exceeded ? /* @__PURE__ */ React.createElement(
+        components.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.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-        "div",
+      ) : null, exceeded && !expanded ? /* @__PURE__ */ React.createElement(
+        components.View,
         {
           className: "nut-ellipsis-wordbreak",
           style: {
@@ -16357,8 +16513,8 @@ var __publicField = (obj, key, value) => {
         ) : null,
         ((_c = ellipsis.current) == null ? void 0 : _c.tailing) && symbol,
         (_d = ellipsis.current) == null ? void 0 : _d.tailing
-      )) : null, exceeded && expanded ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-        "div",
+      ) : null, exceeded && expanded ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+        components.View,
         {
           style: {
             width: `${!Number.isNaN(Number(width)) ? `${width}px` : "auto"}`
@@ -16377,20 +16533,20 @@ var __publicField = (obj, key, value) => {
         collapseText
       ) : null) : null)
     ), /* @__PURE__ */ React.createElement(
-      "div",
+      components.View,
       {
         className: "nut-ellipsis-copy",
         ref: rootContain,
-        id: `rootContain${refRandomId}`,
+        id: `rootContain${refRandomId.current}`,
         style: { width: `${widthRef}` }
       },
-      /* @__PURE__ */ React.createElement("div", null, contentCopy)
+      /* @__PURE__ */ React.createElement(components.View, null, contentCopy)
     ), /* @__PURE__ */ React.createElement(
-      "div",
+      components.View,
       {
         className: "nut-ellipsis-copy",
         ref: symbolContain,
-        id: `symbolContain${refRandomId}`,
+        id: `symbolContain${refRandomId.current}`,
         style: { display: "inline" }
       },
       symbolText()
@@ -16583,6 +16739,8 @@ var __publicField = (obj, key, value) => {
     closeOnContentClick: false,
     indicator: false,
     indicatorColor: "#fff",
+    closeIcon: false,
+    closeIconPosition: "top-right",
     showMenuByLongpress: false,
     onChange: (value) => {
     },
@@ -16601,6 +16759,8 @@ var __publicField = (obj, key, value) => {
       indicator,
       autoPlay,
       closeOnContentClick,
+      closeIcon,
+      closeIconPosition,
       showMenuByLongpress,
       onClose
     } = props;
@@ -16816,7 +16976,15 @@ var __publicField = (obj, key, value) => {
           )
         )
       ),
-      /* @__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(A$1, null) : closeIcon
+      ) : null
     );
   };
   ImagePreview.defaultProps = defaultProps$g;
@@ -17077,7 +17245,7 @@ var __publicField = (obj, key, value) => {
       }
       return `${classPrefix2}-icon`;
     };
-    return /* @__PURE__ */ React.createElement("div", { className: classes, ...restProps, onClick: handleClickStep }, /* @__PURE__ */ React.createElement("div", { className: "nut-step-head" }, /* @__PURE__ */ React.createElement("div", { className: "nut-step-line" }), /* @__PURE__ */ React.createElement("div", { className: renderIconClass() }, icon || !dot && /* @__PURE__ */ React.createElement("span", { className: "nut-step-inner" }, value))), /* @__PURE__ */ React.createElement("div", { className: "nut-step-main" }, /* @__PURE__ */ React.createElement("span", { className: "nut-step-title" }, title), description && /* @__PURE__ */ React.createElement("span", { className: "nut-step-description" }, description)));
+    return /* @__PURE__ */ React.createElement("div", { className: classes, ...restProps, onClick: handleClickStep }, /* @__PURE__ */ React.createElement(components.View, { className: "nut-step-head" }, /* @__PURE__ */ React.createElement(components.View, { className: "nut-step-line" }), /* @__PURE__ */ React.createElement(components.View, { className: renderIconClass() }, icon || !dot && /* @__PURE__ */ React.createElement("span", { className: "nut-step-inner" }, value))), (title || description) && /* @__PURE__ */ React.createElement(components.View, { className: "nut-step-main" }, /* @__PURE__ */ React.createElement("span", { className: "nut-step-title" }, title), description && /* @__PURE__ */ React.createElement("span", { className: "nut-step-description" }, description)));
   };
   Step.defaultProps = defaultProps$d;
   Step.displayName = "NutStep";
@@ -17110,14 +17278,7 @@ var __publicField = (obj, key, value) => {
       },
       className
     );
-    return /* @__PURE__ */ React.createElement(DataContext.Provider, { value: parentSteps }, React.createElement(
-      "div",
-      {
-        className: classes,
-        ...restProps
-      },
-      children
-    ));
+    return /* @__PURE__ */ React.createElement(DataContext.Provider, { value: parentSteps }, /* @__PURE__ */ React.createElement("div", { className: classes, ...restProps }, children));
   };
   Steps.defaultProps = defaultProps$c;
   Steps.displayName = "NutSteps";
@@ -17313,16 +17474,25 @@ var __publicField = (obj, key, value) => {
         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`,
@@ -17639,7 +17809,6 @@ var __publicField = (obj, key, value) => {
   Tour.defaultProps = defaultProps$9;
   Tour.displayName = "NutTour";
   const defaultProps$8 = {
-    ...ComponentDefaults,
     source: {
       type: {},
       src: ""
@@ -17661,6 +17830,7 @@ var __publicField = (obj, key, value) => {
       source,
       options,
       className,
+      style,
       onPlay,
       onPause,
       onPlayEnd,
@@ -17670,7 +17840,7 @@ var __publicField = (obj, key, value) => {
       ...props
     };
     const classes = classNames(classPrefix$2, className);
-    return /* @__PURE__ */ React.createElement("div", { className: classes, ...restProps }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(components.View, { className: classes, style }, /* @__PURE__ */ React.createElement(
       components.Video,
       {
         className: "nut-video-player",
@@ -17682,7 +17852,8 @@ var __publicField = (obj, key, value) => {
         src: source.src,
         onPlay,
         onPause,
-        onEnded: onPlayEnd
+        onEnded: onPlayEnd,
+        ...restProps
       }
     ));
   };