@kdcloudjs/kdesign 1.7.48-usePopper.1 → 1.7.49

package/es/anchor/anchor.js

@@ -179,6 +179,7 @@ var InternalAnchor = function InternalAnchor(props, ref) {
   var normalRef = React.useRef(null);
   var anchorRef = ref || normalRef;
   var linksWidthRef = React.useRef([]);
+  var animating = React.useRef(false);
   var wrapperClass = classNames(className, _defineProperty({}, "".concat(anchorPrefixCls, "-wrapper"), true));
   // classes
   var anchorMenuClass = classNames(_defineProperty({}, "".concat(anchorPrefixCls, "-menu"), true));
@@ -298,8 +299,12 @@ var InternalAnchor = function InternalAnchor(props, ref) {
     var eleOffsetTop = getOffsetTop(targetElement, container);
     var y = scrollTop + eleOffsetTop;
     y -= targetOffset !== undefined ? targetOffset : offsetTop || 0;
+    animating.current = true;
     scrollTo(y, {
-      getContainer: getScrollContainer
+      getContainer: getScrollContainer,
+      callback: function callback() {
+        animating.current = false;
+      }
     });
   };
   var setCurrentActiveLink = useCallback(function (link) {
@@ -320,6 +325,9 @@ var InternalAnchor = function InternalAnchor(props, ref) {
         setFixedTop(false);
       }
     }
+    if (animating.current) {
+      return;
+    }
     var currentActiveLink = getAnchor(targetOffset !== undefined ? targetOffset : offsetTop || 0, bounds);
     currentActiveLink && setCurrentActiveLink(currentActiveLink);
   }, [affix, setFixedTop, offsetTop, bounds, getAnchor, setCurrentActiveLink, type, getScrollContainer, anchorRef, targetOffset]);

package/es/input-number/inputNumber.js

