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

package/lib/es/tooltip/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Event from '@douyinfe/semi-foundation/lib/es/utils/Event';
 import { ArrayElement } from '@douyinfe/semi-foundation/lib/es/utils/type';
-import { TooltipAdapter, Position } from '@douyinfe/semi-foundation/lib/es/tooltip/foundation';
+import TooltipFoundation, { TooltipAdapter, Position } from '@douyinfe/semi-foundation/lib/es/tooltip/foundation';
 import { strings } from '@douyinfe/semi-foundation/lib/es/tooltip/constants';
 import '@douyinfe/semi-foundation/lib/es/tooltip/tooltip.css';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
@@ -15,6 +15,10 @@ export interface ArrowBounding {
     width?: number;
     height?: number;
 }
+export interface RenderContentProps {
+    initialFocusRef?: React.RefObject<HTMLElement>;
+}
+export declare type RenderContent = (props: RenderContentProps) => React.ReactNode;
 export interface TooltipProps extends BaseProps {
     children?: React.ReactNode;
     motion?: Motion;
@@ -28,7 +32,7 @@ export interface TooltipProps extends BaseProps {
     clickToHide?: boolean;
     visible?: boolean;
     style?: React.CSSProperties;
-    content?: React.ReactNode;
+    content?: React.ReactNode | RenderContent;
     prefixCls?: string;
     onVisibleChange?: (visible: boolean) => void;
     onClickOutSide?: (e: React.MouseEvent) => void;
@@ -44,6 +48,10 @@ export interface TooltipProps extends BaseProps {
     stopPropagation?: boolean;
     clickTriggerToHide?: boolean;
     wrapperClassName?: string;
+    closeOnEsc?: boolean;
+    guardFocus?: boolean;
+    returnFocusOnClose?: boolean;
+    onEscKeyDown?: (e: React.KeyboardEvent) => void;
 }
 interface TooltipState {
     visible: boolean;
@@ -97,6 +105,8 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         stopPropagation: PropTypes.Requireable<boolean>;
         role: PropTypes.Requireable<string>;
         wrapWhenSpecial: PropTypes.Requireable<boolean>;
+        guardFocus: PropTypes.Requireable<boolean>;
+        returnFocusOnClose: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         arrowBounding: {
@@ -121,10 +131,15 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         showArrow: boolean;
         wrapWhenSpecial: boolean;
         zIndex: 1060;
+        closeOnEsc: boolean;
+        guardFocus: boolean;
+        returnFocusOnClose: boolean;
+        onEscKeyDown: (...args: any[]) => void;
     };
     eventManager: Event;
     triggerEl: React.RefObject<unknown>;
-    containerEl: React.RefObject<unknown>;
+    containerEl: React.RefObject<HTMLDivElement>;
+    initialFocusRef: React.RefObject<HTMLElement>;
     clickOutsideHandler: any;
     resizeHandler: any;
     isWrapped: boolean;
@@ -132,6 +147,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     scrollHandler: any;
     getPopupContainer: () => HTMLElement;
     containerPosition: string;
+    foundation: TooltipFoundation;
     constructor(props: TooltipProps);
     setContainerEl: (node: HTMLDivElement) => {
         current: HTMLDivElement;
@@ -142,10 +158,12 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     isSpecial: (elem: React.ReactNode | HTMLElement | any) => boolean | "disabled" | "loading";
     didLeave: () => void;
     /** for transition - end */
-    rePosition(): any;
+    rePosition(): Record<string, string | number>;
     componentDidUpdate(prevProps: TooltipProps, prevState: TooltipState): void;
     renderIcon: () => any;
     handlePortalInnerClick: (e: React.MouseEvent) => void;
+    handlePortalInnerKeyDown: (e: React.KeyboardEvent) => void;
+    renderContentNode: (content: TooltipProps['content']) => React.ReactNode;
     renderPortal: () => JSX.Element;
     wrapSpan: (elem: React.ReactNode | React.ReactElement) => JSX.Element;
     mergeEvents: (rawEvents: Record<string, any>, events: Record<string, any>) => {};

package/lib/es/tooltip/index.js

@@ -1,3 +1,4 @@
+import _isFunction from "lodash/isFunction";
 import _isEmpty from "lodash/isEmpty";
 import _each from "lodash/each";
 import _omit from "lodash/omit";
@@ -37,7 +38,7 @@ import { getUuidShort } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
 import '@douyinfe/semi-foundation/lib/es/tooltip/tooltip.css';
 import BaseComponent from '../_base/baseComponent';
 import { isHTMLElement } from '../_base/reactUtils';
-import { stopPropagation } from '../_utils';
+import { getActiveElement, getFocusableElements, stopPropagation } from '../_utils';
 import Portal from '../_portal/index';
 import ConfigContext from '../configProvider/context';
 import TriangleArrow from './TriangleArrow';
@@ -137,6 +138,17 @@ export default class Tooltip extends BaseComponent {
       }
     };
 
+    this.handlePortalInnerKeyDown = e => {
+      this.foundation.handleContainerKeydown(e);
+    };
+
+    this.renderContentNode = content => {
+      const contentProps = {
+        initialFocusRef: this.initialFocusRef
+      };
+      return !_isFunction(content) ? content : content(contentProps);
+    };
+
     this.renderPortal = () => {
       const {
         containerStyle = {},
@@ -156,6 +168,7 @@ export default class Tooltip extends BaseComponent {
         role,
         zIndex
       } = this.props;
+      const contentNode = this.renderContentNode(content);
       const {
         className: propClassName
       } = this.props;
@@ -193,7 +206,7 @@ export default class Tooltip extends BaseComponent {
           role: role,
           "x-placement": placement,
           id: id
-        }), content, icon);
+        }), contentNode, icon);
       } : null) : /*#__PURE__*/React.createElement("div", _Object$assign({
         className: className
       }, portalEventSet, {
@@ -201,7 +214,7 @@ export default class Tooltip extends BaseComponent {
         style: _Object$assign({
           visibility: motion ? undefined : 'visible'
         }, style)
-      }), content, icon);
+      }), contentNode, icon);
       return /*#__PURE__*/React.createElement(Portal, {
         getPopupContainer: this.props.getPopupContainer,
         style: {
@@ -211,7 +224,8 @@ export default class Tooltip extends BaseComponent {
         className: "".concat(BASE_CLASS_PREFIX, "-portal-inner"),
         style: portalInnerStyle,
         ref: this.setContainerEl,
-        onClick: this.handlePortalInnerClick
+        onClick: this.handlePortalInnerClick,
+        onKeyDown: this.handlePortalInnerKeyDown
       }, inner));
     };
 
