@douyinfe/semi-ui 2.16.1 → 2.17.0-beta.0

package/lib/es/datePicker/datePicker.js

@@ -152,7 +152,8 @@ export default class DatePicker extends BaseComponent {
         type,
         format,
         rangeSeparator,
-        defaultPickerValue
+        defaultPickerValue,
+        presetPosition
       } = this.props;
       const {
         insetInputValue,
@@ -184,9 +185,7 @@ export default class DatePicker extends BaseComponent {
       }, topSlot && /*#__PURE__*/React.createElement("div", {
         className: "".concat(cssClasses.PREFIX, "-topSlot"),
         "x-semi-prop": "topSlot"
-      }, topSlot), insetInput && /*#__PURE__*/React.createElement(DateInput, _Object$assign({}, insetInputProps, {
-        insetInput: true
-      })), this.adapter.typeIsYearOrMonth() ? this.renderYearMonthPanel(locale, localeCode) : this.renderMonthGrid(locale, localeCode, dateFnsLocale), this.renderQuickControls(), bottomSlot && /*#__PURE__*/React.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.createElement("div", {
         className: "".concat(cssClasses.PREFIX, "-bottomSlot"),
         "x-semi-prop": "bottomSlot"
       }, bottomSlot), this.renderFooter(locale, localeCode));
@@ -194,7 +193,8 @@ export default class DatePicker extends BaseComponent {
 
     this.renderYearMonthPanel = (locale, localeCode) => {
       const {
-        density
+        density,
+        presetPosition
       } = this.props;
       const date = this.state.value[0];
       let year = 0;
@@ -214,7 +214,10 @@ export default class DatePicker extends BaseComponent {
         onSelect: this.handleYMSelectedChange,
         currentYear: year,
         currentMonth: month,
-        density: density
+        density: density,
+        presetPosition: presetPosition,
+        renderQuickControls: this.renderQuickControls(),
+        renderDateInput: this.renderDateInput()
       });
     };
 