@@ -62,6 +62,10 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     forceUpdate = _useState4[0],
     setForceUpdate = _useState4[1];
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    compositionValue = _useState6[0],
+    setCompositionValue = _useState6[1];
   var inputStatus = useRef({
     isHandleChange: false,
     inputFocused: false
@@ -71,6 +75,7 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
   var inputNumberRef = ref || thisInputNumberRef;
   var stepMouseDownDelayTimer = useRef(null);
   var stepMouseDownIntervalTimer = useRef(null);
+  var refIszComposition = useRef(false);
   var isScopeValid = function isScopeValid(value) {
     if (value === '') return true;
     var numberValue = parseFloat(value) || 0;
@@ -112,14 +117,20 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
   };
   var handleChange = function handleChange(event) {
     inputStatus.current.isHandleChange = true;
-    var legalNumber = verifiValue(event.target.value);
-    updateSelectionRangePosition(event);
-    if (legalNumber === false) {
-      setForceUpdate(forceUpdate + 1);
-      return false;
+    var newValue = event.target.value;
+    if (!refIszComposition.current) {
+      compositionValue && setCompositionValue('');
+      var legalNumber = verifiValue(newValue);
+      if (legalNumber === false) {
+        setForceUpdate(forceUpdate + 1);
+        return false;
+      }
+      value === undefined && setInputValue(legalNumber);
+      onChange && onChange(handleEventAttachValue(event, numberMode ? Number(legalNumber) : legalNumber));
+      updateSelectionRangePosition(event);
+    } else {
+      setCompositionValue(newValue);
     }
-    value === undefined && setInputValue(legalNumber);
-    onChange && onChange(handleEventAttachValue(event, numberMode ? Number(legalNumber) : legalNumber));
   };
   var handleFocus = function handleFocus(event) {
     inputStatus.current.inputFocused = true;
@@ -318,9 +329,19 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
     inputValue: displayedInputValue,
     forceUpdate: forceUpdate
   });
+  var handleComposition = function handleComposition(e) {
+    refIszComposition.current = e.type !== 'compositionend';
+    if (!refIszComposition.current) {
+      setCompositionValue('');
+      handleChange(e);
+    }
+  };
   return /*#__PURE__*/React.createElement(Input, _extends({}, others, {
+    onCompositionStart: handleComposition,
+    onCompositionUpdate: handleComposition,
+    onCompositionEnd: handleComposition,
     ref: inputNumberRef,
-    value: displayedInputValue,
+    value: compositionValue || displayedInputValue,
     prefix: prefix,
     suffix: suffix,
     onChange: handleChange,

package/es/tooltip/style/index.css

@@ -124,7 +124,68 @@
   background-color: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff));
   -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
           box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
+  opacity: 1;
+  z-index: var(--kd-g-z-index-popper, 1050);
+  visibility: visible;
 }
-.kd-tooltip .arrow::before {
-  border-color: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff));
+.kd-tooltip.hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+.kd-tooltip.arrow::before {
+  position: absolute;
+  z-index: -2;
+  background: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff));
+  border-style: solid;
+  border-width: var(--arrowSize);
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+  content: '';
+}
+.kd-tooltip.arrow::after {
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: '';
+  background: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff));
+  border-radius: var(--kd-g-radius-border, 2px);
+}
+.kd-tooltip.arrow.bottomLeft::before,
+.kd-tooltip.arrow.bottom::before,
+.kd-tooltip.arrow.bottomRight::before {
+  left: var(--arrowLeft);
+  top: var(--arrowSpill);
+  -webkit-box-shadow: -2px -2px calc(6px - 1px) rgba(0, 0, 0, 0.1);
+          box-shadow: -2px -2px calc(6px - 1px) rgba(0, 0, 0, 0.1);
+  border-color: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) transparent transparent var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff));
+}
+.kd-tooltip.arrow.topLeft::before,
+.kd-tooltip.arrow.top::before,
+.kd-tooltip.arrow.topRight::before {
+  left: var(--arrowLeft);
+  bottom: var(--arrowSpill);
+  -webkit-box-shadow: 3px 3px calc(6px + 1px) rgba(0, 0, 0, 0.15);
+          box-shadow: 3px 3px calc(6px + 1px) rgba(0, 0, 0, 0.15);
+  border-color: transparent var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) transparent;
+}
+.kd-tooltip.arrow.leftTop::before,
+.kd-tooltip.arrow.left::before,
+.kd-tooltip.arrow.leftBottom::before {
+  top: var(--arrowTop);
+  right: var(--arrowSpill);
+  -webkit-box-shadow: 3px 0 6px rgba(0, 0, 0, 0.12), 0 -2px 6px rgba(204, 149, 149, 0.12);
+          box-shadow: 3px 0 6px rgba(0, 0, 0, 0.12), 0 -2px 6px rgba(204, 149, 149, 0.12);
+  border-color: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) transparent transparent;
+}
+.kd-tooltip.arrow.rightTop::before,
+.kd-tooltip.arrow.right::before,
+.kd-tooltip.arrow.rightBottom::before {
+  top: var(--arrowTop);
+  left: var(--arrowSpill);
+  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), -2px 0 6px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), -2px 0 6px rgba(0, 0, 0, 0.1);
+  border-color: transparent transparent var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff));
 }

package/es/tooltip/style/index.less

@@ -14,8 +14,15 @@
   line-height: 1.5;
   background-color: @tooltip-background-color;
   box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
+  opacity: 1;
+  z-index: @z-index-popper;
+  visibility: visible;
 
-  .arrow::before {
-    border-color: @tooltip-background-color;
+  &.hidden {
+    opacity: 0;
+    visibility: hidden;
   }
+
+  // 箭头样式
+  .popperArrow(@tooltip-background-color, @tooltip-horizontal-gap, @tooltip-box-shadow-blur);
 }

package/es/tooltip/tooltip.d.ts

@@ -1,5 +1,9 @@
 import React from 'react';
-import { PopperProps } from '../popper';
-export declare type TooltipProps = PopperProps;
-declare const Tooltip: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<unknown>>;
+import { PopperProps } from '../_utils/usePopper';
+export declare type RenderFunction = () => React.ReactNode;
+export interface TooltipProps extends PopperProps {
+    children?: React.ReactNode;
+    tip?: React.ReactNode | RenderFunction;
+}
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<unknown>>;
 export default Tooltip;

package/es/tooltip/tooltip.js

@@ -1,20 +1,36 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
-import React from 'react';
+import React, { useRef } from 'react';
 import { getCompProps } from '../_utils';
+import { isFragment } from '../_utils/reactNode';
 import { ConfigContext } from '../config-provider';
