@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/lib/es/datePicker/variables.scss

@@ -9,6 +9,7 @@ $height-datepicker_timeType_tpk: calc(100% - 54px); // 时间面板高度
 $height-datepicker_panel_yam_scrolllist:  266px; // 时间滚动内容高度
 
 $width-datepicker_monthPanel_max: 284px; // 年月选择器最大宽度
+$width-datepicker_monthRangePanel_max: 384px; // 年月选择器最大宽度
 $height-datepicker_timepicker_header_min: 24px; // 年月选择 header 最小高度
 $width-datepicker_navigation_button_min: 32px; // header 按钮最小宽度
 $height-datepicker_yamShowing_min: 378px; // 日期时间选择器菜单最小高度
@@ -30,10 +31,12 @@ $height-datepicker_timeType_insetInput_yam: 100%; // 时间面板高度 - 内嵌
 $height-datepicker_timeType_insetInput_tpk: 100%; // 时间面板高度 - 内嵌输入框
 $width-datepicker_insetInput_date_type_wrapper: 284px; // 日期类型内嵌输入框宽度
 $width-datepicker_insetInput_date_range_type_wrapper: $width-datepicker_insetInput_date_type_wrapper * 2; // 范围选择内嵌输入框宽度
-$width-datepicker_insetInput_month_type_wrapper: 204px; // 月份类型内嵌输入框宽度
+$width-datepicker_insetInput_month_type_wrapper: 165px; // 月份类型内嵌输入框宽度
+$width-datepicker_insetInput_month_range_type_wrapper: 331px; // 年月范围类型内嵌输入框宽度
 $height-datepicker_insetInput_separator: 32px;
 $height-datepicker_month_grid_yearType_insetInput: 317px;
 $height-datepicker_month_grid_timeType_insetInput: 317px;
+$width-datepicker_range_trigger-border: 0px; //  触发器边框宽度
 
 // Spacing
 $spacing-datepicker_day-marginX: ($width-datepicker_day - $width-datepicker_day_main) * 0.5; // 日期格子水平外边距
@@ -142,6 +145,12 @@ $color-datepicker_range_input_inputWrapper-bg-focus: var(--semi-color-fill-1);
 $color-datepicker_range_input_separator-text-active: var(--semi-color-text-0);
 $color-datepicker_day_main-border: var(--semi-color-primary-active);
 $color-datepicker_insetInput_separator: var(--semi-color-text-3);
+$color-datepicker_range_trigger-border: transparent; // 范围日期选择模式触发器边框颜色
+$color-datepicker_range_trigger-border-hover: transparent; // 范围日期选择模式触发器边框颜色 - 悬浮
+$color-datepicker_range_trigger-border-active: transparent; // 范围日期选择模式触发器边框颜色 - 激活
+$color-datepicker_range_trigger-border-focus: transparent; // 范围日期选择模式触发器边框颜色 - 聚焦
+
+
 
 // Font
 $font-datepicker_range_input_prefix_suffix_clearbtn-fontWeight: 600;
@@ -216,7 +225,7 @@ $transition-datepicker_range_input: background-color .16s ease-in-out;
 $width-datepicker_presetPanel_left_and_right_content: $width-datepicker_presetPanel_left_and_right - $spacing-datepicker_quick_control_content-paddingX * 2; // 左右方位快捷选择面板，内容宽度
 $width-datepicker_presetPanel_top_and_bottom_content_date: $width-datepicker_day * 7 + $spacing-datepicker_month-padding * 2 - $spacing-datepicker_quick_control_top_and_bottom_content-paddingX * 2; // date/dateTime下， 上下方位快捷选择面板内容宽度， 默认（284 - 40）px
 $width-datepicker_presetPanel_top_and_bottom_content_range: ($width-datepicker_day * 7 + $spacing-datepicker_month-padding * 2) * 2 - $spacing-datepicker_quick_control_top_and_bottom_content-paddingX * 2; // dateRange/dateTimeRange下， 上下方位快捷选择内容面板宽度，默认528px
