@douyinfe/semi-ui 2.7.0 → 2.8.0-beta.1

package/modal/_story/modal.stories.js

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
-import { Select, Modal, Button, Tooltip, Popover } from '../../index';
+import en_GB from '../../locale/source/en_GB';
+
+import { Select, Modal, Button, Tooltip, Popover, ConfigProvider, Tag, Space } from '../../index';
 import CollapsibleInModal from './CollapsibleInModal';
 import DynamicContextDemo from './DynamicContext';
 
@@ -248,4 +250,94 @@ KeepDomNotLazy.story = {
   name: 'keepDOM && not lazy',
 };
 
+export const UseModalDemo = () => {
+  const [modal, contextHolder] = Modal.useModal();
+  const config = { 'title': 'old title', 'content': 'old content' };
+
+  return (
+      <ConfigProvider locale={en_GB}>
+          <div>
+              <Button
+                  onClick={() => {
+                      const currentModal = modal.confirm(config);
+
+                      setTimeout(() => {
+                        currentModal.update({ title: "new title", content: "new content" });
+                      }, 1000);
+                  }}
+              >
+                  Confirm Modal
+              </Button>
+          </div>
+          {contextHolder}
+      </ConfigProvider>
+  );
+};
+UseModalDemo.storyName = "useModal";
+
+export const UseModalDestroy = () => {
+  const [modal, contextHolder] = Modal.useModal();
+  const config = { 'title': 'old title', 'content': 'old content' };
+
+  return (
+      <ConfigProvider locale={en_GB}>
+          <div>
+              <Button
+                  onClick={() => {
+                      const currentModal = modal.confirm(config);
+
+                      setTimeout(() => {
+                        currentModal.destroy();
+                      }, 1000);
+                  }}
+              >
+                  Confirm Modal
+              </Button>
+          </div>
+          {contextHolder}
+      </ConfigProvider>
+  );
+};
+UseModalDestroy.storyName = "useModal destroy";
+
+export const UseModalAfterClose = () => {
+  const [modal, contextHolder] = Modal.useModal();
+  const [closed, setClosed] = React.useState(false);
+  const [leave, setLeave] = React.useState(false);
+
+  const config = { 
+    title: 'old title', 
+    content: 'old content', 
+    afterClose: () => {
+      setClosed(true);
+    },
+    motion: {
+      didLeave: () => {
+        console.log('didLeave');
+        setLeave(true);
+      }
+    }
+  };
 
+  return (
+      <ConfigProvider locale={en_GB}>
+          <Space>
+              <Button
+                  onClick={() => {
+                      const currentModal = modal.confirm(config);
+
+                      setTimeout(() => {
+                        currentModal.destroy();
+                      }, 0);
+                  }}
+              >
+                  Confirm Modal
+              </Button>
+              <Tag>{`closed: ${closed}`}</Tag>
+              {/* <Tag>{`motion leave: ${leave}`}</Tag> */}
+          </Space>
+          {contextHolder}
+      </ConfigProvider>
+  );
+};
+UseModalAfterClose.storyName = "useModal afterClose";

package/modal/useModal/HookModal.tsx

@@ -35,6 +35,7 @@ const HookModal = ({ afterClose, config, ...props }: PropsWithChildren<HookModal
     }));
 
     const { motion } = props;
