tdesign-react 0.19.0 → 0.20.2

package/es/popconfirm/style/index.css

@@ -266,9 +266,6 @@
 .t-popconfirm {
   border-radius: 3px;
 }
-.t-popconfirm--position-hidden {
-  display: none;
-}
 .t-popconfirm__content {
   position: relative;
   padding: 12px 8px;
@@ -315,70 +312,3 @@
 .t-popconfirm__buttons > span:last-child {
   margin-right: 0;
 }
-.t-popconfirm__arrow {
-  position: absolute;
-  display: block;
-  width: 8px;
-  height: 8px;
-  border-style: solid;
-  -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
-  border-width: 4px;
-}
-.t-popconfirm--position-bottomRight .t-popconfirm__arrow,
-.t-popconfirm--position-bottom .t-popconfirm__arrow,
-.t-popconfirm--position-bottom-left .t-popconfirm__arrow {
-  top: -4px;
-  border-color: #fff transparent transparent #fff;
-  -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06);
-          box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06);
-}
-.t-popconfirm--position-topRight .t-popconfirm__arrow,
-.t-popconfirm--position-top .t-popconfirm__arrow,
-.t-popconfirm--position-top-left .t-popconfirm__arrow {
-  bottom: -4px;
-  border-color: transparent #fff #fff transparent;
-  -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.06);
-          box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.06);
-  right: 24px;
-}
-.t-popconfirm--position-bottomRight .t-popconfirm__arrow,
-.t-popconfirm--position-topRight .t-popconfirm__arrow {
-  right: 24px;
-}
-.t-popconfirm--position-bottom .t-popconfirm__arrow,
-.t-popconfirm--position-top .t-popconfirm__arrow {
-  left: 50%;
-  -webkit-transform: translateX(-50%) rotate(45deg);
-          transform: translateX(-50%) rotate(45deg);
-}
-.t-popconfirm--position-bottom-left .t-popconfirm__arrow,
-.t-popconfirm--position-top-left .t-popconfirm__arrow {
-  left: 24px;
-}
-.t-popconfirm--position-left-top .t-popconfirm__arrow,
-.t-popconfirm--position-left .t-popconfirm__arrow,
-.t-popconfirm--position-left-bottom .t-popconfirm__arrow {
-  right: -4px;
-  border-color: #fff #fff transparent transparent;
-}
-.t-popconfirm--position-right-top .t-popconfirm__arrow,
-.t-popconfirm--position-right .t-popconfirm__arrow,
-.t-popconfirm--position-right-bottom .t-popconfirm__arrow {
-  border-color: transparent transparent #fff #fff;
-  left: -4px;
-}
-.t-popconfirm--position-left-top .t-popconfirm__arrow,
-.t-popconfirm--position-right-top .t-popconfirm__arrow {
-  top: 24px;
-}
-.t-popconfirm--position-left .t-popconfirm__arrow,
-.t-popconfirm--position-right .t-popconfirm__arrow {
-  top: 50%;
-  -webkit-transform: translateY(-50%) rotate(45deg);
-          transform: translateY(-50%) rotate(45deg);
-}
-.t-popconfirm--position-left-bottom .t-popconfirm__arrow,
-.t-popconfirm--position-right-bottom .t-popconfirm__arrow {
-  bottom: 24px;
-}

package/es/popconfirm/style/index.js

@@ -1,5 +1,5 @@
 /**
- * tdesign v0.19.0
+ * tdesign v0.20.2
  * (c) 2021 tdesign
  * @license MIT
  */

package/es/popconfirm/type.d.ts

@@ -1,6 +1,6 @@
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-01 14:46:40
+ * updated at 2021-12-12 18:01:23
  * */
 import { ButtonProps } from '../button';
 import { PopupProps } from '../popup';

package/es/popconfirm/type.js

@@ -1,5 +1,5 @@
 /**
- * tdesign v0.19.0
+ * tdesign v0.20.2
  * (c) 2021 tdesign
  * @license MIT
  */

package/es/popup/Popup.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { StyledProps } from '../common';
 import { TdPopupProps } from './type';
 export interface PopupProps extends TdPopupProps, StyledProps {
+    expandAnimation?: boolean;
 }
 declare const Popup: React.ForwardRefExoticComponent<PopupProps & React.RefAttributes<HTMLDivElement>>;
 export default Popup;

package/es/popup/Popup.js

@@ -1,12 +1,13 @@
 /**
- * tdesign v0.19.0
+ * tdesign v0.20.2
  * (c) 2021 tdesign
  * @license MIT
  */
 
-import { _ as _defineProperty } from '../_chunks/dep-53c6c586.js';
-import { _ as _slicedToArray } from '../_chunks/dep-fff59b5a.js';
+import { _ as _defineProperty } from '../_chunks/dep-2e97cc0d.js';
+import { _ as _slicedToArray } from '../_chunks/dep-85854991.js';
 import React__default, { forwardRef, useState, useRef, useMemo, useImperativeHandle, isValidElement, cloneElement, useEffect } from 'react';
+import { CSSTransition } from 'react-transition-group';
 import classNames from 'classnames';
 import { usePopper } from 'react-popper';
 import useDefault from '../_util/useDefault.js';
@@ -14,17 +15,18 @@ import useConfig from '../_util/useConfig.js';
 import composeRefs from '../_util/composeRefs.js';
 import usePrevious from '../_util/usePrevious.js';
 import Portal from './Portal.js';
-import useTriggerProps from './useTriggerProps.js';
-import '../_chunks/dep-4c3606c3.js';
+import useTriggerProps from './hooks/useTriggerProps.js';
+import usePopupCssTransition from './hooks/usePopupCssTransition.js';
+import '../_chunks/dep-38c06164.js';
 import '../_util/noop.js';
 import '../config-provider/ConfigContext.js';
 import '../locale/zh_CN.js';
 import 'react-dom';
 import '../_util/useClickOutside.js';
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var placementMap = {
   top: "top",
   "top-left": "top-start",
@@ -62,7 +64,8 @@ var Popup = /*#__PURE__*/forwardRef(function (props, ref) {
       _props$defaultVisible = props.defaultVisible,
       defaultVisible = _props$defaultVisible === void 0 ? false : _props$defaultVisible,
       zIndex = props.zIndex,
-      onVisibleChange = props.onVisibleChange;
+      onVisibleChange = props.onVisibleChange,
+      expandAnimation = props.expandAnimation;
 
   var _useConfig = useConfig(),
       classPrefix = _useConfig.classPrefix;
@@ -148,29 +151,11 @@ var Popup = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: composeRefs(triggerNodeTemp.ref, setTriggerRef),
     className: classNames(disabledClassName, triggerNodeTemp.props.className)
   }, triggerProps));