@@ -279,6 +293,7 @@ export default class Tooltip extends BaseComponent {
     this.eventManager = new Event();
     this.triggerEl = /*#__PURE__*/React.createRef();
     this.containerEl = /*#__PURE__*/React.createRef();
+    this.initialFocusRef = /*#__PURE__*/React.createRef();
     this.clickOutsideHandler = null;
     this.resizeHandler = null;
     this.isWrapped = false; // Identifies whether a span element is wrapped
@@ -330,7 +345,8 @@ export default class Tooltip extends BaseComponent {
         mouseOver: 'onMouseOver',
         click: 'onClick',
         focus: 'onFocus',
-        blur: 'onBlur'
+        blur: 'onBlur',
+        keydown: 'onKeyDown'
       }),
       registerTriggerEvent: triggerEventSet => {
         this.setState({
@@ -348,14 +364,8 @@ export default class Tooltip extends BaseComponent {
         // eslint-disable-next-line
         // It may be a React component or an html element
         // There is no guarantee that triggerE l.current can get the real dom, so call findDOMNode to ensure that you can get the real dom
-        let triggerDOM = this.triggerEl.current;
-
-        if (!isHTMLElement(this.triggerEl.current)) {
-          const realDomNode = ReactDOM.findDOMNode(this.triggerEl.current);
-          this.triggerEl.current = realDomNode;
-          triggerDOM = realDomNode;
-        }
-
+        const triggerDOM = this.adapter.getTriggerNode();
+        this.triggerEl.current = triggerDOM;
         return triggerDOM && triggerDOM.getBoundingClientRect();
       },
       // Gets the outer size of the specified container
@@ -422,7 +432,7 @@ export default class Tooltip extends BaseComponent {
           willUpdateStates.visible = visible;
         }
 
-        this.setState(willUpdateStates, () => {
+        this.mounted && this.setState(willUpdateStates, () => {
           cb();
         });
       },
@@ -492,12 +502,7 @@ export default class Tooltip extends BaseComponent {
             return false;
           }
 
-          let triggerDOM = this.triggerEl.current;
-
-          if (!isHTMLElement(this.triggerEl.current)) {
-            triggerDOM = ReactDOM.findDOMNode(this.triggerEl.current);
-          }
-
+          const triggerDOM = this.adapter.getTriggerNode();
           const isRelativeScroll = e.target.contains(triggerDOM);
 
           if (isRelativeScroll) {
@@ -528,7 +533,33 @@ export default class Tooltip extends BaseComponent {
           this.containerPosition = position;
         }
       },
-      getContainerPosition: () => this.containerPosition
+      getContainerPosition: () => this.containerPosition,
+      getContainer: () => this.containerEl && this.containerEl.current,
+      getTriggerNode: () => {
+        let triggerDOM = this.triggerEl.current;
+
+        if (!isHTMLElement(this.triggerEl.current)) {
+          triggerDOM = ReactDOM.findDOMNode(this.triggerEl.current);
+        }
+
+        return triggerDOM;
+      },
+      getFocusableElements: node => {
+        return getFocusableElements(node);
+      },
+      getActiveElement: () => {
+        return getActiveElement();
+      },
+      setInitialFocus: () => {
+        const focusRefNode = _get(this, 'initialFocusRef.current');
+
+        if (focusRefNode && 'focus' in focusRefNode) {
+          focusRefNode.focus();
+        }
+      },
+      notifyEscKeydown: event => {
+        this.props.onEscKeyDown(event);
+      }
     });
   }
 
@@ -570,7 +601,8 @@ export default class Tooltip extends BaseComponent {
     } = this.state;
     const {
       wrapWhenSpecial,
-      role
+      role,
+      trigger
     } = this.props;
     let {
       children
@@ -630,7 +662,8 @@ export default class Tooltip extends BaseComponent {
         } else if (ref && typeof ref === 'object') {
           ref.current = node;
         }
-      }
+      },
+      tabIndex: trigger === 'hover' ? 0 : undefined
     })); // 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
     // So if the user adds ref to the content, you need to use callback ref: https://github.com/facebook/react/issues/8873
 
