Merge branch 'main' into release

content/basic/typography/index-en-US.md

@@ -371,7 +371,7 @@ function Demo() {
 ```
 
 <Notice type="primary" title="Tips">
-    <div>When the tooltip does not wrap in the pop-up tooltip when the long text occurs, please set it manually <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-break" target="_blank"  rel="noopener noreferrer">word-break</a>. The reason why we did not have built-in content is that different language content (pure English, Chinese, mixed Chinese and English) have different requirements for word-break, so the component layer does not make this preset.</div>
+    <div>When the tooltip does not wrap in the pop-up tooltip when the long text occurs, please set it manually through <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-break" target="_blank"  rel="noopener noreferrer">word-break</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap" target= "_blank" rel="noopener noreferrer">word-wrap</a>, more details can be found in the FAQ section of Tooltip</div>
 </Notice>
 
 ```jsx live=true

content/basic/typography/index.md

@@ -371,7 +371,7 @@ function Demo() {
 ```
 
 <Notice type="primary" title="注意事项">
-    <div>当发生超长文本在弹出的 tooltip 没有换行时，请手动设置一下 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-break" target="_blank" rel="noopener noreferrer">word-break</a>。我们没有内置的原因是不同语言内容（纯英文、中文、中英文混合）对 word-break 的需求不太一致，所以组件层没有做这个预设。</div>
+    <div>当发生超长文本在弹出的 tooltip 没有换行时，可通过手动设置一下 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-break" target="_blank" rel="noopener noreferrer">word-break</a> 或者 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap" target= "_blank" rel="noopener noreferrer">word-wrap</a> 等换行相关属性进行调整, 更多细节可查看 Tooltip 的 FAQ 部分</div>
 </Notice>
 
 ```jsx live=true

content/input/upload/index-en-US.md

@@ -858,10 +858,10 @@ class ManulUploadDemo extends React.Component {
                     <Button icon={<IconPlus />} theme="light" style={{ marginRight: 8 }}>
                         Select a document
                     </Button>
-                    <Button icon={<IconUpload />} theme="light" onClick={this.manulUpload}>
-                        Start upload
-                    </Button>
                 </Upload>
+                <Button icon={<IconUpload />} theme="light" onClick={this.manulUpload}>
+                    Start upload
+                </Button>
             </div>
         );
     }

content/input/upload/index.md

@@ -868,10 +868,10 @@ class ManulUploadDemo extends React.Component {
                     <Button icon={<IconPlus />} theme="light" style={{ marginRight: 8 }}>
                         选择文件
                     </Button>
-                    <Button icon={<IconUpload />} theme="light" onClick={this.manulUpload}>
-                        开始上传
-                    </Button>
                 </Upload>
+                <Button icon={<IconUpload />} theme="light" onClick={this.manulUpload}>
+                    开始上传
+                </Button>
             </div>
         );
     }

content/show/tooltip/index-en-US.md

@@ -394,9 +394,8 @@ import { Popconfirm, Tooltip, Button } from '@douyinfe/semi-ui';
 <DesignToken/>
 
 ## FAQ
-
--   **Why Tooltip does not set style word-break to all or word?**  
-    Content in difference languages (e.g. English, Chinese, combination of English and Chinese) may require different styles in terms of word-break, so Semi does not use a default setting. You could use corresponding CSS styles to your own needs.
+-   **Why do some forms of content not wrap when the content in Tooltip and Typography is very long?**    
+    Before the v2.36.0 version, considering that different language content (e.g. English, Chinese, combination of English and Chinese) have inconsistent requirements for line breaks, so Semi does not use a default setting. After receiving a lot of usage feedback, since the v2.36.0 version, Tooltip has internally set <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap" target= "_blank" rel="noopener noreferrer">word-wrap</a> handles text wrapping for break-word. For any version, if the default settings are not as expected, the user can adjust the line break related CSS properties through the style/className API.
 
 <!-- ## Related Material
 

content/show/tooltip/index.md