-  var portal = null;
-
-  if (visible || overlayRef) {
-    portal = /* @__PURE__ */React__default.createElement(Portal, {
-      attach: attach
-    }, /* @__PURE__ */React__default.createElement("div", _objectSpread(_objectSpread({
-      ref: composeRefs(setOverlayRef, ref),
-      style: styles.popper,
-      className: classNames("".concat(classPrefix, "-popup"), "".concat(classPrefix, "-popup_animation-enter-active"), visible ? "".concat(classPrefix, "-popup_animation-leave") : "".concat(classPrefix, "-popup_animation-leave-to"))
-    }, attributes.popper), popupProps), /* @__PURE__ */React__default.createElement("div", {
-      className: classNames("".concat(classPrefix, "-popup-content"), overlayClassName, _defineProperty({}, "".concat(classPrefix, "-popup-content--arrow"), showArrow)),
-      style: overlayVisibleStyle,
-      ref: contentRef
-    }, showArrow ? /* @__PURE__ */React__default.createElement("div", {
-      style: styles.arrow,
-      className: "".concat(classPrefix, "-popup__arrow")
-    }) : null, content)));
-  }
-
-  if (!visible && destroyOnClose) {
-    portal = null;
-  }
-
+  var cssTransitionState = usePopupCssTransition({
+    contentRef: contentRef,
+    classPrefix: classPrefix,
+    expandAnimation: expandAnimation
+  });
   useEffect(function () {
     if ((visible || firstUpdate) && update) {
       update();
@@ -187,8 +172,26 @@ var Popup = /*#__PURE__*/forwardRef(function (props, ref) {
     window.addEventListener("mouseup", removeUpdate);
   };
 
+  var portal = visible || overlayRef ? /* @__PURE__ */React__default.createElement(Portal, {
+    attach: attach
+  }, /* @__PURE__ */React__default.createElement(CSSTransition, _objectSpread({
+    "in": visible,
+    appear: true,
+    unmountOnExit: destroyOnClose
+  }, cssTransitionState.props), /* @__PURE__ */React__default.createElement("div", _objectSpread(_objectSpread({
+    ref: composeRefs(setOverlayRef, ref),
+    style: styles.popper,
+    className: "".concat(classPrefix, "-popup")
+  }, attributes.popper), popupProps), /* @__PURE__ */React__default.createElement("div", {
+    className: classNames("".concat(classPrefix, "-popup__content"), overlayClassName, _defineProperty({}, "".concat(classPrefix, "-popup__content--arrow"), showArrow)),
+    style: overlayVisibleStyle,
+    ref: contentRef
+  }, showArrow ? /* @__PURE__ */React__default.createElement("div", {
+    style: styles.arrow,
+    className: "".concat(classPrefix, "-popup__arrow")
+  }) : null, content)))) : null;
   return /* @__PURE__ */React__default.createElement("div", {
-    className: classNames("".concat(classPrefix, "-popup-reference"), className),
+    className: classNames("".concat(classPrefix, "-popup__reference"), className),
     onMouseDown: handlePopupWrapperMouseDown,
     style: style
   }, triggerNode, portal);

package/es/popup/Popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.js","sources":["../../src/popup/Popup.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  CSSProperties,\n  useState,\n  useEffect,\n  cloneElement,\n  isValidElement,\n  useMemo,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport classNames from 'classnames';\nimport { usePopper } from 'react-popper';\nimport Popper from '@popperjs/core';\nimport { StyledProps } from '../common';\nimport useDefault from '../_util/useDefault';\nimport useConfig from '../_util/useConfig';\nimport composeRefs from '../_util/composeRefs';\nimport usePrevious from '../_util/usePrevious';\nimport { TdPopupProps } from './type';\nimport Portal from './Portal';\nimport useTriggerProps from './useTriggerProps';\n\nexport interface PopupProps extends TdPopupProps, StyledProps {}\n/**\n * 修复参数对齐popper.js 组件展示方向，与TD组件定义有差异\n */\ntype PlacementDictionary = {\n  [Key in TdPopupProps['placement']]: Popper.Placement;\n};\n\nconst placementMap: PlacementDictionary = {\n  top: 'top',\n  'top-left': 'top-start',\n  'top-right': 'top-end',\n  bottom: 'bottom',\n  'bottom-left': 'bottom-start',\n  'bottom-right': 'bottom-end',\n  left: 'left',\n  'left-top': 'left-start',\n  'left-bottom': 'left-end',\n  right: 'right',\n  'right-top': 'right-start',\n  'right-bottom': 'right-end',\n};\n\nconst Popup = forwardRef<HTMLDivElement, PopupProps>((props, ref) => {\n  const {\n    trigger = 'hover',\n    content = null,\n    placement = 'top',\n    attach,\n    showArrow = false,\n    destroyOnClose = false,\n    className,\n    style,\n    overlayClassName,\n    overlayStyle,\n    triggerElement,\n    children = triggerElement,\n    disabled,\n    defaultVisible = false,\n    zIndex,\n    onVisibleChange,\n  } = props;\n  const { classPrefix } = useConfig();\n  const [visible, setVisible] = useDefault(props.visible, defaultVisible, onVisibleChange);\n  const preVisible = usePrevious(visible);\n\n  // refs\n  const [triggerRef, setTriggerRef] = useState<HTMLElement>(null);\n  const [overlayRef, setOverlayRef] = useState<HTMLDivElement>(null);\n  const contentRef = useRef(null);\n\n  // https://popper.js.org/react-popper/v2/faq/\n  const [firstUpdate, setFirstUpdate] = useState<boolean>(false);\n  const onPopperFirstUpdate = useMemo(\n    () => () => {\n      setFirstUpdate(true);\n    },\n    [],\n  );\n\n  const { styles, attributes, update } = usePopper(triggerRef, overlayRef, {\n    placement: placementMap[placement],\n    onFirstUpdate: onPopperFirstUpdate,\n  });\n\n  useImperativeHandle(ref, (): any => ({\n    setVisible,\n    getContentRef: contentRef?.current,\n  }));\n\n  const defaulstStyles = useMemo(() => {\n    if (triggerRef && typeof overlayStyle === 'function') return { ...overlayStyle(triggerRef), zIndex };\n    return { ...overlayStyle, zIndex };\n  }, [overlayStyle, zIndex, triggerRef]);\n  // 设置 style 决定展示与隐藏\n  const overlayVisibleStyle: CSSProperties = defaulstStyles;\n\n  const triggerNodeTemp = useMemo(() => {\n    const [triggerChildNode] = React.Children.toArray(children);\n\n    if (React.Children.count(children) === 1 && isValidElement(triggerChildNode)) {\n      return triggerChildNode;\n    }\n    return <span className={`${classPrefix}-trigger`}>{children}</span>;\n  }, [children, classPrefix]);\n\n  const [triggerProps, popupProps] = useTriggerProps(\n    { current: overlayRef },\n    { current: triggerRef },\n    [trigger],\n    visible,\n    setVisible,\n    disabled,\n    triggerNodeTemp,\n  );\n\n  // 触发器只能有一个元素\n  const disabledClassName = classNames({ [`${classPrefix}-is-disabled`]: disabled });\n\n  // 代理 trigger 的 ref\n  const triggerNode = cloneElement(triggerNodeTemp, {\n    ref: composeRefs((triggerNodeTemp as any).ref, setTriggerRef),\n    className: classNames(disabledClassName, triggerNodeTemp.props.className),\n    ...triggerProps,\n  });\n\n  // portal\n  let portal: React.ReactElement = null;\n  // 如果要展示，或者已经渲染过，默认不销毁\n  if (visible || overlayRef) {\n    portal = (\n      <Portal attach={attach}>\n        <div\n          ref={composeRefs(setOverlayRef, ref)}\n          style={styles.popper}\n          className={classNames(\n            `${classPrefix}-popup`,\n            `${classPrefix}-popup_animation-enter-active`,\n            visible ? `${classPrefix}-popup_animation-leave` : `${classPrefix}-popup_animation-leave-to`,\n          )}\n          {...attributes.popper}\n          {...popupProps}\n        >\n          <div\n            className={classNames(`${classPrefix}-popup-content`, overlayClassName, {\n              [`${classPrefix}-popup-content--arrow`]: showArrow,\n            })}\n            style={overlayVisibleStyle}\n            ref={contentRef}\n          >\n            {showArrow ? <div style={styles.arrow} className={`${classPrefix}-popup__arrow`} /> : null}\n            {content}\n          </div>\n        </div>\n      </Portal>\n    );\n  }\n\n  // 强制销毁\n  if (!visible && destroyOnClose) {\n    portal = null;\n  }\n\n  // 弹出框展示的时候，重新计算一下位置\n  useEffect(() => {\n    if ((visible || firstUpdate) && update) {\n      update();\n    }\n  }, [visible, preVisible, update, children, firstUpdate]);\n\n  const handlePopupWrapperMouseDown = () => {\n    const removeUpdate = () => window.removeEventListener('mousemove', update);\n    window.removeEventListener('mouseup', removeUpdate);\n    window.addEventListener('mousemove', update);\n    window.addEventListener('mouseup', removeUpdate);\n  };\n\n  return (\n    <div\n      className={classNames(`${classPrefix}-popup-reference`, className)}\n      onMouseDown={handlePopupWrapperMouseDown}\n      style={style}\n    >\n      {triggerNode}\n      {portal}\n    </div>\n  );\n});\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"names":["placementMap","top","bottom","left","right","Popup","forwardRef","props","ref","trigger","content","placement","attach","showArrow","destroyOnClose","className","style","overlayClassName","overlayStyle","triggerElement","children","disabled","defaultVisible","zIndex","onVisibleChange","useConfig","classPrefix","useDefault","visible","setVisible","preVisible","usePrevious","useState","triggerRef","setTriggerRef","overlayRef","setOverlayRef","contentRef","useRef","firstUpdate","setFirstUpdate","onPopperFirstUpdate","useMemo","usePopper","onFirstUpdate","styles","attributes","update","getContentRef","current","defaulstStyles","overlayVisibleStyle","triggerNodeTemp","React","Children","toArray","triggerChildNode","count","isValidElement","useTriggerProps","triggerProps","popupProps","disabledClassName","classNames","triggerNode","cloneElement","composeRefs","portal","Portal","popper","arrow","handlePopupWrapperMouseDown","removeUpdate","window","removeEventListener","addEventListener","onMouseDown","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,IAAMA,eAAoC;AACxCC,EAAAA,KAAK,KADmC;AAExC,cAAY,WAF4B;AAGxC,eAAa,SAH2B;AAIxCC,EAAAA,QAAQ,QAJgC;AAKxC,iBAAe,cALyB;AAMxC,kBAAgB,YANwB;AAOxCC,EAAAA,MAAM,MAPkC;AAQxC,cAAY,YAR4B;AASxC,iBAAe,UATyB;AAUxCC,EAAAA,OAAO,OAViC;AAWxC,eAAa,aAX2B;AAYxC,kBAAgB;AAZwB,CAA1C;IAeMC,qBAAQC,WAAuC,UAACC,KAAD,EAAQC,GAAR,EAAgB;uBAkB/DD,MAhBFE;MAAAA,sCAAU;uBAgBRF,MAfFG;MAAAA,sCAAU;yBAeRH,MAdFI;MAAAA,0CAAY;MACZC,SAaEL,MAbFK;yBAaEL,MAZFM;MAAAA,0CAAY;8BAYVN,MAXFO;MAAAA,oDAAiB;MACjBC,YAUER,MAVFQ;MACAC,QASET,MATFS;MACAC,mBAQEV,MARFU;MACAC,eAOEX,MAPFW;MACAC,iBAMEZ,MANFY;wBAMEZ,MALFa;MAAAA,wCAAWD;MACXE,WAIEd,MAJFc;8BAIEd,MAHFe;MAAAA,oDAAiB;MACjBC,SAEEhB,MAFFgB;MACAC,kBACEjB,MADFiB;;mBAEsBC;MAAhBC,yBAAAA;;oBACsBC,WAAWpB,MAAMqB,SAASN,gBAAgBE;;MAAjEI;MAASC;;MACVC,aAAaC,YAAYH;;kBAGKI,SAAsB;;MAAnDC;MAAYC;;mBACiBF,SAAyB;;MAAtDG;MAAYC;;MACbC,aAAaC,OAAO;;mBAGYN,SAAkB;;MAAjDO;MAAaC;;MACdC,sBAAsBC,QAC1B;AAAA,WAAM,YAAM;qBACK;KADjB;AAAA,KAGA;;mBAGqCC,UAAUV,YAAYE,YAAY;AACvExB,IAAAA,WAAWX,aAAaW,UAD+C;AAEvEiC,IAAAA,eAAeH;AAFwD;MAAjEI,oBAAAA;MAAQC,wBAAAA;MAAYC,oBAAAA;;sBAKRvC,KAAK;AAAA;AACvBqB,MAAAA,YAAAA;AACAmB,MAAAA,eAAeX,uBAAAA,iCAAAA,WAAYY;KAFJ;AAAA;MAKnBC,iBAAiBR,QAAQ,YAAM;QAC/BT,cAAc,OAAOf,YAAP,KAAwB,mDAAwBA,aAAae;AAAaV,MAAAA,QAAAA;;2CAChFL;AAAcK,MAAAA,QAAAA;;KACzB,CAACL,YAAD,EAAeK,MAAf,EAAuBU,UAAvB;MAEGkB,sBAAqCD;MAErCE,kBAAkBV,QAAQ,YAAM;gCACTW,eAAMC,QAAN,CAAeC,OAAf,CAAuBnC,QAAvB;;QAApBoC;;QAEHH,eAAMC,QAAN,CAAeG,KAAf,CAAqBrC,QAArB,MAAmC,CAAnC,iBAAwCsC,eAAeF,mBAAmB;aACrEA;;;uDAED,QAAD;AAAMzC,MAAAA,qBAAcW;AAApB,OAA4CN;KAClD,CAACA,QAAD,EAAWM,WAAX;;yBAEgCiC,gBACjC;AAAEV,IAAAA,SAASd;AAAX,KACA;AAAEc,IAAAA,SAAShB;AAAX,KACA,CAACxB,OAAD,GACAmB,SACAC,YACAR,UACA+B;;MAPKQ;MAAcC;;MAWfC,oBAAoBC,yCAAiBrC,8BAA4BL;MAGjE2C,2BAAcC,aAAab;AAC/B5C,IAAAA,KAAK0D,YAAad,gBAAwB5C,KAAK0B;AAC/CnB,IAAAA,WAAWgD,WAAWD,mBAAmBV,gBAAgB7C,KAAhB,CAAsBQ;KAC5D6C;MAIDO,SAA6B;;MAE7BvC,WAAWO,YAAY;yDAEtBiC,QAAD;AAAQxD,MAAAA,QAAAA;AAAR,mDACG;AACCJ,MAAAA,KAAK0D,YAAY9B,eAAe5B;AAChCQ,MAAAA,OAAO6B,OAAOwB;AACdtD,MAAAA,WAAWgD,qBACNrC,kCACAA,+CACHE,oBAAaF,mDAAyCA;OAEpDoB,WAAWuB,SACXR,yDAEH,OAAD;AACE9C,MAAAA,WAAWgD,qBAAcrC,gCAA6BT,gDAChDS,uCAAqCb,WAF7C;AAIEG,MAAAA,OAAOmC,mBAJT;AAKE3C,MAAAA,KAAK6B;AALP,OAOGxB,wDAAa,OAAD;AAAKG,MAAAA,OAAO6B,OAAOyB,KAAnB;AAA0BvD,MAAAA,qBAAcW;AAAxC,SAAyE,MACrFhB;;;MAQP,CAACkB,OAAD,IAAYd,gBAAgB;aACrB;;;YAID,YAAM;QACT,YAAWyB,WAAX,KAA2BQ,QAAQ;;;KAGvC,CAACnB,OAAD,EAAUE,UAAV,EAAsBiB,MAAtB,EAA8B3B,QAA9B,EAAwCmB,WAAxC;;MAEGgC,8BAA8B,SAA9BA,2BAA8B,GAAM;QAClCC,eAAe,SAAfA,YAAe;AAAA,aAAMC,OAAOC,mBAAP,CAA2B,WAA3B,EAAwC3B,MAAxC,CAAN;AAAA;;WACd2B,oBAAoB,WAAWF;WAC/BG,iBAAiB,aAAa5B;WAC9B4B,iBAAiB,WAAWH;;;qDAIlC,OAAD;AACEzD,IAAAA,WAAWgD,qBAAcrC,kCAA+BX,UAD1D;AAEE6D,IAAAA,aAAaL,2BAFf;AAGEvD,IAAAA,OAAAA;AAHF,KAKGgD,aACAG;;AAKP9D,MAAMwE,WAAN,GAAoB,OAApB;;;;"}
+{"version":3,"file":"Popup.js","sources":["../../src/popup/Popup.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  CSSProperties,\n  useState,\n  useEffect,\n  cloneElement,\n  isValidElement,\n  useMemo,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport classNames from 'classnames';\nimport { usePopper } from 'react-popper';\nimport Popper from '@popperjs/core';\nimport { StyledProps } from '../common';\nimport useDefault from '../_util/useDefault';\nimport useConfig from '../_util/useConfig';\nimport composeRefs from '../_util/composeRefs';\nimport usePrevious from '../_util/usePrevious';\nimport { TdPopupProps } from './type';\nimport Portal from './Portal';\nimport useTriggerProps from './hooks/useTriggerProps';\nimport usePopupCssTransition from './hooks/usePopupCssTransition';\n\nexport interface PopupProps extends TdPopupProps, StyledProps {\n  // 是否触发展开收起动画，内部下拉式组件使用\n  expandAnimation?: boolean;\n}\n/**\n * 修复参数对齐popper.js 组件展示方向，与TD组件定义有差异\n */\ntype PlacementDictionary = {\n  [Key in TdPopupProps['placement']]: Popper.Placement;\n};\n\nconst placementMap: PlacementDictionary = {\n  top: 'top',\n  'top-left': 'top-start',\n  'top-right': 'top-end',\n  bottom: 'bottom',\n  'bottom-left': 'bottom-start',\n  'bottom-right': 'bottom-end',\n  left: 'left',\n  'left-top': 'left-start',\n  'left-bottom': 'left-end',\n  right: 'right',\n  'right-top': 'right-start',\n  'right-bottom': 'right-end',\n};\n\nconst Popup = forwardRef<HTMLDivElement, PopupProps>((props, ref) => {\n  const {\n    trigger = 'hover',\n    content = null,\n    placement = 'top',\n    attach,\n    showArrow = false,\n    destroyOnClose = false,\n    className,\n    style,\n    overlayClassName,\n    overlayStyle,\n    triggerElement,\n    children = triggerElement,\n    disabled,\n    defaultVisible = false,\n    zIndex,\n    onVisibleChange,\n    expandAnimation,\n  } = props;\n  const { classPrefix } = useConfig();\n  const [visible, setVisible] = useDefault(props.visible, defaultVisible, onVisibleChange);\n  const preVisible = usePrevious(visible);\n\n  // refs\n  const [triggerRef, setTriggerRef] = useState<HTMLElement>(null);\n  const [overlayRef, setOverlayRef] = useState<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  // https://popper.js.org/react-popper/v2/faq/\n  const [firstUpdate, setFirstUpdate] = useState<boolean>(false);\n  const onPopperFirstUpdate = useMemo(\n    () => () => {\n      setFirstUpdate(true);\n    },\n    [],\n  );\n\n  const { styles, attributes, update } = usePopper(triggerRef, overlayRef, {\n    placement: placementMap[placement],\n    onFirstUpdate: onPopperFirstUpdate,\n  });\n\n  useImperativeHandle(ref, (): any => ({\n    setVisible,\n    getContentRef: contentRef?.current,\n  }));\n\n  const defaulstStyles = useMemo(() => {\n    if (triggerRef && typeof overlayStyle === 'function') return { ...overlayStyle(triggerRef), zIndex };\n    return { ...overlayStyle, zIndex };\n  }, [overlayStyle, zIndex, triggerRef]);\n  // 设置 style 决定展示与隐藏\n  const overlayVisibleStyle: CSSProperties = defaulstStyles;\n\n  const triggerNodeTemp = useMemo(() => {\n    const [triggerChildNode] = React.Children.toArray(children);\n\n    if (React.Children.count(children) === 1 && isValidElement(triggerChildNode)) {\n      return triggerChildNode;\n    }\n    return <span className={`${classPrefix}-trigger`}>{children}</span>;\n  }, [children, classPrefix]);\n\n  const [triggerProps, popupProps] = useTriggerProps(\n    { current: overlayRef },\n    { current: triggerRef },\n    [trigger],\n    visible,\n    setVisible,\n    disabled,\n    triggerNodeTemp,\n  );\n\n  // 触发器只能有一个元素\n  const disabledClassName = classNames({ [`${classPrefix}-is-disabled`]: disabled });\n\n  // 代理 trigger 的 ref\n  const triggerNode = cloneElement(triggerNodeTemp, {\n    ref: composeRefs((triggerNodeTemp as any).ref, setTriggerRef),\n    className: classNames(disabledClassName, triggerNodeTemp.props.className),\n    ...triggerProps,\n  });\n\n  const cssTransitionState = usePopupCssTransition({ contentRef, classPrefix, expandAnimation });\n\n  // 弹出框展示的时候，重新计算一下位置\n  useEffect(() => {\n    if ((visible || firstUpdate) && update) {\n      update();\n    }\n  }, [visible, preVisible, update, children, firstUpdate]);\n\n  const handlePopupWrapperMouseDown = () => {\n    const removeUpdate = () => window.removeEventListener('mousemove', update);\n    window.removeEventListener('mouseup', removeUpdate);\n    window.addEventListener('mousemove', update);\n    window.addEventListener('mouseup', removeUpdate);\n  };\n\n  // 初次不渲染.\n  const portal =\n    visible || overlayRef ? (\n      <Portal attach={attach}>\n        <CSSTransition in={visible} appear={true} unmountOnExit={destroyOnClose} {...cssTransitionState.props}>\n          <div\n            ref={composeRefs(setOverlayRef, ref)}\n            style={styles.popper}\n            className={`${classPrefix}-popup`}\n            {...attributes.popper}\n            {...popupProps}\n          >\n            <div\n              className={classNames(`${classPrefix}-popup__content`, overlayClassName, {\n                [`${classPrefix}-popup__content--arrow`]: showArrow,\n              })}\n              style={overlayVisibleStyle}\n              ref={contentRef}\n            >\n              {showArrow ? <div style={styles.arrow} className={`${classPrefix}-popup__arrow`} /> : null}\n              {content}\n            </div>\n          </div>\n        </CSSTransition>\n      </Portal>\n    ) : null;\n\n  return (\n    <div\n      className={classNames(`${classPrefix}-popup__reference`, className)}\n      onMouseDown={handlePopupWrapperMouseDown}\n      style={style}\n    >\n      {triggerNode}\n      {portal}\n    </div>\n  );\n});\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"names":["placementMap","top","bottom","left","right","Popup","forwardRef","props","ref","trigger","content","placement","attach","showArrow","destroyOnClose","className","style","overlayClassName","overlayStyle","triggerElement","children","disabled","defaultVisible","zIndex","onVisibleChange","expandAnimation","useConfig","classPrefix","useDefault","visible","setVisible","preVisible","usePrevious","useState","triggerRef","setTriggerRef","overlayRef","setOverlayRef","contentRef","useRef","firstUpdate","setFirstUpdate","onPopperFirstUpdate","useMemo","usePopper","onFirstUpdate","styles","attributes","update","getContentRef","current","defaulstStyles","overlayVisibleStyle","triggerNodeTemp","React","Children","toArray","triggerChildNode","count","isValidElement","useTriggerProps","triggerProps","popupProps","disabledClassName","classNames","triggerNode","cloneElement","composeRefs","cssTransitionState","usePopupCssTransition","handlePopupWrapperMouseDown","removeUpdate","window","removeEventListener","addEventListener","portal","Portal","CSSTransition","appear","unmountOnExit","popper","arrow","onMouseDown","displayName"],"mappings":"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"}

package/es/popup/Portal.js

@@ -1,5 +1,5 @@
 /**
- * tdesign v0.19.0
+ * tdesign v0.20.2
  * (c) 2021 tdesign
  * @license MIT
  */

package/es/popup/hooks/usePopupCssTransition.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+interface UsePopupCssTransitionParams {
+    contentRef: React.MutableRefObject<HTMLDivElement>;
+    classPrefix: String;
+    expandAnimation: boolean;
+}
+declare const usePopupCssTransition: ({ contentRef, classPrefix, expandAnimation }: UsePopupCssTransitionParams) => {
+    props: {
+        classNames: {
+            appear: string;
+            appearActive: string;
+            appearDone: string;
+            enter: string;
+            enterActive: string;
+            enterDone: string;
+            exit: string;
+            exitActive: string;
+            exitDone: string;
+        };
+        onEnter: () => void;
+        onEntered: () => void;
+        onExiting: () => void;
+        timeout: number;
+        nodeRef: import("react").MutableRefObject<HTMLDivElement>;
+    } | {
+        classNames: {
+            appear: string;
+            appearActive: string;
+            appearDone: string;
+            enter: string;
+            enterActive: string;
+            enterDone: string;
+            exit: string;
+            exitActive: string;
+            exitDone: string;
+        };
+        onEnter?: undefined;
+        onEntered?: undefined;
+        onExiting?: undefined;
+        timeout: number;
+        nodeRef: import("react").MutableRefObject<HTMLDivElement>;
+    };
+};
+export default usePopupCssTransition;

package/es/popup/hooks/usePopupCssTransition.js

@@ -0,0 +1,71 @@
+/**
+ * tdesign v0.20.2
+ * (c) 2021 tdesign
+ * @license MIT
+ */
+
+import { _ as _defineProperty } from '../../_chunks/dep-2e97cc0d.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var usePopupCssTransition = function usePopupCssTransition(_ref) {
+  var contentRef = _ref.contentRef,
+      classPrefix = _ref.classPrefix,
+      expandAnimation = _ref.expandAnimation;
+
+  var handleBeforeEnter = function handleBeforeEnter() {
+    var contentEle = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current;
+
+    if (contentEle) {
+      contentEle.style.overflow = "hidden";
+      contentEle.style.maxHeight = "0";
+    }
+  };
+
+  var handleEntered = function handleEntered() {
+    var contentEle = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current;
+
+    if (contentEle) {
+      var scrollHeight = contentEle.scrollHeight;
+      contentEle.style.maxHeight = "".concat(scrollHeight, "px");
+    }
+  };
+
+  var handleExiting = function handleExiting() {
+    var contentEle = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current;
+
+    if (contentEle) {
+      contentEle.style.maxHeight = "0";
+    }
+  };
+
+  var popupAnimationClassPrefix = "".concat(classPrefix, "-popup--animation");
+  var lifeCircleEvent = expandAnimation ? {
+    onEnter: handleBeforeEnter,
+    onEntered: handleEntered,
+    onExiting: handleExiting
+  } : {};
+  return {
+    props: _objectSpread(_objectSpread({
+      timeout: 200,
+      nodeRef: contentRef
+    }, lifeCircleEvent), {}, {
+      classNames: {
+        appear: "".concat(popupAnimationClassPrefix, "-enter ").concat(popupAnimationClassPrefix, "-enter-active"),
+        appearActive: "".concat(popupAnimationClassPrefix, "-enter-active"),
+        appearDone: "".concat(popupAnimationClassPrefix, "-enter-active ").concat(popupAnimationClassPrefix, "-enter-to"),
+        enter: "".concat(popupAnimationClassPrefix, "-enter ").concat(popupAnimationClassPrefix, "-enter-active"),
+        enterActive: "".concat(popupAnimationClassPrefix, "-enter-active"),
+        enterDone: "".concat(popupAnimationClassPrefix, "-enter-active ").concat(popupAnimationClassPrefix, "-enter-to"),
+        exit: "".concat(popupAnimationClassPrefix, "-leave ").concat(popupAnimationClassPrefix, "-leave-active"),
+        exitActive: "".concat(popupAnimationClassPrefix, "-leave-active"),
+        exitDone: "".concat(popupAnimationClassPrefix, "-leave-active ").concat(popupAnimationClassPrefix, "-leave-to")
+      }
+    })
+  };
+};
+
+export { usePopupCssTransition as default };
+//# sourceMappingURL=usePopupCssTransition.js.map

package/es/popup/hooks/usePopupCssTransition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePopupCssTransition.js","sources":["../../../src/popup/hooks/usePopupCssTransition.ts"],"sourcesContent":["interface UsePopupCssTransitionParams {\n  contentRef: React.MutableRefObject<HTMLDivElement>;\n  classPrefix: String;\n  expandAnimation: boolean;\n}\n\nconst usePopupCssTransition = ({ contentRef, classPrefix, expandAnimation }: UsePopupCssTransitionParams) => {\n  const handleBeforeEnter = () => {\n    const contentEle = contentRef?.current;\n    if (contentEle) {\n      contentEle.style.overflow = 'hidden';\n      contentEle.style.maxHeight = '0';\n    }\n  };\n\n  const handleEntered = () => {\n    const contentEle = contentRef?.current;\n    if (contentEle) {\n      const { scrollHeight } = contentEle;\n      contentEle.style.maxHeight = `${scrollHeight}px`;\n    }\n  };\n\n  const handleExiting = () => {\n    const contentEle = contentRef?.current;\n    if (contentEle) {\n      contentEle.style.maxHeight = '0';\n    }\n  };\n\n  const popupAnimationClassPrefix = `${classPrefix}-popup--animation`;\n\n  // 不需要扩展动画时，不需要生命周期函数\n  const lifeCircleEvent = expandAnimation\n    ? {\n        onEnter: handleBeforeEnter,\n        onEntered: handleEntered,\n        onExiting: handleExiting,\n      }\n    : {};\n\n  return {\n    props: {\n      timeout: 200,\n      nodeRef: contentRef,\n      ...lifeCircleEvent,\n      // 与公共 className 保持一致\n      classNames: {\n        appear: `${popupAnimationClassPrefix}-enter ${popupAnimationClassPrefix}-enter-active`,\n        appearActive: `${popupAnimationClassPrefix}-enter-active`,\n        appearDone: `${popupAnimationClassPrefix}-enter-active ${popupAnimationClassPrefix}-enter-to`,\n        enter: `${popupAnimationClassPrefix}-enter ${popupAnimationClassPrefix}-enter-active`,\n        enterActive: `${popupAnimationClassPrefix}-enter-active`,\n        enterDone: `${popupAnimationClassPrefix}-enter-active ${popupAnimationClassPrefix}-enter-to`,\n        exit: `${popupAnimationClassPrefix}-leave ${popupAnimationClassPrefix}-leave-active`,\n        exitActive: `${popupAnimationClassPrefix}-leave-active`,\n        exitDone: `${popupAnimationClassPrefix}-leave-active ${popupAnimationClassPrefix}-leave-to`,\n      },\n    },\n  };\n};\n\nexport default usePopupCssTransition;\n"],"names":["usePopupCssTransition","contentRef","classPrefix","expandAnimation","handleBeforeEnter","contentEle","current","style","overflow","maxHeight","handleEntered","scrollHeight","handleExiting","popupAnimationClassPrefix","lifeCircleEvent","onEnter","onEntered","onExiting","props","timeout","nodeRef","classNames","appear","appearActive","appearDone","enter","enterActive","enterDone","exit","exitActive","exitDone"],"mappings":";;;;;;;;;;;;IAMMA,wBAAwB,SAAxBA,qBAAwB,OAA+E;AAAA,MAA5EC,UAA4E,QAA5EA,UAA4E;AAAA,MAAhEC,WAAgE,QAAhEA,WAAgE;AAAA,MAAnDC,eAAmD,QAAnDA,eAAmD;;MACrGC,oBAAoB,SAApBA,iBAAoB,GAAM;QACxBC,aAAaJ,uBAAAA,iCAAAA,WAAYK;;QAC3BD,YAAY;iBACHE,MAAMC,WAAW;iBACjBD,MAAME,YAAY;;;;MAI3BC,gBAAgB,SAAhBA,aAAgB,GAAM;QACpBL,aAAaJ,uBAAAA,iCAAAA,WAAYK;;QAC3BD,YAAY;UACNM,eAAiBN,WAAjBM;iBACGJ,MAAME,sBAAeE;;;;MAI9BC,gBAAgB,SAAhBA,aAAgB,GAAM;QACpBP,aAAaJ,uBAAAA,iCAAAA,WAAYK;;QAC3BD,YAAY;iBACHE,MAAME,YAAY;;;;MAI3BI,sCAA+BX;MAG/BY,kBAAkBX,kBACpB;AACEY,IAAAA,SAASX,iBADX;AAEEY,IAAAA,WAAWN,aAFb;AAGEO,IAAAA,WAAWL;AAHb,MAKA;SAEG;AACLM,IAAAA;AACEC,MAAAA,SAAS;AACTC,MAAAA,SAASnB;OACNa;AAEHO,MAAAA,YAAY;AACVC,QAAAA,kBAAWT,6CAAmCA,2CADpC;AAEVU,QAAAA,wBAAiBV,2CAFP;AAGVW,QAAAA,sBAAeX,oDAA0CA,uCAH/C;AAIVY,QAAAA,iBAAUZ,6CAAmCA,2CAJnC;AAKVa,QAAAA,uBAAgBb,2CALN;AAMVc,QAAAA,qBAAcd,oDAA0CA,uCAN9C;AAOVe,QAAAA,gBAASf,6CAAmCA,2CAPlC;AAQVgB,QAAAA,sBAAehB,2CARL;AASViB,QAAAA,oBAAajB,oDAA0CA;AAT7C;;AANT;;;;;"}

package/es/popup/hooks/useTriggerProps.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes, MutableRefObject } from 'react';
+import { TdPopupProps, PopupVisibleChangeContext } from '../type';
+import { ChangeHandler } from '../../_util/useDefault';
+export declare type TriggerProps = HTMLAttributes<HTMLDivElement>;
+export declare type PopupProps = HTMLAttributes<HTMLDivElement>;
+export default function useTriggerProps(ref: MutableRefObject<HTMLElement>, triggerNode: MutableRefObject<HTMLElement>, triggers: Array<TdPopupProps['trigger']>, visible: boolean, setVisible: ChangeHandler<boolean, [PopupVisibleChangeContext]>, disabled: boolean, originTrigger: JSX.Element): [TriggerProps, PopupProps];

package/es/popup/hooks/useTriggerProps.js

@@ -0,0 +1,130 @@
+/**
+ * tdesign v0.20.2
+ * (c) 2021 tdesign
+ * @license MIT
+ */
+
+import useClickOutside from '../../_util/useClickOutside.js';
+import 'react';
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+var ESC_KEY = "Escape";
+function useTriggerProps(ref, triggerNode, triggers, visible, setVisible) {
+  var disabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var originTrigger = arguments.length > 6 ? arguments[6] : undefined;
+  var triggerProps = {};
+  var popupProps = {};
+
+  var toggle = function toggle(e, trigger) {
+    return setVisible(!visible, {
+      e: e,
+      trigger: trigger
+    });
+  };
+
+  var show = function show(e, trigger) {
+    return setVisible(true, {
+      e: e,
+      trigger: trigger
+    });
+  };
+
+  var hide = function hide(e, trigger) {
+    return setVisible(false, {
+      e: e,
+      trigger: trigger
+    });
+  };
+
+  useClickOutside([ref, triggerNode], function (e) {
+    if (visible && (triggers.includes("click") || triggers.includes("context-menu"))) {
+      hide(e, "trigger-element-blur");
+    }
+  });
+  if (disabled) return [triggerProps, popupProps];
+
+  var _iterator = _createForOfIteratorHelper(triggers),
+      _step;
+
+  try {
+    var _loop = function _loop() {
+      var trigger = _step.value;
+      var _originTrigger$props = originTrigger.props,
+          onClick = _originTrigger$props.onClick,
+          onMouseEnter = _originTrigger$props.onMouseEnter,
+          onMouseLeave = _originTrigger$props.onMouseLeave,
+          onFocus = _originTrigger$props.onFocus,
+          onBlur = _originTrigger$props.onBlur,
+          onContextMenu = _originTrigger$props.onContextMenu,
+          onKeyDown = _originTrigger$props.onKeyDown;
+
+      if (trigger === "click") {
+        triggerProps.onClick = function (e) {
+          toggle(e, "trigger-element-click");
+          onClick && onClick(e);
+        };
+      }
+
+      if (trigger === "hover") {
+        triggerProps.onMouseEnter = function (e) {
+          show(e, "trigger-element-hover");
+          onMouseEnter && onMouseEnter(e);
+        };
+
+        popupProps.onMouseEnter = function (e) {
+          return show(e, "trigger-element-hover");
+        };
+
+        triggerProps.onMouseLeave = function (e) {
+          hide(e, "trigger-element-hover");
+          onMouseLeave && onMouseLeave(e);
+        };
+
+        popupProps.onMouseLeave = function (e) {
+          return hide(e, "trigger-element-hover");
+        };
+      }
+
+      if (trigger === "focus") {
+        triggerProps.onFocus = function (e) {
+          show(e, "trigger-element-focus");
+          onFocus && onFocus(e);
+        };
+
+        triggerProps.onBlur = function (e) {
+          hide(e, "trigger-element-blur");
+          onBlur && onBlur(e);
+        };
+      }
+
+      if (trigger === "context-menu") {
+        triggerProps.onContextMenu = function (e) {
+          show(e, "context-menu");
+          onContextMenu && onContextMenu(e);
+        };
+      }
+
+      triggerProps.onKeyDown = function (e) {
+        if (e.key === ESC_KEY) hide(e, "keydown-esc");
+        onKeyDown && onKeyDown(e);
+      };
+    };
+
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      _loop();
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  return [triggerProps, popupProps];
+}
+
+export { useTriggerProps as default };
+//# sourceMappingURL=useTriggerProps.js.map

package/es/popup/hooks/useTriggerProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTriggerProps.js","sources":["../../../src/popup/hooks/useTriggerProps.ts"],"sourcesContent":["import { HTMLAttributes, MutableRefObject } from 'react';\nimport useClickOutside from '../../_util/useClickOutside';\nimport { TdPopupProps, PopupVisibleChangeContext, PopupTriggerEvent } from '../type';\nimport { ChangeHandler } from '../../_util/useDefault';\n\nexport type TriggerProps = HTMLAttributes<HTMLDivElement>;\nexport type PopupProps = HTMLAttributes<HTMLDivElement>;\ntype HandleTrigger = (e: PopupTriggerEvent, trigger: PopupVisibleChangeContext['trigger']) => void;\nconst ESC_KEY = 'Escape';\n\nexport default function useTriggerProps(\n  ref: MutableRefObject<HTMLElement>,\n  triggerNode: MutableRefObject<HTMLElement>,\n  triggers: Array<TdPopupProps['trigger']>,\n  visible: boolean,\n  setVisible: ChangeHandler<boolean, [PopupVisibleChangeContext]>,\n  disabled = false,\n  originTrigger: JSX.Element,\n): [TriggerProps, PopupProps] {\n  const triggerProps: TriggerProps = {};\n  const popupProps: PopupProps = {};\n\n  const toggle: HandleTrigger = (e, trigger) => setVisible(!visible, { e, trigger });\n  const show: HandleTrigger = (e, trigger) => setVisible(true, { e, trigger });\n  const hide: HandleTrigger = (e, trigger) => setVisible(false, { e, trigger });\n\n  // click outside 用于处理点击其他地方隐藏\n  useClickOutside([ref, triggerNode], (e: any) => {\n    if (visible && (triggers.includes('click') || triggers.includes('context-menu'))) {\n      hide(e, 'trigger-element-blur');\n    }\n  });\n\n  if (disabled) return [triggerProps, popupProps];\n\n  // eslint-disable-next-line no-restricted-syntax\n  for (const trigger of triggers) {\n    const { onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, onContextMenu, onKeyDown } = originTrigger.props;\n    // 点击触发\n    if (trigger === 'click') {\n      triggerProps.onClick = (e) => {\n        toggle(e, 'trigger-element-click');\n        onClick && onClick(e);\n      };\n    }\n\n    // hover 触发\n    if (trigger === 'hover') {\n      triggerProps.onMouseEnter = (e) => {\n        show(e, 'trigger-element-hover');\n        onMouseEnter && onMouseEnter(e);\n      };\n      popupProps.onMouseEnter = (e) => show(e, 'trigger-element-hover'); // 兼容鼠标移入弹出框\n      triggerProps.onMouseLeave = (e) => {\n        hide(e, 'trigger-element-hover');\n        onMouseLeave && onMouseLeave(e);\n      };\n      popupProps.onMouseLeave = (e) => hide(e, 'trigger-element-hover');\n    }\n\n    // focus 触发\n    if (trigger === 'focus') {\n      triggerProps.onFocus = (e) => {\n        show(e, 'trigger-element-focus');\n        onFocus && onFocus(e);\n      };\n      triggerProps.onBlur = (e) => {\n        hide(e, 'trigger-element-blur');\n        onBlur && onBlur(e);\n      };\n    }\n\n    // contextMenu 触发\n    if (trigger === 'context-menu') {\n      triggerProps.onContextMenu = (e) => {\n        show(e, 'context-menu');\n        onContextMenu && onContextMenu(e);\n      };\n    }\n\n    triggerProps.onKeyDown = (e) => {\n      if (e.key === ESC_KEY) hide(e, 'keydown-esc');\n      onKeyDown && onKeyDown(e);\n    };\n  }\n\n  return [triggerProps, popupProps];\n}\n"],"names":["ESC_KEY","ref","triggerNode","triggers","visible","setVisible","disabled","originTrigger","triggerProps","popupProps","toggle","e","trigger","show","hide","includes","props","onClick","onMouseEnter","onMouseLeave","onFocus","onBlur","onContextMenu","onKeyDown","key"],"mappings":";;;;;;;;;;;;;;AAQA,IAAMA,UAAU,QAAhB;yBAGEC,KACAC,aACAC,UACAC,SACAC,YAG4B;AAAA,MAF5BC,QAE4B,uEAFjB,KAEiB;AAAA,MAD5BC,aAC4B;MACtBC,eAA6B;MAC7BC,aAAyB;;MAEzBC,SAAwB,SAAxBA,MAAwB,CAACC,CAAD,EAAIC,OAAJ;AAAA,WAAgBP,WAAW,CAACD,SAAS;AAAEO,MAAAA,GAAAA,CAAF;AAAKC,MAAAA,SAAAA;AAAL,MAArC;AAAA;;MACxBC,OAAsB,SAAtBA,IAAsB,CAACF,CAAD,EAAIC,OAAJ;AAAA,WAAgBP,WAAW,MAAM;AAAEM,MAAAA,GAAAA,CAAF;AAAKC,MAAAA,SAAAA;AAAL,MAAjC;AAAA;;MACtBE,OAAsB,SAAtBA,IAAsB,CAACH,CAAD,EAAIC,OAAJ;AAAA,WAAgBP,WAAW,OAAO;AAAEM,MAAAA,GAAAA,CAAF;AAAKC,MAAAA,SAAAA;AAAL,MAAlC;AAAA;;kBAGZ,CAACX,GAAD,EAAMC,WAAN,GAAoB,UAACS,CAAD,EAAY;QAC1CP,qBAAqBW,SAAS,YAAYZ,SAASY,QAAT,CAAkB,cAAlB,IAAoC;WAC3EJ,GAAG;;;MAIRL,iBAAiB,CAACE,YAAD,EAAeC,UAAf;;AAfO,6CAkBNN,QAlBM;AAAA;;AAAA;AAAA;AAAA,UAkBjBS,OAlBiB;iCAmBiEL,cAAcS;UAAjGC,+BAAAA;UAASC,oCAAAA;UAAcC,oCAAAA;UAAcC,+BAAAA;UAASC,8BAAAA;UAAQC,qCAAAA;UAAeC,iCAAAA;;UAEzEX,YAAY,SAAS;qBACVK,UAAU,UAACN,CAAD,EAAO;iBACrBA,GAAG;qBACCM,QAAQN;;;;UAKnBC,YAAY,SAAS;qBACVM,eAAe,UAACP,CAAD,EAAO;eAC5BA,GAAG;0BACQO,aAAaP;;;mBAEpBO,eAAe,UAACP,CAAD;AAAA,iBAAOE,KAAKF,GAAG,wBAAf;AAAA;;qBACbQ,eAAe,UAACR,CAAD,EAAO;eAC5BA,GAAG;0BACQQ,aAAaR;;;mBAEpBQ,eAAe,UAACR,CAAD;AAAA,iBAAOG,KAAKH,GAAG,wBAAf;AAAA;;;UAIxBC,YAAY,SAAS;qBACVQ,UAAU,UAACT,CAAD,EAAO;eACvBA,GAAG;qBACGS,QAAQT;;;qBAERU,SAAS,UAACV,CAAD,EAAO;eACtBA,GAAG;oBACEU,OAAOV;;;;UAKjBC,YAAY,gBAAgB;qBACjBU,gBAAgB,UAACX,CAAD,EAAO;eAC7BA,GAAG;2BACSW,cAAcX;;;;mBAItBY,YAAY,UAACZ,CAAD,EAAO;YAC1BA,EAAEa,GAAF,KAAUxB,cAAcW,GAAG;qBAClBY,UAAUZ;;AAhEC;;wDAkBI;AAAA;;AAlBJ;AAAA;AAAA;AAAA;AAAA;;SAoErB,CAACH,YAAD,EAAeC,UAAf;;;;;"}

package/es/popup/index.js

@@ -1,5 +1,5 @@
 /**
- * tdesign v0.19.0
+ * tdesign v0.20.2
  * (c) 2021 tdesign
  * @license MIT
  */
@@ -7,10 +7,11 @@
 import Popup$1 from './Popup.js';
 import './style/css.js';
 import './type.js';
-import '../_chunks/dep-53c6c586.js';
-import '../_chunks/dep-fff59b5a.js';
-import '../_chunks/dep-4c3606c3.js';
+import '../_chunks/dep-2e97cc0d.js';
+import '../_chunks/dep-85854991.js';
+import '../_chunks/dep-38c06164.js';
 import 'react';
+import 'react-transition-group';
 import 'classnames';
 import 'react-popper';
 import '../_util/useDefault.js';
@@ -22,8 +23,9 @@ import '../_util/composeRefs.js';
 import '../_util/usePrevious.js';
 import './Portal.js';
 import 'react-dom';
-import './useTriggerProps.js';
+import './hooks/useTriggerProps.js';
 import '../_util/useClickOutside.js';
+import './hooks/usePopupCssTransition.js';
 
 var Popup = Popup$1;
 

package/es/popup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/popup/index.ts"],"sourcesContent":["import _Popup from './Popup';\n\nimport './style/index.js';\n\nexport type { PopupProps } from './Popup';\nexport * from './type';\n\nexport const Popup = _Popup;\nexport default Popup;\n"],"names":["Popup","_Popup"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;IAOaA,QAAQC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/popup/index.ts"],"sourcesContent":["import _Popup from './Popup';\n\nimport './style/index.js';\n\nexport type { PopupProps } from './Popup';\nexport * from './type';\n\nexport const Popup = _Popup;\nexport default Popup;\n"],"names":["Popup","_Popup"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAOaA,QAAQC;;;;"}