@douyinfe/semi-ui 2.24.3 → 2.25.0-beta.0

package/lib/cjs/tagInput/index.js

@@ -338,7 +338,8 @@ class TagInput extends _baseComponent.default {
     } = this.state;
     const {
       showClear,
-      disabled
+      disabled,
+      clearIcon
     } = this.props;
     const clearCls = (0, _classnames.default)("".concat(prefixCls, "-clearBtn"), {
       ["".concat(prefixCls, "-clearBtn-invisible")]: !hovering || inputValue === '' && tagsArray.length === 0 || disabled
@@ -352,7 +353,7 @@ class TagInput extends _baseComponent.default {
         className: clearCls,
         onClick: e => this.handleClearBtn(e),
         onKeyPress: e => this.handleClearEnterPress(e)
-      }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null));
+      }, clearIcon ? clearIcon : /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null));
     }
 
     return null;
@@ -565,6 +566,7 @@ class TagInput extends _baseComponent.default {
 
 TagInput.propTypes = {
   children: _propTypes.default.node,
+  clearIcon: _propTypes.default.node,
   style: _propTypes.default.object,
   className: _propTypes.default.string,
   disabled: _propTypes.default.bool,

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
+import { PopoverProps } from '../popover';
 import TimePickerFoundation, { TimePickerAdapter } from '@douyinfe/semi-foundation/lib/cjs/timePicker/foundation';
 import '@douyinfe/semi-foundation/lib/cjs/timePicker/timePicker.css';
 import { InputSize } from '../input';
@@ -8,8 +9,8 @@ import { Position } from '../tooltip';
 import { ScrollItemProps } from '../scrollList/scrollItem';
 import { Locale } from '../locale/interface';
 export interface Panel {
-    panelHeader?: React.ReactNode;
-    panelFooter?: React.ReactNode;
+    panelHeader?: React.ReactNode | React.ReactNode[];
+    panelFooter?: React.ReactNode | React.ReactNode[];
 }
 export declare type BaseValueType = string | number | Date;
 export declare type Type = 'time' | 'timeRange';
@@ -23,6 +24,7 @@ export declare type TimePickerProps = {
     autoFocus?: boolean;
     className?: string;
     clearText?: string;
+    clearIcon?: React.ReactNode;
     dateFnsLocale?: Locale['dateFnsLocale'];
     defaultOpen?: boolean;
     defaultValue?: BaseValueType | BaseValueType[];
@@ -30,6 +32,7 @@ export declare type TimePickerProps = {
     disabledHours?: () => number[];
     disabledMinutes?: (selectedHour: number) => number[];
     disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
+    dropdownMargin?: PopoverProps['margin'];
     focusOnOpen?: boolean;
     format?: string;
     getPopupContainer?: () => HTMLElement;
@@ -45,8 +48,8 @@ export declare type TimePickerProps = {
     minuteStep?: number;
     motion?: boolean;
     open?: boolean;
-    panelFooter?: React.ReactNode;
-    panelHeader?: React.ReactNode;
+    panelFooter?: React.ReactNode | React.ReactNode[];
+    panelHeader?: React.ReactNode | React.ReactNode[];
     panels?: Panel[];
     placeholder?: string;
     popupClassName?: string;
@@ -98,6 +101,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         'aria-required': PropTypes.Requireable<boolean>;
         prefixCls: PropTypes.Requireable<string>;
         clearText: PropTypes.Requireable<string>;
+        clearIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         value: PropTypes.Requireable<NonNullable<string | number | string[] | number[] | Date | Date[]>>;
         inputReadOnly: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
@@ -117,6 +121,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         disabledHours: PropTypes.Requireable<(...args: any[]) => any>;
         disabledMinutes: PropTypes.Requireable<(...args: any[]) => any>;
         disabledSeconds: PropTypes.Requireable<(...args: any[]) => any>;
+        dropdownMargin: PropTypes.Requireable<NonNullable<number | object>>;
         hideDisabledOptions: PropTypes.Requireable<boolean>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         use12Hours: PropTypes.Requireable<boolean>;
@@ -197,8 +202,8 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
     }, index: number) => void;
     handleInput: (value: string) => void;
     createPanelProps: (index?: number) => {
-        panelHeader: React.ReactNode;
-        panelFooter: React.ReactNode;
+        panelHeader: React.ReactNode | React.ReactNode[];
+        panelFooter: React.ReactNode | React.ReactNode[];
     };
     getPanelElement(): JSX.Element;
     getPopupClassName(): string;

package/lib/cjs/timePicker/TimePicker.js

@@ -91,8 +91,8 @@ class TimePicker extends _baseComponent.default {
           0: locale.begin,
           1: locale.end
         };
-        panelProps.panelHeader = (0, _get2.default)(panels, index, (0, _isNullOrUndefined.default)(panelHeader) ? (0, _get2.default)(defaultHeaderMap, index, null) : panelHeader);
-        panelProps.panelFooter = (0, _get2.default)(panels, index, panelFooter);
+        panelProps.panelHeader = (0, _get2.default)(panels, index, (0, _isNullOrUndefined.default)(panelHeader) ? (0, _get2.default)(defaultHeaderMap, index, null) : Array.isArray(panelHeader) ? panelHeader[index] : panelHeader);
+        panelProps.panelFooter = (0, _get2.default)(panels, index, Array.isArray(panelFooter) ? panelFooter[index] : panelFooter);
       }
 
       return panelProps;
@@ -299,6 +299,7 @@ class TimePicker extends _baseComponent.default {
       placeholder,
       disabled,
       defaultValue,
+      dropdownMargin,
       className,
       popupStyle,
       size,
@@ -327,7 +328,7 @@ class TimePicker extends _baseComponent.default {
       motion,
       autoAdjustOverflow
     } = _a,
-          rest = __rest(_a, ["prefixCls", "placeholder", "disabled", "defaultValue", "className", "popupStyle", "size", "style", "locale", "localeCode", "zIndex", "getPopupContainer", "insetLabel", "insetLabelId", "inputStyle", "showClear", "panelHeader", "panelFooter", "rangeSeparator", "onOpenChange", "onChangeWithDateFirst", "popupClassName", "hideDisabledOptions", "use12Hours", "minuteStep", "hourStep", "secondStep", "scrollItemProps", "triggerRender", "motion", "autoAdjustOverflow"]);
+          rest = __rest(_a, ["prefixCls", "placeholder", "disabled", "defaultValue", "dropdownMargin", "className", "popupStyle", "size", "style", "locale", "localeCode", "zIndex", "getPopupContainer", "insetLabel", "insetLabelId", "inputStyle", "showClear", "panelHeader", "panelFooter", "rangeSeparator", "onOpenChange", "onChangeWithDateFirst", "popupClassName", "hideDisabledOptions", "use12Hours", "minuteStep", "hourStep", "secondStep", "scrollItemProps", "triggerRender", "motion", "autoAdjustOverflow"]);
 
     const format = this.foundation.getDefaultFormatIfNeed();
     const position = this.foundation.getPosition();
@@ -387,6 +388,7 @@ class TimePicker extends _baseComponent.default {
       position: position,
       visible: disabled ? false : Boolean(open),
       motion: motion,
+      margin: dropdownMargin,
       autoAdjustOverflow: autoAdjustOverflow
     }, useCustomTrigger ? /*#__PURE__*/_react.default.createElement(_trigger.default, {
       triggerRender: triggerRender,
@@ -414,6 +416,7 @@ TimePicker.propTypes = Object.assign(Object.assign({
   'aria-required': _propTypes.default.bool,
   prefixCls: _propTypes.default.string,
   clearText: _propTypes.default.string,
+  clearIcon: _propTypes.default.node,
   value: _TimeShape.TimeShape,
   inputReadOnly: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
@@ -433,6 +436,7 @@ TimePicker.propTypes = Object.assign(Object.assign({
   disabledHours: _propTypes.default.func,
   disabledMinutes: _propTypes.default.func,
   disabledSeconds: _propTypes.default.func,
+  dropdownMargin: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.object]),
   hideDisabledOptions: _propTypes.default.bool,
   onChange: _propTypes.default.func,
   use12Hours: _propTypes.default.bool,

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

@@ -19,6 +19,7 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         'aria-required': import("prop-types").Requireable<boolean>;
         prefixCls: import("prop-types").Requireable<string>;
         clearText: import("prop-types").Requireable<string>;
+        clearIcon: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
         value: import("prop-types").Requireable<NonNullable<string | number | string[] | number[] | Date | Date[]>>;
         inputReadOnly: import("prop-types").Requireable<boolean>;
         disabled: import("prop-types").Requireable<boolean>;
@@ -38,6 +39,7 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         disabledHours: import("prop-types").Requireable<(...args: any[]) => any>;
         disabledMinutes: import("prop-types").Requireable<(...args: any[]) => any>;
         disabledSeconds: import("prop-types").Requireable<(...args: any[]) => any>;
+        dropdownMargin: import("prop-types").Requireable<NonNullable<number | object>>;
         hideDisabledOptions: import("prop-types").Requireable<boolean>;
         onChange: import("prop-types").Requireable<(...args: any[]) => any>;
         use12Hours: import("prop-types").Requireable<boolean>;

package/lib/cjs/tooltip/index.js

@@ -220,6 +220,8 @@ class Tooltip extends _baseComponent.default {
       const icon = this.renderIcon();
       const portalInnerStyle = (0, _omit2.default)(containerStyle, motion ? ['transformOrigin'] : undefined);
       const transformOrigin = (0, _get2.default)(containerStyle, 'transformOrigin');
+      const userOpacity = (0, _get2.default)(style, 'opacity');
+      const opacity = userOpacity ? userOpacity : 1;
 
       const inner = /*#__PURE__*/_react.default.createElement(_cssAnimation.default, {
         fillMode: "forwards",
@@ -242,11 +244,11 @@ class Tooltip extends _baseComponent.default {
         } = _ref;
         return /*#__PURE__*/_react.default.createElement("div", Object.assign({
           className: (0, _classnames.default)(className, animationClassName),
-          style: Object.assign(Object.assign(Object.assign({
-            opacity: isPositionUpdated ? '1' : "0"
-          }, animationStyle), {
+          style: Object.assign(Object.assign(Object.assign(Object.assign({}, animationStyle), {
             transformOrigin
-          }), style)
+          }), style), {
+            opacity: isPositionUpdated ? opacity : "0"
+          })
         }, portalEventSet, animationEventsNeedBind, {
           role: role,
           "x-placement": placement,

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

@@ -46,10 +46,12 @@ export interface TreeSelectProps extends Omit<BasicTreeSelectProps, OverrideComm
     arrowIcon?: React.ReactNode;
     autoAdjustOverflow?: boolean;
     clickToHide?: boolean;
+    clearIcon?: React.ReactNode;
     defaultOpen?: boolean;
     dropdownClassName?: string;
     dropdownMatchSelectWidth?: boolean;
     dropdownStyle?: React.CSSProperties;
+    dropdownMargin?: PopoverProps['margin'];
     insetLabel?: React.ReactNode;
     insetLabelId?: string;
     maxTagCount?: number;
@@ -59,6 +61,7 @@ export interface TreeSelectProps extends Omit<BasicTreeSelectProps, OverrideComm
     outerTopSlot?: React.ReactNode;
     placeholder?: string;
     prefix?: React.ReactNode;
+    position?: PopoverProps['position'];
     searchAutoFocus?: boolean;
     searchPlaceholder?: string;
     showSearchClear?: boolean;
@@ -102,6 +105,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
         loadData: PropTypes.Requireable<(...args: any[]) => any>;
         onLoad: PropTypes.Requireable<(...args: any[]) => any>;
         arrowIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        clearIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         defaultOpen: PropTypes.Requireable<boolean>;
         defaultValue: PropTypes.Requireable<NonNullable<string | any[]>>;
         defaultExpandAll: PropTypes.Requireable<boolean>;
@@ -139,6 +143,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
         }>[]>;
         dropdownClassName: PropTypes.Requireable<string>;
         dropdownStyle: PropTypes.Requireable<object>;
+        dropdownMargin: PropTypes.Requireable<NonNullable<number | object>>;
         motion: PropTypes.Requireable<boolean>;
         placeholder: PropTypes.Requireable<string>;
         maxTagCount: PropTypes.Requireable<number>;

package/lib/cjs/treeSelect/index.js

@@ -396,6 +396,9 @@ class TreeSelect extends _baseComponent.default {
 
     this.renderClearBtn = () => {
       const showClearBtn = this.showClearBtn();
+      const {
+        clearIcon
+      } = this.props;
       const clearCls = (0, _classnames.default)("".concat(prefixcls, "-clearbtn"));
 
       if (showClearBtn) {
@@ -406,7 +409,7 @@ class TreeSelect extends _baseComponent.default {
           className: clearCls,
           onClick: this.handleClear,
           onKeyPress: this.handleClearEnterPress
-        }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null));
+        }, clearIcon ? clearIcon : /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null));
       }
 
       return null;
@@ -1281,19 +1284,22 @@ class TreeSelect extends _baseComponent.default {
       mouseEnterDelay,
       autoAdjustOverflow,
       stopPropagation,
-      getPopupContainer
+      getPopupContainer,
+      dropdownMargin,
+      position
     } = this.props;
     const {
       isOpen,
       rePosKey
     } = this.state;
     const selection = this.renderSelection();
-    const pos = 'bottomLeft';
+    const pos = position ? position : 'bottomLeft';
     return /*#__PURE__*/_react.default.createElement(_index3.default, {
       stopPropagation: stopPropagation,
       getPopupContainer: getPopupContainer,
       zIndex: zIndex,
       motion: motion,
+      margin: dropdownMargin,
       ref: this.optionsRef,
       content: content,
       visible: isOpen,
@@ -1320,6 +1326,7 @@ TreeSelect.propTypes = {
   loadData: _propTypes.default.func,
   onLoad: _propTypes.default.func,
   arrowIcon: _propTypes.default.node,
+  clearIcon: _propTypes.default.node,
   defaultOpen: _propTypes.default.bool,
   defaultValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
   defaultExpandAll: _propTypes.default.bool,
@@ -1358,6 +1365,7 @@ TreeSelect.propTypes = {
   })),
   dropdownClassName: _propTypes.default.string,
   dropdownStyle: _propTypes.default.object,
+  dropdownMargin: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.object]),
   motion: _propTypes.default.bool,
   placeholder: _propTypes.default.string,
   maxTagCount: _propTypes.default.number,

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

@@ -26,6 +26,7 @@ export interface AutoCompleteProps<T extends AutoCompleteItems> {
     autoAdjustOverflow?: boolean;
     autoFocus?: boolean;
     className?: string;
+    clearIcon?: ReactNode;
     children?: ReactNode | undefined;
     data?: T[];
     disabled?: boolean;
@@ -94,6 +95,7 @@ declare class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<Au
         autoFocus: PropTypes.Requireable<boolean>;
         autoAdjustOverflow: PropTypes.Requireable<boolean>;
         className: PropTypes.Requireable<string>;
+        clearIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         data: PropTypes.Requireable<any[]>;
         defaultOpen: PropTypes.Requireable<boolean>;

package/lib/es/autoComplete/index.js

@@ -183,7 +183,8 @@ class AutoComplete extends BaseComponent {
       validateStatus,
       autoFocus,
       value,
-      id
+      id,
+      clearIcon
     } = this.props;
     const {
       inputValue,
@@ -224,7 +225,8 @@ class AutoComplete extends BaseComponent {
       validateStatus,
       size,
       onBlur: this.onBlur,
-      onFocus: this.onFocus
+      onFocus: this.onFocus,
+      clearIcon
     };
     return /*#__PURE__*/React.createElement("div", Object.assign({}, outerProps), typeof triggerRender === 'function' ? /*#__PURE__*/React.createElement(Trigger, Object.assign({}, innerProps, {
       inputValue: typeof value !== 'undefined' ? value : inputValue,
@@ -340,6 +342,7 @@ AutoComplete.propTypes = {
   autoFocus: PropTypes.bool,
   autoAdjustOverflow: PropTypes.bool,
   className: PropTypes.string,
+  clearIcon: PropTypes.node,
   children: PropTypes.node,
   data: PropTypes.array,
   defaultOpen: PropTypes.bool,

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

@@ -27,8 +27,10 @@ export interface CascaderProps extends BasicCascaderProps {
     'aria-required'?: React.AriaAttributes['aria-required'];
     'aria-label'?: React.AriaAttributes['aria-label'];
     arrowIcon?: ReactNode;
+    clearIcon?: ReactNode;
     defaultValue?: Value;
     dropdownStyle?: CSSProperties;
+    dropdownMargin?: PopoverProps['margin'];
     emptyContent?: ReactNode;
     motion?: boolean;
     treeData?: Array<CascaderData>;
@@ -70,11 +72,13 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         'aria-required': PropTypes.Requireable<boolean>;
         'aria-label': PropTypes.Requireable<string>;
         arrowIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        clearIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         changeOnSelect: PropTypes.Requireable<boolean>;
         defaultValue: PropTypes.Requireable<NonNullable<string | any[]>>;
         disabled: PropTypes.Requireable<boolean>;
         dropdownClassName: PropTypes.Requireable<string>;
         dropdownStyle: PropTypes.Requireable<object>;
+        dropdownMargin: PropTypes.Requireable<NonNullable<number | object>>;
         emptyContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         motion: PropTypes.Requireable<boolean>;
         filterTreeNode: PropTypes.Requireable<NonNullable<boolean | ((...args: any[]) => any)>>;

package/lib/es/cascader/index.js

@@ -375,6 +375,9 @@ class Cascader extends BaseComponent {
 
     this.renderClearBtn = () => {
       const clearCls = cls("".concat(prefixcls, "-clearbtn"));
+      const {
+        clearIcon
+      } = this.props;
       const allowClear = this.showClearBtn();
 
       if (allowClear) {
@@ -384,7 +387,7 @@ class Cascader extends BaseComponent {
           onKeyPress: this.handleClearEnterPress,
           role: "button",
           tabIndex: 0
-        }, /*#__PURE__*/React.createElement(IconClear, null));
+        }, clearIcon ? clearIcon : /*#__PURE__*/React.createElement(IconClear, null));
       }
 
       return null;
@@ -911,7 +914,8 @@ class Cascader extends BaseComponent {
       mouseLeaveDelay,
       mouseEnterDelay,
       position,
-      motion
+      motion,
+      dropdownMargin
     } = this.props;
     const {
       isOpen,
@@ -927,6 +931,7 @@ class Cascader extends BaseComponent {
       getPopupContainer: getPopupContainer,
       zIndex: zIndex,
       motion: motion,
+      margin: dropdownMargin,
       ref: this.optionsRef,
       content: content,
       visible: isOpen,
@@ -952,11 +957,13 @@ Cascader.propTypes = {
   'aria-required': PropTypes.bool,
   'aria-label': PropTypes.string,
   arrowIcon: PropTypes.node,
+  clearIcon: PropTypes.node,
   changeOnSelect: PropTypes.bool,
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   disabled: PropTypes.bool,
   dropdownClassName: PropTypes.string,
   dropdownStyle: PropTypes.object,
+  dropdownMargin: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
   emptyContent: PropTypes.node,
   motion: PropTypes.bool,
 

package/lib/es/datePicker/dateInput.js

@@ -166,7 +166,8 @@ export default class DateInput extends BaseComponent {
     const {
       showClear,
       prefixCls,
-      disabled
+      disabled,
+      clearIcon
     } = this.props;
     const allowClear = (rangeStart || rangeEnd) && showClear;
     return allowClear && !disabled ? /*#__PURE__*/React.createElement("div", {
@@ -175,7 +176,7 @@ export default class DateInput extends BaseComponent {
       "aria-label": "Clear range input value",
       className: "".concat(prefixCls, "-range-input-clearbtn"),
       onMouseDown: e => !disabled && this.handleRangeInputClear(e)
-    }, /*#__PURE__*/React.createElement(IconClear, {
+    }, clearIcon ? clearIcon : /*#__PURE__*/React.createElement(IconClear, {
       "aria-hidden": true
     })) : null;
   }

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { ContextValue } from '../configProvider/context';
 import DatePickerFoundation, { DatePickerAdapter, DatePickerFoundationProps, DatePickerFoundationState, DayStatusType, PresetType, Type, RangeType } from '@douyinfe/semi-foundation/lib/es/datePicker/foundation';
 import BaseComponent from '../_base/baseComponent';
+import { PopoverProps } from '../popover/index';
 import { DateInputProps } from './dateInput';
 import MonthsGrid, { MonthsGridProps } from './monthsGrid';
 import { YearAndMonthProps } from './yearAndMonth';
@@ -17,6 +18,7 @@ export interface DatePickerProps extends DatePickerFoundationProps {
     'aria-invalid'?: React.AriaAttributes['aria-invalid'];
     'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
     'aria-required'?: React.AriaAttributes['aria-required'];
+    clearIcon?: React.ReactNode;
     timePickerOpts?: TimePickerProps;
     bottomSlot?: React.ReactNode;
     insetLabel?: React.ReactNode;
@@ -33,6 +35,7 @@ export interface DatePickerProps extends DatePickerFoundationProps {
     locale?: Locale['DatePicker'];
     dateFnsLocale?: Locale['dateFnsLocale'];
     yearAndMonthOpts?: ScrollItemProps<any>;
+    dropdownMargin?: PopoverProps['margin'];
 }
 export declare type DatePickerState = DatePickerFoundationState;
 export default class DatePicker extends BaseComponent<DatePickerProps, DatePickerState> {
@@ -45,6 +48,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         'aria-required': PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
         size: PropTypes.Requireable<"default" | "small" | "large">;
+        clearIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         density: PropTypes.Requireable<"default" | "compact">;
         defaultValue: PropTypes.Requireable<NonNullable<string | number | object>>;
         value: PropTypes.Requireable<NonNullable<string | number | object>>;
@@ -100,6 +104,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         autoSwitchDate: PropTypes.Requireable<boolean>;
         dropdownClassName: PropTypes.Requireable<string>;
         dropdownStyle: PropTypes.Requireable<object>;
+        dropdownMargin: PropTypes.Requireable<NonNullable<number | object>>;
         topSlot: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         bottomSlot: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         dateFnsLocale: PropTypes.Requireable<object>;

package/lib/es/datePicker/datePicker.js

@@ -237,7 +237,8 @@ export default class DatePicker extends BaseComponent {
         dateFnsLocale,
         stopPropagation,
         autoAdjustOverflow,
-        spacing
+        spacing,
+        dropdownMargin
       } = this.props;
       return /*#__PURE__*/React.createElement(Popover, {
         getPopupContainer: getPopupContainer,
@@ -245,6 +246,7 @@ export default class DatePicker extends BaseComponent {
         autoAdjustOverflow: autoAdjustOverflow,
         zIndex: zIndex,
         motion: motion,
+        margin: dropdownMargin,
         content: this.renderPanel(locale, localeCode, dateFnsLocale),
         trigger: "custom",
         position: position,
@@ -647,6 +649,7 @@ export default class DatePicker extends BaseComponent {
 
   renderInner(extraProps) {
     const {
+      clearIcon,
       type,
       format,
       multiple,
@@ -688,6 +691,7 @@ export default class DatePicker extends BaseComponent {
 
     const props = Object.assign(Object.assign({}, extraProps), {
       placeholder: phText,
+      clearIcon,
       disabled: inputDisabled,
       inputValue,
       value: value,
@@ -769,6 +773,7 @@ DatePicker.propTypes = {
   'aria-required': PropTypes.bool,
   type: PropTypes.oneOf(strings.TYPE_SET),
   size: PropTypes.oneOf(strings.SIZE_SET),
+  clearIcon: PropTypes.node,
   density: PropTypes.oneOf(strings.DENSITY_SET),
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object, PropTypes.array]),
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object, PropTypes.array]),
@@ -824,6 +829,7 @@ DatePicker.propTypes = {
   autoSwitchDate: PropTypes.bool,
   dropdownClassName: PropTypes.string,
   dropdownStyle: PropTypes.object,
+  dropdownMargin: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
   topSlot: PropTypes.node,
   bottomSlot: PropTypes.node,
   dateFnsLocale: PropTypes.object,

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

@@ -55,25 +55,26 @@ declare class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
     static Title: typeof DropdownTitle;
     static contextType: React.Context<DropdownContextType>;
     static propTypes: {
-        render: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        visible: PropTypes.Requireable<boolean>;
-        position: PropTypes.Requireable<"left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
+        contentClassName: PropTypes.Requireable<NonNullable<string | any[]>>;
+        className: PropTypes.Requireable<string>;
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
+        margin: PropTypes.Requireable<NonNullable<number | object>>;
         mouseEnterDelay: PropTypes.Requireable<number>;
         mouseLeaveDelay: PropTypes.Requireable<number>;
-        trigger: PropTypes.Requireable<string>;
-        zIndex: PropTypes.Requireable<number>;
+        menu: PropTypes.Requireable<any[]>;
         motion: PropTypes.Requireable<NonNullable<boolean | object>>;
-        className: PropTypes.Requireable<string>;
-        contentClassName: PropTypes.Requireable<NonNullable<string | any[]>>;
-        style: PropTypes.Requireable<object>;
         onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
-        rePosKey: PropTypes.Requireable<NonNullable<string | number>>;
-        showTick: PropTypes.Requireable<boolean>;
         prefixCls: PropTypes.Requireable<string>;
+        position: PropTypes.Requireable<"left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
+        rePosKey: PropTypes.Requireable<NonNullable<string | number>>;
+        render: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         spacing: PropTypes.Requireable<number>;
-        menu: PropTypes.Requireable<any[]>;
+        showTick: PropTypes.Requireable<boolean>;
+        style: PropTypes.Requireable<object>;
+        trigger: PropTypes.Requireable<string>;
+        visible: PropTypes.Requireable<boolean>;
+        zIndex: PropTypes.Requireable<number>;
     };
     static defaultProps: {
         onVisibleChange: (...args: any[]) => void;

package/lib/es/dropdown/index.js

@@ -172,10 +172,11 @@ class Dropdown extends BaseComponent {
       zIndex,
       className,
       motion,
+      margin,
       style,
       prefixCls
     } = _a,
-          attr = __rest(_a, ["children", "position", "trigger", "onVisibleChange", "zIndex", "className", "motion", "style", "prefixCls"]);
+          attr = __rest(_a, ["children", "position", "trigger", "onVisibleChange", "zIndex", "className", "motion", "margin", "style", "prefixCls"]);
 
     let {
       spacing
@@ -197,6 +198,7 @@ class Dropdown extends BaseComponent {
     return /*#__PURE__*/React.createElement(Tooltip, Object.assign({
       zIndex: zIndex,
       motion: motion,
+      margin: margin,
       content: pop,
       className: className,
       prefixCls: prefixCls,
@@ -232,25 +234,26 @@ Dropdown.Divider = DropdownDivider;
 Dropdown.Title = DropdownTitle;
 Dropdown.contextType = DropdownContext;
 Dropdown.propTypes = {
-  render: PropTypes.node,
   children: PropTypes.node,
-  visible: PropTypes.bool,
-  position: PropTypes.oneOf(positionSet),
+  contentClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  className: PropTypes.string,
   getPopupContainer: PropTypes.func,
+  margin: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
   mouseEnterDelay: PropTypes.number,
   mouseLeaveDelay: PropTypes.number,
-  trigger: PropTypes.oneOf(triggerSet),
-  zIndex: PropTypes.number,
+  menu: PropTypes.array,
   motion: PropTypes.oneOfType([PropTypes.bool, PropTypes.func, PropTypes.object]),
-  className: PropTypes.string,
-  contentClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-  style: PropTypes.object,
   onVisibleChange: PropTypes.func,
-  rePosKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  showTick: PropTypes.bool,
   prefixCls: PropTypes.string,
+  position: PropTypes.oneOf(positionSet),
+  rePosKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  render: PropTypes.node,
   spacing: PropTypes.number,
-  menu: PropTypes.array
+  showTick: PropTypes.bool,
+  style: PropTypes.object,
+  trigger: PropTypes.oneOf(triggerSet),
+  visible: PropTypes.bool,
+  zIndex: PropTypes.number
 };
 Dropdown.defaultProps = {
   onVisibleChange: _noop,

package/lib/es/form/baseForm.d.ts

@@ -64,6 +64,7 @@ declare class Form<Values extends Record<string, any> = any> extends BaseCompone
         autoFocus?: boolean;
         autoClearSearchValue?: boolean;
         arrowIcon?: React.ReactNode;
+        clearIcon?: React.ReactNode;
         defaultValue?: string | number | any[] | Record<string, any>;
         value?: string | number | any[] | Record<string, any>;
         placeholder?: React.ReactNode;
@@ -84,6 +85,12 @@ declare class Form<Values extends Record<string, any> = any> extends BaseCompone
         onSearch?: (value: string) => void;
         dropdownClassName?: string;
         dropdownStyle?: React.CSSProperties;
+        dropdownMargin?: number | {
+            marginLeft: number;
+            marginTop: number;
+            marginRight: number;
+            marginBottom: number;
+        };
         outerTopSlot?: React.ReactNode;
         innerTopSlot?: React.ReactNode;
         outerBottomSlot?: React.ReactNode;

package/lib/es/form/field.d.ts

@@ -12,6 +12,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     autoFocus?: boolean;
     autoClearSearchValue?: boolean;
     arrowIcon?: import("react").ReactNode;
+    clearIcon?: import("react").ReactNode;
     defaultValue?: string | number | any[] | Record<string, any>;
     value?: string | number | any[] | Record<string, any>;
     placeholder?: import("react").ReactNode;
@@ -32,6 +33,12 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     onSearch?: (value: string) => void;
     dropdownClassName?: string;
     dropdownStyle?: import("react").CSSProperties;
+    dropdownMargin?: number | {
+        marginLeft: number;
+        marginTop: number;
+        marginRight: number;
+        marginBottom: number;
+    };
     outerTopSlot?: import("react").ReactNode;
     innerTopSlot?: import("react").ReactNode;
     outerBottomSlot?: import("react").ReactNode;