@douyinfe/semi-ui 2.17.0-alpha.1 → 2.17.0

package/empty/index.tsx

@@ -79,17 +79,17 @@ export default class Empty extends BaseComponent<EmptyProps, EmptyState> {
         const { className, image, description, style, title, imageStyle, children, layout, darkModeImage } = this.props;
 
         const alt = typeof description === 'string' ? description : 'empty';
-        const imgSrc = this.state.mode && darkModeImage ? darkModeImage : image;
+        const imgSrc = ((this.state.mode === 'dark') && darkModeImage) ? darkModeImage : image;
         let imageNode = null;
         if (typeof imgSrc === 'string') {
-            imageNode = <img alt={alt} src={imgSrc} />;
+            imageNode = <img alt={alt} src={imgSrc}/>;
         } else if (imgSrc && 'id' in (imgSrc as any)) {
             imageNode = (
                 <svg
                     // className={iconCls}
                     aria-hidden="true"
                 >
-                    <use xlinkHref={`#${(imgSrc as any).id}`} />
+                    <use xlinkHref={`#${(imgSrc as any).id}`}/>
                 </svg>
             );
         } else {

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

@@ -19,7 +19,7 @@ export interface AvatarProps extends BaseProps {
     imgAttr?: React.ImgHTMLAttributes<HTMLImageElement>;
 }
 export declare type AvatarGroupShape = 'circle' | 'square';
-export declare type AvatarGroupSize = 'extra-extra-small' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
+export declare type AvatarGroupSize = 'extra-extra-small' | 'extra-small' | 'small' | 'default' | 'medium' | 'large' | 'extra-large';
 export declare type AvatarGroupOverlapFrom = 'start' | 'end';
 export interface AvatarGroupProps {
     children?: React.ReactNode;

package/lib/cjs/cascader/index.js

@@ -801,6 +801,33 @@ class Cascader extends _baseComponent.default {
       return firstInProps || treeDataHasChange;
     };
 
+    const getRealKeys = (realValue, keyEntities) => {
+      // normallizedValue is used to save the value in two-dimensional array format
+      let normallizedValue = [];
+
+      if ((0, _isArray.default)(realValue)) {
+        normallizedValue = (0, _isArray.default)(realValue[0]) ? realValue : [realValue];
+      } else {
+        if (realValue !== undefined) {
+          normallizedValue = [[realValue]];
+        }
+      } // formatValuePath is used to save value of valuePath
+
+
+      const formatValuePath = [];
+      (0, _forEach.default)(normallizedValue).call(normallizedValue, valueItem => {
+        const formatItem = onChangeWithObject ? (0, _map.default)(valueItem).call(valueItem, i => i === null || i === void 0 ? void 0 : i.value) : valueItem;
+        formatValuePath.push(formatItem);
+      }); // formatKeys is used to save key of value
+
+      const formatKeys = [];
+      (0, _forEach.default)(formatValuePath).call(formatValuePath, v => {
+        const formatKeyItem = (0, _util.findKeysForValues)(v, keyEntities);
+        !(0, _isEmpty2.default)(formatKeyItem) && formatKeys.push(formatKeyItem);
+      });
+      return formatKeys;
+    };
+
     const needUpdateTreeData = needUpdate('treeData') || needUpdateData();
     const needUpdateValue = needUpdate('value') || (0, _isEmpty2.default)(prevProps) && defaultValue;
 
@@ -817,31 +844,15 @@ class Cascader extends _baseComponent.default {
         let realKeys = prevState.checkedKeys; // when data was updated
 
         if (needUpdateValue) {
-          // normallizedValue is used to save the value in two-dimensional array format
-          let normallizedValue = [];
-          const realValue = needUpdate('value') ? value : defaultValue; // eslint-disable-next-line max-depth
-
-          if ((0, _isArray.default)(realValue)) {
-            normallizedValue = (0, _isArray.default)(realValue[0]) ? realValue : [realValue];
-          } else {
-            if (realValue !== undefined) {
-              normallizedValue = [[realValue]];
-            }
-          } // formatValuePath is used to save value of valuePath
-
-
-          const formatValuePath = [];
-          (0, _forEach.default)(normallizedValue).call(normallizedValue, valueItem => {
-            const formatItem = onChangeWithObject ? (0, _map.default)(valueItem).call(valueItem, i => i === null || i === void 0 ? void 0 : i.value) : valueItem;
-            formatValuePath.push(formatItem);
-          }); // formatKeys is used to save key of value
-
-          const formatKeys = [];
-          (0, _forEach.default)(formatValuePath).call(formatValuePath, v => {
-            const formatKeyItem = (0, _util.findKeysForValues)(v, keyEntities);
-            !(0, _isEmpty2.default)(formatKeyItem) && formatKeys.push(formatKeyItem);
-          });
-          realKeys = formatKeys;
+          const realValue = needUpdate('value') ? value : defaultValue;
+          realKeys = getRealKeys(realValue, keyEntities);
+        } else {
+          // needUpdateValue is false
+          // if treeData is updated & Cascader is controlled, realKeys should be recalculated
+          if (needUpdateTreeData && 'value' in props) {
+            const realValue = value;
+            realKeys = getRealKeys(realValue, keyEntities);
+          }
         }
 
         if ((0, _isSet2.default)(realKeys)) {

package/lib/cjs/checkbox/checkbox.js

@@ -123,7 +123,10 @@ class Checkbox extends _baseComponent.default {
   }
 
   isInGroup() {
-    return Boolean(this.context && this.context.checkboxGroup);
+    // Why do we need to determine whether there is a value in props?
+    // If there is no value in the props of the checkbox in the context of the checkboxGroup, 
+    // it will be considered not to belong to the checkboxGroup。
+    return Boolean(this.context && this.context.checkboxGroup && 'value' in this.props);
   }
 
   focus() {

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

@@ -9,6 +9,8 @@ export interface CollapsePanelProps {
     children?: React.ReactNode;
     reCalcKey?: number | string;
     style?: CSSProperties;
+    showArrow?: boolean;
+    disabled?: boolean;
 }
 export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
     static contextType: React.Context<CollapseContextType>;
@@ -18,6 +20,12 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
         header: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
         reCalcKey: PropTypes.Requireable<string | number>;
+        showArrow: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        showArrow: boolean;
+        disabled: boolean;
     };
     private ariaID;
     context: CollapseContextType;

package/lib/cjs/collapse/item.js

@@ -60,6 +60,7 @@ class CollapsePanel extends _react.PureComponent {
   renderHeader(active) {
     let expandIconEnable = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     const {
+      showArrow,
       header,
       extra
     } = this.props;
@@ -89,12 +90,12 @@ class CollapsePanel extends _react.PureComponent {
     const iconPosLeft = expandIconPosition === 'left';
 
     if (typeof header === 'string') {
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconPosLeft ? icon : null, /*#__PURE__*/_react.default.createElement("span", null, header), /*#__PURE__*/_react.default.createElement("span", {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showArrow && (iconPosLeft ? icon : null), /*#__PURE__*/_react.default.createElement("span", null, header), /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(_constants.cssClasses.PREFIX, "-header-right")
-      }, /*#__PURE__*/_react.default.createElement("span", null, extra), iconPosLeft ? null : icon));
+      }, /*#__PURE__*/_react.default.createElement("span", null, extra), showArrow && (iconPosLeft ? null : icon)));
     }
 
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconPosLeft ? icon : null, header, iconPosLeft ? null : icon);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showArrow && (iconPosLeft ? icon : null), header, showArrow && (iconPosLeft ? null : icon));
   }
 
   render() {
@@ -105,9 +106,11 @@ class CollapsePanel extends _react.PureComponent {
       itemKey,
       reCalcKey,
       header,
-      extra
+      extra,
+      showArrow,
+      disabled
     } = _a,
-          restProps = __rest(_a, ["className", "children", "itemKey", "reCalcKey", "header", "extra"]);
+          restProps = __rest(_a, ["className", "children", "itemKey", "reCalcKey", "header", "extra", "showArrow", "disabled"]);
 
     const {
       keepDOM,
@@ -122,6 +125,7 @@ class CollapsePanel extends _react.PureComponent {
     });
     const headerCls = (0, _classnames.default)({
       ["".concat(_constants.cssClasses.PREFIX, "-header")]: true,
+      ["".concat(_constants.cssClasses.PREFIX, "-header-disabled")]: disabled,
       ["".concat(_constants.cssClasses.PREFIX, "-header-iconLeft")]: expandIconPosition === 'left'
     });
     const contentCls = (0, _classnames.default)({
@@ -133,10 +137,11 @@ class CollapsePanel extends _react.PureComponent {
       role: "button",
       tabIndex: 0,
       className: headerCls,
+      "aria-disabled": disabled,
       "aria-expanded": active ? 'true' : 'false',
       "aria-owns": this.ariaID,
-      onClick: e => onClick(itemKey, e)
-    }, this.renderHeader(active, children !== undefined)), children && /*#__PURE__*/_react.default.createElement(_collapsible.default, {
+      onClick: e => !disabled && onClick(itemKey, e)
+    }, this.renderHeader(active, children !== undefined && !disabled)), children && /*#__PURE__*/_react.default.createElement(_collapsible.default, {
       isOpen: active,
       keepDOM: keepDOM,
       motion: motion,
@@ -159,5 +164,11 @@ CollapsePanel.propTypes = {
   extra: _propTypes.default.node,
   header: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   className: _propTypes.default.string,
-  reCalcKey: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+  reCalcKey: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  showArrow: _propTypes.default.bool,
+  disabled: _propTypes.default.bool
+};
+CollapsePanel.defaultProps = {
+  showArrow: true,
+  disabled: false
 };

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

@@ -56,6 +56,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         max: PropTypes.Requireable<number>;
         placeholder: PropTypes.Requireable<string | any[]>;
         presets: PropTypes.Requireable<any[]>;
+        presetPosition: PropTypes.Requireable<"top" | "left" | "right" | "bottom">;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         onChangeWithDateFirst: PropTypes.Requireable<boolean>;
         weekStartsOn: PropTypes.Requireable<number>;
@@ -111,6 +112,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         stopPropagation: boolean;
         motion: boolean;
         prefixCls: "semi-datepicker";
+        presetPosition: string;
         zIndex: number;
         type: string;
         size: string;
@@ -172,6 +174,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
     disabledDisposeTime: MonthsGridProps['disabledTime'];
     renderMonthGrid(locale: Locale['DatePicker'], localeCode: string, dateFnsLocale: Locale['dateFnsLocale']): JSX.Element;
     renderQuickControls(): JSX.Element;
+    renderDateInput(): JSX.Element;
     handleOpenPanel: () => void;
     handleInputChange: DatePickerFoundation['handleInputChange'];
     handleInsetInputChange: (options: InsetInputChangeProps) => void;

package/lib/cjs/datePicker/datePicker.js

@@ -190,7 +190,8 @@ class DatePicker extends _baseComponent.default {
         type,
         format,
         rangeSeparator,
-        defaultPickerValue
+        defaultPickerValue,
+        presetPosition
       } = this.props;
       const {
         insetInputValue,
@@ -222,9 +223,7 @@ class DatePicker extends _baseComponent.default {
       }, topSlot && /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(_constants.cssClasses.PREFIX, "-topSlot"),
         "x-semi-prop": "topSlot"
-      }, 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", {
+      }, topSlot), presetPosition === "top" && this.renderQuickControls(), this.adapter.typeIsYearOrMonth() ? this.renderYearMonthPanel(locale, localeCode) : this.renderMonthGrid(locale, localeCode, dateFnsLocale), presetPosition === "bottom" && this.renderQuickControls(), bottomSlot && /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(_constants.cssClasses.PREFIX, "-bottomSlot"),
         "x-semi-prop": "bottomSlot"
       }, bottomSlot), this.renderFooter(locale, localeCode));
