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

package/tagInput/index.tsx

@@ -61,6 +61,7 @@ export interface TagInputProps {
     value?: string[] | undefined;
     autoFocus?: boolean;
     'aria-label'?: string;
+    preventScroll?: boolean;
 }
 
 export interface TagInputState {
@@ -108,6 +109,7 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         prefix: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
         suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
         'aria-label': PropTypes.string,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -176,9 +178,10 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
                 this.setState({ focusing });
             },
             toggleFocusing: (isFocus: boolean) => {
+                const { preventScroll } = this.props;
                 const input = this.inputRef && this.inputRef.current;
                 if (isFocus) {
-                    input && input.focus();
+                    input && input.focus({ preventScroll });
                 } else {
                     input && input.blur();
                 }
@@ -212,9 +215,9 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
     }
 
     componentDidMount() {
-        const { disabled, autoFocus } = this.props;
+        const { disabled, autoFocus, preventScroll } = this.props;
         if (!disabled && autoFocus) {
-            this.inputRef.current.focus();
+            this.inputRef.current.focus({ preventScroll });
         }
     }
 
@@ -426,7 +429,8 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
     }
 
     focus() {
-        this.inputRef.current.focus();
+        const { preventScroll } = this.props;
+        this.inputRef.current.focus({ preventScroll });
     }
 
     render() {

package/timePicker/TimeInput.tsx

@@ -33,7 +33,8 @@ export type TimeInputProps = Pick<TimePickerProps,
 'locale' |
 'localeCode' |
 'insetLabel' |
-'validateStatus'> & BaseProps & {
+'validateStatus' |
+'preventScroll'> & BaseProps & {
     onChange?: (value: string) => void;
     onEsc?: () => void;
     onClick?: React.MouseEventHandler;
@@ -69,6 +70,7 @@ class TimeInput extends BaseComponent<TimeInputProps, any> {
         localeCode: PropTypes.string,
         insetLabel: PropTypes.node,
         validateStatus: PropTypes.string,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -96,13 +98,13 @@ class TimeInput extends BaseComponent<TimeInputProps, any> {
 
     componentDidMount() {
         super.componentDidMount();
-        const { focusOnOpen } = this.props;
+        const { focusOnOpen, preventScroll } = this.props;
         if (focusOnOpen) {
             const requestAnimationFrame = window.requestAnimationFrame || window.setTimeout;
             requestAnimationFrame(() => {
                 const inputNode = this.adapter.getCache('inputNode');
                 if (inputNode) {
-                    inputNode.focus();
+                    inputNode.focus({ preventScroll });
                     inputNode.select();
                 }
             });

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

@@ -41,6 +41,7 @@ import {
     KeyEntity,
     OptionProps
 } from './interface';
+import CheckboxGroup from '../checkbox/checkboxGroup';
 
 export * from './interface';
 export { AutoSizerProps } from './autoSizer';
@@ -114,6 +115,7 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
         labelEllipsis: PropTypes.bool,
         checkRelation: PropTypes.string,
         'aria-label': PropTypes.string,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -445,8 +447,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 });
                 }
             },
         };
@@ -686,6 +689,8 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
             filteredKeys,
             dragOverNodeKey,
             dropPosition,
+            checkedKeys, 
+            realCheckedKeys,
         } = this.state;
 
         const {
@@ -706,6 +711,7 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
             renderFullLabel,
             labelEllipsis,
             virtualize,
+            checkRelation,
         } = this.props;
         const wrapperCls = cls(`${prefixcls}-wrapper`, className);
         const listCls = cls(`${prefixcls}-option-list`, {
@@ -760,7 +766,12 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
                 <div aria-label={this.props['aria-label']} className={wrapperCls} style={style}>
                     {filterTreeNode ? this.renderInput() : null}
                     <div className={listCls} {...ariaAttr}>
-                        {noData ? this.renderEmpty() : this.renderNodeList()}
+                        {noData ? this.renderEmpty() : (multiple ? 
+                            (<CheckboxGroup value={Array.from(checkRelation === 'related' ? checkedKeys : realCheckedKeys)}>
+                                {this.renderNodeList()}
+                            </CheckboxGroup>) : 
+                            this.renderNodeList()
+                        )}
                     </div>
                 </div>
             </TreeContext.Provider>

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;
 
@@ -220,7 +221,7 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
     }
 
     renderCheckbox() {
-        const { checked, halfChecked } = this.props;
+        const { checked, halfChecked, eventKey } = this.props;
         const disabled = this.isDisabled();
         return (
             <div
@@ -230,6 +231,7 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
             >
                 <Checkbox
                     aria-label='Toggle the checked state of checkbox'
+                    value={eventKey}
                     indeterminate={halfChecked}
                     checked={checked}
                     disabled={Boolean(disabled)}
@@ -282,18 +284,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/_story/treeSelect.stories.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Icon, Button, Form, Popover, Tag, Typography } from '../../index';
+import { Icon, Button, Form, Popover, Tag, Typography, CheckboxGroup } from '../../index';
 import TreeSelect from '../index';
 import { flattenDeep } from 'lodash';
 import CustomTrigger from './CustomTrigger';
@@ -152,6 +152,43 @@ const treeDataWithoutValue = [
   },
 ];
 
+export const TreeSelectWrapper = () => (
+  <div>
+    <div>github issue 750 修改测试用例</div>
+    <CheckboxGroup>
+      <TreeSelect
+        showClear={true}
+        expandAll
+        style={{width: 400}}
+        treeData={[
+            {
+                key: '1',
+                label: '所有节点',
+                value: '1',
+                children: [
+                    { key: '20006251', label: 'Semi', value: 'semi@bytedance.com' },
+                    { key: '20006248', label: 'Design', value: 'design@bytedance.com' },
+                    {
+                        key: '20006205',
+                        label: 'React',
+                        value: 'react@bytedance.com',
+                    },
+                ],
+            },
+            ]}
+        multiple
+        filterTreeNode
+        showFilteredOnly={true}
+        leafOnly
+      />
+  </CheckboxGroup>
+  </div>
+);
+
+TreeSelectWrapper.story = {
+  name: 'treeSelect wrapper',
+};
+
 class SimpleTree extends React.Component {
   render() {
     return (

package/treeSelect/index.tsx

@@ -50,6 +50,7 @@ import { isSemiIcon } from '../_utils';
 import { OptionProps, TreeProps, TreeState, FlattenNode, TreeNodeData, TreeNodeProps } from '../tree/interface';
 import { Motion } from '../_base/base';
 import { IconChevronDown, IconClear, IconSearch } from '@douyinfe/semi-icons';
+import CheckboxGroup from '../checkbox/checkboxGroup';
 
 export type ExpandAction = false | 'click' | 'doubleClick';
 
@@ -265,7 +266,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 +864,10 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
     };
 
     search = (value: string) => {
+        const { isOpen } = this.state;
+        if (!isOpen) {
+            this.foundation.open();
+        }
         this.foundation.handleInputChange(value);
     };
 
@@ -1298,7 +1302,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
     };
 
     renderTree = () => {
-        const { keyEntities, motionKeys, motionType, inputValue, filteredKeys, flattenNodes } = this.state;
+        const { keyEntities, motionKeys, motionType, inputValue, filteredKeys, flattenNodes, checkedKeys, realCheckedKeys } = this.state;
         const {
             loadData,
             filterTreeNode,
@@ -1315,6 +1319,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             searchPosition,
             renderLabel,
             renderFullLabel,
+            checkRelation,
         } = this.props;
         const wrapperCls = cls(`${prefixTree}-wrapper`);
         const listCls = cls(`${prefixTree}-option-list`, {
@@ -1359,7 +1364,12 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                         this.renderInput()
                     }
                     <div className={listCls} role="tree" aria-multiselectable={multiple ? true : false} style={optionListStyle}>
-                        {noData ? this.renderEmpty() : this.renderNodeList()}
+                        { noData ? this.renderEmpty() : (multiple ? 
+                            (<CheckboxGroup value={Array.from(checkRelation === 'related' ? checkedKeys : realCheckedKeys)}>
+                                {this.renderNodeList()}
+                            </CheckboxGroup>) : 
+                            this.renderNodeList()
+                        )}
                     </div>
                     {outerBottomSlot}
                 </div>

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} />
+        </>
+    );
+});