@douyinfe/semi-ui 2.31.2-alpha.0 → 2.32.0-beta.0

package/lib/cjs/modal/confirm.d.ts

@@ -140,16 +140,16 @@ export declare function withWarning(props: ModalReactProps): {
     type: "warning";
 };
 export declare function withError(props: ModalReactProps): {
+    title?: React.ReactNode;
     children?: React.ReactNode;
-    motion?: boolean;
+    size?: import("@douyinfe/semi-foundation/lib/cjs/modal/modalFoundation").Size;
     style?: React.CSSProperties;
     className?: string;
+    motion?: boolean;
     getPopupContainer?: () => HTMLElement;
     footer?: React.ReactNode;
     header?: React.ReactNode;
-    title?: React.ReactNode;
     direction?: any;
-    size?: import("@douyinfe/semi-foundation/lib/cjs/modal/modalFoundation").Size;
     width?: string | number;
     height?: string | number;
     mask?: boolean;
@@ -201,13 +201,13 @@ export declare function withError(props: ModalReactProps): {
         onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
         onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
         'aria-label'?: string;
+        title?: string;
+        name?: string;
+        value?: string | number | readonly string[];
         onAnimationStart?: React.AnimationEventHandler<HTMLButtonElement>;
         onAnimationEnd?: React.AnimationEventHandler<HTMLButtonElement>;
-        value?: string | number | readonly string[];
         form?: string;
         slot?: string;
-        title?: string;
-        name?: string;
         hidden?: boolean;
         color?: string;
         onChange?: React.FormEventHandler<HTMLButtonElement>;
@@ -228,7 +228,7 @@ export declare function withError(props: ModalReactProps): {
         translate?: "no" | "yes";
         prefix?: string;
         contentEditable?: "inherit" | (boolean | "false" | "true");
-        inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal";
+        inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal";
         tabIndex?: number;
         role?: React.AriaRole;
         onMouseOut?: React.MouseEventHandler<HTMLButtonElement>;
@@ -274,7 +274,7 @@ export declare function withError(props: ModalReactProps): {
         'aria-current'?: boolean | "time" | "page" | "false" | "true" | "location" | "step" | "date";
         'aria-details'?: string;
         'aria-disabled'?: boolean | "false" | "true";
-        'aria-dropeffect'?: "none" | "link" | "copy" | "move" | "execute" | "popup";
+        'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup";
         'aria-errormessage'?: string;
         'aria-flowto'?: string;
         'aria-grabbed'?: boolean | "false" | "true";

package/lib/cjs/navigation/Item.js

@@ -53,12 +53,14 @@ class NavItem extends _baseComponent.default {
         tooltipHideDelay,
         tooltipShowDelay
       } = this.props;
+      const hideDelay = tooltipHideDelay !== null && tooltipHideDelay !== void 0 ? tooltipHideDelay : this.context.tooltipHideDelay;
+      const showDelay = tooltipShowDelay !== null && tooltipShowDelay !== void 0 ? tooltipShowDelay : this.context.tooltipShowDelay;
       return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
         content: text,
         position: "right",
         trigger: 'hover',
-        mouseEnterDelay: tooltipShowDelay,
-        mouseLeaveDelay: tooltipHideDelay
+        mouseEnterDelay: showDelay,
+        mouseLeaveDelay: hideDelay
       }, node);
     };
 

package/lib/cjs/navigation/nav-context.d.ts

@@ -21,6 +21,8 @@ export interface NavContextType {
     canUpdateOpenKeys?: boolean;
     renderWrapper?: NavProps['renderWrapper'];
     getPopupContainer?: DropdownProps['getPopupContainer'];
+    tooltipShowDelay?: number;
+    tooltipHideDelay?: number;
 }
 declare const NavContext: React.Context<NavContextType>;
 export default NavContext;

package/lib/cjs/rating/index.d.ts

@@ -69,7 +69,7 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
         autoFocus: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<NonNullable<number | "small" | "default">>;
+        size: PropTypes.Requireable<NonNullable<number | "default" | "small">>;
         tooltips: PropTypes.Requireable<string[]>;
         id: PropTypes.Requireable<string>;
         preventScroll: PropTypes.Requireable<boolean>;

package/lib/cjs/rating/item.d.ts

@@ -40,7 +40,7 @@ export default class Item extends BaseComponent<RatingItemProps, RatingItemState
         disabled: PropTypes.Requireable<boolean>;
         count: PropTypes.Requireable<number>;
         ariaLabelPrefix: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<NonNullable<number | "small" | "default">>;
+        size: PropTypes.Requireable<NonNullable<number | "default" | "small">>;
         'aria-describedby': PropTypes.Requireable<string>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/cjs/select/index.d.ts

@@ -33,6 +33,23 @@ export interface optionRenderProps {
     onClick?: (e: React.MouseEvent) => any;
     [x: string]: any;
 }
+export interface SelectedItemProps {
+    value: OptionProps['value'];
+    label: OptionProps['label'];
+    _show?: boolean;
+    _selected: boolean;
+    _scrollIndex?: number;
+}
+export interface TriggerRenderProps {
+    value: SelectedItemProps[];
+    inputValue: string;
+    onSearch: (inputValue: string) => void;
+    onClear: () => void;
+    onRemove: (option: OptionProps) => void;
+    disabled: boolean;
+    placeholder: string;
+    componentProps: Record<string, any>;
+}
 export interface selectMethod {
     clearInput?: () => void;
     selectAll?: () => void;
@@ -121,7 +138,7 @@ export declare type SelectProps = {
     onDeselect?: (value: SelectProps['value'], option: Record<string, any>) => void;
     onSelect?: (value: SelectProps['value'], option: Record<string, any>) => void;
     allowCreate?: boolean;
-    triggerRender?: (props?: any) => React.ReactNode;
+    triggerRender?: (props?: TriggerRenderProps) => React.ReactNode;
     onClear?: () => void;
     virtualize?: virtualListProps;
     onFocus?: (e: React.FocusEvent) => void;

package/lib/cjs/select/index.js

@@ -1212,11 +1212,14 @@ class Select extends _baseComponent.default {
     }, arrowIcon) : /*#__PURE__*/_react.default.createElement("div", {
       className: `${prefixcls}-arrow-empty`
     });
-    const clear = clearIcon ? clearIcon : /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null);
+    const clear = clearIcon ? clearIcon : /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null); // semantics of onSearch are more in line with behavior, onChange is alias of onSearch, will be deprecate next major version
+
     const inner = useCustomTrigger ? /*#__PURE__*/_react.default.createElement(_trigger.default, {
       value: Array.from(selections.values()),
       inputValue: inputValue,
       onChange: this.handleInputChange,
+      onSearch: this.handleInputChange,
+      onRemove: item => this.foundation.removeTag(item),
       onClear: this.onClear,
       disabled: disabled,
       triggerRender: triggerRender,

package/lib/cjs/sideSheet/SideSheetContent.d.ts

@@ -1,5 +1,6 @@
 import React, { CSSProperties } from 'react';
 import PropTypes from 'prop-types';
+import { SideSheetProps } from '@douyinfe/semi-foundation/lib/cjs/sideSheet/sideSheetFoundation';
 export interface SideSheetContentProps {
     onClose?: (e: React.MouseEvent) => void;
     mask?: boolean;
@@ -9,9 +10,10 @@ export interface SideSheetContentProps {
     title?: React.ReactNode;
     closable?: boolean;
     headerStyle?: CSSProperties;
-    width: CSSProperties['width'];
+    width?: CSSProperties['width'];
     height: CSSProperties['height'];
     style: CSSProperties;
+    size: SideSheetProps['size'];
     bodyStyle?: CSSProperties;
     className: string;
     dialogClassName?: string;

package/lib/cjs/sideSheet/SideSheetContent.js

@@ -143,7 +143,7 @@ class SideSheetContent extends _react.default.PureComponent {
       key: "dialog-element",
       role: "dialog",
       tabIndex: -1,
-      className: (0, _classnames.default)(`${prefixCls}-inner`, `${prefixCls}-inner-wrap`, (_a = this.props.dialogClassName) !== null && _a !== void 0 ? _a : ""),
+      className: (0, _classnames.default)(`${prefixCls}-inner`, `${prefixCls}-inner-wrap`, (_a = this.props.dialogClassName) !== null && _a !== void 0 ? _a : "", `${prefixCls}-size-${props.size}`),
       // onMouseDown={this.onDialogMouseDown}
       style: Object.assign(Object.assign({}, props.style), style)
     }, this.props.wrapperExtraProps), /*#__PURE__*/_react.default.createElement("div", {
@@ -167,7 +167,8 @@ class SideSheetContent extends _react.default.PureComponent {
       width
     } = this.props;
     const wrapperCls = (0, _classnames.default)(className, {
-      [`${prefixCls}-fixed`]: !mask
+      [`${prefixCls}-fixed`]: !mask,
+      [`${prefixCls}-size-${this.props.size}`]: !mask
     });
     const wrapperStyle = {};
 

package/lib/cjs/sideSheet/index.js

@@ -182,7 +182,6 @@ class SideSheet extends _baseComponent.default {
     } = this.context;
     const isVertical = placement === 'left' || placement === 'right';
     const isHorizontal = placement === 'top' || placement === 'bottom';
-    const sheetWidth = isVertical ? width ? width : defaultWidthList[size] : '100%';
     const sheetHeight = isHorizontal ? height ? height : defaultHeight : '100%';
     const classList = (0, _classnames.default)(prefixCls, className, {
       [`${prefixCls}-${placement}`]: placement,
@@ -191,11 +190,15 @@ class SideSheet extends _baseComponent.default {
       [`${prefixCls}-rtl`]: direction === 'rtl',
       [`${prefixCls}-hidden`]: keepDOM && this.state.displayNone
     });
-    const contentProps = Object.assign(Object.assign({}, props), {
+    const contentProps = Object.assign(Object.assign(Object.assign({}, isVertical ? width ? {
+      width
+    } : {} : {
+      width: "100%"
+    }), props), {
       visible,
       motion: false,
+      size,
       className: classList,
-      width: sheetWidth,
       height: sheetHeight,
       onClose: this.handleCancel
     });

package/lib/cjs/space/index.js

@@ -23,6 +23,8 @@ require("@douyinfe/semi-foundation/lib/cjs/space/space.css");
 
 var _utils = require("./utils");
 
+var _getDataAttr = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/getDataAttr"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -80,11 +82,12 @@ class Space extends _react.PureComponent {
       [`${prefixCls}-loose-vertical`]: spacingVerticalType === _constants.strings.SPACING_LOOSE
     });
     const childrenNodes = (0, _utils.flatten)(children);
-    return /*#__PURE__*/_react.default.createElement("div", {
+    const dataAttributes = (0, _getDataAttr.default)(this.props);
+    return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, dataAttributes, {
       className: classNames,
       style: realStyle,
       "x-semi-prop": "children"
-    }, childrenNodes);
+    }), childrenNodes);
   }
 
 }

package/lib/cjs/switch/index.d.ts

@@ -45,7 +45,7 @@ declare class Switch extends BaseComponent<SwitchProps, SwitchState> {
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
         style: PropTypes.Requireable<object>;
-        size: PropTypes.Requireable<"small" | "default" | "large">;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
         uncheckedText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         id: PropTypes.Requireable<string>;
     };

package/lib/cjs/switch/index.js

@@ -39,7 +39,7 @@ class Switch extends _baseComponent.default {
     };
 
     this.state = {
-      nativeControlChecked: false,
+      nativeControlChecked: props.defaultChecked || props.checked,
       nativeControlDisabled: false,
       focusVisible: false
     };

package/lib/cjs/table/Table.d.ts

@@ -60,7 +60,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
         components: PropTypes.Requireable<any>;
         bordered: PropTypes.Requireable<boolean>;
         loading: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<"small" | "default" | "middle">;
+        size: PropTypes.Requireable<"default" | "small" | "middle">;
         tableLayout: PropTypes.Requireable<"" | "fixed" | "auto">;
         columns: PropTypes.Requireable<PropTypes.InferProps<{
             align: PropTypes.Requireable<"left" | "right" | "center">;
@@ -297,7 +297,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
         showTotal?: boolean;
         pageSize?: number;
         pageSizeOpts?: number[];
-        size?: "small" | "default";
+        size?: "default" | "small";
         currentPage?: number;
         defaultCurrentPage?: number;
         onPageChange?: (currentPage: number) => void;

package/lib/cjs/table/index.d.ts

@@ -16,7 +16,7 @@ declare class Table<RecordType extends Record<string, any> = Data> extends React
         components: PropTypes.Requireable<any>;
         bordered: PropTypes.Requireable<boolean>;
         loading: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<"small" | "default" | "middle">;
+        size: PropTypes.Requireable<"default" | "small" | "middle">;
         tableLayout: PropTypes.Requireable<"" | "fixed" | "auto">;
         columns: PropTypes.Requireable<PropTypes.InferProps<{
             align: PropTypes.Requireable<"left" | "right" | "center">;

package/lib/cjs/tagInput/index.d.ts

@@ -96,7 +96,7 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         onAdd: PropTypes.Requireable<(...args: any[]) => any>;
         onRemove: PropTypes.Requireable<(...args: any[]) => any>;
         onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
-        size: PropTypes.Requireable<"small" | "default" | "large">;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
         prefix: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         suffix: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;

package/lib/cjs/timePicker/TimePicker.d.ts

@@ -130,7 +130,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         secondStep: PropTypes.Requireable<number>;
         focusOnOpen: PropTypes.Requireable<boolean>;
         autoFocus: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<"small" | "default" | "large">;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
         panels: PropTypes.Requireable<PropTypes.InferProps<{
             panelHeader: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
             panelFooter: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;

package/lib/cjs/timePicker/index.d.ts

@@ -48,7 +48,7 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         secondStep: import("prop-types").Requireable<number>;
         focusOnOpen: import("prop-types").Requireable<boolean>;
         autoFocus: import("prop-types").Requireable<boolean>;
-        size: import("prop-types").Requireable<"small" | "default" | "large">;
+        size: import("prop-types").Requireable<"default" | "small" | "large">;
         panels: import("prop-types").Requireable<import("prop-types").InferProps<{
             panelHeader: import("prop-types").Requireable<NonNullable<import("prop-types").ReactNodeLike>>;
             panelFooter: import("prop-types").Requireable<NonNullable<import("prop-types").ReactNodeLike>>;

package/lib/cjs/treeSelect/index.d.ts

@@ -180,6 +180,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
         showRestTagsPopover: PropTypes.Requireable<boolean>;
         restTagsPopoverProps: PropTypes.Requireable<object>;
         preventScroll: PropTypes.Requireable<boolean>;
+        clickTriggerToHide: PropTypes.Requireable<boolean>;
     };
     static defaultProps: Partial<TreeSelectProps>;
     inputRef: React.RefObject<typeof Input>;

package/lib/cjs/treeSelect/index.js

@@ -485,7 +485,9 @@ class TreeSelect extends _baseComponent.default {
         onClear: this.handleClear,
         componentName: 'TreeSelect',
         triggerRender: triggerRender,
-        componentProps: Object.assign({}, this.props)
+        componentProps: Object.assign({}, this.props),
+        onSearch: this.search,
+        onRemove: this.removeTag
       }) : [/*#__PURE__*/_react.default.createElement(_react.Fragment, {
         key: 'prefix'
       }, prefix || insetLabel ? this.renderPrefix() : null), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
@@ -1420,7 +1422,8 @@ TreeSelect.propTypes = {
   'aria-label': _propTypes.default.string,
   showRestTagsPopover: _propTypes.default.bool,
   restTagsPopoverProps: _propTypes.default.object,
-  preventScroll: _propTypes.default.bool
+  preventScroll: _propTypes.default.bool,
+  clickTriggerToHide: _propTypes.default.bool
 };
 TreeSelect.defaultProps = {
   searchPosition: _constants.strings.SEARCH_POSITION_DROPDOWN,
@@ -1450,7 +1453,8 @@ TreeSelect.defaultProps = {
   checkRelation: 'related',
   'aria-label': 'TreeSelect',
   showRestTagsPopover: false,
-  restTagsPopoverProps: {}
+  restTagsPopoverProps: {},
+  clickTriggerToHide: true
 };
 var _default = TreeSelect;
 exports.default = _default;

package/lib/cjs/typography/title.d.ts

@@ -37,7 +37,7 @@ export default class Title extends PureComponent<TitleProps> {
         underline: PropTypes.Requireable<boolean>;
         strong: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
-        heading: PropTypes.Requireable<4 | 2 | 1 | 3 | 6 | 5>;
+        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 6 | 5>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<string>;

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

@@ -39,7 +39,7 @@ declare class Anchor extends BaseComponent<AnchorProps, AnchorState> {
     static contextType: React.Context<ContextValue>;
     static Link: typeof Link;
     static PropTypes: {
-        size: PropTypes.Requireable<"small" | "default">;
+        size: PropTypes.Requireable<"default" | "small">;
         railTheme: PropTypes.Requireable<"primary" | "tertiary" | "muted">;
         className: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;

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

@@ -125,7 +125,7 @@ declare class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<Au
         renderSelectedItem: PropTypes.Requireable<(...args: any[]) => any>;
         suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         showClear: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<"small" | "default" | "large">;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
         style: PropTypes.Requireable<object>;
         stopPropagation: PropTypes.Requireable<NonNullable<string | boolean>>;
         maxHeight: PropTypes.Requireable<NonNullable<string | number>>;

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

@@ -47,7 +47,7 @@ export default class Button extends PureComponent<ButtonProps> {
         disabled: PropTypes.Requireable<boolean>;
         prefixCls: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
-        size: PropTypes.Requireable<"small" | "default" | "large">;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
         type: PropTypes.Requireable<"warning" | "primary" | "tertiary" | "secondary" | "danger">;
         block: PropTypes.Requireable<boolean>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;

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

@@ -18,7 +18,7 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         disabled: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<"small" | "default" | "large">;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
         theme: PropTypes.Requireable<"solid" | "light" | "borderless">;
         'aria-label': PropTypes.Requireable<string>;
     };

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

@@ -22,7 +22,7 @@ declare class Button extends React.PureComponent<ButtonProps> {
         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<"small" | "default" | "large">;
+        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>;

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

@@ -188,6 +188,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     componentDidUpdate(prevProps: CascaderProps): void;
     handleInputChange: (value: string) => void;
     handleTagRemove: (e: any, tagValuePath: Array<string | number>) => void;
+    handleRemoveByKey: (key: any) => void;
     renderTagItem: (value: string | Array<string>, idx: number, type: string) => string | number | boolean | React.ReactFragment | JSX.Element;
     renderTagInput(): JSX.Element;
     renderInput(): JSX.Element;

package/lib/es/cascader/index.js

@@ -41,6 +41,13 @@ class Cascader extends BaseComponent {
       this.foundation.handleTagRemove(e, tagValuePath);
     };
 
+    this.handleRemoveByKey = key => {
+      const {
+        keyEntities
+      } = this.state;
+      this.handleTagRemove(null, keyEntities[key].valuePath);
+    };
+
     this.renderTagItem = (value, idx, type) => {
       const {
         keyEntities,
@@ -330,7 +337,9 @@ class Cascader extends BaseComponent {
         disabled: disabled,
         triggerRender: triggerRender,
         componentName: 'Cascader',
-        componentProps: Object.assign({}, this.props)
+        componentProps: Object.assign({}, this.props),
+        onSearch: this.handleInputChange,
+        onRemove: this.handleRemoveByKey
       });
     };
 

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

@@ -15,6 +15,9 @@ export interface DateInputProps extends DateInputFoundationProps, BaseProps {
     onClear?: (e: React.MouseEvent<HTMLDivElement>) => void;
     onInsetInputChange?: (options: InsetInputChangeProps) => void;
     value?: Date[];
+    inputRef?: React.RefObject<HTMLInputElement>;
+    rangeInputStartRef?: React.RefObject<HTMLInputElement>;
+    rangeInputEndRef?: React.RefObject<HTMLInputElement>;
 }
 export default class DateInput extends BaseComponent<DateInputProps, {}> {
     static propTypes: {
@@ -26,7 +29,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         value: PropTypes.Requireable<any[]>;
         disabled: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "monthRange" | "dateTimeRange">;
         showClear: PropTypes.Requireable<boolean>;
         format: PropTypes.Requireable<string>;
         inputStyle: PropTypes.Requireable<object>;
@@ -81,6 +84,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
     renderRangeClearBtn(rangeStart: string, rangeEnd: string): JSX.Element;
     renderRangeSuffix(suffix: React.ReactNode): JSX.Element;
     renderRangeInput(rangeProps: DateInputProps): JSX.Element;
+    isRenderMultipleInputs(): boolean;
     renderInputInset(): JSX.Element;
     renderTriggerInput(): JSX.Element;
     render(): JSX.Element;

package/lib/es/datePicker/dateInput.js

@@ -264,6 +264,14 @@ export default class DateInput extends BaseComponent {
     })), this.renderRangeClearBtn(rangeStart, rangeEnd), this.renderRangeSuffix(suffix));
   }
 
+  isRenderMultipleInputs() {
+    const {
+      type
+    } = this.props; // isRange and not monthRange render multiple inputs
+
+    return type.includes('Range') && type !== 'monthRange';
+  }
+
   renderInputInset() {
     const {
       type,
@@ -277,9 +285,6 @@ export default class DateInput extends BaseComponent {
       density,
       insetInput
     } = this.props;
-
-    const _isRangeType = type.includes('Range');
-
     const newInsetInputValue = this.foundation.getInsetInputValue({
       value,
       insetInputValue
@@ -316,7 +321,7 @@ export default class DateInput extends BaseComponent {
       valuePath: 'monthLeft.timeInput',
       onChange: this.handleInsetInputChange,
       onFocus: handleInsetTimeFocus
-    }), _isRangeType && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    }), this.isRenderMultipleInputs() && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: separatorCls
     }, density === 'compact' ? null : '-'), /*#__PURE__*/React.createElement(InsetDateInput, {
       forwardRef: rangeInputEndRef,
@@ -361,6 +366,7 @@ export default class DateInput extends BaseComponent {
       prefix,
       autofocus,
       size,
+      inputRef,
       // range input support props, no need passing to not range type
       rangeInputStartRef,
       rangeInputEndRef,
@@ -373,7 +379,7 @@ export default class DateInput extends BaseComponent {
       insetInputValue,
       defaultPickerValue
     } = _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", "insetInput", "insetInputValue", "defaultPickerValue"]);
+          rest = __rest(_a, ["placeholder", "type", "value", "inputValue", "inputStyle", "disabled", "showClear", "inputReadOnly", "insetLabel", "validateStatus", "block", "prefixCls", "multiple", "dateFnsLocale", "onBlur", "onClear", "onFocus", "prefix", "autofocus", "size", "inputRef", "rangeInputStartRef", "rangeInputEndRef", "onRangeClear", "onRangeBlur", "onRangeEndTabPress", "rangeInputFocus", "rangeSeparator", "insetInput", "insetInputValue", "defaultPickerValue"]);
 
     const dateIcon = /*#__PURE__*/React.createElement(IconCalendar, {
       "aria-hidden": true
@@ -391,22 +397,23 @@ export default class DateInput extends BaseComponent {
     }
 
     const inputCls = cls({
-      [`${prefixCls}-input-readonly`]: inputReadOnly
+      [`${prefixCls}-input-readonly`]: inputReadOnly,
+      [`${prefixCls}-monthRange-input`]: type === 'monthRange'
     });
-    const isRangeType = /range/i.test(type);
     const rangeProps = Object.assign(Object.assign({}, this.props), {
       text,
       suffix,
       inputCls
     });
-    return isRangeType ? this.renderRangeInput(rangeProps) : /*#__PURE__*/React.createElement(Input, Object.assign({}, rest, {
+    return this.isRenderMultipleInputs() ? this.renderRangeInput(rangeProps) : /*#__PURE__*/React.createElement(Input, Object.assign({}, rest, {
+      ref: inputRef,
       insetLabel: insetLabel,
       disabled: disabled,
       readonly: inputReadOnly,
       className: inputCls,
       style: inputStyle,
       hideSuffix: showClear,
-      placeholder: placeholder,
+      placeholder: type === 'monthRange' && Array.isArray(placeholder) ? placeholder[0] + rangeSeparator + placeholder[1] : placeholder,
       onEnterPress: this.handleEnterPress,
       onChange: this.handleChange,
       onClear: this.handleInputClear,