@@ -232,7 +231,8 @@ class DatePicker extends _baseComponent.default {
 
     this.renderYearMonthPanel = (locale, localeCode) => {
       const {
-        density
+        density,
+        presetPosition
       } = this.props;
       const date = this.state.value[0];
       let year = 0;
@@ -252,7 +252,10 @@ class DatePicker extends _baseComponent.default {
         onSelect: this.handleYMSelectedChange,
         currentYear: year,
         currentMonth: month,
-        density: density
+        density: density,
+        presetPosition: presetPosition,
+        renderQuickControls: this.renderQuickControls(),
+        renderDateInput: this.renderDateInput()
       });
     };
 
@@ -592,7 +595,8 @@ class DatePicker extends _baseComponent.default {
       onPanelChange,
       timeZone,
       triggerRender,
-      insetInput
+      insetInput,
+      presetPosition
     } = this.props;
     const {
       cachedSelectedValue,
@@ -634,22 +638,63 @@ class DatePicker extends _baseComponent.default {
       timeZone: timeZone,
       focusRecordsRef: this.focusRecordsRef,
       triggerRender: triggerRender,
-      insetInput: insetInput
+      insetInput: insetInput,
+      presetPosition: presetPosition,
+      renderQuickControls: this.renderQuickControls(),
+      renderDateInput: this.renderDateInput()
     });
   }
 
   renderQuickControls() {
     const {
       presets,
-      type
+      type,
+      presetPosition,
+      insetInput
     } = this.props;
     return /*#__PURE__*/_react.default.createElement(_quickControl.default, {
       type: type,
       presets: presets,
+      insetInput: insetInput,
+      presetPosition: presetPosition,
       onPresetClick: (item, e) => this.foundation.handlePresetClick(item, e)
     });
   }
 