@@ -424,8 +424,8 @@ function Demo() {
 
 ## FAQ
 
--   **为什么 Tooltip content 配置很长很长的内容时，会超出显示 / 不默认配置 word-break 样式?**  
-    不同语言内容（纯英文、中文、中英文混合、其他语种混合）对 word-break 的需求不太一致，所以组件层没有做这个预设。使用方可以根据自己当前语言需求，使用 CSS 进行设置。
+-   **为什么 Tooltip content 配置很长很长的内容时，某些情况下内容会超出显示区域?**  
+    在 v2.36.0 版本以前，考虑到不同语言内容（纯英文、中文、中英文混合、其他语种混合）对换行的需求不太一致，所以组件层没有做这个预设。在接收到较多使用反馈后，自 v2.36.0 版本，Tooltip 内部通过设置 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap" target="_blank" rel="noopener noreferrer">word-wrap</a> 为 break-word 处理文本换行。对于任意版本，如果默认设置不符合预期，使用方都可以通过 style/className API 设置换行相关 CSS 属性进行调整。
 
 
 <!-- ## 相关物料

content/start/faq/index-en-US.md

@@ -53,8 +53,8 @@ Welcome to ours [Customer Service Lark Group](https://bytedance.feishu.cn/docs/d
 
 Our style is based on Scss, and we also use CSS Variable as the color wheel variable. Color variables and common variables are mounted under `body`. CSS Module is not used because we want to have a fixed className and retain the ability to modify / override Semi style for our users(although it is not recommended, it is really needed sometime).
 
-#### Why Tooltip、Typography does not set style word-break to all or word?  
-   Content in difference languages (e.g. English, Chinese, combination of English and Chinese) may require different styles in terms of word-break, so Semi does not use a default setting. You could use corresponding CSS styles to your own needs.
+#### Why do some forms of content not wrap when the content in Tooltip and Typography is very long?  
+Before the v2.36.0 version, considering that different language content (e.g. English, Chinese, combination of English and Chinese) have inconsistent requirements for line breaks, so Semi does not use a default setting. After receiving a lot of usage feedback, since the v2.36.0 version, Tooltip has internally set <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap" target= "_blank" rel="noopener noreferrer">word-wrap</a> handles text wrapping for break-word. For any version, if the default settings are not as expected, the user can adjust the line break related CSS properties through the style/className API.
 
 #### More FAQ
 Please refer to https://bytedance.feishu.cn/docs/doccnMRDbkhde6p3dMokfFpcNug

content/start/faq/index.md

@@ -53,9 +53,9 @@ Semi 目前支持 21 种语言，具体使用可以查阅 [Semi·LocaleProvider]
 
 我们的样式基于 Scss，与此我们还使用了 CSS Variable 作为色盘变量。色盘变量和通用变量挂载在 body 下。不使用 CSS Module 是因为我们希望有固定的 className，为业务方保留修改/覆盖 Semi 样式的能力（虽然不提倡，但有些业务场景下确实需要）
 
-#### 为什么 Tooltip、Typography 不默认配置 word-break 样式？
+#### 为什么 Tooltip content 配置很长很长的内容时，某些情况下内容会超出显示区域?
 
-不同语言内容（纯英文、中文、中英文混合）对 word-break 的需求不太一致，所以组件层没有做这个预设。可以根据需求，使用 CSS 进行设置。
+在 v2.36.0 版本以前，考虑到不同语言内容（纯英文、中文、中英文混合、其他语种混合）对换行的需求不太一致，所以组件层没有做这个预设。在接收到较多使用反馈后，自 v2.36.0 版本，Tooltip 内部通过设置 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap" target="_blank" rel="noopener noreferrer">word-wrap</a> 为 break-word 处理文本换行。对于任意版本，如果默认设置不符合预期，使用方都可以通过 style/className API 设置换行相关 CSS 属性进行调整。
 
 #### 有新组件需求、或者现有组件 Feature 不能满足我的业务需求，该找谁？
 

cypress/e2e/toast.spec.js

@@ -12,6 +12,7 @@ describe('toast', () => {
         cy.wait(200);
         cy.get('[data-cy=context-holder] .semi-toast').should("have.length", 4);
         cy.get('[data-cy=context-holder] .semi-toast .semi-toast-close-button .semi-button').first().click();
+        cy.wait(200);
         cy.get('[data-cy=context-holder] .semi-toast').should("have.length", 3);
     });
 });

packages/semi-foundation/dropdown/foundation.ts

@@ -13,7 +13,7 @@ export default class DropdownFoundation extends BaseFoundation<DropdownAdapter>
         this._adapter.notifyVisibleChange(visible);
 
         const { trigger } = this.getProps();
