tdesign-react 0.27.2 → 0.28.0

package/dist/tdesign.js

@@ -1,5 +1,5 @@
 /**
- * tdesign v0.27.2
+ * tdesign v0.28.0
  * (c) 2022 tdesign
  * @license MIT
  */
@@ -3524,6 +3524,11 @@
 
     return document.body;
   };
+  var getCssVarsValue = function getCssVarsValue(name, element) {
+    if (!canUseDocument) return;
+    var el = element || document.documentElement;
+    return getComputedStyle(el).getPropertyValue(name);
+  };
 
   var _excluded$s = ["align", "gutter", "justify", "tag", "style", "className", "children"];
 
@@ -3532,20 +3537,25 @@
   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 calcSize = function calcSize(width) {
+    var smWidth = getCssVarsValue("--td-screen-sm") || 768;
+    var mdWidth = getCssVarsValue("--td-screen-md") || 992;
+    var lgWidth = getCssVarsValue("--td-screen-lg") || 1200;
+    var xlWidth = getCssVarsValue("--td-screen-xl") || 1400;
+    var xxlWidth = getCssVarsValue("--td-screen-xxl") || 1880;
     var size = "xs";
 
-    if (width < 768) {
-      size = "xs";
-    } else if (width >= 768 && width < 992) {
-      size = "sm";
-    } else if (width >= 992 && width < 1200) {
-      size = "md";
-    } else if (width >= 1200 && width < 1400) {
-      size = "lg";
-    } else if (width >= 1400 && width < 1880) {
+    if (width >= xxlWidth) {
+      size = "xxl";
+    } else if (width >= xlWidth) {
       size = "xl";
+    } else if (width >= lgWidth) {
+      size = "lg";
+    } else if (width >= mdWidth) {
+      size = "md";
+    } else if (width >= smWidth) {
+      size = "sm";
     } else {
-      size = "xxl";
+      size = "xs";
     }
 
     return size;
@@ -13131,6 +13141,7 @@
     }
 
     function handleFocus(e) {
+      if (readonly) return;
       var value2 = e.currentTarget.value;
       onFocus === null || onFocus === void 0 ? void 0 : onFocus(value2, {
         e: e
@@ -13139,6 +13150,7 @@
     }
 
     function handleBlur(e) {
+      if (readonly) return;
       var value2 = e.currentTarget.value;
       format && onChange(format(value2), {
         e: e
@@ -15912,6 +15924,8 @@
   }
 
   function useSingle(props) {
+    var _props$defaultInputVa;
+
     var value = props.value,
         keys = props.keys,
         loading = props.loading,
@@ -15922,10 +15936,10 @@
 
     var inputRef = React.useRef();
 
-    var _useState = React.useState(""),
-        _useState2 = _slicedToArray(_useState, 2),
-        inputValue = _useState2[0],
-        setInputValue = _useState2[1];
+    var _useDefault = useDefault(props.inputValue, (_props$defaultInputVa = props.defaultInputValue) !== null && _props$defaultInputVa !== void 0 ? _props$defaultInputVa : "", props.onInputChange),
+        _useDefault2 = _slicedToArray(_useDefault, 2),
+        inputValue = _useDefault2[0],
+        setInputValue = _useDefault2[1];
 
     var showLoading = React.useMemo(function () {
       return !disabled && loading;
@@ -15943,34 +15957,30 @@
 
       context === null || context === void 0 ? void 0 : (_context$e = context.e) === null || _context$e === void 0 ? void 0 : _context$e.stopPropagation();
       (_props$onClear = props.onClear) === null || _props$onClear === void 0 ? void 0 : _props$onClear.call(props, context);
-      setInputValue("");
+      setInputValue("", {
+        trigger: "clear"
+      });
     };
 
     var onInnerInputChange = function onInnerInputChange(value2, context) {
       if (props.allowInput) {
-        var _props$onInputChange;
-
-        setInputValue(value2);
-        (_props$onInputChange = props.onInputChange) === null || _props$onInputChange === void 0 ? void 0 : _props$onInputChange.call(props, value2, _objectSpread$1d(_objectSpread$1d({}, context), {}, {
+        setInputValue(value2, _objectSpread$1d(_objectSpread$1d({}, context), {}, {
           trigger: "input"
         }));
       }
     };
 
-    React.useEffect(function () {
-      setInputValue(getInputValue(value, keys));
-    }, [keys, value]);
-
     var renderSelectSingle = function renderSelectSingle(popupVisible) {
       var _props$inputProps;
 
       var singleValueDisplay = !props.multiple ? props.valueDisplay : null;
+      var displayedValue = popupVisible && props.allowInput ? inputValue : getInputValue(value, keys);
       return /* @__PURE__ */React__default["default"].createElement(Input, _objectSpread$1d(_objectSpread$1d(_objectSpread$1d({
         ref: inputRef
       }, commonInputProps), {}, {
         autoWidth: props.borderless || props.autoWidth,
         placeholder: singleValueDisplay ? "" : props.placeholder,
-        value: singleValueDisplay ? void 0 : inputValue,
+        value: singleValueDisplay ? void 0 : displayedValue,
         label: /* @__PURE__ */React__default["default"].createElement(React__default["default"].Fragment, null, props.label, singleValueDisplay),
         onChange: onInnerInputChange,
         readonly: !props.allowInput,
@@ -15981,7 +15991,6 @@
           (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 ? void 0 : _props$onBlur.call(props, value, _objectSpread$1d(_objectSpread$1d({}, context), {}, {
             inputValue: val
           }));
-          setInputValue(getInputValue(value, keys));
         },
         onFocus: function onFocus(val, context) {
           var _props$onFocus;
@@ -15989,6 +15998,9 @@
           (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 ? void 0 : _props$onFocus.call(props, value, _objectSpread$1d(_objectSpread$1d({}, context), {}, {
             inputValue: val
           }));
+          !popupVisible && setInputValue(getInputValue(value, keys), _objectSpread$1d(_objectSpread$1d({}, context), {}, {
+            trigger: "input"
+          }));
         }
       }, props.inputProps), {}, {
         className: classNames$1((_props$inputProps = props.inputProps) === null || _props$inputProps === void 0 ? void 0 : _props$inputProps.className, _defineProperty$2({}, "".concat(classPrefix, "-input--focused"), popupVisible))
@@ -26020,6 +26032,8 @@
 
   function _objectSpread$19(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$19(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$19(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var TagInput$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+    var _ref;
+
     var _useConfig = useConfig$1(),
         prefix = _useConfig.classPrefix;
 
@@ -26080,9 +26094,9 @@
         renderLabel = _useTagList.renderLabel;
 
     var NAME_CLASS = "".concat(prefix, "-tag-input");
+    var WITH_SUFFIX_ICON_CLASS = "".concat(prefix, "-tag-input__with-suffix-icon");
     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"), 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 () {
@@ -26126,6 +26140,7 @@
         });
       }
     }) : valueDisplay;
+    var classes = [NAME_CLASS, (_ref = {}, _defineProperty$2(_ref, BREAK_LINE_CLASS, excessTagsDisplayType === "break-line"), _defineProperty$2(_ref, WITH_SUFFIX_ICON_CLASS, !!suffixIconNode), _ref), props.className];
     return /* @__PURE__ */React__default["default"].createElement(Input, _objectSpread$19(_objectSpread$19({
       ref: tagInputRef
     }, inputProps), {}, {
@@ -26237,7 +26252,7 @@
       return /* @__PURE__ */React__default["default"].createElement(TagInput, _objectSpread$18(_objectSpread$18(_objectSpread$18({
         ref: tagInputRef
       }, p.commonInputProps), {}, {
-        readonly: !props.allowInput,
+        readonly: !props.allowInput || props.readonly,
         autoWidth: props.borderless || props.autoWidth,
         minCollapsedNum: props.minCollapsedNum,
         collapsedItems: props.collapsedItems,
@@ -26262,9 +26277,6 @@
           (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 ? void 0 : _props$onBlur.call(props, props.value, _objectSpread$18(_objectSpread$18({}, context), {}, {
             tagInputValue: val
           }));
-          setTInputValue("", _objectSpread$18(_objectSpread$18({}, context), {}, {
-            trigger: "blur"
-          }));
         },
         onFocus: function onFocus(val, context) {
           var _props$onFocus;
@@ -26292,7 +26304,8 @@
   var MAX_POPUP_WIDTH = 1e3;
   function useOverlayStyle(props) {
     var popupProps = props.popupProps,
-        borderless = props.borderless;
+        borderless = props.borderless,
+        autoWidth = props.autoWidth;
 
     var _useState = React.useState(false),
         _useState2 = _slicedToArray(_useState, 2),
@@ -26317,6 +26330,7 @@
     var onInnerPopupVisibleChange = function onInnerPopupVisibleChange(visible, context) {
       var _props$onPopupVisible;
 
+      if (props.readonly) return;
       var newVisible = context.trigger === "trigger-element-click" ? true : visible;
       setInnerPopupVisible(newVisible);
       (_props$onPopupVisible = props.onPopupVisibleChange) === null || _props$onPopupVisible === void 0 ? void 0 : _props$onPopupVisible.call(props, newVisible, context);
@@ -26328,7 +26342,7 @@
 
       if (isFunction_1(overlayStyle) || isObject_1(overlayStyle) && overlayStyle.width) {
         result = overlayStyle;
-      } else if (!borderless) {
+      } else if (!borderless && !autoWidth) {
         result = macthWidthFunc;
       }
 
@@ -26357,7 +26371,8 @@
         value = props.value,
         popupVisible = props.popupVisible,
         popupProps = props.popupProps,
-        borderless = props.borderless;
+        borderless = props.borderless,
+        disabled = props.disabled;
 
     var _useOverlayStyle = useOverlayStyle(props),
         tOverlayStyle = _useOverlayStyle.tOverlayStyle,
@@ -26391,6 +26406,7 @@
       hideEmptyPopup: true,
       onVisibleChange: onInnerPopupVisibleChange
     }, visibleProps), popupProps), {}, {
+      disabled: disabled,
       overlayStyle: tOverlayStyle
     }), multiple ? renderSelectMultiple({
       commonInputProps: commonInputProps,
@@ -26601,8 +26617,6 @@
         onVisibleChange = props.onVisibleChange,
         _props$showArrow = props.showArrow,
         showArrow = _props$showArrow === void 0 ? true : _props$showArrow,
-        inputValue = props.inputValue,
-        defaultInputValue = props.defaultInputValue,
         inputProps = props.inputProps,
         panelBottomContent = props.panelBottomContent,
         panelTopContent = props.panelTopContent,
@@ -26625,30 +26639,30 @@
         showPopup = _useState2[0],
         setShowPopup = _useState2[1];
 
-    var _useState3 = React.useState(void 0),
+    var _useDefault3 = useDefault(props.inputValue, props.defaultInputValue, props.onInputChange),
+        _useDefault4 = _slicedToArray(_useDefault3, 2),
+        inputValue = _useDefault4[0],
+        onInputChange = _useDefault4[1];
+
+    var _useState3 = React.useState([]),
         _useState4 = _slicedToArray(_useState3, 2),
-        inputVal = _useState4[0],
-        setInputVal = _useState4[1];
+        currentOptions = _useState4[0],
+        setCurrentOptions = _useState4[1];
 
     var _useState5 = React.useState([]),
         _useState6 = _slicedToArray(_useState5, 2),
-        currentOptions = _useState6[0],
-        setCurrentOptions = _useState6[1];
+        tmpPropOptions = _useState6[0],
+        setTmpPropOptions = _useState6[1];
 
-    var _useState7 = React.useState([]),
+    var _useState7 = React.useState({}),
         _useState8 = _slicedToArray(_useState7, 2),
-        tmpPropOptions = _useState8[0],
-        setTmpPropOptions = _useState8[1];
+        valueToOption = _useState8[0],
+        setValueToOption = _useState8[1];
 
-    var _useState9 = React.useState({}),
+    var _useState9 = React.useState([]),
         _useState10 = _slicedToArray(_useState9, 2),
-        valueToOption = _useState10[0],
-        setValueToOption = _useState10[1];
-
-    var _useState11 = React.useState([]),
-        _useState12 = _slicedToArray(_useState11, 2),
-        selectedOptions = _useState12[0],
-        setSelectedOptions = _useState12[1];
+        selectedOptions = _useState10[0],
+        setSelectedOptions = _useState10[1];
 
     var selectedLabel = React.useMemo(function () {
       if (multiple) {
@@ -26715,10 +26729,7 @@
       if (disabled) return;
       setShowPopup(visible);
       onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(visible);
-
-      if (!visible && !multiple && filterable) {
-        setInputVal(selectedLabel);
-      }
+      visible && onInputChange("");
     };
 
     var onTagChange = function onTagChange(currentTags, context) {
@@ -26758,11 +26769,11 @@
       }
     };
 
-    var handleChange = function handleChange(value2, _ref3) {
-      var label = _ref3.label;
-
-      if (filterable) {
-        setInputVal(!multiple || reserveKeyword && multiple ? label : "");
+    var handleChange = function handleChange(value2) {
+      if (multiple) {
+        !reserveKeyword && onInputChange("", {
+          trigger: "clear"
+        });
       }
 
       if (creatable && isFunction_1(onCreate)) {
@@ -26773,7 +26784,7 @@
         }
       }
 
-      onChange ? onChange(value2, null) : setInputVal(label);
+      onChange === null || onChange === void 0 ? void 0 : onChange(value2, null);
     };
 
     var handleFilter = function handleFilter(value2) {
@@ -26808,14 +26819,12 @@
     };
 
     var handleInputChange = function handleInputChange(value2) {
-      setInputVal(value2);
+      onInputChange(value2);
 
       if (isFunction_1(onSearch)) {
         onSearch(value2);
         return;
       }
-
-      handleFilter(value2);
     };
 
     var onClearValue = function onClearValue(context) {
@@ -26827,10 +26836,14 @@
         onChange(null, context);
       }
 
-      setInputVal(void 0);
+      onInputChange(void 0);
       onClear(context);
     };
 
+    React.useEffect(function () {
+      handleFilter(String(inputValue));
+    }, [inputValue]);
+
     var renderSuffixIcon = function renderSuffixIcon() {
       if (loading) {
         return /* @__PURE__ */React__default["default"].createElement(Loading, {
@@ -26877,8 +26890,8 @@
       }
 
       if (multiple) {
-        return function (_ref4) {
-          var onClose = _ref4.onClose;
+        return function (_ref3) {
+          var onClose = _ref3.onClose;
           return valueDisplay({
             value: selectedLabel,
             onClose: onClose
@@ -26911,7 +26924,7 @@
       readonly: readonly,
       allowInput: multiple || filterable,
       multiple: multiple,
-      value: isString_1(inputVal) && !multiple ? inputVal : selectedLabel,
+      value: selectedLabel,
       valueDisplay: renderValueDisplay(),
       clearable: clearable,
       disabled: disabled,
@@ -26919,9 +26932,8 @@
       label: prefixIcon,
       suffixIcon: renderSuffixIcon(),
       panel: renderContent(),
-      placeholder: placeholder || t(local.placeholder),
-      inputValue: inputValue,
-      defaultInputValue: defaultInputValue,
+      placeholder: !multiple && showPopup && selectedLabel ? selectedLabel : placeholder || t(local.placeholder),
+      inputValue: showPopup ? inputValue : "",
       tagInputProps: _objectSpread$14({}, tagInputProps),
       tagProps: tagProps,
       inputProps: _objectSpread$14({
@@ -28047,7 +28059,9 @@
     getRowEventsRef.current = getRowEvents;
     var rows = React.useMemo(function () {
       return flattenVisibleData.map(function (row, index) {
-        var rowKeyValue = get_1(row, rowKey) || index;
+        var _get;
+
+        var rowKeyValue = (_get = get_1(row, rowKey)) !== null && _get !== void 0 ? _get : index;
         var rowEvents = getRowEventsRef.current(row, index);
         return /* @__PURE__ */React__default["default"].createElement(React__default["default"].Fragment, {
           key: rowKeyValue
@@ -36839,7 +36853,7 @@
   function ownKeys$w(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$w(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$w(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$w(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-  var useTreeSelectUtils = function useTreeSelectUtils(_ref, $tree) {
+  var useTreeSelectUtils = function useTreeSelectUtils(_ref, treeRef) {
     var data = _ref.data,
         treeProps = _ref.treeProps,
         valueType = _ref.valueType;
@@ -36851,8 +36865,8 @@
     var getNodeItem = usePersistFn(function (value) {
       var _defaultStore$getNode;
 
-      if ($tree.current) {
-        return $tree.current.getItem(value);
+      if (treeRef.current) {
+        return treeRef.current.getItem(value);
       }
 
       return (_defaultStore$getNode = defaultStore.getNode(value)) === null || _defaultStore$getNode === void 0 ? void 0 : _defaultStore$getNode.getModel();
@@ -36883,7 +36897,7 @@
     };
   };
 
-  var TreeSelectArrow = function TreeSelectArrow(_ref) {
+  var SelectArrow = function SelectArrow(_ref) {
     var _classNames;
 
     var isActive = _ref.isActive,
@@ -36900,7 +36914,7 @@
     });
   };
 
-  var SelectInputPassthroughPropsKey = ["multiple", "style", "disabled", "minCollapsedNum", "popupProps", "clearable", "loading"];
+  var SelectInputPassthroughPropsKey = ["multiple", "style", "disabled", "minCollapsedNum", "popupProps", "clearable", "loading", "autoWidth", "borderless", "readonly"];
   var useTreeSelectPassThroughProps = function useTreeSelectPassThroughProps(props) {
     return pick_1(props, SelectInputPassthroughPropsKey);
   };
@@ -36964,6 +36978,10 @@
         classPrefix = _useConfig.classPrefix;
 
     var className = props.className,
+        inputValue = props.inputValue,
+        defaultInputValue = props.defaultInputValue,
+        onInputChange = props.onInputChange,
+        readonly = props.readonly,
         disabled = props.disabled,
         multiple = props.multiple,
         prefixIcon = props.prefixIcon,
@@ -36979,6 +36997,7 @@
         onClear = props.onClear,
         valueDisplay = props.valueDisplay,
         treeProps = props.treeProps,
+        inputProps = props.inputProps,
         onBlur = props.onBlur,
         onFocus = props.onFocus,
         onSearch = props.onSearch,
@@ -36990,90 +37009,95 @@
         value = _useDefault2[0],
         onChange = _useDefault2[1];
 
+    var _useDefault3 = useDefault(props.popupVisible, false, props.onPopupVisibleChange),
+        _useDefault4 = _slicedToArray(_useDefault3, 2),
+        popupVisible = _useDefault4[0],
+        setPopupVisble = _useDefault4[1];
+
     var _useSwitch = useSwitch(),
         _useSwitch2 = _slicedToArray(_useSwitch, 2),
-        popupVisible = _useSwitch2[0],
-        popupAction = _useSwitch2[1];
+        hover = _useSwitch2[0],
+        hoverAction = _useSwitch2[1];
 
-    var _useSwitch3 = useSwitch(),
-        _useSwitch4 = _slicedToArray(_useSwitch3, 2),
-        hover = _useSwitch4[0],
-        hoverAction = _useSwitch4[1];
-
-    var _useState = React.useState(""),
-        _useState2 = _slicedToArray(_useState, 2),
-        filterInput = _useState2[0],
-        setFilterInput = _useState2[1];
+    var _useDefault5 = useDefault(inputValue, defaultInputValue, onInputChange),
+        _useDefault6 = _slicedToArray(_useDefault5, 2),
+        filterInput = _useDefault6[0],
+        setFilterInput = _useDefault6[1];
 
-    var $tree = React.useRef();
+    var treeRef = React.useRef();
 
-    var _useTreeSelectUtils = useTreeSelectUtils(props, $tree),
+    var _useTreeSelectUtils = useTreeSelectUtils(props, treeRef),
         normalizeValue = _useTreeSelectUtils.normalizeValue,
         formatValue = _useTreeSelectUtils.formatValue,
         getNodeItem = _useTreeSelectUtils.getNodeItem;
 
-    var filterable = React.useMemo(function () {
-      return rawFilterable || !!props.filter;
-    }, [props.filter, rawFilterable]);
+    var filterable = rawFilterable || !!props.filter;
     var normalizedValue = React.useMemo(function () {
-      return (multiple ? value : [value]).map(normalizeValue).filter(function (_ref) {
-        var value2 = _ref.value;
-        return value2 !== null && value2 !== void 0 ? value2 : false;
-      });
+      return (multiple ? value : [value]).reduce(function (result, value2) {
+        var normalized = normalizeValue(value2);
+        normalized.value && result.push(normalized);
+        return result;
+      }, []);
     }, [multiple, normalizeValue, value]);
-    var filterText = React.useMemo(function () {
-      return String(filterInput);
-    }, [filterInput]);
-    var inputValue = React.useMemo(function () {
+    var filterText = String(filterInput);
+    var internalInputValue = React.useMemo(function () {
       if (multiple) return normalizedValue;
       return filterable && popupVisible ? filterText : normalizedValue[0];
     }, [multiple, normalizedValue, filterable, popupVisible, filterText]);
     var inputPlaceholader = React.useMemo(function () {
       if (filterable && !multiple && popupVisible && normalizedValue.length) {
-        return typeof normalizedValue[0].label === "string" ? normalizedValue[0].label : normalizedValue[0].value;
+        return typeof normalizedValue[0].label === "string" ? normalizedValue[0].label : String(normalizedValue[0].value);
       }
 
       return placeholder;
     }, [filterable, multiple, popupVisible, normalizedValue, placeholder]);
-    var showLoading = React.useMemo(function () {
-      return !disabled && loading;
-    }, [loading, disabled]);
-    var showFakePlaceholder = React.useMemo(function () {
-      return multiple && !filterable && !normalizedValue.length;
-    }, [filterable, multiple, normalizedValue]);
+    var showLoading = !disabled && loading;
+    var showFakePlaceholder = multiple && !filterable && !normalizedValue.length;
     var handleFilter = React.useCallback(function (node) {
       return filterable ? filter(filterText, node) : true;
     }, [filter, filterText, filterable]);
     var handleSingleChange = usePersistFn(function (value2, context) {
       var $value = value2.length ? value2[0] : null;
-      onChange(formatValue($value, context.node.label), context);
-      popupAction.off();
+      onChange(formatValue($value, context.node.label), _objectSpread$v(_objectSpread$v({}, context), {}, {
+        trigger: $value === null ? "uncheck" : "check"
+      }));
+      setPopupVisble(false, {
+        trigger: "trigger-element-click"
+      });
     });
     var handleMultiChange = usePersistFn(function (value2, context) {
       (max === 0 || value2.length <= max) && onChange(value2.map(function (value3) {
         var _getNodeItem;
 
         return formatValue(value3, (_getNodeItem = getNodeItem(value3)) === null || _getNodeItem === void 0 ? void 0 : _getNodeItem.label);
-      }), context);
+      }), _objectSpread$v(_objectSpread$v({}, context), {}, {
+        trigger: value2.length > normalizedValue.length ? "check" : "uncheck"
+      }));
     });
     var handleClear = usePersistFn(function (ctx) {
       ctx.e.stopPropagation();
       onChange(multiple ? [] : formatValue(null), {
-        node: null
+        node: null,
+        trigger: "clear",
+        e: ctx.e
       });
       onClear === null || onClear === void 0 ? void 0 : onClear(ctx);
-      popupAction.off();
+      setPopupVisble(false, {
+        trigger: "trigger-element-click"
+      });
     });
     var handleRemove = usePersistFn(function (index, e) {
       var node = getNodeItem(normalizedValue[index].value);
       onChange(normalizedValue.filter(function (value2, i) {
         return i !== index;
-      }).map(function (_ref2) {
-        var value2 = _ref2.value,
-            label = _ref2.label;
+      }).map(function (_ref) {
+        var value2 = _ref.value,
+            label = _ref.label;
         return formatValue(value2, label);
       }), {
-        node: node
+        node: node,
+        trigger: "tag-remove",
+        e: e
       });
       onRemove === null || onRemove === void 0 ? void 0 : onRemove({
         value: node.value,
@@ -37115,20 +37139,21 @@
     var handleEnter = usePersistFn(function (text) {
       onSearch === null || onSearch === void 0 ? void 0 : onSearch(text);
     });
-    var handleFilterChange = usePersistFn(function (value2, _ref3) {
-      var trigger = _ref3.trigger;
-
-      if (trigger !== "blur") {
-        setFilterInput(value2);
-      }
+    var handleFilterChange = usePersistFn(function (value2) {
+      return setFilterInput(value2);
     });
     React.useEffect(function () {
       popupVisible && setFilterInput("");
     }, [popupVisible]);
+    React.useEffect(function () {
+      setFilterInput("");
+    }, [value]);
 
     var renderTree = function renderTree() {
-      return showLoading ? loadingItem : /* @__PURE__ */React__default["default"].createElement(Tree, _objectSpread$v(_objectSpread$v({
-        ref: $tree,
+      if (readonly) return empty;
+      if (showLoading) return loadingItem;
+      return /* @__PURE__ */React__default["default"].createElement(Tree, _objectSpread$v(_objectSpread$v({
+        ref: treeRef,
         hover: true,
         transition: true,
         expandAll: true,
@@ -37139,14 +37164,14 @@
       }, multiple ? {
         checkable: true,
         onChange: handleMultiChange,
-        value: normalizedValue.map(function (_ref4) {
-          var value2 = _ref4.value;
+        value: normalizedValue.map(function (_ref2) {
+          var value2 = _ref2.value;
           return value2;
         })
       } : {
         activable: true,
-        actived: normalizedValue.map(function (_ref5) {
-          var value2 = _ref5.value;
+        actived: normalizedValue.map(function (_ref3) {
+          var value2 = _ref3.value;
           return value2;
         }),
         onActive: handleSingleChange
@@ -37170,8 +37195,9 @@
     };
 
     var normalizedValueDisplay = function normalizedValueDisplay() {
-      if (multiple) return function (_ref6) {
-        var onClose = _ref6.onClose;
+      if (typeof valueDisplay === "string") return valueDisplay;
+      if (multiple) return function (_ref4) {
+        var onClose = _ref4.onClose;
         return valueDisplay({
           value: normalizedValue,
           onClose: onClose
@@ -37183,32 +37209,38 @@
       }) : "";
     };
 
-    return /* @__PURE__ */React__default["default"].createElement(SelectInput$1, _objectSpread$v(_objectSpread$v({}, selectInputProps), {}, {
+    return /* @__PURE__ */React__default["default"].createElement(SelectInput$1, _objectSpread$v(_objectSpread$v(_objectSpread$v({}, props.selectInputProps), selectInputProps), {}, {
       ref: ref,
       className: classNames$1("".concat(classPrefix, "-tree-select"), _defineProperty$2({}, "".concat(classPrefix, "-tree-select--without-input"), multiple && !filterable), className),
-      value: inputValue,
+      value: internalInputValue,
       inputValue: popupVisible ? filterText : "",
       panel: renderTree(),
       allowInput: multiple || filterable,
-      inputProps: {
+      inputProps: _objectSpread$v(_objectSpread$v({}, inputProps), {}, {
         size: size
-      },
+      }),
       tagInputProps: {
         size: size,
-        excessTagsDisplayType: "break-line"
+        excessTagsDisplayType: "break-line",
+        inputProps: inputProps,
+        tagProps: props.tagProps
       },
       placeholder: inputPlaceholader,
       popupVisible: popupVisible && !disabled,
       onInputChange: handleFilterChange,
-      onPopupVisibleChange: useMergeFn(popupAction.set),
-      onFocus: useMergeFn(handleFocus, popupAction.on),
+      onPopupVisibleChange: useMergeFn(setPopupVisble),
+      onFocus: useMergeFn(handleFocus, function () {
+        return setPopupVisble(true, {
+          trigger: "trigger-element-click"
+        });
+      }),
       onBlur: useMergeFn(handleBlur),
       onClear: handleClear,
       onTagChange: handleTagChange,
       onEnter: handleEnter,
       onMouseenter: hoverAction.on,
       onMouseleave: hoverAction.off,
-      suffixIcon: /* @__PURE__ */React__default["default"].createElement(TreeSelectArrow, {
+      suffixIcon: readonly ? null : /* @__PURE__ */React__default["default"].createElement(SelectArrow, {
         isActive: popupVisible,
         isHighlight: hover || popupVisible,
         disabled: disabled
@@ -37683,7 +37715,7 @@
     });
   }
 
-  var _excluded$8 = ["href", "title", "target", "children"];
+  var _excluded$8 = ["href", "title", "target", "children", "className"];
 
   function ownKeys$r(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; }
 
@@ -37701,6 +37733,8 @@
         target = props.target,
         _props$children = props.children,
         children = _props$children === void 0 ? [] : _props$children,
+        _props$className = props.className,
+        className = _props$className === void 0 ? "" : _props$className,
         rest = _objectWithoutProperties$1(props, _excluded$8);
 
     var _useConfig = useConfig$1(),
@@ -37721,9 +37755,9 @@
         return unregisterItem(href);
       };
     }, [href, registerItem, unregisterItem]);
-    return /* @__PURE__ */React__default["default"].createElement("div", _objectSpread$r({
-      className: classNames$1("".concat(classPrefix, "-anchor__item"), _defineProperty$2({}, "".concat(classPrefix, "-is-active"), activeItem === href))
-    }, rest), /* @__PURE__ */React__default["default"].createElement("a", {
+    return /* @__PURE__ */React__default["default"].createElement("div", _objectSpread$r(_objectSpread$r({}, rest), {}, {
+      className: classNames$1("".concat(classPrefix, "-anchor__item"), _defineProperty$2({}, "".concat(classPrefix, "-is-active"), activeItem === href), className)
+    }), /* @__PURE__ */React__default["default"].createElement("a", {
       href: href,
       className: classNames$1("".concat(classPrefix, "-anchor__item-link")),
       title: titleAttr,
@@ -38871,7 +38905,7 @@
     }, /*#__PURE__*/React__default["default"].createElement(Content));
   };
 
-  var _excluded$7 = ["affixProps", "bounds", "targetOffset", "container", "size", "children", "cursor", "onClick", "onChange"];
+  var _excluded$7 = ["affixProps", "bounds", "targetOffset", "container", "size", "children", "cursor", "onClick", "onChange", "className"];
 
   function ownKeys$q(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; }
 
@@ -38896,6 +38930,8 @@
         onClick = _props$onClick === void 0 ? noop$1 : _props$onClick,
         _props$onChange = props.onChange,
         onChange = _props$onChange === void 0 ? noop$1 : _props$onChange,
+        _props$className = props.className,
+        className = _props$className === void 0 ? "" : _props$className,
         rest = _objectWithoutProperties$1(props, _excluded$7);
 
     var _useConfig = useConfig$1(),
@@ -39019,7 +39055,7 @@
         scrollContainer.removeEventListener("scroll", handleScroll);
       };
     }, [container, handleScroll]);
-    var anchorClass = classNames$1("".concat(classPrefix, "-anchor"), (_classNames = {}, _defineProperty$2(_classNames, "".concat(classPrefix, "-size-s"), size === "small"), _defineProperty$2(_classNames, "".concat(classPrefix, "-size-m"), size === "medium"), _defineProperty$2(_classNames, "".concat(classPrefix, "-size-l"), size === "large"), _classNames));
+    var anchorClass = classNames$1("".concat(classPrefix, "-anchor"), (_classNames = {}, _defineProperty$2(_classNames, "".concat(classPrefix, "-size-s"), size === "small"), _defineProperty$2(_classNames, "".concat(classPrefix, "-size-m"), size === "medium"), _defineProperty$2(_classNames, "".concat(classPrefix, "-size-l"), size === "large"), _classNames), className);
 
     var CursorCmp = function CursorCmp() {
       if (isFunction_1(cursor)) return cursor();
@@ -39036,10 +39072,10 @@
         registerItem: registerItem,
         unregisterItem: unregisterItem
       }
-    }, /* @__PURE__ */React__default["default"].createElement("div", _objectSpread$q({
+    }, /* @__PURE__ */React__default["default"].createElement("div", _objectSpread$q(_objectSpread$q({}, rest), {}, {
       className: anchorClass,
       ref: anchorEl
-    }, rest), /* @__PURE__ */React__default["default"].createElement("div", {
+    }), /* @__PURE__ */React__default["default"].createElement("div", {
       className: "".concat(classPrefix, "-anchor__line")
     }, /* @__PURE__ */React__default["default"].createElement("div", {
       className: "".concat(classPrefix, "-anchor__line-cursor-wrapper"),
@@ -40031,6 +40067,229 @@
 
   var Calendar = Calendar$1;
 
+  function ownKeys$o(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$o(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$o(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  function useInstance(props, formRef, formItemsRef) {
+    var _useConfig = useConfig$1(),
+        classPrefix = _useConfig.classPrefix;
+
+    var FORM_ITEM_CLASS_PREFIX = "".concat(classPrefix, "-form-item__");
+    var scrollToFirstError = props.scrollToFirstError,
+        _props$preventSubmitD = props.preventSubmitDefault,
+        preventSubmitDefault = _props$preventSubmitD === void 0 ? true : _props$preventSubmitD,
+        onSubmit = props.onSubmit;
+
+    function getFormItemsMap() {
+      var formItemsMap = formItemsRef.current.reduce(function (acc, _ref) {
+        var currItem = _ref.current;
+
+        if (currItem !== null && currItem !== void 0 && currItem.name) {
+          var name = currItem.name;
+          return _objectSpread$o(_objectSpread$o({}, acc), {}, _defineProperty$2({}, name, currItem));
+        }
+
+        return acc;
+      }, {});
+      return formItemsMap;
+    }
+
+    function getFirstError(r) {
+      var _r$firstKey$;
+
+      if (r === true) return;
+
+      var _Object$keys = Object.keys(r),
+          _Object$keys2 = _slicedToArray(_Object$keys, 1),
+          firstKey = _Object$keys2[0];
+
+      if (scrollToFirstError) {
+        scrollTo(".".concat(FORM_ITEM_CLASS_PREFIX + firstKey));
+      }
+
+      return (_r$firstKey$ = r[firstKey][0]) === null || _r$firstKey$ === void 0 ? void 0 : _r$firstKey$.message;
+    }
+
+    function scrollTo(selector) {
+      var dom = formRef.current.querySelector(selector);
+      var behavior = scrollToFirstError;
+      dom && dom.scrollIntoView({
+        behavior: behavior
+      });
+    }
+
+    function submit(e) {
+      if (preventSubmitDefault) {
+        var _e$preventDefault, _e$stopPropagation;
+
+        e === null || e === void 0 ? void 0 : (_e$preventDefault = e.preventDefault) === null || _e$preventDefault === void 0 ? void 0 : _e$preventDefault.call(e);
+        e === null || e === void 0 ? void 0 : (_e$stopPropagation = e.stopPropagation) === null || _e$stopPropagation === void 0 ? void 0 : _e$stopPropagation.call(e);
+      }
+
+      validate().then(function (r) {
+        var firstError = getFirstError(r);
+        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({
+          validateResult: r,
+          firstError: firstError,
+          e: e
+        });
+      });
+    }
+
+    function validate(param) {
+      function needValidate(name, fields2) {
+        if (!fields2 || !Array.isArray(fields2)) return true;
+        return fields2.indexOf(name) !== -1;
+      }
+
+      var _ref2 = param || {},
+          fields = _ref2.fields,
+          _ref2$trigger = _ref2.trigger,
+          trigger = _ref2$trigger === void 0 ? "all" : _ref2$trigger;
+
+      var list = formItemsRef.current.filter(function (_ref3) {
+        var formItemRef = _ref3.current;
+        return formItemRef && isFunction_1(formItemRef.validate) && needValidate(formItemRef.name, fields);
+      }).map(function (_ref4) {
+        var formItemRef = _ref4.current;
+        return formItemRef.validate(trigger);
+      });
+      return new Promise(function (resolve) {
+        Promise.all(flatten_1(list)).then(function (arr) {
+          var r = arr.reduce(function (r2, err) {
+            return Object.assign(r2 || {}, err);
+          }, {});
+          Object.keys(r).forEach(function (key) {
+            if (r[key] === true) {
+              delete r[key];
+            } else {
+              r[key] = r[key].filter(function (fr) {
+                return fr.result === false;
+              });
+            }
+          });
+          resolve(isEmpty_1(r) ? true : r);
+        })["catch"](console.error);
+      });
+    }
+
+    function getFieldValue(name) {
+      var _target$current;
+
+      if (!name) return null;
+      var target = formItemsRef.current.find(function (_ref5) {
+        var formItemRef = _ref5.current;
+        return (formItemRef === null || formItemRef === void 0 ? void 0 : formItemRef.name) === name;
+      });
+      return (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.value;
+    }
+
+    function getFieldsValue(nameList) {
+      var fieldsValue = {};
+      var formItemsMap = getFormItemsMap();
+
+      if (nameList === true) {
+        formItemsRef.current.forEach(function (_ref6) {
+          var formItemRef = _ref6.current;
+
+          if (formItemRef !== null && formItemRef !== void 0 && formItemRef.name) {
+            fieldsValue[formItemRef.name] = formItemRef.value;
+          }
+        });
+      } else {
+        if (!Array.isArray(nameList)) throw new Error("getFieldsValue \u53C2\u6570\u9700\u8981 Array \u7C7B\u578B");
+        nameList.forEach(function (name) {
+          if (formItemsMap[name]) fieldsValue[name] = formItemsMap[name].value;
+        });
+      }
+
+      return fieldsValue;
+    }
+
+    function setFieldsValue() {
+      var fields = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var formItemsMap = getFormItemsMap();
+      Object.keys(fields).forEach(function (key) {
+        var _formItemsMap$key;
+
+        (_formItemsMap$key = formItemsMap[key]) === null || _formItemsMap$key === void 0 ? void 0 : _formItemsMap$key.setValue(fields[key]);
+      });
+    }
+
+    function setFields() {
+      var fields = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      if (!Array.isArray(fields)) throw new Error("setFields \u53C2\u6570\u9700\u8981 Array \u7C7B\u578B");
+      var formItemsMap = getFormItemsMap();
+      fields.forEach(function (field) {
+        var _formItemsMap$name;
+
+        var name = field.name,
+            value = field.value,
+            status = field.status;
+        (_formItemsMap$name = formItemsMap[name]) === null || _formItemsMap$name === void 0 ? void 0 : _formItemsMap$name.setField({
+          value: value,
+          status: status
+        });
+      });
+    }
+
+    function reset(params) {
+      if (typeof params === "undefined") {
+        formItemsRef.current.forEach(function (_ref7) {
+          var formItemRef = _ref7.current;
+          formItemRef && (formItemRef === null || formItemRef === void 0 ? void 0 : formItemRef.resetField());
+        });
+      } else {
+        var _params$type = params.type,
+            type = _params$type === void 0 ? "initial" : _params$type,
+            _params$fields = params.fields,
+            fields = _params$fields === void 0 ? [] : _params$fields;
+        var formItemsMap = getFormItemsMap();
+        fields.forEach(function (name) {
+          var _formItemsMap$name2;
+
+          (_formItemsMap$name2 = formItemsMap[name]) === null || _formItemsMap$name2 === void 0 ? void 0 : _formItemsMap$name2.resetField(type);
+        });
+      }
+    }
+
+    function clearValidate(fields) {
+      if (typeof fields === "undefined") {
+        formItemsRef.current.forEach(function (_ref8) {
+          var formItemRef = _ref8.current;
+          formItemRef && (formItemRef === null || formItemRef === void 0 ? void 0 : formItemRef.resetValidate());
+        });
+      } else {
+        if (!Array.isArray(fields)) throw new Error("clearValidate \u53C2\u6570\u9700\u8981 Array \u7C7B\u578B");
+        var formItemsMap = getFormItemsMap();
+        fields.forEach(function (name) {
+          var _formItemsMap$name3;
+
+          (_formItemsMap$name3 = formItemsMap[name]) === null || _formItemsMap$name3 === void 0 ? void 0 : _formItemsMap$name3.resetValidate();
+        });
+      }
+    }
+
+    function setValidateMessage(message) {
+      var formItemsMap = getFormItemsMap();
+      Object.keys(message).forEach(function (name) {
+        formItemsMap[name].setValidateMessage(message[name]);
+      });
+    }
+
+    return {
+      submit: submit,
+      reset: reset,
+      validate: validate,
+      clearValidate: clearValidate,
+      setFields: setFields,
+      setFieldsValue: setFieldsValue,
+      setValidateMessage: setValidateMessage,
+      getFieldValue: getFieldValue,
+      getFieldsValue: getFieldsValue
+    };
+  }
+
   var FormContext = /*#__PURE__*/React__default["default"].createContext({
     labelWidth: "calc(1 / 12 * 100%)",
     labelAlign: "right",
@@ -40052,33 +40311,6 @@
     return React__default["default"].useContext(FormContext);
   };
 
-  /**
-   * Checks if `value` is `null` or `undefined`.
-   *
-   * @static
-   * @memberOf _
-   * @since 4.0.0
-   * @category Lang
-   * @param {*} value The value to check.
-   * @returns {boolean} Returns `true` if `value` is nullish, else `false`.
-   * @example
-   *
-   * _.isNil(null);
-   * // => true
-   *
-   * _.isNil(void 0);
-   * // => true
-   *
-   * _.isNil(NaN);
-   * // => false
-   */
-
-  function isNil(value) {
-    return value == null;
-  }
-
-  var isNil_1 = isNil;
-
   var copyObject$1 = _copyObject,
       createAssigner = _createAssigner,
       keysIn = keysIn_1;
@@ -42419,9 +42651,9 @@
 
   var _excluded$6 = ["value", "defaultFiles", "files", "onChange"];
 
-  function ownKeys$o(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 ownKeys$n(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$o(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$o(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$n(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   function useDefaultValue(props, defaultDefaultValue) {
     var value = props.value,
         defaultFiles = props.defaultFiles,
@@ -42440,7 +42672,7 @@
         finalValue = _useDefault2[0],
         finalOnChange = _useDefault2[1];
 
-    return _objectSpread$o({
+    return _objectSpread$n({
       files: finalValue,
       onChange: finalOnChange
     }, restProps);
@@ -42499,9 +42731,9 @@
 
   function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-  function ownKeys$n(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 ownKeys$m(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$n(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$n(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$m(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
   var Upload$1 = function Upload(props, ref) {
     var _useDefaultValue = useDefaultValue(props, []),
@@ -42720,7 +42952,7 @@
           _ref3$type = _ref3.type,
           type = _ref3$type === void 0 ? "mock" : _ref3$type;
 
-      var tmpFile = _objectSpread$n({}, file);
+      var tmpFile = _objectSpread$m({}, file);
 
       tmpFile.percent = percent;
       var progressCtx = {
@@ -42755,7 +42987,7 @@
           var r = res.response || {};
           onError({
             file: file,
-            response: _objectSpread$n(_objectSpread$n({}, r), {}, {
+            response: _objectSpread$m(_objectSpread$m({}, r), {}, {
               error: res.error
             })
           });
@@ -42769,7 +43001,7 @@
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                file = _objectSpread$n({}, uploadFile);
+                file = _objectSpread$m({}, uploadFile);
 
                 if (!(file.status !== "waiting")) {
                   _context.next = 3;
@@ -42854,7 +43086,7 @@
 
         var file = typeof format === "function" ? format(fileRaw) : fileRaw;
 
-        var uploadFile = _objectSpread$n({
+        var uploadFile = _objectSpread$m({
           raw: fileRaw,
           lastModified: fileRaw.lastModified,
           name: fileRaw.name,
@@ -43153,6 +43385,14 @@
 
   var Upload = _Upload;
 
+  function renderTNode(tnode, defaultNode) {
+    if (typeof tnode === "function") {
+      return tnode();
+    }
+
+    return tnode || defaultNode;
+  }
+
   var isDate$2 = {exports: {}};
 
   var merge = {exports: {}};
@@ -44139,9 +44379,9 @@
 
   var isURL = /*@__PURE__*/getDefaultExportFromCjs(isURL$1.exports);
 
-  function ownKeys$m(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 ownKeys$l(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$m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$m(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   function isValueEmpty(val) {
     var type = Object.prototype.toString.call(val);
     var typeMap = {
@@ -44270,7 +44510,7 @@
                 break;
               }
 
-              return _context.abrupt("return", _objectSpread$m(_objectSpread$m({}, rule), {}, {
+              return _context.abrupt("return", _objectSpread$l(_objectSpread$l({}, rule), {}, {
                 result: validateResult
               }));
 
@@ -44326,9 +44566,9 @@
     return _validate.apply(this, arguments);
   }
 
-  function ownKeys$l(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 ownKeys$k(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$l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
   var ctrlKeyMap = /* @__PURE__ */new Map();
   ctrlKeyMap.set(Checkbox, "checked");
@@ -44343,8 +44583,8 @@
     React__default["default"].Children.forEach(children, function (child) {
       if (!child) return;
 
-      if (_typeof(child.type) === "object") {
-        defaultInitialData = initialDataMap.get(child.type) || initialData;
+      if ( /*#__PURE__*/React__default["default"].isValidElement(child) && typeof initialData === "undefined") {
+        defaultInitialData = initialDataMap.get(child.type);
       }
     });
     return defaultInitialData;
@@ -44356,27 +44596,13 @@
     var _useConfig = useConfig$1(),
         classPrefix = _useConfig.classPrefix;
 
-    var children = props.children,
-        label = props.label,
-        name = props.name,
-        help = props.help,
-        statusIconFromProp = props.statusIcon,
-        rulesFromProp = props.rules,
-        labelWidth = props.labelWidth,
-        labelAlign = props.labelAlign,
-        initialData = props.initialData,
-        requiredMark = props.requiredMark,
-        successBorder = props.successBorder,
-        className = props.className,
-        formItemStyle = props.style;
-
     var _useFormContext = useFormContext(),
         colon = _useFormContext.colon,
-        requiredMarkFromContext = _useFormContext.requiredMark,
         layout = _useFormContext.layout,
+        requiredMarkFromContext = _useFormContext.requiredMark,
         labelAlignFromContext = _useFormContext.labelAlign,
         labelWidthFromContext = _useFormContext.labelWidth,
-        showErrorMessage = _useFormContext.showErrorMessage,
+        showErrorMessageFromContext = _useFormContext.showErrorMessage,
         disabledFromContext = _useFormContext.disabled,
         resetTypeFromContext = _useFormContext.resetType,
         rulesFromContext = _useFormContext.rules,
@@ -44385,6 +44611,27 @@
         formItemsRef = _useFormContext.formItemsRef,
         onFormItemValueChange = _useFormContext.onFormItemValueChange;
 
+    var children = props.children,
+        style = props.style,
+        label = props.label,
+        name = props.name,
+        help = props.help,
+        initialData = props.initialData,
+        className = props.className,
+        successBorder = props.successBorder,
+        _props$statusIcon = props.statusIcon,
+        statusIcon = _props$statusIcon === void 0 ? statusIconFromContext : _props$statusIcon,
+        _props$rules = props.rules,
+        innerRules = _props$rules === void 0 ? (rulesFromContext === null || rulesFromContext === void 0 ? void 0 : rulesFromContext[name]) || [] : _props$rules,
+        _props$labelWidth = props.labelWidth,
+        labelWidth = _props$labelWidth === void 0 ? labelWidthFromContext : _props$labelWidth,
+        _props$labelAlign = props.labelAlign,
+        labelAlign = _props$labelAlign === void 0 ? labelAlignFromContext : _props$labelAlign,
+        _props$requiredMark = props.requiredMark,
+        requiredMark = _props$requiredMark === void 0 ? requiredMarkFromContext : _props$requiredMark,
+        _props$showErrorMessa = props.showErrorMessage,
+        showErrorMessage = _props$showErrorMessa === void 0 ? showErrorMessageFromContext : _props$showErrorMessa;
+
     var _useState = React.useState([]),
         _useState2 = _slicedToArray(_useState, 2),
         errorList = _useState2[0],
@@ -44421,14 +44668,10 @@
     var innerFormItemsRef = React.useRef([]);
     var shouldValidate = React.useRef(null);
     var isMounted = React.useRef(false);
-    var innerRules = rulesFromContext && rulesFromContext[name] || rulesFromProp || [];
-    var innerLabelWidth = isNil_1(labelWidth) ? labelWidthFromContext : labelWidth;
-    var innerLabelAlign = isNil_1(labelAlign) ? labelAlignFromContext : labelAlign;
-    var innerRequiredMark = isNil_1(requiredMark) ? requiredMarkFromContext : requiredMark;
     var formItemClass = classNames$1(className, "".concat(classPrefix, "-form__item"), (_classNames = {}, _defineProperty$2(_classNames, "".concat(classPrefix, "-form-item__").concat(name), name), _defineProperty$2(_classNames, "".concat(classPrefix, "-form__item-with-help"), help), _defineProperty$2(_classNames, "".concat(classPrefix, "-form__item-with-extra"), renderTipsInfo()), _classNames));
-    var formItemLabelClass = classNames$1("".concat(classPrefix, "-form__label"), (_classNames2 = {}, _defineProperty$2(_classNames2, "".concat(classPrefix, "-form__label--required"), innerRequiredMark && innerRules.filter(function (rule) {
+    var formItemLabelClass = classNames$1("".concat(classPrefix, "-form__label"), (_classNames2 = {}, _defineProperty$2(_classNames2, "".concat(classPrefix, "-form__label--required"), requiredMark && innerRules.filter(function (rule) {
       return rule.required;
-    }).length > 0), _defineProperty$2(_classNames2, "".concat(classPrefix, "-form__label--colon"), colon && label), _defineProperty$2(_classNames2, "".concat(classPrefix, "-form__label--top"), innerLabelAlign === "top" || !innerLabelWidth), _defineProperty$2(_classNames2, "".concat(classPrefix, "-form__label--left"), innerLabelAlign === "left" && innerLabelWidth), _defineProperty$2(_classNames2, "".concat(classPrefix, "-form__label--right"), innerLabelAlign === "right" && innerLabelWidth), _classNames2));
+    }).length > 0), _defineProperty$2(_classNames2, "".concat(classPrefix, "-form__label--colon"), colon && label), _defineProperty$2(_classNames2, "".concat(classPrefix, "-form__label--top"), labelAlign === "top" || !labelWidth), _defineProperty$2(_classNames2, "".concat(classPrefix, "-form__label--left"), labelAlign === "left" && labelWidth), _defineProperty$2(_classNames2, "".concat(classPrefix, "-form__label--right"), labelAlign === "right" && labelWidth), _classNames2));
 
     var contentClass = function contentClass() {
       var _classNames4;
@@ -44450,20 +44693,20 @@
     var labelStyle = {};
     var contentStyle = {};
 
-    if (innerLabelWidth && innerLabelAlign !== "top") {
-      if (typeof innerLabelWidth === "number") {
+    if (labelWidth && labelAlign !== "top") {
+      if (typeof labelWidth === "number") {
         labelStyle = {
-          width: "".concat(innerLabelWidth, "px")
+          width: "".concat(labelWidth, "px")
         };
         contentStyle = {
-          marginLeft: layout !== "inline" ? "".concat(innerLabelWidth, "px") : ""
+          marginLeft: layout !== "inline" ? "".concat(labelWidth, "px") : ""
         };
       } else {
         labelStyle = {
-          width: innerLabelWidth
+          width: labelWidth
         };
         contentStyle = {
-          marginLeft: layout !== "inline" ? innerLabelWidth : ""
+          marginLeft: layout !== "inline" ? labelWidth : ""
         };
       }
     }
@@ -44472,7 +44715,7 @@
       var helpNode = null;
       if (help) helpNode = /* @__PURE__ */React__default["default"].createElement("div", {
         className: "".concat(classPrefix, "-form__help")
-      }, help);
+      }, renderTNode(help));
       var list = errorList;
 
       if (showErrorMessage && list && list[0] && list[0].message) {
@@ -44491,7 +44734,7 @@
     }
 
     var renderSuffixIcon = function renderSuffixIcon() {
-      if (statusIconFromProp === false) return null;
+      if (statusIcon === false) return null;
 
       var resultIcon = function resultIcon(iconSlot) {
         return /* @__PURE__ */React__default["default"].createElement("span", {
@@ -44526,22 +44769,18 @@
         return null;
       };
 
-      if ( /*#__PURE__*/React__default["default"].isValidElement(statusIconFromProp)) {
-        return resultIcon( /*#__PURE__*/React__default["default"].cloneElement(statusIconFromProp, _objectSpread$l({
+      if ( /*#__PURE__*/React__default["default"].isValidElement(statusIcon)) {
+        return resultIcon( /*#__PURE__*/React__default["default"].cloneElement(statusIcon, _objectSpread$k({
           style: {
             color: "unset"
           }
-        }, statusIconFromProp.props)));
+        }, statusIcon.props)));
       }
 
-      if (statusIconFromContext === true) {
+      if (statusIcon === true) {
         return getDefaultIcon();
       }
 
-      if ( /*#__PURE__*/React__default["default"].isValidElement(statusIconFromContext)) {
-        return resultIcon(statusIconFromProp);
-      }
-
       return null;
     };
 
@@ -44724,7 +44963,7 @@
     });
     return /* @__PURE__ */React__default["default"].createElement("div", {
       className: formItemClass,
-      style: formItemStyle,
+      style: style,
       ref: ref
     }, label && /* @__PURE__ */React__default["default"].createElement("div", {
       className: formItemLabelClass,
@@ -44773,7 +45012,7 @@
           ctrlKey = ctrlKeyMap.get(child.type) || "value";
         }
 
-        return /*#__PURE__*/React__default["default"].cloneElement(child, _objectSpread$l(_objectSpread$l({
+        return /*#__PURE__*/React__default["default"].cloneElement(child, _objectSpread$k(_objectSpread$k({
           disabled: disabledFromContext
         }, child.props), {}, (_objectSpread2 = {}, _defineProperty$2(_objectSpread2, ctrlKey, formValue), _defineProperty$2(_objectSpread2, "onChange", function onChange(value) {
           onChangeFromProps.call(null, value);
@@ -44788,9 +45027,6 @@
     }), renderSuffixIcon()), renderTipsInfo()));
   });
 
-  function ownKeys$k(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$k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var Form$1 = forwardRefWithStatics(function (props, ref) {
     var _useConfig = useConfig$1(),
         classPrefix = _useConfig.classPrefix,
@@ -44823,54 +45059,40 @@
         preventSubmitDefault = _props$preventSubmitD === void 0 ? true : _props$preventSubmitD,
         disabled = props.disabled,
         children = props.children,
-        onSubmit = props.onSubmit,
         onReset = props.onReset,
         _props$onValuesChange = props.onValuesChange,
         onValuesChange = _props$onValuesChange === void 0 ? noop$1 : _props$onValuesChange;
     var formClass = classNames$1(className, "".concat(classPrefix, "-form"), _defineProperty$2({}, "".concat(classPrefix, "-form-inline"), layout === "inline"));
     var formRef = React.useRef();
     var formItemsRef = React.useRef([]);
-    var FORM_ITEM_CLASS_PREFIX = "".concat(classPrefix, "-form-item__");
-
-    function getFormItemsMap() {
-      var formItemsMap = formItemsRef.current.reduce(function (acc, _ref) {
-        var currItem = _ref.current;
 
-        if (currItem !== null && currItem !== void 0 && currItem.name) {
-          var name = currItem.name;
-          return _objectSpread$k(_objectSpread$k({}, acc), {}, _defineProperty$2({}, name, currItem));
-        }
+    var _useInstance = useInstance(props, formRef, formItemsRef),
+        submit = _useInstance.submit,
+        reset = _useInstance.reset,
+        getFieldValue = _useInstance.getFieldValue,
+        getFieldsValue = _useInstance.getFieldsValue,
+        setFieldsValue = _useInstance.setFieldsValue,
+        setFields = _useInstance.setFields,
+        validate = _useInstance.validate,
+        clearValidate = _useInstance.clearValidate,
+        setValidateMessage = _useInstance.setValidateMessage;
 
-        return acc;
-      }, {});
-      return formItemsMap;
-    }
-
-    function getFirstError(r) {
-      var _r$firstKey$;
-
-      if (r === true) return;
-
-      var _Object$keys = Object.keys(r),
-          _Object$keys2 = _slicedToArray(_Object$keys, 1),
-          firstKey = _Object$keys2[0];
-
-      if (scrollToFirstError) {
-        scrollTo(".".concat(FORM_ITEM_CLASS_PREFIX + firstKey));
-      }
-
-      return (_r$firstKey$ = r[firstKey][0]) === null || _r$firstKey$ === void 0 ? void 0 : _r$firstKey$.message;
-    }
-
-    function scrollTo(selector) {
-      var dom = formRef.current.querySelector(selector);
-      var behavior = scrollToFirstError;
-      dom && dom.scrollIntoView({
-        behavior: behavior
-      });
-    }
+    React.useImperativeHandle(ref, function () {
+      return {
+        currentElement: formRef.current,
+        submit: submit,
+        reset: reset,
+        getFieldValue: getFieldValue,
+        getFieldsValue: getFieldsValue,
+        setFieldsValue: setFieldsValue,
+        setFields: setFields,
+        validate: validate,
+        clearValidate: clearValidate,
+        setValidateMessage: setValidateMessage
+      };
+    });
 
-    function submitHandler(e) {
+    function onResetHandler(e) {
       if (preventSubmitDefault) {
         var _e$preventDefault, _e$stopPropagation;
 
@@ -44878,26 +45100,8 @@
         (_e$stopPropagation = e.stopPropagation) === null || _e$stopPropagation === void 0 ? void 0 : _e$stopPropagation.call(e);
       }
 
-      validate().then(function (r) {
-        var firstError = getFirstError(r);
-        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({
-          validateResult: r,
-          firstError: firstError,
-          e: e
-        });
-      });
-    }
-
-    function resetHandler(e) {
-      if (preventSubmitDefault) {
-        var _e$preventDefault2, _e$stopPropagation2;
-
-        (_e$preventDefault2 = e.preventDefault) === null || _e$preventDefault2 === void 0 ? void 0 : _e$preventDefault2.call(e);
-        (_e$stopPropagation2 = e.stopPropagation) === null || _e$stopPropagation2 === void 0 ? void 0 : _e$stopPropagation2.call(e);
-      }
-
-      formItemsRef.current.forEach(function (_ref2) {
-        var formItemRef = _ref2.current;
+      formItemsRef.current.forEach(function (_ref) {
+        var formItemRef = _ref.current;
         formItemRef && (formItemRef === null || formItemRef === void 0 ? void 0 : formItemRef.resetField());
       });
       onReset === null || onReset === void 0 ? void 0 : onReset({
@@ -44905,162 +45109,6 @@
       });
     }
 
-    function validate(param) {
-      function needValidate(name, fields2) {
-        if (!fields2 || !Array.isArray(fields2)) return true;
-        return fields2.indexOf(name) !== -1;
-      }
-
-      var _ref3 = param || {},
-          fields = _ref3.fields,
-          _ref3$trigger = _ref3.trigger,
-          trigger = _ref3$trigger === void 0 ? "all" : _ref3$trigger;
-
-      var list = formItemsRef.current.filter(function (_ref4) {
-        var formItemRef = _ref4.current;
-        return formItemRef && isFunction_1(formItemRef.validate) && needValidate(formItemRef.name, fields);
-      }).map(function (_ref5) {
-        var formItemRef = _ref5.current;
-        return formItemRef.validate(trigger);
-      });
-      return new Promise(function (resolve) {
-        Promise.all(flatten_1(list)).then(function (arr) {
-          var r = arr.reduce(function (r2, err) {
-            return Object.assign(r2 || {}, err);
-          }, {});
-          Object.keys(r).forEach(function (key) {
-            if (r[key] === true) {
-              delete r[key];
-            } else {
-              r[key] = r[key].filter(function (fr) {
-                return fr.result === false;
-              });
-            }
-          });
-          resolve(isEmpty_1(r) ? true : r);
-        })["catch"](console.error);
-      });
-    }
-
-    function getFieldValue(name) {
-      var _target$current;
-
-      if (!name) return null;
-      var target = formItemsRef.current.find(function (_ref6) {
-        var formItemRef = _ref6.current;
-        return (formItemRef === null || formItemRef === void 0 ? void 0 : formItemRef.name) === name;
-      });
-      return (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.value;
-    }
-
-    function getFieldsValue(nameList) {
-      var fieldsValue = {};
-      var formItemsMap = getFormItemsMap();
-
-      if (nameList === true) {
-        formItemsRef.current.forEach(function (_ref7) {
-          var formItemRef = _ref7.current;
-
-          if (formItemRef !== null && formItemRef !== void 0 && formItemRef.name) {
-            fieldsValue[formItemRef.name] = formItemRef.value;
-          }
-        });
-      } else {
-        if (!Array.isArray(nameList)) throw new Error("getFieldsValue \u53C2\u6570\u9700\u8981 Array \u7C7B\u578B");
-        nameList.forEach(function (name) {
-          if (formItemsMap[name]) fieldsValue[name] = formItemsMap[name].value;
-        });
-      }
-
-      return fieldsValue;
-    }
-
-    function setFieldsValue() {
-      var fields = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      var formItemsMap = getFormItemsMap();
-      Object.keys(fields).forEach(function (key) {
-        var _formItemsMap$key;
-
-        (_formItemsMap$key = formItemsMap[key]) === null || _formItemsMap$key === void 0 ? void 0 : _formItemsMap$key.setValue(fields[key]);
-      });
-    }
-
-    function setFields() {
-      var fields = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-      if (!Array.isArray(fields)) throw new Error("setFields \u53C2\u6570\u9700\u8981 Array \u7C7B\u578B");
-      var formItemsMap = getFormItemsMap();
-      fields.forEach(function (field) {
-        var _formItemsMap$name;
-
-        var name = field.name,
-            value = field.value,
-            status = field.status;
-        (_formItemsMap$name = formItemsMap[name]) === null || _formItemsMap$name === void 0 ? void 0 : _formItemsMap$name.setField({
-          value: value,
-          status: status
-        });
-      });
-    }
-
-    function reset(params) {
-      if (typeof params === "undefined") {
-        formItemsRef.current.forEach(function (_ref8) {
-          var formItemRef = _ref8.current;
-          formItemRef && (formItemRef === null || formItemRef === void 0 ? void 0 : formItemRef.resetField());
-        });
-      } else {
-        var _params$type = params.type,
-            type = _params$type === void 0 ? "initial" : _params$type,
-            _params$fields = params.fields,
-            fields = _params$fields === void 0 ? [] : _params$fields;
-        var formItemsMap = getFormItemsMap();
-        fields.forEach(function (name) {
-          var _formItemsMap$name2;
-
-          (_formItemsMap$name2 = formItemsMap[name]) === null || _formItemsMap$name2 === void 0 ? void 0 : _formItemsMap$name2.resetField(type);
-        });
-      }
-    }
-
-    function clearValidate(fields) {
-      if (typeof fields === "undefined") {
-        formItemsRef.current.forEach(function (_ref9) {
-          var formItemRef = _ref9.current;
-          formItemRef && (formItemRef === null || formItemRef === void 0 ? void 0 : formItemRef.resetValidate());
-        });
-      } else {
-        if (!Array.isArray(fields)) throw new Error("clearValidate \u53C2\u6570\u9700\u8981 Array \u7C7B\u578B");
-        var formItemsMap = getFormItemsMap();
-        fields.forEach(function (name) {
-          var _formItemsMap$name3;
-
-          (_formItemsMap$name3 = formItemsMap[name]) === null || _formItemsMap$name3 === void 0 ? void 0 : _formItemsMap$name3.resetValidate();
-        });
-      }
-    }
-
-    function setValidateMessage(message) {
-      var formItemsMap = getFormItemsMap();
-      Object.keys(message).forEach(function (name) {
-        formItemsMap[name].setValidateMessage(message[name]);
-      });
-    }
-
-    React.useImperativeHandle(ref, function () {
-      return {
-        currentElement: formRef.current,
-        submit: submitHandler,
-        reset: reset,
-        getFieldValue: getFieldValue,
-        getFieldsValue: getFieldsValue,
-        setFieldsValue: setFieldsValue,
-        setFields: setFields,
-        validate: validate,
-        clearValidate: clearValidate,
-        setValidateMessage: setValidateMessage
-      };
-    });
-
     function onFormItemValueChange(changedValue) {
       var allFields = getFieldsValue(true);
       onValuesChange(changedValue, allFields);
@@ -45068,10 +45116,10 @@
 
     function onKeyDownHandler(e) {
       if (preventSubmitDefault && e.key === "Enter") {
-        var _e$preventDefault3, _e$stopPropagation3;
+        var _e$preventDefault2, _e$stopPropagation2;
 
-        (_e$preventDefault3 = e.preventDefault) === null || _e$preventDefault3 === void 0 ? void 0 : _e$preventDefault3.call(e);
-        (_e$stopPropagation3 = e.stopPropagation) === null || _e$stopPropagation3 === void 0 ? void 0 : _e$stopPropagation3.call(e);
+        (_e$preventDefault2 = e.preventDefault) === null || _e$preventDefault2 === void 0 ? void 0 : _e$preventDefault2.call(e);
+        (_e$stopPropagation2 = e.stopPropagation) === null || _e$stopPropagation2 === void 0 ? void 0 : _e$stopPropagation2.call(e);
       }
     }
 
@@ -45097,8 +45145,8 @@
       ref: formRef,
       style: style,
       className: formClass,
-      onSubmit: submitHandler,
-      onReset: resetHandler,
+      onSubmit: submit,
+      onReset: onResetHandler,
       onKeyDown: onKeyDownHandler
     }, children));
   }, {
@@ -46690,7 +46738,8 @@
     var onChange = _ref.onChange,
         style = _ref.style,
         classPrefix = _ref.classPrefix,
-        toolTipProps = _ref.toolTipProps;
+        toolTipProps = _ref.toolTipProps,
+        hideTips = _ref.hideTips;
 
     var _useState = React.useState(false),
         _useState2 = _slicedToArray(_useState, 2),
@@ -46734,10 +46783,7 @@
       setPopupVisible(false);
     };
 
-    return /* @__PURE__ */React__default["default"].createElement(Tooltip$1, _objectSpread$c({
-      visible: popupVisible,
-      placement: "top"
-    }, toolTipProps), /* @__PURE__ */React__default["default"].createElement("div", {
+    var handleNode = /* @__PURE__ */React__default["default"].createElement("div", {
       style: style,
       className: "".concat(classPrefix, "-slider__button-wrapper"),
       onMouseDown: function onMouseDown(e) {
@@ -46751,7 +46797,11 @@
       }
     }, /* @__PURE__ */React__default["default"].createElement("div", {
       className: classNames$1("".concat(classPrefix, "-slider__button"), _defineProperty$2({}, "".concat(classPrefix, "-slider__button--dragging"), isDragging))
-    })));
+    }));
+    return hideTips ? handleNode : /* @__PURE__ */React__default["default"].createElement(Tooltip$1, _objectSpread$c({
+      visible: popupVisible,
+      placement: "top"
+    }, toolTipProps), handleNode);
   };
 
   function accAdd(arg1, arg2) {
@@ -46956,6 +47006,7 @@
     };
 
     var onSliderChange = function onSliderChange(event, nodeIndex) {
+      if (disabled) return;
       var clientKey = isVertical ? "clientY" : "clientX";
       var sliderPositionInfo = sliderRef.current.getBoundingClientRect();
       var sliderOffset = sliderPositionInfo[startDirection];
@@ -46970,13 +47021,17 @@
 
     var createHandleButton = function createHandleButton(nodeIndex, style2) {
       var currentValue = renderValue[nodeIndex];
-      var tipLabel = typeof label === "string" ? label.replace(/\$\{value\}/g, currentValue.toString()) : label;
-      if (tipLabel === true || !tipLabel) tipLabel = currentValue;
+      var tipLabel = currentValue;
+      if (isFunction_1(label)) tipLabel = label({
+        value: currentValue,
+        position: nodeIndex === LEFT_NODE ? "start" : "end"
+      });
+      if (isString_1(label)) tipLabel = label.replace(/\$\{value\}/g, currentValue.toString());
       return /* @__PURE__ */React__default["default"].createElement(SliderHandleButton, {
         toolTipProps: _objectSpread$b({
-          disabled: label === false,
           content: tipLabel
         }, tooltipProps),
+        hideTips: label === false,
         classPrefix: classPrefix,
         style: style2,
         onChange: function onChange(e) {
@@ -47089,7 +47144,7 @@
         setVisible(false);
       }
 
-      setValue(value2, "checked", node.getModel());
+      setValue(value2, "check", node.getModel());
     }
   }
   function valueChangeEffect(node, cascaderContext) {
@@ -47138,7 +47193,7 @@
       setFilterActive(false);
     }
 
-    setValue(checked, "checked", node.getModel());
+    setValue(checked, "check", node.getModel());
   }
 
   function getLabelIsEllipsis(node, size) {
@@ -47518,7 +47573,7 @@
         setValue = cascaderContext.setValue;
     if (disabled) return;
     var checked = node.setChecked(!node.isChecked());
-    setValue(checked, "unchecked", node.getModel());
+    setValue(checked, "uncheck", node.getModel());
 
     if (isFunction_1(onRemove)) {
       onRemove({
@@ -50582,6 +50637,15 @@
   var TIME_FORMAT = "HH:mm:ss";
 
   var DatePicker$1 = function DatePicker(props) {
+    var _useLocaleReceiver = useLocaleReceiver("datePicker"),
+        _useLocaleReceiver2 = _slicedToArray(_useLocaleReceiver, 2),
+        local = _useLocaleReceiver2[0],
+        t = _useLocaleReceiver2[1];
+
+    var selectTimeText = t(local.selectTime);
+    var selectDateText = t(local.selectDate);
+    var confirmText = t(local.confirm);
+    var rangeSeparatorText = t(local.rangeSeparator);
     var className = props.className,
         style = props.style,
         allowInput = props.allowInput,
@@ -50589,32 +50653,26 @@
         disabled = props.disabled,
         disableDate = props.disableDate,
         enableTimePicker = props.enableTimePicker,
-        format = props.format,
+        _props$format = props.format,
+        format = _props$format === void 0 ? "YYYY-MM-DD" : _props$format,
         inputProps = props.inputProps,
-        mode = props.mode,
+        _props$mode = props.mode,
+        mode = _props$mode === void 0 ? "month" : _props$mode,
         popupProps = props.popupProps,
         prefixIcon = props.prefixIcon,
         presets = props.presets,
         range = props.range,
-        size = props.size,
+        _props$size = props.size,
+        size = _props$size === void 0 ? "medium" : _props$size,
         suffixIcon = props.suffixIcon,
         value = props.value,
         defaultValue = props.defaultValue,
         firstDayOfWeek = props.firstDayOfWeek,
+        _props$placeholder = props.placeholder,
+        placeholder = _props$placeholder === void 0 ? t(local.placeholder[mode]) : _props$placeholder,
         onChange = props.onChange,
         onPick = props.onPick;
 
-    var _useLocaleReceiver = useLocaleReceiver("datePicker"),
-        _useLocaleReceiver2 = _slicedToArray(_useLocaleReceiver, 2),
-        local = _useLocaleReceiver2[0],
-        t = _useLocaleReceiver2[1];
-
-    var selectTimeText = t(local.selectTime);
-    var selectDateText = t(local.selectDate);
-    var confirmText = t(local.confirm);
-    var rangeSeparatorText = t(local.rangeSeparator);
-    var placeholder = t(local.placeholder[mode]);
-
     var _useConfig = useConfig$1(),
         classPrefix = _useConfig.classPrefix;
 
@@ -51058,20 +51116,104 @@
   };
 
   DatePicker$1.displayName = "DatePicker";
-  DatePicker$1.defaultProps = {
-    format: "YYYY-MM-DD",
-    mode: "month",
-    placeholder: "\u8BF7\u9009\u62E9",
-    size: "medium"
-  };
 
   var DatePicker = DatePicker$1;
 
+  var CARD_SCALE = 210 / 332;
+  var itemWidth = 0.415;
+
+  var disposeIndex = function disposeIndex(index, currentIndex, childrenLength) {
+    if (currentIndex === 0 && index === childrenLength - 1) {
+      return -1;
+    }
+
+    if (currentIndex === childrenLength - 1 && index === 0) {
+      return childrenLength;
+    }
+
+    if (index < currentIndex - 1 && currentIndex - index >= childrenLength / 2) {
+      return childrenLength + 1;
+    }
+
+    if (index > currentIndex + 1 && index - currentIndex >= childrenLength / 2) {
+      return -2;
+    }
+
+    return index;
+  };
+
+  var calculateTranslate = function calculateTranslate(index, currentIndex, parentWidth, inStage) {
+    if (inStage) {
+      return parentWidth * ((index - currentIndex) * (1 - itemWidth * CARD_SCALE) - itemWidth + 1) / 2;
+    }
+
+    if (index < currentIndex) {
+      return -itemWidth * (1 + CARD_SCALE) * parentWidth / 2;
+    }
+
+    return (2 + itemWidth * (CARD_SCALE - 1)) * parentWidth / 2;
+  };
+
+  var getZindex = function getZindex(isActivity, inStage) {
+    if (isActivity) {
+      return 2;
+    }
+
+    if (inStage) {
+      return 1;
+    }
+
+    return 0;
+  };
+
   var SwiperItem = function SwiperItem(props) {
+    var _classnames;
+
     var children = props.children,
-        className = props.className;
+        currentIndex = props.currentIndex,
+        index = props.index,
+        animation = props.animation,
+        _props$duration = props.duration,
+        duration = _props$duration === void 0 ? 300 : _props$duration,
+        needAnimation = props.needAnimation,
+        _props$type = props.type,
+        type = _props$type === void 0 ? "default" : _props$type,
+        childrenLength = props.childrenLength,
+        getWrapAttribute = props.getWrapAttribute;
+
+    var _useConfig = useConfig$1(),
+        classPrefix = _useConfig.classPrefix;
+
+    var getSwiperItemStyle = function getSwiperItemStyle() {
+      if (animation === "fade") {
+        return {
+          opacity: currentIndex === index ? 1 : 0,
+          transition: needAnimation ? "opacity ".concat(duration / 1e3, "s") : ""
+        };
+      }
+
+      if (type === "card") {
+        var wrapWidth = getWrapAttribute("offsetWidth");
+        var translateIndex = index !== currentIndex && childrenLength > 2 ? disposeIndex(index, currentIndex, childrenLength) : index;
+        var inStage = Math.round(Math.abs(translateIndex - currentIndex)) <= 1;
+        var translate = calculateTranslate(translateIndex, currentIndex, wrapWidth, inStage).toFixed(2);
+        var isActivity = translateIndex === currentIndex;
+        var zIndex = getZindex(isActivity, inStage);
+        return {
+          msTransform: "translateX(".concat(translate, "px) scale(").concat(isActivity ? 1 : CARD_SCALE, ")"),
+          WebkitTransform: "translateX(".concat(translate, "px) scale(").concat(isActivity ? 1 : CARD_SCALE, ")"),
+          transform: "translateX(".concat(translate, "px) scale(").concat(isActivity ? 1 : CARD_SCALE, ")"),
+          transition: "transform ".concat(duration / 1e3, "s ease"),
+          zIndex: zIndex
+        };
+      }
+
+      return {};
+    };
+
     return /* @__PURE__ */React__default["default"].createElement("div", {
-      className: className
+      className: classNames$1("".concat(classPrefix, "-swiper__container__item"), (_classnames = {}, _defineProperty$2(_classnames, "".concat(classPrefix, "-swiper__card"), type === "card"), _defineProperty$2(_classnames, "".concat(classPrefix, "-is-active"), type === "card" && index === currentIndex), _defineProperty$2(_classnames, "".concat(classPrefix, "-swiper__fade"), animation === "fade"), _classnames)),
+      style: getSwiperItemStyle()
     }, children);
   };
 
@@ -51081,10 +51223,22 @@
 
   function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+  var defaultNavigation = {
+    placement: "inside",
+    showSlideBtn: "always",
+    size: "medium",
+    type: "bars"
+  };
+
   var Swiper$1 = function Swiper(props) {
-    var _props$autoplay = props.autoplay,
+    var _classnames4, _classnames5;
+
+    var _props$animation = props.animation,
+        animation = _props$animation === void 0 ? "slide" : _props$animation,
+        _props$autoplay = props.autoplay,
         autoplay = _props$autoplay === void 0 ? true : _props$autoplay,
-        current = props.current,
+        _props$current = props.current,
+        current = _props$current === void 0 ? 0 : _props$current,
         _props$defaultCurrent = props.defaultCurrent,
         defaultCurrent = _props$defaultCurrent === void 0 ? 0 : _props$defaultCurrent,
         _props$direction = props.direction,
@@ -51093,27 +51247,59 @@
         duration = _props$duration === void 0 ? 300 : _props$duration,
         _props$interval = props.interval,
         interval = _props$interval === void 0 ? 5e3 : _props$interval,
+        _props$trigger = props.trigger,
+        trigger = _props$trigger === void 0 ? "hover" : _props$trigger,
+        height = props.height,
+        _props$loop = props.loop,
+        loop = _props$loop === void 0 ? true : _props$loop,
+        _props$stopOnHover = props.stopOnHover,
+        stopOnHover = _props$stopOnHover === void 0 ? true : _props$stopOnHover,
         _props$onChange = props.onChange,
         onChange = _props$onChange === void 0 ? noop$1 : _props$onChange,
         className = props.className,
-        children = props.children;
+        children = props.children,
+        navigation = props.navigation,
+        _props$type = props.type,
+        type = _props$type === void 0 ? "default" : _props$type;
 
     var _useConfig = useConfig$1(),
         classPrefix = _useConfig.classPrefix;
 
+    var navigationConfig = defaultNavigation;
+    var navigationNode = null;
+
+    if ( /*#__PURE__*/React.isValidElement(navigation)) {
+      navigationNode = navigation;
+    } else {
+      navigationConfig = _objectSpread$4(_objectSpread$4({}, defaultNavigation), navigation);
+    }
+
     var _useState = React.useState(defaultCurrent),
         _useState2 = _slicedToArray(_useState, 2),
         currentIndex = _useState2[0],
         setCurrentIndex = _useState2[1];
 
-    var _useState3 = React.useState(true),
+    var _useState3 = React.useState(false),
         _useState4 = _slicedToArray(_useState3, 2),
-        animation = _useState4[0],
-        setAnimation = _useState4[1];
+        needAnimation = _useState4[0],
+        setNeedAnimation = _useState4[1];
+
+    var _useState5 = React.useState(navigationConfig.showSlideBtn === "always"),
+        _useState6 = _slicedToArray(_useState5, 2),
+        arrowShow = _useState6[0],
+        setArrowShow = _useState6[1];
 
     var swiperTimer = React.useRef(null);
+    var swiperAnimationTimer = React.useRef(null);
     var isHovering = React.useRef(false);
-    var wrapperRef = React.useRef(null);
+    var swiperWrap = React.useRef(null);
+
+    var getWrapAttribute = function getWrapAttribute(attr) {
+      var _swiperWrap$current, _swiperWrap$current$p;
+
+      return (_swiperWrap$current = swiperWrap.current) === null || _swiperWrap$current === void 0 ? void 0 : (_swiperWrap$current$p = _swiperWrap$current.parentNode) === null || _swiperWrap$current$p === void 0 ? void 0 : _swiperWrap$current$p[attr];
+    };
+
     var childrenList = React.useMemo(function () {
       return React__default["default"].Children.toArray(children).filter(function (child) {
         return child.type.displayName === SwiperItem.displayName;
@@ -51121,22 +51307,28 @@
     }, [children]);
     var childrenLength = childrenList.length;
     var swiperItemList = childrenList.map(function (child, index) {
-      return /*#__PURE__*/React__default["default"].cloneElement(child, _objectSpread$4({
-        value: index
-      }, child.props));
+      return /*#__PURE__*/React__default["default"].cloneElement(child, _objectSpread$4(_objectSpread$4({
+        key: index,
+        index: index,
+        currentIndex: currentIndex,
+        needAnimation: needAnimation,
+        childrenLength: childrenLength,
+        getWrapAttribute: getWrapAttribute
+      }, props), child.props));
     });
 
-    if (childrenLength > 0) {
+    if (childrenLength > 0 && type === "default") {
       var firstEle = swiperItemList[0];
       swiperItemList.push( /*#__PURE__*/React__default["default"].cloneElement(firstEle, _objectSpread$4(_objectSpread$4({}, firstEle.props), {}, {
-        key: "".concat(firstEle.key, "-cloned")
+        key: childrenLength,
+        index: childrenLength
       })));
     }
 
     var swiperItemLength = swiperItemList.length;
     var swiperTo = React.useCallback(function (index, context) {
       onChange(index % childrenLength, context);
-      setAnimation(true);
+      setNeedAnimation(true);
       setCurrentIndex(index);
     }, [childrenLength, onChange]);
     var setTimer = React.useCallback(function () {
@@ -51154,78 +51346,241 @@
         swiperTimer.current = null;
       }
     }, []);
+    var isEnd = React.useCallback(function () {
+      if (type === "card") {
+        return !loop && currentIndex + 1 >= swiperItemLength;
+      }
+
+      return !loop && currentIndex + 2 >= swiperItemLength;
+    }, [loop, currentIndex, swiperItemLength, type]);
     React.useEffect(function () {
       if (current !== void 0) {
         swiperTo(current % childrenLength, {
-          source: ""
+          source: "autoplay"
         });
       }
     }, [current, childrenLength, swiperTo]);
     React.useEffect(function () {
-      if (!isHovering.current) {
-        clearTimer();
-        setTimer();
+      if (currentIndex + 1 > swiperItemLength && type === "card") {
+        return setCurrentIndex(0);
       }
-    }, [clearTimer, setTimer]);
-    React.useEffect(function () {
-      setTimeout(function () {
-        setAnimation(false);
 
-        if (currentIndex + 1 >= swiperItemLength) {
+      if (swiperAnimationTimer.current) {
+        clearTimeout(swiperAnimationTimer.current);
+        swiperAnimationTimer.current = null;
+      }
+
+      swiperAnimationTimer.current = setTimeout(function () {
+        setNeedAnimation(false);
+
+        if (isEnd()) {
+          clearTimer();
+        }
+
+        if (currentIndex + 1 >= swiperItemLength && type !== "card") {
           setCurrentIndex(0);
         }
       }, duration + 50);
-    }, [currentIndex, swiperItemLength, duration, direction]);
+    }, [currentIndex, swiperItemLength, duration, type, clearTimer, isEnd]);
+    React.useEffect(function () {
+      if (!isHovering.current || !stopOnHover) {
+        clearTimer();
+        setTimer();
+      }
+    }, [setTimer, clearTimer, stopOnHover]);
 
     var onMouseEnter = function onMouseEnter() {
       isHovering.current = true;
-      clearTimer();
+
+      if (stopOnHover) {
+        clearTimer();
+      }
+
+      if (navigationConfig.showSlideBtn === "hover") {
+        setArrowShow(true);
+      }
     };
 
     var onMouseLeave = function onMouseLeave() {
       isHovering.current = false;
-      setTimer();
+
+      if (!isEnd()) {
+        setTimer();
+      }
+
+      if (navigationConfig.showSlideBtn === "hover") {
+        setArrowShow(false);
+      }
     };
 
-    var wrapperStyle = {};
+    var navMouseAction = function navMouseAction(action, index) {
+      if (action === "enter"
+      /* Enter */
+      && trigger === "hover") {
+        swiperTo(index, {
+          source: "hover"
+        });
+      }
 
-    if (direction === "vertical") {
-      wrapperStyle = {
-        height: "".concat(swiperItemLength * 100, "%"),
-        top: "-".concat(currentIndex * 100, "%"),
-        transition: animation ? "top ".concat(duration / 1e3, "s") : ""
-      };
-    } else {
-      wrapperStyle = {
-        width: "".concat(swiperItemLength * 100, "%"),
-        left: "-".concat(currentIndex * 100, "%"),
-        transition: animation ? "left ".concat(duration / 1e3, "s") : ""
-      };
-    }
+      if (action === "click"
+      /* Click */
+      && trigger === "click") {
+        swiperTo(index, {
+          source: "click"
+        });
+      }
+    };
+
+    var arrowClick = function arrowClick(direction2) {
+      if (needAnimation) {
+        return false;
+      }
+
+      if (direction2 === "right"
+      /* Right */
+      ) {
+        if (type === "card") {
+          return swiperTo(currentIndex + 1 >= swiperItemLength ? 0 : currentIndex + 1, {
+            source: "click"
+          });
+        }
+
+        return swiperTo(currentIndex + 1, {
+          source: "click"
+        });
+      }
+
+      if (direction2 === "left"
+      /* Left */
+      ) {
+        if (currentIndex - 1 < 0) {
+          return swiperTo(childrenLength - 1, {
+            source: "click"
+          });
+        }
+
+        return swiperTo(currentIndex - 1, {
+          source: "click"
+        });
+      }
+    };
+
+    var createArrow = function createArrow(type2) {
+      if (!arrowShow) {
+        return "";
+      }
+
+      if (navigationConfig.type === "fraction" && type2 === "default"
+      /* Default */
+      ) {
+        return "";
+      }
+
+      var fractionIndex = currentIndex + 1 > childrenLength ? 1 : currentIndex + 1;
+      return /* @__PURE__ */React__default["default"].createElement("div", {
+        className: classNames$1("".concat(classPrefix, "-swiper__arrow"), _defineProperty$2({}, "".concat(classPrefix, "-swiper__arrow--default"), type2 === "default"))
+      }, /* @__PURE__ */React__default["default"].createElement("div", {
+        className: "".concat(classPrefix, "-swiper__arrow-left"),
+        onClick: function onClick() {
+          return arrowClick("left"
+          /* Left */
+          );
+        }
+      }, /* @__PURE__ */React__default["default"].createElement(ChevronLeftIcon, null)), type2 === "fraction"
+      /* Fraction */
+      ? /* @__PURE__ */React__default["default"].createElement("div", {
+        className: "".concat(classPrefix, "-swiper__navigation-text-fraction")
+      }, fractionIndex, "/", childrenLength) : "", /* @__PURE__ */React__default["default"].createElement("div", {
+        className: "".concat(classPrefix, "-swiper__arrow-right"),
+        onClick: function onClick() {
+          return arrowClick("right"
+          /* Right */
+          );
+        }
+      }, /* @__PURE__ */React__default["default"].createElement(ChevronRightIcon, null)));
+    };
+
+    var createNavigation = function createNavigation() {
+      if (navigationConfig.type === "fraction") {
+        return /* @__PURE__ */React__default["default"].createElement("div", {
+          className: classNames$1("".concat(classPrefix, "-swiper__navigation"), "".concat(classPrefix, "-swiper__navigation--fraction"))
+        }, createArrow("fraction"
+        /* Fraction */
+        ));
+      }
+
+      return navigationNode ? /* @__PURE__ */React__default["default"].createElement(React__default["default"].Fragment, null, navigationNode) : /* @__PURE__ */React__default["default"].createElement("ul", {
+        className: classNames$1("".concat(classPrefix, "-swiper__navigation"), _defineProperty$2({}, "".concat(classPrefix, "-swiper__navigation-bars"), navigationConfig.type === "bars"))
+      }, childrenList.map(function (_, i) {
+        return /* @__PURE__ */React__default["default"].createElement("li", {
+          key: i,
+          className: classNames$1("".concat(classPrefix, "-swiper__navigation-item"), _defineProperty$2({}, "".concat(classPrefix, "-is-active"), i === currentIndex % childrenLength)),
+          onClick: function onClick() {
+            return navMouseAction("click"
+            /* Click */
+            , i);
+          },
+          onMouseEnter: function onMouseEnter() {
+            return navMouseAction("enter"
+            /* Enter */
+            , i);
+          },
+          onMouseLeave: function onMouseLeave() {
+            return navMouseAction("leave"
+            /* Leave */
+            , i);
+          }
+        }, /* @__PURE__ */React__default["default"].createElement("span", null));
+      }));
+    };
+
+    var getWrapperStyle = function getWrapperStyle() {
+      var offsetHeight = height ? "".concat(height, "px") : "".concat(getWrapAttribute("offsetHeight"), "px");
+
+      if (type === "card" || animation === "fade") {
+        return {
+          height: offsetHeight
+        };
+      }
+
+      if (animation === "slide") {
+        if (direction === "vertical") {
+          return {
+            height: offsetHeight,
+            msTransform: "translate3d(0, -".concat(currentIndex * 100, "%, 0px)"),
+            WebkitTransform: "translate3d(0, -".concat(currentIndex * 100, "%, 0px)"),
+            transform: "translate3d(0, -".concat(currentIndex * 100, "%, 0px)"),
+            transition: needAnimation ? "transform ".concat(duration / 1e3, "s ease") : ""
+          };
+        }
+
+        return {
+          msTransform: "translate3d(-".concat(currentIndex * 100, "%, 0px, 0px)"),
+          WebkitTransform: "translate3d(-".concat(currentIndex * 100, "%, 0px, 0px)"),
+          transform: "translate3d(-".concat(currentIndex * 100, "%, 0px, 0px)"),
+          transition: needAnimation ? "transform ".concat(duration / 1e3, "s ease") : ""
+        };
+      }
+    };
 
     return /* @__PURE__ */React__default["default"].createElement("div", {
       className: classNames$1("".concat(classPrefix, "-swiper"), className),
       onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave
+      onMouseLeave: onMouseLeave,
+      ref: swiperWrap
     }, /* @__PURE__ */React__default["default"].createElement("div", {
-      className: "".concat(classPrefix, "-swiper__content")
+      className: classNames$1("".concat(classPrefix, "-swiper__wrap"), (_classnames4 = {}, _defineProperty$2(_classnames4, "".concat(classPrefix, "-swiper--inside"), navigationConfig.placement === "inside"), _defineProperty$2(_classnames4, "".concat(classPrefix, "-swiper--outside"), navigationConfig.placement === "outside"), _defineProperty$2(_classnames4, "".concat(classPrefix, "-swiper--vertical"), direction === "vertical"), _defineProperty$2(_classnames4, "".concat(classPrefix, "-swiper--large"), navigationConfig.size === "large"), _defineProperty$2(_classnames4, "".concat(classPrefix, "-swiper--small"), navigationConfig.size === "small"), _classnames4))
     }, /* @__PURE__ */React__default["default"].createElement("div", {
-      ref: wrapperRef,
-      className: "".concat(classPrefix, "-swiper__swiper-wrap--").concat(direction),
-      style: wrapperStyle
-    }, swiperItemList)), /* @__PURE__ */React__default["default"].createElement("ul", {
-      className: "".concat(classPrefix, "-swiper__trigger-wrap")
-    }, childrenList.map(function (_, i) {
-      return /* @__PURE__ */React__default["default"].createElement("li", {
-        key: i,
-        className: i === currentIndex % childrenLength ? "".concat(classPrefix, "-swiper__trigger--active") : "",
-        onClick: function onClick() {
-          return swiperTo(i, {
-            source: "touch"
-          });
-        }
-      });
-    })));
+      className: classNames$1("".concat(classPrefix, "-swiper__content"), (_classnames5 = {}, _defineProperty$2(_classnames5, "".concat(classPrefix, "-swiper-fade"), animation === "fade"), _defineProperty$2(_classnames5, "".concat(classPrefix, "-swiper-card"), type === "card"), _classnames5)),
+      style: {
+        height: ""
+      }
+    }, /* @__PURE__ */React__default["default"].createElement("div", {
+      className: "".concat(classPrefix, "-swiper__container"),
+      style: getWrapperStyle()
+    }, swiperItemList)), createNavigation(), createArrow("default"
+    /* Default */
+    )));
   };
 
   Swiper$1.SwiperItem = SwiperItem;