@douyinfe/semi-ui 2.4.1 → 2.6.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.4.1",
+    "version": "2.6.0-beta.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,12 +14,12 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.4.1",
-        "@douyinfe/semi-animation-react": "2.4.1",
-        "@douyinfe/semi-foundation": "2.4.1",
-        "@douyinfe/semi-icons": "2.4.1",
-        "@douyinfe/semi-illustrations": "2.4.1",
-        "@douyinfe/semi-theme-default": "2.4.1",
+        "@douyinfe/semi-animation": "2.6.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.6.0-beta.0",
+        "@douyinfe/semi-foundation": "2.6.0-beta.0",
+        "@douyinfe/semi-icons": "2.6.0-beta.0",
+        "@douyinfe/semi-illustrations": "2.6.0-beta.0",
+        "@douyinfe/semi-theme-default": "2.6.0-beta.0",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "c69c466ecd14aeeda847473e97dad2ec313f09fa",
+    "gitHead": "49d107f759f3610a471c34bb9568ad9408aa2cb0",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.4.1",
+        "@douyinfe/semi-scss-compile": "2.6.0-beta.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/scrollList/_story/ScrollList/index.js

@@ -43,6 +43,7 @@ class ScrollListDemo extends React.Component {
                     type={1}
                     selectedIndex={this.state.selectIndex1}
                     onSelect={this.onSelect}
+                    aria-label="1"
                 />
                 <ScrollItem
                     mode="normal"
@@ -50,6 +51,7 @@ class ScrollListDemo extends React.Component {
                     type={2}
                     selectedIndex={this.state.selectIndex2}
                     onSelect={this.onSelect}
+                    aria-label="2"
                 />
                 <ScrollItem
                     mode="normal"
@@ -57,6 +59,7 @@ class ScrollListDemo extends React.Component {
                     type={3}
                     selectedIndex={this.state.selectIndex3}
                     onSelect={this.onSelect}
+                    aria-label="3"
                 />
             </ScrollList>
         );

package/scrollList/_story/WheelList/index.js

@@ -92,6 +92,7 @@ class ScrollListDemo extends React.Component {
                         type={1}
                         selectedIndex={this.state.selectIndex1}
                         onSelect={this.onSelectAP}
+                        aria-label="时段"
                     />
                     <ScrollItem
                         {...commonProps}
@@ -99,6 +100,7 @@ class ScrollListDemo extends React.Component {
                         type={2}
                         selectedIndex={this.state.selectIndex2}
                         onSelect={this.onSelectHour}
+                        aria-label="小时"
                     />
                     <ScrollItem
                         {...commonProps}
@@ -106,6 +108,7 @@ class ScrollListDemo extends React.Component {
                         type={3}
                         selectedIndex={this.state.selectIndex3}
                         onSelect={this.onSelectMinute}
+                        aria-label="分钟"
                     />
                 </ScrollList>
             </div>

package/scrollList/scrollItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
 import BaseComponent from '../_base/baseComponent';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
@@ -28,6 +28,7 @@ export interface ScrollItemProps<T extends Item> {
     motion?: Motion;
     style?: React.CSSProperties;
     type?: string | number; // used to identify the scrollItem, used internally by the semi component, and does not need to be exposed to the user
+    'aria-label'?: AriaAttributes['aria-label'];
 }
 
 export interface ScrollItemState {
@@ -413,15 +414,15 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
             const { transform: itemTrans } = item;
 
             const transform = typeof itemTrans === 'function' ? itemTrans : commonTrans;
-
+            const selected = selectedIndex === index;
             const cls = classnames({
-                [`${cssClasses.PREFIX}-item-sel`]: selectedIndex === index && mode !== wheelMode,
+                [`${cssClasses.PREFIX}-item-sel`]: selected && mode !== wheelMode,
                 [`${cssClasses.PREFIX}-item-disabled`]: Boolean(item.disabled),
             });
 
             let text = '';
 
-            if (selectedIndex === index) {
+            if (selected) {
                 if (typeof transform === 'function') {
                     text = transform(item.value, item.text);
                 } else {
@@ -441,7 +442,14 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
 
             return (
                 // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-                <li key={prefixKey + index} {...events} className={cls}>
+                <li
+                    key={prefixKey + index}
+                    {...events}
+                    className={cls}
+                    role="option"
+                    aria-selected={selected}
+                    aria-disabled={item.disabled}
+                >
                     {text}
                 </li>
             );
@@ -457,7 +465,14 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
 
         return (
             <div style={style} className={wrapperCls} ref={this._cacheWrapperNode}>
-                <ul ref={this._cacheListNode}>{inner}</ul>
+                <ul
+                    role="listbox"
+                    aria-multiselectable={false}
+                    aria-label={this.props['aria-label']}
+                    ref={this._cacheListNode}
+                >
+                    {inner}
+                </ul>
             </div>
         );
     };
@@ -470,13 +485,13 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
         const { prependCount, appendCount } = this.state;
 
         const prependList = times(prependCount).reduce((arr, num) => {
-            const items = this.renderItemList(`pre_${ num }_`);
+            const items = this.renderItemList(`pre_${num}_`);
             arr.unshift(...items);
 
             return arr;
         }, []);
         const appendList = times(appendCount).reduce((arr, num) => {
-            const items = this.renderItemList(`app_${ num }_`);
+            const items = this.renderItemList(`app_${num}_`);
             arr.push(...items);
             return arr;
         }, []);
@@ -500,7 +515,13 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
                 <div className={selectorCls} ref={this._cacheSelectorNode} />
                 <div className={postShadeCls} />
                 <div className={listWrapperCls} ref={this._cacheWrapperNode} onScroll={this.scrollToSelectItem}>
-                    <ul ref={this._cacheListNode} onClick={this.clickToSelectItem}>
+                    <ul
+                        role="listbox"
+                        aria-label={this.props['aria-label']}
+                        aria-multiselectable={false}
+                        ref={this._cacheListNode}
+                        onClick={this.clickToSelectItem}
+                    >
                         {prependList}
                         {inner}
                         {appendList}

package/select/index.tsx

@@ -530,9 +530,13 @@ class Select extends BaseComponent<SelectProps, SelectState> {
 
                 }
             },
-            updateScrollTop: () => {
+            updateScrollTop: (index?: number) => {
                 // eslint-disable-next-line max-len
-                let destNode = document.querySelector(`#${prefixcls}-${this.selectOptionListID} .${prefixcls}-option-selected`) as HTMLDivElement;
+                let optionClassName = `.${prefixcls}-option-selected`;
+                if (index !== undefined) {
+                    optionClassName = `.${prefixcls}-option:nth-child(${index})`;
+                }
+                let destNode = document.querySelector(`#${prefixcls}-${this.selectOptionListID} ${optionClassName}`) as HTMLDivElement;
                 if (Array.isArray(destNode)) {
                     // eslint-disable-next-line prefer-destructuring
                     destNode = destNode[0];
@@ -754,31 +758,26 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         this.foundation.handleOptionMouseEnter(optionIndex);
     }
 
-    renderWithGroup(visibileOptions: OptionProps[]) {
+    renderWithGroup(visibleOptions: OptionProps[]) {
         const content: JSX.Element[] = [];
         const groupStatus = new Map();
 
-        visibileOptions.forEach((option, optionIndex) => {
+        visibleOptions.forEach((option, optionIndex) => {
             const parentGroup = option._parentGroup;
             const optionContent = this.renderOption(option, optionIndex);
-            if (parentGroup && groupStatus.has(parentGroup.label)) {
-                // group content already insert
-                content.push(optionContent);
-            } else if (parentGroup) {
+            if (parentGroup && !groupStatus.has(parentGroup.label)) {
+                // when use with OptionGroup and group content not already insert
                 const groupContent = <OptionGroup {...parentGroup} key={parentGroup.label} />;
                 groupStatus.set(parentGroup.label, true);
                 content.push(groupContent);
-                content.push(optionContent);
-            } else {
-                // when not use with OptionGroup
-                content.push(optionContent);
-            }
+            } 
+            content.push(optionContent);
         });
 
         return content;
     }
 
-    renderVirtualizeList(visibileOptions: OptionProps[]) {
+    renderVirtualizeList(visibleOptions: OptionProps[]) {
         const { virtualize } = this.props;
         const { direction } = this.context;
         const { height, width, itemSize } = virtualize;
@@ -787,9 +786,9 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             <List
                 ref={this.virtualizeListRef}
                 height={height || numbers.LIST_HEIGHT}
-                itemCount={visibileOptions.length}
+                itemCount={visibleOptions.length}
                 itemSize={itemSize}
-                itemData={{ visibileOptions, renderOption: this.renderOption }}
+                itemData={{ visibleOptions, renderOption: this.renderOption }}
                 width={width || '100%'}
                 style={{ direction }}
             >
@@ -814,11 +813,11 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         } = this.props;
 
         // Do a filter first, instead of directly judging in forEach, so that the focusIndex can correspond to
-        const visibileOptions = options.filter(item => item._show);
+        const visibleOptions = options.filter(item => item._show);
 
-        let listContent: JSX.Element | JSX.Element[] = this.renderWithGroup(visibileOptions);
+        let listContent: JSX.Element | JSX.Element[] = this.renderWithGroup(visibleOptions);
         if (virtualize) {
-            listContent = this.renderVirtualizeList(visibileOptions);
+            listContent = this.renderVirtualizeList(visibleOptions);
         }
 
         const style = { minWidth: dropdownMinWidth, ...dropdownStyle };

package/select/option.tsx

@@ -57,8 +57,8 @@ class Option extends PureComponent<OptionProps> {
 
     onClick({ value, label, children, ...rest }: Partial<OptionProps>, event: React.MouseEvent) {
         const { props } = this;
-        const isDisbled = props.disabled;
-        if (!isDisbled) {
+        const isDisabled = props.disabled;
+        if (!isDisabled) {
             props.onSelect({ ...rest, value, label: label || children }, event);
         }
     }

package/select/virtualRow.tsx

@@ -5,8 +5,8 @@ export interface VirtualRowProps{
     style?: React.CSSProperties;
 }
 const VirtualRow = ({ index, data, style }: VirtualRowProps) => {
-    const { visibileOptions } = data;
-    const option = visibileOptions[index];
+    const { visibleOptions } = data;
+    const option = visibleOptions[index];
     return data.renderOption(option, index, style);
 };
 

package/table/Table.tsx

@@ -424,11 +424,12 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             willUpdateStates.cachedColumns = props.columns;
             willUpdateStates.cachedChildren = null;
         } else if (props.children && props.children !== state.cachedChildren) {
-            const newFlattenColumns = flattenColumns(getColumns(props.children));
+            const newNestedColumns = getColumns(props.children);
+            const newFlattenColumns = flattenColumns(newNestedColumns);
             const columns = mergeColumns(state.queries, newFlattenColumns, null, false);
             willUpdateStates.flattenColumns = newFlattenColumns;
             willUpdateStates.queries = [...columns];
-            willUpdateStates.cachedColumns = [...columns];
+            willUpdateStates.cachedColumns = [...newNestedColumns];
             willUpdateStates.cachedChildren = props.children;
         }
 
@@ -943,11 +944,15 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
                 titleArr.push(sorter);
             }
 
+            const stateFilteredValue = get(curQuery, 'filteredValue');
+            const defaultFilteredValue = get(curQuery, 'defaultFilteredValue');
+            const filteredValue = stateFilteredValue ? stateFilteredValue : defaultFilteredValue;
             if ((Array.isArray(column.filters) && column.filters.length) || isValidElement(column.filterDropdown)) {
                 const filter = (
                     <ColumnFilter
                         key={strings.DEFAULT_KEY_COLUMN_FILTER}
                         {...curQuery}
+                        filteredValue={filteredValue}
                         onFilterDropdownVisibleChange={(visible: boolean) => this.foundation.toggleShowFilter(dataIndex, visible)}
                         onSelect={(data: OnSelectData) => this.foundation.handleFilterSelect(dataIndex, data)}
                     />

package/table/_story/Perf/Virtualized/index.jsx

@@ -9,29 +9,35 @@ class PerfVirtualized extends React.Component {
             {
                 title: 'A',
                 dataIndex: 'key',
+                key: 'a',
                 width: 150,
             },
             {
                 title: 'B',
                 dataIndex: 'key',
+                key: 'b',
             },
             {
                 title: 'C',
                 dataIndex: 'key',
+                key: 'c',
             },
             {
                 title: 'D',
                 dataIndex: 'key',
+                key: 'd',
             },
             {
                 title: 'E',
                 dataIndex: 'key',
                 width: 200,
+                key: 'e',
             },
             {
                 title: 'F',
                 dataIndex: 'key',
                 width: 100,
+                key: 'f'
             },
         ];
 

package/table/_story/table.stories.js

@@ -76,8 +76,7 @@ export { default as ScrollBar } from './ScrollBar';
 export { default as TableSpan } from './TableSpan';
 export { default as FixRenderReturnProps } from './FixRenderReturnProps';
 export { default as WarnColumnWithoutDataIndex } from './WarnColumnWithoutDataIndex';
-export { default as FixedColumnsChange } from './v2/FixedColumnsChange';
-export { default as FixedZIndex } from './v2/FixedZIndex';
+export * from './v2';
 
 // empty table
 

package/table/_story/v2/FixedHeaderMerge/index.jsx

@@ -0,0 +1,98 @@
+import React, { useMemo } from 'react';
+import { Table, Button } from '@douyinfe/semi-ui';
+
+Demo.storyName = "fixed jsx column nested bug";
+
+
+/**
+ * fixed https://github.com/DouyinFE/semi-design/issues/619
+ * 
+ * Test with Cypress
+ */
+export default function Demo() {
+    const columns = [
+        {
+            title: 'Base Information',
+            fixed: 'left',
+            children: [
+                {
+                    title: 'Name',
+                    dataIndex: 'name',
+                    width: 200,
+                },
+                {
+                    title: 'Age',
+                    dataIndex: 'age',
+                    width: 100,
+                },
+            ],
+        },
+        {
+            title: 'Company Information',
+            children: [
+                {
+                    title: 'Company Name',
+                    dataIndex: 'company.name',
+                },
+                {
+                    title: 'Company Address',
+                    dataIndex: 'company.address',
+                },
+            ],
+        }
+    ];
+
+    const data = useMemo(() => {
+        const data = [];
+        for (let i = 0; i < 100; i++) {
+            let age = (i * 1000) % 149;
+            let name = `Edward King ${i}`;
+            data.push({
+                key: '' + i,
+                company: {
+                    name: 'ByteDance',
+                    address: 'No. 48, Zhichun Road',
+                },
+                name,
+                age,
+                address: `No ${i + 1}, Zhongguancun Street`,
+                description: `My name is ${name}, I am ${age} years old, living in No ${i + 1}, Zhongguancun Street`,
+            });
+        }
+        return data;
+    }, []);
+
+    const [flag, setFlag] = React.useState(true);
+
+    return (
+        <>
+            <Button data-cy="button" onClick={()=> setFlag(!flag)}>reRender</Button>
+            <Table dataSource={data} pagination={true} size="small">
+                {columns.map((item, titleIndex) =>
+                    (
+                        <Table.Column
+                            key={titleIndex}
+                            title={item.title}
+                        >
+                            {item.children.map(
+                                (childItem, columnIndex) =>
+                                    (
+                                        <Table.Column
+                                            title={childItem.title}
+                                            dataIndex={childItem.dataIndex}
+                                            key={titleIndex.toString() + columnIndex.toString()}
+                                        />
+                                    )
+                            )}
+                        </Table.Column>
+                    )
+                )}
+                <Table.Column
+                    title=""
+                    key="lastColumn"
+                    render={() => 123}
+                />
+            </Table>
+        </>
+    );
+}

package/table/_story/v2/FixedResizable/index.jsx

@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import { Table, Avatar, Button, Space } from '@douyinfe/semi-ui';
+import { IconMore } from '@douyinfe/semi-icons';
+
+const columns = [
+    {
+        title: '标题',
+        dataIndex: 'name',
+        width: 300,
+        key: 'name',
+        render: (text, record, index) => {
+            return (
+                <div>
+                    <Avatar size="small" shape="square" src={record.nameIconSrc} style={{ marginRight: 12 }}></Avatar>
+                    {text}
+                </div>
+            );
+        },
+    },
+    {
+        title: '大小',
+        dataIndex: 'size',
+        key: 'size',
+        width: 200,
+    },
+    {
+        title: '所有者',
+        dataIndex: 'owner',
+        key: 'owner',
+        width: 200,
+        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',
+        key: 'updateTime',
+        width: 200,
+    },
+    {
+        title: '',
+        dataIndex: 'operate',
+        key: 'operate',
+        render: () => {
+            return <IconMore />;
+        },
+    },
+];
+
+/**
+ * fix https://github.com/DouyinFE/semi-design/issues/650
+ */
+App.storyName = 'fixed resizable column width bug';
+App.parameters = { chromatic: { disableSnapshot: true } };
+function App() {
+    const [cols, setCols] = useState(columns);
+
+    const onClickHandle = () => {
+        const localCols = [...cols].filter((i, index) => index !== 1);
+        setCols(localCols);
+    };
+
+    const data = [
+        {
+            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',
+        },
+    ];
+
+    return (
+        <>
+            <Space>
+                <Button onClick={onClickHandle}>减少一列</Button>
+                <Button theme="solid" onClick={() => setCols(columns)}>
+                    reset
+                </Button>
+            </Space>
+            <Table columns={cols} dataSource={data} pagination={false} resizable />
+        </>
+    );
+}
+
+export default App;