@nutui/nutui-react 3.0.0-beta.9 → 3.0.1

package/dist/es/packages/imagepreview/style/style.css

@@ -4,19 +4,14 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-overlay {
-  /* #ifdef rn */
-  position: absolute;
-  /* #endif */
-  /* #ifndef rn */
   position: fixed;
-  /* #endif */
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10));
+  background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
   z-index: var(--nutui-overlay-zIndex, 1000);
 }
 
@@ -67,7 +62,7 @@
   position: fixed;
   min-height: 46%;
   max-height: 100%;
-  background-color: var(--nutui-overlay-content-bg-color, var(--nutui-gray-1));
+  background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
   -webkit-overflow-scrolling: touch;
   font-size: var(--nutui-font-size-base, 14px);
 }
@@ -87,13 +82,13 @@
   align-items: center;
 }
 .nut-popup-title-title {
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   font-weight: var(--nutui-font-weight-bold, 600);
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
   line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-popup-title-description {
-  color: var(--nutui-gray-6);
+  color: var(--nutui-color-text, #505259);
   font-size: var(--nutui-popup-description-font-size, var(--nutui-font-size-base, 14px));
   font-weight: var(--nutui-font-weight, 400);
 }
@@ -112,7 +107,7 @@
   z-index: 1;
   width: var(--nutui-popup-icon-size, 20px);
   height: var(--nutui-popup-icon-size, 20px);
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   cursor: pointer;
 }
 .nut-popup-title-right:active {
@@ -243,6 +238,9 @@
   from {
     transform: translate3d(0, -100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes popup-slide-top-exit {
   to {
@@ -264,6 +262,9 @@
   from {
     transform: translate3d(100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-right-exit {
   to {
@@ -285,6 +286,9 @@
   from {
     transform: translate3d(0, 100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes slide-bottom-exit {
   to {
@@ -306,6 +310,9 @@
   from {
     transform: translate3d(-100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-left-exit {
   to {
@@ -392,20 +399,17 @@
   width: var(--nutui-indicator-dot-size, 3px);
   height: var(--nutui-indicator-dot-size, 3px);
   border-radius: 50%;
-  background-color: var(--nutui-gray-4);
-  margin: 0 var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxxs, 2px));
+  background-color: var(--nutui-color-border-disabled, #c2c4cc);
+  margin-left: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4px));
   opacity: 0.4;
 }
-.nut-indicator-dot:first-child, .nut-indicator-line:first-child {
+.nut-indicator-dot-0, .nut-indicator-line-0 {
   margin-left: 0px;
 }
-.nut-indicator-dot:last-child, .nut-indicator-line:last-child {
-  margin-right: 0px;
-}
 .nut-indicator-dot-active, .nut-indicator-line-active {
   width: var(--nutui-indicator-dot-active-size, 6px);
   border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
-  background: var(--nutui-indicator-color, var(--nutui-brand-6));
+  background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23));
   opacity: 1;
 }
 .nut-indicator-fixed-width .nut-indicator-dot {
@@ -428,6 +432,9 @@
 .nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot-active {
   height: 6px;
 }
+.nut-indicator-vertical.nut-indicator-fixed-width.nut-indicator-fixed-width.nut-indicator-white .nut-indicator-dot-active {
+  height: 6px;
+}
 .nut-indicator-line {
   width: var(--nutui-indicator-dot-active-size, 6px);
   margin: 0;
@@ -436,7 +443,7 @@
 }
 .nut-indicator-line-active {
   transition: transform 0.3s ease-in-out;
-  background: var(--nutui-indicator-color, var(--nutui-brand-6));
+  background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23));
 }
 
 .nut-indicator-track {
@@ -450,7 +457,7 @@
   height: 100%;
   box-sizing: border-box;
   border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
-  background-color: var(--nutui-gray-4);
+  background-color: var(--nutui-color-border-disabled, #c2c4cc);
   opacity: 0.4;
 }
 
@@ -458,7 +465,6 @@
   position: relative;
   box-sizing: content-box;
   background: rgba(255, 255, 255, 0.4);
-  border: 1px solid rgba(0, 0, 0, 0.06);
   opacity: 1;
 }
 .nut-indicator-white .nut-indicator-line {
@@ -484,14 +490,12 @@
   justify-content: center;
 }
 .nut-indicator-vertical .nut-indicator-dot {
-  margin: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxxs, 2px)) 0;
+  margin: 0px;
+  margin-top: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4px));
 }
-.nut-indicator-vertical .nut-indicator-dot:first-child {
+.nut-indicator-vertical .nut-indicator-dot-0 {
   margin-top: 0px;
 }
-.nut-indicator-vertical .nut-indicator-dot:last-child {
-  margin-bottom: 0px;
-}
 .nut-indicator-vertical .nut-indicator-dot-active {
   width: var(--nutui-indicator-dot-size, 3px);
   height: var(--nutui-indicator-dot-active-size, 6px);
@@ -501,14 +505,9 @@
   height: var(--nutui-indicator-dot-active-size, 6px);
 }
 
-[dir=rtl] .nut-indicator-dot:first-child,
-.nut-rtl .nut-indicator-dot:first-child {
-  margin-left: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxxs, 2px));
-  margin-right: 0px;
-}
-[dir=rtl] .nut-indicator-dot:last-child,
-.nut-rtl .nut-indicator-dot:last-child {
-  margin-right: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxxs, 2px));
+[dir=rtl] .nut-indicator-dot-0,
+.nut-rtl .nut-indicator-dot-0 {
+  margin-right: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4px));
   margin-left: 0px;
 }
 
@@ -516,9 +515,14 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
-  touch-action: none;
   position: relative;
 }
+.nut-swiper-canmove-horizontal {
+  touch-action: pan-y;
+}
+.nut-swiper-canmove-vertical {
+  touch-action: pan-x;
+}
 .nut-swiper-indicator {
   display: flex;
   flex-direction: row;
@@ -545,15 +549,7 @@
   display: flex;
   position: relative;
 }
-.nut-swiper-inner-horizontal {
-  /* #ifndef rn */
-  transform: translateX(var(--swiper-offset));
-  /* #ifndef rn */
-}
 .nut-swiper-inner-vertical {
-  /* #ifndef rn */
-  transform: translateY(var(--swiper-offset));
-  /* #ifndef rn */
   flex-direction: column;
 }
 
@@ -573,9 +569,6 @@
 .nut-rtl .nut-swiper-indicator {
   left: auto;
   right: 50%;
-  /* #ifndef rn */
-  transform: translateX(50%);
-  /* #endif */
 }
 [dir=rtl] .nut-swiper-indicator-vertical,
 .nut-rtl .nut-swiper-indicator-vertical {
@@ -625,7 +618,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-gray-3);
+  background: var(--nutui-color-background, #f2f3f5);
   background-size: 100% 100%;
 }
 .nut-image-error {
@@ -638,7 +631,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-gray-3);
+  background: var(--nutui-color-background, #f2f3f5);
   background-size: 100% 100%;
 }
 

package/dist/es/packages/indicator/style/indicator.scss

@@ -17,17 +17,13 @@
     height: $indicator-dot-size;
     border-radius: 50%;
     background-color: $color-border-disabled;
-    margin: 0 $indicator-dot-margin;
+    margin-left: $indicator-dot-margin;
     opacity: 0.4;
 
-    &:first-child {
+    &-0 {
       margin-left: 0px;
     }
 
-    &:last-child {
-      margin-right: 0px;
-    }
-
     &-active {
       width: $indicator-dot-active-size;
       border-radius: $indicator-border-radius;
@@ -66,6 +62,16 @@
           height: 6px;
         }
       }
+
+      &.nut-indicator-fixed-width {
+        &.nut-indicator-white {
+          .nut-indicator-dot {
+            &-active {
+              height: 6px;
+            }
+          }
+        }
+      }
     }
   }
 
@@ -106,7 +112,6 @@
       position: relative;
       box-sizing: content-box;
       background: rgba(255, 255, 255, 0.4);
-      border: 1px solid rgba(0, 0, 0, 0.06);
       opacity: 1;
     }
 