+  renderDateInput() {
+    const {
+      insetInput,
+      dateFnsLocale,
+      density,
+      type,
+      format,
+      rangeSeparator,
+      defaultPickerValue
+    } = this.props;
+    const {
+      insetInputValue,
+      value
+    } = this.state;
+    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,
+      defaultPickerValue
+    };
+    return insetInput ? /*#__PURE__*/_react.default.createElement(_dateInput.default, (0, _assign.default)({}, insetInputProps, {
+      insetInput: true
+    })) : null;
+  }
+
   renderInner(extraProps) {
     var _context3, _context4;
 
@@ -791,6 +836,7 @@ DatePicker.propTypes = {
   max: _propTypes.default.number,
   placeholder: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
   presets: _propTypes.default.array,
+  presetPosition: _propTypes.default.oneOf(_constants.strings.PRESET_POSITION_SET),
   onChange: _propTypes.default.func,
   onChangeWithDateFirst: _propTypes.default.bool,
   weekStartsOn: _propTypes.default.number,
@@ -848,6 +894,7 @@ DatePicker.defaultProps = {
   stopPropagation: true,
   motion: true,
   prefixCls: _constants.cssClasses.PREFIX,
+  presetPosition: 'bottom',
   // position: 'bottomLeft',
   zIndex: _constants2.numbers.DEFAULT_Z_INDEX,
   type: 'date',

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

@@ -50,6 +50,9 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
         onPanelChange: PropTypes.Requireable<(...args: any[]) => any>;
         focusRecordsRef: PropTypes.Requireable<object>;
         triggerRender: PropTypes.Requireable<(...args: any[]) => any>;
+        presetPosition: PropTypes.Requireable<"top" | "left" | "right" | "bottom">;
+        renderQuickControls: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        renderDateInput: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
     static defaultProps: {
         type: string;

package/lib/cjs/datePicker/monthsGrid.js

@@ -647,7 +647,10 @@ class MonthsGrid extends _baseComponent.default {
     } = this.state;
     const {
       type,
-      insetInput
+      insetInput,
+      presetPosition,
+      renderQuickControls,
+      renderDateInput
     } = this.props;
     const monthGridCls = (0, _classnames.default)({
       ["".concat(prefixCls, "-month-grid")]: true
@@ -666,12 +669,17 @@ class MonthsGrid extends _baseComponent.default {
 
     const yearOpenType = this.getYAMOpenType();
     return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: 'flex'
+      }
+    }, presetPosition === "left" && renderQuickControls, /*#__PURE__*/_react.default.createElement("div", null, renderDateInput, /*#__PURE__*/_react.default.createElement("div", {
       className: monthGridCls,
       "x-type": type,
       "x-panel-yearandmonth-open-type": yearOpenType,
       "x-insetinput": insetInput ? "true" : "false",
+      "x-preset-position": renderQuickControls === null ? 'null' : presetPosition,
       ref: current => this.cacheRefCurrent('monthGrid', current)
-    }, content);
+    }, content)), presetPosition === "right" && renderQuickControls);
   }
 
 }