-        if (visible && trigger === "click"){
+        if (visible && trigger === "click") {
             const popupId = this._adapter.getPopupId();
             this.setFocusToFirstMenuItem(popupId);
         }
@@ -37,6 +37,7 @@ export default class DropdownFoundation extends BaseFoundation<DropdownAdapter>
 
     handleKeyDown(event: any): void {
         const id = event.target?.attributes['data-popupid']?.value;
+        const { visible } = this._adapter.getStates();
         switch (event.key) {
             case ' ':
             case 'Enter':
@@ -46,11 +47,11 @@ export default class DropdownFoundation extends BaseFoundation<DropdownAdapter>
                 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;

packages/semi-foundation/notification/notification.scss

@@ -123,16 +123,21 @@ $module: #{$prefix}-notification;
             font-weight: $font-notification_notice_title-fontWeight;
             color: $color-notification_title-text;
             margin-bottom: $spacing-notification_notice_title-marginBottom;
+            // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+            word-wrap: break-word;
+            overflow-wrap: break-word;
         }
 
         &-inner {
             display: flex;
             width: 100%;
+            min-width: 0;
         }
 
         &-content-wrapper {
             flex: 1 1 auto;
             margin-right: $spacing-notification_notice_content_wrapper-marginRight;
+            min-width: 0;
         }
 
         &-content {
@@ -140,6 +145,9 @@ $module: #{$prefix}-notification;
             font-weight: $font-notification_notice_content-fontWeight;
             color: $color-notification_content-text;
             // padding-top: $spacing-extra-tight;
+            // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+            word-wrap: break-word;
+            overflow-wrap: break-word;
         }
 
         &-icon-close {

packages/semi-foundation/toast/toast.scss

@@ -39,6 +39,9 @@ $icon: #{$prefix}-toast-icon;
             margin-left: $spacing-toast_content_text-marginLeft;
             margin-right: $spacing-toast_content_text-marginRight;
             text-align: left;
+            // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+            word-wrap: break-word;
+            overflow-wrap: break-word;
         }
     }
 

packages/semi-foundation/tooltip/tooltip.scss

@@ -65,6 +65,9 @@ $module-icon: #{$module}-icon-arrow;
         font-size: $font-tooltip-fontSize;
         left: 0;
         top: 0;
+        // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+        word-wrap: break-word;
+        overflow-wrap: break-word;
 
         @include font-size-regular;
         opacity: 0;
@@ -75,6 +78,10 @@ $module-icon: #{$module}-icon-arrow;
         }
     }
 
