@douyinfe/semi-ui 2.11.2 → 2.12.0-beta.1

package/table/_story/v2/index.js

@@ -5,4 +5,5 @@ export { default as FixedHeaderMerge } from './FixedHeaderMerge';
 export { default as FixedResizable } from './FixedResizable';
 export { default as FixedExpandedRow } from './FixedExpandedRow';
 export { default as FixedMemoryLeak  } from './FixedMemoryLeak';
-export { default as FixedOnHeaderRow } from './FixedOnHeaderRow';
+export { default as FixedOnHeaderRow } from './FixedOnHeaderRow';
+export { default as RadioRowSelection } from './radioRowSelection';

package/table/_story/v2/radioRowSelection.tsx

@@ -0,0 +1,107 @@
+import React, { useMemo, useState } from 'react';
+import { Table, Avatar, Radio } from '@douyinfe/semi-ui';
+import { IconMore } from '@douyinfe/semi-icons';
+
+App.storyName = '行选择 - 单选';
+export default function App() {
+    const [selectedRowKey, setSelectedRowKey] = useState();
+    const columns = [
+        {
+            title: '',
+            dataIndex: 'selection',
+            width: 20,
+            render: (text, record, index) => {
+                return (
+                    <Radio checked={selectedRowKey === record.key} onChange={() => setSelectedRowKey(record.key)} />
+                );
+            },
+        },
+        {
+            title: '标题',
+            dataIndex: 'name',
+            width: 400,
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar
+                            size="small"
+                            shape="square"
+                            src={record.nameIconSrc}
+                            style={{ marginRight: 12 }}
+                        ></Avatar>
+                        {text}
+                    </div>
+                );
+            },
+        },
+        {
+            title: '大小',
+            dataIndex: 'size',
+        },
+        {
+            title: '所有者',
+            dataIndex: 'owner',
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}>
+                            {typeof text === 'string' && text.slice(0, 1)}
+                        </Avatar>
+                        {text}
+                    </div>
+                );
+            },
+        },
+        {
+            title: '更新日期',
+            dataIndex: 'updateTime',
+        },
+        {
+            title: '',
+            dataIndex: 'operate',
+            render: () => {
+                return <IconMore />;
+            },
+        },
+    ];
+    const data = useMemo(() => ([
+        {
+            key: '1',
+            name: 'Semi Design 设计稿.fig',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',
+            size: '2M',
+            owner: '姜鹏志',
+            updateTime: '2020-02-02 05:13',
+            avatarBg: 'grey',
+        },
+        {
+            key: '2',
+            name: 'Semi Design 分享演示文稿',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+            size: '2M',
+            owner: '郝宣',
+            updateTime: '2020-01-17 05:31',
+            avatarBg: 'red',
+        },
+        {
+            key: '3',
+            name: '设计文档',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+            size: '34KB',
+            owner: 'Zoey Edwards',
+            updateTime: '2020-01-26 11:01',
+            avatarBg: 'light-blue',
+        },
+        {
+            key: '4',
+            name: 'Semi Pro 设计稿.fig',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',
+            size: '2M',
+            owner: '姜鹏志',
+            updateTime: '2020-02-02 05:13',
+            avatarBg: 'grey',
+        }
+    ]), []);
+
+    return <Table columns={columns} dataSource={data} pagination={{ pageSize: 3 }} />;
+}

package/tabs/TabBar.tsx

@@ -88,6 +88,10 @@ class TabBar extends React.Component<TabBarProps, TabBarState> {
         }
     };
 
