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

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

@@ -193,6 +193,10 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     handleShowNextByHover(item: BasicEntity): void;
     onItemCheckboxClick(item: BasicEntity | BasicData): void;
     handleClick(e: any): void;
+    /**
+     * A11y: simulate selection click
+     */
+    handleSelectionEnterPress(keyboardEvent: any): void;
     toggleHoverState(bool: boolean): void;
     _defaultRenderText(path: any[], displayRender?: BasicCascaderProps['displayRender']): any;
     renderDisplayText(targetKey: string, keyEntities?: BasicEntities): any;
@@ -201,6 +205,17 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     handleSingleSelect(e: any, item: BasicEntity | BasicData): void;
     _handleMultipleSelect(item: BasicEntity | BasicData): void;
     calcNonDisabedCheckedKeys(eventKey: string, targetStatus: boolean): {
+        /**
+         * The typical scenario is: suppose we select the 0-0 node, at this time
+         *  selectedKeys=Set('0-0'), the input box will display a 0-0 label. When
+         *  treeData is updated, assuming 0-0 does not exist in treeData at this
+         *  time, then selectedKeys=Set('not-exist-0-0'), at this time the input
+         *  box displays 0-0, which means not-exist -After the content. When treeData
+         *  is updated again, assuming that 0-0 exists in treeData at this time,
+         *  then selectedKeys=Set('0-0'), and the input box displays a label of
+         *  0-0 at this time. The operation done here is for the 0-0 label to be
+         *  displayed normally after the second update in the example.
+         */
         checkedKeys: Set<string>;
         halfCheckedKeys: Set<any>;
     };
@@ -217,6 +232,10 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     };
     handleInputChange(sugInput: string): void;
     handleClear(): void;
+    /**
+     * A11y: simulate clear button click
+     */
+    handleClearEnterPress(keyboardEvent: any): void;
     getRenderData(): BasicEntity[] | BasicData[];
     getFilteredData(): BasicData[];
     handleListScroll(e: any, ind: number): void;

package/lib/es/cascader/foundation.js

@@ -23,7 +23,8 @@ import _parseInt from "@babel/runtime-corejs3/core-js-stable/parse-int";
 import BaseFoundation from '../base/foundation';
 import { filter, findAncestorKeys, calcCheckedKeysForUnchecked, calcCheckedKeysForChecked, calcCheckedKeys, findDescendantKeys, normalizeKeyList } from '../tree/treeUtil';
 import { convertDataToEntities, findKeysForValues, normalizedArr, isValid, calcMergeType } from './util';
