tdesign-react 0.25.2 → 0.25.3-alpha.1

package/dist/tdesign.js

@@ -1,5 +1,5 @@
 /**
- * tdesign v0.25.2
+ * tdesign v0.25.3-alpha.1
  * (c) 2022 tdesign
  * @license MIT
  */
@@ -2333,7 +2333,7 @@
    *  counterparts.
    */
 
-  function baseMerge$1(object, source, srcIndex, customizer, stack) {
+  function baseMerge$2(object, source, srcIndex, customizer, stack) {
     if (object === source) {
       return;
     }
@@ -2342,7 +2342,7 @@
       stack || (stack = new Stack$3());
 
       if (isObject$7(srcValue)) {
-        baseMergeDeep(object, source, key, srcIndex, baseMerge$1, customizer, stack);
+        baseMergeDeep(object, source, key, srcIndex, baseMerge$2, customizer, stack);
       } else {
         var newValue = customizer ? customizer(safeGet(object, key), srcValue, key + '', object, source, stack) : undefined;
 
@@ -2355,7 +2355,7 @@
     }, keysIn$3);
   }
 
-  var _baseMerge = baseMerge$1;
+  var _baseMerge = baseMerge$2;
 
   /**
    * This method returns the first argument it receives.
@@ -2612,7 +2612,7 @@
    * @returns {Function} Returns the new assigner function.
    */
 