@@ -655,7 +688,7 @@ Tooltip.propTypes = {
   clickTriggerToHide: PropTypes.bool,
   visible: PropTypes.bool,
   style: PropTypes.object,
-  content: PropTypes.node,
+  content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   prefixCls: PropTypes.string,
   onVisibleChange: PropTypes.func,
   onClickOutSide: PropTypes.func,
@@ -669,8 +702,9 @@ Tooltip.propTypes = {
   stopPropagation: PropTypes.bool,
   // private
   role: PropTypes.string,
-  wrapWhenSpecial: PropTypes.bool // when trigger has special status such as "disabled" or "loading", wrap span
-
+  wrapWhenSpecial: PropTypes.bool,
+  guardFocus: PropTypes.bool,
+  returnFocusOnClose: PropTypes.bool
 };
 Tooltip.defaultProps = {
   arrowBounding: numbers.ARROW_BOUNDING,
@@ -689,5 +723,9 @@ Tooltip.defaultProps = {
   spacing: numbers.SPACING,
   showArrow: true,
   wrapWhenSpecial: true,
-  zIndex: numbers.DEFAULT_Z_INDEX
+  zIndex: numbers.DEFAULT_Z_INDEX,
+  closeOnEsc: false,
+  guardFocus: false,
+  returnFocusOnClose: false,
+  onEscKeyDown: _noop
 };

package/lib/es/tree/nodeList.js

@@ -22,6 +22,7 @@ export default class NodeList extends PureComponent {
     super(props);
 
     this.onMotionEnd = () => {
+      typeof this.props.onMotionEnd === 'function' && this.props.onMotionEnd();
       this.setState({
         transitionNodes: []
       });

package/lib/es/treeSelect/index.js

@@ -901,6 +901,10 @@ class TreeSelect extends BaseComponent {
     this.clickOutsideHandler = null;
     this.foundation = new TreeSelectFoundation(this.adapter);
     this.treeSelectID = _sliceInstanceProperty(_context2 = Math.random().toString(36)).call(_context2, 2);
+
+    this.onMotionEnd = () => {
+      this.adapter.rePositionDropdown();
+    };
   } // eslint-disable-next-line max-lines-per-function
 
 

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-beta.0",
+    "version": "2.8.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.7.0-beta.0",
-        "@douyinfe/semi-animation-react": "2.7.0-beta.0",
-        "@douyinfe/semi-foundation": "2.7.0-beta.0",
-        "@douyinfe/semi-icons": "2.7.0-beta.0",
-        "@douyinfe/semi-illustrations": "2.7.0-beta.0",
-        "@douyinfe/semi-theme-default": "2.7.0-beta.0",
+        "@douyinfe/semi-animation": "2.8.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.8.0-beta.0",
+        "@douyinfe/semi-foundation": "2.8.0-beta.0",
+        "@douyinfe/semi-icons": "2.8.0-beta.0",
+        "@douyinfe/semi-illustrations": "2.8.0-beta.0",
+        "@douyinfe/semi-theme-default": "2.8.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": "51cc4f6fa52f3275728d2112a98446ba54619c5b",
+    "gitHead": "05140034ad843d6a8d3a4a205e71f02b429f78fe",
     "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-beta.0",
+        "@douyinfe/semi-scss-compile": "2.8.0-beta.0",
         "@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";