-import Popper from '../popper';
+import usePopper from '../_utils/usePopper';
 var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useContext = React.useContext(ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
     pkgPrefixCls = _React$useContext.prefixCls,
-    compDefaultProps = _React$useContext.compDefaultProps;
-  var allProps = getCompProps('ToolTip', compDefaultProps, props);
-  var prefixCls = getPrefixCls(pkgPrefixCls, 'tooltip', allProps === null || allProps === void 0 ? void 0 : allProps.prefixCls);
-  var popperProps = _extends({
-    ref: ref,
-    prefixCls: prefixCls
-  }, allProps);
-  return /*#__PURE__*/React.createElement(Popper, _extends({}, popperProps));
+    userDefaultProps = _React$useContext.compDefaultProps;
+  // 属性需要合并一遍用户定义的默认属性
+  var allProps = getCompProps('ToolTip', userDefaultProps, props);
+  var status = useRef();
+  var tip = allProps.tip,
+    children = allProps.children,
+    customPrefixcls = allProps.prefixCls;
+  // className前缀
+  var prefixCls = getPrefixCls(pkgPrefixCls, 'tooltip', customPrefixcls);
+  var tiplocator = /*#__PURE__*/React.cloneElement( /*#__PURE__*/React.isValidElement(children) && !isFragment(children) ? children : /*#__PURE__*/React.createElement("span", null, children), {
+    ref: /*#__PURE__*/React.isValidElement(children) && !isFragment(children) && children.ref ? children.ref : ref
+  });
+  var onVisibleChange = function onVisibleChange(v) {
+    if (status.current === v && allProps.visible === undefined) return;
+    status.current = v;
+    props.onVisibleChange && props.onVisibleChange(v);
+  };
+  var popperProps = _extends(_extends({}, allProps), {
+    prefixCls: prefixCls,
+    onVisibleChange: onVisibleChange
+  });
+  var tipPopper = typeof tip === 'function' ? tip() : tip;
+  return usePopper(tiplocator, tipPopper, popperProps);
 });
 Tooltip.displayName = 'Tooltip';
 export default Tooltip;

package/lib/anchor/anchor.js

@@ -192,6 +192,7 @@ var InternalAnchor = function InternalAnchor(props, ref) {
   var normalRef = _react.default.useRef(null);
   var anchorRef = ref || normalRef;
   var linksWidthRef = _react.default.useRef([]);
+  var animating = _react.default.useRef(false);
   var wrapperClass = (0, _classnames.default)(className, (0, _defineProperty2.default)({}, "".concat(anchorPrefixCls, "-wrapper"), true));
   // classes
   var anchorMenuClass = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(anchorPrefixCls, "-menu"), true));
@@ -311,8 +312,12 @@ var InternalAnchor = function InternalAnchor(props, ref) {
     var eleOffsetTop = getOffsetTop(targetElement, container);
     var y = scrollTop + eleOffsetTop;
     y -= targetOffset !== undefined ? targetOffset : offsetTop || 0;
+    animating.current = true;
     scrollTo(y, {
-      getContainer: getScrollContainer
+      getContainer: getScrollContainer,
+      callback: function callback() {
+        animating.current = false;
+      }
     });
   };
   var setCurrentActiveLink = (0, _react.useCallback)(function (link) {
@@ -333,6 +338,9 @@ var InternalAnchor = function InternalAnchor(props, ref) {
         setFixedTop(false);
       }
     }
+    if (animating.current) {
+      return;
+    }
     var currentActiveLink = getAnchor(targetOffset !== undefined ? targetOffset : offsetTop || 0, bounds);
     currentActiveLink && setCurrentActiveLink(currentActiveLink);
   }, [affix, setFixedTop, offsetTop, bounds, getAnchor, setCurrentActiveLink, type, getScrollContainer, anchorRef, targetOffset]);

package/lib/input-number/inputNumber.js

@@ -74,6 +74,10 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     forceUpdate = _useState4[0],
     setForceUpdate = _useState4[1];
