@douyinfe/semi-ui 2.29.0 → 2.30.0-beta.0

package/lib/es/popconfirm/index.js

@@ -1,3 +1,5 @@
+import _omit from "lodash/omit";
+import _isFunction from "lodash/isFunction";
 import _get from "lodash/get";
 import _noop from "lodash/noop";
 
@@ -40,12 +42,74 @@ export default class Popconfirm extends BaseComponent {
 
     this.stopImmediatePropagation = e => e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation();
 
+    this.renderConfirmPopCard = _ref => {
+      let {
+        initialFocusRef
+      } = _ref;
+      const {
+        content,
+        title,
+        className,
+        style,
+        cancelType,
+        icon,
+        prefixCls
+      } = this.props;
+      const {
+        direction
+      } = this.context;
+      const popCardCls = cls(prefixCls, className, {
+        [`${prefixCls}-rtl`]: direction === 'rtl'
+      });
+      const showTitle = title !== null && typeof title !== 'undefined';
+      const showContent = !(content === null || typeof content === 'undefined');
+      return (
+        /*#__PURE__*/
+
+        /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */
+        React.createElement("div", {
+          className: popCardCls,
+          onClick: this.stopImmediatePropagation,
+          style: style
+        }, /*#__PURE__*/React.createElement("div", {
+          className: `${prefixCls}-inner`
+        }, /*#__PURE__*/React.createElement("div", {
+          className: `${prefixCls}-header`
+        }, /*#__PURE__*/React.createElement("i", {
+          className: `${prefixCls}-header-icon`,
+          "x-semi-prop": "icon"
+        }, /*#__PURE__*/React.isValidElement(icon) ? icon : null), /*#__PURE__*/React.createElement("div", {
+          className: `${prefixCls}-header-body`
+        }, showTitle ? /*#__PURE__*/React.createElement("div", {
+          className: `${prefixCls}-header-title`,
+          "x-semi-prop": "title"
+        }, title) : null), /*#__PURE__*/React.createElement(Button, {
+          className: `${prefixCls}-btn-close`,
+          icon: /*#__PURE__*/React.createElement(IconClose, null),
+          size: "small",
+          theme: 'borderless',
+          type: cancelType,
+          onClick: this.handleCancel
+        })), showContent ? /*#__PURE__*/React.createElement("div", {
+          className: `${prefixCls}-body`,
+          "x-semi-prop": "content"
+        }, _isFunction(content) ? content({
+          initialFocusRef
+        }) : content) : null, /*#__PURE__*/React.createElement("div", {
+          className: `${prefixCls}-footer`,
+          ref: this.footerRef
+        }, this.renderControls())))
+      );
+    };
+
     this.state = {
       cancelLoading: false,
       confirmLoading: false,
       visible: props.defaultVisible || false
     };
     this.foundation = new PopconfirmFoundation(this.adapter);
+    this.footerRef = /*#__PURE__*/React.createRef();
+    this.popoverRef = /*#__PURE__*/React.createRef();
   }
 
   static getDerivedStateFromProps(props, state) {
@@ -75,7 +139,28 @@ export default class Popconfirm extends BaseComponent {
       notifyConfirm: e => this.props.onConfirm(e),
       notifyCancel: e => this.props.onCancel(e),
       notifyVisibleChange: visible => this.props.onVisibleChange(visible),
-      notifyClickOutSide: e => this.props.onClickOutSide(e)
+      notifyClickOutSide: e => this.props.onClickOutSide(e),
+      focusCancelButton: () => {
+        var _a, _b;
+
+        const buttonNode = (_b = (_a = this.footerRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.querySelector('[data-type=cancel]');
+        buttonNode === null || buttonNode === void 0 ? void 0 : buttonNode.focus({
+          preventScroll: true
+        });
+      },
+      focusOkButton: () => {
+        var _a, _b;
+
+        const buttonNode = (_b = (_a = this.footerRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.querySelector('[data-type=ok]');
+        buttonNode === null || buttonNode === void 0 ? void 0 : buttonNode.focus({
+          preventScroll: true
+        });
+      },
+      focusPrevFocusElement: () => {
+        var _a;
+
+        (_a = this.popoverRef.current) === null || _a === void 0 ? void 0 : _a.focusTrigger();
+      }
     });
   }
 
@@ -95,68 +180,17 @@ export default class Popconfirm extends BaseComponent {
     return /*#__PURE__*/React.createElement(LocaleConsumer, {
       componentName: "Popconfirm"
     }, (locale, localeCode) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, Object.assign({
+      "data-type": "cancel",
       type: cancelType,
       onClick: this.handleCancel,
       loading: cancelLoading
-    }, cancelButtonProps), cancelText || _get(locale, 'cancel')), /*#__PURE__*/React.createElement(Button, Object.assign({
+    }, _omit(cancelButtonProps, 'autoFocus')), cancelText || _get(locale, 'cancel')), /*#__PURE__*/React.createElement(Button, Object.assign({
+      "data-type": "ok",
       type: okType,
       theme: "solid",
       onClick: this.handleConfirm,
       loading: confirmLoading
-    }, okButtonProps), okText || _get(locale, 'confirm'))));
-  }
-
-  renderConfirmPopCard() {
-    const {
-      content,
-      title,
-      className,
-      style,
-      cancelType,
-      icon,
-      prefixCls
-    } = this.props;
-    const {
-      direction
-    } = this.context;
-    const popCardCls = cls(prefixCls, className, {
-      [`${prefixCls}-rtl`]: direction === 'rtl'
-    });
-    const showTitle = title !== null && typeof title !== 'undefined';
-    const showContent = !(content === null || typeof content === 'undefined');
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-      React.createElement("div", {
-        className: popCardCls,
-        onClick: this.stopImmediatePropagation,
-        style: style
-      }, /*#__PURE__*/React.createElement("div", {
-        className: `${prefixCls}-inner`
-      }, /*#__PURE__*/React.createElement("div", {
-        className: `${prefixCls}-header`
-      }, /*#__PURE__*/React.createElement("i", {
-        className: `${prefixCls}-header-icon`,
-        "x-semi-prop": "icon"
-      }, /*#__PURE__*/React.isValidElement(icon) ? icon : null), /*#__PURE__*/React.createElement("div", {
-        className: `${prefixCls}-header-body`
-      }, showTitle ? /*#__PURE__*/React.createElement("div", {
-        className: `${prefixCls}-header-title`,
-        "x-semi-prop": "title"
-      }, title) : null), /*#__PURE__*/React.createElement(Button, {
-        className: `${prefixCls}-btn-close`,
-        icon: /*#__PURE__*/React.createElement(IconClose, null),
-        size: "small",
-        theme: 'borderless',
-        type: cancelType,
-        onClick: this.handleCancel
-      })), showContent ? /*#__PURE__*/React.createElement("div", {
-        className: `${prefixCls}-body`,
-        "x-semi-prop": "content"
-      }, content) : null, /*#__PURE__*/React.createElement("div", {
-        className: `${prefixCls}-footer`
-      }, this.renderControls())))
-    );
+    }, _omit(okButtonProps, 'autoFocus')), okText || _get(locale, 'confirm'))));
   }
 
   render() {
@@ -184,7 +218,6 @@ export default class Popconfirm extends BaseComponent {
     const {
       visible
     } = this.state;
-    const popContent = this.renderConfirmPopCard();
     const popProps = {
       onVisibleChange: this.handleVisibleChange,
       className: cssClasses.POPOVER,
@@ -195,8 +228,10 @@ export default class Popconfirm extends BaseComponent {
       popProps.trigger = 'custom';
     }
 
-    return /*#__PURE__*/React.createElement(Popover, Object.assign({}, attrs, {
-      content: popContent,
+    return /*#__PURE__*/React.createElement(Popover, Object.assign({
+      ref: this.popoverRef
+    }, attrs, {
+      content: this.renderConfirmPopCard,
       visible: visible,
       position: position
     }, popProps), children);
@@ -207,7 +242,7 @@ Popconfirm.contextType = ConfigContext;
 Popconfirm.propTypes = {
   motion: PropTypes.oneOfType([PropTypes.bool, PropTypes.func, PropTypes.object]),
   disabled: PropTypes.bool,
-  content: PropTypes.any,
+  content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   title: PropTypes.any,
   prefixCls: PropTypes.string,
   className: PropTypes.string,

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ContextValue } from '../configProvider/context';
-import { ArrowBounding, Position, TooltipProps, Trigger, RenderContentProps } from '../tooltip/index';
+import Tooltip, { ArrowBounding, Position, TooltipProps, Trigger, RenderContentProps } from '../tooltip/index';
 import '@douyinfe/semi-foundation/lib/es/popover/popover.css';
 import { BaseProps } from '../_base/baseComponent';
 import type { ArrowProps } from './Arrow';
@@ -101,6 +101,12 @@ declare class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         disableFocusListener: boolean;
     };
     context: ContextValue;
+    tooltipRef: React.RefObject<Tooltip | null>;
+    constructor(props: PopoverProps);
+    /**
+     * focus on tooltip trigger
+     */
+    focusTrigger: () => void;
     renderPopCard: ({ initialFocusRef }: {
         initialFocusRef: RenderContentProps['initialFocusRef'];
     }) => JSX.Element;

package/lib/es/popover/index.js

@@ -24,8 +24,17 @@ const positionSet = strings.POSITION_SET;
 const triggerSet = strings.TRIGGER_SET;
 
 class Popover extends React.PureComponent {
-  constructor() {
-    super(...arguments);
+  constructor(props) {
+    super(props);
+    /**
+     * focus on tooltip trigger
+     */
+
+    this.focusTrigger = () => {
+      var _a;
+
+      (_a = this.tooltipRef.current) === null || _a === void 0 ? void 0 : _a.focusTrigger();
+    };
 
     this.renderPopCard = _ref => {
       let {
@@ -63,6 +72,8 @@ class Popover extends React.PureComponent {
       };
       return !_isFunction(content) ? content : content(contentProps);
     };
+
+    this.tooltipRef = /*#__PURE__*/React.createRef();
   }
 
   render() {
@@ -96,7 +107,8 @@ class Popover extends React.PureComponent {
 
     const role = trigger === 'click' || trigger === 'custom' ? 'dialog' : 'tooltip';
     return /*#__PURE__*/React.createElement(Tooltip, Object.assign({
-      guardFocus: true
+      guardFocus: true,
+      ref: this.tooltipRef
     }, attr, {
       trigger: trigger,
       position: position,

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

@@ -15,10 +15,10 @@ export interface ArrowBounding {
     width?: number;
     height?: number;
 }
-export interface RenderContentProps {
-    initialFocusRef?: React.RefObject<HTMLElement>;
+export interface RenderContentProps<T = HTMLElement> {
+    initialFocusRef?: React.RefObject<T>;
 }
-export declare type RenderContent = (props: RenderContentProps) => React.ReactNode;
+export declare type RenderContent<T = HTMLElement> = (props: RenderContentProps<T>) => React.ReactNode;
 export interface TooltipProps extends BaseProps {
     children?: React.ReactNode;
     motion?: boolean;
@@ -172,6 +172,10 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     get adapter(): TooltipAdapter<TooltipProps, TooltipState>;
     componentDidMount(): void;
     componentWillUnmount(): void;
+    /**
+     * focus on tooltip trigger
+     */
+    focusTrigger(): void;
     isSpecial: (elem: React.ReactNode | HTMLElement | any) => boolean | "disabled" | "loading";
     didLeave: () => void;
     /** for transition - end */

package/lib/es/tooltip/index.js

@@ -226,6 +226,8 @@ export default class Tooltip extends BaseComponent {
           zIndex
         }
       }, /*#__PURE__*/React.createElement("div", {
+        // listen keyboard event, don't move tabIndex -1
+        tabIndex: -1,
         className: `${BASE_CLASS_PREFIX}-portal-inner`,
         style: portalInnerStyle,
         ref: this.setContainerEl,
@@ -579,6 +581,14 @@ export default class Tooltip extends BaseComponent {
     this.mounted = false;
     this.foundation.destroy();
   }
+  /**
+   * focus on tooltip trigger
+   */
+
+
+  focusTrigger() {
+    this.foundation.focusTrigger();
+  }
   /** for transition - end */
 
 

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.29.0",
+    "version": "2.30.0-beta.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
     "typings": "lib/es/index.d.ts",
     "scripts": {
         "clean": "rimraf dist lib",
-        "build:lib": "node ./scripts/compileLib.js",
+        "build:lib": "export NODE_OPTIONS=--no-experimental-fetch && node ./scripts/compileLib.js",
         "build:js": "node scripts/compileDist.js",
         "build:css": "node scripts/compileScss.js",
         "prepublishOnly": "npm run clean && npm run build:lib && npm run build:js && npm run build:css"
@@ -17,12 +17,12 @@
         "lib/*"
     ],
     "dependencies": {
-        "@douyinfe/semi-animation": "2.29.0",
-        "@douyinfe/semi-animation-react": "2.29.0",
-        "@douyinfe/semi-foundation": "2.29.0",
-        "@douyinfe/semi-icons": "2.29.0",
-        "@douyinfe/semi-illustrations": "2.29.0",
-        "@douyinfe/semi-theme-default": "2.29.0",
+        "@douyinfe/semi-animation": "2.30.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.30.0-beta.0",
+        "@douyinfe/semi-foundation": "2.30.0-beta.0",
+        "@douyinfe/semi-icons": "2.30.0-beta.0",
+        "@douyinfe/semi-illustrations": "2.30.0-beta.0",
+        "@douyinfe/semi-theme-default": "2.30.0-beta.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -69,7 +69,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "cf2c6529fb778787c2d3f6cb826e64af358a5215",
+    "gitHead": "330e8cf3c8bced4dee7d5c77c7e3931a0f40376b",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",