@douyinfe/semi-foundation 2.5.1 → 2.7.0-beta.0

package/datePicker/foundation.ts

@@ -12,10 +12,12 @@ import { getDefaultFormatTokenByType } from './_utils/getDefaultFormatToken';
 import { strings } from './constants';
 import { strings as inputStrings } from '../input/constants';
 
-import { Type, DateInputFoundationProps } from './inputFoundation';
+import { Type, DateInputFoundationProps, InsetInputValue } from './inputFoundation';
 import { MonthsGridFoundationProps } from './monthsGridFoundation';
 import { WeekStartNumber } from './_utils/getMonthTable';
 import { ArrayElement, Motion } from '../utils/type';
+import getInsetInputFormatToken from './_utils/getInsetInputFormatToken';
+import getInsetInputValueFromInsetInputStr from './_utils/getInsetInputValueFromInsetInputStr';
 
 export type ValidateStatus = ArrayElement<typeof strings.STATUS>;
 export type InputSize = ArrayElement<typeof strings.SIZE_SET>;
@@ -92,6 +94,8 @@ export interface RenderProps {
     triggerRender?: TriggerRenderType;
 }
 
+export type RangeType = 'rangeStart' | 'rangeEnd' | false;
+
 export interface EventHandlerProps {
     onCancel?: OnCancelType;
     onChange?: OnChangeType;
@@ -104,7 +108,7 @@ export interface EventHandlerProps {
     // onClear?: React.MouseEventHandler<HTMLDivElement>;
     onClear?: (e: any) => void;
     // onFocus?: React.MouseEventHandler<HTMLInputElement>;
-    onFocus?: (e: any, rangType: 'rangeStart' | 'rangeEnd') => void;
+    onFocus?: (e: any, rangType: RangeType) => void;
     onPresetClick?: OnPresetClickType;
 }
 
@@ -157,18 +161,21 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     dateFnsLocale?: any;
     localeCode?: string;
     rangeSeparator?: string;
+    insetInput?: boolean;
 }
 
 export interface DatePickerFoundationState {
     panelShow: boolean;
     isRange: boolean;
     inputValue: string;
-    value: ValueType;
-    cachedSelectedValue: ValueType;
+    value: Date[];
+    cachedSelectedValue: Date[];
     prevTimeZone: string | number;
     motionEnd: boolean;
-    rangeInputFocus: 'rangeStart' | 'rangeEnd' | boolean;
+    rangeInputFocus: RangeType;
     autofocus: boolean;
+    insetInputValue: InsetInputValue;
+    triggerDisabled: boolean;
 }
 
 export { Type, DateInputFoundationProps };
@@ -185,9 +192,9 @@ export interface DatePickerAdapter extends DefaultAdapter<DatePickerFoundationPr
     notifyConfirm: DatePickerFoundationProps['onConfirm'];
     notifyOpenChange: DatePickerFoundationProps['onOpenChange'];
     notifyPresetsClick: DatePickerFoundationProps['onPresetClick'];
-    updateValue: (value: ValueType) => void;
+    updateValue: (value: Date[]) => void;
     updatePrevTimezone: (prevTimeZone: string | number) => void;
-    updateCachedSelectedValue: (cachedSelectedValue: ValueType) => void;
+    updateCachedSelectedValue: (cachedSelectedValue: Date[]) => void;
     updateInputValue: (inputValue: string) => void;
     needConfirm: () => boolean;
     typeIsYearOrMonth: () => boolean;
@@ -195,6 +202,9 @@ export interface DatePickerAdapter extends DefaultAdapter<DatePickerFoundationPr
     setRangeInputFocus: (rangeInputFocus: DatePickerFoundationState['rangeInputFocus']) => void;
     couldPanelClosed: () => boolean;
     isEventTarget: (e: any) => boolean;
+    updateInsetInputValue: (insetInputValue: InsetInputValue) => void;
+    setInsetInputFocus: () => void;
+    setTriggerDisabled: (disabled: boolean) => void;
 }
 
 
@@ -350,6 +360,16 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         }
     }
 