+  var _useState5 = (0, _react.useState)(''),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    compositionValue = _useState6[0],
+    setCompositionValue = _useState6[1];
   var inputStatus = (0, _react.useRef)({
     isHandleChange: false,
     inputFocused: false
@@ -83,6 +87,7 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
   var inputNumberRef = ref || thisInputNumberRef;
   var stepMouseDownDelayTimer = (0, _react.useRef)(null);
   var stepMouseDownIntervalTimer = (0, _react.useRef)(null);
+  var refIszComposition = (0, _react.useRef)(false);
   var isScopeValid = function isScopeValid(value) {
     if (value === '') return true;
     var numberValue = parseFloat(value) || 0;
@@ -124,14 +129,20 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
   };
   var handleChange = function handleChange(event) {
     inputStatus.current.isHandleChange = true;
-    var legalNumber = verifiValue(event.target.value);
-    updateSelectionRangePosition(event);
-    if (legalNumber === false) {
-      setForceUpdate(forceUpdate + 1);
-      return false;
+    var newValue = event.target.value;
+    if (!refIszComposition.current) {
+      compositionValue && setCompositionValue('');
+      var legalNumber = verifiValue(newValue);
+      if (legalNumber === false) {
+        setForceUpdate(forceUpdate + 1);
+        return false;
+      }
+      value === undefined && setInputValue(legalNumber);
+      onChange && onChange(handleEventAttachValue(event, numberMode ? Number(legalNumber) : legalNumber));
+      updateSelectionRangePosition(event);
+    } else {
+      setCompositionValue(newValue);
     }
-    value === undefined && setInputValue(legalNumber);
-    onChange && onChange(handleEventAttachValue(event, numberMode ? Number(legalNumber) : legalNumber));
   };
   var handleFocus = function handleFocus(event) {
     inputStatus.current.inputFocused = true;
@@ -330,9 +341,19 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
     inputValue: displayedInputValue,
     forceUpdate: forceUpdate
   });
+  var handleComposition = function handleComposition(e) {
+    refIszComposition.current = e.type !== 'compositionend';
+    if (!refIszComposition.current) {
+      setCompositionValue('');
+      handleChange(e);
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_input.default, (0, _extends2.default)({}, others, {
+    onCompositionStart: handleComposition,
+    onCompositionUpdate: handleComposition,
+    onCompositionEnd: handleComposition,
     ref: inputNumberRef,
-    value: displayedInputValue,
+    value: compositionValue || displayedInputValue,
     prefix: prefix,
     suffix: suffix,
     onChange: handleChange,

package/lib/style/components.less

@@ -34,7 +34,6 @@
 @import "../notification/style/index.less";
 @import "../pagination/style/index.less";
 @import "../popconfirm/style/index.less";
-@import "../popper/style/index.less";
 @import "../progress/style/index.less";
 @import "../qr-code/style/index.less";
 @import "../radio/style/index.less";

package/lib/tooltip/style/index.css

@@ -124,7 +124,68 @@
   background-color: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff));
   -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
           box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
+  opacity: 1;
+  z-index: var(--kd-g-z-index-popper, 1050);
+  visibility: visible;
 }
-.kd-tooltip .arrow::before {
-  border-color: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff));
+.kd-tooltip.hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+.kd-tooltip.arrow::before {
+  position: absolute;
+  z-index: -2;
+  background: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff));
+  border-style: solid;
+  border-width: var(--arrowSize);
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+  content: '';
+}
+.kd-tooltip.arrow::after {
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: '';
+  background: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff));
+  border-radius: var(--kd-g-radius-border, 2px);
+}
+.kd-tooltip.arrow.bottomLeft::before,
+.kd-tooltip.arrow.bottom::before,
+.kd-tooltip.arrow.bottomRight::before {
+  left: var(--arrowLeft);
+  top: var(--arrowSpill);
+  -webkit-box-shadow: -2px -2px calc(6px - 1px) rgba(0, 0, 0, 0.1);
+          box-shadow: -2px -2px calc(6px - 1px) rgba(0, 0, 0, 0.1);
+  border-color: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) transparent transparent var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff));
+}
+.kd-tooltip.arrow.topLeft::before,
+.kd-tooltip.arrow.top::before,
+.kd-tooltip.arrow.topRight::before {
+  left: var(--arrowLeft);
+  bottom: var(--arrowSpill);
+  -webkit-box-shadow: 3px 3px calc(6px + 1px) rgba(0, 0, 0, 0.15);
+          box-shadow: 3px 3px calc(6px + 1px) rgba(0, 0, 0, 0.15);
+  border-color: transparent var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) transparent;
+}
+.kd-tooltip.arrow.leftTop::before,
+.kd-tooltip.arrow.left::before,
+.kd-tooltip.arrow.leftBottom::before {
+  top: var(--arrowTop);
+  right: var(--arrowSpill);
+  -webkit-box-shadow: 3px 0 6px rgba(0, 0, 0, 0.12), 0 -2px 6px rgba(204, 149, 149, 0.12);
+          box-shadow: 3px 0 6px rgba(0, 0, 0, 0.12), 0 -2px 6px rgba(204, 149, 149, 0.12);
+  border-color: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) transparent transparent;
+}
+.kd-tooltip.arrow.rightTop::before,
+.kd-tooltip.arrow.right::before,
+.kd-tooltip.arrow.rightBottom::before {
+  top: var(--arrowTop);
+  left: var(--arrowSpill);
+  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), -2px 0 6px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), -2px 0 6px rgba(0, 0, 0, 0.1);
+  border-color: transparent transparent var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff));
 }

