@douyinfe/semi-foundation 2.14.0-beta.2 → 2.15.0

package/cascader/cascader.scss

@@ -175,6 +175,17 @@ $module: #{$prefix}-cascader;
                 height: $height-cascader_selection_tagInput_input_large;
             }
         }
+
+        &-text {
+
+            &-inactive {
+                color: $color-cascader_selection_text_inactive;
+            }
+
+            &-hide {
+                display: none;
+            }
+        }
     }
 
     &-arrow,
@@ -294,8 +305,17 @@ $module: #{$prefix}-cascader;
     .#{$module}-selection {
         .#{$module}-search-wrapper {
             width: 100%;
+            height: $height-cascader_selection_wrapper;
+            display: flex;
+            align-items: center;
+            position: relative;
 
             .#{$prefix}-input-wrapper {
+                position: absolute;
+                top: 0;
+                left: 0;
+                border: none;
+                background-color: transparent;
                 height: 100%;
                 width: 100%;
                 border: $color-cascader_input-border-default;

package/cascader/foundation.ts

@@ -145,6 +145,7 @@ export interface BasicCascaderProps {
     disableStrictly?: boolean;
     leafOnly?: boolean;
     enableLeafClick?: boolean;
+    preventScroll?: boolean;
     onClear?: () => void;
     triggerRender?: (props: BasicTriggerRenderProps) => any;
     onListScroll?: (e: any, panel: BasicScrollPanelProps) => void;
@@ -183,6 +184,7 @@ export interface BasicCascaderInnerData {
     isFocus?: boolean;
     isInput?: boolean;
     disabledKeys?: Set<string>;
+    showInput?: boolean;
 }
 
 export interface CascaderAdapter extends DefaultAdapter<BasicCascaderProps, BasicCascaderInnerData> {
@@ -208,6 +210,8 @@ export interface CascaderAdapter extends DefaultAdapter<BasicCascaderProps, Basi
     notifyOnLoad: (newLoadedKeys: Set<string>, data: BasicCascaderData) => void;
     notifyListScroll: (e: any, panel: BasicScrollPanelProps) => void;
     notifyOnExceed: (data: BasicEntity[]) => void;
+    toggleInputShow: (show: boolean, cb: () => void) => void;
+    updateFocusState: (focus: boolean) => void,
 }
 
 // eslint-disable-next-line max-len
@@ -484,9 +488,11 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
 
     open() {
         const filterable = this._isFilterable();
+        const { multiple } = this.getProps();
         this._adapter.openMenu();
         if (filterable) {
             this._clearInput();
+            !multiple && this.toggle2SearchInput(true);
         }
         if (this._isControlledComponent()) {
             this.reCalcActiveKeys();
@@ -524,10 +530,25 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
                 inputValue = this.renderDisplayText([...selectedKeys][0]);
             }
             this._adapter.updateStates({ inputValue });
+            !multiple && this.toggle2SearchInput(false);
+            !multiple && this._adapter.updateFocusState(false);
         }
         this._notifyBlur(e);
     }
 
+    toggle2SearchInput(isShow: boolean) {
+        if (isShow) {
+            this._adapter.toggleInputShow(isShow, () => this.focusInput());
+        } else {
+            this._adapter.toggleInputShow(isShow, () => undefined);
+        }
+    }
+
+    focusInput() {
+        this._adapter.focusInput();
+        this._adapter.updateFocusState(true);
+    }
+
     getMergedMotion = () => {
         const { motion } = this.getProps();
         const { isSearching } = this.getStates();

package/cascader/variables.scss

@@ -54,6 +54,7 @@ $spacing-cascader_clearBtn-marginRight: 12px; // 级联选择触发器清空按
 
 $color-cascader_selection_n-text-default: var(--semi-color-text-0); // 超出 maxTagCount 后，+n 的文字默认颜色
 $color-cascader_selection_n-text-disabled: var(--semi-color-disabled-text); // 超出 maxTagCount 后，+n 的文字disabled颜色
+$color-cascader_selection_text_inactive: var(--semi-color-text-2); // 级联选择单选inpu输入框和text并存时，text颜色
 $color-cascader_selection-text-default: var(--semi-color-text-0); // 级联选择选中项文字颜色
 $color-cascader_placeholder-text-default: var(--semi-color-text-2); // 级联选择未选中项文字颜色
 $color-cascader-icon-default: var(--semi-color-text-2); // 级联选择图标颜色 - 默认
@@ -94,6 +95,7 @@ $height-cascader_option_list: 180px; // 级联选择菜单高度
 $height-cascader_selection_tagInput_input_small: 22px;
 $height-cascader_selection_tagInput_input_default: 30px;
 $height-cascader_selection_tagInput_input_large: 38px;
+$height-cascader_selection_wrapper: 30px;
 
 $spacing-cascader_text-marginX: $spacing-base-tight; // 级联选择 prefix/suffix 文字水平内间距
 $spacing-cascader_icon-marginX: $spacing-tight; // 级联选择 prefix/suffix 图标水平内间距

package/checkbox/checkbox.scss

@@ -101,15 +101,6 @@ $module: #{$prefix}-checkbox;
                 font-size: 16px;
             }
         }