-import { strings } from './constants'; // eslint-disable-next-line max-len
+import { strings } from './constants';
+import isEnterPress from '../utils/isEnterPress'; // eslint-disable-next-line max-len
 
 export default class CascaderFoundation extends BaseFoundation {
   constructor(adapter) {
@@ -530,6 +531,16 @@ export default class CascaderFoundation extends BaseFoundation {
       this.close(e);
     }
   }
+  /**
+   * A11y: simulate selection click
+   */
+
+
+  handleSelectionEnterPress(keyboardEvent) {
+    if (isEnterPress(keyboardEvent)) {
+      this.handleClick(keyboardEvent);
+    }
+  }
 
   toggleHoverState(bool) {
     this._adapter.toggleHovering(bool);
@@ -961,6 +972,16 @@ export default class CascaderFoundation extends BaseFoundation {
 
     this._adapter.rePositionDropdown();
   }
+  /**
+   * A11y: simulate clear button click
+   */
+
+
+  handleClearEnterPress(keyboardEvent) {
+    if (isEnterPress(keyboardEvent)) {
+      this.handleClear();
+    }
+  }
 
   getRenderData() {
     var _context9, _context10;

package/lib/es/datePicker/_utils/formatter.d.ts

@@ -8,7 +8,7 @@ import { BaseValueType } from '../foundation';
  * @returns {string}
  */
 export declare function formatDateValues(values: BaseValueType[], formatToken: string, { groupInnerSeparator, groupSize, groupSeparator, }: {
-    groupInnerSeparator?: " ~ ";
+    groupInnerSeparator?: string;
     groupSize?: number;
-    groupSeparator?: ",";
+    groupSeparator?: string;
 }, locale: any): string;

package/lib/es/datePicker/_utils/getInsetInputFormatToken.d.ts

@@ -0,0 +1,20 @@
+import { strings } from '../constants';
+/**
+ * 获取 insetInput 输入框的 placeholder
+ * Get the placeholder of the insetInput input
+ *
+ * If type is time related, we only recognize the format like `dateFormat timeFormat`
+ *  - 'yyyy-MM-dd HH:mm:ss' // ok
+ *  - 'yyyy-MM-dd  HH:mm:ss' // bad format
+ *
+ * @example
+ * 'yyyy-MM-dd' => 'yyyy-MM-dd'
+ * 'yyyy-MM' => 'yyyy-MM'
+ * 'yyyy-MM-dd HH:mm:ss' => 'yyyy-MM-dd HH:mm:ss'
+ * 'yyyy-MM-dd HH:mm' => 'yyyy-MM-dd HH:mm'
+ * 'Pp' => 'yyyy-MM-dd'
+ */
+export default function getInsetInputFormatToken(options: {
+    format: string;
+    type: typeof strings.TYPE_SET[number];
+}): string;

package/lib/es/datePicker/_utils/getInsetInputFormatToken.js

@@ -0,0 +1,48 @@
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import { getDefaultFormatTokenByType } from './getDefaultFormatToken';
+/**
+ * 获取 insetInput 输入框的 placeholder
+ * Get the placeholder of the insetInput input
+ *
+ * If type is time related, we only recognize the format like `dateFormat timeFormat`
+ *  - 'yyyy-MM-dd HH:mm:ss' // ok
+ *  - 'yyyy-MM-dd  HH:mm:ss' // bad format
+ *
+ * @example
+ * 'yyyy-MM-dd' => 'yyyy-MM-dd'
+ * 'yyyy-MM' => 'yyyy-MM'
+ * 'yyyy-MM-dd HH:mm:ss' => 'yyyy-MM-dd HH:mm:ss'
+ * 'yyyy-MM-dd HH:mm' => 'yyyy-MM-dd HH:mm'
+ * 'Pp' => 'yyyy-MM-dd'
+ */
+
+export default function getInsetInputFormatToken(options) {
+  var _context;
+
+  const {
+    format,
+    type
+  } = options;
+  const dateReg = /([yMd]{0,4}[^a-z\s]*[yMd]{0,4}[^a-z\s]*[yMd]{0,4})/i;
+  const dateTimeReg = /([yMd]{0,4}[^a-z\s]*[yMd]{0,4}[^a-z\s]*[yMd]{0,4}) (H{0,2}[^a-z\s]*m{0,2}[^a-z\s]*s{0,2})/i;
+  const defaultToken = getDefaultFormatTokenByType(type);
+  let insetInputFormat;
+
+  switch (type) {
+    case 'dateTime':
+    case 'dateTimeRange':
+      const dateTimeResult = dateTimeReg.exec(format);
+      insetInputFormat = dateTimeResult && dateTimeResult[1] && dateTimeResult[2] ? _concatInstanceProperty(_context = "".concat(dateTimeResult[1], " ")).call(_context, dateTimeResult[2]) : defaultToken;
+      break;
+
+    case 'date':
+    case 'month':
+    case 'dateRange':
+    default:
+      const dateResult = dateReg.exec(format);
+      insetInputFormat = dateResult && dateResult[1] || defaultToken;
+      break;
+  }
+
+  return insetInputFormat;
+}

package/lib/es/datePicker/_utils/getInsetInputValueFromInsetInputStr.d.ts

@@ -0,0 +1,31 @@
+import { strings } from '../constants';
+/**
+ * 从 insetInputStr 字符串解析出 insetInputValue 对象
+ * Parse the insetInputValue object from the insetInputStr string
+ *
+ * @example
+ * ```
+ * '2022-02-01' => { monthLeft: { dateInput: '2022-02-01' } }
+ * '2022-02-01 00:00:00' => { monthLeft: { dateInput: '2022-02-01', timeInput: '00:00:00' } }
+ * '2022-02-01 00:00:00 ~ 2022-02-15 00:00:00' => { monthLeft: { dateInput: '2022-02-01', timeInput: '00:00:00'}, monthRight: { dateInput: '2022-02-15', timeInput: '00:00:00' } }
+ *
+ * '2022-0' => { monthLeft: { dateInput: '2022-0' } }
+ * '2022-02-01 00:00:' => { monthLeft: { dateInput: '2022-02-01', timeInput: '00:00:' } }
+ * '2022-02-01 00:00:00 ~ ' => { monthLeft: { dateInput: '2022-02-01', timeInput: '00:00:00'}, monthRight: { dateInput: '', timeInput: '' } }
+ * ' ~ 2022-02-15 00:00:00' => { monthLeft: { dateInput: '', timeInput: '' }, monthRight: { dateInput: '2022-02-15', timeInput: '00:00:00' } }
+ * ```
+ */
+export default function getInsetInputValueFromInsetInputStr(options: {
+    inputValue: string;
+    rangeSeparator: string;
+    type: typeof strings.TYPE_SET[number];
+}): {
+    monthLeft: {
+        dateInput: string;
+        timeInput: string;
+    };
+    monthRight: {
+        dateInput: string;
+        timeInput: string;
+    };
+};

package/lib/es/datePicker/_utils/getInsetInputValueFromInsetInputStr.js

@@ -0,0 +1,66 @@
+/**
+ * 从 insetInputStr 字符串解析出 insetInputValue 对象
+ * Parse the insetInputValue object from the insetInputStr string
+ *
+ * @example
+ * ```
+ * '2022-02-01' => { monthLeft: { dateInput: '2022-02-01' } }
+ * '2022-02-01 00:00:00' => { monthLeft: { dateInput: '2022-02-01', timeInput: '00:00:00' } }
+ * '2022-02-01 00:00:00 ~ 2022-02-15 00:00:00' => { monthLeft: { dateInput: '2022-02-01', timeInput: '00:00:00'}, monthRight: { dateInput: '2022-02-15', timeInput: '00:00:00' } }
+ *
+ * '2022-0' => { monthLeft: { dateInput: '2022-0' } }
+ * '2022-02-01 00:00:' => { monthLeft: { dateInput: '2022-02-01', timeInput: '00:00:' } }
+ * '2022-02-01 00:00:00 ~ ' => { monthLeft: { dateInput: '2022-02-01', timeInput: '00:00:00'}, monthRight: { dateInput: '', timeInput: '' } }
+ * ' ~ 2022-02-15 00:00:00' => { monthLeft: { dateInput: '', timeInput: '' }, monthRight: { dateInput: '2022-02-15', timeInput: '00:00:00' } }
+ * ```
+ */
+export default function getInsetInputValueFromInsetInputStr(options) {
+  const timeSeparator = ' ';
+  const {
+    inputValue = '',
+    rangeSeparator,
+    type
+  } = options;
+  let leftDateInput, leftTimeInput, rightDateInput, rightTimeInput;
+  const insetInputValue = {
+    monthLeft: {
+      dateInput: '',
+      timeInput: ''
+    },
+    monthRight: {
+      dateInput: '',
+      timeInput: ''
+    }
+  };
+
+  switch (type) {
+    case 'date':
+    case 'month':
+      insetInputValue.monthLeft.dateInput = inputValue;
+      break;
+
+    case 'dateRange':
+      [leftDateInput = '', rightDateInput = ''] = inputValue.split(rangeSeparator);
+      insetInputValue.monthLeft.dateInput = leftDateInput;
+      insetInputValue.monthRight.dateInput = rightDateInput;
+      break;
+
+    case 'dateTime':
+      [leftDateInput = '', leftTimeInput = ''] = inputValue.split(timeSeparator);
+      insetInputValue.monthLeft.dateInput = leftDateInput;
+      insetInputValue.monthLeft.timeInput = leftTimeInput;
+      break;
+
+    case 'dateTimeRange':
+      const [leftInput = '', rightInput = ''] = inputValue.split(rangeSeparator);
+      [leftDateInput = '', leftTimeInput = ''] = leftInput.split(timeSeparator);
+      [rightDateInput = '', rightTimeInput = ''] = rightInput.split(timeSeparator);
+      insetInputValue.monthLeft.dateInput = leftDateInput;
+      insetInputValue.monthLeft.timeInput = leftTimeInput;
+      insetInputValue.monthRight.dateInput = rightDateInput;
+      insetInputValue.monthRight.timeInput = rightTimeInput;
+      break;
+  }
+
+  return insetInputValue;
+}

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

@@ -41,10 +41,12 @@ declare const strings: {
     readonly PANEL_TYPE_RIGHT: "right";
     readonly STATUS: readonly ["default", "error", "warning", "success"];
     readonly POSITION_SET: readonly ["top", "topLeft", "topRight", "left", "leftTop", "leftBottom", "right", "rightTop", "rightBottom", "bottom", "bottomLeft", "bottomRight", "leftTopOver", "rightTopOver"];
+    readonly POSITION_INLINE_INPUT: "leftTopOver";
 };
 declare const numbers: {
     readonly WEEK_START_ON: 0;
     readonly WEEK_HEIGHT: 36;
     readonly SPACING: number;
+    readonly SPACING_INSET_INPUT: 1;
 };
 export { cssClasses, strings, numbers };

package/lib/es/datePicker/constants.js

@@ -50,13 +50,14 @@ const strings = _Object$assign({
   PANEL_TYPE_LEFT: 'left',
   PANEL_TYPE_RIGHT: 'right',
   STATUS: VALIDATE_STATUS,
-  POSITION_SET: POPOVER_STRINGS.POSITION_SET
+  POSITION_SET: POPOVER_STRINGS.POSITION_SET,
+  POSITION_INLINE_INPUT: 'leftTopOver'
 }, formatToken);
 
 const numbers = {
   WEEK_START_ON: 0,
   WEEK_HEIGHT: 36,
-  SPACING: popoverNumber.SPACING // Floating distance trigger interval
-
+  SPACING: popoverNumber.SPACING,
+  SPACING_INSET_INPUT: 1
 };
 export { cssClasses, strings, numbers };

package/lib/es/datePicker/datePicker.css

@@ -4,6 +4,7 @@
 .semi-datepicker {
   box-sizing: border-box;
   display: inline-block;
+  vertical-align: top;
 }
 .semi-datepicker-month-grid {
   user-select: none;
@@ -29,6 +30,24 @@
 .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;
@@ -70,6 +89,7 @@
   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;
@@ -370,6 +390,34 @@
 .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;
@@ -572,6 +620,23 @@
 .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;
@@ -687,11 +752,42 @@
   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;
 }
 
@@ -836,4 +932,10 @@
 .semi-portal-rtl .semi-datepicker-compact .semi-datepicker-footer {
   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%);
 }

package/lib/es/datePicker/datePicker.scss

@@ -6,6 +6,7 @@ $module: #{$prefix}-datepicker;
 .#{$module} {
     box-sizing: border-box;
     display: inline-block;
+    vertical-align: top;
 
     // 双月网格
 
@@ -45,6 +46,34 @@ $module: #{$prefix}-datepicker;
             min-height: $height-datepicker_dateType_yamShowing_min;
         }
 
+        &[x-insetInput=true] {
+            .#{$module}-month-grid-left,
+            .#{$module}-month-grid-right {
+                &[x-open-type=year] {
+                    min-height: $height-datepicker_month_grid_yearType_insetInput;
+                }
+                &[x-open-type=time] {
+                    min-height: $height-datepicker_month_grid_timeType_insetInput;
+                }
+            }
+
+            .#{$module}-navigation {
+                padding-top: $spacing-datepicker_navigation_insetInput-paddingY;
+                padding-bottom: $spacing-datepicker_navigation_insetInput-paddingY;
+            }
+
+            .#{$module}-tpk {
+                min-height: $height-datepicker_timeType_insetInput_tpk;
+            }
+
+            &[x-type=dateTime],
+            &[x-type=dateTimeRange] {
+                .#{$module}-yam {
+                    height: $height-datepicker_timeType_insetInput_yam;
+                }
+            }
+        }
+
         // 年月选择返回主面板
         .#{$module}-yearmonth-header {
             background: $color-datepicker_header-bg-default;