-$width-datepicker_presetPanel_top_and_bottom_content_month: 194px - $spacing-datepicker_quick_control_top_and_bottom_content-paddingX * 2; // month下，上下方位快捷选择内容面板宽度， 默认154px
+$width-datepicker_presetPanel_top_and_bottom_content_month: 165px - $spacing-datepicker_quick_control_top_and_bottom_content-paddingX * 2; // month下，上下方位快捷选择内容面板宽度， 默认154px
 
 $height-datepicker_month_max: $width-datepicker_day * 7 + 1px; // 年月面板最大高度, 最多6 + 1行，再加上一个border宽度, 默认253px
 $height-datepicker_month_max_compact: $width-datepicker_day_compact * 7 + $spacing-datepicker_weeks_compact-paddingTop + $spacing-datepicker_weeks_compact-padding + $spacing-datepicker_weekday_compact-paddingBottom; // 年月面板最大高度, 最多6 + 1行，再加上padding，默认220px
@@ -227,7 +236,7 @@ $height-datepicker_presetPanel_left_and_right_except_content: 20px + $spacing-da
 // compact
 $width-datepicker_presetPanel_top_and_bottom_content_date_compact: $width-datepicker_day_compact * 7 + $spacing-datepicker_weeks_compact-padding * 2 - $spacing-datepicker_quick_control_top_and_bottom_content_compact-paddingX * 2; // date/dateTime下， 上下方位快捷选择面板内容宽度， 默认（216 - 20）px
 $width-datepicker_presetPanel_top_and_bottom_content_range_compact: ($width-datepicker_day_compact * 7 + $spacing-datepicker_weeks_compact-padding * 2) * 2 - $spacing-datepicker_quick_control_top_and_bottom_content_compact-paddingX * 2; // dateRange/dateTimeRange下， 上下方位快捷选择内容面板宽度，默认412px
-$width-datepicker_presetPanel_top_and_bottom_content_month_compact: 194px - $spacing-datepicker_quick_control_top_and_bottom_content_compact-paddingX  * 2; // month下，上下方位快捷选择内容面板宽度， 默认174px
+$width-datepicker_presetPanel_top_and_bottom_content_month_compact: 165px - $spacing-datepicker_quick_control_top_and_bottom_content_compact-paddingX  * 2; // month下，上下方位快捷选择内容面板宽度， 默认174px
 
 $height-datepicker_date_panel_compact: $height-datepicker_month_max_compact + $width-datepicker_nav_compact + $spacing-datepicker_nav_compact-padding; // compact，date/dateRange，面板渲染最大高度，默认256px
 $height-datepicker_date_time_panel_compact: $height-datepicker_date_panel_compact + $height-datepicker_switch_compact; // compact，dateTime/dateTImeRange，面板渲染最大高度，默认288px
@@ -236,7 +245,7 @@ $height-datepicker_presetPanel_left_and_right_except_content_compact: 20px + $sp
 $width-datepicker_presetPanel_left_and_right_two_col_button: ($width-datepicker_presetPanel_left_and_right_content - $spacing-datepicker_quick_control_item-margin) * 0.5; // 左右方位快捷选择面板，固定两列，按钮宽度
 $width-datepicker_presetPanel_top_and_bottom_three_col_button: ($width-datepicker_presetPanel_top_and_bottom_content_date - $spacing-datepicker_quick_control_item-margin * 2) * 0.333; // 上下方位快捷选择面板，固定三列，按钮宽度
 $width-datepicker_presetPanel_top_and_bottom_five_col_button: ($width-datepicker_presetPanel_top_and_bottom_content_range - $spacing-datepicker_quick_control_item-margin * 4) * 0.2; // 上下方位快捷选择面板，固定五列，按钮宽度
