@nutui/nutui-react 2.4.1 → 2.4.2

package/CHANGELOG.md

@@ -1,7 +1,54 @@
+# v2.4.2
+`2024-03-20`
+
+* :sparkles: feat(backtop): rtl (#2051) @xiaoyatong
+* :sparkles: feat(badge): 新增 fill 属性 (#2042) @Eiinu
+* :sparkles: feat(button): 增加xlarge,按钮内图标大小追随按钮当前字号 (#2037) @xiaoyatong
+* :sparkles: feat(ci): add issue-close.yml (#2031) @Eiinu
+* :sparkles: feat(infiniteloading): add type props (#2027) @songsong
+* :sparkles: feat(NoticeBar): 增加right 属性,支持更多可自定义内容 @xiaoyatong
+* :sparkles: feat(pulltorefresh): 增加 type 属性，支持深色背景设置 (#2044) @xiaoyatong
+* :bug: fix(address): demo拆解与规范 (#2068) @Alex.huxiyang
+* :bug: fix(avatar): demo规范与调整 (#2071) @Alex.huxiyang
+* :bug: fix(backtop): demo拆解与规范 (#2025) @Alex.huxiyang
+* :bug: fix(badge): demo拆解与规范 (#2060) @sd
+* :bug: fix(build): 移除构建产物中重复的类型文件 (#2038) @Eiinu
+* :bug: fix(calendarcard): 修复受控模式 (#2063) @Eiinu
+* :bug: fix(Card): demo拆解与规范 (#2072) @joyfully-W
+* :bug: fix(dialog): demo拆解与规范 (#2069) @songsong
+* :bug: fix(elevator): demo拆解与规范 (#2030) @Alex.huxiyang
+* :bug: fix(ellipsis): 修复设置行数超过内容高度时只显示一行内容的问题 (#2028) @bbf
+* :bug: fix(Empty): 调整默认图片为jd图片 (#2032) @xiaoyatong
+* :bug: fix(fixedNav): demo拆解与规范 (#2048) @Alex.huxiyang
+* :bug: fix(icon): 处理 rtl 部分 (#2050) @xiaoyatong
+* :bug: fix(indicator): demo拆解与规范 (#2090) @Eiinu
+* :bug: fix(infiniteLoading): demo拆解与规范+增加joy logo的demo (#2081) @songsong
+* :bug: fix(input): demo拆解与规范 (#2035) @yeyu1998
+* :bug: fix(navbar): demo拆解与规范 (#2055) @Alex.huxiyang
+* :bug: fix(pagination): demo拆解与规范 (#2079) @Alex.huxiyang
+* :bug: fix(popover): 调整demo (#2043) @xiaoyatong
+* :bug: fix(price): demo拆解与规范 (#2082) @Alex.huxiyang
+* :bug: fix(pulltorefresh): demo中下拉图标修改为joy logo (#2084) @songsong
+* :bug: fix(range): touchmove 回调中 rect 获取失败时终止 (#2029) @Eiinu
+* :bug: fix(rate): demo拆解与规范 (#2045) @sandra
+* :bug: fix(SearchBar): demo拆解与规范 (#2064) @joyfully-W
+* :bug: fix(sideNavBar): demo拆解与规范 (#2058) @Alex.huxiyang
+* :bug: fix(skeleton): demo拆解与规范 (#2047) @sd
+* :bug: fix(sticky): demo拆解与规范 (#2024) @Alex.huxiyang
+* :bug: fix(swiper): rtl (#2061) @xiaoyatong
+* :bug: fix(switch):switch组件demo代码重构 (#2033) @姜衿
+* :bug: fix(tabbar): demo拆解与规范&脚本增强 (#2059) @Alex.huxiyang
+* :bug: fix(trendarrow): demo拆解与规范 (#2075) @ber
+* :bug: fix(watermark): demo拆解与规范 (#2083) @Eiinu
+* :bug: fix: fix swipe slide element get rect width error (#2017) @awefeng
+* :bug: fix: update copy-docs-h5-or-taro.js (#2080) @Eiinu
+* 🔨 chore(row): 优化 className (#2054) @Eiinu
+* test: migrate jest to vitest (#2057) @Eiinu
+
+
 # v2.4.1
 `2024-03-15`
 
-
 * :sparkles: feat(badge): 新增 fill 属性 (#2042) @eiinu
 * :sparkles: feat(button): 增加xlarge,按钮内图标大小追随按钮当前字号 (#2037) @xiaoyatong
 * :sparkles: feat(ci): add issue-close.yml (#2031) @eiinu

package/dist/esm/BackTop.js

@@ -3,8 +3,10 @@ import { Top } from "@nutui/icons-react";
 import classNames from "classnames";
 import { C as ComponentDefaults } from "./typings.js";
 import { r as requestAniFrame } from "./raf.js";
+import { useRtl } from "./ConfigProvider.js";
 const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { target: "", threshold: 200, zIndex: 900, duration: 1e3 });
 const BackTop = (props) => {
+  const rtl = useRtl();
   const { children, target, threshold, zIndex, className, duration, style, onClick } = Object.assign(Object.assign({}, defaultProps), props);
   const classPrefix = "nut-backtop";
   const [backTop, SetBackTop] = useState(false);
@@ -75,7 +77,7 @@ const BackTop = (props) => {
     duration > 0 ? scrollAnimation() : scroll();
   };
   const styles = Object.keys(style || {}).length !== 0 ? Object.assign({ zIndex }, style) : {
-    right: "10px",
+    [rtl ? "left" : "right"]: "10px",
     bottom: "20px",
     zIndex
   };

package/dist/esm/CalendarCard.js

@@ -3,6 +3,7 @@ import classNames from "classnames";
 import { C as ComponentDefaults } from "./typings.js";
 import { U as Utils } from "./date.js";
 import { u as useConfig } from "./configprovider2.js";
+import { u as usePropsValue } from "./use-props-value.js";
 const ArrowLeft = () => {
   return React__default.createElement(
     "svg",
@@ -120,14 +121,11 @@ const CalendarCard = React__default.forwardRef((props, ref) => {
     }
     return range ? [convertDayToDate(range)] : [];
   };
-  const [innerValue, setInnerValue] = useState(() => {
-    const val = value || defaultValue ? valueToRange(value || defaultValue) : [];
-    return val;
+  const [innerValue, setInnerValue] = usePropsValue({
+    value: value ? valueToRange(value) : void 0,
+    defaultValue: defaultValue ? valueToRange(defaultValue) : void 0,
+    finalValue: []
   });
-  useEffect(() => {
-    const val = value || defaultValue ? valueToRange(value || defaultValue) : [];
-    setInnerValue(val);
-  }, [value]);
   const change = (v) => {
     setInnerValue(v);
     if (type === "single") {

package/dist/esm/NoticeBar/style/style.css

@@ -1 +1 @@
-.nut-noticebar{width:100%}.nut-noticebar .nut-noticebar-box{position:relative;display:flex;align-items:center;height:var(--nutui-noticebar-height, 36px);padding:var(--nutui-noticebar-box-padding, 0 16px);font-size:var(--nutui-noticebar-font-size, var(--nutui-font-size-2, 12px));background:var(--nutui-noticebar-background, rgb(251, 248, 220));color:var(--nutui-noticebar-color, #d9500b);border-radius:var(--nutui-noticebar-border-radius, 0)}.nut-noticebar .nut-noticebar-box-wrapable,.nut-noticebar .nut-noticebar-box-center{height:auto;padding:var(--nutui-noticebar-wrapable-padding, 8px 16px)}.nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap,.nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap{height:auto}.nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content{position:relative;white-space:normal;word-wrap:break-word}.nut-noticebar .nut-noticebar-box-center{justify-content:center}.nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap{flex:initial}.nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content{position:relative;display:initial}.nut-noticebar .nut-noticebar-box-left-icon{display:flex;height:var(--nutui-noticebar-left-icon-width, 16px);min-width:var(--nutui-noticebar-left-icon-width, 16px);margin-right:var(--nutui-noticebar-icon-gap, 4px);background-size:100% 100%}.nut-noticebar .nut-noticebar-box-right-icon{display:flex;align-items:center;justify-content:center;width:var(--nutui-noticebar-right-icon-width, 16px);margin-left:var(--nutui-noticebar-icon-gap, 4px)}.nut-noticebar .nut-noticebar-box-wrap{display:flex;flex:1;height:var(--nutui-noticebar-line-height, 24px);line-height:var(--nutui-noticebar-line-height, 24px);overflow:hidden;position:relative}.nut-noticebar .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content{position:absolute;white-space:nowrap}.nut-noticebar .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content.nut-ellipsis{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nut-noticebar .nut-noticebar-box .play{animation:nut-notice-bar-play linear both running}.nut-noticebar .nut-noticebar-box .play-infinite{animation:nut-notice-bar-play-infinite linear infinite both running}.nut-noticebar .nut-noticebar-box .play-vertical{animation:nut-notice-bar-play-vertical linear infinite both running}.nut-noticebar .nut-noticebar-vertical{position:relative;display:flex;justify-content:space-between;height:var(--nutui-noticebar-height, 36px);font-size:var(--nutui-noticebar-font-size, var(--nutui-font-size-2, 12px));overflow:hidden;padding:var(--nutui-noticebar-box-padding, 0 16px);background:var(--nutui-noticebar-background, rgb(251, 248, 220));color:var(--nutui-noticebar-color, #d9500b)}.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-left-icon{height:var(--nutui-noticebar-left-icon-width, 16px);min-width:var(--nutui-noticebar-left-icon-width, 16px);margin:var(--nutui-noticebar-icon-gap, 4px);background-size:100% 100%;display:flex;align-self:center}.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-horseLamp-list{margin:0;padding:0;display:block;flex:1}.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-horseLamp-list-item{display:flex;align-items:center;height:var(--nutui-noticebar-height, 36px);width:100%}.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-wrap{display:flex;height:100%;width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon{align-self:center;display:flex;justify-content:center;width:var(--nutui-noticebar-right-icon-width, 16px);margin-left:var(--nutui-noticebar-icon-gap, 4px)}@keyframes nut-notice-bar-play{to{transform:translate3d(-100%,0,0)}}@keyframes nut-notice-bar-play-infinite{to{transform:translate3d(-100%,0,0)}}@keyframes nut-notice-bar-play-vertical{to{transform:translateY(var(--nutui-noticebar-height, 36px))}}[dir=rtl] .nut-noticebar .nut-noticebar-box-left-icon,.nut-rtl .nut-noticebar .nut-noticebar-box-left-icon{margin-right:0;margin-left:var(--nutui-noticebar-icon-gap, 4px)}[dir=rtl] .nut-noticebar .nut-noticebar-box-right-icon,.nut-rtl .nut-noticebar .nut-noticebar-box-right-icon{margin-left:0;margin-right:var(--nutui-noticebar-icon-gap, 4px)}[dir=rtl] .nut-noticebar .nut-noticebar-box .play,.nut-rtl .nut-noticebar .nut-noticebar-box .play{animation:nut-notice-bar-play-rtl linear both running}[dir=rtl] .nut-noticebar .nut-noticebar-box .play-infinite,.nut-rtl .nut-noticebar .nut-noticebar-box .play-infinite{animation:nut-notice-bar-play-infinite-rtl linear infinite both running}@keyframes nut-notice-bar-play-rtl{to{transform:translate3d(100%,0,0)}}@keyframes nut-notice-bar-play-infinite-rtl{to{transform:translate3d(100%,0,0)}}[dir=rtl] .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon,.nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon{margin-left:0;margin-right:var(--nutui-noticebar-icon-gap, 4px)}
+.nut-noticebar{width:100%}.nut-noticebar .nut-noticebar-box{position:relative;display:flex;align-items:center;height:var(--nutui-noticebar-height, 36px);padding:var(--nutui-noticebar-box-padding, 0 16px);font-size:var(--nutui-noticebar-font-size, var(--nutui-font-size-2, 12px));background:var(--nutui-noticebar-background, rgb(251, 248, 220));color:var(--nutui-noticebar-color, #d9500b);border-radius:var(--nutui-noticebar-border-radius, 0)}.nut-noticebar .nut-noticebar-box-wrapable,.nut-noticebar .nut-noticebar-box-center{height:auto;padding:var(--nutui-noticebar-wrapable-padding, 8px 16px)}.nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap,.nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap{height:auto}.nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content{position:relative;white-space:normal;word-wrap:break-word}.nut-noticebar .nut-noticebar-box-center{justify-content:center}.nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap{flex:initial}.nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content{position:relative;display:initial}.nut-noticebar .nut-noticebar-box-left-icon{display:flex;height:var(--nutui-noticebar-left-icon-width, 16px);min-width:var(--nutui-noticebar-left-icon-width, 16px);margin-right:var(--nutui-noticebar-icon-gap, 4px);background-size:100% 100%}.nut-noticebar .nut-noticebar-box-right-icon{display:flex;align-items:center;justify-content:center;width:var(--nutui-noticebar-right-icon-width, 16px);margin-left:var(--nutui-noticebar-icon-gap, 4px)}.nut-noticebar .nut-noticebar-box-right-icon .nut-icon{width:12px;height:12px}.nut-noticebar .nut-noticebar-box-wrap{display:flex;flex:1;height:var(--nutui-noticebar-line-height, 24px);line-height:var(--nutui-noticebar-line-height, 24px);overflow:hidden;position:relative}.nut-noticebar .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content{position:absolute;white-space:nowrap}.nut-noticebar .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content.nut-ellipsis{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nut-noticebar .nut-noticebar-box .play{animation:nut-notice-bar-play linear both running}.nut-noticebar .nut-noticebar-box .play-infinite{animation:nut-notice-bar-play-infinite linear infinite both running}.nut-noticebar .nut-noticebar-box .play-vertical{animation:nut-notice-bar-play-vertical linear infinite both running}.nut-noticebar .nut-noticebar-vertical{position:relative;display:flex;justify-content:space-between;height:var(--nutui-noticebar-height, 36px);font-size:var(--nutui-noticebar-font-size, var(--nutui-font-size-2, 12px));overflow:hidden;padding:var(--nutui-noticebar-box-padding, 0 16px);background:var(--nutui-noticebar-background, rgb(251, 248, 220));color:var(--nutui-noticebar-color, #d9500b)}.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-left-icon{height:var(--nutui-noticebar-left-icon-width, 16px);min-width:var(--nutui-noticebar-left-icon-width, 16px);margin:var(--nutui-noticebar-icon-gap, 4px);background-size:100% 100%;display:flex;align-self:center}.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-horseLamp-list{margin:0;padding:0;display:block;flex:1}.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-horseLamp-list-item{display:flex;align-items:center;height:var(--nutui-noticebar-height, 36px);width:100%}.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-wrap{display:flex;height:100%;width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon{align-self:center;display:flex;justify-content:center;width:var(--nutui-noticebar-right-icon-width, 16px);margin-left:var(--nutui-noticebar-icon-gap, 4px)}@keyframes nut-notice-bar-play{to{transform:translate3d(-100%,0,0)}}@keyframes nut-notice-bar-play-infinite{to{transform:translate3d(-100%,0,0)}}@keyframes nut-notice-bar-play-vertical{to{transform:translateY(var(--nutui-noticebar-height, 36px))}}[dir=rtl] .nut-noticebar .nut-noticebar-box-left-icon,.nut-rtl .nut-noticebar .nut-noticebar-box-left-icon{margin-right:0;margin-left:var(--nutui-noticebar-icon-gap, 4px)}[dir=rtl] .nut-noticebar .nut-noticebar-box-right-icon,.nut-rtl .nut-noticebar .nut-noticebar-box-right-icon{margin-left:0;margin-right:var(--nutui-noticebar-icon-gap, 4px)}[dir=rtl] .nut-noticebar .nut-noticebar-box .play,.nut-rtl .nut-noticebar .nut-noticebar-box .play{animation:nut-notice-bar-play-rtl linear both running}[dir=rtl] .nut-noticebar .nut-noticebar-box .play-infinite,.nut-rtl .nut-noticebar .nut-noticebar-box .play-infinite{animation:nut-notice-bar-play-infinite-rtl linear infinite both running}@keyframes nut-notice-bar-play-rtl{to{transform:translate3d(100%,0,0)}}@keyframes nut-notice-bar-play-infinite-rtl{to{transform:translate3d(100%,0,0)}}[dir=rtl] .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon,.nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon{margin-left:0;margin-right:var(--nutui-noticebar-icon-gap, 4px)}

package/dist/esm/NoticeBar.js

@@ -4,10 +4,10 @@ import classNames from "classnames";
 import { g as getRect } from "./use-client-rect.js";
 import { C as ComponentDefaults } from "./typings.js";
 import { useRtl } from "./ConfigProvider.js";
-const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { align: "left", direction: "horizontal", list: [], duration: 1e3, height: 40, content: "", closeable: false, wrap: false, leftIcon: React__default.createElement(Notice, { width: 16, height: 16 }), rightIcon: null, delay: 1, scrollable: null, speed: 50 });
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { align: "left", direction: "horizontal", list: [], duration: 1e3, height: 40, content: "", closeable: false, wrap: false, leftIcon: React__default.createElement(Notice, { width: 16, height: 16 }), rightIcon: null, right: null, delay: 1, scrollable: null, speed: 50 });
 const NoticeBar = (props) => {
   const rtl = useRtl();
-  const { children, className, style, align, direction, list, duration, height, content, closeable, wrap, leftIcon, rightIcon, delay, scrollable, speed, close, click, onClose, onClick, onItemClick } = Object.assign(Object.assign({}, defaultProps), props);
+  const { children, className, style, align, direction, list, duration, height, content, closeable, wrap, leftIcon, rightIcon, right, delay, scrollable, speed, close, click, onClose, onClick, onItemClick } = Object.assign(Object.assign({}, defaultProps), props);
   const classPrefix = "nut-noticebar";
   const wrapRef = useRef(null);
   const contentRef = useRef(null);
@@ -315,6 +315,7 @@ const NoticeBar = (props) => {
           content
         )
       ),
+      right ? React__default.createElement("div", { className: "nut-noticebar-box-right" }, right) : null,
       closeable || rightIcon ? React__default.createElement("div", { className: "nut-noticebar-box-right-icon", onClick: onClickIcon }, rightIcon || React__default.createElement(Close, { width: 12, height: 12 })) : null
     ) : null,
     showNoticeBar && scrollList.current.length > 0 && isVertical ? React__default.createElement(

package/dist/esm/Row.js

@@ -12,13 +12,7 @@ const Row = (props) => {
     return className2;
   };
   const getClasses = () => {
-    return `
-    ${getClass("", type)}
-    ${getClass("justify", justify)}
-    ${getClass("align", align)}
-    ${getClass("flex", wrap)}
-    ${classPrefix}
-   `;
+    return classNames(classPrefix, getClass("", type), getClass("justify", justify), getClass("align", align), getClass("flex", wrap));
   };
   const parentRow = {
     gutter

package/dist/esm/Swiper.js

@@ -6,6 +6,7 @@ import { g as getRect } from "./use-client-rect.js";
 import { I as Indicator } from "./indicator2.js";
 import { u as useTouch } from "./use-touch.js";
 import { r as requestAniFrame } from "./raf.js";
+import { useRtl } from "./ConfigProvider.js";
 import SwiperItem from "./SwiperItem.js";
 const defaultProps = {
   duration: 500,
@@ -21,6 +22,7 @@ const defaultProps = {
   className: ""
 };
 const Swiper = React__default.forwardRef((props, ref) => {
+  const rtl = useRtl();
   const mergedProps = Object.assign(Object.assign({}, defaultProps), props);
   const { children, direction, className, onChange, defaultValue, indicator, touchable, preventDefault, stopPropagation, autoPlay, center } = mergedProps, rest = __rest(mergedProps, ["children", "direction", "className", "onChange", "defaultValue", "indicator", "touchable", "preventDefault", "stopPropagation", "autoPlay", "center"]);
   const container = useRef(null);
@@ -213,7 +215,7 @@ const Swiper = React__default.forwardRef((props, ref) => {
     target.style.transitionDuration = `${swiperRef.current.moving ? 0 : props.duration}ms`;
     target.style[isVertical ? "height" : "width"] = `${Number(size) * swiperItemCount}px`;
     target.style[isVertical ? "width" : "height"] = `${isVertical ? width : height}px`;
-    target.style.transform = `translate3D${!isVertical ? `(${_offset}px,0,0)` : `(0,${_offset}px,0)`}`;
+    target.style.transform = `translate3D${!isVertical ? `(${rtl ? -_offset : _offset}px,0,0)` : `(0,${_offset}px,0)`}`;
   };
   const onTouchStart = (e) => {
     if (!props.touchable)
@@ -270,7 +272,7 @@ const Swiper = React__default.forwardRef((props, ref) => {
     }
     const offset2 = childOffset[index];
     if (offset2) {
-      style.transform = `translate3D${direction === "horizontal" ? `(${offset2}px,0,0)` : `(0,${offset2}px,0)`}`;
+      style.transform = `translate3D${direction === "horizontal" ? `(${rtl ? -offset2 : offset2}px,0,0)` : `(0,${offset2}px,0)`}`;
     }
     return style;
   };

package/dist/esm/button2.js

@@ -11,15 +11,15 @@ const Button = React__default.forwardRef((props, ref) => {
   const getStyle = useCallback(() => {
     const style2 = {};
     if (props.color) {
-      if (props.fill && (props.fill === "outline" || props.fill === "dashed")) {
+      if (props.fill === "outline" || props.fill === "dashed") {
         style2.color = color;
-        style2.background = "#fff";
         if (!(color === null || color === void 0 ? void 0 : color.includes("gradient"))) {
           style2.borderColor = color;
         }
       } else {
         style2.color = "#fff";
         style2.background = color;
+        style2.borderColor = "transparent";
       }
     }
     return style2;

package/dist/esm/menuitem2.js

@@ -63,11 +63,13 @@ const MenuItem = forwardRef((props, ref) => {
   const getParentOffset = () => {
     setTimeout(() => {
       const p = parent.menuRef.current;
-      const rect = p.getBoundingClientRect();
-      setPosition({
-        height: rect.height,
-        top: rect.top
-      });
+      if (p) {
+        const rect = p.getBoundingClientRect();
+        setPosition({
+          height: rect.height,
+          top: rect.top
+        });
+      }
     });
   };
   useEffect(() => {

package/dist/locales/base.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.4.1 Fri Mar 15 2024 20:52:07 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.4.2 Wed Mar 20 2024 20:00:21 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/en-US.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.4.1 Fri Mar 15 2024 20:52:07 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.4.2 Wed Mar 20 2024 20:00:21 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/id-ID.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.4.1 Fri Mar 15 2024 20:52:07 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.4.2 Wed Mar 20 2024 20:00:21 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/tr-TR.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.4.1 Fri Mar 15 2024 20:52:07 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.4.2 Wed Mar 20 2024 20:00:21 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-CN.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.4.1 Fri Mar 15 2024 20:52:07 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.4.2 Wed Mar 20 2024 20:00:21 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-TW.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.4.1 Fri Mar 15 2024 20:52:07 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.4.2 Wed Mar 20 2024 20:00:21 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-UG.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.4.1 Fri Mar 15 2024 20:52:07 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.4.2 Wed Mar 20 2024 20:00:21 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/nutui.react.es.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.4.1 Fri Mar 15 2024 20:51:38 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.4.2 Wed Mar 20 2024 19:59:52 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -1164,15 +1164,15 @@ const Button = React__default.forwardRef(
     const getStyle = useCallback(() => {
       const style2 = {};
       if (props.color) {
-        if (props.fill && (props.fill === "outline" || props.fill === "dashed")) {
+        if (props.fill === "outline" || props.fill === "dashed") {
           style2.color = color;
-          style2.background = "#fff";
           if (!(color == null ? void 0 : color.includes("gradient"))) {
             style2.borderColor = color;
           }
         } else {
           style2.color = "#fff";
           style2.background = color;
+          style2.borderColor = "transparent";
         }
       }
       return style2;
@@ -4874,13 +4874,13 @@ const Row = (props) => {
     return className2;
   };
   const getClasses = () => {
-    return `
-    ${getClass("", type4)}
-    ${getClass("justify", justify)}
-    ${getClass("align", align)}
-    ${getClass("flex", wrap)}
-    ${classPrefix$m}
-   `;
+    return classNames(
+      classPrefix$m,
+      getClass("", type4),
+      getClass("justify", justify),
+      getClass("align", align),
+      getClass("flex", wrap)
+    );
   };
   const parentRow = {
     gutter
@@ -5130,6 +5130,7 @@ const defaultProps$1i = {
   duration: 1e3
 };
 const BackTop = (props) => {
+  const rtl = useRtl();
   const {
     children,
     target,
@@ -5215,7 +5216,7 @@ const BackTop = (props) => {
     zIndex,
     ...style
   } : {
-    right: "10px",
+    [rtl ? "left" : "right"]: "10px",
     bottom: "20px",
     zIndex
   };
@@ -13413,14 +13414,11 @@ const CalendarCard = React__default.forwardRef((props, ref) => {
     }
     return range3 ? [convertDayToDate(range3)] : [];
   };
-  const [innerValue, setInnerValue] = useState(() => {
-    const val = value || defaultValue ? valueToRange(value || defaultValue) : [];
-    return val;
+  const [innerValue, setInnerValue] = usePropsValue({
+    value: value ? valueToRange(value) : void 0,
+    defaultValue: defaultValue ? valueToRange(defaultValue) : void 0,
+    finalValue: []
   });
-  useEffect(() => {
-    const val = value || defaultValue ? valueToRange(value || defaultValue) : [];
-    setInnerValue(val);
-  }, [value]);
   const change = (v) => {
     setInnerValue(v);
     if (type4 === "single") {
@@ -16799,11 +16797,13 @@ const MenuItem = forwardRef((props, ref) => {
   const getParentOffset = () => {
     setTimeout(() => {
       const p = parent.menuRef.current;
-      const rect = p.getBoundingClientRect();
-      setPosition({
-        height: rect.height,
-        top: rect.top
-      });
+      if (p) {
+        const rect = p.getBoundingClientRect();
+        setPosition({
+          height: rect.height,
+          top: rect.top
+        });
+      }
     });
   };
   useEffect(() => {
@@ -19958,6 +19958,7 @@ const defaultProps$z = {
   wrap: false,
   leftIcon: /* @__PURE__ */ React__default.createElement(r, { width: 16, height: 16 }),
   rightIcon: null,
+  right: null,
   delay: 1,
   scrollable: null,
   speed: 50
@@ -19978,6 +19979,7 @@ const NoticeBar = (props) => {
     wrap,
     leftIcon,
     rightIcon,
+    right,
     delay,
     scrollable,
     speed,
@@ -20293,7 +20295,7 @@ const NoticeBar = (props) => {
     },
     children,
     content
-  )), closeable || rightIcon ? /* @__PURE__ */ React__default.createElement("div", { className: "nut-noticebar-box-right-icon", onClick: onClickIcon }, rightIcon || /* @__PURE__ */ React__default.createElement(r$2, { width: 12, height: 12 })) : null) : null, showNoticeBar && scrollList.current.length > 0 && isVertical ? /* @__PURE__ */ React__default.createElement(
+  )), right ? /* @__PURE__ */ React__default.createElement("div", { className: "nut-noticebar-box-right" }, right) : null, closeable || rightIcon ? /* @__PURE__ */ React__default.createElement("div", { className: "nut-noticebar-box-right-icon", onClick: onClickIcon }, rightIcon || /* @__PURE__ */ React__default.createElement(r$2, { width: 12, height: 12 })) : null) : null, showNoticeBar && scrollList.current.length > 0 && isVertical ? /* @__PURE__ */ React__default.createElement(
     "div",
     {
       className: "nut-noticebar-vertical",
@@ -22794,6 +22796,7 @@ const defaultProps$h = {
   className: ""
 };
 const Swiper = React__default.forwardRef((props, ref) => {
+  const rtl = useRtl();
   const mergedProps = { ...defaultProps$h, ...props };
   const {
     children,
@@ -23004,7 +23007,7 @@ const Swiper = React__default.forwardRef((props, ref) => {
     target.style.transitionDuration = `${swiperRef.current.moving ? 0 : props.duration}ms`;
     target.style[isVertical ? "height" : "width"] = `${Number(size) * swiperItemCount}px`;
     target.style[isVertical ? "width" : "height"] = `${isVertical ? width : height}px`;
-    target.style.transform = `translate3D${!isVertical ? `(${_offset}px,0,0)` : `(0,${_offset}px,0)`}`;
+    target.style.transform = `translate3D${!isVertical ? `(${rtl ? -_offset : _offset}px,0,0)` : `(0,${_offset}px,0)`}`;
   };
   const onTouchStart = (e2) => {
     if (!props.touchable)
@@ -23063,7 +23066,7 @@ const Swiper = React__default.forwardRef((props, ref) => {
     }
     const offset2 = childOffset[index];
     if (offset2) {
-      style.transform = `translate3D${direction === "horizontal" ? `(${offset2}px,0,0)` : `(0,${offset2}px,0)`}`;
+      style.transform = `translate3D${direction === "horizontal" ? `(${rtl ? -offset2 : offset2}px,0,0)` : `(0,${offset2}px,0)`}`;
     }
     return style;
   };

package/dist/nutui.react.umd.js

@@ -2,7 +2,7 @@
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("react-dom")) : typeof define === "function" && define.amd ? define(["exports", "react", "react-dom"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory((global2.nutui = global2.nutui || {}, global2.nutui.react = {}), global2.React, global2.ReactDOM));
 })(this, function(exports2, React, ReactDOM) {
   "use strict";/*!
-* @nutui/nutui-react v2.4.1 Fri Mar 15 2024 20:51:38 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.4.2 Wed Mar 20 2024 19:59:52 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -1182,15 +1182,15 @@ Check the top-level render call using <` + t2 + ">.");
       const getStyle = React.useCallback(() => {
         const style2 = {};
         if (props.color) {
-          if (props.fill && (props.fill === "outline" || props.fill === "dashed")) {
+          if (props.fill === "outline" || props.fill === "dashed") {
             style2.color = color;
-            style2.background = "#fff";
             if (!(color == null ? void 0 : color.includes("gradient"))) {
               style2.borderColor = color;
             }
           } else {
             style2.color = "#fff";
             style2.background = color;
+            style2.borderColor = "transparent";
           }
         }
         return style2;
@@ -4892,13 +4892,13 @@ Check the top-level render call using <` + t2 + ">.");
       return className2;
     };
     const getClasses = () => {
-      return `
-    ${getClass("", type2)}
-    ${getClass("justify", justify)}
-    ${getClass("align", align)}
-    ${getClass("flex", wrap)}
-    ${classPrefix$m}
-   `;
+      return classNames(
+        classPrefix$m,
+        getClass("", type2),
+        getClass("justify", justify),
+        getClass("align", align),
+        getClass("flex", wrap)
+      );
     };
     const parentRow = {
       gutter
@@ -5148,6 +5148,7 @@ Check the top-level render call using <` + t2 + ">.");
     duration: 1e3
   };
   const BackTop = (props) => {
+    const rtl = useRtl();
     const {
       children,
       target,
@@ -5233,7 +5234,7 @@ Check the top-level render call using <` + t2 + ">.");
       zIndex,
       ...style
     } : {
-      right: "10px",
+      [rtl ? "left" : "right"]: "10px",
       bottom: "20px",
       zIndex
     };
@@ -13431,14 +13432,11 @@ Please add \`${key}Action\` when creating your handler.`);
       }
       return range2 ? [convertDayToDate(range2)] : [];
     };
-    const [innerValue, setInnerValue] = React.useState(() => {
-      const val = value || defaultValue ? valueToRange(value || defaultValue) : [];
-      return val;
+    const [innerValue, setInnerValue] = usePropsValue({
+      value: value ? valueToRange(value) : void 0,
+      defaultValue: defaultValue ? valueToRange(defaultValue) : void 0,
+      finalValue: []
     });
-    React.useEffect(() => {
-      const val = value || defaultValue ? valueToRange(value || defaultValue) : [];
-      setInnerValue(val);
-    }, [value]);
     const change = (v) => {
       setInnerValue(v);
       if (type2 === "single") {
@@ -16817,11 +16815,13 @@ Please add \`${key}Action\` when creating your handler.`);
     const getParentOffset = () => {
       setTimeout(() => {
         const p = parent.menuRef.current;
-        const rect = p.getBoundingClientRect();
-        setPosition({
-          height: rect.height,
-          top: rect.top
-        });
+        if (p) {
+          const rect = p.getBoundingClientRect();
+          setPosition({
+            height: rect.height,
+            top: rect.top
+          });
+        }
       });
     };
     React.useEffect(() => {
@@ -19976,6 +19976,7 @@ Please add \`${key}Action\` when creating your handler.`);
     wrap: false,
     leftIcon: /* @__PURE__ */ React.createElement(r, { width: 16, height: 16 }),
     rightIcon: null,
+    right: null,
     delay: 1,
     scrollable: null,
     speed: 50
@@ -19996,6 +19997,7 @@ Please add \`${key}Action\` when creating your handler.`);
       wrap,
       leftIcon,
       rightIcon,
+      right,
       delay,
       scrollable,
       speed,
@@ -20311,7 +20313,7 @@ Please add \`${key}Action\` when creating your handler.`);
       },
       children,
       content
-    )), closeable || rightIcon ? /* @__PURE__ */ React.createElement("div", { className: "nut-noticebar-box-right-icon", onClick: onClickIcon }, rightIcon || /* @__PURE__ */ React.createElement(r$2, { width: 12, height: 12 })) : null) : null, showNoticeBar && scrollList.current.length > 0 && isVertical ? /* @__PURE__ */ React.createElement(
+    )), right ? /* @__PURE__ */ React.createElement("div", { className: "nut-noticebar-box-right" }, right) : null, closeable || rightIcon ? /* @__PURE__ */ React.createElement("div", { className: "nut-noticebar-box-right-icon", onClick: onClickIcon }, rightIcon || /* @__PURE__ */ React.createElement(r$2, { width: 12, height: 12 })) : null) : null, showNoticeBar && scrollList.current.length > 0 && isVertical ? /* @__PURE__ */ React.createElement(
       "div",
       {
         className: "nut-noticebar-vertical",
@@ -22812,6 +22814,7 @@ Please add \`${key}Action\` when creating your handler.`);
     className: ""
   };
   const Swiper = React.forwardRef((props, ref) => {
+    const rtl = useRtl();
     const mergedProps = { ...defaultProps$h, ...props };
     const {
       children,
@@ -23022,7 +23025,7 @@ Please add \`${key}Action\` when creating your handler.`);
       target.style.transitionDuration = `${swiperRef.current.moving ? 0 : props.duration}ms`;
       target.style[isVertical ? "height" : "width"] = `${Number(size) * swiperItemCount}px`;
       target.style[isVertical ? "width" : "height"] = `${isVertical ? width : height}px`;
-      target.style.transform = `translate3D${!isVertical ? `(${_offset}px,0,0)` : `(0,${_offset}px,0)`}`;
+      target.style.transform = `translate3D${!isVertical ? `(${rtl ? -_offset : _offset}px,0,0)` : `(0,${_offset}px,0)`}`;
     };
     const onTouchStart = (e2) => {
       if (!props.touchable)
@@ -23081,7 +23084,7 @@ Please add \`${key}Action\` when creating your handler.`);
       }
       const offset2 = childOffset[index];
       if (offset2) {
-        style.transform = `translate3D${direction === "horizontal" ? `(${offset2}px,0,0)` : `(0,${offset2}px,0)`}`;
+        style.transform = `translate3D${direction === "horizontal" ? `(${rtl ? -offset2 : offset2}px,0,0)` : `(0,${offset2}px,0)`}`;
       }
       return style;
     };

package/dist/packages/noticebar/noticebar.scss

@@ -59,6 +59,11 @@
       justify-content: center;
       width: $noticebar-right-icon-width;
       margin-left: $noticebar-icon-gap;
+
+      .nut-icon {
+        width: 12px;
+        height: 12px;
+      }
     }
 
     &-wrap {