+    /**
+     * clear inset input value when close panel
+     */
+    clearInsetInputValue() {
+        const { insetInput } = this._adapter.getProps();
+        if (insetInput) {
+            this._adapter.updateInsetInputValue(null);
+        }
+    }
+
     resetCachedSelectedValue(willUpdateDates?: Date[]) {
         const { value, cachedSelectedValue } = this._adapter.getStates();
         const newCachedSelectedValue = Array.isArray(willUpdateDates) ? willUpdateDates : value;
@@ -380,6 +400,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         // range type picker, closing panel requires the following side effects
         this.rangeTypeSideEffectsWhenClosePanel(inputValue, willUpdateDates as Date[]);
         this.needConfirmSideEffectsWhenClosePanel(willUpdateDates as Date[]);
+        this.clearInsetInputValue();
         this._adapter.notifyOpenChange(false);
         this._adapter.notifyBlur(e);
     }
@@ -428,6 +449,37 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         }
     }
 
+    /**
+     * inset input 变化时需要更新以下 state 状态
+     *  - insetInputValue（总是）
+     *  - inputValue（可以解析为合法日期时）
+     *  - value（可以解析为合法日期时）
+     */
+    handleInsetInputChange(options: { insetInputStr: string, format: string, insetInputValue: InsetInputValue }) {
+        const { insetInputStr, format, insetInputValue } = options;
+        const _isMultiple = this._isMultiple();
+        const result = _isMultiple ? this.parseMultipleInput(insetInputStr, format) : this.parseInput(insetInputStr, format);
+        const { value: stateValue } = this.getStates();
+
+        if ((result && result.length)) {
+            const changedDates = this._getChangedDates(result);
+            if (!this._someDateDisabled(changedDates)) {
+                if (this._adapter.needConfirm()) {
+                    this._adapter.updateCachedSelectedValue(result);
+                }
+                if (!isEqual(result, stateValue)) {
+                    if (!this._isControlledComponent()) {
+                        this._adapter.updateValue(result);
+                    }
+                    this._notifyChange(result);
+                }
+                const triggerInput = _isMultiple ? this.formatMultipleDates(result) : this.formatDates(result);
+                this._adapter.updateInputValue(triggerInput);
+            }
+        }
+        this._adapter.updateInsetInputValue(insetInputValue);
+    }
+
     /**
      * Input box blur
      * @param {String} input
@@ -479,7 +531,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         }
     }
 
-    handleSetRangeFocus(rangeInputFocus: boolean | 'rangeStart' | 'rangeEnd') {
+    handleSetRangeFocus(rangeInputFocus: RangeType) {
         this._adapter.setRangeInputFocus(rangeInputFocus);
     }
 
@@ -546,14 +598,14 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * @param {string} input
      * @returns  {Date [] | '}
      */
-    parseInput(input = '') {
+    parseInput(input = '', format?: string) {
         let result: Date[] = [];
         // console.log(input);
         const { dateFnsLocale, rangeSeparator } = this.getProps();
 
         if (input && input.length) {
             const type = this.getProp('type');
-            const formatToken = this.getProp('format') || getDefaultFormatTokenByType(type);
+            const formatToken = format || this.getProp('format') || getDefaultFormatTokenByType(type);
             let parsedResult,
                 formatedInput;
             const nowDate = new Date();
@@ -636,13 +688,13 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * @param {Date[]} dates
      * @returns {string}
      */
-    formatDates(dates: Date[] = []) {
+    formatDates(dates: Date[] = [], customFormat?: string) {
         let str = '';
         const rangeSeparator = this.getProp('rangeSeparator');
 
         if (Array.isArray(dates) && dates.length) {
             const type = this.getProp('type');
-            const formatToken = this.getProp('format') || getDefaultFormatTokenByType(type);
+            const formatToken = customFormat || this.getProp('format') || getDefaultFormatTokenByType(type);
 
             switch (type) {
                 case 'date':
@@ -679,7 +731,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * @param {Date[]} dates
      * @returns {string}
      */
-    formatMultipleDates(dates: Date[] = [], separator: string = strings.DEFAULT_SEPARATOR_MULTIPLE) {
+    formatMultipleDates(dates: Date[] = [], separator: string = strings.DEFAULT_SEPARATOR_MULTIPLE, customFormat?: string) {
         const strs = [];
         if (Array.isArray(dates) && dates.length) {
             const type = this.getProp('type');
@@ -688,12 +740,12 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
                 case 'date':
                 case 'dateTime':
                 case 'month':
-                    dates.forEach(date => strs.push(this.formatDates([date])));
+                    dates.forEach(date => strs.push(this.formatDates([date], customFormat)));
                     break;
                 case 'dateRange':
                 case 'dateTimeRange':
                     for (let i = 0; i < dates.length; i += 2) {
-                        strs.push(this.formatDates(dates.slice(i, i + 2)));
+                        strs.push(this.formatDates(dates.slice(i, i + 2), customFormat));
                     }
                     break;
                 default:
@@ -735,7 +787,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * @param {*} options
      */
     handleSelectedChange(value: Date[], options?: { fromPreset?: boolean; needCheckFocusRecord?: boolean }) {
-        const type = this.getProp('type');
+        const { type, format, rangeSeparator, insetInput } = this._adapter.getProps();
         const { value: stateValue } = this.getStates();
         const controlled = this._isControlledComponent();
         const fromPreset = isObject(options) ? options.fromPreset : options;
@@ -754,9 +806,14 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         const dates = Array.isArray(value) ? [...value] : value ? [value] : [];
         const changedDates = this._getChangedDates(dates);
 
-        let inputValue;
+        let inputValue, insetInputValue;
         if (!this._someDateDisabled(changedDates)) {
             inputValue = this._isMultiple() ? this.formatMultipleDates(dates) : this.formatDates(dates);
+            if (insetInput) {
+                const insetInputFormatToken = getInsetInputFormatToken({ format, type });
+                const insetInputStr = this._isMultiple() ? this.formatMultipleDates(dates, undefined, insetInputFormatToken) : this.formatDates(dates, insetInputFormatToken);
+                insetInputValue = getInsetInputValueFromInsetInputStr({ inputValue: insetInputStr, type, rangeSeparator  });
+            }
             const isRangeTypeAndInputIncomplete = this._isRangeType() && !this._isRangeValueComplete(dates);
             /**
              * If the input is incomplete when under control, the notifyChange is not triggered because
@@ -769,14 +826,19 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
                 if (isRangeTypeAndInputIncomplete) {
                     // do not change value when selected value is incomplete
                     this._adapter.updateInputValue(inputValue);
+                    this._adapter.updateInsetInputValue(insetInputValue);
                     return;
                 } else {
-                    (!controlled || fromPreset) && this._updateValueAndInput(dates, true, inputValue);
+                    if (!controlled || fromPreset) {
+                        this._updateValueAndInput(dates, true, inputValue);
+                        this._adapter.updateInsetInputValue(insetInputValue);
+                    }
                 }
             }
             if (!controlled && this._adapter.needConfirm()) {
                 // select date only change inputValue when needConfirm is true
                 this._adapter.updateInputValue(inputValue);
+                this._adapter.updateInsetInputValue(insetInputValue);
                 // if inputValue is not complete, don't notifyChange
                 if (isRangeTypeAndInputIncomplete) {
                     return;
@@ -810,7 +872,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
     }
 
     handleConfirm() {
-        const { cachedSelectedValue, value } = this.getStates();
+        const { cachedSelectedValue, value } = this._adapter.getStates();
         const isRangeValueComplete = this._isRangeValueComplete(cachedSelectedValue);
         const newValue = isRangeValueComplete ? cachedSelectedValue : value;
         if (this._adapter.needConfirm() && !this._isControlledComponent()) {
@@ -1121,4 +1183,19 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
             this.openPanel();
         }
     }
+
+    handlePanelVisibleChange(visible: boolean) {
+        if (visible) {
+            this._adapter.setInsetInputFocus();
+            /**
+             * After the panel is closed, the trigger input is disabled
+             * 面板关闭后，trigger input 禁用
+             */
+            setTimeout(() => {
+                this._adapter.setTriggerDisabled(true);
+            }, 0);
+        } else {
+            this._adapter.setTriggerDisabled(false);
+        }
+    }
 }

package/datePicker/inputFoundation.ts

@@ -1,8 +1,13 @@
 /* eslint-disable max-len */
+import { cloneDeep, isObject, set } from 'lodash';
+
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-import { BaseValueType, ValidateStatus, ValueType } from './foundation';
+import { BaseValueType, ValidateStatus } from './foundation';
 import { formatDateValues } from './_utils/formatter';
 import { getDefaultFormatTokenByType } from './_utils/getDefaultFormatToken';
+import getInsetInputFormatToken from './_utils/getInsetInputFormatToken';
+import getInsetInputValueFromInsetInputStr from './_utils/getInsetInputValueFromInsetInputStr';
+import { strings } from './constants';
 
 const KEY_CODE_ENTER = 'Enter';
 const KEY_CODE_TAB = 'Tab';
@@ -10,6 +15,7 @@ const KEY_CODE_TAB = 'Tab';
 
 export type Type = 'date' | 'dateRange' | 'year' | 'month' | 'dateTime' | 'dateTimeRange';
 export type RangeType = 'rangeStart' | 'rangeEnd';
+export type PanelType = 'left' | 'right';
 
 export interface DateInputEventHandlerProps {
     onClick?: (e: any) => void;
@@ -20,6 +26,7 @@ export interface DateInputEventHandlerProps {
     onClear?: (e: any) => void;
     onRangeInputClear?: (e: any) => void;
     onRangeEndTabPress?: (e: any) => void;
+    onInsetInputChange?: (options: InsetInputChangeProps) => void;
 }
 
 export interface DateInputElementProps {
@@ -29,10 +36,9 @@ export interface DateInputElementProps {
 
 export interface DateInputFoundationProps extends DateInputElementProps, DateInputEventHandlerProps {
     [x: string]: any;
-    value?: ValueType;
+    value?: BaseValueType[];
     disabled?: boolean;
     type?: Type;
-    multiple?: boolean;
     showClear?: boolean;
     format?: string;
     inputStyle?: React.CSSProperties;
@@ -40,12 +46,41 @@ export interface DateInputFoundationProps extends DateInputElementProps, DateInp
     validateStatus?: ValidateStatus;
     prefixCls?: string;
     rangeSeparator?: string;
+    panelType?: PanelType;
+    insetInput?: boolean;
+    insetInputValue?: InsetInputValue;
+    density?: typeof strings.DENSITY_SET[number];
+}
+
+export interface InsetInputValue {
+    monthLeft: {
+        dateInput: string;
+        timeInput: string;
+    },
+    monthRight: {
+        dateInput: string;
+        timeInput: string;
+    }
+}
+
+export interface InsetInputChangeFoundationProps {
+    value: string;
+    insetInputValue: InsetInputValue;
+    event: any;
+    valuePath: string;
+}
+
+export interface InsetInputChangeProps { 
+    insetInputStr: string;
+    format: string;
+    insetInputValue: InsetInputValue;
 }
 
 export interface DateInputAdapter extends DefaultAdapter {
     updateIsFocusing: (isFocusing: boolean) => void;
     notifyClick: DateInputFoundationProps['onClick'];
     notifyChange: DateInputFoundationProps['onChange'];
+    notifyInsetInputChange: DateInputFoundationProps['onInsetInputChange'];
     notifyEnter: DateInputFoundationProps['onEnterPress'];
     notifyBlur: DateInputFoundationProps['onBlur'];
     notifyClear: DateInputFoundationProps['onClear'];
@@ -110,9 +145,9 @@ export default class InputFoundation extends BaseFoundation<DateInputAdapter> {
         this._adapter.notifyRangeInputFocus(e, rangeType);
     }
 
-    formatShowText(value: BaseValueType[]) {
+    formatShowText(value: BaseValueType[], customFormat?: string) {
         const { type, dateFnsLocale, format, rangeSeparator } = this._adapter.getProps();
-        const formatToken = format || getDefaultFormatTokenByType(type);
+        const formatToken = customFormat || format || getDefaultFormatTokenByType(type);
         let text = '';
         switch (type) {
             case 'date':
@@ -135,4 +170,97 @@ export default class InputFoundation extends BaseFoundation<DateInputAdapter> {
         }
         return text;
     }
+
+    handleInsetInputChange(options: InsetInputChangeFoundationProps) {
+        const { value, valuePath, insetInputValue } = options;
+        const { format, type } = this._adapter.getProps();
+        const insetFormatToken = getInsetInputFormatToken({ type, format });
+        const newInsetInputValue = set(cloneDeep(insetInputValue), valuePath, value);
+        const newInputValue = this.concatInsetInputValue({ insetInputValue: newInsetInputValue });
+        this._adapter.notifyInsetInputChange({ insetInputValue: newInsetInputValue, format: insetFormatToken, insetInputStr: newInputValue });
+    }
+
+    /**
+     * 只有传入的 format 符合 formatReg 时，才会使用用户传入的 format
+     * 否则会使用默认的 format 作为 placeholder
+     * 
+     * The format passed in by the user will be used only if the incoming format conforms to formatReg
+     * Otherwise the default format will be used as placeholder
+     */
+    getInsetInputPlaceholder() {
+        const { type, format } = this._adapter.getProps();
+        const insetInputFormat = getInsetInputFormatToken({ type, format });
+        let datePlaceholder, timePlaceholder;
+
+        switch (type) {
+            case 'date':
+            case 'month':
+            case 'dateRange':
+                datePlaceholder = insetInputFormat;
+                break;
+            case 'dateTime':
+            case 'dateTimeRange':
+                [datePlaceholder, timePlaceholder] = insetInputFormat.split(' ');
+                break;
+        }
+
+        return ({
+            datePlaceholder,
+            timePlaceholder,
+        });
+    }
+
+    /**
+     * 从当前日期值或 inputValue 中解析出 insetInputValue
+     * 
+     * Parse out insetInputValue from current date value or inputValue
+     */
+    getInsetInputValue({ value, insetInputValue } : { value: BaseValueType[]; insetInputValue: InsetInputValue }) {
+        const { type, rangeSeparator, format } = this._adapter.getProps();
+
+        let inputValueStr = '';
+        if (isObject(insetInputValue)) {
+            inputValueStr = this.concatInsetInputValue({ insetInputValue });
+        } else {
+            const insetInputFormat = getInsetInputFormatToken({ format, type });
+            inputValueStr = this.formatShowText(value, insetInputFormat);
+        }
+
+        const newInsetInputValue = getInsetInputValueFromInsetInputStr({ inputValue: inputValueStr, type, rangeSeparator });
+        return newInsetInputValue;
+    }
+
+    concatInsetDateAndTime({ date, time }) {
+        return `${date} ${time}`;
+    }
+
+    concatInsetDateRange({ rangeStart, rangeEnd }) {
+        const { rangeSeparator } = this._adapter.getProps();
+        return `${rangeStart}${rangeSeparator}${rangeEnd}`;
+    }
+
+    concatInsetInputValue({ insetInputValue }: { insetInputValue: InsetInputValue }) {
+        const { type } = this._adapter.getProps();
+        let inputValue = '';
+
+        switch (type) {
+            case 'date':
+            case 'month':
+                inputValue = insetInputValue.monthLeft.dateInput;
+                break;
+            case 'dateRange':
+                inputValue = this.concatInsetDateRange({ rangeStart: insetInputValue.monthLeft.dateInput, rangeEnd: insetInputValue.monthRight.dateInput });
+                break;
+            case 'dateTime':
+                inputValue = this.concatInsetDateAndTime({ date: insetInputValue.monthLeft.dateInput, time: insetInputValue.monthLeft.timeInput });
+                break;
+            case 'dateTimeRange':
+                const rangeStart = this.concatInsetDateAndTime({ date: insetInputValue.monthLeft.dateInput, time: insetInputValue.monthLeft.timeInput });
+                const rangeEnd = this.concatInsetDateAndTime({ date: insetInputValue.monthRight.dateInput, time: insetInputValue.monthRight.timeInput });
+                inputValue = this.concatInsetDateRange({ rangeStart, rangeEnd });
+                break;
+        }
+
+        return inputValue;
+    }
 }

package/datePicker/monthFoundation.ts

@@ -28,6 +28,7 @@ export interface MonthFoundationProps {
     focusRecordsRef: any;
     locale: any;
     localeCode: string;
+    multiple: boolean;
 }
 
 export type MonthDayInfo = {

package/datePicker/monthsGridFoundation.ts

@@ -86,6 +86,7 @@ export interface MonthsGridFoundationProps extends MonthsGridElementProps {
     isAnotherPanelHasOpened?: (currentRangeInput: 'rangeStart' | 'rangeEnd') => boolean;
     focusRecordsRef?: any;
     triggerRender?: (props: Record<string, any>) => any;
+    insetInput: boolean;
 }
 
 export interface MonthInfo {
@@ -218,6 +219,7 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
     _initDatePickerFromValue(values: BaseValueType[], refreshPicker = true) {
         const monthLeft = this.getState('monthLeft');
         const newMonthLeft = { ...monthLeft };
+        // REMOVE:
         this._adapter.updateMonthOnLeft(newMonthLeft);
         const newSelected = new Set<string>();
         if (!this._isMultiple()) {
@@ -230,6 +232,7 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
         if (refreshPicker) {
             this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, values[0] || newMonthLeft.pickerDate);
         } else {
+            // FIXME:
             this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, newMonthLeft.pickerDate);
         }
         this._adapter.updateDaySelected(newSelected);
@@ -534,6 +537,7 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
     ) {
         const { multiple, disabledDate } = this.getProps();
         const { selected: selectedSet, rangeStart, rangeEnd } = this.getStates();
+        // FIXME:
         const includeRange = ['dateRange', 'dateTimeRange'].includes(type);
         const options = { closePanel: false };
         if (!multiple && !includeRange && selectedSet.size) {

package/datePicker/rtl.scss

@@ -181,5 +181,13 @@ $module: #{$prefix}-datepicker;
             padding-left: $spacing-datepicker_footer_compact-paddintRight;
             padding-right: auto;
         }
+
+        .#{$module}-inset-input {
+            &-separator {
+                border-right: $width-datepicker-border solid $color-datepicker_border-bg-default;
+                border-left: 0;
+                transform: translateX(-50%);
+            }
+        }
     }
 }

package/datePicker/variables.scss

@@ -23,6 +23,14 @@ $width-datepicker_quick_control-borderRadius: var(--semi-border-radius-medium);
 $width-datepicker_slot-border: 1px; // 日期星期分割线宽度
 $width-datepicker_range_input-border: $border-thickness-control-focus;
 $width-datepicker_day_main-border: 1px;
+$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; // 月份类型内嵌输入框宽度
+$height-datepicker_insetInput_separator: 32px;
+$height-datepicker_month_grid_yearType_insetInput: 312px;
+$height-datepicker_month_grid_timeType_insetInput: 314px;
 
 // Spacing
 $spacing-datepicker_day-marginX: ($width-datepicker_day - $width-datepicker_day_main) / 2; // 日期格子水平外边距
@@ -53,6 +61,14 @@ $spacing-datepicker_range_input_suffix-paddingLeft: 8px;
 $spacing-datepicker_range_input_suffix-paddingRight: 12px;
 $spacing-datepicker_range_input_clearbtn-paddingLeft: 8px;
 $spacing-datepicker_range_input_clearbtn-paddingRight: 12px;
+$spacing-datepicker_navigation_insetInput-paddingY: 8px; // 年月切换 header 垂直内边距 - 内嵌输入框
+$spacing-datepicker_insetInput_wrapper-margin: 8px;
+$spacing-datepicker_insetInput_wrapper-paddingY: 12px;
+$spacing-datepicker_insetInput_wrapper-paddingX: 16px;
+$spacing-datepicker_insetInput_wrapper-paddingBottom: 0;
+$spacing-datepicker_insetInput_separator-paddingY: 0;
+$spacing-datepicker_insetInput_separator-paddingX: 4px;
+
 
 // Color
 $color-datepicker_panel-bg-default: var(--semi-color-bg-3); // 日期选择器背景颜色
@@ -118,6 +134,7 @@ $color-datepicker_range_input_inputWrapper-bg-default: transparent;
 $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);
 
 // Font
 $font-datepicker_range_input_prefix_suffix_clearbtn-fontWeight: 600;
@@ -144,9 +161,17 @@ $radius-datepicker_range_input_inputWrapper: var(--semi-border-radius-small);
 $height-datepicker_range_input-default: 32px;
 $height-datepicker_range_input-small: 24px;
 $height-datepicker_range_input-large: 40px;
+$width-datepicker_insetInput_date_type_wrapper_compact: 216px;
+$width-datepicker_insetInput_date_range_type_wrapper_compact: $width-datepicker_insetInput_date_type_wrapper_compact * 2;
+$width-datepicker_insetInput_month_type_wrapper_compact: 195px;
+$height-datepicker_insetInput_tpk_compact: 100%;
+$height-datepicker_timeType_insetInput_yam_compact: 100%;
+$height-datepicker_insetInput_wrapper_compact: 28px;
 
 $lineHeight-datepicker_compact: 20px;
 $lineHeight-datepicker_weekday_item_compact: 28px;
+$height-datepicker_insetInput_compact: 26px;
+$fontSize-datepicker_insetInput_compact-fontSize: 12px;
 
 $spacing-datepicker_switch_compact-padding: 6px;
 $spacing-datepicker_day_compact-margin: ($width-datepicker_day_compact - $width-datepicker_day_main_compact) / 2;
@@ -163,6 +188,11 @@ $spacing-datepicker_footer_compact-paddintBottom: 10px;
 $spacing-datepicker_footer_compact-paddintRight: 8px;
 $spacing-datepicker_scrolllist_shade_pre_compact-marginTop: -17px;
 $spacing-datepicker_scrolllist_shade_post_compact-marginTop: 17px;
+$spacing-datepicker_insetInput_wrapper_compact-margin: 4px;
+$spacing-datepicker_insetInput_wrapper_compact-paddingY: 8px;
+$spacing-datepicker_insetInput_wrapper_compact-paddingX: 8px;
+$spacing-datepicker_insetInput_wrapper_compact-paddingBottom: 0;
+$spacing-datepicker_insetInput_wrapper_rangeType_compact-paddingTop: 0;
 
 // Radius
 $radius-datepicker_range_input: var(--semi-border-radius-small);

package/lib/cjs/button/button.css

@@ -44,6 +44,9 @@
   vertical-align: middle;
   white-space: nowrap;
 }
+.semi-button:focus {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
 .semi-button-danger {
   background-color: var(--semi-color-danger);
   color: white;
@@ -57,6 +60,9 @@
 .semi-button-danger.semi-button-light, .semi-button-danger.semi-button-borderless {
   color: var(--semi-color-danger);
 }
+.semi-button-danger:not(.semi-button-borderless):not(.semi-button-light):focus {
+  outline-color: var(--semi-color-danger-light-active);
+}
 .semi-button-warning {
   background-color: var(--semi-color-warning);
   color: white;
@@ -70,6 +76,9 @@
 .semi-button-warning.semi-button-light, .semi-button-warning.semi-button-borderless {
   color: var(--semi-color-warning);
 }
+.semi-button-warning:not(.semi-button-borderless):not(.semi-button-light):focus {
+  outline-color: var(--semi-color-warning-light-active);
+}
 .semi-button-tertiary {
   background-color: var(--semi-color-tertiary);
   color: white;

package/lib/cjs/button/button.scss

@@ -23,6 +23,11 @@ $module: #{$prefix}-button;
     outline: none;
     vertical-align: middle;
     white-space: nowrap;
+
+    &:focus {
+        outline: $width-button-outline solid $color-button_primary-outline-focus;
+    }
+
     &-danger {
         background-color: $color-button_danger-bg-default;
         color: $color-button_danger-text-default;
@@ -36,6 +41,9 @@ $module: #{$prefix}-button;
         &.#{$module}-borderless {
             color: $color-button_danger-bg-default;
         }
+        &:not(.#{$module}-borderless):not(.#{$module}-light):focus {
+            outline-color: $color-button_danger-outline-focus;
+        }
     }
     &-warning {
         background-color: $color-button_warning-bg-default;
@@ -50,6 +58,9 @@ $module: #{$prefix}-button;
         &.#{$module}-borderless {
             color: $color-button_warning-bg-default;
         }
+        &:not(.#{$module}-borderless):not(.#{$module}-light):focus {
+            outline-color: $color-button_warning-outline-focus;
+        }
     }
     &-tertiary {
         background-color: $color-button_tertiary-bg-default;