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

package/lib/cjs/datePicker/dateInput.js

@@ -36,11 +36,13 @@ var _function = require("@douyinfe/semi-foundation/lib/cjs/utils/function");
 
 var _isNullOrUndefined = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/isNullOrUndefined"));
 
+var _semiIcons = require("@douyinfe/semi-icons");
+
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
 
 var _index = _interopRequireDefault(require("../input/index"));
 
-var _semiIcons = require("@douyinfe/semi-icons");
+var _insetInput = require("./insetInput");
 
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
@@ -52,6 +54,10 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   }
   return t;
 };
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
 /* eslint-disable max-lines-per-function */
 
 /* eslint-disable no-unused-vars */
@@ -94,6 +100,10 @@ class DateInput extends _baseComponent.default {
       this.handleRangeInputFocus(e, 'rangeStart');
     };
 
+    this.handleInsetInputChange = options => {
+      this.foundation.handleInsetInputChange(options);
+    };
+
     this.getRangeInputValue = (rangeStart, rangeEnd) => {
       var _context, _context2;
 
@@ -140,7 +150,8 @@ class DateInput extends _baseComponent.default {
       },
       notifyTabPress: function () {
         return _this.props.onRangeEndTabPress(...arguments);
-      }
+      },
+      notifyInsetInputChange: options => this.props.onInsetInputChange(options)
     });
   }
 
@@ -195,9 +206,14 @@ class DateInput extends _baseComponent.default {
     } = this.props;
     const allowClear = (rangeStart || rangeEnd) && showClear;
     return allowClear && !disabled ? /*#__PURE__*/_react.default.createElement("div", {
+      role: "button",
+      tabIndex: 0,
+      "aria-label": "Clear range input value",
       className: "".concat(prefixCls, "-range-input-clearbtn"),
       onMouseDown: e => !disabled && this.handleRangeInputClear(e)
-    }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null)) : null;
+    }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, {
+      "aria-hidden": true
+    })) : null;
   }
 
   renderRangeSuffix(suffix) {
@@ -240,11 +256,11 @@ class DateInput extends _baseComponent.default {
     const rangePlaceholder = (0, _isArray.default)(placeholder) ? placeholder : [placeholder, placeholder];
     const [rangeStartPlaceholder, rangeEndPlaceholder] = rangePlaceholder;
     const inputLeftWrapperCls = (0, _classnames.default)("".concat(prefixCls, "-range-input-wrapper-start"), "".concat(prefixCls, "-range-input-wrapper"), {
-      ["".concat(prefixCls, "-range-input-wrapper-active")]: rangeInputFocus === 'rangeStart',
+      ["".concat(prefixCls, "-range-input-wrapper-active")]: rangeInputFocus === 'rangeStart' && !disabled,
       ["".concat(prefixCls, "-range-input-wrapper-start-with-prefix")]: this.props.prefix || this.props.insetLabel
     });
     const inputRightWrapperCls = (0, _classnames.default)("".concat(prefixCls, "-range-input-wrapper-end"), "".concat(prefixCls, "-range-input-wrapper"), {
-      ["".concat(prefixCls, "-range-input-wrapper-active")]: rangeInputFocus === 'rangeEnd'
+      ["".concat(prefixCls, "-range-input-wrapper-active")]: rangeInputFocus === 'rangeEnd' && !disabled
     });
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.renderRangePrefix(), /*#__PURE__*/_react.default.createElement("div", {
       onClick: e => !disabled && this.handleRangeInputFocus(e, 'rangeStart'),
@@ -283,7 +299,70 @@ class DateInput extends _baseComponent.default {
     })), this.renderRangeClearBtn(rangeStart, rangeEnd), this.renderRangeSuffix(suffix));
   }
 