@@ -92,6 +121,7 @@ $module: #{$prefix}-datepicker;
 
                 @include font-size-regular;
                 min-height: $height-datepicker_timepicker_header_min;
+                line-height: $height-datepicker_timepicker_header_min;
             }
         }
 
@@ -581,6 +611,41 @@ $module: #{$prefix}-datepicker;
         cursor: pointer;
     }
 
+    &-inset-input {
+        &-wrapper {
+            display: flex;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+            box-sizing: border-box;
+            column-gap: $spacing-datepicker_insetInput_wrapper-margin;
+            padding: $spacing-datepicker_insetInput_wrapper-paddingY $spacing-datepicker_insetInput_wrapper-paddingX;
+            padding-bottom: $spacing-datepicker_insetInput_wrapper-paddingBottom;
+
+            width: $width-datepicker_insetInput_date_type_wrapper;
+            &[x-type=dateRange],
+            &[x-type=dateTimeRange] {
+                width: $width-datepicker_insetInput_date_range_type_wrapper;
+            }
+            &[x-type=month] {
+                width: $width-datepicker_insetInput_month_type_wrapper;
+            }
+
+            .#{$prefix}-input-wrapper {
+                flex: 1;
+                flex-shrink: 0;
+            }
+        }
+
+        &-separator {
+            flex-grow: 0;
+            flex-shrink: 0;
+            height: $height-datepicker_insetInput_separator;
+            line-height: $height-datepicker_insetInput_separator;
+            padding: $spacing-datepicker_insetInput_separator-paddingY $spacing-datepicker_insetInput_separator-paddingX;
+            color: $color-datepicker_insetInput_separator;
+        }
+    }
+
     &-range {
 
         &-input {
@@ -862,6 +927,33 @@ $module: #{$prefix}-datepicker;
                 min-height: 6 * $width-datepicker_day_compact;
             }
         }