package/lib/tooltip/style/index.less

@@ -14,8 +14,15 @@
   line-height: 1.5;
   background-color: @tooltip-background-color;
   box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
+  opacity: 1;
+  z-index: @z-index-popper;
+  visibility: visible;
 
-  .arrow::before {
-    border-color: @tooltip-background-color;
+  &.hidden {
+    opacity: 0;
+    visibility: hidden;
   }
+
+  // 箭头样式
+  .popperArrow(@tooltip-background-color, @tooltip-horizontal-gap, @tooltip-box-shadow-blur);
 }

package/lib/tooltip/tooltip.d.ts

@@ -1,5 +1,9 @@
 import React from 'react';
-import { PopperProps } from '../popper';
-export declare type TooltipProps = PopperProps;
-declare const Tooltip: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<unknown>>;
+import { PopperProps } from '../_utils/usePopper';
+export declare type RenderFunction = () => React.ReactNode;
+export interface TooltipProps extends PopperProps {
+    children?: React.ReactNode;
+    tip?: React.ReactNode | RenderFunction;
+}
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<unknown>>;
 export default Tooltip;

package/lib/tooltip/tooltip.js

@@ -1,27 +1,48 @@
 "use strict";
 
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _utils = require("../_utils");
+var _reactNode = require("../_utils/reactNode");
 var _configProvider = require("../config-provider");