-  function createAssigner$1(assigner) {
+  function createAssigner$2(assigner) {
     return baseRest$1(function (object, sources) {
       var index = -1,
           length = sources.length,
@@ -2639,10 +2639,10 @@
     });
   }
 
-  var _createAssigner = createAssigner$1;
+  var _createAssigner = createAssigner$2;
 
-  var baseMerge = _baseMerge,
-      createAssigner = _createAssigner;
+  var baseMerge$1 = _baseMerge,
+      createAssigner$1 = _createAssigner;
   /**
    * This method is like `_.assign` except that it recursively merges own and
    * inherited enumerable string keyed properties of source objects into the
@@ -2675,8 +2675,8 @@
    * // => { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] }
    */
 
-  var merge$2 = createAssigner(function (object, source, srcIndex) {
-    baseMerge(object, source, srcIndex);
+  var merge$2 = createAssigner$1(function (object, source, srcIndex) {
+    baseMerge$1(object, source, srcIndex);
   });
   var merge_1 = merge$2;
 
@@ -2854,8 +2854,25 @@
   function ownKeys$28(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
   function _objectSpread$28(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$28(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$28(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  var EAnimationType = /* @__PURE__ */function (EAnimationType2) {
+    EAnimationType2["ripple"] = "ripple";
+    EAnimationType2["expand"] = "expand";
+    EAnimationType2["fade"] = "fade";
+    return EAnimationType2;
+  }(EAnimationType || {});
   var defaultClassPrefix = "t";
+  var defaultAnimation = {
+    include: ["ripple"
+    /* ripple */
+    , "expand"
+    /* expand */
+    , "fade"
+    /* fade */
+    ],
+    exclude: []
+  };
   var defaultGlobalConfig = _objectSpread$28({
+    animation: defaultAnimation,
     classPrefix: defaultClassPrefix
   }, merge_1(zhCN, DEFAULT_GLOBAL_CONFIG));
   var defaultContext = {
@@ -8593,6 +8610,25 @@
     }];
   }
 
+  function useAnimation() {
+    var _useConfig = useConfig$1(),
+        animation = _useConfig.animation;
+
+    var expand = EAnimationType.expand,
+        ripple = EAnimationType.ripple,
+        fade = EAnimationType.fade;
+    var keepAnimation = React.useCallback(function (type) {
+      var _animation$exclude, _animation$include;
+
+      return animation && !((_animation$exclude = animation.exclude) !== null && _animation$exclude !== void 0 && _animation$exclude.includes(type)) && ((_animation$include = animation.include) === null || _animation$include === void 0 ? void 0 : _animation$include.includes(type));
+    }, [animation]);
+    return {
+      keepExpand: keepAnimation(expand),
+      keepRipple: keepAnimation(ripple),
+      keepFade: keepAnimation(fade)
+    };
+  }
+
   function _createForOfIteratorHelper$3(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$3(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
   function _unsupportedIterableToArray$3(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$3(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$3(o, minLen); }
@@ -8772,7 +8808,13 @@
 
   var getTransitionParams = function getTransitionParams(_ref) {
     var classPrefix = _ref.classPrefix,
-        expandAnimation = _ref.expandAnimation;
+        expandAnimation = _ref.expandAnimation,
+        fadeAnimation = _ref.fadeAnimation;
+
+    if (!fadeAnimation) {
+      return {};
+    }
+
     var popupAnimationClassPrefix = expandAnimation ? "".concat(classPrefix, "-popup--animation-expand") : "".concat(classPrefix, "-popup--animation");
     return {
       classNames: {
@@ -8828,6 +8870,10 @@
     var _useConfig = useConfig$1(),
         classPrefix = _useConfig.classPrefix;
 
+    var _useAnimation = useAnimation(),
+        keepExpand = _useAnimation.keepExpand,
+        keepFade = _useAnimation.keepFade;
+
     var _useDefault = useDefault(props.visible, defaultVisible, onVisibleChange),
         _useDefault2 = _slicedToArray(_useDefault, 2),
         visible = _useDefault2[0],
@@ -8971,7 +9017,8 @@
       nodeRef: popupRef
     }, getTransitionParams({
       classPrefix: classPrefix,
-      expandAnimation: expandAnimation
+      expandAnimation: expandAnimation && keepExpand,
+      fadeAnimation: keepFade
     })), /* @__PURE__ */React__default["default"].createElement("div", _objectSpread$20(_objectSpread$20({
       ref: composeRefs(setOverlayRef, ref, popupRef),
       style: _objectSpread$20(_objectSpread$20({}, styles.popper), {}, {
@@ -9037,6 +9084,9 @@
     var _useConfig = useConfig$1(),
         classPrefix = _useConfig.classPrefix;
 
+    var _useAnimation = useAnimation(),
+        keepRipple = _useAnimation.keepRipple;
+
     var rippleContainer = React.useMemo(function () {
       if (!canUseDocument) return null;
       return document.createElement("div");
@@ -9044,7 +9094,7 @@
     var handleAddRipple = React.useCallback(function (e) {
       var el = ref === null || ref === void 0 ? void 0 : ref.current;
       var rippleColor = getRippleColor(el, fixedRippleColor);
-      if (e.button !== 0 || !el) return;
+      if (e.button !== 0 || !el || !keepRipple) return;
       if (el.classList.contains("".concat(classPrefix, "-is-active")) || el.classList.contains("".concat(classPrefix, "-is-disabled")) || el.classList.contains("".concat(classPrefix, "-is-checked"))) return;
       var elStyle = getComputedStyle(el);
       var elBorder = parseInt(elStyle.borderWidth, 10);
@@ -9117,7 +9167,7 @@
 
       el.addEventListener("pointerup", handleClearRipple, false);
       el.addEventListener("pointerleave", handleClearRipple, false);
-    }, [classPrefix, ref, fixedRippleColor, rippleContainer]);
+    }, [classPrefix, ref, fixedRippleColor, rippleContainer, keepRipple]);
     var initRippleElement = React.useCallback(function () {
       var _el$style;
 
@@ -11400,7 +11450,7 @@
     }, restProps);
   }
 
-  var _excluded$n = ["autoWidth", "placeholder", "disabled", "status", "size", "className", "style", "prefixIcon", "suffixIcon", "clearable", "value", "tips", "align", "onClick", "onChange", "onClear", "onEnter", "onKeydown", "onKeyup", "onKeypress", "onFocus", "onBlur", "onPaste", "onMouseenter", "onMouseleave", "onWheel", "onCompositionstart", "onCompositionend", "autofocus", "readonly", "label", "suffix"];
+  var _excluded$n = ["autoWidth", "placeholder", "disabled", "status", "size", "className", "style", "prefixIcon", "suffixIcon", "clearable", "value", "tips", "align", "onClick", "onChange", "onClear", "onEnter", "onKeydown", "onKeyup", "onKeypress", "onFocus", "onBlur", "onPaste", "onMouseenter", "onMouseleave", "onWheel", "onCompositionstart", "onCompositionend", "showClearIconOnEmpty", "autofocus", "readonly", "label", "suffix"];
 
   function ownKeys$1q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -11453,6 +11503,7 @@
         onWheel = _useDefaultValue.onWheel,
         onCompositionstart = _useDefaultValue.onCompositionstart,
         onCompositionend = _useDefaultValue.onCompositionend,
+        showClearIconOnEmpty = _useDefaultValue.showClearIconOnEmpty,
         autofocus = _useDefaultValue.autofocus,
         readonly = _useDefaultValue.readonly,
         label = _useDefaultValue.label,
@@ -11482,7 +11533,7 @@
         composingRefValue = _useState6[0],
         setComposingValue = _useState6[1];
 
-    var isShowClearIcon = clearable && value && !disabled && isHover;
+    var isShowClearIcon = (clearable && value && !disabled || showClearIconOnEmpty) && isHover;
     var prefixIconContent = renderIcon$1(classPrefix, "prefix", prefixIcon);
     var suffixIconNew = isShowClearIcon ? /* @__PURE__ */React__default["default"].createElement(CloseCircleFilledIcon, {
       className: "".concat(classPrefix, "-input__suffix-clear"),
@@ -13700,7 +13751,52 @@
 
   var InputNumber = InputNumber$1;
 
-  var merge$1 = merge_1;
+  var baseMerge = _baseMerge,
+      createAssigner = _createAssigner;
+  /**
+   * This method is like `_.merge` except that it accepts `customizer` which
+   * is invoked to produce the merged values of the destination and source
+   * properties. If `customizer` returns `undefined`, merging is handled by the
+   * method instead. The `customizer` is invoked with six arguments:
+   * (objValue, srcValue, key, object, source, stack).
+   *
+   * **Note:** This method mutates `object`.
+   *
+   * @static
+   * @memberOf _
+   * @since 4.0.0
+   * @category Object
+   * @param {Object} object The destination object.
+   * @param {...Object} sources The source objects.
+   * @param {Function} customizer The function to customize assigned values.
+   * @returns {Object} Returns `object`.
+   * @example
+   *
+   * function customizer(objValue, srcValue) {
+   *   if (_.isArray(objValue)) {
+   *     return objValue.concat(srcValue);
+   *   }
+   * }
+   *
+   * var object = { 'a': [1], 'b': [2] };
+   * var other = { 'a': [3], 'b': [4] };
+   *
+   * _.mergeWith(object, other, customizer);
+   * // => { 'a': [1, 3], 'b': [2, 4] }
+   */
+
+  var mergeWith = createAssigner(function (object, source, srcIndex, customizer) {
+    baseMerge(object, source, srcIndex, customizer);
+  });
+  var mergeWith_1 = mergeWith;
+
+  var merge$1 = function merge(src, config) {
+    return mergeWith_1(src, config, function (objValue, srcValue) {
+      if (Array.isArray(objValue)) {
+        return srcValue;
+      }
+    });
+  };
   function ConfigProvider(_ref) {
     var children = _ref.children,
         globalConfig = _ref.globalConfig;
@@ -28714,7 +28810,7 @@
     var onInnerEnter = function onInnerEnter(value, context) {
       var _props$onEnter;
 
-      var valueStr = String(value).trim();
+      var valueStr = value ? String(value).trim() : "";
       if (!valueStr) return;
       var isLimitExceeded = max && (tagValue === null || tagValue === void 0 ? void 0 : tagValue.length) >= max;
       var newValue = tagValue;
@@ -28853,11 +28949,6 @@
     var _useConfig = useConfig$1(),
         prefix = _useConfig.classPrefix;
 
-    var _useState = React.useState(),
-        _useState2 = _slicedToArray(_useState, 2),
-        tInputValue = _useState2[0],
-        setTInputValue = _useState2[1];
-
     var _props$excessTagsDisp = props.excessTagsDisplayType,
         excessTagsDisplayType = _props$excessTagsDisp === void 0 ? "scroll" : _props$excessTagsDisp,
         autoWidth = props.autoWidth,
@@ -28876,8 +28967,12 @@
         onClick = props.onClick,
         onPaste = props.onPaste,
         _onFocus = props.onFocus,
-        _onBlur = props.onBlur,
-        onInputChange = props.onInputChange;
+        _onBlur = props.onBlur;
+
+    var _useDefault = useDefault(props.inputValue, props.defaultInputValue, props.onInputChange),
+        _useDefault2 = _slicedToArray(_useDefault, 2),
+        tInputValue = _useDefault2[0],
+        setTInputValue = _useDefault2[1];
 
     var _useHover = useHover(props),
         isHover = _useHover.isHover,
@@ -28909,15 +29004,18 @@
     var NAME_CLASS = "".concat(prefix, "-tag-input");
     var CLEAR_CLASS = "".concat(prefix, "-tag-input__suffix-clear");
     var BREAK_LINE_CLASS = "".concat(prefix, "-tag-input--break-line");
-    var classes = [NAME_CLASS, _defineProperty$2({}, BREAK_LINE_CLASS, excessTagsDisplayType === "break-line")];
-    var tagInputPlaceholder = isHover || !(tagValue !== null && tagValue !== void 0 && tagValue.length) ? placeholder : "";
+    var classes = [NAME_CLASS, _defineProperty$2({}, BREAK_LINE_CLASS, excessTagsDisplayType === "break-line"), props.className];
+    var tagInputPlaceholder = !(tagValue !== null && tagValue !== void 0 && tagValue.length) ? placeholder : "";
     var showClearIcon = Boolean(!readonly && !disabled && clearable && isHover && (tagValue === null || tagValue === void 0 ? void 0 : tagValue.length));
     React.useImperativeHandle(ref, function () {
       return _objectSpread$R({}, tagInputRef.current || {});
     });
 
     var onInputEnter = function onInputEnter(value, context) {
-      setTInputValue("");
+      setTInputValue("", {
+        e: context.e,
+        trigger: "enter"
+      });
       onInnerEnter(value, context);
       scrollToRight();
     };
@@ -28931,7 +29029,10 @@
       clearAll({
         e: e
       });
-      setTInputValue("");
+      setTInputValue("", {
+        e: e,
+        trigger: "clear"
+      });
     };
 
     var suffixIconNode = showClearIcon ? /* @__PURE__ */React__default["default"].createElement(CloseCircleFilledIcon, {
@@ -28952,8 +29053,9 @@
     }, inputProps), {}, {
       value: tInputValue,
       onChange: function onChange(val, context) {
-        setTInputValue(val);
-        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(val, context);
+        setTInputValue(val, _objectSpread$R(_objectSpread$R({}, context), {}, {
+          trigger: "input"
+        }));
       },
       autoWidth: autoWidth,
       onWheel: onWheel,
@@ -28967,6 +29069,7 @@
         });
       },
       className: classNames$1(classes),
+      style: props.style,
       tips: tips,
       status: status,
       placeholder: tagInputPlaceholder,
@@ -29353,10 +29456,17 @@
   var COMMON_PROPERTIES = ["status", "clearable", "disabled", "label", "placeholder", "readonly", "suffix", "suffixIcon", "onPaste", "onEnter", "onMouseenter", "onMouseleave"];
   var DEFAULT_KEYS$1 = {
     label: "label",
-    key: "key"
+    value: "value"
   };
+
+  function getInputValue(value, keys) {
+    var iKeys = keys || DEFAULT_KEYS$1;
+    return isObject_1(value) ? value[iKeys.label] : value;
+  }
+
   function useSingle(props) {
-    var value = props.value;
+    var value = props.value,
+        keys = props.keys;
     var inputRef = React.useRef();
 
     var _useState = React.useState(""),
@@ -29379,16 +29489,15 @@
         var _props$onInputChange;
 
         setInputValue(value2);
-        (_props$onInputChange = props.onInputChange) === null || _props$onInputChange === void 0 ? void 0 : _props$onInputChange.call(props, value2, context);
+        (_props$onInputChange = props.onInputChange) === null || _props$onInputChange === void 0 ? void 0 : _props$onInputChange.call(props, value2, _objectSpread$Q(_objectSpread$Q({}, context), {}, {
+          trigger: "input"
+        }));
       }
     };
 
     React.useEffect(function () {
-      var iKeys = _objectSpread$Q(_objectSpread$Q({}, DEFAULT_KEYS$1), props.keys);
-
-      var val = isObject_1(value) ? value[iKeys.label] : value;
-      setInputValue(val);
-    }, [props.keys, value]);
+      setInputValue(getInputValue(value, keys));
+    }, [keys, value]);
 
     var renderSelectSingle = function renderSelectSingle() {
       var singleValueDisplay = !props.multiple ? props.valueDisplay : null;
@@ -29399,6 +29508,7 @@
         placeholder: singleValueDisplay ? "" : props.placeholder,
         value: singleValueDisplay ? void 0 : inputValue,
         label: /* @__PURE__ */React__default["default"].createElement(React__default["default"].Fragment, null, props.label, singleValueDisplay),
+        showClearIconOnEmpty: true,
         onChange: onInnerInputChange,
         readonly: !props.allowInput,
         onClear: onInnerClear,
@@ -29408,6 +29518,7 @@
           (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 ? void 0 : _props$onBlur.call(props, value, _objectSpread$Q(_objectSpread$Q({}, context), {}, {
             inputValue: val
           }));
+          setInputValue(getInputValue(value, keys));
         },
         onFocus: function onFocus(val, context) {
           var _props$onFocus;
@@ -29439,6 +29550,11 @@
     var value = props.value;
     var tagInputRef = React.useRef();
 
+    var _useDefaultValue = useDefault(props.inputValue, props.defaultInputValue, props.onInputChange),
+        _useDefaultValue2 = _slicedToArray(_useDefaultValue, 2),
+        tInputValue = _useDefaultValue2[0],
+        setTInputValue = _useDefaultValue2[1];
+
     var iKeys = _objectSpread$P(_objectSpread$P({}, DEFAULT_KEYS), props.keys);
 
     var getTags = function getTags() {
@@ -29470,6 +29586,7 @@
       return /* @__PURE__ */React__default["default"].createElement(TagInput, _objectSpread$P(_objectSpread$P({
         ref: tagInputRef
       }, p.commonInputProps), {}, {
+        readonly: !props.allowInput,
         autoWidth: props.borderless || props.autoWidth,
         minCollapsedNum: props.minCollapsedNum,
         collapsedItems: props.collapsedItems,
@@ -29477,8 +29594,15 @@
         valueDisplay: props.valueDisplay,
         placeholder: tPlaceholder,
         value: tags,
+        inputValue: tInputValue || "",
         onChange: onTagInputChange,
-        onInputChange: props.onInputChange,
+        onInputChange: function onInputChange(val, context) {
+          if ((context === null || context === void 0 ? void 0 : context.trigger) === "enter") return;
+          setTInputValue(val, {
+            trigger: context.trigger,
+            e: context.e
+          });
+        },
         tagProps: props.tagProps,
         onClear: p.onInnerClear,
         onBlur: function onBlur(val, context) {
@@ -29487,6 +29611,9 @@
           (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 ? void 0 : _props$onBlur.call(props, props.value, _objectSpread$P(_objectSpread$P({}, context), {}, {
             tagInputValue: val
           }));
+          setTInputValue("", _objectSpread$P(_objectSpread$P({}, context), {}, {
+            trigger: "blur"
+          }));
         },
         onFocus: function onFocus(val, context) {
           var _props$onFocus;
@@ -31146,6 +31273,37 @@
 
   var Menu = Menu$1;
 
+  var dialogSet = /* @__PURE__ */new Set();
+
+  var useDialogEsc = function useDialogEsc(visible, dialog) {
+    React.useEffect(function () {
+      if (visible) {
+        if (dialog !== null && dialog !== void 0 && dialog.current) {
+          var _dialog$current;
+
+          dialogSet.add(dialog);
+          dialog === null || dialog === void 0 ? void 0 : (_dialog$current = dialog.current) === null || _dialog$current === void 0 ? void 0 : _dialog$current.focus();
+        }
+      } else if (dialogSet.has(dialog)) {
+        var _dialogList, _dialogList$current;
+
+        dialogSet["delete"](dialog);
+
+        var dialogList = _toConsumableArray(dialogSet);
+
+        (_dialogList = dialogList[dialogList.length - 1]) === null || _dialogList === void 0 ? void 0 : (_dialogList$current = _dialogList.current) === null || _dialogList$current === void 0 ? void 0 : _dialogList$current.focus();
+      }
+
+      return function () {
+        dialogSet.forEach(function (item) {
+          if (item.current === null) {
+            dialogSet["delete"](item);
+          }
+        });
+      };
+    }, [visible, dialog]);
+  };
+
   function ownKeys$E(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
   function _objectSpread$E(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$E(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$E(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -31185,7 +31343,9 @@
         _props$onOverlayClick = props.onOverlayClick,
         onOverlayClick = _props$onOverlayClick === void 0 ? noop$1 : _props$onOverlayClick,
         preventScrollThrough = props.preventScrollThrough,
-        closeBtn = props.closeBtn;
+        closeBtn = props.closeBtn,
+        _props$closeOnEscKeyd = props.closeOnEscKeydown,
+        closeOnEscKeydown = _props$closeOnEscKeyd === void 0 ? true : _props$closeOnEscKeyd;
     var wrap = React.useRef();
     var dialog = React.useRef();
     var maskRef = React.useRef();
@@ -31194,6 +31354,7 @@
     var isModal = mode === "modal";
     var canDraggable = props.draggable && mode === "modeless";
     var dialogOpenClass = "".concat(prefixCls, "__open");
+    useDialogEsc(visible, wrap);
     React.useEffect(function () {
       bodyOverflow.current = document.body.style.overflow;
       bodyCssTextRef.current = document.body.style.cssText;
@@ -31294,10 +31455,13 @@
         onEscKeydown({
           e: e
         });
-        onClose({
-          e: e,
-          trigger: "esc"
-        });
+
+        if (closeOnEscKeydown) {
+          onClose({
+            e: e,
+            trigger: "esc"
+          });
+        }
       }
     };
 
@@ -31442,7 +31606,8 @@
         ref: wrap,
         className: wrapClass,
         style: wrapStyle,
-        onKeyDown: handleKeyDown
+        onKeyDown: handleKeyDown,
+        tabIndex: 0
       }, mode === "modal" && renderMask(), dialogBody);
       var dom = null;
 
@@ -43592,9 +43757,9 @@
           ctrlKey = ctrlKeyMap.get(child.type) || "value";
         }
 
-        return /*#__PURE__*/React__default["default"].cloneElement(child, _objectSpread$l(_objectSpread$l({}, child.props), {}, (_objectSpread2 = {
+        return /*#__PURE__*/React__default["default"].cloneElement(child, _objectSpread$l(_objectSpread$l({
           disabled: disabledFromContext
-        }, _defineProperty$2(_objectSpread2, ctrlKey, formValue), _defineProperty$2(_objectSpread2, "onChange", function onChange(value) {
+        }, child.props), {}, (_objectSpread2 = {}, _defineProperty$2(_objectSpread2, ctrlKey, formValue), _defineProperty$2(_objectSpread2, "onChange", function onChange(value) {
           onChangeFromProps.call(null, value);
           setFormValue(value);
         }), _defineProperty$2(_objectSpread2, "onBlur", function onBlur(value) {