@@ -713,7 +721,10 @@ MonthsGrid.propTypes = {
   // Callback function for panel date switching
   onPanelChange: _propTypes.default.func,
   focusRecordsRef: _propTypes.default.object,
-  triggerRender: _propTypes.default.func
+  triggerRender: _propTypes.default.func,
+  presetPosition: _propTypes.default.oneOf(_constants.strings.PRESET_POSITION_SET),
+  renderQuickControls: _propTypes.default.node,
+  renderDateInput: _propTypes.default.node
 };
 MonthsGrid.defaultProps = {
   type: 'date',

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

@@ -1,20 +1,26 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
+import { strings } from '@douyinfe/semi-foundation/lib/cjs/datePicker/constants';
 import { noop } from '@douyinfe/semi-foundation/lib/cjs/utils/function';
 import { PresetsType, PresetType } from '@douyinfe/semi-foundation/lib/cjs/datePicker/foundation';
 export interface QuickControlProps {
     presets: PresetsType;
+    presetPosition: typeof strings.PRESET_POSITION_SET[number];
     onPresetClick: (preset: PresetType, e: React.MouseEvent) => void;
     type: string;
+    insetInput: boolean;
 }
 declare class QuickControl extends PureComponent<QuickControlProps> {
     static propTypes: {
         presets: PropTypes.Requireable<any[]>;
+        presetPosition: PropTypes.Requireable<"top" | "left" | "right" | "bottom">;
         onPresetClick: PropTypes.Requireable<(...args: any[]) => any>;
         type: PropTypes.Requireable<string>;
+        insetInput: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         presets: PresetsType;
+        presetPosition: string;
         onPresetClick: typeof noop;
     };
     render(): JSX.Element;

package/lib/cjs/datePicker/quickControl.js

@@ -28,6 +28,8 @@ var _constants = require("@douyinfe/semi-foundation/lib/cjs/datePicker/constants
 
 var _index = _interopRequireDefault(require("../button/index"));
 
+var _index2 = _interopRequireDefault(require("../typography/index"));
+
 var _function = require("@douyinfe/semi-foundation/lib/cjs/utils/function");
 
 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); }
@@ -36,51 +38,96 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 /* eslint-disable jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events */
 const prefixCls = _constants.cssClasses.PREFIX;
+const {
+  Text
+} = _index2.default;
 
 class QuickControl extends _react.PureComponent {
   render() {
-    var _context;
+    var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12;
 
     const {
       presets,
       onPresetClick,
-      type
+      type,
+      presetPosition,
+      insetInput
     } = this.props;
+    const isTypeRange = type === 'dateRange' || type === 'dateTimeRange';
+    const isPanelTopAndBottom = presetPosition === 'top' || presetPosition === 'bottom';
+    const isMonth = type === 'month';
+    const isTopAndBottomRange = isPanelTopAndBottom && isTypeRange;
+    const isTopAndBottomMonth = isPanelTopAndBottom && isMonth;
     const wrapperCls = (0, _classnames.default)("".concat(prefixCls, "-quick-control"), {
-      [(0, _concat.default)(_context = "".concat(prefixCls, "-quick-control-")).call(_context, type)]: type
+      [(0, _concat.default)(_context = "".concat(prefixCls, "-quick-control-")).call(_context, type)]: type,
+      [(0, _concat.default)(_context2 = "".concat(prefixCls, "-quick-control-")).call(_context2, presetPosition)]: true
+    });
+    const headerCls = (0, _classnames.default)({
+      ["".concat(prefixCls, "-quick-control-header")]: true
+    });
+    const contentWrapperCls = (0, _classnames.default)({
+      [(0, _concat.default)(_context3 = "".concat(prefixCls, "-quick-control-")).call(_context3, presetPosition, "-content-wrapper")]: true
+    });
+    const contentCls = (0, _classnames.default)({
+      [(0, _concat.default)(_context4 = "".concat(prefixCls, "-quick-control-")).call(_context4, presetPosition, "-content")]: !isTopAndBottomRange && !isTopAndBottomMonth,
+      [(0, _concat.default)(_context5 = "".concat(prefixCls, "-quick-control-")).call(_context5, presetPosition, "-range-content")]: isTopAndBottomRange,
+      [(0, _concat.default)(_context6 = "".concat(prefixCls, "-quick-control-")).call(_context6, presetPosition, "-month-content")]: isTopAndBottomMonth
+    });
+    const itemCls = (0, _classnames.default)({
+      [(0, _concat.default)(_context7 = "".concat(prefixCls, "-quick-control-")).call(_context7, presetPosition, "-content-item")]: !isTopAndBottomRange && !isTopAndBottomMonth,
+      [(0, _concat.default)(_context8 = "".concat(prefixCls, "-quick-control-")).call(_context8, presetPosition, "-range-content-item")]: isTopAndBottomRange,
+      [(0, _concat.default)(_context9 = "".concat(prefixCls, "-quick-control-")).call(_context9, presetPosition, "-month-content-item")]: isTopAndBottomMonth
+    });
+    const ellipsisCls = (0, _classnames.default)({
+      [(0, _concat.default)(_context10 = "".concat(prefixCls, "-quick-control-")).call(_context10, presetPosition, "-content-item-ellipsis")]: !isTopAndBottomRange && !isTopAndBottomMonth,
+      [(0, _concat.default)(_context11 = "".concat(prefixCls, "-quick-control-")).call(_context11, presetPosition, "-range-content-item-ellipsis")]: isTopAndBottomRange,
+      [(0, _concat.default)(_context12 = "".concat(prefixCls, "-quick-control-")).call(_context12, presetPosition, "-month-content-item-ellipsis")]: isTopAndBottomMonth
     });
-    const itemCls = (0, _classnames.default)("".concat(prefixCls, "-quick-control-item"));
 
     if (!presets.length) {
       return null;
     }
 
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: wrapperCls
+      className: wrapperCls,
+      "x-insetinput": insetInput ? "true" : "false"
+    }, !isPanelTopAndBottom && /*#__PURE__*/_react.default.createElement("div", {
+      className: headerCls
+    }, "\u5FEB\u6377\u9009\u62E9"), /*#__PURE__*/_react.default.createElement("div", {
+      className: contentWrapperCls
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: contentCls
     }, (0, _map.default)(presets).call(presets, (item, index) => {
       const _item = typeof item === 'function' ? item() : item;
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: itemCls,
+      return /*#__PURE__*/_react.default.createElement(_index.default, {
+        size: "small",
+        type: "primary",
         onClick: e => onPresetClick(_item, e),
         key: index
-      }, /*#__PURE__*/_react.default.createElement(_index.default, {
-        size: "small",
-        theme: "borderless",
-        type: "primary"
-      }, /*#__PURE__*/_react.default.createElement("span", null, _item.text)));
-    }));
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: itemCls
+      }, /*#__PURE__*/_react.default.createElement(Text, {
+        ellipsis: {
+          showTooltip: true
+        },
+        className: ellipsisCls
+      }, _item.text)));
+    }))));
   }
 
 }
 
 QuickControl.propTypes = {
   presets: _propTypes.default.array,
+  presetPosition: _propTypes.default.oneOf(_constants.strings.PRESET_POSITION_SET),
   onPresetClick: _propTypes.default.func,
-  type: _propTypes.default.string
+  type: _propTypes.default.string,
+  insetInput: _propTypes.default.bool
 };
 QuickControl.defaultProps = {
   presets: [],
+  presetPosition: 'bottom',
   onPresetClick: _function.noop
 };
 var _default = QuickControl;

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