@@ -560,7 +563,8 @@ export default class DatePicker extends BaseComponent {
       onPanelChange,
       timeZone,
       triggerRender,
-      insetInput
+      insetInput,
+      presetPosition
     } = this.props;
     const {
       cachedSelectedValue,
@@ -602,22 +606,63 @@ export default class DatePicker extends BaseComponent {
       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.createElement(QuickControl, {
       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.createElement(DateInput, _Object$assign({}, insetInputProps, {
+      insetInput: true
+    })) : null;
+  }
+
   renderInner(extraProps) {
     var _context3, _context4;
 
@@ -758,6 +803,7 @@ DatePicker.propTypes = {
   max: PropTypes.number,
   placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   presets: PropTypes.array,
+  presetPosition: PropTypes.oneOf(strings.PRESET_POSITION_SET),
   onChange: PropTypes.func,
   onChangeWithDateFirst: PropTypes.bool,
   weekStartsOn: PropTypes.number,
@@ -815,6 +861,7 @@ DatePicker.defaultProps = {
   stopPropagation: true,
   motion: true,
   prefixCls: cssClasses.PREFIX,
+  presetPosition: 'bottom',
   // position: 'bottomLeft',
   zIndex: popoverNumbers.DEFAULT_Z_INDEX,
   type: 'date',

package/lib/es/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/es/datePicker/monthsGrid.js

@@ -618,7 +618,10 @@ export default class MonthsGrid extends BaseComponent {
     } = this.state;
     const {
       type,
-      insetInput
+      insetInput,
+      presetPosition,
+      renderQuickControls,
+      renderDateInput
     } = this.props;
     const monthGridCls = classnames({
       ["".concat(prefixCls, "-month-grid")]: true
@@ -637,12 +640,17 @@ export default class MonthsGrid extends BaseComponent {
 
     const yearOpenType = this.getYAMOpenType();
     return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex'
+      }
+    }, presetPosition === "left" && renderQuickControls, /*#__PURE__*/React.createElement("div", null, renderDateInput, /*#__PURE__*/React.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);
   }
 
 }
@@ -682,7 +690,10 @@ MonthsGrid.propTypes = {
   // Callback function for panel date switching
   onPanelChange: PropTypes.func,
   focusRecordsRef: PropTypes.object,
-  triggerRender: PropTypes.func
+  triggerRender: PropTypes.func,
+  presetPosition: PropTypes.oneOf(strings.PRESET_POSITION_SET),
+  renderQuickControls: PropTypes.node,
+  renderDateInput: PropTypes.node
 };
 MonthsGrid.defaultProps = {
   type: 'date',

package/lib/es/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/es/datePicker/constants';
 import { noop } from '@douyinfe/semi-foundation/lib/es/utils/function';
 import { PresetsType, PresetType } from '@douyinfe/semi-foundation/lib/es/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/es/datePicker/quickControl.js

@@ -5,55 +5,101 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import { cssClasses } from '@douyinfe/semi-foundation/lib/es/datePicker/constants';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/datePicker/constants';
 import Button from '../button/index';
+import Typography from '../typography/index';
 import { noop } from '@douyinfe/semi-foundation/lib/es/utils/function';
 const prefixCls = cssClasses.PREFIX;
+const {
+  Text
+} = Typography;
 
 class QuickControl extends 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 = classNames("".concat(prefixCls, "-quick-control"), {
-      [_concatInstanceProperty(_context = "".concat(prefixCls, "-quick-control-")).call(_context, type)]: type
+      [_concatInstanceProperty(_context = "".concat(prefixCls, "-quick-control-")).call(_context, type)]: type,
+      [_concatInstanceProperty(_context2 = "".concat(prefixCls, "-quick-control-")).call(_context2, presetPosition)]: true
+    });
+    const headerCls = classNames({
+      ["".concat(prefixCls, "-quick-control-header")]: true
+    });
+    const contentWrapperCls = classNames({
+      [_concatInstanceProperty(_context3 = "".concat(prefixCls, "-quick-control-")).call(_context3, presetPosition, "-content-wrapper")]: true
+    });
+    const contentCls = classNames({
+      [_concatInstanceProperty(_context4 = "".concat(prefixCls, "-quick-control-")).call(_context4, presetPosition, "-content")]: !isTopAndBottomRange && !isTopAndBottomMonth,
+      [_concatInstanceProperty(_context5 = "".concat(prefixCls, "-quick-control-")).call(_context5, presetPosition, "-range-content")]: isTopAndBottomRange,
+      [_concatInstanceProperty(_context6 = "".concat(prefixCls, "-quick-control-")).call(_context6, presetPosition, "-month-content")]: isTopAndBottomMonth
+    });
+    const itemCls = classNames({
+      [_concatInstanceProperty(_context7 = "".concat(prefixCls, "-quick-control-")).call(_context7, presetPosition, "-content-item")]: !isTopAndBottomRange && !isTopAndBottomMonth,
+      [_concatInstanceProperty(_context8 = "".concat(prefixCls, "-quick-control-")).call(_context8, presetPosition, "-range-content-item")]: isTopAndBottomRange,
+      [_concatInstanceProperty(_context9 = "".concat(prefixCls, "-quick-control-")).call(_context9, presetPosition, "-month-content-item")]: isTopAndBottomMonth
+    });
+    const ellipsisCls = classNames({
+      [_concatInstanceProperty(_context10 = "".concat(prefixCls, "-quick-control-")).call(_context10, presetPosition, "-content-item-ellipsis")]: !isTopAndBottomRange && !isTopAndBottomMonth,
+      [_concatInstanceProperty(_context11 = "".concat(prefixCls, "-quick-control-")).call(_context11, presetPosition, "-range-content-item-ellipsis")]: isTopAndBottomRange,
+      [_concatInstanceProperty(_context12 = "".concat(prefixCls, "-quick-control-")).call(_context12, presetPosition, "-month-content-item-ellipsis")]: isTopAndBottomMonth
     });
-    const itemCls = classNames("".concat(prefixCls, "-quick-control-item"));
 
     if (!presets.length) {
       return null;
     }
 
     return /*#__PURE__*/React.createElement("div", {
-      className: wrapperCls
+      className: wrapperCls,
+      "x-insetinput": insetInput ? "true" : "false"
+    }, !isPanelTopAndBottom && /*#__PURE__*/React.createElement("div", {
+      className: headerCls
+    }, "\u5FEB\u6377\u9009\u62E9"), /*#__PURE__*/React.createElement("div", {
+      className: contentWrapperCls
+    }, /*#__PURE__*/React.createElement("div", {
+      className: contentCls
     }, _mapInstanceProperty(presets).call(presets, (item, index) => {
       const _item = typeof item === 'function' ? item() : item;
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: itemCls,
+      return /*#__PURE__*/React.createElement(Button, {
+        size: "small",
+        type: "primary",
         onClick: e => onPresetClick(_item, e),
         key: index
-      }, /*#__PURE__*/React.createElement(Button, {
-        size: "small",
-        theme: "borderless",
-        type: "primary"
-      }, /*#__PURE__*/React.createElement("span", null, _item.text)));
-    }));
+      }, /*#__PURE__*/React.createElement("div", {
+        className: itemCls
+      }, /*#__PURE__*/React.createElement(Text, {
+        ellipsis: {
+          showTooltip: true
+        },
+        className: ellipsisCls
+      }, _item.text)));
+    }))));
   }
 
 }
 
 QuickControl.propTypes = {
   presets: PropTypes.array,
+  presetPosition: PropTypes.oneOf(strings.PRESET_POSITION_SET),
   onPresetClick: PropTypes.func,
-  type: PropTypes.string
+  type: PropTypes.string,
+  insetInput: PropTypes.bool
 };
 QuickControl.defaultProps = {
   presets: [],
+  presetPosition: 'bottom',
   onPresetClick: noop
 };
 export default QuickControl;

