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

package/lib/cjs/table/Body/index.js

@@ -418,8 +418,13 @@ class Body extends _baseComponent.default {
       const {
         flattenedColumns,
         getCellWidths
-      } = _this.context;
-      const cellWidths = getCellWidths(flattenedColumns);
+      } = _this.context; // we use memoized cellWidths to avoid re-render expanded row (fix #686)
+
+      if (flattenedColumns !== _this.flattenedColumns) {
+        _this.flattenedColumns = flattenedColumns;
+        _this.cellWidths = getCellWidths(flattenedColumns);
+      }
+
       return /*#__PURE__*/_react.default.createElement(_ExpandedRow.default, {
         style: style,
         components: components,
@@ -431,7 +436,7 @@ class Body extends _baseComponent.default {
         index: index,
         virtualized: virtualized,
         key: (0, _utils.genExpandedRowKey)(key),
-        cellWidths: cellWidths
+        cellWidths: _this.cellWidths
       });
     };
     /**
@@ -601,7 +606,9 @@ class Body extends _baseComponent.default {
     };
     this.listRef = /*#__PURE__*/_react.default.createRef();
     const {
-      getVirtualizedListRef
+      getVirtualizedListRef,
+      flattenedColumns,
+      getCellWidths
     } = context;
 
     if (getVirtualizedListRef) {
@@ -613,6 +620,8 @@ class Body extends _baseComponent.default {
     }
 
     this.foundation = new _bodyFoundation.default(this.adapter);
+    this.flattenedColumns = flattenedColumns;
+    this.cellWidths = getCellWidths(flattenedColumns);
     this.observer = null;
   }
 

package/lib/cjs/tag/group.d.ts