-$width-datepicker_presetPanel_top_and_bottom_two_col_button:($width-datepicker_presetPanel_top_and_bottom_content_month - $spacing-datepicker_quick_control_item-margin) * 0.5; // 上下方位快捷选择面板，固定两列，按钮宽度
+$width-datepicker_presetPanel_top_and_bottom_two_col_button: ($width-datepicker_presetPanel_top_and_bottom_content_month - $spacing-datepicker_quick_control_item-margin) * 0.5; // 上下方位快捷选择面板，固定两列，按钮宽度
 
 // compact
 $width-datepicker_presetPanel_top_and_bottom_three_col_button_compact: ($width-datepicker_presetPanel_top_and_bottom_content_date_compact - $spacing-datepicker_quick_control_item-margin * 2) * 0.333; // 上下方位快捷选择面板，固定三列，按钮宽度

package/lib/es/datePicker/yearAndMonthFoundation.d.ts

@@ -1,11 +1,27 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { PresetPosition } from './foundation';
+import { ArrayElement } from '../utils/type';
+import { strings } from './constants';
+import { PanelType } from './monthsGridFoundation';
+type Type = ArrayElement<typeof strings.TYPE_SET>;
 export interface YearAndMonthFoundationProps {
-    currentYear?: number;
-    currentMonth?: number;
+    currentYear: {
+        left: number;
+        right: number;
+    };
+    currentMonth: {
+        left: number;
+        right: number;
+    };
     onSelect?: (obj: {
-        currentMonth: number;
-        currentYear: number;
+        currentMonth: {
+            left: number;
+            right: number;
+        };
+        currentYear: {
+            left: number;
+            right: number;
+        };
     }) => void;
     onBackToMain?: () => void;
     locale?: any;
@@ -18,7 +34,10 @@ export interface YearAndMonthFoundationProps {
     presetPosition?: PresetPosition;
     renderQuickControls?: any;
     renderDateInput?: any;
+    type?: Type;
     yearAndMonthOpts?: any;
+    startYear?: number;
+    endYear?: number;
 }
 export interface YearAndMonthFoundationState {
     years: Array<{
@@ -29,14 +48,46 @@ export interface YearAndMonthFoundationState {
         value: number;
         month: number;
     }>;
-    currentYear: number;
-    currentMonth: number;
+    currentYear: {
+        left: number;
+        right: number;
+    };
+    currentMonth: {
+        left: number;
+        right: number;
+    };
 }
 export interface YearAndMonthAdapter extends DefaultAdapter<YearAndMonthFoundationProps, YearAndMonthFoundationState> {
-    setCurrentYear: (currentYear: number, cb?: () => void) => void;
-    setCurrentMonth: (currentMonth: number) => void;
-    notifySelectYear: (year: number) => void;
-    notifySelectMonth: (month: number) => void;
+    setCurrentYear: (currentYear: {
+        left: number;
+        right: number;
+    }, cb?: () => void) => void;
+    setCurrentMonth: (currentMonth: {
+        left: number;
+        right: number;
+    }) => void;
+    setCurrentYearAndMonth: (currentYear: {
+        left: number;
+        right: number;
+    }, currentMonth: {
+        left: number;
+        right: number;
+    }) => void;
+    notifySelectYear: (year: {
+        left: number;
+        right: number;
+    }) => void;
+    notifySelectMonth: (month: {
+        left: number;
+        right: number;
+    }) => void;
+    notifySelectYearAndMonth: (year: {
+        left: number;
+        right: number;
+    }, month: {
+        left: number;
+        right: number;
+    }) => void;
     notifyBackToMain: () => void;
 }
 export interface MonthScrollItem {
@@ -55,11 +106,15 @@ export default class YearAndMonthFoundation extends BaseFoundation<YearAndMonthA
     constructor(adapter: YearAndMonthAdapter);
     init(): void;
     destroy(): void;
-    selectYear(item: YearScrollItem): void;
-    selectMonth(item: MonthScrollItem): void;
+    selectYear(item: YearScrollItem, panelType?: PanelType): void;
+    selectMonth(item: MonthScrollItem, panelType?: PanelType): void;
     /**
      * After selecting a year, if the currentMonth is disabled, automatically select a non-disabled month
      */
-    autoSelectMonth(item: YearScrollItem): void;
+    autoSelectMonth(item: YearScrollItem, panelType: PanelType, year: {
+        left: number;
+        right: number;
+    }): void;
     backToMain(): void;
 }
+export {};

package/lib/es/datePicker/yearAndMonthFoundation.js

@@ -1,68 +1,89 @@
 import { setMonth, setYear } from 'date-fns';
 import BaseFoundation from '../base/foundation';
+import { strings } from './constants';
+import copy from 'fast-copy';
 export default class YearAndMonthFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
-  } // eslint-disable-next-line @typescript-eslint/no-empty-function
-
-
-  init() {} // eslint-disable-next-line @typescript-eslint/no-empty-function
-
-
+  }
+  init() {}
   destroy() {}