package/lib/es/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/es/datePicker/yearAndMonth.js

@@ -20,6 +20,7 @@ import IconButton from '../iconButton';
 import { IconChevronLeft } from '@douyinfe/semi-icons';
 import { BASE_CLASS_PREFIX } from '@douyinfe/semi-foundation/lib/es/base/constants';
 import { setYear, setMonth } from 'date-fns';
+import { strings } from '@douyinfe/semi-foundation/lib/es/datePicker/constants';
 const prefixCls = "".concat(BASE_CLASS_PREFIX, "-datepicker");
 
 class YearAndMonth extends BaseComponent {
@@ -210,7 +211,10 @@ class YearAndMonth extends BaseComponent {
     const {
       locale,
       noBackBtn,
-      density
+      density,
+      presetPosition,
+      renderQuickControls,
+      renderDateInput
     } = this.props;
     const prefix = "".concat(prefixCls, "-yearmonth-header"); // i18n
 
@@ -227,7 +231,11 @@ class YearAndMonth extends BaseComponent {
       }),
       size: buttonSize,
       onClick: this.backToMain
-    }, /*#__PURE__*/React.createElement("span", null, selectDateText))), /*#__PURE__*/React.createElement(ScrollList, null, this.renderColYear(), this.renderColMonth()));
+    }, /*#__PURE__*/React.createElement("span", null, selectDateText))), presetPosition ? /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex'
+      }
+    }, presetPosition === "left" && renderQuickControls, /*#__PURE__*/React.createElement("div", null, renderDateInput, /*#__PURE__*/React.createElement(ScrollList, null, this.renderColYear(), this.renderColMonth())), presetPosition === "right" && renderQuickControls) : /*#__PURE__*/React.createElement(React.Fragment, null, renderDateInput, /*#__PURE__*/React.createElement(ScrollList, null, this.renderColYear(), this.renderColMonth())));
   }
 
 }