-  render() {
+  renderInputInset() {
+    const {
+      type,
+      handleInsetDateFocus,
+      handleInsetTimeFocus,
+      value,
+      insetInputValue,
+      prefixCls,
+      rangeInputStartRef,
+      rangeInputEndRef,
+      density
+    } = this.props;
+
+    const _isRangeType = (0, _includes.default)(type).call(type, 'Range');
+
+    const newInsetInputValue = this.foundation.getInsetInputValue({
+      value,
+      insetInputValue
+    });
+    const {
+      datePlaceholder,
+      timePlaceholder
+    } = this.foundation.getInsetInputPlaceholder();
+    const insetInputWrapperCls = "".concat(prefixCls, "-inset-input-wrapper");
+    const separatorCls = "".concat(prefixCls, "-inset-input-separator");
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: insetInputWrapperCls,
+      "x-type": type
+    }, /*#__PURE__*/_react.default.createElement(_insetInput.InsetDateInput, {
+      forwardRef: rangeInputStartRef,
+      insetInputValue: newInsetInputValue,
+      placeholder: datePlaceholder,
+      valuePath: 'monthLeft.dateInput',
+      onChange: this.handleInsetInputChange,
+      onFocus: e => handleInsetDateFocus(e, 'rangeStart')
+    }), /*#__PURE__*/_react.default.createElement(_insetInput.InsetTimeInput, {
+      disabled: !newInsetInputValue.monthLeft.dateInput,
+      insetInputValue: newInsetInputValue,
+      placeholder: timePlaceholder,
+      type: type,
+      valuePath: 'monthLeft.timeInput',
+      onChange: this.handleInsetInputChange,
+      onFocus: handleInsetTimeFocus
+    }), _isRangeType && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: separatorCls
+    }, density === 'compact' ? null : '-'), /*#__PURE__*/_react.default.createElement(_insetInput.InsetDateInput, {
+      forwardRef: rangeInputEndRef,
+      insetInputValue: newInsetInputValue,
+      placeholder: datePlaceholder,
+      valuePath: 'monthRight.dateInput',
+      onChange: this.handleInsetInputChange,
+      onFocus: e => handleInsetDateFocus(e, 'rangeEnd')
+    }), /*#__PURE__*/_react.default.createElement(_insetInput.InsetTimeInput, {
+      disabled: !newInsetInputValue.monthRight.dateInput,
+      insetInputValue: newInsetInputValue,
+      placeholder: timePlaceholder,
+      type: type,
+      valuePath: 'monthRight.timeInput',
+      onChange: this.handleInsetInputChange,
+      onFocus: handleInsetTimeFocus
+    })));
+  }
+
+  renderTriggerInput() {
     const _a = this.props,
           {
       placeholder,
@@ -298,6 +377,8 @@ class DateInput extends _baseComponent.default {
       validateStatus,
       block,
       prefixCls,
+      multiple,
+      // Whether to allow multiple values for email and file types
       dateFnsLocale,
       // No need to pass to input
       onBlur,
@@ -313,13 +394,19 @@ class DateInput extends _baseComponent.default {
       onRangeBlur,
       onRangeEndTabPress,
       rangeInputFocus,
-      rangeSeparator
+      rangeSeparator,
+      insetInput,
+      insetInputValue
     } = _a,
-          rest = __rest(_a, ["placeholder", "type", "value", "inputValue", "inputStyle", "disabled", "showClear", "inputReadOnly", "insetLabel", "validateStatus", "block", "prefixCls", "dateFnsLocale", "onBlur", "onClear", "onFocus", "prefix", "autofocus", "size", "rangeInputStartRef", "rangeInputEndRef", "onRangeClear", "onRangeBlur", "onRangeEndTabPress", "rangeInputFocus", "rangeSeparator"]);
+          rest = __rest(_a, ["placeholder", "type", "value", "inputValue", "inputStyle", "disabled", "showClear", "inputReadOnly", "insetLabel", "validateStatus", "block", "prefixCls", "multiple", "dateFnsLocale", "onBlur", "onClear", "onFocus", "prefix", "autofocus", "size", "rangeInputStartRef", "rangeInputEndRef", "onRangeClear", "onRangeBlur", "onRangeEndTabPress", "rangeInputFocus", "rangeSeparator", "insetInput", "insetInputValue"]);
 
-    const dateIcon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconCalendar, null);
+    const dateIcon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconCalendar, {
+      "aria-hidden": true
+    });
 
-    const dateTimeIcon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconCalendarClock, null);
+    const dateTimeIcon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconCalendarClock, {
+      "aria-hidden": true
+    });
 
     const suffix = (0, _includes.default)(type).call(type, 'Time') ? dateTimeIcon : dateIcon;
     let text = '';
@@ -362,6 +449,13 @@ class DateInput extends _baseComponent.default {
     }));
   }
 
+  render() {
+    const {
+      insetInput
+    } = this.props;
+    return insetInput ? this.renderInputInset() : this.renderTriggerInput();
+  }
+
 }
 
 exports.default = DateInput;