-
-  selectYear(item) {
-    const year = item.value;
-
-    this._adapter.setCurrentYear(year, () => this.autoSelectMonth(item));
-
+  selectYear(item, panelType) {
+    // const year = item.value;
+    const {
+      currentYear,
+      currentMonth
+    } = this.getStates();
+    const {
+      type
+    } = this.getProps();
+    const left = strings.PANEL_TYPE_LEFT;
+    const right = strings.PANEL_TYPE_RIGHT;
+    const year = copy(currentYear);
+    year[panelType] = item.value;
+    // make sure the right panel time is always less than the left panel time
+    if (type === 'monthRange') {
+      const isSameYearIllegalDate = year[left] === year[right] && currentMonth[left] > currentMonth[right];
+      if (panelType === left && item.value > year[right] || panelType === left && isSameYearIllegalDate) {
+        // 1. select left year and left year > right year
+        // 2. select left year, left year = right year, but left date > right date
+        year[right] = item.value + 1;
+      } else if (panelType === right && isSameYearIllegalDate) {
+        // 1. select right year, left year = right year, but left date > right date
+        year[left] = item.value - 1;
+      }
+    }
+    this._adapter.setCurrentYear(year, () => this.autoSelectMonth(item, panelType, year));
     this._adapter.notifySelectYear(year);
   }
-
-  selectMonth(item) {
+  selectMonth(item, panelType) {
+    const {
+      currentMonth,
+      currentYear
+    } = this.getStates();
     const {
-      month
-    } = item;
-
+      type
+    } = this.getProps();
+    const left = strings.PANEL_TYPE_LEFT;
+    const right = strings.PANEL_TYPE_RIGHT;
+    const month = copy(currentMonth);
+    month[panelType] = item.month;
+    // make sure the right panel time is always less than the left panel time
+    if (type === 'monthRange' && panelType === left && currentYear[left] === currentYear[right] && item.value > month[right]) {
+      month[right] = item.month + 1;
+    }
     this._adapter.setCurrentMonth(month);
-
     this._adapter.notifySelectMonth(month);
   }
   /**
    * After selecting a year, if the currentMonth is disabled, automatically select a non-disabled month
    */
-
-
-  autoSelectMonth(item) {
+  autoSelectMonth(item, panelType, year) {
     const {
       disabledDate,
       locale
     } = this._adapter.getProps();
-
     const {
       months,
       currentMonth
     } = this._adapter.getStates();
-
     const currentDate = setYear(Date.now(), item.year);
-    const isCurrentMonthDisabled = disabledDate(setMonth(currentDate, currentMonth - 1));
-
+    const isCurrentMonthDisabled = disabledDate(setMonth(currentDate, currentMonth[panelType] - 1));
     if (isCurrentMonthDisabled) {
       const currentIndex = months.findIndex(_ref => {
         let {
           month
         } = _ref;
-        return month === currentMonth;
+        return month === currentMonth[panelType];
       });
-      let validMonth; // First look in the back, if you can't find it in the back, then look in the front
-
+      let validMonth;
+      // First look in the back, if you can't find it in the back, then look in the front
       validMonth = months.slice(currentIndex).find(_ref2 => {
         let {
           month
         } = _ref2;
         return !disabledDate(setMonth(currentDate, month - 1));
       });
-
       if (!validMonth) {
         validMonth = months.slice(0, currentIndex).find(_ref3 => {
           let {
@@ -71,19 +92,16 @@ export default class YearAndMonthFoundation extends BaseFoundation {
           return !disabledDate(setMonth(currentDate, month - 1));
         });
       }
-
       if (validMonth) {
-        this.selectMonth({
-          month: validMonth.month,
-          value: locale.fullMonths[validMonth.month],
-          disabled: false
-        });
+        const month = copy(currentMonth);
+        month[panelType] = validMonth.month;
+        // change year and month same time
+        this._adapter.setCurrentYearAndMonth(year, month);
+        this._adapter.notifySelectYearAndMonth(year, month);
       }
     }
   }
-
   backToMain() {
     this._adapter.notifyBackToMain();
   }
-
 }

package/lib/es/descriptions/constants.d.ts

@@ -4,6 +4,7 @@ declare const cssClasses: {
 declare const strings: {
     ALIGN_SET: string[];
     SIZE_SET: string[];
+    LAYOUT_SET: string[];
 };
 declare const numbers: {};
 export { cssClasses, strings, numbers };

package/lib/es/descriptions/constants.js

@@ -1,10 +1,11 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-descriptions")
+  PREFIX: `${BASE_CLASS_PREFIX}-descriptions`
 };
 const strings = {
   ALIGN_SET: ['left', 'justify', 'plain', 'center'],
-  SIZE_SET: ['small', 'medium', 'large']
+  SIZE_SET: ['small', 'medium', 'large'],
+  LAYOUT_SET: ['horizontal', 'vertical']
 };
 const numbers = {};
 export { cssClasses, strings, numbers };

package/lib/es/descriptions/descriptions.css

@@ -86,33 +86,48 @@
   line-height: 16px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   padding-bottom: 0;
+  font-size: 12px;
 }
 .semi-descriptions-double-small .semi-descriptions-value {
   font-size: 16px;
   line-height: 22px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 16px;
 }
 .semi-descriptions-double-medium .semi-descriptions-item {
   padding-right: 60px;
 }
 .semi-descriptions-double-medium .semi-descriptions-key {
   padding-bottom: 4px;
+  font-size: 14px;
 }
 .semi-descriptions-double-medium .semi-descriptions-value {
   font-size: 20px;
   line-height: 28px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 20px;
 }
 .semi-descriptions-double-large .semi-descriptions-item {
   padding-right: 80px;
 }
 .semi-descriptions-double-large .semi-descriptions-key {
   padding-bottom: 4px;
+  font-size: 14px;
 }
 .semi-descriptions-double-large .semi-descriptions-value {
   font-size: 28px;
   line-height: 40px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 28px;
+}
+.semi-descriptions-horizontal table {
+  table-layout: fixed;
+}
+.semi-descriptions-horizontal table, .semi-descriptions-horizontal tbody {
+  width: 100%;
+}
+.semi-descriptions-horizontal .semi-descriptions-item {
+  flex: 0;
 }
 
 .semi-rtl .semi-descriptions,

package/lib/es/descriptions/descriptions.scss

@@ -110,10 +110,12 @@ $module: #{$prefix}-descriptions;
             .#{$module}-key {
                 @include font-size-small;
                 padding-bottom: 0;
+                font-size: $font-descriptions_key_small-fontSize;
             }
 
             .#{$module}-value {
                 @include font-size-header-6;
+                font-size: $font-descriptions_value_small-fontSize;
             }
         }
 