@@ -118,6 +123,7 @@
         background: rgba(255, 255, 255, 1);
       }
     }
+
     &-dot {
       &-active {
         background: rgba(255, 255, 255, 1);
@@ -141,16 +147,13 @@
 
   .nut-indicator {
     &-dot {
-      margin: $indicator-dot-margin 0;
+      margin: 0px;
+      margin-top: $indicator-dot-margin;
 
-      &:first-child {
+      &-0 {
         margin-top: 0px;
       }
 
-      &:last-child {
-        margin-bottom: 0px;
-      }
-
       &-active {
         width: $indicator-dot-size;
         height: $indicator-dot-active-size;
@@ -171,12 +174,7 @@
 [dir='rtl'] .nut-indicator,
 .nut-rtl .nut-indicator {
   &-dot {
-    &:first-child {
-      margin-left: $indicator-dot-margin;
-      margin-right: 0px;
-    }
-
-    &:last-child {
+    &-0 {
       margin-right: $indicator-dot-margin;
       margin-left: 0px;
     }

package/dist/es/packages/indicator/style/style.css

@@ -18,20 +18,17 @@
   width: var(--nutui-indicator-dot-size, 3px);
   height: var(--nutui-indicator-dot-size, 3px);
   border-radius: 50%;
-  background-color: var(--nutui-gray-4);
-  margin: 0 var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxxs, 2px));
+  background-color: var(--nutui-color-border-disabled, #c2c4cc);
+  margin-left: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4px));
   opacity: 0.4;
 }
-.nut-indicator-dot:first-child, .nut-indicator-line:first-child {
+.nut-indicator-dot-0, .nut-indicator-line-0 {
   margin-left: 0px;
 }
-.nut-indicator-dot:last-child, .nut-indicator-line:last-child {
-  margin-right: 0px;
-}
 .nut-indicator-dot-active, .nut-indicator-line-active {
   width: var(--nutui-indicator-dot-active-size, 6px);
   border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
-  background: var(--nutui-indicator-color, var(--nutui-brand-6));
+  background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23));
   opacity: 1;
 }
 .nut-indicator-fixed-width .nut-indicator-dot {
@@ -54,6 +51,9 @@
 .nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot-active {
   height: 6px;
 }
+.nut-indicator-vertical.nut-indicator-fixed-width.nut-indicator-fixed-width.nut-indicator-white .nut-indicator-dot-active {
+  height: 6px;
+}
 .nut-indicator-line {
   width: var(--nutui-indicator-dot-active-size, 6px);
   margin: 0;
@@ -62,7 +62,7 @@
 }
 .nut-indicator-line-active {
   transition: transform 0.3s ease-in-out;
-  background: var(--nutui-indicator-color, var(--nutui-brand-6));
+  background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23));
 }
 
 .nut-indicator-track {
@@ -76,7 +76,7 @@
   height: 100%;
   box-sizing: border-box;
   border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
-  background-color: var(--nutui-gray-4);
+  background-color: var(--nutui-color-border-disabled, #c2c4cc);
   opacity: 0.4;
 }
 
@@ -84,7 +84,6 @@
   position: relative;
   box-sizing: content-box;
   background: rgba(255, 255, 255, 0.4);
-  border: 1px solid rgba(0, 0, 0, 0.06);
   opacity: 1;
 }
 .nut-indicator-white .nut-indicator-line {
@@ -110,14 +109,12 @@
   justify-content: center;
 }
 .nut-indicator-vertical .nut-indicator-dot {
-  margin: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxxs, 2px)) 0;
+  margin: 0px;
+  margin-top: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4px));
 }