@@ -375,7 +469,6 @@ DateInput.propTypes = {
   value: _propTypes.default.array,
   disabled: _propTypes.default.bool,
   type: _propTypes.default.oneOf(_constants.strings.TYPE_SET),
-  multiple: _propTypes.default.bool,
   showClear: _propTypes.default.bool,
   format: _propTypes.default.string,
   inputStyle: _propTypes.default.object,
@@ -389,7 +482,9 @@ DateInput.propTypes = {
   rangeInputFocus: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   rangeInputStartRef: _propTypes.default.object,
   rangeInputEndRef: _propTypes.default.object,
-  rangeSeparator: _propTypes.default.string
+  rangeSeparator: _propTypes.default.string,
+  insetInput: _propTypes.default.bool,
+  insetInputValue: _propTypes.default.object
 };
 DateInput.defaultProps = {
   showClear: true,
@@ -399,7 +494,6 @@ DateInput.defaultProps = {
   onBlur: _function.noop,
   onClear: _function.noop,
   onFocus: _function.noop,
-  multiple: false,
   type: 'date',
   inputStyle: {},
   inputReadOnly: false,

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

@@ -1,14 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import DatePickerFoundation, { DatePickerAdapter, DatePickerFoundationProps, DatePickerFoundationState, DayStatusType, PresetType, Type } from '@douyinfe/semi-foundation/lib/cjs/datePicker/foundation';
+import DatePickerFoundation, { DatePickerAdapter, DatePickerFoundationProps, DatePickerFoundationState, DayStatusType, PresetType, Type, RangeType } from '@douyinfe/semi-foundation/lib/cjs/datePicker/foundation';
 import BaseComponent from '../_base/baseComponent';
 import { DateInputProps } from './dateInput';
 import MonthsGrid, { MonthsGridProps } from './monthsGrid';
 import { YearAndMonthProps } from './yearAndMonth';
 import '@douyinfe/semi-foundation/lib/cjs/datePicker/datePicker.css';
 import { Locale } from '../locale/interface';
-import { RangeType } from '@douyinfe/semi-foundation/lib/cjs/datePicker/inputFoundation';
 import { TimePickerProps } from '../timePicker/TimePicker';
+import { InsetInputChangeProps } from '@douyinfe/semi-foundation/lib/cjs/datePicker/inputFoundation';
 export interface DatePickerProps extends DatePickerFoundationProps {
     'aria-describedby'?: React.AriaAttributes['aria-describedby'];
     'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
@@ -143,6 +143,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         autoSwitchDate: boolean;
         syncSwitchMonth: boolean;
         rangeSeparator: " ~ ";
+        insetInput: boolean;
     };
     triggerElRef: React.MutableRefObject<HTMLElement>;
     panelRef: React.RefObject<HTMLDivElement>;
@@ -171,6 +172,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
     renderQuickControls(): JSX.Element;
     handleOpenPanel: () => void;
     handleInputChange: DatePickerFoundation['handleInputChange'];
+    handleInsetInputChange: (options: InsetInputChangeProps) => void;
     handleInputComplete: DatePickerFoundation['handleInputComplete'];
     handleInputBlur: DateInputProps['onBlur'];
     handleInputFocus: DatePickerFoundation['handleInputFocus'];
@@ -181,6 +183,9 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
     handleRangeInputClear: DatePickerFoundation['handleRangeInputClear'];
     handleRangeEndTabPress: DatePickerFoundation['handleRangeEndTabPress'];
     isAnotherPanelHasOpened: (currentRangeInput: RangeType) => boolean;
+    handleInsetDateFocus: (e: React.FocusEvent, rangeType: 'rangeStart' | 'rangeEnd') => void;
+    handleInsetTimeFocus: () => void;
+    handlePanelVisibleChange: (visible: boolean) => void;
     renderInner(extraProps?: Partial<DatePickerProps>): JSX.Element;
     handleConfirm: (e: React.MouseEvent) => void;
     handleCancel: (e: React.MouseEvent) => void;

package/lib/cjs/datePicker/datePicker.js

@@ -20,6 +20,8 @@ var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-j
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
+var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
+
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
 
 var _get2 = _interopRequireDefault(require("lodash/get"));
@@ -62,7 +64,13 @@ var _yearAndMonth = _interopRequireDefault(require("./yearAndMonth"));
 
 require("@douyinfe/semi-foundation/lib/cjs/datePicker/datePicker.css");
 
+/* 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 */
 class DatePicker extends _baseComponent.default {
   constructor(props) {
     var _this;
@@ -100,6 +108,8 @@ class DatePicker extends _baseComponent.default {
       return _this.foundation.handleInputChange(...arguments);
     };
 
+    this.handleInsetInputChange = options => this.foundation.handleInsetInputChange(options);
+
     this.handleInputComplete = v => this.foundation.handleInputComplete(v);
 
     this.handleInputBlur = e => this.foundation.handleInputBlur((0, _get2.default)(e, 'nativeEvent.target.value'), e);
@@ -128,6 +138,30 @@ class DatePicker extends _baseComponent.default {
       }
     };
 
+    this.handleInsetDateFocus = (e, rangeType) => {
+      const monthGridFoundation = (0, _get2.default)(this, 'monthGrid.current.foundation');
+
+      if (monthGridFoundation) {
+        monthGridFoundation.showDatePanel(_constants.strings.PANEL_TYPE_LEFT);
+        monthGridFoundation.showDatePanel(_constants.strings.PANEL_TYPE_RIGHT);
+      }
+
+      this.handleInputFocus(e, rangeType);
+    };
+
+    this.handleInsetTimeFocus = () => {
+      const monthGridFoundation = (0, _get2.default)(this, 'monthGrid.current.foundation');
+
+      if (monthGridFoundation) {
+        monthGridFoundation.showTimePicker(_constants.strings.PANEL_TYPE_LEFT);
+        monthGridFoundation.showTimePicker(_constants.strings.PANEL_TYPE_RIGHT);
+      }
+    };
+
+    this.handlePanelVisibleChange = visible => {
+      this.foundation.handlePanelVisibleChange(visible);
+    };
+
     this.handleConfirm = e => this.foundation.handleConfirm();
 
     this.handleCancel = e => this.foundation.handleCancel();
@@ -151,19 +185,43 @@ class DatePicker extends _baseComponent.default {
         dropdownStyle,
         density,
         topSlot,
-        bottomSlot
+        bottomSlot,
+        insetInput,
+        type,
+        format,
+        rangeSeparator
       } = this.props;
+      const {
+        insetInputValue,
+        value
+      } = this.state;
       const wrapCls = (0, _classnames.default)(_constants.cssClasses.PREFIX, {
         [_constants.cssClasses.PANEL_YAM]: this.adapter.typeIsYearOrMonth(),
         ["".concat(_constants.cssClasses.PREFIX, "-compact")]: density === 'compact'
       }, dropdownClassName);
+      const insetInputProps = {
+        dateFnsLocale,
+        format,
+        insetInputValue,
+        rangeSeparator,
+        type,
+        value: value,
+        handleInsetDateFocus: this.handleInsetDateFocus,
+        handleInsetTimeFocus: this.handleInsetTimeFocus,
+        onInsetInputChange: this.handleInsetInputChange,
+        rangeInputStartRef: this.rangeInputStartRef,
+        rangeInputEndRef: this.rangeInputEndRef,
+        density
+      };
       return /*#__PURE__*/_react.default.createElement("div", {
         ref: this.panelRef,
         className: wrapCls,
         style: dropdownStyle
       }, topSlot && /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(_constants.cssClasses.PREFIX, "-topSlot")
-      }, topSlot), this.adapter.typeIsYearOrMonth() ? this.renderYearMonthPanel(locale, localeCode) : this.renderMonthGrid(locale, localeCode, dateFnsLocale), this.renderQuickControls(), bottomSlot && /*#__PURE__*/_react.default.createElement("div", {
+      }, topSlot), insetInput && /*#__PURE__*/_react.default.createElement(_dateInput.default, (0, _assign.default)({}, insetInputProps, {
+        insetInput: true
+      })), this.adapter.typeIsYearOrMonth() ? this.renderYearMonthPanel(locale, localeCode) : this.renderMonthGrid(locale, localeCode, dateFnsLocale), this.renderQuickControls(), bottomSlot && /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(_constants.cssClasses.PREFIX, "-bottomSlot")
       }, bottomSlot), this.renderFooter(locale, localeCode));
     };
