@douyinfe/semi-ui 2.31.4 → 2.32.0

package/lib/cjs/datePicker/yearAndMonth.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
+
 var _stubFalse2 = _interopRequireDefault(require("lodash/stubFalse"));
 
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
@@ -23,8 +25,6 @@ var _scrollItem = _interopRequireDefault(require("../scrollList/scrollItem"));
 
 var _index2 = require("@douyinfe/semi-foundation/lib/cjs/datePicker/_utils/index");
 
-var _isNullOrUndefined = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/isNullOrUndefined"));
-
 var _iconButton = _interopRequireDefault(require("../iconButton"));
 
 var _semiIcons = require("@douyinfe/semi-icons");
@@ -44,12 +44,12 @@ class YearAndMonth extends _baseComponent.default {
   constructor(props) {
     super(props);
 
-    this.selectYear = item => {
-      this.foundation.selectYear(item);
+    this.selectYear = (item, panelType) => {
+      this.foundation.selectYear(item, panelType);
     };
 
-    this.selectMonth = item => {
-      this.foundation.selectMonth(item);
+    this.selectMonth = (item, panelType) => {
+      this.foundation.selectMonth(item, panelType);
     };
 
     this.reselect = () => {
@@ -73,8 +73,16 @@ class YearAndMonth extends _baseComponent.default {
       currentYear,
       currentMonth
     } = props;
-    currentYear = currentYear || now.getFullYear();
-    currentMonth = currentMonth || now.getMonth() + 1;
+    const currentLeftYear = currentYear.left || now.getFullYear();
+    const currentLeftMonth = currentMonth.left || now.getMonth() + 1;
+    currentYear = {
+      left: currentLeftYear,
+      right: currentLeftYear
+    };
+    currentMonth = {
+      left: currentLeftMonth,
+      right: currentMonth.right || currentLeftMonth + 1
+    };
     this.state = {
       years: (0, _index2.getYears)().map(year => ({
         value: year,
@@ -102,6 +110,10 @@ class YearAndMonth extends _baseComponent.default {
       setCurrentMonth: currentMonth => this.setState({
         currentMonth
       }),
+      setCurrentYearAndMonth: (currentYear, currentMonth) => this.setState({
+        currentYear,
+        currentMonth
+      }),
       notifySelectYear: year => this.props.onSelect({
         currentMonth: this.state.currentMonth,
         currentYear: year
@@ -110,26 +122,29 @@ class YearAndMonth extends _baseComponent.default {
         currentYear: this.state.currentYear,
         currentMonth: month
       }),
+      notifySelectYearAndMonth: (year, month) => this.props.onSelect({
+        currentYear: year,
+        currentMonth: month
+      }),
       notifyBackToMain: () => this.props.onBackToMain()
     });
   }
 
   static getDerivedStateFromProps(props, state) {
     const willUpdateStates = {};
-    const now = new Date();
 
-    if (!(0, _isNullOrUndefined.default)(props.currentMonth) && props.currentMonth !== state.currentMonth && props.currentMonth !== 0) {
-      willUpdateStates.currentMonth = props.currentMonth || now.getMonth() + 1;
+    if (!(0, _isEqual2.default)(props.currentYear, state.currentYear) && props.currentYear.left !== 0) {
+      willUpdateStates.currentYear = props.currentYear;
     }
 
-    if ((0, _isNullOrUndefined.default)(props.currentYear) && props.currentYear !== state.currentYear && props.currentYear !== 0) {
-      willUpdateStates.currentYear = props.currentYear || now.getFullYear();
+    if (!(0, _isEqual2.default)(props.currentMonth, state.currentMonth) && props.currentMonth.left !== 0) {
+      willUpdateStates.currentMonth = props.currentMonth;
     }
 
     return willUpdateStates;
   }
 
-  renderColYear() {
+  renderColYear(panelType) {
     const {
       years,
       currentYear,
@@ -142,7 +157,22 @@ class YearAndMonth extends _baseComponent.default {
       yearCycled,
       yearAndMonthOpts
     } = this.props;
-    const currentDate = (0, _dateFns.setMonth)(Date.now(), currentMonth - 1);
+    const currentDate = (0, _dateFns.setMonth)(Date.now(), currentMonth[panelType] - 1);
+    const left = _constants2.strings.PANEL_TYPE_LEFT;
+    const right = _constants2.strings.PANEL_TYPE_RIGHT;
+
+    const needDisabled = year => {
+      if (panelType === right && currentYear[left]) {
+        if (currentMonth[left] <= currentMonth[right]) {
+          return currentYear[left] > year;
+        } else {
+          return currentYear[left] >= year;
+        }
+      }
+
+      return false;
+    };
+
     const list = years.map(_ref => {
       let {
         value,
@@ -157,10 +187,11 @@ class YearAndMonth extends _baseComponent.default {
           month: month - 1
         }));
       });
+      const isRightPanelDisabled = needDisabled(year);
       return {
         year,
         value,
-        disabled: isAllMonthDisabled
+        disabled: isAllMonthDisabled || isRightPanelDisabled
       };
     });
 
@@ -176,14 +207,14 @@ class YearAndMonth extends _baseComponent.default {
       cycled: yearCycled,
       list: list,
       transform: transform,
-      selectedIndex: years.findIndex(item => item.value === currentYear),
+      selectedIndex: years.findIndex(item => item.value === currentYear[panelType]),
       type: "year",
-      onSelect: this.selectYear,
+      onSelect: item => this.selectYear(item, panelType),
       mode: "normal"
     }, yearAndMonthOpts));
   }
 
-  renderColMonth() {
+  renderColMonth(panelType) {
     const {
       months,
       currentMonth,
@@ -199,7 +230,9 @@ class YearAndMonth extends _baseComponent.default {
 
     let transform = val => val;
 
-    const currentDate = (0, _dateFns.setYear)(Date.now(), currentYear);
+    const currentDate = (0, _dateFns.setYear)(Date.now(), currentYear[panelType]);
+    const left = _constants2.strings.PANEL_TYPE_LEFT;
+    const right = _constants2.strings.PANEL_TYPE_RIGHT;
 
     if (localeCode === 'zh-CN' || localeCode === 'zh-TW') {
       // Only Chinese needs to add [month] after the selected month
@@ -212,14 +245,15 @@ class YearAndMonth extends _baseComponent.default {
         value,
         month
       } = _ref3;
+      const isRightPanelDisabled = panelType === right && currentMonth[left] && currentYear[left] === currentYear[right] && currentMonth[left] > month;
       return {
         month,
-        disabled: disabledDate((0, _dateFns.setMonth)(currentDate, month - 1)),
+        disabled: disabledDate((0, _dateFns.setMonth)(currentDate, month - 1)) || isRightPanelDisabled,
         value: locale.fullMonths[value] // Actual rendered text
 
       };
     });
-    const selectedIndex = list.findIndex(item => item.month === currentMonth);
+    const selectedIndex = list.findIndex(item => item.month === currentMonth[panelType]);
     return /*#__PURE__*/_react.default.createElement(_scrollItem.default, Object.assign({
       ref: this.monthRef,
       cycled: monthCycled,
@@ -227,11 +261,15 @@ class YearAndMonth extends _baseComponent.default {
       transform: transform,
       selectedIndex: selectedIndex,
       type: "month",
-      onSelect: this.selectMonth,
+      onSelect: item => this.selectMonth(item, panelType),
       mode: 'normal'
     }, yearAndMonthOpts));
   }
 
+  renderPanel(panelType) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.default, null, this.renderColYear(panelType), this.renderColMonth(panelType)));
+  }
+
   render() {
     const {
       locale,
@@ -239,13 +277,27 @@ class YearAndMonth extends _baseComponent.default {
       density,
       presetPosition,
       renderQuickControls,
-      renderDateInput
+      renderDateInput,
+      type
     } = this.props;
-    const prefix = `${prefixCls}-yearmonth-header`; // i18n
+    const prefix = `${prefixCls}-yearmonth-header`;
+    const bodyCls = `${prefixCls}-yearmonth-body`; // i18n
 
     const selectDateText = locale.selectDate;
     const iconSize = density === 'compact' ? 'default' : 'large';
     const buttonSize = density === 'compact' ? 'small' : 'default';
+    const panelTypeLeft = _constants2.strings.PANEL_TYPE_LEFT;
+    const panelTypeRight = _constants2.strings.PANEL_TYPE_RIGHT;
+    let content = null;
+
+    if (type === 'month') {
+      content = this.renderPanel(panelTypeLeft);
+    } else {
+      content = /*#__PURE__*/_react.default.createElement("div", {
+        className: bodyCls
+      }, this.renderPanel(panelTypeLeft), this.renderPanel(panelTypeRight));
+    }
+
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, noBackBtn ? null : /*#__PURE__*/_react.default.createElement("div", {
       className: prefix
     }, /*#__PURE__*/_react.default.createElement(_iconButton.default, {
@@ -260,14 +312,14 @@ class YearAndMonth extends _baseComponent.default {
       style: {
         display: 'flex'
       }
-    }, presetPosition === "left" && renderQuickControls, /*#__PURE__*/_react.default.createElement("div", null, renderDateInput, /*#__PURE__*/_react.default.createElement(_index.default, null, this.renderColYear(), this.renderColMonth())), presetPosition === "right" && renderQuickControls) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderDateInput, /*#__PURE__*/_react.default.createElement(_index.default, null, this.renderColYear(), this.renderColMonth())));
+    }, presetPosition === "left" && type !== 'monthRange' && renderQuickControls, /*#__PURE__*/_react.default.createElement("div", null, renderDateInput, content), presetPosition === "right" && type !== 'monthRange' && renderQuickControls) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderDateInput, content));
   }
 
 }
 
 YearAndMonth.propTypes = {
-  currentYear: _propTypes.default.number,
-  currentMonth: _propTypes.default.number,
+  currentYear: _propTypes.default.object,
+  currentMonth: _propTypes.default.object,
   onSelect: _propTypes.default.func,
   locale: _propTypes.default.object,
   localeCode: _propTypes.default.string,
@@ -278,14 +330,16 @@ YearAndMonth.propTypes = {
   density: _propTypes.default.string,
   presetPosition: _propTypes.default.oneOf(_constants2.strings.PRESET_POSITION_SET),
   renderQuickControls: _propTypes.default.node,
-  renderDateInput: _propTypes.default.node
+  renderDateInput: _propTypes.default.node,
+  type: _propTypes.default.oneOf(_constants2.strings.TYPE_SET)
 };
 YearAndMonth.defaultProps = {
   disabledDate: _stubFalse2.default,
   monthCycled: false,
   yearCycled: false,
   noBackBtn: false,
-  onSelect: _noop2.default
+  onSelect: _noop2.default,
+  type: 'month'
 };
 var _default = YearAndMonth;
 exports.default = _default;

package/lib/cjs/form/baseForm.d.ts

@@ -127,7 +127,7 @@ declare class Form<Values extends Record<string, any> = any> extends BaseCompone
         onDeselect?: (value: string | number | any[] | Record<string, any>, option: Record<string, any>) => void;
         onSelect?: (value: string | number | any[] | Record<string, any>, option: Record<string, any>) => void;
         allowCreate?: boolean;
-        triggerRender?: (props?: any) => React.ReactNode;
+        triggerRender?: (props?: import("../select").TriggerRenderProps) => React.ReactNode;
         onClear?: () => void;
         virtualize?: import("../select").virtualListProps;
         onFocus?: (e: React.FocusEvent<Element, Element>) => void;
@@ -142,7 +142,7 @@ declare class Form<Values extends Record<string, any> = any> extends BaseCompone
     static CheckboxGroup: React.ComponentType<import("utility-types").Subtract<import("../checkbox").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & React.RefAttributes<any>>;
     static Radio: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../radio").RadioProps & import("./interface").RCIncludeType>;
     static RadioGroup: React.ComponentType<import("utility-types").Subtract<import("../radio").RadioGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & React.RefAttributes<any>>;
-    static DatePicker: React.ComponentType<import("utility-types").Subtract<import("../datePicker").DatePickerProps & React.RefAttributes<import("../datePicker/datePicker").default>, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & React.RefAttributes<any>>;
+    static DatePicker: React.ComponentType<import("utility-types").Subtract<import("../datePicker").DatePickerProps & React.RefAttributes<import("../datePicker").BaseDatePicker>, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & React.RefAttributes<any>>;
     static TimePicker: React.ComponentType<import("utility-types").Subtract<import("../timePicker").TimePickerProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & React.RefAttributes<any>>;
     static Switch: React.ComponentType<import("utility-types").Subtract<import("../switch").SwitchProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & React.RefAttributes<any>>;
     static Slider: React.ComponentType<import("utility-types").Subtract<import("../slider").SliderProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & React.RefAttributes<any>>;

package/lib/cjs/form/field.d.ts

@@ -75,7 +75,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     onDeselect?: (value: string | number | any[] | Record<string, any>, option: Record<string, any>) => void;
     onSelect?: (value: string | number | any[] | Record<string, any>, option: Record<string, any>) => void;
     allowCreate?: boolean;
-    triggerRender?: (props?: any) => import("react").ReactNode;
+    triggerRender?: (props?: import("../select/index").TriggerRenderProps) => import("react").ReactNode;
     onClear?: () => void;
     virtualize?: import("../select/index").virtualListProps;
     onFocus?: (e: import("react").FocusEvent<Element, Element>) => void;

package/lib/cjs/locale/interface.d.ts

@@ -31,6 +31,7 @@ export interface Locale {
             dateTime: string;
             dateRange: [string, string];
             dateTimeRange: [string, string];
+            monthRange: [string, string];
         };
         footer: {
             confirm: string;

package/lib/cjs/locale/source/ar.js

@@ -38,7 +38,8 @@ const local = {
       date: 'حدد تاريخ',
       dateTime: 'حدد التاريخ والوقت',
       dateRange: ['تاريخ البدء', 'تاريخ النهاية'],
-      dateTimeRange: ['تاريخ البدء', 'تاريخ النهاية']
+      dateTimeRange: ['تاريخ البدء', 'تاريخ النهاية'],
+      monthRange: ['الشهر الأول', 'الشهر الأخير']
     },
     footer: {
       confirm: 'تؤكد',

package/lib/cjs/locale/source/de.js

@@ -38,7 +38,8 @@ const local = {
       date: 'Datum auswählen',
       dateTime: 'Datum und Uhrzeit auswählen',
       dateRange: ['Startdatum', 'Enddatum'],
-      dateTimeRange: ['Startdatum', 'Enddatum']
+      dateTimeRange: ['Startdatum', 'Enddatum'],
+      monthRange: ['Startmonat', 'Endmonat']
     },
     footer: {
       confirm: 'Bestätigen',

package/lib/cjs/locale/source/en_GB.js

@@ -38,7 +38,8 @@ const local = {
       date: 'Select date',
       dateTime: 'Select date and time',
       dateRange: ['Start date', 'End date'],
-      dateTimeRange: ['Start date', 'End date']
+      dateTimeRange: ['Start date', 'End date'],
+      monthRange: ['Start month', 'End month']
     },
     footer: {
       confirm: 'Confirm',

package/lib/cjs/locale/source/en_US.js

@@ -38,7 +38,8 @@ const local = {
       date: 'Select date',
       dateTime: 'Select date and time',
       dateRange: ['Start date', 'End date'],
-      dateTimeRange: ['Start date', 'End date']
+      dateTimeRange: ['Start date', 'End date'],
+      monthRange: ['Start month', 'End month']
     },
     footer: {
       confirm: 'Confirm',

package/lib/cjs/locale/source/es.js

@@ -42,7 +42,8 @@ const locale = {
       date: 'Seleccionar fecha',
       dateTime: 'Seleccionar hora y fecha',
       dateRange: ['Fecha inicial', 'Fecha final'],
-      dateTimeRange: ['Fecha inicial', 'Fecha final']
+      dateTimeRange: ['Fecha inicial', 'Fecha final'],
+      monthRange: ['Mes inicial', 'Mes final']
     },
     footer: {
       confirm: 'Aceptar',

package/lib/cjs/locale/source/fr.js

@@ -38,7 +38,8 @@ const local = {
       date: 'Sélectionner date',
       dateTime: 'Sélectionner date et temps',
       dateRange: ['Date de début', 'Date de fin'],
-      dateTimeRange: ['Date de début', 'Date de fin']
+      dateTimeRange: ['Date de début', 'Date de fin'],
+      monthRange: ['Mois de début', 'Mois de fin']
     },
     footer: {
       confirm: 'Confirmer',

package/lib/cjs/locale/source/id_ID.js

@@ -38,7 +38,8 @@ const local = {
       date: 'Pilih tanggal',
       dateTime: 'Pilih tanggal dan waktu',
       dateRange: ['Tanggal mulai', 'Tanggal akhir'],
-      dateTimeRange: ['Tanggal mulai', 'Tanggal akhir']
+      dateTimeRange: ['Tanggal mulai', 'Tanggal akhir'],
+      monthRange: ['Bulan pertama', 'Bulan terakhir']
     },
     footer: {
       confirm: 'Konfirmasi',

package/lib/cjs/locale/source/it.js

@@ -38,7 +38,8 @@ const local = {
       date: 'Seleziona data',
       dateTime: 'Seleziona data e ora',
       dateRange: ['Data inizio', 'Data fine'],
-      dateTimeRange: ['Data inizio', 'Data fine']
+      dateTimeRange: ['Data inizio', 'Data fine'],
+      monthRange: ['Mese inizio', 'Mese fine']
     },
     footer: {
       confirm: 'Conferma',

package/lib/cjs/locale/source/ja_JP.js

@@ -38,7 +38,8 @@ const local = {
       date: '日付を選択してください',
       dateTime: '日時を選択してください',
       dateRange: ['開始日', '終了日'],
-      dateTimeRange: ['開始日', '終了日']
+      dateTimeRange: ['開始日', '終了日'],
+      monthRange: ['開始月', '終了月']
     },
     footer: {
       confirm: '確認する',

package/lib/cjs/locale/source/ko_KR.js

@@ -39,7 +39,8 @@ const local = {
       date: '날짜 선택',
       dateTime: '날짜 및 시간 선택',
       dateRange: ['시작 날짜', '종료일'],
-      dateTimeRange: ['시작 날짜', '종료일']
+      dateTimeRange: ['시작 날짜', '종료일'],
+      monthRange: ['시작 월', '종료 월']
     },
     footer: {
       confirm: '확인',

package/lib/cjs/locale/source/ms_MY.js

@@ -38,7 +38,8 @@ const local = {
       date: 'Pilih tarikh',
       dateTime: 'Pilih tarikh dan masa',
       dateRange: ['Tarikh mula', 'Tarikh akhir'],
-      dateTimeRange: ['Tarikh mula', 'Tarikh akhir']
+      dateTimeRange: ['Tarikh mula', 'Tarikh akhir'],
+      monthRange: ['Bulan mula', 'Bulan akhir']
     },
     footer: {
       confirm: 'Sahkan',

package/lib/cjs/locale/source/nl_NL.js

@@ -43,7 +43,8 @@ const local = {
       date: 'Datum selecteren',
       dateTime: 'Datum en tijd selecteren',
       dateRange: ['Begindatum', 'Einddatum'],
-      dateTimeRange: ['Begindatum', 'Einddatum']
+      dateTimeRange: ['Begindatum', 'Einddatum'],
+      monthRange: ['Begindatum', 'Einddatum']
     },
     footer: {
       confirm: 'Bevestigen',

package/lib/cjs/locale/source/pl_PL.js

@@ -43,7 +43,8 @@ const local = {
       date: 'Wybierz datę',
       dateTime: 'Wybierz datę i godzinę',
       dateRange: ['Data rozpoczęcia', 'Data zakończenia'],
-      dateTimeRange: ['Data rozpoczęcia', 'Data zakończenia']
+      dateTimeRange: ['Data rozpoczęcia', 'Data zakończenia'],
+      monthRange: ['Miesiąc rozpoczęcia', 'Miesiąc zakończenia']
     },
     footer: {
       confirm: 'Potwierdź',

package/lib/cjs/locale/source/pt_BR.js

@@ -38,7 +38,8 @@ const local = {
       date: 'Por favor selecione uma data',
       dateTime: 'Selecione a data e hora',
       dateRange: ['Data de início', 'Data de fim'],
-      dateTimeRange: ['Data de início', 'Data de fim']
+      dateTimeRange: ['Data de início', 'Data de fim'],
+      monthRange: ['Mês de início', 'Mês de fim']
     },
     footer: {
       confirm: 'OK',

package/lib/cjs/locale/source/ro.d.ts

@@ -33,6 +33,7 @@ declare const _default: {
             dateTime: string;
             dateRange: string[];
             dateTimeRange: string[];
+            monthRange: string[];
         };
         footer: {
             confirm: string;

package/lib/cjs/locale/source/ro.js

@@ -41,7 +41,8 @@ var _default = {
       date: 'Selectează data',
       dateTime: 'Selectează data și ora',
       dateRange: ['Data de început', 'Data de sfârșit'],
-      dateTimeRange: ['Data de început', 'Data de sfârșit']
+      dateTimeRange: ['Data de început', 'Data de sfârșit'],
+      monthRange: ['Luna de început', 'Luna de sfârșit']
     },
     footer: {
       confirm: 'Confirmă',

package/lib/cjs/locale/source/ru_RU.js

@@ -41,7 +41,8 @@ const local = {
       date: 'Выбрать дату',
       dateTime: 'Выбрать дату и время',
       dateRange: ['Дата начала', 'Дата окончания'],
-      dateTimeRange: ['Дата начала', 'Дата окончания']
+      dateTimeRange: ['Дата начала', 'Дата окончания'],
+      monthRange: ['Начальный месяц', 'Конечный месяц']
     },
     footer: {
       confirm: 'подтвердить',

package/lib/cjs/locale/source/sv_SE.js

@@ -42,7 +42,8 @@ const local = {
       date: 'Välj datum',
       dateTime: 'Välj datum och tid',
       dateRange: ['Startdatum', 'Slutdatum'],
-      dateTimeRange: ['Startdatum', 'Slutdatum']
+      dateTimeRange: ['Startdatum', 'Slutdatum'],
+      monthRange: ['Startmånad', 'Slutmånad']
     },
     footer: {
       confirm: 'Bekräfta',

package/lib/cjs/locale/source/th_TH.js

@@ -41,7 +41,8 @@ const local = {
       date: 'โปรดเลือกวันที่',
       dateTime: 'โปรดเลือกวันที่และเวลา',
       dateRange: ['วันที่เริ่มต้น', 'วันที่สิ้นสุด'],
-      dateTimeRange: ['วันที่เริ่มต้น', 'วันที่สิ้นสุด']
+      dateTimeRange: ['วันที่เริ่มต้น', 'วันที่สิ้นสุด'],
+      monthRange: ['เดือนเริ่มต้น', 'เดือนสิ้นสุด']
     },
     footer: {
       confirm: 'ตกลง',

package/lib/cjs/locale/source/tr_TR.js

@@ -41,7 +41,8 @@ const local = {
       date: 'Lütfen bir tarih seçin',
       dateTime: 'Lütfen bir tarih ve saat seçin',
       dateRange: ['Başlangıç tarihi', 'Bitiş tarihi'],
-      dateTimeRange: ['Başlangıç tarihi', 'Bitiş tarihi']
+      dateTimeRange: ['Başlangıç tarihi', 'Bitiş tarihi'],
+      monthRange: ['Başlangıç ​​ayı', 'Bitiş ayı']
     },
     footer: {
       confirm: 'Tamam',

package/lib/cjs/locale/source/vi_VN.js

@@ -41,7 +41,8 @@ const local = {
       date: 'Chọn ngày',
       dateTime: 'Chọn ngày và giờ',
       dateRange: ['Ngày bắt đầu', 'Ngày kết thúc'],
-      dateTimeRange: ['Ngày bắt đầu', 'Ngày kết thúc']
+      dateTimeRange: ['Ngày bắt đầu', 'Ngày kết thúc'],
+      monthRange: ['Tháng bắt đầu', 'Tháng kết thúc']
     },
     footer: {
       confirm: 'Xác nhận',

package/lib/cjs/locale/source/zh_CN.js

@@ -38,7 +38,8 @@ const local = {
       date: '请选择日期',
       dateTime: '请选择日期及时间',
       dateRange: ['开始日期', '结束日期'],
-      dateTimeRange: ['开始日期', '结束日期']
+      dateTimeRange: ['开始日期', '结束日期'],
+      monthRange: ['开始月份', '结束月份']
     },
     footer: {
       confirm: '确定',

package/lib/cjs/locale/source/zh_TW.js

@@ -38,7 +38,8 @@ const local = {
       date: '請選擇日期',
       dateTime: '請選擇日期及時間',
       dateRange: ['開始日期', '結束日期'],
-      dateTimeRange: ['開始日期', '結束日期']
+      dateTimeRange: ['開始日期', '結束日期'],
+      monthRange: ['開始月份', '結束月份']
     },
     footer: {
       confirm: '確定',

package/lib/cjs/modal/Modal.js

@@ -163,10 +163,7 @@ class Modal extends _baseComponent.default {
         this._haveRendered = true;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_portal.default, {
-        style: wrapperStyle,
-        getPopupContainer: getPopupContainer
-      }, /*#__PURE__*/_react.default.createElement(_cssAnimation.default, {
+      return /*#__PURE__*/_react.default.createElement(_cssAnimation.default, {
         motion: this.props.motion,
         animationState: visible ? 'enter' : 'leave',
         startClassName: visible ? `${_constants.cssClasses.DIALOG}-content-animate-show` : `${_constants.cssClasses.DIALOG}-content-animate-hide`,
@@ -190,7 +187,10 @@ class Modal extends _baseComponent.default {
             animationClassName: maskAnimationClassName,
             animationEventsNeedBind: maskAnimationEventsNeedBind
           } = _ref2;
-          return shouldRender ? /*#__PURE__*/_react.default.createElement(_ModalContent.default, Object.assign({}, restProps, {
+          return shouldRender ? /*#__PURE__*/_react.default.createElement(_portal.default, {
+            style: wrapperStyle,
+            getPopupContainer: getPopupContainer
+          }, " ", /*#__PURE__*/_react.default.createElement(_ModalContent.default, Object.assign({}, restProps, {
             contentExtraProps: animationEventsNeedBind,
             maskExtraProps: maskAnimationEventsNeedBind,
             isFullScreen: this.state.isFullScreen,
@@ -203,9 +203,9 @@ class Modal extends _baseComponent.default {
             ref: this.modalRef,
             footer: renderFooter,
             onClose: this.handleCancel
-          })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+          }))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
         });
-      }));
+      });
     };
 
     this.state = {

package/lib/cjs/select/index.d.ts

@@ -33,6 +33,23 @@ export interface optionRenderProps {
     onClick?: (e: React.MouseEvent) => any;
     [x: string]: any;
 }
+export interface SelectedItemProps {
+    value: OptionProps['value'];
+    label: OptionProps['label'];
+    _show?: boolean;
+    _selected: boolean;
+    _scrollIndex?: number;
+}
+export interface TriggerRenderProps {
+    value: SelectedItemProps[];
+    inputValue: string;
+    onSearch: (inputValue: string) => void;
+    onClear: () => void;
+    onRemove: (option: OptionProps) => void;
+    disabled: boolean;
+    placeholder: string;
+    componentProps: Record<string, any>;
+}
 export interface selectMethod {
     clearInput?: () => void;
     selectAll?: () => void;
@@ -121,7 +138,7 @@ export declare type SelectProps = {
     onDeselect?: (value: SelectProps['value'], option: Record<string, any>) => void;
     onSelect?: (value: SelectProps['value'], option: Record<string, any>) => void;
     allowCreate?: boolean;
-    triggerRender?: (props?: any) => React.ReactNode;
+    triggerRender?: (props?: TriggerRenderProps) => React.ReactNode;
     onClear?: () => void;
     virtualize?: virtualListProps;
     onFocus?: (e: React.FocusEvent) => void;

package/lib/cjs/select/index.js

@@ -1212,11 +1212,14 @@ class Select extends _baseComponent.default {
     }, arrowIcon) : /*#__PURE__*/_react.default.createElement("div", {
       className: `${prefixcls}-arrow-empty`
     });
-    const clear = clearIcon ? clearIcon : /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null);
+    const clear = clearIcon ? clearIcon : /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null); // semantics of onSearch are more in line with behavior, onChange is alias of onSearch, will be deprecate next major version
+
     const inner = useCustomTrigger ? /*#__PURE__*/_react.default.createElement(_trigger.default, {
       value: Array.from(selections.values()),
       inputValue: inputValue,
       onChange: this.handleInputChange,
+      onSearch: this.handleInputChange,
+      onRemove: item => this.foundation.removeTag(item),
       onClear: this.onClear,
       disabled: disabled,
       triggerRender: triggerRender,