@@ -124,10 +126,12 @@ $module: #{$prefix}-descriptions;
 
             & .#{$module}-key {
                 padding-bottom: $spacing-descriptions_key_medium-paddingBottom;
+                font-size: $font-descriptions_key_medium-fontSize;
             }
 
             & .#{$module}-value {
                 @include font-size-header-4;
+                font-size: $font-descriptions_value_medium-fontSize;
             }
         }
 
@@ -138,13 +142,29 @@ $module: #{$prefix}-descriptions;
 
             & .#{$module}-key {
                 padding-bottom: $spacing-descriptions_key_large-paddingBottom;
+                font-size: $font-descriptions_key_large-fontSize;
             }
 
             & .#{$module}-value {
                 @include font-size-header-2;
+                font-size: $font-descriptions_value_large-fontSize;
             }
         }
     }
+
+    &-horizontal {
+        table {
+            table-layout: fixed;
+        }
+        table, tbody {
+            width: 100%;
+        }
+    }
+
+    &-horizontal &-item {
+        flex: 0;
+    }
+
 }
 
 @import "./rtl.scss";

package/lib/es/descriptions/foundation.d.ts

@@ -0,0 +1,7 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface DescriptionsAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+}
+export default class DescriptionsFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<DescriptionsAdapter<P, S>, P, S> {
+    constructor(adapter: DescriptionsAdapter<P, S>);
+    getHorizontalList(): any[];
+}