@@ -7,6 +7,7 @@ export interface TagGroupProps {
     style?: React.CSSProperties;
     className?: string;
     maxTagCount?: number;
+    restCount?: number;
     tagList?: (TagProps | React.ReactNode)[];
     size?: 'small' | 'large';
     showPopover?: boolean;
@@ -26,6 +27,7 @@ export default class TagGroup extends PureComponent<TagGroupProps> {
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         maxTagCount: PropTypes.Requireable<number>;
+        restCount: PropTypes.Requireable<number>;
         tagList: PropTypes.Requireable<any[]>;
         size: PropTypes.Requireable<string>;
         mode: PropTypes.Requireable<string>;

package/lib/cjs/tag/group.js

@@ -77,9 +77,10 @@ class TagGroup extends _react.PureComponent {
   renderMergeTags(tags) {
     const {
       maxTagCount,
-      tagList
+      tagList,
+      restCount
     } = this.props;
-    const n = tagList.length - maxTagCount;
+    const n = restCount ? restCount : tagList.length - maxTagCount;
     let renderTags = tags;
     const normalTags = (0, _slice.default)(tags).call(tags, 0, maxTagCount);
     const restTags = (0, _slice.default)(tags).call(tags, maxTagCount);
@@ -156,6 +157,7 @@ TagGroup.propTypes = {
   style: _propTypes.default.object,
   className: _propTypes.default.string,
   maxTagCount: _propTypes.default.number,
+  restCount: _propTypes.default.number,
   tagList: _propTypes.default.array,
   size: _propTypes.default.oneOf(tagSize),
   mode: _propTypes.default.string,

package/lib/cjs/tooltip/index.js

@@ -229,7 +229,9 @@ class Tooltip extends _baseComponent.default {
         } = _ref;
         return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
           className: (0, _classnames.default)(className, animateCls),
-          style: (0, _assign.default)((0, _assign.default)((0, _assign.default)({}, animateStyle), {
+          style: (0, _assign.default)((0, _assign.default)((0, _assign.default)({
+            visibility: 'visible'
+          }, animateStyle), {
             transformOrigin
           }), style)
         }, portalEventSet, animateEvents, {
@@ -241,7 +243,9 @@ class Tooltip extends _baseComponent.default {
         className: className
       }, portalEventSet, {
         "x-placement": placement,
-        style: style
+        style: (0, _assign.default)({
+          visibility: motion ? undefined : 'visible'
+        }, style)
       }), content, icon);
       return /*#__PURE__*/_react.default.createElement(_index.default, {
         getPopupContainer: this.props.getPopupContainer,

package/lib/cjs/tree/index.js

@@ -275,7 +275,8 @@ class Tree extends _baseComponent.default {
     const isSeaching = Boolean(props.filterTreeNode && prevState.inputValue && prevState.inputValue.length);
     const newState = {
       prevProps: props
-    }; // Accept a props field as a parameter to determine whether to update the field
+    };
+    const isExpandControlled = ('expandedKeys' in props); // Accept a props field as a parameter to determine whether to update the field
 
     const needUpdate = name => {
       const firstInProps = !prevProps && name in props;
@@ -319,7 +320,8 @@ class Tree extends _baseComponent.default {
       }
     }
 
-    const expandAllWhenDataChange = (needUpdate('treeDataSimpleJson') || needUpdate('treeData')) && props.expandAll;
+    const dataUpdated = needUpdate('treeDataSimpleJson') || needUpdate('treeData');
+    const expandAllWhenDataChange = dataUpdated && props.expandAll;
 
     if (!isSeaching) {
       // Update expandedKeys
@@ -345,7 +347,7 @@ class Tree extends _baseComponent.default {
         newState.expandedKeys = (0, _treeUtil.calcExpandedKeys)(props.defaultExpandedKeys, keyEntities);
       } else if (!prevProps && props.defaultValue) {
         newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)(props.defaultValue, keyEntities, props.multiple, valueEntities);
-      } else if (!prevProps && props.value) {
+      } else if ((!prevProps || !isExpandControlled && dataUpdated) && props.value) {
         newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)(props.value, keyEntities, props.multiple, valueEntities);
       }
 

package/lib/cjs/tree/interface.d.ts

@@ -109,6 +109,7 @@ export interface NodeListProps {
     motionKeys: Set<string>;
     motionType: string;
     flattenList: FlattenNode[] | undefined;
+    searchTargetIsDeep?: boolean;
     renderTreeNode: (treeNode: FlattenNode, ind?: number, style?: React.CSSProperties) => ReactNode;
 }
 export declare type TransitionNodes<T> = Array<T | Array<T>>;

package/lib/cjs/tree/nodeList.js

@@ -49,6 +49,7 @@ class NodeList extends _react.PureComponent {
     super(props);
 
     this.onMotionEnd = () => {
+      typeof this.props.onMotionEnd === 'function' && this.props.onMotionEnd();
       this.setState({
         transitionNodes: []
       });
@@ -107,12 +108,13 @@ class NodeList extends _react.PureComponent {
     const {
       flattenNodes,
       motionType,
+      searchTargetIsDeep,
       renderTreeNode
     } = this.props;
     const {
       transitionNodes
     } = this.state;
-    const mapData = transitionNodes.length ? transitionNodes : flattenNodes;
+    const mapData = transitionNodes.length && !searchTargetIsDeep ? transitionNodes : flattenNodes;
     const options = (0, _map.default)(mapData).call(mapData, treeNode => {
       const isMotionNode = (0, _isArray.default)(treeNode);
 

package/lib/cjs/treeSelect/index.js

@@ -795,7 +795,8 @@ class TreeSelect extends _baseComponent.default {
       const {
         flattenNodes,
         motionKeys,
-        motionType
+        motionType,
+        filteredKeys
       } = this.state;
       const {
         direction
@@ -804,6 +805,7 @@ class TreeSelect extends _baseComponent.default {
         virtualize,
         motionExpand
       } = this.props;
+      const isExpandControlled = ('expandedKeys' in this.props);
 
       if (!virtualize || (0, _isEmpty2.default)(virtualize)) {
         return /*#__PURE__*/_react.default.createElement(_nodeList.default, {
@@ -811,6 +813,8 @@ class TreeSelect extends _baseComponent.default {
           flattenList: this._flattenNodes,
           motionKeys: motionExpand ? motionKeys : new _set.default([]),
           motionType: motionType,
+          // When motionKeys is empty, but filteredKeys is not empty (that is, the search hits), this situation should be distinguished from ordinary motionKeys
+          searchTargetIsDeep: isExpandControlled && motionExpand && (0, _isEmpty2.default)(motionKeys) && !(0, _isEmpty2.default)(filteredKeys),
           onMotionEnd: this.onMotionEnd,
           renderTreeNode: this.renderTreeNode
         });
@@ -951,6 +955,10 @@ class TreeSelect extends _baseComponent.default {
     this.clickOutsideHandler = null;
     this.foundation = new _foundation.default(this.adapter);
     this.treeSelectID = (0, _slice.default)(_context2 = Math.random().toString(36)).call(_context2, 2);
+
+    this.onMotionEnd = () => {
+      this.adapter.rePositionDropdown();
+    };
   } // eslint-disable-next-line max-lines-per-function
 
 
@@ -1131,8 +1139,8 @@ class TreeSelect extends _baseComponent.default {
       notifySelect: (selectKey, bool, node) => {
         this.props.onSelect && this.props.onSelect(selectKey, bool, node);
       },
-      notifySearch: input => {
-        this.props.onSearch && this.props.onSearch(input);
+      notifySearch: (input, filteredExpandedKeys) => {
+        this.props.onSearch && this.props.onSearch(input, filteredExpandedKeys);
       },
       cacheFlattenNodes: bool => {
         this._flattenNodes = bool ? (0, _treeUtil2.cloneDeep)(this.state.flattenNodes) : null;

package/lib/es/button/Button.d.ts

@@ -46,15 +46,15 @@ export default class Button extends PureComponent<ButtonProps> {
         disabled: PropTypes.Requireable<boolean>;
         prefixCls: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
-        size: PropTypes.Requireable<unknown>;
-        type: PropTypes.Requireable<unknown>;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
+        type: PropTypes.Requireable<"warning" | "primary" | "tertiary" | "secondary" | "danger">;
         block: PropTypes.Requireable<boolean>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseDown: PropTypes.Requireable<(...args: any[]) => any>;
         circle: PropTypes.Requireable<boolean>;
         loading: PropTypes.Requireable<boolean>;
-        htmlType: PropTypes.Requireable<unknown>;
-        theme: PropTypes.Requireable<unknown>;
+        htmlType: PropTypes.Requireable<"button" | "reset" | "submit">;
+        theme: PropTypes.Requireable<"solid" | "light" | "borderless">;
         className: PropTypes.Requireable<string>;
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/es/button/buttonGroup.d.ts

@@ -9,6 +9,7 @@ export interface ButtonGroupProps extends BaseProps {
     type?: Type;
     size?: Size;
     theme?: Theme;
+    className?: string;
     'aria-label'?: React.AriaAttributes['aria-label'];
 }
 export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
@@ -16,8 +17,8 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         disabled: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<unknown>;
-        theme: PropTypes.Requireable<unknown>;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
+        theme: PropTypes.Requireable<"solid" | "light" | "borderless">;
         'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: {

package/lib/es/button/buttonGroup.js

@@ -18,6 +18,7 @@ var __rest = this && this.__rest || function (s, e) {
 import React, { isValidElement, cloneElement } from 'react';
 import BaseComponent from '../_base/baseComponent';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/button/constants';
 import '@douyinfe/semi-foundation/lib/es/button/button.css';
 const prefixCls = cssClasses.PREFIX;
@@ -30,11 +31,13 @@ export default class ButtonGroup extends BaseComponent {
       disabled,
       size,
       type,
+      className,
       'aria-label': ariaLabel
     } = _a,
-          rest = __rest(_a, ["children", "disabled", "size", "type", 'aria-label']);
+          rest = __rest(_a, ["children", "disabled", "size", "type", "className", 'aria-label']);
 
     let inner;
+    const cls = classNames("".concat(prefixCls, "-group"), className);
 
     if (children) {
       var _context;
@@ -49,7 +52,7 @@ export default class ButtonGroup extends BaseComponent {
     }
 
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-group"),
+      className: cls,
       role: "group",
       "aria-label": ariaLabel
     }, inner);

package/lib/es/button/index.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
-import { ButtonProps as BaseButtonProps } from './Button';
 import { IconButtonProps } from '../iconButton';
 export { ButtonProps as BaseButtonProps, HtmlType, Size, Theme, Type } from './Button';
 export { HorizontalPaddingType } from '../iconButton';
 export { ButtonGroupProps } from './buttonGroup';
 export { SplitButtonGroupProps } from './splitButtonGroup';
-export interface ButtonProps extends IconButtonProps, BaseButtonProps {
+export interface ButtonProps extends IconButtonProps {
 }
 declare class Button extends React.PureComponent<ButtonProps> {
     static propTypes: {
@@ -18,18 +17,18 @@ declare class Button extends React.PureComponent<ButtonProps> {
         noHorizontalPadding: import("prop-types").Requireable<string | boolean | any[]>;
         children: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
         theme: import("prop-types").Requireable<string>;
-        iconPosition: import("prop-types").Requireable<unknown>;
+        iconPosition: import("prop-types").Requireable<"left" | "right">;
         className: import("prop-types").Requireable<string>;
         onMouseEnter: import("prop-types").Requireable<(...args: any[]) => any>;
         onMouseLeave: import("prop-types").Requireable<(...args: any[]) => any>;
         disabled: import("prop-types").Requireable<boolean>;
-        size: import("prop-types").Requireable<unknown>;
-        type: import("prop-types").Requireable<unknown>;
+        size: import("prop-types").Requireable<"default" | "small" | "large">;
+        type: import("prop-types").Requireable<"warning" | "primary" | "tertiary" | "secondary" | "danger">;
         block: import("prop-types").Requireable<boolean>;
         onClick: import("prop-types").Requireable<(...args: any[]) => any>;
         onMouseDown: import("prop-types").Requireable<(...args: any[]) => any>;
         circle: import("prop-types").Requireable<boolean>;
-        htmlType: import("prop-types").Requireable<unknown>;
+        htmlType: import("prop-types").Requireable<"button" | "reset" | "submit">;
         'aria-label': import("prop-types").Requireable<string>;
     };
     constructor(props?: {});

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

@@ -187,6 +187,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     renderContent: () => JSX.Element;
     renderPlusN: (hiddenTag: Array<ReactNode>) => JSX.Element;
     renderMultipleTags: () => JSX.Element;
+    renderDisplayText: () => ReactNode;
     renderSelectContent: () => JSX.Element;
     renderSuffix: () => JSX.Element;
     renderPrefix: () => JSX.Element;

package/lib/es/cascader/index.js

@@ -9,10 +9,10 @@ import _isSet from "lodash/isSet";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
 import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { Fragment } from 'react';
 import ReactDOM from 'react-dom';
 import cls from 'classnames';
@@ -210,6 +210,36 @@ class Cascader extends BaseComponent {
       return /*#__PURE__*/React.createElement(React.Fragment, null, displayTag, !_isEmpty(hiddenTag) && this.renderPlusN(hiddenTag));
     };
 
+    this.renderDisplayText = () => {
+      const {
+        displayProp,
+        separator,
+        displayRender
+      } = this.props;
+      const {
+        selectedKeys
+      } = this.state;
+      let displayText = '';
+
+      if (selectedKeys.size) {
+        const displayPath = this.foundation.getItemPropPath([...selectedKeys][0], displayProp);
+
+        if (displayRender && typeof displayRender === 'function') {
+          displayText = displayRender(displayPath);
+        } else {
+          displayText = _mapInstanceProperty(displayPath).call(displayPath, (path, index) => {
+            var _context3;
+
+            return /*#__PURE__*/React.createElement(Fragment, {
+              key: _concatInstanceProperty(_context3 = "".concat(path, "-")).call(_context3, index)
+            }, index < displayPath.length - 1 ? /*#__PURE__*/React.createElement(React.Fragment, null, path, separator) : path);
+          });
+        }
+      }
+
+      return displayText;
+    };
+
     this.renderSelectContent = () => {
       const {
         placeholder,
@@ -217,7 +247,6 @@ class Cascader extends BaseComponent {
         multiple
       } = this.props;
       const {
-        selectedKeys,
         checkedKeys
       } = this.state;
       const searchable = Boolean(filterTreeNode);
@@ -232,9 +261,9 @@ class Cascader extends BaseComponent {
 
           return this.renderMultipleTags();
         } else {
-          const displayText = selectedKeys.size ? this.foundation.renderDisplayText([...selectedKeys][0]) : '';
+          const displayText = this.renderDisplayText();
           const spanCls = cls({
-            ["".concat(prefixcls, "-selection-placeholder")]: !displayText || !displayText.length
+            ["".concat(prefixcls, "-selection-placeholder")]: !displayText
           });
           return /*#__PURE__*/React.createElement("span", {
             className: spanCls
@@ -779,7 +808,7 @@ class Cascader extends BaseComponent {
   }
 
   renderTagInput() {
-    var _context3;
+    var _context4;
 
     const {
       size,
@@ -799,7 +828,7 @@ class Cascader extends BaseComponent {
     const tagValue = [];
     const realKeys = this.mergeType === strings.NONE_MERGE_TYPE ? checkedKeys : resolvedCheckedKeys;
 
-    _forEachInstanceProperty(_context3 = [...realKeys]).call(_context3, checkedKey => {
+    _forEachInstanceProperty(_context4 = [...realKeys]).call(_context4, checkedKey => {
       if (!_isEmpty(keyEntities[checkedKey])) {
         tagValue.push(keyEntities[checkedKey].valuePath);
       }

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import DateInputFoundation, { DateInputAdapter, DateInputFoundationProps, RangeType } from '@douyinfe/semi-foundation/lib/es/datePicker/inputFoundation';
+import DateInputFoundation, { DateInputAdapter, DateInputFoundationProps, RangeType, InsetInputChangeProps, InsetInputChangeFoundationProps } from '@douyinfe/semi-foundation/lib/es/datePicker/inputFoundation';
 import { noop } from '@douyinfe/semi-foundation/lib/es/utils/function';
-import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import { ValueType } from '@douyinfe/semi-foundation/lib/es/datePicker/foundation';
+import BaseComponent, { BaseProps } from '../_base/baseComponent';
 export interface DateInputProps extends DateInputFoundationProps, BaseProps {
     insetLabel?: React.ReactNode;
     prefix?: React.ReactNode;
@@ -13,6 +13,8 @@ export interface DateInputProps extends DateInputFoundationProps, BaseProps {
     onBlur?: (e: React.MouseEvent<HTMLInputElement>) => void;
     onFocus?: (e: React.MouseEvent<HTMLInputElement>, rangeType?: RangeType) => void;
     onClear?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onInsetInputChange?: (options: InsetInputChangeProps) => void;
+    value?: Date[];
 }
 export default class DateInput extends BaseComponent<DateInputProps, {}> {
     static propTypes: {
@@ -39,6 +41,8 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         rangeInputStartRef: PropTypes.Requireable<object>;
         rangeInputEndRef: PropTypes.Requireable<object>;
         rangeSeparator: PropTypes.Requireable<string>;
+        insetInput: PropTypes.Requireable<boolean>;
+        insetInputValue: PropTypes.Requireable<object>;
     };
     static defaultProps: {
         showClear: boolean;
@@ -69,11 +73,14 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
     handleRangeInputEndKeyPress: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     handleRangeInputFocus: (e: React.MouseEvent<HTMLElement>, rangeType: RangeType) => void;
     handleRangeStartFocus: React.MouseEventHandler<HTMLElement>;
+    handleInsetInputChange: (options: InsetInputChangeFoundationProps) => void;
     getRangeInputValue: (rangeStart: string, rangeEnd: string) => string;
     renderRangePrefix(): JSX.Element;
     renderRangeSeparator(rangeStart: string, rangeEnd: string): JSX.Element;
     renderRangeClearBtn(rangeStart: string, rangeEnd: string): JSX.Element;
     renderRangeSuffix(suffix: React.ReactNode): JSX.Element;
     renderRangeInput(rangeProps: DateInputProps): JSX.Element;
+    renderInputInset(): JSX.Element;
+    renderTriggerInput(): JSX.Element;
     render(): JSX.Element;
 }

package/lib/es/datePicker/dateInput.js

@@ -15,7 +15,9 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
-/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/interactive-supports-focus */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 
 /* eslint-disable max-lines-per-function */
 
@@ -29,9 +31,10 @@ import DateInputFoundation from '@douyinfe/semi-foundation/lib/es/datePicker/inp
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/datePicker/constants';
 import { noop } from '@douyinfe/semi-foundation/lib/es/utils/function';
 import isNullOrUndefined from '@douyinfe/semi-foundation/lib/es/utils/isNullOrUndefined';
+import { IconCalendar, IconCalendarClock, IconClear } from '@douyinfe/semi-icons';
 import BaseComponent from '../_base/baseComponent';
 import Input from '../input/index';
-import { IconCalendar, IconCalendarClock, IconClear } from '@douyinfe/semi-icons'; // eslint-disable-next-line @typescript-eslint/ban-types
+import { InsetDateInput, InsetTimeInput } from './insetInput'; // eslint-disable-next-line @typescript-eslint/ban-types
 
 export default class DateInput extends BaseComponent {
   constructor(props) {
@@ -69,6 +72,10 @@ export default class DateInput extends BaseComponent {
       this.handleRangeInputFocus(e, 'rangeStart');
     };
 
+    this.handleInsetInputChange = options => {
+      this.foundation.handleInsetInputChange(options);
+    };
+
     this.getRangeInputValue = (rangeStart, rangeEnd) => {
       var _context, _context2;
 
@@ -117,7 +124,8 @@ export default class DateInput extends BaseComponent {
       },
       notifyTabPress: function () {
         return _this.props.onRangeEndTabPress(...arguments);
-      }
+      },
+      notifyInsetInputChange: options => this.props.onInsetInputChange(options)
     });
   }
 
@@ -222,11 +230,11 @@ export default class DateInput extends BaseComponent {
     const rangePlaceholder = _Array$isArray(placeholder) ? placeholder : [placeholder, placeholder];
     const [rangeStartPlaceholder, rangeEndPlaceholder] = rangePlaceholder;
     const inputLeftWrapperCls = cls("".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 = cls("".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.createElement(React.Fragment, null, this.renderRangePrefix(), /*#__PURE__*/React.createElement("div", {
       onClick: e => !disabled && this.handleRangeInputFocus(e, 'rangeStart'),
@@ -265,7 +273,70 @@ export default class DateInput extends BaseComponent {
     })), this.renderRangeClearBtn(rangeStart, rangeEnd), this.renderRangeSuffix(suffix));
   }
 
-  render() {
+  renderInputInset() {
+    const {
+      type,
+      handleInsetDateFocus,
+      handleInsetTimeFocus,
+      value,
+      insetInputValue,
+      prefixCls,
+      rangeInputStartRef,
+      rangeInputEndRef,
+      density
+    } = this.props;
+
+    const _isRangeType = _includesInstanceProperty(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.createElement("div", {
+      className: insetInputWrapperCls,
+      "x-type": type
+    }, /*#__PURE__*/React.createElement(InsetDateInput, {
+      forwardRef: rangeInputStartRef,
+      insetInputValue: newInsetInputValue,
+      placeholder: datePlaceholder,
+      valuePath: 'monthLeft.dateInput',
+      onChange: this.handleInsetInputChange,
+      onFocus: e => handleInsetDateFocus(e, 'rangeStart')
+    }), /*#__PURE__*/React.createElement(InsetTimeInput, {
+      disabled: !newInsetInputValue.monthLeft.dateInput,
+      insetInputValue: newInsetInputValue,
+      placeholder: timePlaceholder,
+      type: type,
+      valuePath: 'monthLeft.timeInput',
+      onChange: this.handleInsetInputChange,
+      onFocus: handleInsetTimeFocus
+    }), _isRangeType && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: separatorCls
+    }, density === 'compact' ? null : '-'), /*#__PURE__*/React.createElement(InsetDateInput, {
+      forwardRef: rangeInputEndRef,
+      insetInputValue: newInsetInputValue,
+      placeholder: datePlaceholder,
+      valuePath: 'monthRight.dateInput',
+      onChange: this.handleInsetInputChange,
+      onFocus: e => handleInsetDateFocus(e, 'rangeEnd')
+    }), /*#__PURE__*/React.createElement(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,
@@ -297,9 +368,11 @@ export default class DateInput extends BaseComponent {
       onRangeBlur,
       onRangeEndTabPress,
       rangeInputFocus,
-      rangeSeparator
+      rangeSeparator,
+      insetInput,
+      insetInputValue
     } = _a,
-          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"]);
+          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.createElement(IconCalendar, {
       "aria-hidden": true
@@ -350,6 +423,13 @@ export default class DateInput extends BaseComponent {
     }));
   }
 
+  render() {
+    const {
+      insetInput
+    } = this.props;
+    return insetInput ? this.renderInputInset() : this.renderTriggerInput();
+  }
+
 }
 DateInput.propTypes = {
   onClick: PropTypes.func,
@@ -374,7 +454,9 @@ DateInput.propTypes = {
   rangeInputFocus: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   rangeInputStartRef: PropTypes.object,
   rangeInputEndRef: PropTypes.object,
-  rangeSeparator: PropTypes.string
+  rangeSeparator: PropTypes.string,
+  insetInput: PropTypes.bool,
+  insetInputValue: PropTypes.object
 };
 DateInput.defaultProps = {
   showClear: true,