-
-        &-pureCardType {
-            // Reasons to use opacity:0 & width: 0 instead of display: none
-            // The a11y keyboard focus event of the checkbox depends on the implementation of the input focus/blur event
-            // input focus/blur cannot take effect when display: none
-            opacity: 0;
-            width: 0;
-            margin-right: 0 !important;
-        }
     }
 
     &-inner-checked {
@@ -196,6 +187,15 @@ $module: #{$prefix}-checkbox;
             flex-shrink: 0;
         }
 
+        .#{$module}-inner-pureCardType {
+            // Reasons to use opacity:0 & width: 0 instead of display: none
+            // The a11y keyboard focus event of the checkbox depends on the implementation of the input focus/blur event
+            // input focus/blur cannot take effect when display: none
+            opacity: 0;
+            width: 0;
+            margin-right: 0;
+        }
+
         .#{$module}-addon {
             font-weight: $font-checkbox_cardType_addon-fontWeight;
             font-size: $font-checkbox_cardType_addon-size;

package/checkbox/checkboxFoundation.ts

@@ -170,6 +170,7 @@ export interface BaseCheckboxProps {
     extra?: any;
     addonId?: string;
     extraId?: string;
+    preventScroll?: boolean;
 }
 
 export default CheckboxFoundation;

package/datePicker/foundation.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable max-len, max-depth,  */
 import { format, isValid, isSameSecond, isEqual as isDateEqual, isDate } from 'date-fns';
-import { get, isObject, isString, isEqual } from 'lodash';
+import { get, isObject, isString, isEqual, isFunction } from 'lodash';
 
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { isValidDate, isTimestamp } from './_utils/index';
@@ -162,6 +162,7 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     localeCode?: string;
     rangeSeparator?: string;
     insetInput?: boolean;