-.nut-indicator-vertical .nut-indicator-dot:first-child {
+.nut-indicator-vertical .nut-indicator-dot-0 {
   margin-top: 0px;
 }
-.nut-indicator-vertical .nut-indicator-dot:last-child {
-  margin-bottom: 0px;
-}
 .nut-indicator-vertical .nut-indicator-dot-active {
   width: var(--nutui-indicator-dot-size, 3px);
   height: var(--nutui-indicator-dot-active-size, 6px);
@@ -127,13 +124,8 @@
   height: var(--nutui-indicator-dot-active-size, 6px);
 }
 
-[dir=rtl] .nut-indicator-dot:first-child,
-.nut-rtl .nut-indicator-dot:first-child {
-  margin-left: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxxs, 2px));
-  margin-right: 0px;
-}
-[dir=rtl] .nut-indicator-dot:last-child,
-.nut-rtl .nut-indicator-dot:last-child {
-  margin-right: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxxs, 2px));
+[dir=rtl] .nut-indicator-dot-0,
+.nut-rtl .nut-indicator-dot-0 {
+  margin-right: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4px));
   margin-left: 0px;
 }

package/dist/es/packages/infiniteloading/style/style.css

@@ -13,7 +13,7 @@
   width: 100%;
   overflow: hidden;
   font-size: var(--nutui-font-size-s, 12px);