package/lib/es/descriptions/foundation.js

@@ -0,0 +1,37 @@
+import BaseFoundation from '../base/foundation';
+export default class DescriptionsFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+  }
+  getHorizontalList() {
+    const {
+      column,
+      data,
+      children
+    } = this.getProps();
+    let columns;
+    if (data === null || data === void 0 ? void 0 : data.length) {
+      columns = data || [];
+    } else {
+      columns = (children === null || children === void 0 ? void 0 : children.map(item => Object.assign({
+        value: item.props.children
+      }, item.props))) || [];
+    }
+    const horizontalList = [];
+    const curSpan = {
+      totalSpan: 0,
+      itemList: []
+    };
+    for (const item of columns) {
+      curSpan.totalSpan += item.span || 1;
+      curSpan.itemList.push(item);
+      if (curSpan.totalSpan >= column) {
+        horizontalList.push(curSpan.itemList);
+        curSpan.itemList = [];
+        curSpan.totalSpan = 0;
+      }
+    }
+    if (curSpan.itemList.length != 0) horizontalList.push(curSpan.itemList);
+    return horizontalList;
+  }
+}

package/lib/es/descriptions/variables.scss

@@ -13,3 +13,13 @@ $color-descriptions_value-text-default: var(--semi-color-text-0); // value 文
 
 $spacing-descriptions_value_plain-paddingLeft: 8px; // 普通显示 plain 模式下 value 左侧内边距
 $spacing-descriptions_item_double-padding: 0; // 双行显示右侧 item 内边距
+
+
+$font-descriptions_key_small-fontSize:$font-size-small; // 双行显示 key 文字大小 - 小尺寸
+$font-descriptions_value_small-fontSize:$font-size-header-6; // 双行显示 value 文字大小 - 小尺寸
+
+$font-descriptions_key_medium-fontSize:$font-size-regular; // 双行显示 key 文字大小 - 小尺寸
+$font-descriptions_value_medium-fontSize:$font-size-header-4; // 双行显示 value 文字大小 - 小尺寸
+
+$font-descriptions_key_large-fontSize:$font-size-regular; // 双行显示 key 文字大小 - 小尺寸
+$font-descriptions_value_large-fontSize:$font-size-header-2; // 双行显示 value 文字大小 - 小尺寸

package/lib/es/divider/constants.js

@@ -1,6 +1,6 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX)
+  PREFIX: `${BASE_CLASS_PREFIX}`
 };
 const strings = {
   LAYOUT: ['vertical', 'horizontal']

package/lib/es/dropdown/constants.js

@@ -1,13 +1,13 @@
 import { strings as tooltipStrings } from '../tooltip/constants';
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-dropdown"),
-  SELECTED: "".concat(BASE_CLASS_PREFIX, "-dropdown-item-selected"),
-  DISABLED: "".concat(BASE_CLASS_PREFIX, "-dropdown-item-disabled")
+  PREFIX: `${BASE_CLASS_PREFIX}-dropdown`,
+  SELECTED: `${BASE_CLASS_PREFIX}-dropdown-item-selected`,
+  DISABLED: `${BASE_CLASS_PREFIX}-dropdown-item-disabled`
 };
 const strings = {
   POSITION_SET: tooltipStrings.POSITION_SET,
-  TRIGGER_SET: ['hover', 'focus', 'click', 'custom'],
+  TRIGGER_SET: ['hover', 'focus', 'click', 'custom', 'contextMenu'],
   DEFAULT_LEAVE_DELAY: 100,
   ITEM_TYPE: ['primary', 'secondary', 'tertiary', 'warning', 'danger']
 };