-var _popper = _interopRequireDefault(require("../popper"));
+var _usePopper = _interopRequireDefault(require("../_utils/usePopper"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var Tooltip = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _React$useContext = _react.default.useContext(_configProvider.ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
     pkgPrefixCls = _React$useContext.prefixCls,
-    compDefaultProps = _React$useContext.compDefaultProps;
-  var allProps = (0, _utils.getCompProps)('ToolTip', compDefaultProps, props);
-  var prefixCls = getPrefixCls(pkgPrefixCls, 'tooltip', allProps === null || allProps === void 0 ? void 0 : allProps.prefixCls);
-  var popperProps = (0, _extends2.default)({
-    ref: ref,
-    prefixCls: prefixCls
-  }, allProps);
-  return /*#__PURE__*/_react.default.createElement(_popper.default, (0, _extends2.default)({}, popperProps));
+    userDefaultProps = _React$useContext.compDefaultProps;
+  // 属性需要合并一遍用户定义的默认属性
+  var allProps = (0, _utils.getCompProps)('ToolTip', userDefaultProps, props);
+  var status = (0, _react.useRef)();
+  var tip = allProps.tip,
+    children = allProps.children,
+    customPrefixcls = allProps.prefixCls;
+  // className前缀
+  var prefixCls = getPrefixCls(pkgPrefixCls, 'tooltip', customPrefixcls);
+  var tiplocator = /*#__PURE__*/_react.default.cloneElement( /*#__PURE__*/_react.default.isValidElement(children) && !(0, _reactNode.isFragment)(children) ? children : /*#__PURE__*/_react.default.createElement("span", null, children), {
+    ref: /*#__PURE__*/_react.default.isValidElement(children) && !(0, _reactNode.isFragment)(children) && children.ref ? children.ref : ref
+  });
+  var onVisibleChange = function onVisibleChange(v) {
+    if (status.current === v && allProps.visible === undefined) return;
+    status.current = v;
+    props.onVisibleChange && props.onVisibleChange(v);
+  };
+  var popperProps = (0, _extends2.default)((0, _extends2.default)({}, allProps), {
+    prefixCls: prefixCls,
+    onVisibleChange: onVisibleChange
+  });
+  var tipPopper = typeof tip === 'function' ? tip() : tip;
+  return (0, _usePopper.default)(tiplocator, tipPopper, popperProps);
 });
 Tooltip.displayName = 'Tooltip';
 var _default = Tooltip;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdcloudjs/kdesign",
-  "version": "1.7.48-usePopper.1",
+  "version": "1.7.49",
   "description": "KDesign 金蝶前端react 组件库",
   "title": "kdesign",
   "keywords": [
@@ -61,7 +61,6 @@
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 && node scripts/filter-changelog.js",
     "pub": "npm run test:all && npm run build && cross-env PUB_ENV=pub np --no-cleanup --no-tests",
     "pub:beta": "npm run test:all && npm run build && cross-env PUB_ENV=pub np --no-cleanup --anyBranch --no-tests --tag=beta",
-    "pub:usePopper": "npm run test:all && npm run build && cross-env PUB_ENV=pub np --no-cleanup --anyBranch --no-tests --tag=usePopper",
     "prepublishOnly": "node scripts/guard.js",
     "new": "node scripts/create-component.js",
     "token": "node scripts/generate-token.js",
@@ -79,8 +78,8 @@
     "@babel/runtime-corejs3": "^7.11.2",
     "@babel/standalone": "^7.14.3",
     "@kdcloudjs/kdesign-icons": "^1.0.0",
-    "@kdcloudjs/table": "1.2.0-canary.12",
-    "@popperjs/core": "^2.11.8",
+    "@kdcloudjs/table": "1.2.0-canary.16",
+    "@popperjs/core": "^2.5.4",
     "@types/js-cookie": "^3.0.3",
     "async-validator": "^3.5.1",
     "axios": "^0.21.1",
@@ -96,7 +95,7 @@
     "qrcode.react": "^3.1.0",
     "react-color": "^2.19.3",
     "react-draggable": "^4.4.3",
-    "react-popper": "^2.3.0",
+    "react-popper": "^2.2.3",
     "resize-observer-polyfill": "^1.5.1",
     "styled-components": "^5.2.1"
   },

package/es/popper/index.d.ts

@@ -1,51 +0,0 @@
-import React from 'react';
-export declare const Placements: ["top", "left", "right", "bottom", "topLeft", "topRight", "bottomLeft", "bottomRight", "leftTop", "leftBottom", "rightTop", "rightBottom"];
-export declare type PlacementType = typeof Placements[number];
-export declare const Triggers: ["hover", "focus", "click", "contextMenu"];
-export declare type TriggerType = typeof Triggers[number];
-export declare type RenderFunction = () => React.ReactNode;
-export interface PopperProps {
-    gap?: number;
-    arrow?: boolean;
-    visible?: boolean;
-    prefixCls?: string;
-    arrowSize?: number;
-    disabled?: boolean;
-    arrowOffset?: number;
-    scrollHidden?: boolean;
-    mouseEnterDelay?: number;
-    mouseLeaveDelay?: number;
-    defaultVisible?: boolean;
-    autoPlacement?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-    popperClassName?: string;
-    popperStyle?: React.CSSProperties;
-    placement?: PlacementType;
-    tip?: any;
-    trigger?: TriggerType | Array<TriggerType>;
-    clickToClose?: boolean;
-    onTrigger?: (trigger: TriggerType) => void;
-    onVisibleChange?: (visible: boolean) => void;
-    getTriggerElement?: (locatorNode: HTMLElement) => HTMLElement;
-    getPopupContainer?: (locatorNode: HTMLElement) => HTMLElement;
-    onTransitionEnd?: (e: React.TransitionEvent) => void;
-    onAnimationEnd?: (e: React.AnimationEvent) => void;
-    children?: React.ReactNode;
-}
-export declare const popperPlacementMap: {
-    top: string;
-    left: string;
-    right: string;
-    bottom: string;
-    topLeft: string;
-    topRight: string;
-    bottomLeft: string;
-    bottomRight: string;
-    leftTop: string;
-    leftBottom: string;
-    rightTop: string;
-    rightBottom: string;
-};
-export declare const Popper: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<unknown>>;
-export default Popper;