+    &-content {
+        min-Width: 0
+    }
+
     &-trigger {
         display: inline-block;
         width: auto;

packages/semi-ui/_base/_story/a11y.scss

@@ -1,7 +1,7 @@
 body[data-page="a11y"] {
     overflow: hidden;
 
-    #root {
+    #storybook-root {
         padding: 0 !important;
 
         .semi-slider {

packages/semi-ui/datePicker/datePicker.tsx

@@ -552,7 +552,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
     }
 
     renderQuickControls() {
-        const { presets, type, presetPosition, insetInput } = this.props;
+        const { presets, type, presetPosition, insetInput, locale } = this.props;
         return (
             <QuickControl
                 type={type}
@@ -560,6 +560,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
                 insetInput={insetInput}
                 presetPosition={presetPosition}
                 onPresetClick={(item, e) => this.foundation.handlePresetClick(item, e)}
+                locale={locale}
             />
         );
     }

packages/semi-ui/datePicker/quickControl.tsx

@@ -18,6 +18,7 @@ export interface QuickControlProps {
     onPresetClick: (preset: PresetType, e: React.MouseEvent) => void;
     type: string;
     insetInput: DateInputFoundationProps['insetInput']
+    locale: any
 }
 
 class QuickControl extends PureComponent<QuickControlProps> {
@@ -27,6 +28,7 @@ class QuickControl extends PureComponent<QuickControlProps> {
         onPresetClick: PropTypes.func,
         type: PropTypes.string,
         insetInput: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+        locale: PropTypes.object,
     };
 
     static defaultProps = {
@@ -36,7 +38,7 @@ class QuickControl extends PureComponent<QuickControlProps> {
     };
 
     render() {
-        const { presets, onPresetClick, type, presetPosition, insetInput } = this.props;
+        const { presets, onPresetClick, type, presetPosition, insetInput, locale } = this.props;
         const isTypeRange = type === 'dateRange' || type === 'dateTimeRange';
         const isPanelTopAndBottom = presetPosition === 'top' || presetPosition === 'bottom';
         const isMonth = type === 'month';
@@ -75,7 +77,7 @@ class QuickControl extends PureComponent<QuickControlProps> {
         }
         return (
             <div className={wrapperCls} x-insetinput={insetInput ? "true" : "false"}>
-                {!isPanelTopAndBottom && <div className={headerCls}>快捷选择</div>}
+                {!isPanelTopAndBottom && <div className={headerCls}>{locale.presets}</div>}
                 <div className={contentWrapperCls}>
                     <div className={contentCls}>
                         {presets.map((item, index) => {

packages/semi-ui/dropdown/_story/dropdown.stories.jsx

@@ -8,6 +8,7 @@ import MultiDropdown from './MultiDropdown';
 import DisabledItem from './DisabledItem';
 import InHoverElements from './InHoverElements';
 import WrapAvatar from './WrapAvatar';
+import TextArea from '../../input/textarea'
 import { IconBox, IconChevronDown, IconSimilarity, IconSetting, IconForward, IconColorPalette, IconRefresh, IconSearch, IconBranch } from '@douyinfe/semi-icons';
 
 export { DropdownItem } from '../_story/C2D';
@@ -376,4 +377,22 @@ export function ShowTick() {
           </Dropdown>
       </div>
   );
+}
+
+export function Fix1606() {
+  return (
+      <Dropdown
+        trigger="customer"
+        visible={false}
+        render={
+              <Dropdown.Menu>
+                  <Dropdown.Item>Menu Item 1</Dropdown.Item>
+                  <Dropdown.Item>Menu Item 2</Dropdown.Item>
+                  <Dropdown.Item>Menu Item 3</Dropdown.Item>
+              </Dropdown.Menu>
+        }
+        >
+          <TextArea style={{ width: 200 }} defaultValue='请尝试在此处使用上下箭头切换当前行'/>
+      </Dropdown>
+  );
 }

packages/semi-ui/locale/_story/locale.stories.jsx

@@ -87,6 +87,19 @@ const CascaderDemo = () => {
 const I18nComponent = () => {
   const [modalVisible, setModalVisible] = useState(false);
   const style = { margin: 10 };
+  const presets = [
+        {
+            text: 'Today',
+            start: new Date(),
+            end: new Date(),
+        },
+        {
+            text: 'Tomorrow',
+            start: new Date(new Date().valueOf() + 1000 * 3600 * 24),
+            end: new Date(new Date().valueOf() + 1000 * 3600 * 24),
+        },
+    ];
+
   return (
     <>
       <Pagination total={100} showTotal showSizeChanger style={style} />
@@ -113,7 +126,7 @@ const I18nComponent = () => {
         <p>More content...</p>
       </Modal>
       <DatePicker style={{ ...style, width: 200 }} />
-      <DatePicker style={{ ...style, width: 250 }} type="dateTime" />
+      <DatePicker style={{ ...style, width: 250 }} type="dateTime" presets={presets} presetPosition="left"/>
       <DatePicker style={{ ...style, width: 250 }} type="dateRange" />
       <DatePicker style={{ ...style, width: 400 }} type="dateTimeRange" />
       <TimePicker style={style} />

packages/semi-ui/locale/interface.ts

@@ -34,6 +34,7 @@ export interface Locale {
             dateTimeRange: [string, string];
             monthRange: [string, string]
         };
+        presets: string;
         footer: {
             confirm: string;
             cancel: string

packages/semi-ui/locale/source/ar.ts

@@ -35,6 +35,7 @@ const local: Locale = {
             dateTimeRange: ['تاريخ البدء', 'تاريخ النهاية'],
             monthRange: ['الشهر الأول', 'الشهر الأخير'],
         },
+        presets: 'اختيار سريع',
         footer: {
             confirm: 'تؤكد',
             cancel: 'إلغاء',

packages/semi-ui/locale/source/de.ts

@@ -35,6 +35,7 @@ const local: Locale = {
             dateTimeRange: ['Startdatum', 'Enddatum'],
             monthRange: ['Startmonat', 'Endmonat'],
         },
+        presets: 'Schnellauswahl',
         footer: {
             confirm: 'Bestätigen',
             cancel: 'Abbrechen',

packages/semi-ui/locale/source/en_GB.ts

@@ -35,6 +35,7 @@ const local: Locale = {
             dateTimeRange: ['Start date', 'End date'],
             monthRange: ['Start month', 'End month'],
         },
+        presets: 'Presets',
         footer: {
             confirm: 'Confirm',
             cancel: 'Cancel',

packages/semi-ui/locale/source/en_US.ts

@@ -35,6 +35,7 @@ const local: Locale = {
             dateTimeRange: ['Start date', 'End date'],
             monthRange: ['Start month', 'End month'],
         },
+        presets: 'Presets',
         footer: {
             confirm: 'Confirm',
             cancel: 'Cancel',

packages/semi-ui/locale/source/es.ts

@@ -40,6 +40,7 @@ const locale: Locale = {
             dateTimeRange: ['Fecha inicial', 'Fecha final'],
             monthRange: ['Mes inicial', 'Mes final'],
         },
+        presets: 'Seleccionar rango',
         footer: {
             confirm: 'Aceptar',
             cancel: 'Cancelar',

packages/semi-ui/locale/source/fr.ts

@@ -35,6 +35,7 @@ const local: Locale = {
             dateTimeRange: ['Date de début', 'Date de fin'],
             monthRange: ['Mois de début', 'Mois de fin'],
         },
+        presets: 'Préréglages',
         footer: {
             confirm: 'Confirmer',
             cancel: 'Annuler',

packages/semi-ui/locale/source/id_ID.ts

@@ -35,6 +35,7 @@ const local: Locale = {
             dateTimeRange: ['Tanggal mulai', 'Tanggal akhir'],
             monthRange: ['Bulan pertama', 'Bulan terakhir'],
         },
+        presets: 'Pilihan cepat',
         footer: {
             confirm: 'Konfirmasi',
             cancel: 'Batalkan',

packages/semi-ui/locale/source/it.ts

@@ -35,6 +35,7 @@ const local: Locale = {
             dateTimeRange: ['Data inizio', 'Data fine'],
             monthRange: ['Mese inizio', 'Mese fine'],
         },
+        presets: 'Preimpostazioni rapide',
         footer: {
             confirm: 'Conferma',
             cancel: 'Cancella',

packages/semi-ui/locale/source/ja_JP.ts

@@ -35,6 +35,7 @@ const local: Locale = {
             dateTimeRange: ['開始日', '終了日'],
             monthRange: ['開始月', '終了月'],
         },
+        presets: 'クイック選択',
         footer: {
             confirm: '確認する',
             cancel: 'キャンセル',

packages/semi-ui/locale/source/ko_KR.ts

@@ -36,6 +36,7 @@ const local: Locale = {
             dateTimeRange: ['시작 날짜', '종료일'],
             monthRange: ['시작 월', '종료 월'],
         },
+        presets: '빠른 선택',
         footer: {
             confirm: '확인',
             cancel: '취소',

packages/semi-ui/locale/source/ms_MY.ts

@@ -35,6 +35,7 @@ const local: Locale = {
             dateTimeRange: ['Tarikh mula', 'Tarikh akhir'],
             monthRange: ['Bulan mula', 'Bulan akhir'],
         },
+        presets: 'Pilihan Pantas',
         footer: {
             confirm: 'Sahkan',
             cancel: 'Batal',

packages/semi-ui/locale/source/nl_NL.ts

@@ -42,6 +42,7 @@ const local: Locale = {
             dateTimeRange: ['Begindatum', 'Einddatum'],
             monthRange: ['Begindatum', 'Einddatum'],
         },
+        presets: 'Snelle selectie',
         footer: {
             confirm: 'Bevestigen',
             cancel: 'Annuleren',

packages/semi-ui/locale/source/pl_PL.ts

@@ -43,6 +43,7 @@ const local: Locale = {
             dateTimeRange: ['Data rozpoczęcia', 'Data zakończenia'],
             monthRange: ['Miesiąc rozpoczęcia', 'Miesiąc zakończenia'],
         },
+        presets: 'Szybki wybór',
         footer: {
             confirm: 'Potwierdź',
             cancel: 'Anuluj',

packages/semi-ui/locale/source/pt_BR.ts

@@ -35,6 +35,7 @@ const local: Locale = {
             dateTimeRange: ['Data de início', 'Data de fim'],
             monthRange: ['Mês de início', 'Mês de fim'],
         },
+        presets: 'Seleção rápida',
         footer: {
             confirm: 'OK',
             cancel: 'Cancelar',

packages/semi-ui/locale/source/ro.ts

@@ -37,6 +37,7 @@ export default {
             dateTimeRange: ['Data de început', 'Data de sfârșit'],
             monthRange: ['Luna de început', 'Luna de sfârșit'],
         },
+        presets: 'Selecții rapide',
         footer: {
             confirm: 'Confirmă',
             cancel: 'Anulează',

packages/semi-ui/locale/source/ru_RU.ts

@@ -38,6 +38,7 @@ const local: Locale = {
             dateTimeRange: ['Дата начала', 'Дата окончания'],
             monthRange: ['Начальный месяц', 'Конечный месяц'],
         },
+        presets: 'Быстрый выбор',
         footer: {
             confirm: 'подтвердить',
             cancel: 'отмена',

packages/semi-ui/locale/source/sv_SE.ts

@@ -40,6 +40,7 @@ const local: Locale = {
             dateTimeRange: ['Startdatum', 'Slutdatum'],
             monthRange: ['Startmånad', 'Slutmånad'],
         },
+        presets: 'Snabbval',
         footer: {
             confirm: 'Bekräfta',
             cancel: 'Avbryt',

packages/semi-ui/locale/source/th_TH.ts

@@ -38,6 +38,7 @@ const local: Locale = {
             dateTimeRange: ['วันที่เริ่มต้น', 'วันที่สิ้นสุด'],
             monthRange: ['เดือนเริ่มต้น', 'เดือนสิ้นสุด'],
         },
+        presets: 'การเลือกด่วน',
         footer: {
             confirm: 'ตกลง',
             cancel: 'ยกเลิก',

packages/semi-ui/locale/source/tr_TR.ts

@@ -38,6 +38,7 @@ const local: Locale = {
             dateTimeRange: ['Başlangıç tarihi', 'Bitiş tarihi'],
             monthRange: ['Başlangıç ​​ayı', 'Bitiş ayı']
         },
+        presets: 'Hızlı seçim',
         footer: {
             confirm: 'Tamam',
             cancel: 'İptal'

packages/semi-ui/locale/source/vi_VN.ts

@@ -38,6 +38,7 @@ const local: Locale = {
             dateTimeRange: ['Ngày bắt đầu', 'Ngày kết thúc'],
             monthRange: ['Tháng bắt đầu', 'Tháng kết thúc'],
         },
+        presets: 'Lựa chọn nhanh',
         footer: {
             confirm: 'Xác nhận',
             cancel: 'Huỷ bỏ',

packages/semi-ui/locale/source/zh_CN.ts

@@ -35,6 +35,7 @@ const local: Locale = {
             dateTimeRange: ['开始日期', '结束日期'],
             monthRange: ['开始月份', '结束月份'],
         },
+        presets: '快捷选择',
         footer: {
             confirm: '确定',
             cancel: '取消',

packages/semi-ui/locale/source/zh_TW.ts

@@ -35,6 +35,7 @@ const local: Locale = {
             dateTimeRange: ['開始日期', '結束日期'],
             monthRange: ['開始月份', '結束月份'],
         },
+        presets: '快捷選擇',
         footer: {
             confirm: '確定',
             cancel: '取消',

packages/semi-ui/notification/_story/notification.stories.jsx

@@ -223,3 +223,16 @@ export const AsyncCallback = () => <Demo />;
 AsyncCallback.story = {
   name: '二次异步回调'
 }
+
+export const TestOverFlow = () => {
+  let opts = {
+      title: 'Test long word Title, TestLongWordTestLongWordTestLongWordTestLongWordTestLongWord',
+      content: 'Test long word Title, TestLongWordTestLongWordTestLongWordTestLongWordTestLongWord',
+      duration: 0,
+      theme: 'light',
+      style: { width: 320 }
+  };
+  return (
+    <Button onClick={() => Notification.info(opts)}>Info</Button>
+  )
+}

packages/semi-ui/pagination/_story/pagination.stories.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import 'normalize.css';
+// import 'normalize.css';
 import { Button } from '../../index';
 import Pagination from '../index';
 

packages/semi-ui/toast/_story/toast.stories.jsx

@@ -101,6 +101,16 @@ export const _Toast = () => (
         Toast in popup-container
       </Button>
     </div>
+    <div style={{ margin: '10px' }}>
+      <Button
+        type="primary"
+        onClick={() => {
+          Toast.error({ ...opts, content: 'I have a very long word testLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord' });
+        }}
+      >
+        test overflow wrap
+      </Button>
+    </div>
   </>
 );
 

packages/semi-ui/tooltip/_story/tooltip.stories.jsx

@@ -1529,4 +1529,108 @@ export const Fix1557 = () =>{
           <Tag>Hover Me</Tag>
       </Dropdown>
   );
-}
+}
+
+export const wordBreak = () => {
+  const gapElement = (gap=200) => <div style={{ marginTop: gap }}></div>;
+
+  const tooltipShowProps = { 
+    trigger: "custom",  
+    visible: true ,
+    // showArrow: false
+  };
+
+  const testContent = {
+    '长hash': 'ide2d3a4e9d7b7d93fc4c3b8e4b1b4b08e4f5a9f13ed8b8d6f7c5b7c4c7e4b9e6b9e6e5d4e4c5f6e3b1e7b3a3e3e5c5f4e9c8',
+    'url测试': 'https://semi.bytedance.net/zh-CN/show/tooltip#%E4%BB%85%E5%BD%93%E5%86%85%E5%AE%B9%E5%AE%BD%E5%BA%A6%E8%B6%85%E5%87%BA%E6%97%B6%E5%B1%95%E7%A4%BA%20Tooltip',
+    '中文测试': '中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试',
+    // 以下为英文中最长的单词
+    '英文测试': 'pneumonoultramicroscopicsilicovolcanoconiosis',
+    '日语测试': '超音波検査による胸部エコー検査結果、心拍数や脈波などの検査結果から、緊急性はないものの肺炎の可能性があるため、抗生物質の処方箋を出します。',
+    '韩语测试': '인공지능과 빅데이터 기술을 활용한 자율주행 자동차의 개발은 현재 국내외에서 많은 관심을 받고 있습니다.',
+    '泰语测试': 'เทคโนโลยีการผลิตอาหารและสารสกัดจากพืชชนิดต่าง ๆ กำลังเป็นที่สนใจในวงการอาหารทั่วโลก',
+    '阿拉伯语测试': 'تطور التكنولوجيا والذكاء الاصطناعي يؤثر بشكل كبير على صناعة العمليات الإنتاجية ونمط الحياة الحديثة.',
+    '越南语': 'Ứng dụng công nghệ thông tin và trí tuệ nhân tạo đang ngày càng được sử dụng rộng rãi trong lĩnh vực sản xuất và dịch vụ. không-gian-phi-trụ-điện-từ',
+    '俄罗斯语': 'Разработка новейших технологий искусственного интеллекта и машинного обучения становится все более важной в наши дни.',
+    '印尼语': 'Pemanfaatan teknologi informasi dan kecerdasan buatan semakin penting dalam industri modern.',
+    '马来语': 'Penggunaan teknologi maklumat dan kecerdasan buatan semakin penting dalam industri moden.',
+    '泰语': 'บริการจัดส่งสินค้าทางไปรษณีย์ภายในประเทศไทยมีความสะดวกสบายและรวดเร็วมากยิ่งขึ้นด้วยการใช้เทคโนโลยีที่ทันสมัยในการติดตามสถานะและการจัดส่งสินค้า นอกจากนี้ยังมีการให้บริการเพิ่มเติมอย่างต่างๆ เช่น การจัดส่งพิเศษ การรับส่งเอกสาร การจัดส่งด่วน เป็นต้น',
+    '土耳其语': "Otomobil endüstrisi, Türkiye'nin en önemli sanayi kollarından biridir. Türkiye, yılda yaklaşık 1 milyon adet otomobil üretimiyle Avrupa'nın önde gelen üreticileri arasındadır.",
+    '葡萄牙语': "A eletricidade é uma fonte de energia renovável e limpa, que é produzida a partir de fontes como a energia solar, eólica, hidroelétrica e geotérmica.",
+    '西班牙语': "La biotecnología es una rama de la ciencia que utiliza organismos vivos o partes de ellos para desarrollar productos y servicios que mejoren la calidad de vida.",
+    '意大利语': "L'ingegneria genetica è una branca della biologia molecolare che si occupa di manipolare il DNA per creare organismi con caratteristiche specifiche.",
+    '法语': 'La pharmacologie est la science qui étudie les effets des médicaments sur les êtres vivants et leur utilisation pour la prévention, le diagnostic et le traitement des maladies.',
+    '德语': 'Die Kernenergie ist eine umstrittene Energiequelle, die durch die Nutzung der Energie aus Atomkernen Strom erzeugt.',
+    '罗马尼亚语': 'Ingineria software este o ramură a informaticii care se ocupă cu dezvoltarea de programe și aplicații software.',
+    '瑞典语': 'Neurovetenskap är studiet av nervsystemet och dess funktioner, inklusive dess relationer till beteende och kognition.',
+    '波兰语': 'Archeologia jest nauką humanistyczną zajmującą się badaniem śladów pozostawionych przez człowieka w przeszłości.',
+    '荷兰语': 'Psychologie is de wetenschappelijke studie van het menselijk gedrag en de processen die daaraan ten grondslag liggen.',
+  };
+
+  const longWordContent = {
+    '英文测试': "pneumonoultramicroscopicsilicovolcanoconiosis",
+    '泰语测试': "หน้าต่างจอภาพ",
+    '阿拉伯语测试': "أفاستسقيناكموها",
+    '越南语': "bấtđồngxứngđáng",
+    '俄罗斯语': "человеконенавистничество",
+    '印尼语': "melipatgandakan",
+    '马来语': "pengangkutan",
+    '土耳其语': "çekoslovakyalılaştıramadıklarımızdanmışsınızcasına",
+    '葡萄牙语': "otorrinolaringologista",
+    '西班牙语': "electroencefalografista",
+    '意大利语': "precipitevolissimevolmente",
+    '法语': "anticonstitutionnellement ",
+    '德语': "Donaudampfschifffahrtsgesellschaftskapitän",
+    '罗马尼亚语': "neîncorporabile",
+    '瑞典语': "realisationsvinstbeskattning",
+    '波兰语': "najedźcieżżebrzącychświniątkach",
+    '荷兰语': "Kindercarnavalsoptochtvoorbereidingswerkzaamheden"
+  }
+
+  return (
+  <>
+    {['bottom','top'].map((item, index) => {
+      return <div key={`${index}`}>
+        <Tooltip {...tooltipShowProps} content={'中'} position={item}>
+          <span style={{ marginRight: 10 }}>中文测试</span>
+        </Tooltip>
+        <Tooltip {...tooltipShowProps} content={'-'} position={item}>
+          <span style={{ marginRight: 10 }}>高度测试</span>
+        </Tooltip>
+        <Tooltip showArrow={false} {...tooltipShowProps} content={'中'} position={item} >
+          <span style={{ marginRight: 10 }}>中文无 arrow 测试</span>
+        </Tooltip>
+        <Tooltip showArrow={false} {...tooltipShowProps} content={'t'} position={item}>
+          <span style={{ marginRight: 10 }}>英文无 arrow 测试</span>
+        </Tooltip>
+        {gapElement(100)}
+      </div>
+    })}
+    <p style={{ marginTop: 50 }}>以下为 word-wrap: break-word <strong>VS</strong> word-wrap: normal </p>
+    {Object.entries(testContent).map((item, index) => {
+      const [key, value] = item;
+      return <div key={`${index}`}>
+        {gapElement(200)}
+        <Tooltip {...tooltipShowProps} content={value} position={'top'}>
+        {`${key}`}
+        </Tooltip>
+        <Tooltip {...tooltipShowProps} content={value} position={'top'} style={{ wordWrap: 'normal' }}>
+          <span style={{ marginLeft: 350 }}>{`${key}`}</span>
+        </Tooltip>
+      </div>
+    })}
+    {Object.entries(longWordContent).map((item, index) => {
+      const [key, value] = item;
+      return <div key={`${index}`}>
+        {gapElement(100)}
+        <Tooltip {...tooltipShowProps} content={value} position={'top'} style={{ width: 50 }}>
+        {`${key}`}
+        </Tooltip>
+        <Tooltip {...tooltipShowProps} content={value} position={'top'} style={{ wordWrap: 'normal', width: 50 }}>
+          <span style={{ marginLeft: 350 }}>{`${key}`}</span>
+        </Tooltip>
+      </div>
+    })}
+  </>
+  );
+}

packages/semi-ui/tooltip/index.tsx

@@ -649,7 +649,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
                             x-placement={placement}
                             id={id}
                         >
-                            {contentNode}
+                            <div className={`${prefix}-content`} >{contentNode}</div>
                             {icon}
                         </div>;
                     }