package/lib/es/dropdown/dropdown.css

@@ -7,6 +7,7 @@
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 .semi-dropdown-wrapper {
+  overflow-y: auto;
   box-shadow: var(--semi-shadow-elevated);
   position: relative;
   z-index: 1050;
@@ -47,6 +48,9 @@
   align-items: center;
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeOut) 0ms;
 }
+.semi-dropdown-item-hover {
+  background-color: var(--semi-color-fill-0);
+}
 .semi-dropdown-item:not(.semi-dropdown-item-active):hover {
   background-color: var(--semi-color-fill-0);
   cursor: pointer;

package/lib/es/dropdown/dropdown.scss

@@ -7,6 +7,7 @@ $module: #{$prefix}-dropdown;
 .#{$module} {
     @include font-size-regular;
     &-wrapper {
+        overflow-y:auto; // prevent flow out of the radius limit area
         @include shadow-elevated;
         position: relative;
         z-index: $z-dropdown;
@@ -47,6 +48,10 @@ $module: #{$prefix}-dropdown;
         transition: background-color $transition_duration-dropdown_item-bg $transition_function-dropdown_item-bg
             $transition_delay-dropdown_item-bg;
 
+        &-hover {
+            background-color: $color-dropdown_item-bg-hover;
+        }
+
         &:not(.#{$module}-item-active):hover {
             background-color: $color-dropdown_item-bg-hover;
             cursor: pointer;

package/lib/es/dropdown/foundation.js

@@ -3,62 +3,51 @@ import { handlePrevent, setFocusToFirstItem, setFocusToLastItem } from '../utils
 export default class DropdownFoundation extends BaseFoundation {
   handleVisibleChange(visible) {
     this._adapter.setPopVisible(visible);
-
     this._adapter.notifyVisibleChange(visible);
-
     const {
       trigger
     } = this.getProps();
-
     if (visible && trigger === "click") {
       const popupId = this._adapter.getPopupId();
-
       this.setFocusToFirstMenuItem(popupId);
     }
   }
-
   getMenuItemNodes(id) {
-    const menuWrapper = document.getElementById(id); // if has dropdown item, the item must wrapped by li
-
+    const menuWrapper = document.getElementById(id);
+    // if has dropdown item, the item must wrapped by li
     return menuWrapper ? Array.from(menuWrapper.getElementsByTagName('li')).filter(item => item.ariaDisabled === "false") : null;
   }
-
   setFocusToFirstMenuItem(id) {
     const menuItemNodes = this.getMenuItemNodes(id);
     menuItemNodes && setFocusToFirstItem(menuItemNodes);
   }
-
   setFocusToLastMenuItem(id) {
     const menuItemNodes = this.getMenuItemNodes(id);
     menuItemNodes && setFocusToLastItem(menuItemNodes);
   }
-
   handleKeyDown(event) {
     var _a, _b;
-
     const id = (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.attributes['data-popupid']) === null || _b === void 0 ? void 0 : _b.value;
-
+    const {
+      visible
+    } = this._adapter.getStates();
     switch (event.key) {
       case ' ':
       case 'Enter':
-        event.target.click(); // user may use input to be the trigger and bind some key event on it, so do not stoppropagation
+        event.target.click();
+        // user may use input to be the trigger and bind some key event on it, so do not stoppropagation
         // handlePrevent(event);
-
         break;
-
       case 'ArrowDown':
         this.setFocusToFirstMenuItem(id);
-        handlePrevent(event);
+        visible && handlePrevent(event);
         break;
-
       case 'ArrowUp':
         this.setFocusToLastMenuItem(id);
-        handlePrevent(event);
+        visible && handlePrevent(event);
         break;
-
       default:
         break;
     }
   }
-
 }