@nutui/nutui-react 1.5.8-beta.0 → 1.5.9-beta.0

package/dist/nutui.react.mjs

@@ -6,7 +6,7 @@ var __publicField = (obj, key, value) => {
 };
 var _a;
 /*!
-* @nutui/nutui-react v1.5.8-beta.0 Wed Jun 07 2023 09:51:25 GMT+0800 (中国标准时间)
+* @nutui/nutui-react v1.5.9-beta.0 Tue Jun 13 2023 14:37:59 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -15,10 +15,15 @@ import React__default, { useCallback, useState, useEffect, createContext, useMem
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { createPortal, unstable_batchedUpdates } from "react-dom";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
-function getDefaultExportFromCjs(x) {
-  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
-}
-var classname = { exports: {} };
+var classnameExports = {};
+var classname = {
+  get exports() {
+    return classnameExports;
+  },
+  set exports(v) {
+    classnameExports = v;
+  }
+};
 var classname_production_min = {};
 var hasRequiredClassname_production_min;
 function requireClassname_production_min() {
@@ -26,37 +31,37 @@ function requireClassname_production_min() {
     return classname_production_min;
   hasRequiredClassname_production_min = 1;
   function r(r2) {
-    function t2(t3, i, a, o) {
-      var f = i ? e + t3 + r2.e + i : e + t3, v = f;
+    function e2(e3, i, a, o) {
+      var f = i ? t + e3 + r2.e + i : t + e3, v = f;
       if (a) {
-        var s = " " + v + r2.m;
-        for (var u in a)
-          if (a.hasOwnProperty(u)) {
-            var p = a[u];
-            true === p ? v += s + u : p && (v += s + u + n + p);
+        var u = " " + v + r2.m;
+        for (var s in a)
+          if (a.hasOwnProperty(s)) {
+            var p = a[s];
+            true === p ? v += u + s : p && (v += u + s + n + p);
           }
       }
       if (void 0 !== o)
-        for (var y = 0, c = (o = Array.isArray(o) ? o : [o]).length; y < c; y++) {
-          var l = o[y];
-          if (l && "string" == typeof l.valueOf())
-            for (var g = l.valueOf().split(" "), d = 0; d < g.length; d++) {
+        for (var c = 0, l = o.length; c < l; c++) {
+          var y = o[c];
+          if (y && "string" == typeof y.valueOf())
+            for (var g = y.valueOf().split(" "), d = 0; d < g.length; d++) {
               var h = g[d];
               h !== f && (v += " " + h);
             }
         }
       return v;
     }
-    var e = r2.n || "", n = r2.v || r2.m;
-    return function(r3, e2) {
+    var t = r2.n || "", n = r2.v || r2.m;
+    return function(r3, t2) {
       return function(n2, i, a) {
-        return "string" == typeof n2 ? "string" == typeof i || Array.isArray(i) ? t2(r3, n2, void 0, i) : t2(r3, n2, i, a) : t2(r3, e2, n2, i);
+        return "string" == typeof n2 ? Array.isArray(i) ? e2(r3, n2, void 0, i) : e2(r3, n2, i, a) : e2(r3, t2, n2, i);
       };
     };
   }
   Object.defineProperty(classname_production_min, "__esModule", { value: true });
-  var t = r({ e: "-", m: "_" });
-  classname_production_min.cn = t, classname_production_min.withNaming = r;
+  var e = r({ e: "-", m: "_" });
+  classname_production_min.cn = e, classname_production_min.withNaming = r;
   return classname_production_min;
 }
 var classname_development = {};
@@ -86,7 +91,6 @@ function requireClassname_development() {
         }
       }
       if (mix !== void 0) {
-        mix = Array.isArray(mix) ? mix : [mix];
         for (var i = 0, len = mix.length; i < len; i++) {
           var value = mix[i];
           if (!value || typeof value.valueOf() !== "string")
@@ -105,7 +109,7 @@ function requireClassname_development() {
     return function cnGenerator(b2, e) {
       return function(elemOrMods, elemModsOrBlockMix, elemMix) {
         if (typeof elemOrMods === "string") {
-          if (typeof elemModsOrBlockMix === "string" || Array.isArray(elemModsOrBlockMix)) {
+          if (Array.isArray(elemModsOrBlockMix)) {
             return stringify(b2, elemOrMods, void 0, elemModsOrBlockMix);
           }
           return stringify(b2, elemOrMods, elemModsOrBlockMix, elemMix);
@@ -122,12 +126,13 @@ function requireClassname_development() {
   classname_development.withNaming = withNaming;
   return classname_development;
 }
-if (process.env.NODE_ENV === "production") {
-  classname.exports = requireClassname_production_min();
-} else {
-  classname.exports = requireClassname_development();
-}
-var classnameExports = classname.exports;
+(function(module) {
+  if (process.env.NODE_ENV === "production") {
+    module.exports = requireClassname_production_min();
+  } else {
+    module.exports = requireClassname_development();
+  }
+})(classname);
 const cn = classnameExports.withNaming({ n: "nut-", e: "__", m: "--", v: "-" });
 const defaultProps$1s = {
   name: "",
@@ -739,7 +744,6 @@ function words(string3, pattern4, guard) {
   return string3.match(pattern4) || [];
 }
 var lodash_kebabcase = kebabCase;
-const kebabCase$1 = /* @__PURE__ */ getDefaultExportFromCjs(lodash_kebabcase);
 const zhCN = {
   save: "保存",
   confirm: "确认",
@@ -887,7 +891,7 @@ const useConfig = () => {
 function convertThemeVarsToCSSVars(themeVars) {
   const cssVars = {};
   Object.keys(themeVars).forEach((key) => {
-    cssVars[`--${kebabCase$1(key)}`] = themeVars[key];
+    cssVars[`--${lodash_kebabcase(key)}`] = themeVars[key];
   });
   return cssVars;
 }
@@ -1065,7 +1069,15 @@ const Image$1 = (props) => {
 };
 Image$1.defaultProps = defaultProps$1n;
 Image$1.displayName = "NutImage";
-var classnames = { exports: {} };
+var classnamesExports = {};
+var classnames = {
+  get exports() {
+    return classnamesExports;
+  },
+  set exports(v) {
+    classnamesExports = v;
+  }
+};
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
@@ -1112,8 +1124,7 @@ var classnames = { exports: {} };
     }
   })();
 })(classnames);
