@douyinfe/semi-ui 2.14.0 → 2.15.1

package/lib/es/select/index.js

@@ -129,8 +129,14 @@ class Select extends BaseComponent {
         });
       },
       focusInput: () => {
+        const {
+          preventScroll
+        } = this.props;
+
         if (this.inputRef && this.inputRef.current) {
-          this.inputRef.current.focus();
+          this.inputRef.current.focus({
+            preventScroll
+          });
         }
       }
     };
@@ -282,8 +288,13 @@ class Select extends BaseComponent {
       },
       focusTrigger: () => {
         try {
+          const {
+            preventScroll
+          } = this.props;
           const el = this.triggerRef.current;
-          el.focus();
+          el.focus({
+            preventScroll
+          });
         } catch (error) {}
       },
       updateScrollTop: index => {
@@ -1086,7 +1097,8 @@ Select.propTypes = {
   virtualize: PropTypes.object,
   renderOptionItem: PropTypes.func,
   onListScroll: PropTypes.func,
-  arrowIcon: PropTypes.node // open: PropTypes.bool,
+  arrowIcon: PropTypes.node,
+  preventScroll: PropTypes.bool // open: PropTypes.bool,
   // tagClosable: PropTypes.bool,
 
 };

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

@@ -299,7 +299,7 @@ class Body extends BaseComponent {
 
       const listStyle = {
         width: '100%',
-        height: y,
+        height: (virtualizedData === null || virtualizedData === void 0 ? void 0 : virtualizedData.length) ? y : 0,
         overflowX: 'auto',
         overflowY: 'auto'
       };

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

@@ -33,6 +33,7 @@ declare class Tabs extends BaseComponent<TabsProps, TabsState> {
         tabPosition: PropTypes.Requireable<string>;
         type: PropTypes.Requireable<string>;
         onTabClose: PropTypes.Requireable<(...args: any[]) => any>;
+        preventScroll: PropTypes.Requireable<boolean>;
     };
     static defaultProps: TabsProps;
     contentRef: RefObject<HTMLDivElement>;

package/lib/es/tabs/index.js

@@ -359,7 +359,8 @@ Tabs.propTypes = {
   tabPaneMotion: PropTypes.oneOfType([PropTypes.bool, PropTypes.object, PropTypes.func]),
   tabPosition: PropTypes.oneOf(strings.POSITION_MAP),
   type: PropTypes.oneOf(strings.TYPE_MAP),
-  onTabClose: PropTypes.func
+  onTabClose: PropTypes.func,
+  preventScroll: PropTypes.bool
 };
 Tabs.defaultProps = {
   children: [],

package/lib/es/tabs/interface.d.ts

@@ -32,6 +32,7 @@ export interface TabsProps {
     tabPosition?: TabPosition;
     type?: TabType;
     onTabClose?: (tabKey: string) => void;
+    preventScroll?: boolean;
 }
 export interface TabBarProps {
     activeKey?: string;

package/lib/es/tag/index.js

@@ -17,10 +17,6 @@ var __rest = this && this.__rest || function (s, e) {
 };
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 
-/* eslint-disable no-unused-vars */
-
-/* eslint-disable max-len */
-
 
 import React, { Component } from 'react';
 import classNames from 'classnames';
@@ -85,7 +81,8 @@ export default class Tag extends Component {
   handleKeyDown(event) {
     const {
       closable,
-      onClick
+      onClick,
+      onKeyDown
     } = this.props;
 
     switch (event.key) {
@@ -107,6 +104,8 @@ export default class Tag extends Component {
       default:
         break;
     }
+
+    onKeyDown && onKeyDown(event);
   }
 
   renderAvatar() {

package/lib/es/tag/interface.d.ts

@@ -16,6 +16,7 @@ export interface TagProps {
     className?: string;
     avatarSrc?: string;
     avatarShape?: AvatarShape;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
     'aria-label'?: React.AriaAttributes['aria-label'];
 }
 export interface TagGroupProps {

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

@@ -45,6 +45,7 @@ export interface TagInputProps {
     value?: string[] | undefined;
     autoFocus?: boolean;
     'aria-label'?: string;
+    preventScroll?: boolean;
 }
 export interface TagInputState {
     tagsArray?: string[];
@@ -88,6 +89,7 @@ declare class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         'aria-label': PropTypes.Requireable<string>;
+        preventScroll: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         showClear: boolean;

package/lib/es/tagInput/index.js

@@ -124,10 +124,15 @@ class TagInput extends BaseComponent {
         });
       },
       toggleFocusing: isFocus => {
+        const {
+          preventScroll
+        } = this.props;
         const input = this.inputRef && this.inputRef.current;
 
         if (isFocus) {
-          input && input.focus();
+          input && input.focus({
+            preventScroll
+          });
         } else {
           input && input.blur();
         }
@@ -168,11 +173,14 @@ class TagInput extends BaseComponent {
   componentDidMount() {
     const {
       disabled,
-      autoFocus
+      autoFocus,
+      preventScroll
     } = this.props;
 
     if (!disabled && autoFocus) {
-      this.inputRef.current.focus();
+      this.inputRef.current.focus({
+        preventScroll
+      });
     }
   }
 
@@ -341,7 +349,12 @@ class TagInput extends BaseComponent {
   }
 
   focus() {
-    this.inputRef.current.focus();
+    const {
+      preventScroll
+    } = this.props;
+    this.inputRef.current.focus({
+      preventScroll
+    });
   }
 
   render() {
@@ -441,7 +454,8 @@ TagInput.propTypes = {
   validateStatus: PropTypes.oneOf(strings.STATUS),
   prefix: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  'aria-label': PropTypes.string
+  'aria-label': PropTypes.string,
+  preventScroll: PropTypes.bool
 };
 TagInput.defaultProps = {
   showClear: false,

package/lib/es/timePicker/TimeInput.d.ts

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import InputFoundation, { TimeInputAdapter } from '@douyinfe/semi-foundation/lib/es/timePicker/inputFoundation';
 import { TimePickerProps } from './TimePicker';
-export declare type TimeInputProps = Pick<TimePickerProps, 'value' | 'format' | 'prefixCls' | 'placeholder' | 'clearText' | 'inputReadOnly' | 'disabled' | 'type' | 'timeZone' | 'defaultOpen' | 'disabledHours' | 'disabledMinutes' | 'disabledSeconds' | 'dateFnsLocale' | 'onFocus' | 'onBlur' | 'focusOnOpen' | 'locale' | 'localeCode' | 'insetLabel' | 'validateStatus'> & BaseProps & {
+export declare type TimeInputProps = Pick<TimePickerProps, 'value' | 'format' | 'prefixCls' | 'placeholder' | 'clearText' | 'inputReadOnly' | 'disabled' | 'type' | 'timeZone' | 'defaultOpen' | 'disabledHours' | 'disabledMinutes' | 'disabledSeconds' | 'dateFnsLocale' | 'onFocus' | 'onBlur' | 'focusOnOpen' | 'locale' | 'localeCode' | 'insetLabel' | 'validateStatus' | 'preventScroll'> & BaseProps & {
     onChange?: (value: string) => void;
     onEsc?: () => void;
     onClick?: React.MouseEventHandler;
@@ -38,6 +38,7 @@ declare class TimeInput extends BaseComponent<TimeInputProps, any> {
         localeCode: PropTypes.Requireable<string>;
         insetLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         validateStatus: PropTypes.Requireable<string>;
+        preventScroll: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         inputReadOnly: boolean;

package/lib/es/timePicker/TimeInput.js

@@ -48,7 +48,8 @@ class TimeInput extends BaseComponent {
   componentDidMount() {
     super.componentDidMount();
     const {
-      focusOnOpen
+      focusOnOpen,
+      preventScroll
     } = this.props;
 
     if (focusOnOpen) {
@@ -57,7 +58,9 @@ class TimeInput extends BaseComponent {
         const inputNode = this.adapter.getCache('inputNode');
 
         if (inputNode) {
-          inputNode.focus();
+          inputNode.focus({
+            preventScroll
+          });
           inputNode.select();
         }
       });
@@ -186,7 +189,8 @@ TimeInput.propTypes = {
   locale: PropTypes.object,
   localeCode: PropTypes.string,
   insetLabel: PropTypes.node,
-  validateStatus: PropTypes.string
+  validateStatus: PropTypes.string,
+  preventScroll: PropTypes.bool
 };
 TimeInput.defaultProps = {
   inputReadOnly: false,

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

@@ -54,6 +54,7 @@ export declare type TimePickerProps = {
     popupStyle?: React.CSSProperties;
     position?: Position;
     prefixCls?: string;
+    preventScroll?: boolean;
     rangeSeparator?: string;
     scrollItemProps?: ScrollItemProps<any>;
     secondStep?: number;
@@ -88,6 +89,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
     static contextType: React.Context<import("../configProvider/context").ContextValue>;
     static propTypes: {
         inputStyle: PropTypes.Requireable<object>;
+        preventScroll: PropTypes.Requireable<boolean>;
         panelHeader: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         panelFooter: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         'aria-labelledby': PropTypes.Requireable<string>;

package/lib/es/timePicker/TimePicker.js

@@ -443,7 +443,8 @@ TimePicker.propTypes = _Object$assign(_Object$assign({
   motion: PropTypes.oneOfType([PropTypes.bool, PropTypes.func, PropTypes.object]),
   autoAdjustOverflow: PropTypes.bool
 }, PanelShape), {
-  inputStyle: PropTypes.object
+  inputStyle: PropTypes.object,
+  preventScroll: PropTypes.bool
 });
 TimePicker.defaultProps = _Object$assign({
   autoAdjustOverflow: true,

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

@@ -9,6 +9,7 @@ export declare type LocalePickerProps = BasePickerProps;
 export default class LocaleTimePicker extends React.PureComponent<LocalePickerProps> {
     static propTypes: {
         inputStyle: import("prop-types").Requireable<object>;
+        preventScroll: import("prop-types").Requireable<boolean>;
         panelHeader: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
         panelFooter: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
         'aria-labelledby': import("prop-types").Requireable<string>;

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

@@ -54,6 +54,7 @@ export interface TooltipProps extends BaseProps {
     returnFocusOnClose?: boolean;
     onEscKeyDown?: (e: React.KeyboardEvent) => void;
     wrapperId?: string;
+    preventScroll?: boolean;
 }
 interface TooltipState {
     visible: boolean;
@@ -109,6 +110,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         wrapWhenSpecial: PropTypes.Requireable<boolean>;
         guardFocus: PropTypes.Requireable<boolean>;
         returnFocusOnClose: PropTypes.Requireable<boolean>;
+        preventScroll: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         arrowBounding: {

package/lib/es/tooltip/index.js

@@ -251,7 +251,8 @@ export default class Tooltip extends BaseComponent {
 
       if (block || _includesInstanceProperty(blockDisplays).call(blockDisplays, display)) {
         style.width = '100%';
-      }
+      } // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+
 
       return /*#__PURE__*/React.createElement("span", {
         className: wrapperClassName,
@@ -554,10 +555,16 @@ export default class Tooltip extends BaseComponent {
         return getActiveElement();
       },
       setInitialFocus: () => {
+        const {
+          preventScroll
+        } = this.props;
+
         const focusRefNode = _get(this, 'initialFocusRef.current');
 
         if (focusRefNode && 'focus' in focusRefNode) {
-          focusRefNode.focus();
+          focusRefNode.focus({
+            preventScroll
+          });
         }
       },
       notifyEscKeydown: event => {
@@ -676,7 +683,8 @@ export default class Tooltip extends BaseComponent {
           ref.current = node;
         }
       },
-      tabIndex: trigger === 'hover' ? 0 : undefined
+      tabIndex: 0,
+      'data-popupid': id
     })); // If you do not add a layer of div, in order to bind the events and className in the tooltip, you need to cloneElement children, but this time it may overwrite the children's original ref reference
     // So if the user adds ref to the content, you need to use callback ref: https://github.com/facebook/react/issues/8873
 
@@ -717,7 +725,8 @@ Tooltip.propTypes = {
   role: PropTypes.string,
   wrapWhenSpecial: PropTypes.bool,
   guardFocus: PropTypes.bool,
-  returnFocusOnClose: PropTypes.bool
+  returnFocusOnClose: PropTypes.bool,
+  preventScroll: PropTypes.bool
 };
 Tooltip.defaultProps = {
   arrowBounding: numbers.ARROW_BOUNDING,

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

@@ -73,6 +73,7 @@ declare class Tree extends BaseComponent<TreeProps, TreeState> {
         labelEllipsis: PropTypes.Requireable<boolean>;
         checkRelation: PropTypes.Requireable<string>;
         'aria-label': PropTypes.Requireable<string>;
+        preventScroll: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         showClear: boolean;

package/lib/es/tree/index.js

@@ -7,6 +7,7 @@ import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 
 /* eslint-disable max-lines-per-function */
 import React from 'react';
@@ -27,6 +28,7 @@ import NodeList from './nodeList';
 import LocaleConsumer from '../locale/localeConsumer';
 import '@douyinfe/semi-foundation/lib/es/tree/tree.css';
 import { IconSearch } from '@douyinfe/semi-icons';
+import CheckboxGroup from '../checkbox/checkboxGroup';
 export * from './interface';
 const prefixcls = cssClasses.PREFIX;
 
@@ -424,8 +426,14 @@ class Tree extends BaseComponent {
         });
       },
       focusInput: () => {
+        const {
+          preventScroll
+        } = this.props;
+
         if (this.inputRef && this.inputRef.current) {
-          this.inputRef.current.focus();
+          this.inputRef.current.focus({
+            preventScroll
+          });
         }
       }
     };
@@ -587,7 +595,9 @@ class Tree extends BaseComponent {
       inputValue,
       filteredKeys,
       dragOverNodeKey,
-      dropPosition
+      dropPosition,
+      checkedKeys,
+      realCheckedKeys
     } = this.state;
     const {
       blockNode,
@@ -606,7 +616,8 @@ class Tree extends BaseComponent {
       draggable,
       renderFullLabel,
       labelEllipsis,
-      virtualize
+      virtualize,
+      checkRelation
     } = this.props;
     const wrapperCls = cls("".concat(prefixcls, "-wrapper"), className);
     const listCls = cls("".concat(prefixcls, "-option-list"), {
@@ -664,7 +675,9 @@ class Tree extends BaseComponent {
       style: style
     }, filterTreeNode ? this.renderInput() : null, /*#__PURE__*/React.createElement("div", _Object$assign({
       className: listCls
-    }, ariaAttr), noData ? this.renderEmpty() : this.renderNodeList())));
+    }, ariaAttr), noData ? this.renderEmpty() : multiple ? /*#__PURE__*/React.createElement(CheckboxGroup, {
+      value: _Array$from(checkRelation === 'related' ? checkedKeys : realCheckedKeys)
+    }, this.renderNodeList()) : this.renderNodeList())));
   }
 
 }
@@ -731,7 +744,8 @@ Tree.propTypes = {
   onDrop: PropTypes.func,
   labelEllipsis: PropTypes.bool,
   checkRelation: PropTypes.string,
-  'aria-label': PropTypes.string
+  'aria-label': PropTypes.string,
+  preventScroll: PropTypes.bool
 };
 Tree.defaultProps = {
   showClear: true,

package/lib/es/tree/treeNode.js

@@ -6,7 +6,6 @@ import _debounce from "lodash/debounce";
 import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 
 var __rest = this && this.__rest || function (s, e) {
@@ -29,6 +28,7 @@ import { IconTreeTriangleDown, IconFile, IconFolder, IconFolderOpen } from '@dou
 import { Checkbox } from '../checkbox';
 import TreeContext from './treeContext';
 import Spin from '../spin';
+import { getHighLightTextHTML } from '../_utils/index';
 const prefixcls = cssClasses.PREFIX_OPTION;
 export default class TreeNode extends PureComponent {
   constructor(props) {
@@ -248,22 +248,14 @@ export default class TreeNode extends PureComponent {
       if (_isFunction(renderLabel)) {
         return renderLabel(label, data);
       } else if (_isString(label) && filtered && keyword && treeNodeFilterProp === 'label') {
-        var _context;
-
-        const content = [];
-
-        _forEachInstanceProperty(_context = label.split(keyword)).call(_context, (node, index) => {
-          if (index > 0) {
-            content.push( /*#__PURE__*/React.createElement("span", {
-              className: "".concat(prefixcls, "-highlight"),
-              key: index
-            }, keyword));
+        return getHighLightTextHTML({
+          sourceString: label,
+          searchWords: [keyword],
+          option: {
+            highlightTag: 'span',
+            highlightClassName: "".concat(prefixcls, "-highlight")
           }
-
-          content.push(node);
         });
-
-        return content;
       } else {
         return label;
       }
@@ -311,7 +303,8 @@ export default class TreeNode extends PureComponent {
   renderCheckbox() {
     const {
       checked,
-      halfChecked
+      halfChecked,
+      eventKey
     } = this.props;
     const disabled = this.isDisabled();
     return /*#__PURE__*/React.createElement("div", {
@@ -320,6 +313,7 @@ export default class TreeNode extends PureComponent {
       onKeyPress: this.handleCheckEnterPress
     }, /*#__PURE__*/React.createElement(Checkbox, {
       "aria-label": 'Toggle the checked state of checkbox',
+      value: eventKey,
       indeterminate: halfChecked,
       checked: checked,
       disabled: Boolean(disabled)
@@ -362,7 +356,7 @@ export default class TreeNode extends PureComponent {
   }
 
   renderEmptyNode() {
-    var _context2;
+    var _context;
 
     const {
       emptyContent
@@ -373,14 +367,14 @@ export default class TreeNode extends PureComponent {
     return /*#__PURE__*/React.createElement("ul", {
       className: wrapperCls
     }, /*#__PURE__*/React.createElement("li", {
-      className: _concatInstanceProperty(_context2 = "".concat(prefixcls, "-label ")).call(_context2, prefixcls, "-label-empty"),
+      className: _concatInstanceProperty(_context = "".concat(prefixcls, "-label ")).call(_context, prefixcls, "-label-empty"),
       "x-semi-prop": "emptyContent"
     }, emptyContent));
   } // eslint-disable-next-line max-lines-per-function
 
 
   render() {
-    var _context3;
+    var _context2;
 
     const _a = this.props,
           {
@@ -418,7 +412,7 @@ export default class TreeNode extends PureComponent {
     const dragOverGapTop = dragOverNodeKey === eventKey && dropPosition === -1;
     const dragOverGapBottom = dragOverNodeKey === eventKey && dropPosition === 1;
     const nodeCls = cls(prefixcls, {
-      [_concatInstanceProperty(_context3 = "".concat(prefixcls, "-level-")).call(_context3, level + 1)]: true,
+      [_concatInstanceProperty(_context2 = "".concat(prefixcls, "-level-")).call(_context2, level + 1)]: true,
       ["".concat(prefixcls, "-collapsed")]: !expanded,
       ["".concat(prefixcls, "-disabled")]: Boolean(disabled),
       ["".concat(prefixcls, "-selected")]: selected,

package/lib/es/treeSelect/index.js

@@ -11,6 +11,7 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
 import _Set from "@babel/runtime-corejs3/core-js-stable/set";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import React, { Fragment } from 'react';
 import ReactDOM from 'react-dom';
@@ -39,6 +40,7 @@ import Trigger from '../trigger';
 import TagInput from '../tagInput';
 import { isSemiIcon } from '../_utils';
 import { IconChevronDown, IconClear, IconSearch } from '@douyinfe/semi-icons';
+import CheckboxGroup from '../checkbox/checkboxGroup';
 const prefixcls = cssClasses.PREFIX;
 const prefixTree = cssClasses.PREFIX_TREE;
 const key = 0;
@@ -324,6 +326,14 @@ class TreeSelect extends BaseComponent {
     };
 
     this.search = value => {
+      const {
+        isOpen
+      } = this.state;
+
+      if (!isOpen) {
+        this.foundation.open();
+      }
+
       this.foundation.handleInputChange(value);
     };
 
@@ -813,7 +823,9 @@ class TreeSelect extends BaseComponent {
         motionType,
         inputValue,
         filteredKeys,
-        flattenNodes
+        flattenNodes,
+        checkedKeys,
+        realCheckedKeys
       } = this.state;
       const {
         loadData,
@@ -830,7 +842,8 @@ class TreeSelect extends BaseComponent {
         optionListStyle,
         searchPosition,
         renderLabel,
-        renderFullLabel
+        renderFullLabel,
+        checkRelation
       } = this.props;
       const wrapperCls = cls("".concat(prefixTree, "-wrapper"));
       const listCls = cls("".concat(prefixTree, "-option-list"), {
@@ -871,7 +884,9 @@ class TreeSelect extends BaseComponent {
         role: "tree",
         "aria-multiselectable": multiple ? true : false,
         style: optionListStyle
-      }, noData ? this.renderEmpty() : this.renderNodeList()), outerBottomSlot));
+      }, noData ? this.renderEmpty() : multiple ? /*#__PURE__*/React.createElement(CheckboxGroup, {
+        value: _Array$from(checkRelation === 'related' ? checkedKeys : realCheckedKeys)
+      }, this.renderNodeList()) : this.renderNodeList()), outerBottomSlot));
     };
 
     this.state = {
@@ -1315,7 +1330,6 @@ TreeSelect.defaultProps = {
   motionExpand: true,
   expandAll: false,
   zIndex: popoverNumbers.DEFAULT_Z_INDEX,
-  disabled: false,
   disableStrictly: false,
   multiple: false,
   filterTreeNode: false,