@@ -227,7 +285,8 @@ class DatePicker extends _baseComponent.default {
         position: position,
         visible: panelShow,
         stopPropagation: stopPropagation,
-        spacing: spacing
+        spacing: spacing,
+        onVisibleChange: this.handlePanelVisibleChange
       }, children);
     };
 
@@ -240,7 +299,9 @@ class DatePicker extends _baseComponent.default {
       prevTimeZone: null,
       motionEnd: false,
       rangeInputFocus: undefined,
-      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);
     this.triggerElRef = /*#__PURE__*/_react.default.createRef();
@@ -343,6 +404,17 @@ class DatePicker extends _baseComponent.default {
           inputValue
         });
       },
+      updateInsetInputValue: insetInputValue => {
+        const {
+          insetInput
+        } = this.props;
+
+        if (insetInput && !(0, _isEqual2.default)(insetInputValue, this.state.insetInputValue)) {
+          this.setState({
+            insetInputValue
+          });
+        }
+      },
       needConfirm: () => {
         var _context;
 
@@ -413,7 +485,36 @@ class DatePicker extends _baseComponent.default {
         }
       },
       couldPanelClosed: () => this.focusRecordsRef.current.rangeStart && this.focusRecordsRef.current.rangeEnd,
-      isEventTarget: e => e && e.target === e.currentTarget
+      isEventTarget: e => e && e.target === e.currentTarget,
+      setInsetInputFocus: () => {
+        const {
+          rangeInputFocus
+        } = this.state;
+
+        switch (rangeInputFocus) {
+          case 'rangeEnd':
+            if (document.activeElement !== this.rangeInputEndRef.current) {
+              const inputEndNode = (0, _get2.default)(this, 'rangeInputEndRef.current');
+              inputEndNode && inputEndNode.focus();
+            }
+
+            break;
+
+          case 'rangeStart':
+          default:
+            if (document.activeElement !== this.rangeInputStartRef.current) {
+              const inputStartNode = (0, _get2.default)(this, 'rangeInputStartRef.current');
+              inputStartNode && inputStartNode.focus();
+            }
+
+            break;
+        }
+      },
+      setTriggerDisabled: disabled => {
+        this.setState({
+          triggerDisabled: disabled
+        });
+      }
     });
   }
 
