@douyinfe/semi-ui 2.14.0 → 2.15.0-beta.0

package/timePicker/TimePicker.tsx

@@ -75,6 +75,7 @@ export type TimePickerProps = {
     popupStyle?: React.CSSProperties;
     position?: Position;
     prefixCls?: string;
+    preventScroll?: boolean;
     rangeSeparator?: string;
     scrollItemProps?: ScrollItemProps<any>;
     secondStep?: number;
@@ -164,6 +165,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         autoAdjustOverflow: PropTypes.bool,
         ...PanelShape,
         inputStyle: PropTypes.object,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps = {

package/tooltip/index.tsx

@@ -76,6 +76,7 @@ export interface TooltipProps extends BaseProps {
     returnFocusOnClose?: boolean;
     onEscKeyDown?: (e: React.KeyboardEvent) => void;
     wrapperId?: string;
+    preventScroll?: boolean;
 }
 interface TooltipState {
     visible: boolean;
@@ -136,6 +137,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         wrapWhenSpecial: PropTypes.bool, // when trigger has special status such as "disabled" or "loading", wrap span
         guardFocus: PropTypes.bool,
         returnFocusOnClose: PropTypes.bool,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -422,9 +424,10 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
                 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: React.KeyboardEvent) => {
@@ -627,6 +630,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
             style.width = '100%';
         }
 
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         return <span className={wrapperClassName} style={style}>{elem}</span>;
     };
 
@@ -712,7 +716,8 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
                     ref.current = node;
                 }
             },
-            tabIndex: trigger === 'hover' ? 0 : undefined, // a11y keyboard
+            tabIndex: 0, // a11y keyboard
+            '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

package/tree/index.tsx

@@ -114,6 +114,7 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
         labelEllipsis: PropTypes.bool,
         checkRelation: PropTypes.string,
         'aria-label': PropTypes.string,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -445,8 +446,9 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
                 this.setState({ inputValue: value });
             },
             focusInput: () => {
+                const { preventScroll } = this.props;
                 if (this.inputRef && this.inputRef.current) {
-                    (this.inputRef.current as any).focus();
+                    (this.inputRef.current as any).focus({ preventScroll });
                 }
             },
         };

package/tree/treeNode.tsx

@@ -9,6 +9,7 @@ import { Checkbox } from '../checkbox';
 import TreeContext, { TreeContextValue } from './treeContext';
 import Spin from '../spin';
 import { TreeNodeProps, TreeNodeState } from './interface';
+import { getHighLightTextHTML } from '../_utils/index';
 
 const prefixcls = cssClasses.PREFIX_OPTION;
 
@@ -282,18 +283,14 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
         if (isFunction(renderLabel)) {
             return renderLabel(label, data);
         } else if (isString(label) && filtered && keyword && treeNodeFilterProp === 'label') {
-            const content: React.ReactNode[] = [];
-            label.split(keyword).forEach((node, index) => {
-                if (index > 0) {
-                    content.push(
-                        <span className={`${prefixcls}-highlight`} key={index}>
-                            {keyword}
-                        </span>
-                    );
-                }
-                content.push(node);
-            });
-            return content;
+            return getHighLightTextHTML({
+                sourceString: label,
+                searchWords: [keyword],
+                option: {
+                    highlightTag: 'span',
+                    highlightClassName: `${prefixcls}-highlight`,
+                },
+            } as any);
         } else {
             return label;
         }

package/treeSelect/index.tsx

@@ -265,7 +265,6 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         motionExpand: true,
         expandAll: false,
         zIndex: popoverNumbers.DEFAULT_Z_INDEX,
-        disabled: false,
         disableStrictly: false,
         multiple: false,
         filterTreeNode: false,
@@ -864,6 +863,10 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
     };
 
     search = (value: string) => {
+        const { isOpen } = this.state;
+        if (!isOpen) {
+            this.foundation.open();
+        }
         this.foundation.handleInputChange(value);
     };
 

package/upload/_story/upload.stories.tsx

@@ -1,13 +1,16 @@
 
 /* argus-disable unPkgSensitiveInfo */
-import React from 'react';
+import React, { useRef } from 'react';
 import { storiesOf } from '@storybook/react';
 import Upload from '../index';
 
 const stories = storiesOf('Upload', module);
 
-stories.add('Upload', () => (
-    <>
-        <Upload action='//semi.design' />
-    </>
-));
+stories.add('Upload', () => {
+    const ref = useRef();
+    return (
+        <>
+            <Upload action='//semi.design' ref={ref} />
+        </>
+    );
+});