@@ -242,7 +250,10 @@ YearAndMonth.propTypes = {
   yearCycled: PropTypes.bool,
   noBackBtn: PropTypes.bool,
   disabledDate: PropTypes.func,
-  density: PropTypes.string
+  density: PropTypes.string,
+  presetPosition: PropTypes.oneOf(strings.PRESET_POSITION_SET),
+  renderQuickControls: PropTypes.node,
+  renderDateInput: PropTypes.node
 };
 YearAndMonth.defaultProps = {
   disabledDate: _stubFalse,

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

@@ -39,6 +39,7 @@ export interface PopoverProps extends BaseProps {
     returnFocusOnClose?: TooltipProps['returnFocusOnClose'];
     onEscKeyDown?: TooltipProps['onEscKeyDown'];
     clickToHide?: TooltipProps['clickToHide'];
+    disableFocusListener?: boolean;
 }
 export interface PopoverState {
     popConfirmVisible: boolean;
@@ -71,6 +72,7 @@ declare class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         arrowBounding: PropTypes.Requireable<object>;
         prefixCls: PropTypes.Requireable<string>;
         guardFocus: PropTypes.Requireable<boolean>;
+        disableArrowKeyDown: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         arrowBounding: {
@@ -93,6 +95,7 @@ declare class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         closeOnEsc: boolean;
         returnFocusOnClose: boolean;
         guardFocus: boolean;
+        disableFocusListener: boolean;
     };
     context: ContextValue;
     renderPopCard: ({ initialFocusRef }: {

package/lib/es/popover/index.js

@@ -142,7 +142,8 @@ Popover.propTypes = {
   arrowPointAtCenter: PropTypes.bool,
   arrowBounding: PropTypes.object,
   prefixCls: PropTypes.string,
-  guardFocus: PropTypes.bool
+  guardFocus: PropTypes.bool,
+  disableArrowKeyDown: PropTypes.bool
 };
 Popover.defaultProps = {
   arrowBounding: numbers.ARROW_BOUNDING,
@@ -159,6 +160,7 @@ Popover.defaultProps = {
   onEscKeyDown: _noop,
   closeOnEsc: true,
   returnFocusOnClose: true,
-  guardFocus: true
+  guardFocus: true,
+  disableFocusListener: true
 };
 export default Popover;

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

@@ -137,6 +137,7 @@ export interface SelectState {
     keyboardEventSet: any;
     optionGroups: Array<any>;
     isHovering: boolean;
+    isFocusInContainer: boolean;
 }
 declare class Select extends BaseComponent<SelectProps, SelectState> {
     static contextType: React.Context<ContextValue>;
@@ -220,13 +221,18 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
     static defaultProps: Partial<SelectProps>;
     inputRef: React.RefObject<HTMLInputElement>;
     triggerRef: React.RefObject<HTMLDivElement>;
+    optionContainerEl: React.RefObject<HTMLDivElement>;
     optionsRef: React.RefObject<any>;
     virtualizeListRef: React.RefObject<any>;
     selectOptionListID: string;
+    selectID: string;
     clickOutsideHandler: (e: MouseEvent) => void;
     foundation: SelectFoundation;
     context: ContextValue;
     constructor(props: SelectProps);
+    setOptionContainerEl: (node: HTMLDivElement) => {
+        current: HTMLDivElement;
+    };
     get adapter(): SelectAdapter<SelectProps, SelectState>;
     componentDidMount(): void;
     componentWillUnmount(): void;
@@ -241,7 +247,6 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
     focus(): void;
     onSelect(option: OptionProps, optionIndex: number, e: any): void;
     onClear(e: React.MouseEvent): void;
-    onClearBtnEnterPress(e: React.KeyboardEvent): void;
     renderEmpty(): JSX.Element;
     renderLoading(): JSX.Element;
     renderOption(option: OptionProps, optionIndex: number, style?: React.CSSProperties): any;