@kdcloudjs/kdesign 1.8.68 → 1.8.71

package/es/_utils/usePopper.d.ts

@@ -22,6 +22,7 @@ export interface PopperProps {
     trigger?: TriggerType | Array<TriggerType>;
     clickToClose?: boolean;
     isMobile?: boolean;
+    triggerScroll?: boolean;
     onTrigger?: (trigger: TriggerType) => void;
     onVisibleChange?: (visible: boolean) => void;
     getTriggerElement?: (locatorNode: HTMLElement) => HTMLElement;

package/es/_utils/usePopper.js

@@ -149,6 +149,8 @@ function usePopper(locatorElement, popperElement, props) {
     _props$clickToClose = props.clickToClose,
     clickToClose = _props$clickToClose === void 0 ? true : _props$clickToClose,
     isMobile = props.isMobile,
+    _props$triggerScroll = props.triggerScroll,
+    triggerScroll = _props$triggerScroll === void 0 ? false : _props$triggerScroll,
     _props$getTriggerElem = props.getTriggerElement,
     getTriggerElement = _props$getTriggerElem === void 0 ? function (locatorNode) {
       return locatorNode;
@@ -650,10 +652,16 @@ function usePopper(locatorElement, popperElement, props) {
   useEffect(function () {
     if (visible) {
       var scrollAlign = debounce(function (e) {
-        var isPopperScroll = e.target === popperRef.current || popperRef.current.contains(e.target);
-        if (scrollHidden && !isPopperScroll) {
+        var target = e.target;
+        var popperNode = popperRef.current;
+        var realDom = getRealDom(locatorRef, locatorElement);
+        var triggerNode = realDom ? getTriggerElement(realDom) : null;
+        var isPopperScroll = popperNode && target && (target === popperNode || popperNode.contains(target));
+        var isTriggerScroll = triggerNode && target && (target === triggerNode || triggerNode.contains(target)) && triggerScroll;
+        if (scrollHidden && !isPopperScroll && !isTriggerScroll) {
           props.visible === undefined && setVisible(false);
           onVisibleChange && onVisibleChange(false);
+          return;
         }
         alignPopper();
       }, 10);
@@ -664,7 +672,7 @@ function usePopper(locatorElement, popperElement, props) {
         document.removeEventListener('scroll', scrollAlign, true);
       };
     }
-  }, [alignPopper, exist, onVisibleChange, popperNode, props.visible, scrollHidden, locatorNode, visible, popperRef]);
+  }, [visible, alignPopper, scrollHidden, onVisibleChange, props.visible, popperRef, locatorRef, locatorElement, getTriggerElement]);
   useEffect(function () {
     var realDom = getRealDom(locatorRef, locatorElement);
     var triggerNode = getTriggerElement(realDom);

package/es/color-picker/color-picker.js

@@ -22,7 +22,7 @@ import { colorFormat, strFixed, getColorObj, highlightPresetColorIndex, presetCo
 import { defaultSystemColor } from './constant/defaultColor';
 import Color from 'color';
 import { getCompProps } from '../_utils';
-import usePopper from '../_utils/usePopper';
+import Popper from '../popper';
 import { systemPresetColor } from './constant/systemPresetColor';
 import { removeTransparency } from './utils/removeTransparency';
 var InternalColorPicker = function InternalColorPicker(props, ref) {
@@ -305,7 +305,9 @@ var InternalColorPicker = function InternalColorPicker(props, ref) {
     onVisibleChange: null,
     clickToClose: false
   });
-  return usePopper(colorInputEle, panel, popperProps);
+  return React.createElement(Popper, _extends({
+    tip: panel
+  }, popperProps), colorInputEle);
 };
 var ColorPicker = forwardRef(InternalColorPicker);
 ColorPicker.displayName = 'ColorPicker';

package/es/popper/index.js

@@ -324,7 +324,11 @@ export var Popper = forwardRef(function (props, ref) {
     var delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
     triggerOpen(nextOpen, triggerType, delay);
   };
-  var onClick = debounce(function () {
+  var onClick = debounce(function (e) {
+    var targetEl = e.target;
+    if (!targetEl) return;
+    var ignoreEl = closestPolyfill(targetEl, '[data-popper-ignore]');
+    if (ignoreEl) return;
     if (!visibleInner) {
       onTriggerInner(true, 'click');
     } else if (clickToClose) {
@@ -422,6 +426,10 @@ export var Popper = forwardRef(function (props, ref) {
   useEffect(function () {
     var clickHandle = debounce(function (e) {
       var _a, _b, _c;
+      var targetEl = e.target;
+      if (!targetEl) return;
+      var ignoreEl = closestPolyfill(targetEl, '[data-popper-ignore]');
+      if (ignoreEl) return;
       if (visibleInner) {
         var isPopper = popperRefDom.current ? popperRefDom.current === e.target || ((_b = (_a = popperRefDom.current).contains) === null || _b === void 0 ? void 0 : _b.call(_a, e.target)) : false;
         var domReference = getRealDom(referenceRef, referenceElement);
@@ -440,7 +448,8 @@ export var Popper = forwardRef(function (props, ref) {
         }
       }
     }, 10, {
-      leading: true
+      leading: true,
+      trailing: false
     });
     if (visibleInner) {
       document.addEventListener('click', clickHandle, true);
@@ -621,6 +630,19 @@ export var Popper = forwardRef(function (props, ref) {
       resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
     };
   }, [exist, placementInner]);
+  useEffect(function () {
+    if (!exist) return;
+    var current = getRealDom(referenceRef, referenceElement);
+    if (!current) return;
+    var referenceResizeObserver = new ResizeObserver(function () {
+      var _a;
+      (_a = popperInstance.current) === null || _a === void 0 ? void 0 : _a.update();
+    });
+    referenceResizeObserver.observe(current);
+    return function () {
+      referenceResizeObserver === null || referenceResizeObserver === void 0 ? void 0 : referenceResizeObserver.disconnect();
+    };
+  }, [exist, referenceRef, referenceElement]);
   useEnhancedEffect(function () {
     if (!exist) {
       return undefined;

package/es/select/select.js

@@ -25,7 +25,7 @@ import { getCompProps } from '../_utils';
 import { toArray } from '../_utils/react-children';
 import { Icon, Checkbox, Tag } from '../index';
 import Option from './option';
-import usePopper from '../_utils/usePopper';
+import Popper from '../popper';
 import VirtualList from '../virtual-list';
 import KeyCode from '../_utils/KeyCode';
 var INPUT_MIN_WIDTH = 4;
@@ -726,7 +726,10 @@ var InternalSelect = function InternalSelect(props, ref) {
         onClose: function onClose(e) {
           return handleRemove(e, value);
         },
-        "data-tag": value
+        "data-tag": value,
+        customCloseProps: {
+          'data-popper-ignore': true
+        }
       }, label)) : null;
     }), maxTagCount && mulOptions.length > maxTagCount ? maxTagPlaceholder ? handleMaxTagHolder() : React.createElement("span", {
       className: itemCls
@@ -914,10 +917,13 @@ var InternalSelect = function InternalSelect(props, ref) {
     popperStyle: catchStyle(),
     defaultVisible: optionShow,
     visible: optionShow,
+    triggerScroll: true,
     onVisibleChange: handleVisibleChange,
     clickToClose: !(isShowSearch && searchValue)
   });
-  return usePopper(renderSelect(), renderContent(), popperProps);
+  return React.createElement(Popper, _extends({
+    tip: renderContent()
+  }, popperProps), renderSelect());
 };
 var Select = React.forwardRef(InternalSelect);
 Select.displayName = 'Select';

package/es/table/api.js

@@ -104,7 +104,7 @@ export default function getApi(pipelineRef) {
     var pxRight = colRightPixel - viewportWidth + lockColumnRight;
     var colBeforeViewport = vScrollLeft > colLeftPixel;
     var colPastViewport = vScrollRight < colRightPixel;
-    var colToSmallForViewport = viewportWidth < column.width;
+    var colToSmallForViewport = viewportWidth - lockColumnLeft - lockColumnRight < column.width;
     var alignColToLeft = colBeforeViewport || colToSmallForViewport;
     var alignColToRight = colPastViewport;
     if (alignColToLeft || alignColToRight) {

package/es/tag/tag.d.ts

@@ -20,6 +20,7 @@ export interface ITagProps {
     onClose?: React.MouseEventHandler<HTMLElement>;
     children?: React.ReactNode;
     title?: string;
+    customCloseProps?: unknown;
 }
 declare const Tag: React.ForwardRefExoticComponent<ITagProps & React.RefAttributes<unknown>>;
 export default Tag;

package/es/tag/tag.js

@@ -41,8 +41,9 @@ var InteranalTag = function InteranalTag(props, ref) {
     onClose = tagProps.onClose,
     style = tagProps.style,
     customPrefixcls = tagProps.prefixCls,
+    customCloseProps = tagProps.customCloseProps,
     children = tagProps.children,
-    others = __rest(tagProps, ["className", "clickable", "closable", "closeIcon", "color", "disabled", "icon", "size", "type", "onClick", "onClose", "style", "prefixCls", "children"]);
+    others = __rest(tagProps, ["className", "clickable", "closable", "closeIcon", "color", "disabled", "icon", "size", "type", "onClick", "onClose", "style", "prefixCls", "customCloseProps", "children"]);
   devWarning(TagTypes.indexOf(type) === -1, 'tag', "cannot found tag type '".concat(type, "'"));
   devWarning(TagSizes.indexOf(size) === -1, 'tag', "cannot found tag size '".concat(size, "'"));
   var tagPrefixCls = getPrefixCls(prefixCls, 'tag', customPrefixcls);
@@ -87,10 +88,10 @@ var InteranalTag = function InteranalTag(props, ref) {
   });
   var closeNode = closable && type === 'edit' ? disabled ? React.createElement("span", {
     className: "".concat(tagPrefixCls, "-closeWrapper")
-  }, closeIconNode) : React.createElement("span", {
+  }, closeIconNode) : React.createElement("span", _extends({
     className: "".concat(tagPrefixCls, "-closeWrapper"),
     onClick: handleClose
-  }, closeIconNode) : null;
+  }, customCloseProps), closeIconNode) : null;
   return React.createElement("span", _extends({
     ref: tagRef,
     onClick: handleClick,

package/lib/_utils/usePopper.d.ts

@@ -22,6 +22,7 @@ export interface PopperProps {
     trigger?: TriggerType | Array<TriggerType>;
     clickToClose?: boolean;
     isMobile?: boolean;
+    triggerScroll?: boolean;
     onTrigger?: (trigger: TriggerType) => void;
     onVisibleChange?: (visible: boolean) => void;
     getTriggerElement?: (locatorNode: HTMLElement) => HTMLElement;

package/lib/_utils/usePopper.js

@@ -163,6 +163,8 @@ function usePopper(locatorElement, popperElement, props) {
     _props$clickToClose = props.clickToClose,
     clickToClose = _props$clickToClose === void 0 ? true : _props$clickToClose,
     isMobile = props.isMobile,
+    _props$triggerScroll = props.triggerScroll,
+    triggerScroll = _props$triggerScroll === void 0 ? false : _props$triggerScroll,
     _props$getTriggerElem = props.getTriggerElement,
     getTriggerElement = _props$getTriggerElem === void 0 ? function (locatorNode) {
       return locatorNode;
@@ -664,10 +666,16 @@ function usePopper(locatorElement, popperElement, props) {
   (0, _react.useEffect)(function () {
     if (visible) {
       var scrollAlign = (0, _debounce.default)(function (e) {
-        var isPopperScroll = e.target === popperRef.current || popperRef.current.contains(e.target);
-        if (scrollHidden && !isPopperScroll) {
+        var target = e.target;
+        var popperNode = popperRef.current;
+        var realDom = getRealDom(locatorRef, locatorElement);
+        var triggerNode = realDom ? getTriggerElement(realDom) : null;
+        var isPopperScroll = popperNode && target && (target === popperNode || popperNode.contains(target));
+        var isTriggerScroll = triggerNode && target && (target === triggerNode || triggerNode.contains(target)) && triggerScroll;
+        if (scrollHidden && !isPopperScroll && !isTriggerScroll) {
           props.visible === undefined && setVisible(false);
           onVisibleChange && onVisibleChange(false);
+          return;
         }
         alignPopper();
       }, 10);
@@ -678,7 +686,7 @@ function usePopper(locatorElement, popperElement, props) {
         document.removeEventListener('scroll', scrollAlign, true);
       };
     }
-  }, [alignPopper, exist, onVisibleChange, popperNode, props.visible, scrollHidden, locatorNode, visible, popperRef]);
+  }, [visible, alignPopper, scrollHidden, onVisibleChange, props.visible, popperRef, locatorRef, locatorElement, getTriggerElement]);
   (0, _react.useEffect)(function () {
     var realDom = getRealDom(locatorRef, locatorElement);
     var triggerNode = getTriggerElement(realDom);

package/lib/color-picker/color-picker.js

@@ -24,7 +24,7 @@ var _colorFormat = require("./utils/colorFormat");
 var _defaultColor = require("./constant/defaultColor");
 var _color = _interopRequireDefault(require("color"));
 var _utils = require("../_utils");
-var _usePopper = _interopRequireDefault(require("../_utils/usePopper"));
+var _popper = _interopRequireDefault(require("../popper"));
 var _systemPresetColor = require("./constant/systemPresetColor");
 var _removeTransparency = require("./utils/removeTransparency");
 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); }
@@ -317,7 +317,9 @@ var InternalColorPicker = function InternalColorPicker(props, ref) {
     onVisibleChange: null,
     clickToClose: false
   });
-  return (0, _usePopper.default)(colorInputEle, panel, popperProps);
+  return _react.default.createElement(_popper.default, (0, _extends2.default)({
+    tip: panel
+  }, popperProps), colorInputEle);
 };
 var ColorPicker = (0, _react.forwardRef)(InternalColorPicker);
 ColorPicker.displayName = 'ColorPicker';

package/lib/popper/index.js

@@ -341,7 +341,11 @@ var Popper = (0, _react.forwardRef)(function (props, ref) {
     var delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
     triggerOpen(nextOpen, triggerType, delay);
   };
-  var onClick = (0, _debounce.default)(function () {
+  var onClick = (0, _debounce.default)(function (e) {
+    var targetEl = e.target;
+    if (!targetEl) return;
+    var ignoreEl = closestPolyfill(targetEl, '[data-popper-ignore]');
+    if (ignoreEl) return;
     if (!visibleInner) {
       onTriggerInner(true, 'click');
     } else if (clickToClose) {
@@ -439,6 +443,10 @@ var Popper = (0, _react.forwardRef)(function (props, ref) {
   (0, _react.useEffect)(function () {
     var clickHandle = (0, _debounce.default)(function (e) {
       var _a, _b, _c;
+      var targetEl = e.target;
+      if (!targetEl) return;
+      var ignoreEl = closestPolyfill(targetEl, '[data-popper-ignore]');
+      if (ignoreEl) return;
       if (visibleInner) {
         var isPopper = popperRefDom.current ? popperRefDom.current === e.target || ((_b = (_a = popperRefDom.current).contains) === null || _b === void 0 ? void 0 : _b.call(_a, e.target)) : false;
         var domReference = getRealDom(referenceRef, referenceElement);
@@ -457,7 +465,8 @@ var Popper = (0, _react.forwardRef)(function (props, ref) {
         }
       }
     }, 10, {
-      leading: true
+      leading: true,
+      trailing: false
     });
     if (visibleInner) {
       document.addEventListener('click', clickHandle, true);
@@ -638,6 +647,19 @@ var Popper = (0, _react.forwardRef)(function (props, ref) {
       resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
     };
   }, [exist, placementInner]);
+  (0, _react.useEffect)(function () {
+    if (!exist) return;
+    var current = getRealDom(referenceRef, referenceElement);
+    if (!current) return;
+    var referenceResizeObserver = new _resizeObserverPolyfill.default(function () {
+      var _a;
+      (_a = popperInstance.current) === null || _a === void 0 ? void 0 : _a.update();
+    });
+    referenceResizeObserver.observe(current);
+    return function () {
+      referenceResizeObserver === null || referenceResizeObserver === void 0 ? void 0 : referenceResizeObserver.disconnect();
+    };
+  }, [exist, referenceRef, referenceElement]);
   useEnhancedEffect(function () {
     if (!exist) {
       return undefined;

package/lib/select/select.js

@@ -32,7 +32,7 @@ var _utils = require("../_utils");
 var _reactChildren = require("../_utils/react-children");
 var _index = require("../index");
 var _option = _interopRequireDefault(require("./option"));
-var _usePopper = _interopRequireDefault(require("../_utils/usePopper"));
+var _popper = _interopRequireDefault(require("../popper"));
 var _virtualList = _interopRequireDefault(require("../virtual-list"));
 var _KeyCode = _interopRequireDefault(require("../_utils/KeyCode"));
 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); }
@@ -738,7 +738,10 @@ var InternalSelect = function InternalSelect(props, ref) {
         onClose: function onClose(e) {
           return handleRemove(e, value);
         },
-        "data-tag": value
+        "data-tag": value,
+        customCloseProps: {
+          'data-popper-ignore': true
+        }
       }, label)) : null;
     }), maxTagCount && mulOptions.length > maxTagCount ? maxTagPlaceholder ? handleMaxTagHolder() : _react.default.createElement("span", {
       className: itemCls
@@ -926,10 +929,13 @@ var InternalSelect = function InternalSelect(props, ref) {
     popperStyle: catchStyle(),
     defaultVisible: optionShow,
     visible: optionShow,
+    triggerScroll: true,
     onVisibleChange: handleVisibleChange,
     clickToClose: !(isShowSearch && searchValue)
   });
-  return (0, _usePopper.default)(renderSelect(), renderContent(), popperProps);
+  return _react.default.createElement(_popper.default, (0, _extends2.default)({
+    tip: renderContent()
+  }, popperProps), renderSelect());
 };
 var Select = _react.default.forwardRef(InternalSelect);
 Select.displayName = 'Select';

package/lib/table/api.js

@@ -111,7 +111,7 @@ function getApi(pipelineRef) {
     var pxRight = colRightPixel - viewportWidth + lockColumnRight;
     var colBeforeViewport = vScrollLeft > colLeftPixel;
     var colPastViewport = vScrollRight < colRightPixel;
-    var colToSmallForViewport = viewportWidth < column.width;
+    var colToSmallForViewport = viewportWidth - lockColumnLeft - lockColumnRight < column.width;
     var alignColToLeft = colBeforeViewport || colToSmallForViewport;
     var alignColToRight = colPastViewport;
     if (alignColToLeft || alignColToRight) {

package/lib/tag/tag.d.ts

@@ -20,6 +20,7 @@ export interface ITagProps {
     onClose?: React.MouseEventHandler<HTMLElement>;
     children?: React.ReactNode;
     title?: string;
+    customCloseProps?: unknown;
 }
 declare const Tag: React.ForwardRefExoticComponent<ITagProps & React.RefAttributes<unknown>>;
 export default Tag;

package/lib/tag/tag.js

@@ -56,8 +56,9 @@ var InteranalTag = function InteranalTag(props, ref) {
     onClose = tagProps.onClose,
     style = tagProps.style,
     customPrefixcls = tagProps.prefixCls,
+    customCloseProps = tagProps.customCloseProps,
     children = tagProps.children,
-    others = __rest(tagProps, ["className", "clickable", "closable", "closeIcon", "color", "disabled", "icon", "size", "type", "onClick", "onClose", "style", "prefixCls", "children"]);
+    others = __rest(tagProps, ["className", "clickable", "closable", "closeIcon", "color", "disabled", "icon", "size", "type", "onClick", "onClose", "style", "prefixCls", "customCloseProps", "children"]);
   (0, _devwarning.default)(TagTypes.indexOf(type) === -1, 'tag', "cannot found tag type '".concat(type, "'"));
   (0, _devwarning.default)(TagSizes.indexOf(size) === -1, 'tag', "cannot found tag size '".concat(size, "'"));
   var tagPrefixCls = getPrefixCls(prefixCls, 'tag', customPrefixcls);
@@ -102,10 +103,10 @@ var InteranalTag = function InteranalTag(props, ref) {
   });
   var closeNode = closable && type === 'edit' ? disabled ? _react.default.createElement("span", {
     className: "".concat(tagPrefixCls, "-closeWrapper")
-  }, closeIconNode) : _react.default.createElement("span", {
+  }, closeIconNode) : _react.default.createElement("span", (0, _extends2.default)({
     className: "".concat(tagPrefixCls, "-closeWrapper"),
     onClick: handleClose
-  }, closeIconNode) : null;
+  }, customCloseProps), closeIconNode) : null;
   return _react.default.createElement("span", (0, _extends2.default)({
     ref: tagRef,
     onClick: handleClick,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdcloudjs/kdesign",
-  "version": "1.8.68",
+  "version": "1.8.71",
   "description": "KDesign 金蝶前端react 组件库",
   "title": "kdesign",
   "keywords": [