@@ -20,6 +20,9 @@ declare class YearAndMonth extends BaseComponent<YearAndMonthProps, YearAndMonth
         noBackBtn: PropTypes.Requireable<boolean>;
         disabledDate: PropTypes.Requireable<(...args: any[]) => any>;
         density: PropTypes.Requireable<string>;
+        presetPosition: PropTypes.Requireable<"top" | "left" | "right" | "bottom">;
+        renderQuickControls: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        renderDateInput: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
     static defaultProps: {
         disabledDate: {

package/lib/cjs/datePicker/yearAndMonth.js

@@ -50,6 +50,8 @@ var _constants = require("@douyinfe/semi-foundation/lib/cjs/base/constants");
 
 var _dateFns = require("date-fns");
 
+var _constants2 = require("@douyinfe/semi-foundation/lib/cjs/datePicker/constants");
+
 /* eslint-disable max-len */
 const prefixCls = "".concat(_constants.BASE_CLASS_PREFIX, "-datepicker");
 
@@ -237,7 +239,10 @@ class YearAndMonth extends _baseComponent.default {
     const {
       locale,
       noBackBtn,
-      density
+      density,
+      presetPosition,
+      renderQuickControls,
+      renderDateInput
     } = this.props;
     const prefix = "".concat(prefixCls, "-yearmonth-header"); // i18n
 
@@ -254,7 +259,11 @@ class YearAndMonth extends _baseComponent.default {
       }),
       size: buttonSize,
       onClick: this.backToMain
-    }, /*#__PURE__*/_react.default.createElement("span", null, selectDateText))), /*#__PURE__*/_react.default.createElement(_index.default, null, this.renderColYear(), this.renderColMonth()));
+    }, /*#__PURE__*/_react.default.createElement("span", null, selectDateText))), presetPosition ? /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: 'flex'
+      }
+    }, presetPosition === "left" && renderQuickControls, /*#__PURE__*/_react.default.createElement("div", null, renderDateInput, /*#__PURE__*/_react.default.createElement(_index.default, null, this.renderColYear(), this.renderColMonth())), presetPosition === "right" && renderQuickControls) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderDateInput, /*#__PURE__*/_react.default.createElement(_index.default, null, this.renderColYear(), this.renderColMonth())));
   }
 
 }
@@ -269,7 +278,10 @@ YearAndMonth.propTypes = {
   yearCycled: _propTypes.default.bool,
   noBackBtn: _propTypes.default.bool,
   disabledDate: _propTypes.default.func,
-  density: _propTypes.default.string
+  density: _propTypes.default.string,
+  presetPosition: _propTypes.default.oneOf(_constants2.strings.PRESET_POSITION_SET),
+  renderQuickControls: _propTypes.default.node,
+  renderDateInput: _propTypes.default.node
 };
 YearAndMonth.defaultProps = {
   disabledDate: _stubFalse2.default,

package/lib/cjs/empty/index.js

@@ -88,7 +88,7 @@ class Empty extends _baseComponent.default {
       darkModeImage
     } = this.props;
     const alt = typeof description === 'string' ? description : 'empty';
-    const imgSrc = this.state.mode && darkModeImage ? darkModeImage : image;
+    const imgSrc = this.state.mode === 'dark' && darkModeImage ? darkModeImage : image;
     let imageNode = null;
 
     if (typeof imgSrc === 'string') {