@@ -471,7 +572,8 @@ class DatePicker extends _baseComponent.default {
       syncSwitchMonth,
       onPanelChange,
       timeZone,
-      triggerRender
+      triggerRender,
+      insetInput
     } = this.props;
     const {
       value,
@@ -519,7 +621,8 @@ class DatePicker extends _baseComponent.default {
       onPanelChange: onPanelChange,
       timeZone: timeZone,
       focusRecordsRef: this.focusRecordsRef,
-      triggerRender: triggerRender
+      triggerRender: triggerRender,
+      insetInput: insetInput
     });
   }
 
@@ -555,20 +658,23 @@ class DatePicker extends _baseComponent.default {
       triggerRender,
       size,
       inputReadOnly,
-      rangeSeparator
+      rangeSeparator,
+      insetInput
     } = this.props;
     const {
       value,
       inputValue,
-      rangeInputFocus
+      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 = (0, _classnames.default)("".concat(_constants.cssClasses.PREFIX, "-input"), {
       ["".concat(_constants.cssClasses.PREFIX, "-range-input")]: isRangeType,
       [(0, _concat.default)(_context3 = "".concat(_constants.cssClasses.PREFIX, "-range-input-")).call(_context3, size)]: isRangeType && size,
-      ["".concat(_constants.cssClasses.PREFIX, "-range-input-active")]: isRangeType && rangeInputFocus && !disabled,
-      ["".concat(_constants.cssClasses.PREFIX, "-range-input-disabled")]: isRangeType && disabled,
+      ["".concat(_constants.cssClasses.PREFIX, "-range-input-active")]: isRangeType && rangeInputFocus && !inputDisabled,
+      ["".concat(_constants.cssClasses.PREFIX, "-range-input-disabled")]: isRangeType && inputDisabled,
       [(0, _concat.default)(_context4 = "".concat(_constants.cssClasses.PREFIX, "-range-input-")).call(_context4, validateStatus)]: isRangeType && validateStatus
     });
     const phText = placeholder || locale.placeholder[type]; // i18n
@@ -576,9 +682,9 @@ class DatePicker extends _baseComponent.default {
 
     const props = (0, _assign.default)((0, _assign.default)({}, extraProps), {
       placeholder: phText,
-      disabled,
+      disabled: inputDisabled,
       inputValue,
-      value,
+      value: value,
       onChange: this.handleInputChange,
       onEnterPress: this.handleInputComplete,
       // TODO: remove in next major version
@@ -591,7 +697,7 @@ class DatePicker extends _baseComponent.default {
       format,
       multiple,
       validateStatus,
-      inputReadOnly,
+      inputReadOnly: inputReadOnly || insetInput,
       // onClick: this.handleOpenPanel,
       onBlur: this.handleInputBlur,
       onFocus: this.handleInputFocus,
@@ -600,26 +706,27 @@ class DatePicker extends _baseComponent.default {
       size,
       autofocus: this.state.autofocus,
       dateFnsLocale,
-      rangeInputStartRef: this.rangeInputStartRef,
-      rangeInputEndRef: this.rangeInputEndRef,
       rangeInputFocus,
       rangeSeparator,
       onRangeBlur: this.handleRangeInputBlur,
       onRangeClear: this.handleRangeInputClear,
-      onRangeEndTabPress: this.handleRangeEndTabPress
+      onRangeEndTabPress: this.handleRangeEndTabPress,
+      rangeInputStartRef: insetInput ? null : this.rangeInputStartRef,
+      rangeInputEndRef: insetInput ? null : this.rangeInputEndRef
     });
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-      _react.default.createElement("div", {
-        onClick: this.handleTriggerWrapperClick,
-        className: inputCls
-      }, typeof triggerRender === 'function' ? /*#__PURE__*/_react.default.createElement(_trigger.default, (0, _assign.default)({}, props, {
-        triggerRender: triggerRender,
-        componentName: "DatePicker",
-        componentProps: (0, _assign.default)({}, this.props)
-      })) : /*#__PURE__*/_react.default.createElement(_dateInput.default, (0, _assign.default)({}, props)))
-    );
+    return /*#__PURE__*/_react.default.createElement("div", {
+      // tooltip will mount a11y props to children
+      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+      role: "combobox",
+      "aria-label": (0, _isArray.default)(value) && value.length ? "Change date" : "Choose date",
+      "aria-disabled": disabled,
+      onClick: this.handleTriggerWrapperClick,
+      className: inputCls
+    }, typeof triggerRender === 'function' ? /*#__PURE__*/_react.default.createElement(_trigger.default, (0, _assign.default)({}, props, {
+      triggerRender: triggerRender,
+      componentName: "DatePicker",
+      componentProps: (0, _assign.default)({}, this.props)
+    })) : /*#__PURE__*/_react.default.createElement(_dateInput.default, (0, _assign.default)({}, props)));
   }
 
   render() {
@@ -754,5 +861,6 @@ DatePicker.defaultProps = {
   spacing: _constants.numbers.SPACING,
   autoSwitchDate: true,
   syncSwitchMonth: false,
-  rangeSeparator: _constants.strings.DEFAULT_SEPARATOR_RANGE
+  rangeSeparator: _constants.strings.DEFAULT_SEPARATOR_RANGE,
+  insetInput: false
 };

package/lib/cjs/datePicker/index.js

@@ -14,13 +14,17 @@ var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _trim = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/trim"));
 
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _object = require("@douyinfe/semi-foundation/lib/cjs/utils/object");
 
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/datePicker/constants");
+
 var _datePicker = _interopRequireDefault(require("./datePicker"));
 
-var _context = _interopRequireDefault(require("../configProvider/context"));
+var _context2 = _interopRequireDefault(require("../configProvider/context"));
 
 var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
 
@@ -47,7 +51,25 @@ var _default = (0, _object.forwardStatics)( /*#__PURE__*/_react.default.forwardR
     propsObj.rangeSeparator = " ".concat((0, _trim.default)(rangeSeparator).call(rangeSeparator), " ");
   }
 
-  return /*#__PURE__*/_react.default.createElement(_context.default.Consumer, null, _ref => {
+  if (propsObj.insetInput) {
+    var _context;
+
+    if (!propsObj.position) {
+      propsObj.position = _constants.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 ((0, _includes.default)(_context = propsObj.position).call(_context, 'Over') && !propsObj.spacing) {
+      propsObj.spacing = _constants.numbers.SPACING_INSET_INPUT;
+    }
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_context2.default.Consumer, null, _ref => {
     let {
       timeZone
     } = _ref;

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

@@ -0,0 +1,21 @@
+import { InsetInputValue, Type, InsetInputChangeFoundationProps } from '@douyinfe/semi-foundation/lib/cjs/datePicker/inputFoundation';
+import { 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 declare function InsetDateInput(props: InsetDateInputProps): JSX.Element;
+export declare function InsetTimeInput(props: InsetTimeInputProps): JSX.Element;