+    preventScroll?: boolean;
 }
 
 export interface DatePickerFoundationState {
@@ -245,6 +246,23 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         this._adapter.updateInputValue(null);
         this._adapter.updateValue(result);
         this.resetCachedSelectedValue(result);
+        this.initRangeInputFocus(result);
+
+        if (this._adapter.needConfirm()) {
+            this._adapter.updateCachedSelectedValue(result);
+        }
+    }
+
+    /**
+     * 如果用户传了一个空的 value，需要把 range input focus 设置为 rangeStart，这样用户可以清除完之后继续从开始选择
+     * 
+     * If the user passes an empty value, you need to set the range input focus to rangeStart, so that the user can continue to select from the beginning after clearing
+     */
+    initRangeInputFocus(result: Date[]) {
+        const { triggerRender } = this.getProps();
+        if (this._isRangeType() && isFunction(triggerRender) && result.length === 0) {
+            this._adapter.setRangeInputFocus('rangeStart');
+        }
     }
 
     parseWithTimezone(value: ValueType, timeZone: string | number, prevTimeZone: string | number) {
@@ -1285,7 +1303,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * @returns
      */
     handleTriggerWrapperClick(e: any) {
-        const { disabled } = this._adapter.getProps();
+        const { disabled, triggerRender } = this._adapter.getProps();
         const { rangeInputFocus } = this._adapter.getStates();
         if (disabled) {
             return;
@@ -1297,12 +1315,18 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
          * - When type is not range type, Input component will automatically focus in the same case
          * - isEventTarget is used to judge whether the event is a bubbling event
          */
-        if (this._isRangeType() && !rangeInputFocus && this._adapter.isEventTarget(e)) {
-            setTimeout(() => {
-                // using setTimeout get correct state value 'rangeInputFocus'
-                this.handleInputFocus(e, 'rangeStart');
-                this.openPanel();
-            }, 0);
+        if (this._isRangeType() && !rangeInputFocus) {
+            if (this._adapter.isEventTarget(e)) {
+                setTimeout(() => {
+                    // using setTimeout get correct state value 'rangeInputFocus'
+                    this.handleInputFocus(e, 'rangeStart');
+                }, 0);
+            } else if (isFunction(triggerRender)) {
+                // 如果是 triggerRender 场景，因为没有 input，因此打开面板时默认 focus 在 rangeStart
+                // If it is a triggerRender scene, because there is no input, the default focus is rangeStart when the panel is opened
+                this._adapter.setRangeInputFocus('rangeStart');
+            }
+            this.openPanel();
         } else {
             this.openPanel();
         }

package/datePicker/monthsGridFoundation.ts

@@ -724,9 +724,8 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
             /**
              * no need to check focus then
              *  - dateRange and isDateRangeAndHasOffset
-             *  - dateRange and triggerRender
              */
-            const needCheckFocusRecord = !(type === 'dateRange' && (isDateRangeAndHasOffset || isFunction(triggerRender)));
+            const needCheckFocusRecord = !(type === 'dateRange' && isDateRangeAndHasOffset);
             this._adapter.notifySelectedChange(date, { needCheckFocusRecord });
         }
     }

package/dropdown/dropdown.scss

@@ -50,6 +50,10 @@ $module: #{$prefix}-dropdown;
         &:not(.#{$module}-item-active):active {
             background-color: $color-dropdown_item-bg-active;
         }
+        &:focus-visible {
+            background-color: $color-dropdown_item-bg-hover;
+            outline: 0;
+        }
         &-icon {
             display: inline-flex;
             align-items: center;

package/dropdown/foundation.ts

@@ -1,5 +1,5 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-
+import { handlePrevent, setFocusToFirstItem, setFocusToLastItem } from '../utils/a11y';
 
 export interface DropdownAdapter extends Partial<DefaultAdapter> {
     setPopVisible(visible: boolean): void;
@@ -11,4 +11,41 @@ export default class DropdownFoundation extends BaseFoundation<DropdownAdapter>
         this._adapter.setPopVisible(visible);
         this._adapter.notifyVisibleChange(visible);
     }
+
+    getMenuItemNodes(target: any): HTMLElement[] {
+        const id = target.attributes['data-popupId'].value;
+        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(target: any): void {
+        const menuItemNodes = this.getMenuItemNodes(target);
+        menuItemNodes && setFocusToFirstItem(menuItemNodes);
+    }
+
+    setFocusToLastMenuItem(target: any): void {
+        const menuItemNodes = this.getMenuItemNodes(target);
+        menuItemNodes && setFocusToLastItem(menuItemNodes);
+    }
+
+    handleKeyDown(event: any): void {
+        switch (event.key) {
+            case ' ':
+            case 'Enter':
+                event.target.click();
+                handlePrevent(event);
+                break;
+            case 'ArrowDown':
+                this.setFocusToFirstMenuItem(event.target);
+                handlePrevent(event);
+                break;
+            case 'ArrowUp':
+                this.setFocusToLastMenuItem(event.target);
+                handlePrevent(event);
+                break;
+            default:
+                break;
+        }
+    }
 }

package/dropdown/menuFoundation.ts

@@ -0,0 +1,77 @@
+
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { handlePrevent, isPrintableCharacter, findIndexByCharacter, getAncestorNodeByRole, getMenuButton, setFocusToFirstItem, setFocusToItem, setFocusToNextMenuitem, setFocusToPreviousMenuItem } from '../utils/a11y';
+
+
+export default class DropdownMenuFoundation extends BaseFoundation<Partial<DefaultAdapter>> {
+    menuItemNodes: HTMLElement[] = null;
+    firstChars: string[] = [];
+
+    // if trigger is click, auto focus to the first menu item
+    autoFocus(ulElement: any): void {
+        const trigger = this._adapter.getContext('trigger');
+        if (trigger === 'click'){
+            // find all non-disabled li under this menu and set focus to the first menu
+            this.menuItemNodes = [...ulElement.getElementsByTagName('li')].filter(item => item.ariaDisabled !== "true");
+            setFocusToFirstItem(this.menuItemNodes);
+        }
+    }
+
+    handleEscape(menu: Element): void {
+        const trigger = this._adapter.getContext('trigger');
+        if (trigger === 'custom'){
+            const menuButton = menu && getMenuButton(document.querySelectorAll(`[data-popupId]`), menu.id); 
+            menuButton.focus();
+        }
+    }
+
+    setFocusByFirstCharacter(curItem: any, char: string): void {
+        const index = findIndexByCharacter(this.menuItemNodes, curItem, this.firstChars, char);
+        
+        if (index >= 0) {
+            setFocusToItem(this.menuItemNodes, this.menuItemNodes[index]);
+        }
+    }
+
+    onMenuKeydown(event: any): void {
+        const menu = getAncestorNodeByRole(event.target, 'tooltip');
+        
+        if (!this.menuItemNodes){
+            this.menuItemNodes = [...(event.target.parentNode).getElementsByTagName('li')].filter(item => item.ariaDisabled !== "true");
+        }
+
+        if (this.firstChars.length === 0){
+            this.menuItemNodes.forEach((item: Element) => {
+                this.firstChars.push(item.textContent.trim()[0].toLowerCase());
+            });
+        }
+
+        // get the currently focused menu item
+        const curItem = this.menuItemNodes.find(item => item.tabIndex === 0);
+        
+        switch (event.key) {
+            case ' ':
+            case 'Enter':
+                event.target.click();
+                handlePrevent(event);
+                break;
+            case 'Escape':
+                this.handleEscape(menu);
+                break;
+            case 'ArrowUp':
+                setFocusToPreviousMenuItem(this.menuItemNodes, curItem);
+                handlePrevent(event);
+                break;
+            case 'ArrowDown':
+                setFocusToNextMenuitem(this.menuItemNodes, curItem);
+                handlePrevent(event);
+                break;
+            default:
+                if (isPrintableCharacter(event.key)) {
+                    this.setFocusByFirstCharacter(curItem, event.key);
+                    handlePrevent(event);
+                }
+                break;
+        }
+    }
+}

package/lib/cjs/cascader/cascader.css

@@ -149,6 +149,12 @@
 .semi-cascader-selection .semi-tagInput .semi-input-wrapper-large {
   height: 38px;
 }
+.semi-cascader-selection-text-inactive {
+  color: var(--semi-color-text-2);
+}
+.semi-cascader-selection-text-hide {
+  display: none;
+}
 .semi-cascader-arrow, .semi-cascader-clearbtn {
   display: inline-flex;
   align-items: center;
@@ -242,8 +248,17 @@
 }
 .semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper {
   width: 100%;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  position: relative;
 }
 .semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper .semi-input-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: none;
+  background-color: transparent;
   height: 100%;
   width: 100%;
   border: none;

package/lib/cjs/cascader/cascader.scss

@@ -175,6 +175,17 @@ $module: #{$prefix}-cascader;
                 height: $height-cascader_selection_tagInput_input_large;
             }
         }
+
+        &-text {
+
+            &-inactive {
+                color: $color-cascader_selection_text_inactive;
+            }
+
+            &-hide {
+                display: none;
+            }
+        }
     }
 
     &-arrow,
