@douyinfe/semi-ui 2.28.0 → 2.29.0-beta.0

package/dist/umd/semi-ui.js

@@ -20511,7 +20511,11 @@ class tooltip_Tooltip extends baseComponent_BaseComponent {
     Object(warning["a" /* default */])(this.props.mouseLeaveDelay < this.props.mouseEnterDelay, "[Semi Tooltip] 'mouseLeaveDelay' cannot be less than 'mouseEnterDelay', which may cause the dropdown layer to not be hidden.");
 
     if (prevProps.visible !== this.props.visible) {
-      this.props.visible ? this.foundation.delayShow() : this.foundation.delayHide();
+      if (['hover', 'focus'].includes(this.props.trigger)) {
+        this.props.visible ? this.foundation.delayShow() : this.foundation.delayHide();
+      } else {
+        this.props.visible ? this.foundation.show() : this.foundation.hide();
+      }
     }
 
     if (!isEqual_default()(prevProps.rePosKey, this.props.rePosKey)) {
@@ -21328,11 +21332,10 @@ const local = {
   code: 'zh-CN',
   dateFnsLocale: zh_CN,
   Pagination: {
-    item: '条',
-    page: '页',
-    pageSize: '条/页',
-    total: '共',
-    jumpTo: '跳至'
+    pageSize: '${pageSize} 条/页',
+    total: '共 ${total} 页',
+    jumpTo: '跳至',
+    page: '页'
   },
   Modal: {
     confirm: '确定',
@@ -52511,6 +52514,8 @@ function InsetTimeInput(props) {
   });
 }
 // CONCATENATED MODULE: ./datePicker/dateInput.tsx
+
+
 var dateInput_rest = undefined && undefined.__rest || function (s, e) {
   var t = {};
 
@@ -52785,7 +52790,8 @@ class dateInput_DateInput extends baseComponent_BaseComponent {
       prefixCls,
       rangeInputStartRef,
       rangeInputEndRef,
-      density
+      density,
+      insetInput
     } = this.props;
 
     const _isRangeType = type.includes('Range');
@@ -52794,6 +52800,14 @@ class dateInput_DateInput extends baseComponent_BaseComponent {
       value,
       insetInputValue
     });
+
+    const {
+      dateStart,
+      dateEnd,
+      timeStart,
+      timeEnd
+    } = get_default()(insetInput, 'placeholder', {});
+
     const {
       datePlaceholder,
       timePlaceholder
@@ -52806,14 +52820,14 @@ class dateInput_DateInput extends baseComponent_BaseComponent {
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(InsetDateInput, {
       forwardRef: rangeInputStartRef,
       insetInputValue: newInsetInputValue,
-      placeholder: datePlaceholder,
+      placeholder: dateStart !== null && dateStart !== void 0 ? dateStart : datePlaceholder,
       valuePath: 'monthLeft.dateInput',
       onChange: this.handleInsetInputChange,
       onFocus: e => handleInsetDateFocus(e, 'rangeStart')
     }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(InsetTimeInput, {
       disabled: !newInsetInputValue.monthLeft.dateInput,
       insetInputValue: newInsetInputValue,
-      placeholder: timePlaceholder,
+      placeholder: timeStart !== null && timeStart !== void 0 ? timeStart : timePlaceholder,
       type: type,
       valuePath: 'monthLeft.timeInput',
       onChange: this.handleInsetInputChange,
@@ -52823,14 +52837,14 @@ class dateInput_DateInput extends baseComponent_BaseComponent {
     }, density === 'compact' ? null : '-'), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(InsetDateInput, {
       forwardRef: rangeInputEndRef,
       insetInputValue: newInsetInputValue,
-      placeholder: datePlaceholder,
+      placeholder: dateEnd !== null && dateEnd !== void 0 ? dateEnd : datePlaceholder,
       valuePath: 'monthRight.dateInput',
       onChange: this.handleInsetInputChange,
       onFocus: e => handleInsetDateFocus(e, 'rangeEnd')
     }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(InsetTimeInput, {
       disabled: !newInsetInputValue.monthRight.dateInput,
       insetInputValue: newInsetInputValue,
-      placeholder: timePlaceholder,
+      placeholder: timeEnd !== null && timeEnd !== void 0 ? timeEnd : timePlaceholder,
       type: type,
       valuePath: 'monthRight.timeInput',
       onChange: this.handleInsetInputChange,
@@ -52956,7 +52970,7 @@ dateInput_DateInput.propTypes = {
   rangeInputStartRef: prop_types_default.a.object,
   rangeInputEndRef: prop_types_default.a.object,
   rangeSeparator: prop_types_default.a.string,
-  insetInput: prop_types_default.a.bool,
+  insetInput: prop_types_default.a.oneOfType([prop_types_default.a.bool, prop_types_default.a.object]),
   insetInputValue: prop_types_default.a.object,
   defaultPickerValue: prop_types_default.a.oneOfType([prop_types_default.a.string, prop_types_default.a.number, prop_types_default.a.object, prop_types_default.a.array])
 };
@@ -53482,7 +53496,7 @@ class monthsGridFoundation_MonthsGridFoundation extends foundation {
       rangeEnd
     } = this.getStates();
 
-    if (values && values.length) {
+    if (values && (values === null || values === void 0 ? void 0 : values.length)) {
       switch (type) {
         case 'date':
           this._initDatePickerFromValue(values, refreshPicker);
@@ -53594,8 +53608,25 @@ class monthsGridFoundation_MonthsGridFoundation extends foundation {
       pickerDate: values[1] || monthRight.pickerDate
     }));
 
-    this.handleShowDateAndTime(datePicker_constants_strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
-    this.handleShowDateAndTime(datePicker_constants_strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate); // init range
+    const validValue = Array.isArray(values) && values.filter(item => item).length > 1;
+
+    if (validValue) {
+      this.handleShowDateAndTime(datePicker_constants_strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
+      this.handleShowDateAndTime(datePicker_constants_strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate);
+    } else {
+      const selectedDate = values.find(item => item); // 如果日期不完整且输入日期不在面板范围内，则更新面板
+
+      if (selectedDate) {
+        const notLeftPanelDate = Math.abs(differenceInCalendarMonths(selectedDate, monthLeft.pickerDate)) > 0;
+        const notRightPanelDate = Math.abs(differenceInCalendarMonths(selectedDate, monthRight.pickerDate)) > 0;
+
+        if (notLeftPanelDate && notRightPanelDate) {
+          this.handleShowDateAndTime(datePicker_constants_strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
+          this.handleShowDateAndTime(datePicker_constants_strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate);
+        }
+      }
+    } // init range
+
 
     const formatToken = withTime ? datePicker_constants_strings.FORMAT_DATE_TIME : datePicker_constants_strings.FORMAT_FULL_DATE;
     let rangeStart = values[0] && format_format(values[0], formatToken);
@@ -57833,7 +57864,7 @@ class monthsGrid_MonthsGrid extends baseComponent_BaseComponent {
 }
 monthsGrid_MonthsGrid.propTypes = {
   type: prop_types_default.a.oneOf(datePicker_constants_strings.TYPE_SET),
-  defaultValue: prop_types_default.a.oneOfType([prop_types_default.a.string, prop_types_default.a.number, prop_types_default.a.object, prop_types_default.a.array]),
+  defaultValue: prop_types_default.a.array,
   defaultPickerValue: prop_types_default.a.oneOfType([prop_types_default.a.string, prop_types_default.a.number, prop_types_default.a.object, prop_types_default.a.array]),
   multiple: prop_types_default.a.bool,
   max: prop_types_default.a.number,
@@ -57973,7 +58004,7 @@ quickControl_QuickControl.propTypes = {
   presetPosition: prop_types_default.a.oneOf(datePicker_constants_strings.PRESET_POSITION_SET),
   onPresetClick: prop_types_default.a.func,
   type: prop_types_default.a.string,
-  insetInput: prop_types_default.a.bool
+  insetInput: prop_types_default.a.oneOfType([prop_types_default.a.bool, prop_types_default.a.object])
 };
 quickControl_QuickControl.defaultProps = {
   presets: [],
@@ -58638,7 +58669,7 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
       insetInputValue,
       value
     } = this.state;
-    const insetInputProps = {
+    const props = {
       dateFnsLocale,
       format,
       insetInputValue,
@@ -58653,8 +58684,8 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
       density,
       defaultPickerValue
     };
-    return insetInput ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(dateInput_DateInput, Object.assign({}, insetInputProps, {
-      insetInput: true
+    return insetInput ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(dateInput_DateInput, Object.assign({}, props, {
+      insetInput: insetInput
     })) : null;
   }
 
@@ -58719,7 +58750,7 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
       format,
       multiple,
       validateStatus,
-      inputReadOnly: inputReadOnly || insetInput,
+      inputReadOnly: inputReadOnly || Boolean(insetInput),
       // onClick: this.handleOpenPanel,
       onBlur: this.handleInputBlur,
       onFocus: this.handleInputFocus,
@@ -67234,6 +67265,7 @@ class resizeObserver_ReactResizeObserver extends baseComponent_BaseComponent {
     if (this.observer) {
       this.observer.disconnect();
       this.observer = null;
+      this.element = null;
     }
   }
 
@@ -67241,6 +67273,10 @@ class resizeObserver_ReactResizeObserver extends baseComponent_BaseComponent {
     let force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     const element = this.getElement();
 
+    if (!this.observer) {
+      this.observer = new ResizeObserver_es["a" /* default */](this.props.onResize);
+    }
+
     if (!(element && element instanceof Element)) {
       // stop everything if not defined
       this.observer.disconnect();
@@ -73830,19 +73866,20 @@ class pagination_Pagination extends baseComponent_BaseComponent {
       return null;
     }
 
-    const pageSizeText = locale.pageSize;
     const newPageSizeOpts = this.foundation.pageSizeInOpts();
+    const pageSizeToken = locale.pageSize; // Display pageSize in a specific language format order
+
     const options = newPageSizeOpts.map(size => /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(pagination_Option, {
       value: size,
       key: size
-    }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", null, `${size} `, pageSizeText)));
+    }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", null, pageSizeToken.replace('${pageSize}', size.toString()))));
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
       className: switchCls
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(select_0, {
       "aria-label": "Page size selector",
       onChange: newPageSize => this.foundation.changePageSize(newPageSize),
       value: pageSize,
-      key: pageSizeText,
+      key: pageSize,
       position: popoverPosition || 'bottomRight',
       clickToHide: true,
       dropdownClassName: `${pagination_prefixCls}-select-dropdown`
@@ -74022,12 +74059,14 @@ class pagination_Pagination extends baseComponent_BaseComponent {
       return null;
     }
 
+    const totalNum = Math.ceil(total / pageSize);
+    const totalToken = locale.total.replace('${total}', totalNum.toString());
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("ul", {
       className: paginationCls,
       style: style
     }, showTotal ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
       className: showTotalCls
-    }, locale.total, ` ${Math.ceil(total / pageSize)} `, locale.page) : null, this.renderPrevBtn(), this.renderPageList(), this.renderNextBtn(), this.renderPageSizeSwitch(locale), this.renderQuickJump(locale));
+    }, totalToken) : null, this.renderPrevBtn(), this.renderPageList(), this.renderNextBtn(), this.renderPageSizeSwitch(locale), this.renderQuickJump(locale));
   }
 
   render() {
@@ -78276,10 +78315,6 @@ class slider_Slider extends baseComponent_BaseComponent {
         tipVisible,
         tipChildren
       } = this.foundation.computeHandleVisibleVal(tooltipVisible && isInRenderTree, tipFormatter, range);
-      const transform = {
-        top: 'translateY(-50%)',
-        left: 'translateX(-50%)'
-      };
       const minClass = classnames_default()(slider_constants_cssClasses.HANDLE, {
         [`${slider_constants_cssClasses.HANDLE}-clicked`]: chooseMovePos === 'min' && isDrag
       });
@@ -78312,8 +78347,7 @@ class slider_Slider extends baseComponent_BaseComponent {
         className: minClass,
         style: {
           [stylePos]: `${minPercent * 100}%`,
-          zIndex: chooseMovePos === 'min' && isDrag ? 2 : 1,
-          transform: transform[stylePos]
+          zIndex: chooseMovePos === 'min' && isDrag ? 2 : 1
         },
         onMouseDown: e => {
           this.foundation.onHandleDown(e, 'min');
@@ -78364,8 +78398,7 @@ class slider_Slider extends baseComponent_BaseComponent {
         className: minClass,
         style: {
           [stylePos]: `${minPercent * 100}%`,
-          zIndex: chooseMovePos === 'min' ? 2 : 1,
-          transform: transform[stylePos]
+          zIndex: chooseMovePos === 'min' ? 2 : 1
         },
         onMouseDown: e => {
           this.foundation.onHandleDown(e, 'min');
@@ -78416,8 +78449,7 @@ class slider_Slider extends baseComponent_BaseComponent {
         className: maxClass,
         style: {
           [stylePos]: `${maxPercent * 100}%`,
-          zIndex: chooseMovePos === 'max' ? 2 : 1,
-          transform: transform[stylePos]
+          zIndex: chooseMovePos === 'max' ? 2 : 1
         },
         onMouseDown: e => {
           this.foundation.onHandleDown(e, 'max');
@@ -98251,7 +98283,9 @@ class transfer_Transfer extends baseComponent_BaseComponent {
 
   renderHeader(headerConfig) {
     const {
-      disabled
+      disabled,
+      renderSourceHeader,
+      renderSelectedHeader
     } = this.props;
     const {
       totalContent,
@@ -98265,6 +98299,35 @@ class transfer_Transfer extends baseComponent_BaseComponent {
       [`${transfer_prefixCls}-right-header`]: type === 'right',
       [`${transfer_prefixCls}-left-header`]: type === 'left'
     });
+
+    if (type === 'left' && typeof renderSourceHeader === 'function') {
+      const {
+        num,
+        showButton,
+        allChecked,
+        onAllClick
+      } = headerConfig;
+      return renderSourceHeader({
+        num,
+        showButton,
+        allChecked,
+        onAllClick
+      });
+    }
+
+    if (type === 'right' && typeof renderSelectedHeader === 'function') {
+      const {
+        num,
+        showButton,
+        onAllClick: onClear
+      } = headerConfig;
+      return renderSelectedHeader({
+        num,
+        showButton,
+        onClear
+      });
+    }
+
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
       className: headerCls
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
@@ -98340,7 +98403,9 @@ class transfer_Transfer extends baseComponent_BaseComponent {
       allContent: leftContainesNotInSelected ? locale.selectAll : locale.clearSelectAll,
       onAllClick: () => this.foundation.handleAll(leftContainesNotInSelected),
       type: 'left',
-      showButton: type !== transfer_constants_strings.TYPE_TREE_TO_LIST
+      showButton: type !== transfer_constants_strings.TYPE_TREE_TO_LIST,
+      num: showNumber,
+      allChecked: !leftContainesNotInSelected
     };
     const inputCom = this.renderFilter(locale);
     const headerCom = this.renderHeader(headerConfig);
@@ -98588,7 +98653,8 @@ class transfer_Transfer extends baseComponent_BaseComponent {
       allContent: locale.clear,
       onAllClick: () => this.foundation.handleClear(),
       type: 'right',
-      showButton: Boolean(selectedData.length)
+      showButton: Boolean(selectedData.length),
+      num: selectedData.length
     };
     const headerCom = this.renderHeader(headerConfig);
     const emptyCom = this.renderEmpty('right', emptyContent.right ? emptyContent.right : locale.emptyRight);
@@ -100202,9 +100268,11 @@ class group_FormInputGroup extends external_root_React_commonjs2_react_commonjs_
     const _a = this.props,
           {
       children,
-      label
+      label,
+      extraText,
+      extraTextPosition
     } = _a,
-          rest = group_rest(_a, ["children", "label"]);
+          rest = group_rest(_a, ["children", "label", "extraText", "extraTextPosition"]);
 
     const updater = this.context;
     const formProps = updater.getFormProps(['labelPosition', 'labelWidth', 'labelAlign', 'showValidateIcon', 'wrapperCol', 'labelCol']);
@@ -100237,11 +100305,20 @@ class group_FormInputGroup extends external_root_React_commonjs2_react_commonjs_
       showValidateIcon: formProps.showValidateIcon,
       isInInputGroup: true
     });
+    const extraCls = classnames_default()(`${group_prefix}-field-extra`, {
+      [`${group_prefix}-field-extra-string`]: typeof extraText === 'string',
+      [`${group_prefix}-field-extra-middle`]: extraTextPosition === 'middle',
+      [`${group_prefix}-field-extra-bottom`]: extraTextPosition === 'bottom'
+    });
+    const extraContent = extraText ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      className: extraCls,
+      "x-semi-prop": "extraText"
+    }, extraText) : null;
     let content;
 
     switch (true) {
       case !appendCol:
-        content = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Fragment, null, labelContent, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", null, inputGroupContent, groupErrorContent));
+        content = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Fragment, null, labelContent, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", null, extraTextPosition === 'middle' ? extraContent : null, inputGroupContent, extraTextPosition === 'bottom' ? extraContent : null, groupErrorContent));
         break;
 
       case appendCol && labelPosition === 'top':
@@ -100252,13 +100329,13 @@ class group_FormInputGroup extends external_root_React_commonjs2_react_commonjs_
           }
         }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(grid_col, Object.assign({}, labelCol, {
           className: labelColCls
-        }), labelContent)), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(grid_col, Object.assign({}, wrapperCol), inputGroupContent, groupErrorContent));
+        }), labelContent)), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(grid_col, Object.assign({}, wrapperCol), extraTextPosition === 'middle' ? extraContent : null, inputGroupContent, extraTextPosition === 'bottom' ? extraContent : null, groupErrorContent));
         break;
 
       case appendCol && labelPosition !== 'top':
         content = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(grid_col, Object.assign({}, labelCol, {
           className: labelColCls
-        }), labelContent), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(grid_col, Object.assign({}, wrapperCol), inputGroupContent, groupErrorContent));
+        }), labelContent), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(grid_col, Object.assign({}, wrapperCol), extraTextPosition === 'middle' ? extraContent : null, inputGroupContent, extraTextPosition === 'bottom' ? extraContent : null, groupErrorContent));
         break;
 
       default: