@douyinfe/semi-ui 2.6.0-beta.0 → 2.7.0

package/datePicker/datePicker.tsx

@@ -1,11 +1,13 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/interactive-supports-focus */
 /* eslint-disable max-len */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import { noop, stubFalse, isDate, get, isFunction } from 'lodash';
+import { noop, stubFalse, isDate, get, isFunction, isEqual } from 'lodash';
 import ConfigContext from '../configProvider/context';
-import DatePickerFoundation, { DatePickerAdapter, DatePickerFoundationProps, DatePickerFoundationState, DayStatusType, PresetType, Type } from '@douyinfe/semi-foundation/datePicker/foundation';
+import DatePickerFoundation, { DatePickerAdapter, DatePickerFoundationProps, DatePickerFoundationState, DayStatusType, PresetType, Type, RangeType } from '@douyinfe/semi-foundation/datePicker/foundation';
 import { cssClasses, strings, numbers } from '@douyinfe/semi-foundation/datePicker/constants';
 import { strings as popoverStrings, numbers as popoverNumbers } from '@douyinfe/semi-foundation/popover/constants';
 import BaseComponent from '../_base/baseComponent';
@@ -18,8 +20,8 @@ import Trigger from '../trigger';
 import YearAndMonth, { YearAndMonthProps } from './yearAndMonth';
 import '@douyinfe/semi-foundation/datePicker/datePicker.scss';
 import { Locale } from '../locale/interface';
-import { RangeType } from '@douyinfe/semi-foundation/datePicker/inputFoundation';
 import { TimePickerProps } from '../timePicker/TimePicker';
+import { InsetInputValue, InsetInputChangeProps } from '@douyinfe/semi-foundation/datePicker/inputFoundation';
 
 export interface DatePickerProps extends DatePickerFoundationProps {
     'aria-describedby'?: React.AriaAttributes['aria-describedby'];
@@ -160,6 +162,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         autoSwitchDate: true,
         syncSwitchMonth: false,
         rangeSeparator: strings.DEFAULT_SEPARATOR_RANGE,
+        insetInput: false,
     };
 
     triggerElRef: React.MutableRefObject<HTMLElement>;
@@ -184,7 +187,9 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             prevTimeZone: null,
             motionEnd: false, // Monitor if popover animation ends
             rangeInputFocus: undefined, // Optional'rangeStart ',' rangeEnd ', false
-            autofocus: props.autoFocus || (this.isRangeType(props.type, props.triggerRender) && (props.open || props.defaultOpen))
+            autofocus: props.autoFocus || (this.isRangeType(props.type, props.triggerRender) && (props.open || props.defaultOpen)),
+            insetInputValue: null,
+            triggerDisabled: undefined,
         };
 
         this.adapter.setCache('cachedSelectedValue', null);
@@ -255,6 +260,12 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             updateInputValue: inputValue => {
                 this.setState({ inputValue });
             },
+            updateInsetInputValue: (insetInputValue: InsetInputValue) => {
+                const { insetInput } = this.props;
+                if (insetInput && !isEqual(insetInputValue, this.state.insetInputValue)) {
+                    this.setState({ insetInputValue });
+                }
+            },
             needConfirm: () =>
                 ['dateTime', 'dateTimeRange'].includes(this.props.type) && this.props.needConfirm === true,
             typeIsYearOrMonth: () => ['month', 'year'].includes(this.props.type),
@@ -310,6 +321,27 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             },
             couldPanelClosed: () => this.focusRecordsRef.current.rangeStart && this.focusRecordsRef.current.rangeEnd,
             isEventTarget: e => e && e.target === e.currentTarget,
+            setInsetInputFocus: () => {
+                const { rangeInputFocus } = this.state;
+                switch (rangeInputFocus) {
+                    case 'rangeEnd':
+                        if (document.activeElement !== this.rangeInputEndRef.current) {
+                            const inputEndNode = get(this, 'rangeInputEndRef.current');
+                            inputEndNode && inputEndNode.focus();
+                        }
+                        break;
+                    case 'rangeStart':
+                    default:
+                        if (document.activeElement !== this.rangeInputStartRef.current) {
+                            const inputStartNode = get(this, 'rangeInputStartRef.current');
+                            inputStartNode && inputStartNode.focus();
+                        }
+                        break;
+                }
+            },
+            setTriggerDisabled: (disabled: boolean) => {
+                this.setState({ triggerDisabled: disabled });
+            }
         };
     }
 
@@ -379,7 +411,8 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             syncSwitchMonth,
             onPanelChange,
             timeZone,
-            triggerRender
+            triggerRender,
+            insetInput
         } = this.props;
         const { value, cachedSelectedValue, motionEnd, rangeInputFocus } = this.state;
 
@@ -426,6 +459,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
                 timeZone={timeZone}
                 focusRecordsRef={this.focusRecordsRef}
                 triggerRender={triggerRender}
+                insetInput={insetInput}
             />
         );
     }
@@ -443,6 +477,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
 
     handleOpenPanel = () => this.foundation.openPanel();
     handleInputChange: DatePickerFoundation['handleInputChange'] = (...args) => this.foundation.handleInputChange(...args);
+    handleInsetInputChange = (options: InsetInputChangeProps) => this.foundation.handleInsetInputChange(options);
     handleInputComplete: DatePickerFoundation['handleInputComplete'] = v => this.foundation.handleInputComplete(v);
     handleInputBlur: DateInputProps['onBlur'] = e => this.foundation.handleInputBlur(get(e, 'nativeEvent.target.value'), e);
     handleInputFocus: DatePickerFoundation['handleInputFocus'] = (...args) => this.foundation.handleInputFocus(...args);
@@ -459,6 +494,25 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             return this.focusRecordsRef.current.rangeStart;
         }
     };
+    handleInsetDateFocus = (e: React.FocusEvent, rangeType: 'rangeStart' | 'rangeEnd') => {
+        const monthGridFoundation = get(this, 'monthGrid.current.foundation');
+        if (monthGridFoundation) {
+            monthGridFoundation.showDatePanel(strings.PANEL_TYPE_LEFT);
+            monthGridFoundation.showDatePanel(strings.PANEL_TYPE_RIGHT);
+        }
+        this.handleInputFocus(e, rangeType);
+    }
+
+    handleInsetTimeFocus = () => {
+        const monthGridFoundation = get(this, 'monthGrid.current.foundation');
+        if (monthGridFoundation) {
+            monthGridFoundation.showTimePicker(strings.PANEL_TYPE_LEFT);
+            monthGridFoundation.showTimePicker(strings.PANEL_TYPE_RIGHT);
+        }
+    }
+    handlePanelVisibleChange = (visible: boolean) => {
+        this.foundation.handlePanelVisibleChange(visible);
+    }
 
     renderInner(extraProps?: Partial<DatePickerProps>) {
         const {
@@ -478,16 +532,18 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             triggerRender,
             size,
             inputReadOnly,
-            rangeSeparator
+            rangeSeparator,
+            insetInput,
         } = this.props;
-        const { value, inputValue, rangeInputFocus } = this.state;
+        const { value, inputValue, rangeInputFocus, triggerDisabled } = this.state;
         // This class is not needed when triggerRender is function
         const isRangeType = this.isRangeType(type, triggerRender);
+        const inputDisabled = disabled || insetInput && triggerDisabled;
         const inputCls = classnames(`${cssClasses.PREFIX}-input`, {
             [`${cssClasses.PREFIX}-range-input`]: isRangeType,
             [`${cssClasses.PREFIX}-range-input-${size}`]: isRangeType && size,
-            [`${cssClasses.PREFIX}-range-input-active`]: isRangeType && rangeInputFocus && !disabled,
-            [`${cssClasses.PREFIX}-range-input-disabled`]: isRangeType && disabled,
+            [`${cssClasses.PREFIX}-range-input-active`]: isRangeType && rangeInputFocus && !inputDisabled,
+            [`${cssClasses.PREFIX}-range-input-disabled`]: isRangeType && inputDisabled,
             [`${cssClasses.PREFIX}-range-input-${validateStatus}`]: isRangeType && validateStatus,
         });
         const phText = placeholder || locale.placeholder[type]; // i18n
@@ -495,9 +551,9 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         const props = {
             ...extraProps,
             placeholder: phText,
-            disabled,
+            disabled: inputDisabled,
             inputValue,
-            value,
+            value: value as Date[],
             onChange: this.handleInputChange,
             onEnterPress: this.handleInputComplete,
             // TODO: remove in next major version
@@ -510,7 +566,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             format,
             multiple,
             validateStatus,
-            inputReadOnly,
+            inputReadOnly: inputReadOnly || insetInput,
             // onClick: this.handleOpenPanel,
             onBlur: this.handleInputBlur,
             onFocus: this.handleInputFocus,
@@ -519,13 +575,13 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             size,
             autofocus: this.state.autofocus,
             dateFnsLocale,
-            rangeInputStartRef: this.rangeInputStartRef,
-            rangeInputEndRef: this.rangeInputEndRef,
             rangeInputFocus,
             rangeSeparator,
             onRangeBlur: this.handleRangeInputBlur,
             onRangeClear: this.handleRangeInputClear,
             onRangeEndTabPress: this.handleRangeEndTabPress,
+            rangeInputStartRef: insetInput ? null :  this.rangeInputStartRef,
+            rangeInputEndRef: insetInput ? null : this.rangeInputEndRef,
         };
 
         return (
@@ -572,7 +628,8 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
     };
 
     renderPanel = (locale: Locale['DatePicker'], localeCode: string, dateFnsLocale: Locale['dateFnsLocale']) => {
-        const { dropdownClassName, dropdownStyle, density, topSlot, bottomSlot } = this.props;
+        const { dropdownClassName, dropdownStyle, density, topSlot, bottomSlot, insetInput, type, format, rangeSeparator } = this.props;
+        const { insetInputValue, value } = this.state;
         const wrapCls = classnames(
             cssClasses.PREFIX,
             {
@@ -582,9 +639,25 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             dropdownClassName
         );
 
+        const insetInputProps = {
+            dateFnsLocale,
+            format,
+            insetInputValue,
+            rangeSeparator,
+            type,
+            value: value as Date[],
+            handleInsetDateFocus: this.handleInsetDateFocus,
+            handleInsetTimeFocus: this.handleInsetTimeFocus,
+            onInsetInputChange: this.handleInsetInputChange,
+            rangeInputStartRef: this.rangeInputStartRef,
+            rangeInputEndRef: this.rangeInputEndRef,
+            density,
+        };
+
         return (
             <div ref={this.panelRef} className={wrapCls} style={dropdownStyle}>
                 {topSlot && <div className={`${cssClasses.PREFIX}-topSlot`}>{topSlot}</div>}
+                {insetInput && <DateInput {...insetInputProps} insetInput={true} />}
                 {this.adapter.typeIsYearOrMonth() ?
                     this.renderYearMonthPanel(locale, localeCode) :
                     this.renderMonthGrid(locale, localeCode, dateFnsLocale)}
@@ -653,6 +726,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
                 visible={panelShow}
                 stopPropagation={stopPropagation}
                 spacing={spacing}
+                onVisibleChange={this.handlePanelVisibleChange}
             >
                 {children}
             </Popover>

package/datePicker/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { forwardStatics } from '@douyinfe/semi-foundation/utils/object';
+import { numbers, strings } from '@douyinfe/semi-foundation/datePicker/constants';
 import DatePicker, { DatePickerProps } from './datePicker';
 import ConfigContext from '../configProvider/context';
 import LocaleConsumer from '../locale/localeConsumer';
@@ -33,6 +34,20 @@ export default forwardStatics(
             propsObj.rangeSeparator = ` ${rangeSeparator.trim()} `;
         }
 
+        if (propsObj.insetInput) {
+            if (!propsObj.position) {
+                propsObj.position = strings.POSITION_INLINE_INPUT;
+            }
+            /**
+             * When insetInput is `true` and `position` includes `over`, use 1px `spacing` to solve the problem of border-radius leakage in the upper left corner
+             * 
+             * @see https://user-images.githubusercontent.com/26477537/158817185-126a5f33-41f7-414a-8e36-8d1be2dda5cd.png
+             */
+            if (propsObj.position.includes('Over') && !propsObj.spacing) {
+                propsObj.spacing = numbers.SPACING_INSET_INPUT;
+            }
+        }
+
         return (
             <ConfigContext.Consumer>
                 {({ timeZone }: { timeZone?: string | number }) => (

package/datePicker/insetInput.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { get } from 'lodash';
+
+import {
+    InsetInputValue,
+    Type,
+    InsetInputChangeFoundationProps,
+} from '@douyinfe/semi-foundation/datePicker/inputFoundation';
+import Input, { InputProps } from '../input';
+
+export interface InsetDateInputProps {
+    forwardRef: InputProps['forwardRef'];
+    insetInputValue: InsetInputValue;
+    placeholder: string;
+    valuePath: string;
+    onChange: (options: InsetInputChangeFoundationProps) => void;
+    onFocus: InputProps['onFocus'];
+}
+
+export interface InsetTimeInputProps {
+    disabled: boolean;
+    insetInputValue: InsetInputValue;
+    placeholder: string;
+    valuePath: string;
+    type: Type;
+    onChange: (options: InsetInputChangeFoundationProps) => void;
+    onFocus: InputProps['onFocus'];
+}
+
+export function InsetDateInput(props: InsetDateInputProps) {
+    const { insetInputValue, valuePath, onFocus, onChange, placeholder, forwardRef } = props;
+    const value = get(insetInputValue, valuePath);
+
+    return (
+        <Input
+            value={value}
+            onChange={(value, event) => {
+                onChange({
+                    value,
+                    event,
+                    insetInputValue,
+                    valuePath,
+                });
+            }}
+            onFocus={onFocus}
+            placeholder={placeholder}
+            ref={forwardRef}
+        />
+    );
+}
+
+export function InsetTimeInput(props: InsetTimeInputProps) {
+    const { insetInputValue, valuePath, type, onFocus, onChange, placeholder, disabled } = props;
+    const _isTimeType = type.includes('Time');
+    if (!_isTimeType) {
+        return null;
+    }
+    const value = get(insetInputValue, valuePath);
+
+    return (
+        <Input
+            value={value}
+            onChange={(value, event) => {
+                onChange({
+                    value,
+                    event,
+                    insetInputValue,
+                    valuePath,
+                });
+            }}
+            onFocus={onFocus}
+            placeholder={placeholder}
+            disabled={disabled}
+        />
+    );
+}

package/datePicker/monthsGrid.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable jsx-a11y/interactive-supports-focus,jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable react/no-did-update-set-state */
 /* eslint-disable max-len */
 /* eslint-disable no-nested-ternary */
@@ -274,6 +275,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
     renderPanel(month: Date, panelType: PanelType) {
         let monthCls = classnames(`${prefixCls}-month-grid-${panelType}`);
         const { monthLeft, monthRight, currentPanelHeight } = this.state;
+        const { insetInput } = this.props;
         const panelDetail = panelType === strings.PANEL_TYPE_RIGHT ? monthRight : monthLeft;
         const { isTimePickerOpen, isYearPickerOpen } = panelDetail;
 
@@ -296,7 +298,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
                 style.minWidth = wrap.getBoundingClientRect().width;
             }
 
-            if (this.leftIsYearOrTime() && this.rightIsYearOrTime()) {
+            if (this.leftIsYearOrTime() && this.rightIsYearOrTime() && !insetInput) {
                 /**
                  * left和right同时为tpk时，panel会有一个minHeight
                  * 如果缓存的currentPanelHeight为0，则需要计算滚动列表的高度
@@ -306,7 +308,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
                  * When left and right are tpk at the same time, the panel will have a minHeight
                  * If the cached currentPanelHeight is 0, you need to calculate the height of the scrolling list
                  * If there is a cached value, use currentPanelHeight (if this height is less than the actual value, it will affect the number of cycles in the ScrollList to render the list)
-                 * See packages/semi-foundation/scrollList/itemF oundation.js initWheelList function
+                 * See packages/semi-foundation/scrollList/itemFoundation.js initWheelList function
                  */
 
                 style.minHeight = currentPanelHeight ? currentPanelHeight : this.calcScrollListHeight();
@@ -319,8 +321,11 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
             monthCls = classnames(monthCls, `${prefixCls}-yam-showing`);
         }
 
+        const _isDatePanelOpen = !(isYearPickerOpen || isTimePickerOpen);
+        const xOpenType = _isDatePanelOpen ? 'date' : isYearPickerOpen ? 'year' : 'time';
+
         return (
-            <div className={monthCls} key={panelType} style={style}>
+            <div className={monthCls} key={panelType} style={style} x-open-type={xOpenType}>
                 {yearAndMonthLayer}
                 {timePickerLayer}
                 {/* {isYearPickerOpen || isTimePickerOpen ? null : panelContent} */}
@@ -536,9 +541,9 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
 
     renderSwitch(panelType: PanelType) {
         const { rangeStart, rangeEnd, monthLeft, monthRight } = this.state;
-        const { type, locale, disabledTimePicker, density, dateFnsLocale } = this.props;
-        // Type: date, dateRange, year, month, no rendering required
-        if (!type.includes('Time')) {
+        const { type, locale, disabledTimePicker, density, dateFnsLocale, insetInput } = this.props;
+        // Type: date, dateRange, year, month, inset input no rendering required
+        if (!type.includes('Time') || insetInput) {
             return null;
         }
 
@@ -606,7 +611,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
 
     render() {
         const { monthLeft, monthRight } = this.state;
-        const { type } = this.props;
+        const { type, insetInput } = this.props;
         const monthGridCls = classnames({
             [`${prefixCls }-month-grid`]: true,
         });
@@ -630,6 +635,8 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
                 className={monthGridCls}
                 x-type={type}
                 x-panel-yearandmonth-open-type={yearOpenType}
+                // FIXME:
+                x-insetInput={insetInput ? "true" : "false"}
                 ref={current => this.cacheRefCurrent('monthGrid', current)}
             >
                 {content}

package/dist/css/semi.css

@@ -3447,6 +3447,7 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-datepicker {
   box-sizing: border-box;
   display: inline-block;
+  vertical-align: top;
 }
 .semi-datepicker-month-grid {
   user-select: none;
@@ -3472,6 +3473,24 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-datepicker-month-grid[x-type=date] .semi-datepicker-yam-showing {
   min-height: 325px;
 }
+.semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-left[x-open-type=year],
+.semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-right[x-open-type=year] {
+  min-height: 312px;
+}
+.semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-left[x-open-type=time],
+.semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-right[x-open-type=time] {
+  min-height: 314px;
+}
+.semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-navigation {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-tpk {
+  min-height: 100%;
+}
+.semi-datepicker-month-grid[x-insetInput=true][x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-month-grid[x-insetInput=true][x-type=dateTimeRange] .semi-datepicker-yam {
+  height: 100%;
+}
 .semi-datepicker-month-grid .semi-datepicker-yearmonth-header {
   background: var(--semi-color-bg-3);
   padding: 12px 16px;
@@ -3513,6 +3532,7 @@ body[theme-mode=dark], body .semi-always-dark {
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   min-height: 24px;
+  line-height: 24px;
 }
 .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=left] .semi-datepicker-weeks, .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=right] .semi-datepicker-weeks {
   min-height: 216px;
@@ -3813,6 +3833,34 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-datepicker .semi-datepicker-input-readonly {
   cursor: pointer;
 }
+.semi-datepicker-inset-input-wrapper {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  box-sizing: border-box;
+  column-gap: 8px;
+  padding: 12px 16px;
+  padding-bottom: 0;
+  width: 284px;
+}
+.semi-datepicker-inset-input-wrapper[x-type=dateRange], .semi-datepicker-inset-input-wrapper[x-type=dateTimeRange] {
+  width: 568px;
+}
+.semi-datepicker-inset-input-wrapper[x-type=month] {
+  width: 204px;
+}
+.semi-datepicker-inset-input-wrapper .semi-input-wrapper {
+  flex: 1;
+  flex-shrink: 0;
+}
+.semi-datepicker-inset-input-separator {
+  flex-grow: 0;
+  flex-shrink: 0;
+  height: 32px;
+  line-height: 32px;
+  padding: 0 4px;
+  color: var(--semi-color-text-3);
+}
 .semi-datepicker-range-input {
   display: flex;
   align-items: center;
@@ -4015,6 +4063,23 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=left] .semi-datepicker-weeks, .semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=right] .semi-datepicker-weeks {
   min-height: 168px;
 }
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-left[x-open-type=year],
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-right[x-open-type=year] {
+  min-height: 236px;
+}
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-left[x-open-type=time],
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-right[x-open-type=time] {
+  min-height: 236px;
+}
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-yam-showing {
+  min-height: 236px;
+}
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-tpk {
+  min-height: 100%;
+}
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true][x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true][x-type=dateTimeRange] .semi-datepicker-yam {
+  height: 100%;
+}
 .semi-datepicker-compact.semi-datepicker-panel-yam .semi-scrolllist {
   font-size: 12px;
   line-height: 16px;
@@ -4130,11 +4195,42 @@ body[theme-mode=dark], body .semi-always-dark {
   padding-right: 8px;
   padding-bottom: 10px;
 }
+.semi-datepicker-compact .semi-datepicker-inset-input-wrapper {
+  column-gap: 4px;
+  padding: 8px 8px;
+  padding-bottom: 0;
+  width: 216px;
+}
+.semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateRange], .semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateTimeRange] {
+  width: 432px;
+  padding-top: 0;
+}
+.semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateRange] .semi-input-wrapper, .semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateTimeRange] .semi-input-wrapper {
+  margin-top: 8px;
+}
+.semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=month] {
+  width: 195px;
+}
+.semi-datepicker-compact .semi-datepicker-inset-input-wrapper .semi-input-wrapper {
+  height: 28px;
+  box-sizing: border-box;
+}
+.semi-datepicker-compact .semi-datepicker-inset-input-wrapper .semi-input-wrapper .semi-input {
+  font-size: 12px;
+  line-height: 26px;
+  height: 26px;
+  vertical-align: top;
+}
+.semi-datepicker-compact .semi-datepicker-inset-input-separator {
+  border-left: 1px solid var(--semi-color-border);
+  transform: translateX(50%);
+  height: auto;
+}
 
-.semi-popover-wrapper[x-placement*=top] .semi-datepicker .semi-datepicker-weeks, .semi-popover-wrapper[x-placement*=Top] .semi-datepicker .semi-datepicker-weeks {
+.semi-popover-wrapper[x-placement^=top] .semi-datepicker .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=leftTop] .semi-datepicker .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=rightTop] .semi-datepicker .semi-datepicker-weeks, .semi-popover-wrapper[x-placement*=BottomOver] .semi-datepicker .semi-datepicker-weeks {
   min-height: 216px;
 }
-.semi-popover-wrapper[x-placement*=top] .semi-datepicker-compact .semi-datepicker-weeks, .semi-popover-wrapper[x-placement*=Top] .semi-datepicker-compact .semi-datepicker-weeks {
+.semi-popover-wrapper[x-placement^=top] .semi-datepicker-compact .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=leftTop] .semi-datepicker-compact .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=rightTop] .semi-datepicker-compact .semi-datepicker-weeks, .semi-popover-wrapper[x-placement*=BottomOver] .semi-datepicker-compact .semi-datepicker-weeks {
   min-height: 168px;
 }
 
@@ -4280,6 +4376,12 @@ body[theme-mode=dark], body .semi-always-dark {
   padding-left: 8px;
   padding-right: auto;
 }
+.semi-rtl .semi-datepicker-compact .semi-datepicker-inset-input-separator,
+.semi-portal-rtl .semi-datepicker-compact .semi-datepicker-inset-input-separator {
+  border-right: 1px solid var(--semi-color-border);
+  border-left: 0;
+  transform: translateX(-50%);
+}
 
 .semi-descriptions {
   line-height: 20px;
@@ -17055,6 +17157,7 @@ body[theme-mode=dark], body .semi-always-dark {
   user-select: none;
   overflow: hidden;
   white-space: nowrap;
+  vertical-align: bottom;
 }
 .semi-tag-default, .semi-tag-small {
   font-size: 12px;