+
+        &[x-insetInput=true] {
+            .#{$module}-month-grid-left,
+            .#{$module}-month-grid-right {
+                &[x-open-type=year] {
+                    min-height: $height-datepicker_tpk_compact;
+                }
+                &[x-open-type=time] {
+                    min-height: $height-datepicker_tpk_compact;
+                }
+            }
+
+            .#{$module}-yam-showing {
+                min-height: $height-datepicker_tpk_compact;
+            }
+
+            .#{$module}-tpk {
+                min-height: $height-datepicker_insetInput_tpk_compact;
+            }
+
+            &[x-type=dateTime],
+            &[x-type=dateTimeRange] {
+                .#{$module}-yam {
+                    height: $height-datepicker_timeType_insetInput_yam_compact;
+                }
+            }
+        }
     }
 
     // 年月选择器
@@ -1039,6 +1131,46 @@ $module: #{$prefix}-datepicker;
         padding-right: $spacing-datepicker_footer_compact-paddintRight;
         padding-bottom: $spacing-datepicker_footer_compact-paddintBottom;
     }
+
+    .#{$module}-inset-input {
+        &-wrapper {
+            column-gap: $spacing-datepicker_insetInput_wrapper_compact-margin;
+            padding: $spacing-datepicker_insetInput_wrapper_compact-paddingY $spacing-datepicker_insetInput_wrapper_compact-paddingX;
+            padding-bottom: $spacing-datepicker_insetInput_wrapper_compact-paddingBottom;
+
+            width: $width-datepicker_insetInput_date_type_wrapper_compact;
+            &[x-type=dateRange],
+            &[x-type=dateTimeRange] {
+                width: $width-datepicker_insetInput_date_range_type_wrapper_compact;
+                padding-top: $spacing-datepicker_insetInput_wrapper_rangeType_compact-paddingTop;
+
+                .#{$prefix}-input-wrapper {
+                    margin-top: $spacing-datepicker_insetInput_wrapper_compact-paddingY;
+                }
+            }
+            &[x-type=month] {
+                width: $width-datepicker_insetInput_month_type_wrapper_compact;
+            }
+
+            .#{$prefix}-input-wrapper {
+                height: $height-datepicker_insetInput_wrapper_compact;
+                box-sizing: border-box;
+
+                .#{$prefix}-input {
+                    font-size: $fontSize-datepicker_insetInput_compact-fontSize;
+                    line-height: $height-datepicker_insetInput_compact;
+                    height: $height-datepicker_insetInput_compact;
+                    vertical-align: top;
+                }
+            }
+        }
+
+        &-separator {
+            border-left: $width-datepicker-border solid $color-datepicker_border-bg-default;
+            transform: translateX(50%);
+            height: auto;
+        }
+    }
 }
 
 // 向上弹出时固定高度为6周 #1042
@@ -1046,8 +1178,10 @@ $module: #{$prefix}-datepicker;
 
     &-wrapper {
 
-        &[x-placement*="top"],
-        &[x-placement*="Top"] {
+        &[x-placement^="top"],
+        &[x-placement="leftTop"],
+        &[x-placement="rightTop"],
+        &[x-placement*="BottomOver"] {
             .#{$module} .#{$module}-weeks {
                 min-height: 6 * $width-datepicker_day;
             }
@@ -1056,7 +1190,6 @@ $module: #{$prefix}-datepicker;
                 min-height: 6 * $width-datepicker_day_compact;
             }
         }
-        
     }
 }