+    /* istanbul ignore next */
     const mergedMotion =
         typeof motion === 'undefined' || motion ?
             {

package/notification/_story/useNotification/index.jsx

@@ -4,18 +4,32 @@ import { Button, ConfigProvider } from '../../../index';
 import Context from './context';
 
 function App({ children, globalVars }) {
-    return <Context.Provider value={{ title: '1111', ...globalVars }}>{children}</Context.Provider>;
+    return (
+        <div data-cy="notice-container">
+            <Context.Provider value={{ title: '1111', ...globalVars }}>{children}</Context.Provider>
+        </div>
+    );
 }
 
 export default function Demo() {
-    const [Notice, elements] = useNotification();
+    const [notice, elements] = useNotification();
+    const config = {
+        content: 'Hello World',
+        position: 'top',
+        title: <Context.Consumer>{({ title }) => <strong>{title}</strong>}</Context.Consumer>,
+        duration: 0,
+    };
 
     const addNotice = () => {
-        Notice.addNotice({
-            content: 'Hello World',
-            position: 'top',
-            title: <Context.Consumer>{({ title }) => <strong>{title}</strong>}</Context.Consumer>,
-        });
+        const id1 = notice.info(config);
+        const id2 = notice.success(config);
+        const id3 = notice.warning(config);
+        const id4 = notice.error(config);
+        const id5 = notice.open(config);
+
+        // setTimeout(() => {
+        //     notice.close(id5);
+        // }, 1000);
     };
 
     return (

package/notification/useNotification/index.tsx

@@ -59,8 +59,8 @@ export default function useNotification() {
     const [elements, patchElement] = usePatchElement();
     const noticeRef = new Map<string, { close: () => void } & ReactElement>();
 
-    const id = getUuid('semi_notice_');
     const addNotice = (config: NoticeProps) => {
+        const id = getUuid('semi_notice_');
         const mergeConfig = {
             ...config,
             id,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.7.0",
+    "version": "2.8.0-beta.1",
     "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.7.0",
-        "@douyinfe/semi-animation-react": "2.7.0",
-        "@douyinfe/semi-foundation": "2.7.0",
-        "@douyinfe/semi-icons": "2.7.0",
-        "@douyinfe/semi-illustrations": "2.7.0",
-        "@douyinfe/semi-theme-default": "2.7.0",
+        "@douyinfe/semi-animation": "2.8.0-beta.1",
+        "@douyinfe/semi-animation-react": "2.8.0-beta.1",
+        "@douyinfe/semi-foundation": "2.8.0-beta.1",
+        "@douyinfe/semi-icons": "2.8.0-beta.1",
+        "@douyinfe/semi-illustrations": "2.8.0-beta.1",
+        "@douyinfe/semi-theme-default": "2.8.0-beta.1",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "b6e4e0a1e22d4dabe68cbf7e3d2cfd0202da0424",
+    "gitHead": "1d03945ec34f2ebd37ab7cc67c4b11786b46cb1f",
     "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.7.0",
+        "@douyinfe/semi-scss-compile": "2.8.0-beta.1",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/popover/_story/popover.stories.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import Popover from '../index';
 import { strings } from '@douyinfe/semi-foundation/tooltip/constants';
-import { Button, Input, Table, IconButton, Modal, Tag } from '@douyinfe/semi-ui';
+import { Button, Input, Table, IconButton, Modal, Tag, Space } from '@douyinfe/semi-ui';
 import SelectInPopover from './SelectInPopover';
 import BtnClose from './BtnClose';
 import PopRight from './PopRight';
@@ -572,3 +572,77 @@ export const ArrowPointAtCenterDemo = () => <ArrowPointAtCenter />;
 ArrowPointAtCenterDemo.story = {
   name: 'arrow point at center'
 }
+
+export const A11yKeyboard = () => {
+  const [visible, setVisible] = React.useState(false);
+  const popStyle = { height: 200, width: 200 };
+
+  const renderContent = ({ initialFocusRef }) => {
+    return (
+      <div style={popStyle} data-cy="pop">
+        <button data-cy="pop-focusable-first">first focusable</button>
+        <a href="https://semi.design">link</a>
+        {/* <input ref={initialFocusRef} placeholder="init focus" /> */}
+        <input placeholder="" defaultValue="semi" />
+        <a href="https://semi.design">link2</a>
+        <button data-cy="pop-focusable-last">last focusable</button>
+      </div>
+    );
+  };
+
+  const noFocusableContent = (
+    <div style={popStyle}>没有可聚焦元素</div>
+  );
+
+  const initFocusContent = ({ initialFocusRef }) => {
+    return (
+      <div style={popStyle} data-cy="pop">
+        <button data-cy="pop-focusable-first">first focusable</button>
+        <input placeholder="" defaultValue="semi" ref={initialFocusRef} data-cy="initial-focus-input" />
+        <button data-cy="pop-focusable-last">last focusable</button>
+      </div>
+    );
+  };
+
+  return (
+      <div style={{ paddingLeft: 100, paddingTop: 100 }}>
+          <Space spacing={100}>
+              <Popover content={renderContent} trigger="click" motion={false}>
+                  <Button data-cy="click">click</Button>
+              </Popover>
+              <Popover content={renderContent} trigger="hover">
+                  <span data-cy="hover">hover</span>
+              </Popover>
+              <Popover content={renderContent} trigger="focus">
+                  <Input data-cy="focus" defaultValue="focus" style={{ width: 150 }} />
+              </Popover>
+              <Popover
+                  content={renderContent}
+                  trigger="custom"
+                  visible={visible}
+                  onEscKeyDown={() => {
+                      console.log('esc key down');
+                      setVisible(false);
+                  }}
+              >
+                  <Button onClick={() => setVisible(!visible)} data-cy="custom">
+                    custom trigger + click me toggle show
+                  </Button>
+              </Popover>
+              <Popover content={noFocusableContent} trigger="click" data-cy="click-pop-contains-no-focusable">
+                  <Button>pop内没有可聚焦元素</Button>
+              </Popover>
+              <Popover content={initFocusContent} trigger="click" motion={false}>
+                  <Button data-cy="initial-focus">custom initialFocus</Button>
+              </Popover>
+              <Popover content={renderContent} trigger="click" motion={false} closeOnEsc={false}>
+                  <Button data-cy="closeOnEsc-false">closeOnEsc=false</Button>
+              </Popover>
+              <Popover content={renderContent} trigger="click" motion={false} returnFocusOnClose={false}>
+                  <Button data-cy="returnFocusOnClose-false">returnFocusOnClose=false</Button>
+              </Popover>
+          </Space>
+      </div>
+  );
+};
+A11yKeyboard.storyName = "a11y keyboard and focus";

package/popover/index.tsx

@@ -3,12 +3,12 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import ConfigContext from '../configProvider/context';
 import { cssClasses, strings, numbers } from '@douyinfe/semi-foundation/popover/constants';
-import Tooltip, { ArrowBounding, Position, Trigger } from '../tooltip/index';
+import Tooltip, { ArrowBounding, Position, TooltipProps, Trigger, RenderContentProps } from '../tooltip/index';
 import Arrow from './Arrow';
 import '@douyinfe/semi-foundation/popover/popover.scss';
 import { BaseProps } from '../_base/baseComponent';
 import { Motion } from '../_base/base';
-import { noop } from 'lodash';
+import { isFunction, noop } from 'lodash';
 
 export { ArrowProps } from './Arrow';
 declare interface ArrowStyle {
@@ -19,7 +19,7 @@ declare interface ArrowStyle {
 
 export interface PopoverProps extends BaseProps {
     children?: React.ReactNode;
-    content?: React.ReactNode;
+    content?: TooltipProps['content'];
     visible?: boolean;
     autoAdjustOverflow?: boolean;
     motion?: Motion;
@@ -40,6 +40,10 @@ export interface PopoverProps extends BaseProps {
     rePosKey?: string | number;
     getPopupContainer?: () => HTMLElement;
     zIndex?: number;
+    closeOnEsc?: TooltipProps['closeOnEsc'];
+    guardFocus?: TooltipProps['guardFocus'];
+    returnFocusOnClose?: TooltipProps['returnFocusOnClose'];
+    onEscKeyDown?: TooltipProps['onEscKeyDown'];
 }
 
 export interface PopoverState {
@@ -52,7 +56,7 @@ class Popover extends React.PureComponent<PopoverProps, PopoverState> {
     static contextType = ConfigContext;
     static propTypes = {
         children: PropTypes.node,
-        content: PropTypes.node,
+        content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
         visible: PropTypes.bool,
         autoAdjustOverflow: PropTypes.bool,
         motion: PropTypes.oneOfType([PropTypes.bool, PropTypes.object, PropTypes.func]),
@@ -76,6 +80,7 @@ class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         arrowPointAtCenter: PropTypes.bool,
         arrowBounding: PropTypes.object,
         prefixCls: PropTypes.string,
+        guardFocus: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -90,9 +95,13 @@ class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         position: 'bottom',
         prefixCls: cssClasses.PREFIX,
         onClickOutSide: noop,
+        onEscKeyDown: noop,
+        closeOnEsc: true,
+        returnFocusOnClose: true,
+        guardFocus: true,
     };
 
-    renderPopCard() {
+    renderPopCard = ({ initialFocusRef }: { initialFocusRef: RenderContentProps['initialFocusRef'] }) => {
         const { content, contentClassName, prefixCls } = this.props;
         const { direction } = this.context;
         const popCardCls = classNames(
@@ -102,13 +111,20 @@ class Popover extends React.PureComponent<PopoverProps, PopoverState> {
                 [`${prefixCls}-rtl`]: direction === 'rtl',
             }
         );
+        const contentNode = this.renderContentNode({ initialFocusRef, content });
         return (
             <div className={popCardCls}>
-                <div className={`${prefixCls}-content`}>{content}</div>
+                <div className={`${prefixCls}-content`}>{contentNode}</div>
             </div>
         );
     }
 
+    renderContentNode = (props: { content: TooltipProps['content'], initialFocusRef: RenderContentProps['initialFocusRef'] }) => {
+        const { initialFocusRef, content } = props;
+        const contentProps = { initialFocusRef };
+        return !isFunction(content) ? content : content(contentProps);
+    };
+
     render() {
         const {
             children,
@@ -122,7 +138,6 @@ class Popover extends React.PureComponent<PopoverProps, PopoverState> {
             ...attr
         } = this.props;
         let { spacing } = this.props;
-        const popContent = this.renderPopCard();
 
         const arrowProps = {
             position,
@@ -141,11 +156,12 @@ class Popover extends React.PureComponent<PopoverProps, PopoverState> {
 
         return (
             <Tooltip
+                guardFocus
                 {...(attr as any)}
                 trigger={trigger}
                 position={position}
                 style={style}
-                content={popContent}
+                content={this.renderPopCard}
                 prefixCls={prefixCls}
                 spacing={spacing}
                 showArrow={arrow}

package/select/__test__/select.test.js

@@ -504,6 +504,22 @@ describe('Select', () => {
         expect(optionList.at(0).text()).toEqual('Abc');
     });
 
+    it('filter = true,label includes regex special character and key it at first', () => {
+        let props = {
+            filter: true,
+            optionList: [{label: 'label++',value: ''}]
+        };
+        const select = getSelect(props);
+        // click to show input
+        select.find(`.${BASE_CLASS_PREFIX}-select`).simulate('click', {});
+        let inputValue = '+';
+        let event = { target: { value: inputValue } };
+        select.find('input').simulate('change', event);
+        let optionList = select.find(`.${BASE_CLASS_PREFIX}-select-option-list`).children();
+        expect(optionList.length).toEqual(1);
+        expect(optionList.at(0).text()).toEqual('label++');
+    });
+
     it('filter = custom function', () => {
         let customFilter = (sugInput, option) => {
             return option.label == 'Hotsoon';

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

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { Popconfirm, Table } from "@douyinfe/semi-ui";
+
+export default function App() {
+    const [data, setData] = useState([{ a: 1 }]);
+    return (
+        <Table
+            dataSource={data}
+            columns={[
+                {
+                    dataIndex: "a",
+                    title: "a",
+                },
+                {
+                    dataIndex: "b",
+                    render: () => {
+                        return (
+                            <Popconfirm
+                                onConfirm={() => {
+                                    setTimeout(() => {
+                                        setData([]);
+                                    });
+                                }}
+                            >
+                                删除
+                            </Popconfirm>
+                        );
+                    },
+                },
+            ]}
+        />
+    );
+}

package/table/_story/v2/index.js

@@ -3,4 +3,5 @@ export { default as FixedColumnsChange } from './FixedColumnsChange';
 export { default as FixedZIndex } from './FixedZIndex';
 export { default as FixedHeaderMerge } from './FixedHeaderMerge';
 export { default as FixedResizable } from './FixedResizable';
-export { default as FixedExpandedRow } from './FixedExpandedRow';
+export { default as FixedExpandedRow } from './FixedExpandedRow';
+export { default as FixedMemoryLeak  } from './FixedMemoryLeak';

package/toast/_story/toast.stories.js

@@ -96,3 +96,44 @@ export const _Toast = () => (
 _Toast.story = {
   name: 'toast',
 };
+
+const ReachableContext = React.createContext();
+
+/**
+ * test with cypress
+ * @returns 
+ */
+export const useToastDemo = () => {
+  const [toast, contextHolder] = Toast.useToast();
+  const config = {
+      duration: 0,
+      title: 'This is a success message',
+      content: <ReachableContext.Consumer>{name => `ReachableContext: ${name}`}</ReachableContext.Consumer>,
+  };
+
+  return (
+      <ReachableContext.Provider value="Light">
+          <div>
+              <Button
+                onClick={() => {
+                    toast.success(config);
+                    toast.info(config);
+                    toast.error(config);
+                    toast.warning(config);
+                    const id = toast.open(config);
+
+                    setTimeout(() => {
+                      toast.close(id);
+                    }, 100);
+                }}
+              >
+                  Hook Toast
+              </Button>
+          </div>
+          <div data-cy="context-holder">
+            {contextHolder}
+          </div>
+      </ReachableContext.Provider>
+  );
+};
+useToastDemo.storyName = "useToast";