-  color: var(--nutui-infiniteloading-color, var(--nutui-gray-5));
+  color: var(--nutui-infiniteloading-color, var(--nutui-color-text-help, #888b94));
 }
 .nut-infiniteloading .nut-infinite-top-tips {
   width: 100%;
@@ -34,7 +34,7 @@
   justify-content: center;
   width: 100%;
   padding-top: 6px;
-  color: var(--nutui-infiniteloading-color, var(--nutui-gray-5));
+  color: var(--nutui-infiniteloading-color, var(--nutui-color-text-help, #888b94));
   text-align: center;
 }
 .nut-infiniteloading .nut-infinite-bottom-tips {
@@ -47,11 +47,11 @@
   margin-right: 8px;
 }
 .nut-infiniteloading-primary {
-  background-color: var(--nutui-brand-6);
+  background-color: var(--nutui-color-primary, #ff0f23);
 }
 .nut-infiniteloading-primary .nut-infinite-bottom,
 .nut-infiniteloading-primary .nut-infinite-top {
-  color: var(--nutui-white-12);
+  color: var(--nutui-color-text-dark, rgba(255, 255, 255, 0.9));
 }
 
 [dir=rtl] .nut-infiniteloading .nut-infinite-bottom-tips-icons,

package/dist/es/packages/input/input.d.ts

@@ -20,11 +20,11 @@ export interface InputProps extends BasicComponent {
     autoFocus: boolean;
     confirmType: InputConfirmType;
     plain: boolean;
-    formatter?: (value: string) => void;
+    formatter?: (value: string) => string;
     onChange?: (value: string) => void;
     onBlur?: (value: string) => void;
     onFocus?: (value: string) => void;
     onClear?: (value: string) => void;
-    onClick?: (value: MouseEvent<HTMLDivElement>) => void;
+    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
 }
 export declare const Input: React.ForwardRefExoticComponent<Partial<InputProps> & Omit<React.HTMLAttributes<HTMLDivElement>, "onClick" | "onFocus" | "onBlur" | "onChange"> & React.RefAttributes<unknown>>;

package/dist/es/packages/input/input.js

@@ -2,12 +2,12 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
-import React, { useCallback, useRef, forwardRef, useImperativeHandle, useState } from "react";
+import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";
 import { MaskClose } from "@nutui/icons-react";
 import { formatNumber } from "./utils";
 import { useConfig, useRtl } from "../configprovider";
 import { ComponentDefaults } from "../../utils/typings";
-import { usePropsValue } from "../../utils/use-props-value";
+import { usePropsValue } from "../../hooks/use-props-value";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     type: 'text',
     name: '',
@@ -65,89 +65,82 @@ export var Input = /*#__PURE__*/ forwardRef(function(props, ref) {
     useImperativeHandle(ref, function() {
         return {
             clear: function() {
-                setValue('');
+                return setValue('');
             },
             focus: function() {
                 var _inputRef_current;
-                (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+                return (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
             },
             blur: function() {
                 var _inputRef_current;
-                (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.blur();
+                return (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.blur();
             },
             get nativeElement () {
                 return inputRef.current;
             }
         };
     });
-    var inputClass = useCallback(function() {
+    var getInputClass = useCallback(function() {
         var classPrefix = 'nut-input';
         return [
             classPrefix,
-            disabled ? "".concat(classPrefix, "-disabled") : '',
+            "".concat(disabled ? "".concat(classPrefix, "-disabled") : ''),
             readOnly ? "".concat(classPrefix, "-readonly") : '',
-            plain ? "".concat(classPrefix, "-plain") : "".concat(classPrefix, "-container")
+            "".concat(plain ? "".concat(classPrefix, "-plain") : "".concat(classPrefix, "-container"))
         ].filter(Boolean).join(' ');
     }, [
-        disabled
+        disabled,
+        readOnly,
+        plain
     ]);
-    var updateValue = function(value) {
-        var trigger = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 'onChange';
-        var val = value;
-        if (type === 'number') {
-            val = formatNumber(val, false, true);
-        }
-        if (type === 'digit') {
-            val = formatNumber(val, true, true);
-        }
-        if (formatter && trigger === formatTrigger) {
-            val = formatter(val);
-        }
-        setValue(val);
-        var eventHandler = props[trigger];
-        if (eventHandler && typeof eventHandler === 'function' && trigger !== 'onChange') {
-            eventHandler(val);
+    var handleValueUpdate = function(inputValue, trigger) {
+        var updatedValue = inputValue;
+        if (type === 'number') updatedValue = formatNumber(updatedValue, false, true);
+        if (type === 'digit') updatedValue = formatNumber(updatedValue, true, true);
+        if (formatter && trigger === formatTrigger) updatedValue = formatter(updatedValue);
+        setValue(updatedValue);
+        if (trigger !== 'onChange') {
+            var eventHandler = props[trigger];
+            eventHandler === null || eventHandler === void 0 ? void 0 : eventHandler(updatedValue);
         }
     };
     var handleFocus = function(event) {
-        var val = event.target.value;
-        onFocus && onFocus(val);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event.target.value);
         setActive(true);
     };
-    var handleInput = function(value) {
-        updateValue(value, 'onChange');
-    };
     var handleBlur = function(event) {
-        var val = event.target.value;
-        updateValue(val, 'onBlur');
+        handleValueUpdate(event.target.value, 'onBlur');
         setTimeout(function() {
-            setActive(false);
+            return setActive(false);
         }, 200);
     };
-    var inputType = function(type) {
-        if (type === 'digit') {
-            return 'text';
-        }
-        if (type === 'number') {
-            return 'tel';
+    var handleInputChange = function(event) {
+        handleValueUpdate(event.target.value, 'onChange');
+    };
+    var getInputType = function(inputType) {
+        if (inputType === 'digit') return 'text';
+        if (inputType === 'number') return 'tel';
+        return inputType;
+    };
+    var getTextAlign = function() {
+        if (rtl) {
+            if (align === 'right') return 'left';
+            if (align === 'left') return 'right';
         }
-        return type;
+        return align;
     };
     return /*#__PURE__*/ React.createElement("div", {
-        className: "".concat(inputClass(), "  ").concat(className || ''),
+        className: "".concat(getInputClass(), " ").concat(className || ''),
         style: style,
-        onClick: function(e) {
-            onClick && onClick(e);
-        }
+        onClick: onClick
     }, /*#__PURE__*/ React.createElement("input", _object_spread_props(_object_spread({}, rest), {
+        ref: inputRef,
         name: name,
         className: "nut-input-native",
-        ref: inputRef,
         style: {
-            // eslint-disable-next-line no-nested-ternary
-            textAlign: rtl ? align === 'right' ? 'left' : align === 'left' ? 'right' : 'center' : align
+            textAlign: getTextAlign()
         },
-        type: inputType(type),
+        type: getInputType(type),
         maxLength: maxLength,
         placeholder: placeholder === undefined ? locale.placeholder : placeholder,
         disabled: disabled,
@@ -155,15 +148,9 @@ export var Input = /*#__PURE__*/ forwardRef(function(props, ref) {
         value: value,
         autoFocus: autoFocus,
         enterKeyHint: confirmType,
-        onBlur: function(e) {
-            handleBlur(e);
-        },
-        onFocus: function(e) {
-            handleFocus(e);
-        },
-        onChange: function(e) {
-            handleInput(e.currentTarget.value);
-        },
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onChange: handleInputChange,
         onCompositionStart: function(e) {
             composingRef.current = true;
             onCompositionStart === null || onCompositionStart === void 0 ? void 0 : onCompositionStart(e);
@@ -172,7 +159,7 @@ export var Input = /*#__PURE__*/ forwardRef(function(props, ref) {
             composingRef.current = false;
             onCompositionEnd === null || onCompositionEnd === void 0 ? void 0 : onCompositionEnd(e);
         }
-    })), clearable && !readOnly && active && value.length > 0 ? /*#__PURE__*/ React.createElement("span", {
+    })), clearable && !readOnly && active && value.length > 0 && /*#__PURE__*/ React.createElement("span", {
         style: {
             display: 'flex',
             alignItems: 'center',
@@ -181,11 +168,11 @@ export var Input = /*#__PURE__*/ forwardRef(function(props, ref) {
         onClick: function() {
             if (!disabled) {
                 setValue('');
-                onClear && onClear('');
+                onClear === null || onClear === void 0 ? void 0 : onClear('');
             }
         }
     }, clearIcon || /*#__PURE__*/ React.createElement(MaskClose, {
         className: "nut-input-clear"
-    })) : null);
+    })));
 });
 Input.displayName = 'NutInput';