-var classnamesExports = classnames.exports;
-const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
+const classNames = classnamesExports;
 const defaultOverlayProps = {
   zIndex: 1e3,
   duration: 0.3,
@@ -1228,8 +1239,24 @@ function _inheritsLoose$1(subClass, superClass) {
   subClass.prototype.constructor = subClass;
   _setPrototypeOf$1(subClass, superClass);
 }
-var propTypes = { exports: {} };
-var reactIs = { exports: {} };
+var propTypesExports = {};
+var propTypes = {
+  get exports() {
+    return propTypesExports;
+  },
+  set exports(v) {
+    propTypesExports = v;
+  }
+};
+var reactIsExports = {};
+var reactIs = {
+  get exports() {
+    return reactIsExports;
+  },
+  set exports(v) {
+    reactIsExports = v;
+  }
+};
 var reactIs_production_min = {};
 /** @license React v16.13.1
  * react-is.production.min.js
@@ -1500,14 +1527,16 @@ function requireReactIs_development() {
 var hasRequiredReactIs;
 function requireReactIs() {
   if (hasRequiredReactIs)
-    return reactIs.exports;
+    return reactIsExports;
   hasRequiredReactIs = 1;
-  if (process.env.NODE_ENV === "production") {
-    reactIs.exports = requireReactIs_production_min();
-  } else {
-    reactIs.exports = requireReactIs_development();
-  }
-  return reactIs.exports;
+  (function(module) {
+    if (process.env.NODE_ENV === "production") {
+      module.exports = requireReactIs_production_min();
+    } else {
+      module.exports = requireReactIs_development();
+    }
+  })(reactIs);
+  return reactIsExports;
 }
 /*
 object-assign
@@ -2174,8 +2203,6 @@ if (process.env.NODE_ENV !== "production") {
 } else {
   propTypes.exports = requireFactoryWithThrowingShims()();
 }
-var propTypesExports = propTypes.exports;
-const PropTypes = /* @__PURE__ */ getDefaultExportFromCjs(propTypesExports);
 function hasClass(element, className) {
   if (element.classList)
     return !!className && element.classList.contains(className);
@@ -2205,22 +2232,22 @@ function removeClass$1(element, className) {
 const config$1 = {
   disabled: false
 };
-var timeoutsShape = process.env.NODE_ENV !== "production" ? PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-  enter: PropTypes.number,
-  exit: PropTypes.number,
-  appear: PropTypes.number
+var timeoutsShape = process.env.NODE_ENV !== "production" ? propTypesExports.oneOfType([propTypesExports.number, propTypesExports.shape({
+  enter: propTypesExports.number,
+  exit: propTypesExports.number,
+  appear: propTypesExports.number
 }).isRequired]) : null;
-var classNamesShape = process.env.NODE_ENV !== "production" ? PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
-  enter: PropTypes.string,
-  exit: PropTypes.string,
-  active: PropTypes.string
-}), PropTypes.shape({
-  enter: PropTypes.string,
-  enterDone: PropTypes.string,
-  enterActive: PropTypes.string,
-  exit: PropTypes.string,
-  exitDone: PropTypes.string,
-  exitActive: PropTypes.string
+var classNamesShape = process.env.NODE_ENV !== "production" ? propTypesExports.oneOfType([propTypesExports.string, propTypesExports.shape({
+  enter: propTypesExports.string,
+  exit: propTypesExports.string,
+  active: propTypesExports.string
+}), propTypesExports.shape({
+  enter: propTypesExports.string,
+  enterDone: propTypesExports.string,
+  enterActive: propTypesExports.string,
+  exit: propTypesExports.string,
+  exitDone: propTypesExports.string,
+  exitActive: propTypesExports.string
 })]) : null;
 const TransitionGroupContext = React__default.createContext(null);
 var forceReflow = function forceReflow2(node) {
@@ -2470,10 +2497,10 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *     (see
    *     [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).
    */
-  nodeRef: PropTypes.shape({
-    current: typeof Element === "undefined" ? PropTypes.any : function(propValue, key, componentName, location, propFullName, secret) {
+  nodeRef: propTypesExports.shape({
+    current: typeof Element === "undefined" ? propTypesExports.any : function(propValue, key, componentName, location, propFullName, secret) {
       var value = propValue[key];
-      return PropTypes.instanceOf(value && "ownerDocument" in value ? value.ownerDocument.defaultView.Element : Element)(propValue, key, componentName, location, propFullName, secret);
+      return propTypesExports.instanceOf(value && "ownerDocument" in value ? value.ownerDocument.defaultView.Element : Element)(propValue, key, componentName, location, propFullName, secret);
     }
   }),
   /**
@@ -2490,23 +2517,23 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    * </Transition>
    * ```
    */
-  children: PropTypes.oneOfType([PropTypes.func.isRequired, PropTypes.element.isRequired]).isRequired,
+  children: propTypesExports.oneOfType([propTypesExports.func.isRequired, propTypesExports.element.isRequired]).isRequired,
   /**
    * Show the component; triggers the enter or exit states
    */
-  in: PropTypes.bool,
+  in: propTypesExports.bool,
   /**
    * By default the child component is mounted immediately along with
    * the parent `Transition` component. If you want to "lazy mount" the component on the
    * first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay
    * mounted, even on "exited", unless you also specify `unmountOnExit`.
    */
-  mountOnEnter: PropTypes.bool,
+  mountOnEnter: propTypesExports.bool,
   /**
    * By default the child component stays mounted after it reaches the `'exited'` state.
    * Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting.
    */
-  unmountOnExit: PropTypes.bool,
+  unmountOnExit: propTypesExports.bool,
   /**
    * By default the child component does not perform the enter transition when
    * it first mounts, regardless of the value of `in`. If you want this
@@ -2518,15 +2545,15 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    * > additional `.appear-*` classes, that way you can choose to style it
    * > differently.
    */
-  appear: PropTypes.bool,
+  appear: propTypesExports.bool,
   /**
    * Enable or disable enter transitions.
    */
-  enter: PropTypes.bool,
+  enter: propTypesExports.bool,
   /**
    * Enable or disable exit transitions.
    */
-  exit: PropTypes.bool,
+  exit: propTypesExports.bool,
   /**
    * The duration of the transition, in milliseconds.
    * Required unless `addEndListener` is provided.
@@ -2576,7 +2603,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    * }}
    * ```
    */
-  addEndListener: PropTypes.func,
+  addEndListener: propTypesExports.func,
   /**
    * Callback fired before the "entering" status is applied. An extra parameter
    * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
@@ -2585,7 +2612,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement, isAppearing: bool) -> void
    */
-  onEnter: PropTypes.func,
+  onEnter: propTypesExports.func,
   /**
    * Callback fired after the "entering" status is applied. An extra parameter
    * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
@@ -2594,7 +2621,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement, isAppearing: bool)
    */
-  onEntering: PropTypes.func,
+  onEntering: propTypesExports.func,
   /**
    * Callback fired after the "entered" status is applied. An extra parameter
    * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
@@ -2603,7 +2630,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement, isAppearing: bool) -> void
    */
-  onEntered: PropTypes.func,
+  onEntered: propTypesExports.func,
   /**
    * Callback fired before the "exiting" status is applied.
    *
@@ -2611,7 +2638,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement) -> void
    */
-  onExit: PropTypes.func,
+  onExit: propTypesExports.func,
   /**
    * Callback fired after the "exiting" status is applied.
    *
@@ -2619,7 +2646,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement) -> void
    */
-  onExiting: PropTypes.func,
+  onExiting: propTypesExports.func,
   /**
    * Callback fired after the "exited" status is applied.
    *
@@ -2627,7 +2654,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement) -> void
    */
-  onExited: PropTypes.func
+  onExited: propTypesExports.func
 } : {};
 function noop$2() {
 }
@@ -2866,7 +2893,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$4({},
    *
    * @type Function(node: HtmlElement, isAppearing: bool)
    */
-  onEnter: PropTypes.func,
+  onEnter: propTypesExports.func,
   /**
    * A `<Transition>` callback fired immediately after the 'enter-active' or
    * 'appear-active' class is applied.
@@ -2875,7 +2902,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$4({},
    *
    * @type Function(node: HtmlElement, isAppearing: bool)
    */
-  onEntering: PropTypes.func,
+  onEntering: propTypesExports.func,
   /**
    * A `<Transition>` callback fired immediately after the 'enter' or
    * 'appear' classes are **removed** and the `done` class is added to the DOM node.
@@ -2884,7 +2911,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$4({},
    *
    * @type Function(node: HtmlElement, isAppearing: bool)
    */
-  onEntered: PropTypes.func,
+  onEntered: propTypesExports.func,
   /**
    * A `<Transition>` callback fired immediately after the 'exit' class is
    * applied.
@@ -2893,7 +2920,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$4({},
    *
    * @type Function(node: HtmlElement)
    */
-  onExit: PropTypes.func,
+  onExit: propTypesExports.func,
   /**
    * A `<Transition>` callback fired immediately after the 'exit-active' is applied.
    *
@@ -2901,7 +2928,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$4({},
    *
    * @type Function(node: HtmlElement)
    */
-  onExiting: PropTypes.func,
+  onExiting: propTypesExports.func,
   /**
    * A `<Transition>` callback fired immediately after the 'exit' classes
    * are **removed** and the `exit-done` class is added to the DOM node.
@@ -2910,7 +2937,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$4({},
    *
    * @type Function(node: HtmlElement)
    */
-  onExited: PropTypes.func
+  onExited: propTypesExports.func
 }) : {};
 const CSSTransition$1 = CSSTransition;
 const defaultProps$1m = {
@@ -9324,99 +9351,116 @@ const MenuItem = forwardRef((props, ref) => {
     return { display: "none" };
   };
   const getPosition = () => {
-    return direction === "down" ? { top: `${position.top + position.height}px` } : { bottom: `${window.innerHeight - position.top}px`, top: "auto" };
+    return direction === "down" ? { position: "absolute", height: `${window.innerHeight}px` } : {
+      position: "absolute",
+      bottom: "100%",
+      top: "auto",
+      height: `${window.innerHeight}px`
+    };
   };
   const placeholderStyle = () => {
     if (direction === "down") {
       return {
         height: `${position.top + position.height}px`,
+        top: "auto",
+        bottom: "-100%",
         ...isShow(),
         ...style
       };
     }
     return {
       height: `${window.innerHeight - position.top}px`,
-      top: "auto",
+      bottom: `auto`,
+      top: "0",
       ...isShow(),
       ...style
     };
   };
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: `placeholder-element ${classNames({
-        up: direction === "up"
-      })}`,
-      style: placeholderStyle(),
-      onClick: () => parent.toggleItemShow(orderKey)
-    }
-  ), /* @__PURE__ */ React__default.createElement(
-    Overlay,
-    {
-      overlayClass: "nut-menu__overlay",
-      style: getPosition(),
-      lockScroll: parent.lockScroll,
-      visible: _showPopup,
-      closeOnClickOverlay: parent.closeOnClickOverlay,
-      onClick: () => {
-        parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
+      className: "nut-menu-item-container",
+      style: { position: "absolute", left: 0, right: 0 }
+    },
+    /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: `placeholder-element ${classNames({
+          up: direction === "up"
+        })}`,
+        style: placeholderStyle(),
+        onClick: () => parent.toggleItemShow(orderKey)
       }
-    }
-  ), /* @__PURE__ */ React__default.createElement(
-    "div",
-    {
-      className: direction === "down" ? "nut-menu-item__wrap" : "nut-menu-item__wrap-up",
-      style: {
-        // ...getPosition(),
-        ...isShow()
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      Overlay,
+      {
+        overlayClass: "nut-menu__overlay",
+        style: getPosition(),
+        lockScroll: parent.lockScroll,
+        visible: _showPopup,
+        closeOnClickOverlay: parent.closeOnClickOverlay,
+        onClick: () => {
+          parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
+        }
       }
-    },
+    ),
     /* @__PURE__ */ React__default.createElement(
-      CSSTransition$1,
+      "div",
       {
-        in: _showPopup,
-        timeout: 100,
-        classNames: direction === "down" ? "menu-item" : "menu-item-up"
+        className: direction === "down" ? "nut-menu-item__wrap" : "nut-menu-item__wrap-up",
+        style: {
+          // ...getPosition(),
+          ...isShow()
+        }
       },
-      /* @__PURE__ */ React__default.createElement("div", { className: "nut-menu-item__content" }, options2 == null ? void 0 : options2.map((item, index) => {
-        return /* @__PURE__ */ React__default.createElement(
-          "div",
-          {
-            className: `nut-menu-item__option ${classNames({
-              active: item.value === _value
-            })}`,
-            key: item.text,
-            style: {
-              flexBasis: `${100 / columns}%`
-            },
-            onClick: () => {
-              handleClick2(item);
-            }
-          },
-          item.value === _value ? /* @__PURE__ */ React__default.createElement(
-            Icon,
-            {
-              classPrefix: iconClassPrefix,
-              fontClassName: iconFontClassName,
-              className: getIconCName(item.value, value),
-              name: optionsIcon,
-              color: activeColor
-            }
-          ) : null,
-          /* @__PURE__ */ React__default.createElement(
+      /* @__PURE__ */ React__default.createElement(
+        CSSTransition$1,
+        {
+          in: _showPopup,
+          timeout: 100,
+          classNames: direction === "down" ? "menu-item" : "menu-item-up"
+        },
+        /* @__PURE__ */ React__default.createElement("div", { className: "nut-menu-item__content" }, options2 == null ? void 0 : options2.map((item, index) => {
+          return /* @__PURE__ */ React__default.createElement(
             "div",
             {
-              className: getIconCName(item.value, value),
+              className: `nut-menu-item__option ${classNames({
+                active: item.value === _value
+              })}`,
+              key: item.text,
               style: {
-                color: `${item.value === _value ? activeColor : ""}`
+                flexBasis: `${100 / columns}%`
+              },
+              onClick: () => {
+                handleClick2(item);
               }
             },
-            item.text
-          )
-        );
-      }), children)
+            item.value === _value ? /* @__PURE__ */ React__default.createElement(
+              Icon,
+              {
+                classPrefix: iconClassPrefix,
+                fontClassName: iconFontClassName,
+                className: getIconCName(item.value, value),
+                name: optionsIcon,
+                color: activeColor
+              }
+            ) : null,
+            /* @__PURE__ */ React__default.createElement(
+              "div",
+              {
+                className: getIconCName(item.value, value),
+                style: {
+                  color: `${item.value === _value ? activeColor : ""}`
+                }
+              },
+              item.text
+            )
+          );
+        }), children)
+      )
     )
-  ));
+  );
 });
 MenuItem.defaultProps = defaultProps$1a;
 MenuItem.displayName = "NutMenuItem";
@@ -19302,6 +19346,7 @@ const defaultProps$q = {
   paused: false,
   startTime: Date.now(),
   endTime: Date.now(),
+  remainingTime: 0,
   millisecond: false,
   format: "HH:mm:ss",
   autoStart: true,
@@ -19314,6 +19359,7 @@ const InternalCountDown = (props, ref) => {
     paused,
     startTime,
     endTime,
+    remainingTime,
     millisecond,
     format: format2,
     autoStart,
@@ -19353,8 +19399,12 @@ const InternalCountDown = (props, ref) => {
     return new Date(t).getTime();
   };
   const initTime = () => {
-    stateRef.current.handleEndTime = endTime;
-    stateRef.current.diffTime = Date.now() - getTimeStamp(startTime);
+    if (remainingTime) {
+      stateRef.current.handleEndTime = Date.now() + Number(remainingTime);
+    } else {
+      stateRef.current.handleEndTime = endTime;
+      stateRef.current.diffTime = Date.now() - getTimeStamp(startTime);
+    }
     if (!stateRef.current.counting)
       stateRef.current.counting = true;
     tick();
@@ -19496,7 +19546,7 @@ const InternalCountDown = (props, ref) => {
     if (stateRef.current.isIninted) {
       initTime();
     }
-  }, [endTime, startTime]);
+  }, [endTime, startTime, remainingTime]);
   useEffect(() => {
     if (autoStart) {
       initTime();