@@ -294,8 +305,17 @@ $module: #{$prefix}-cascader;
     .#{$module}-selection {
         .#{$module}-search-wrapper {
             width: 100%;
+            height: $height-cascader_selection_wrapper;
+            display: flex;
+            align-items: center;
+            position: relative;
 
             .#{$prefix}-input-wrapper {
+                position: absolute;
+                top: 0;
+                left: 0;
+                border: none;
+                background-color: transparent;
                 height: 100%;
                 width: 100%;
                 border: $color-cascader_input-border-default;

package/lib/cjs/cascader/foundation.d.ts

@@ -99,6 +99,7 @@ export interface BasicCascaderProps {
     disableStrictly?: boolean;
     leafOnly?: boolean;
     enableLeafClick?: boolean;
+    preventScroll?: boolean;
     onClear?: () => void;
     triggerRender?: (props: BasicTriggerRenderProps) => any;
     onListScroll?: (e: any, panel: BasicScrollPanelProps) => void;
@@ -136,6 +137,7 @@ export interface BasicCascaderInnerData {
     isFocus?: boolean;
     isInput?: boolean;
     disabledKeys?: Set<string>;
+    showInput?: boolean;
 }
 export interface CascaderAdapter extends DefaultAdapter<BasicCascaderProps, BasicCascaderInnerData> {
     notifyClear?: () => void;
@@ -160,6 +162,8 @@ export interface CascaderAdapter extends DefaultAdapter<BasicCascaderProps, Basi
     notifyOnLoad: (newLoadedKeys: Set<string>, data: BasicCascaderData) => void;
     notifyListScroll: (e: any, panel: BasicScrollPanelProps) => void;
     notifyOnExceed: (data: BasicEntity[]) => void;
+    toggleInputShow: (show: boolean, cb: () => void) => void;
+    updateFocusState: (focus: boolean) => void;
 }
 export default class CascaderFoundation extends BaseFoundation<CascaderAdapter, BasicCascaderProps, BasicCascaderInnerData> {
     constructor(adapter: CascaderAdapter);
@@ -187,6 +191,8 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     open(): void;
     reCalcActiveKeys(): void;
     close(e: any, key?: string): void;
+    toggle2SearchInput(isShow: boolean): void;
+    focusInput(): void;
     getMergedMotion: () => any;
     handleItemClick(e: any, item: BasicEntity | BasicData): void;
     handleItemHover(e: any, item: BasicEntity): void;

package/lib/cjs/cascader/foundation.js

@@ -423,10 +423,16 @@ class CascaderFoundation extends _foundation.default {
   open() {
     const filterable = this._isFilterable();
 
+    const {
+      multiple
+    } = this.getProps();
+
     this._adapter.openMenu();
 
     if (filterable) {
       this._clearInput();
+
+      !multiple && this.toggle2SearchInput(true);
     }
 
     if (this._isControlledComponent()) {
@@ -486,11 +492,28 @@ class CascaderFoundation extends _foundation.default {
       this._adapter.updateStates({
         inputValue
       });
+
+      !multiple && this.toggle2SearchInput(false);
+      !multiple && this._adapter.updateFocusState(false);
     }
 
     this._notifyBlur(e);
   }
 
+  toggle2SearchInput(isShow) {
+    if (isShow) {
+      this._adapter.toggleInputShow(isShow, () => this.focusInput());
+    } else {
+      this._adapter.toggleInputShow(isShow, () => undefined);
+    }
+  }
+
+  focusInput() {
+    this._adapter.focusInput();
+
+    this._adapter.updateFocusState(true);
+  }
+
   handleItemClick(e, item) {
     const isDisabled = this._isDisabled();
 

package/lib/cjs/cascader/variables.scss

@@ -54,6 +54,7 @@ $spacing-cascader_clearBtn-marginRight: 12px; // 级联选择触发器清空按
 
 $color-cascader_selection_n-text-default: var(--semi-color-text-0); // 超出 maxTagCount 后，+n 的文字默认颜色
 $color-cascader_selection_n-text-disabled: var(--semi-color-disabled-text); // 超出 maxTagCount 后，+n 的文字disabled颜色
+$color-cascader_selection_text_inactive: var(--semi-color-text-2); // 级联选择单选inpu输入框和text并存时，text颜色
 $color-cascader_selection-text-default: var(--semi-color-text-0); // 级联选择选中项文字颜色
 $color-cascader_placeholder-text-default: var(--semi-color-text-2); // 级联选择未选中项文字颜色
 $color-cascader-icon-default: var(--semi-color-text-2); // 级联选择图标颜色 - 默认
@@ -94,6 +95,7 @@ $height-cascader_option_list: 180px; // 级联选择菜单高度
 $height-cascader_selection_tagInput_input_small: 22px;
 $height-cascader_selection_tagInput_input_default: 30px;
 $height-cascader_selection_tagInput_input_large: 38px;
+$height-cascader_selection_wrapper: 30px;
 
 $spacing-cascader_text-marginX: $spacing-base-tight; // 级联选择 prefix/suffix 文字水平内间距
 $spacing-cascader_icon-marginX: $spacing-tight; // 级联选择 prefix/suffix 图标水平内间距

package/lib/cjs/checkbox/checkbox.css

@@ -75,11 +75,6 @@
 .semi-checkbox-inner-display .semi-icon {
   font-size: 16px;
 }
-.semi-checkbox-inner-pureCardType {
-  opacity: 0;
-  width: 0;
-  margin-right: 0 !important;
-}
 .semi-checkbox-inner-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary);
   color: var(--semi-color-white);
@@ -138,6 +133,11 @@
 .semi-checkbox-cardType .semi-checkbox-inner-display {
   background: var(--semi-color-white);
 }
+.semi-checkbox-cardType .semi-checkbox-inner-pureCardType {
+  opacity: 0;
+  width: 0;
+  margin-right: 0;
+}
 .semi-checkbox-cardType .semi-checkbox-addon {
   font-weight: 600;
   font-size: 14px;

package/lib/cjs/checkbox/checkbox.scss

@@ -101,15 +101,6 @@ $module: #{$prefix}-checkbox;
                 font-size: 16px;
             }
         }
-
-        &-pureCardType {
-            // Reasons to use opacity:0 & width: 0 instead of display: none
-            // The a11y keyboard focus event of the checkbox depends on the implementation of the input focus/blur event
-            // input focus/blur cannot take effect when display: none
-            opacity: 0;
-            width: 0;
-            margin-right: 0 !important;
-        }
     }
 
     &-inner-checked {
@@ -196,6 +187,15 @@ $module: #{$prefix}-checkbox;
             flex-shrink: 0;
         }
 
+        .#{$module}-inner-pureCardType {
+            // Reasons to use opacity:0 & width: 0 instead of display: none
+            // The a11y keyboard focus event of the checkbox depends on the implementation of the input focus/blur event
+            // input focus/blur cannot take effect when display: none
+            opacity: 0;
+            width: 0;
+            margin-right: 0;
+        }
+
         .#{$module}-addon {
             font-weight: $font-checkbox_cardType_addon-fontWeight;
             font-size: $font-checkbox_cardType_addon-size;

package/lib/cjs/checkbox/checkboxFoundation.d.ts

@@ -62,5 +62,6 @@ export interface BaseCheckboxProps {
     extra?: any;
     addonId?: string;
     extraId?: string;
+    preventScroll?: boolean;
 }
 export default CheckboxFoundation;

package/lib/cjs/datePicker/foundation.d.ts

@@ -131,6 +131,7 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     localeCode?: string;
     rangeSeparator?: string;
     insetInput?: boolean;
+    preventScroll?: boolean;
 }
 export interface DatePickerFoundationState {
     panelShow: boolean;
@@ -184,6 +185,12 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
     initFromProps({ value, timeZone, prevTimeZone }: Pick<DatePickerFoundationProps, 'value' | 'timeZone'> & {
         prevTimeZone?: string | number;
     }): void;
+    /**
+     * 如果用户传了一个空的 value，需要把 range input focus 设置为 rangeStart，这样用户可以清除完之后继续从开始选择
+     *
+     * If the user passes an empty value, you need to set the range input focus to rangeStart, so that the user can continue to select from the beginning after clearing
+     */
+    initRangeInputFocus(result: Date[]): void;
     parseWithTimezone(value: ValueType, timeZone: string | number, prevTimeZone: string | number): Date[];
     _isMultiple(): boolean;
     /**