+    handleKeyDown = (event: React.KeyboardEvent, itemKey: string, closable: boolean) => {
+        this.props.handleKeyDown(event, itemKey, closable);
+    }
+
     renderTabItem = (panel: PlainTab): ReactNode => {
         const { size, type, deleteTabItem } = this.props;
         const panelIcon = panel.icon ? this.renderIcon(panel.icon) : null;
@@ -110,9 +114,12 @@ class TabBar extends React.Component<TabBarProps, TabBarState> {
             <div
                 role="tab"
                 id={`semiTab${key}`}
+                data-tabkey={`semiTab${key}`}
                 aria-controls={`semiTabPanel${key}`}
                 aria-disabled={panel.disabled ? 'true' : 'false'}
                 aria-selected={isSelected ? 'true' : 'false'}
+                tabIndex={isSelected ? 0 : -1}
+                onKeyDown={e => this.handleKeyDown(e, key, panel.closable)}
                 {...events}
                 className={className}
                 key={this._getItemKey(key)}

package/tabs/TabPane.tsx

@@ -96,6 +96,7 @@ class TabPane extends PureComponent<TabPaneProps> {
                 className={classNames}
                 style={style}
                 aria-hidden={active ? 'false' : 'true'}
+                tabIndex={0}
                 {...getDataAttr(restProps)}
             >
                 {motion ? (

package/tabs/index.tsx

@@ -266,7 +266,8 @@ class Tabs extends BaseComponent<TabsProps, TabsState> {
             tabBarExtraContent,
             tabPosition,
             type,
-            deleteTabItem: this.deleteTabItem
+            deleteTabItem: this.deleteTabItem,
+            handleKeyDown: this.foundation.handleKeyDown
         } as TabBarProps;
 
         const tabBar = renderTabBar ? renderTabBar(tabBarProps, TabBar) : <TabBar {...tabBarProps} />;

package/tabs/interface.ts

@@ -53,6 +53,7 @@ export interface TabBarProps {
     dropdownStyle?: CSSProperties;
     closable?: boolean;
     deleteTabItem?: (tabKey: string, event: MouseEvent<Element>) => void;
+    handleKeyDown?:  (event: React.KeyboardEvent, itemKey: string, closable: boolean) => void;
 }
 
 export interface TabPaneProps {

package/tag/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable no-unused-vars */
 /* eslint-disable max-len */
 import React, { Component } from 'react';
@@ -7,7 +8,9 @@ import { cssClasses, strings } from '@douyinfe/semi-foundation/tag/constants';
 import Avatar from '../avatar/index';
 import { IconClose } from '@douyinfe/semi-icons';
 import { TagProps, TagSize, TagColor, TagType } from './interface';
+import { handlePrevent } from '@douyinfe/semi-foundation/utils/a11y';
 import '@douyinfe/semi-foundation/tag/tag.scss';
+import { isString } from 'lodash';
 
 export * from './interface';
 
@@ -50,6 +53,7 @@ export default class Tag extends Component<TagProps, TagState> {
         className: PropTypes.string,
         avatarSrc: PropTypes.string,
         avatarShape: PropTypes.oneOf(avatarShapeSet),
+        'aria-label': PropTypes.string,
     };
 
     constructor(props: TagProps) {
@@ -58,6 +62,7 @@ export default class Tag extends Component<TagProps, TagState> {
             visible: true,
         };
         this.close = this.close.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
     }
 
     // any other way to achieve this?
@@ -88,6 +93,26 @@ export default class Tag extends Component<TagProps, TagState> {
         this.setVisible(false);
     }
 
+    handleKeyDown(event: any) {
+        const { closable, onClick } = this.props;
+        switch (event.key) {
+            case "Backspace":
+            case "Delete":
+                closable && this.close(event, this.props.children);
+                handlePrevent(event);
+                break;
+            case "Enter":
+                onClick(event);
+                handlePrevent(event);
+                break;
+            case 'Escape':
+                event.target.blur();
+                break;
+            default:
+                break;
+        }
+    }
+
     renderAvatar() {
         const { avatarShape, avatarSrc } = this.props;
         const avatar = <Avatar src={avatarSrc} shape={avatarShape} />;
@@ -95,10 +120,13 @@ export default class Tag extends Component<TagProps, TagState> {
     }
 
     render() {
-        const { children, size, color, closable, visible, onClose, className, type, avatarSrc, avatarShape, ...attr } = this.props;
+        const { children, size, color, closable, visible, onClose, onClick, className, type, avatarSrc, avatarShape, ...attr } = this.props;
         const { visible: isVisible } = this.state;
+        const clickable = onClick !== Tag.defaultProps.onClick || closable;
+        const a11yProps = { role: 'button', tabIndex: 0, onKeyDown: this.handleKeyDown };
         const baseProps = {
             ...attr,
+            onClick,
             className: classNames(
                 prefixCls,
                 {
@@ -114,13 +142,15 @@ export default class Tag extends Component<TagProps, TagState> {
                 className
             ),
         };
+        const wrapProps = clickable ? ({ ...baseProps, ...a11yProps }) : baseProps;
         const closeIcon = closable ? (
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events
             <div className={`${prefixCls}-close`} onClick={e => this.close(e, children)}>
                 <IconClose size="small" />
             </div>
         ) : null;
         return (
-            <div {...baseProps}>
+            <div aria-label={this.props['aria-label'] || isString(children) ? `${closable ? 'Closable ' : ''}Tag: ${children}` : '' } {...wrapProps}>
                 <div className={`${prefixCls}-content`}>
                     {avatarSrc ? this.renderAvatar() : null}
                     {children}

package/tag/interface.ts

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

package/tagInput/index.tsx

@@ -328,6 +328,7 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
                         closable={!disabled}
                         key={`${index}${value}`}
                         visible
+                        aria-label={`${!disabled ? 'Closable ' : ''}Tag: ${value}`}
                     >
                         <Paragraph
                             className={typoCls}

package/tooltip/TooltipStyledTransition.tsx

@@ -18,8 +18,9 @@ const TooltipTransition: React.FC<TooltipTransitionProps> = (props = {}) => {
     const { children } = props;
     const motion = getMotionObjFromProps(props);
 
+    //  add fillMode forward to fix issue 715, tooltip close will flashing under react 18
     return (
-        <StyledTransition {...props} enter={enterCls} leave={leaveCls} duration={'100ms'} {...motion}>
+        <StyledTransition {...props} enter={enterCls} leave={leaveCls} duration={'100ms'} {...motion} fillMode='forward'>
             {typeof children === 'function' ?
                 ({ animateCls, animateEvents, animateStyle }: any) => children({ animateCls, animateEvents, animateStyle }) :
                 children}

package/tooltip/_story/tooltip.stories.js

@@ -24,6 +24,7 @@ import ArrowPointAtCenter from './ArrowPointAtCenter';
 import CustomContainer from './CustomContainer';
 import ContainerPosition from './ContainerPosition';
 import { IconList, IconSidebar, IconEdit } from '@douyinfe/semi-icons';
+import TooltipTransition from '../TooltipStyledTransition';
 
 export default {
   title: 'Tooltip',
@@ -1007,3 +1008,92 @@ export const autoFocusContentDemo = () => {
     </div>
   );
 };
+
+
+export const FlashWithReact18 = () => {
+  const [visible, setV] = useState(false);
+
+  const change = () => {
+    setV(false);
+  }
+
+  return (<>
+    <Tooltip content='test work with react 18' position='bottom' trigger='custom' visible={visible}>
+      <Button style={{ marginLeft: 10 }} onClick={() => setV(true)}>show, semi with react 18 motion=true, abnormal</Button>
+    </Tooltip>
+    <Button style={{ marginLeft: 10 }} onClick={() => change()}>hide</Button>
+
+  </>);
+}
+
+
+
+
+export const Transition = () => {
+
+  const [transitionState, setT] = useState('');
+
+  const [insert, setInsert] = useState(false);
+
+  const handleLeave = () => {
+    console.log('set insert false')
+    setInsert(false);
+  }
+
+  const CommonDOM = () => {
+    const enterCls = `semi-tooltip-bounceIn`;
+    const leaveCls = `semi-tooltip-zoomOut`;
+    const animateStyle = {
+      animationDirection: 'normal',
+      animationName: transitionState === 'enter' ? enterCls : leaveCls,
+      animationDuration: '1000ms',
+    }
+
+    const handleEnd = () => {
+      if (transitionState === 'enter') {
+        console.log('animation end of show');
+      } else if (transitionState === 'leave') {
+        console.log('animation end of hide');
+        handleLeave();
+      }
+    }
+     
+    return <div style={{ ...animateStyle }} onAnimationEnd={handleEnd}>test</div>
+  };
+
+  const toggleShow = (insert) => {
+    if (!transitionState) {
+      setT('enter');
+      setInsert(insert);
+    } else if (transitionState === 'enter') {
+      setT('leave');
+    } else if (transitionState === 'leave') {
+      setT('enter');
+      setInsert(insert);
+    }
+  };
+
+  return (
+    <>
+      <div style={{ width: 200, height: 90, border: '1px solid var(--semi-color-text-1)' }}>
+        {
+          insert ? (
+            <CommonDOM></CommonDOM>
+            ): null
+        }
+      </div>
+      <Button onClick={() => toggleShow(true)}>show</Button>
+      <Button onClick={() => toggleShow(false)}>hide</Button>
+    </>
+  )
+}
+
+export const TransitionDemo = () => {
+  const [key, setKey] = useState(1);
+  return (
+    <>
+    <Transition key={key} />
+    <Button onClick={() => setKey(Math.random())}>reset Demo</Button>
+  </>
+  )
+}

package/treeSelect/index.tsx

@@ -731,7 +731,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         let renderKeys = [];
         if (checkRelation === 'related') {
             renderKeys = normalizeKeyList([...checkedKeys], keyEntities, leafOnly);
-        } else if (checkRelation === 'unRelated') {
+        } else if (checkRelation === 'unRelated' && Object.keys(keyEntities).length > 0) {
             renderKeys = [...realCheckedKeys];
         }
         const tagList: Array<React.ReactNode> = [];