@kdcloudjs/kdesign 1.8.11 → 1.8.12

package/es/base-data/base-data.js

@@ -16,6 +16,7 @@ import ConfigContext from '../config-provider/ConfigContext';
 import { getCompProps } from '../_utils';
 import { Input, Icon, Tabs, Empty, Spin, Checkbox } from '../index';
 import usePopper from '../_utils/usePopper';
+import ResizeObserver from '../_utils/resizeObserver';
 var InternalBaseData = function InternalBaseData(props, ref) {
   var _context2;
   var _useContext = useContext(ConfigContext),
@@ -195,9 +196,9 @@ var InternalBaseData = function InternalBaseData(props, ref) {
       return item;
     });
   };
-  // 当选中项文字超出输入框时，显示共多少项
-  useLayoutEffect(function () {
+  var handleShowTotal = useCallback(function () {
     var _a;
+    if (!isMultiple) return;
     var inputDom = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.input;
     if (!inputDom) return;
     if (inputDom.scrollWidth - inputDom.offsetWidth > 0 && inputValue) {
@@ -205,7 +206,11 @@ var InternalBaseData = function InternalBaseData(props, ref) {
     } else {
       setShowTotal(false);
     }
-  }, [inputRef, inputValue]);
+  }, [inputValue, isMultiple]);
+  // 当选中项文字超出输入框时，显示共多少项
+  useLayoutEffect(function () {
+    handleShowTotal();
+  }, [handleShowTotal]);
   // 通过选中项显示input文字， optionLabelProp为回填到选择框的属性
   var setValueBySeleted = useCallback(function () {
     var _context8;
@@ -461,6 +466,8 @@ var InternalBaseData = function InternalBaseData(props, ref) {
       className: advancedSelectorCls,
       ref: advancedSelectorRef,
       style: style
+    }, /*#__PURE__*/React.createElement(ResizeObserver, {
+      onResize: handleShowTotal
     }, /*#__PURE__*/React.createElement(Input, {
       ref: inputRef,
       borderType: "none",
@@ -471,7 +478,7 @@ var InternalBaseData = function InternalBaseData(props, ref) {
       onDoubleClick: handleDoubleClick,
       onFocus: handleFocus,
       onBlur: handleBlur
-    }), showTotal && !isFocused && isMultiple && /*#__PURE__*/React.createElement("span", {
+    })), showTotal && !isFocused && isMultiple && /*#__PURE__*/React.createElement("span", {
       className: "".concat(advancedSelectorfixCls, "-total"),
       onClick: showInputTotal
     }, totalText), isShowDetailBtn && !disabled && /*#__PURE__*/React.createElement("span", {

package/es/popper/index.d.ts

@@ -4,6 +4,7 @@ export declare const Placements: ["top", "left", "right", "bottom", "topLeft", "
 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 Reason = TriggerType | 'scroll' | 'clickOutside' | 'parentHidden' | 'unknown';
 export declare type RenderFunction = () => React.ReactNode;
 export declare type PopperProps = {
     gap?: number;
@@ -29,7 +30,7 @@ export declare type PopperProps = {
     strategy?: 'fixed' | 'absolute';
     clickToClose?: boolean;
     onTrigger?: (trigger: TriggerType) => void;
-    onVisibleChange?: (visible: boolean) => void;
+    onVisibleChange?: (visible: boolean, reason?: Reason) => void;
     getTriggerElement?: (locatorNode: HTMLElement) => HTMLElement;
     getPopupContainer?: (locatorNode: HTMLElement) => HTMLElement;
     onTransitionEnd?: (e: React.TransitionEvent) => void;

package/es/popper/index.js

@@ -114,8 +114,10 @@ export var Popper = /*#__PURE__*/forwardRef(function (props, ref) {
     visible = props.visible,
     _props$arrowSize = props.arrowSize,
     arrowSize = _props$arrowSize === void 0 ? 4.25 : _props$arrowSize,
+    _props$arrowOffset = props.arrowOffset,
+    arrowOffset = _props$arrowOffset === void 0 ? 12 : _props$arrowOffset,
     _props$gap = props.gap,
-    defaultGap = _props$gap === void 0 ? 4 : _props$gap,
+    defaultGap = _props$gap === void 0 ? 8 : _props$gap,
     _props$scrollHidden = props.scrollHidden,
     scrollHidden = _props$scrollHidden === void 0 ? false : _props$scrollHidden,
     _props$mouseEnterDela = props.mouseEnterDelay,
@@ -147,6 +149,26 @@ export var Popper = /*#__PURE__*/forwardRef(function (props, ref) {
   var childrenInner = /*#__PURE__*/isValidElement(child) && !isFragment(child) ? child : /*#__PURE__*/React.createElement("span", null, child);
   var popperElement = getElement(tip);
   var referenceElement = Children.only(childrenInner);
+  var arrowOffsetInner = arrowSize + arrowOffset;
+  var getArrowOffset = function getArrowOffset(popperSize, referenceSize, arr) {
+    var boundary = arrowOffsetInner * 2;
+    var offset;
+    if (referenceSize < boundary || popperSize < boundary) {
+      var o = Math.min(referenceSize, popperSize) / 2;
+      if (arr[1] === 'start') {
+        offset = o;
+      } else {
+        offset = Math.max(popperSize - o, 0);
+      }
+    } else {
+      if (arr[1] === 'start') {
+        offset = arrowOffsetInner;
+      } else {
+        offset = popperSize - arrowOffsetInner;
+      }
+    }
+    return offset;
+  };
   var id = useId();
   var parentContext = useContext(TriggerContext);
   var subPopupRefs = useRef({});
@@ -188,7 +210,7 @@ export var Popper = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   };
   var changeVisible = function changeVisible(nextOpen) {
-    var triggerType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    var triggerType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'unknown';
     if (visibleInner !== nextOpen) {
       if (nextOpen && _includesInstanceProperty(triggerTypeArray).call(triggerTypeArray, triggerType)) {
         onTrigger === null || onTrigger === void 0 ? void 0 : onTrigger(triggerType);
@@ -196,18 +218,18 @@ export var Popper = /*#__PURE__*/forwardRef(function (props, ref) {
       if (typeof visible === 'undefined') {
         setVisibleInner(nextOpen);
       }
-      onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(nextOpen);
+      onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(nextOpen, triggerType);
     }
     if (!nextOpen && _Object$keys(subPopupRefs.current || {}).length) {
       _Object$values(subPopupRefs.current).forEach(function (d) {
         if (typeof (d === null || d === void 0 ? void 0 : d.triggerOpen) === 'function' && (d === null || d === void 0 ? void 0 : d.visible)) {
-          d === null || d === void 0 ? void 0 : d.triggerOpen(false);
+          d === null || d === void 0 ? void 0 : d.triggerOpen(false, 'parentHidden');
         }
       });
     }
   };
   var triggerOpen = function triggerOpen(nextOpen) {
-    var triggerType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    var triggerType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'unknown';
     var delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
     clearDelay();
     if (!disabled) {
@@ -340,7 +362,9 @@ export var Popper = /*#__PURE__*/forwardRef(function (props, ref) {
           triggerOpen(false, 'clickOutside', 0);
         }
       }
-    }, 10);
+    }, 10, {
+      leading: true
+    });
     if (visibleInner) {
       document.addEventListener('click', clickHandle, true);
     }
@@ -370,7 +394,7 @@ export var Popper = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, {
     name: 'preventOverflow',
-    enabled: autoPlacement,
+    enabled: autoPlacement && !_includesInstanceProperty(placementInner).call(placementInner, '-'),
     options: {
       mainAxis: true
     }
@@ -380,6 +404,50 @@ export var Popper = /*#__PURE__*/forwardRef(function (props, ref) {
     options: {
       fallbackPlacements: Array.isArray(autoPlacementList) ? getFallbackPlacementList(autoPlacementList) : undefined
     }
+  }, {
+    name: 'applyArrowOffset',
+    enabled: true,
+    phase: 'write',
+    fn: function fn(data) {
+      var _data$state = data.state,
+        arrow = _data$state.elements.arrow,
+        placement = _data$state.placement,
+        _data$state$rects = _data$state.rects,
+        popper = _data$state$rects.popper,
+        reference = _data$state$rects.reference;
+      if (arrow) {
+        var arr = placement.split('-');
+        var offset;
+        if (arr.length === 2) {
+          switch (arr[0]) {
+            case 'bottom':
+              offset = getArrowOffset(popper.width, reference.width, arr);
+              if (offset) {
+                arrow.style.transform = "translate(".concat(offset, "px, 0px)");
+              }
+              break;
+            case 'left':
+              offset = getArrowOffset(popper.height, reference.height, arr);
+              if (offset) {
+                arrow.style.transform = "translate(0px, ".concat(offset, "px)");
+              }
+              break;
+            case 'right':
+              offset = getArrowOffset(popper.height, reference.height, arr);
+              if (offset) {
+                arrow.style.transform = "translate(0px, ".concat(offset, "px)");
+              }
+              break;
+            default:
+              offset = getArrowOffset(popper.width, reference.width, arr);
+              if (offset) {
+                arrow.style.transform = "translate(".concat(offset, "px, 0px)");
+              }
+              break;
+          }
+        }
+      }
+    }
   }, {
     name: 'onUpdate',
     enabled: true,

package/lib/base-data/base-data.js

@@ -26,6 +26,7 @@ var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigCo
 var _utils = require("../_utils");
 var _index = require("../index");
 var _usePopper = _interopRequireDefault(require("../_utils/usePopper"));
+var _resizeObserver = _interopRequireDefault(require("../_utils/resizeObserver"));
 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 InternalBaseData = function InternalBaseData(props, ref) {
@@ -207,9 +208,9 @@ var InternalBaseData = function InternalBaseData(props, ref) {
       return item;
     });
   };
-  // 当选中项文字超出输入框时，显示共多少项
-  (0, _react.useLayoutEffect)(function () {
+  var handleShowTotal = (0, _react.useCallback)(function () {
     var _a;
+    if (!isMultiple) return;
     var inputDom = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.input;
     if (!inputDom) return;
     if (inputDom.scrollWidth - inputDom.offsetWidth > 0 && inputValue) {
@@ -217,7 +218,11 @@ var InternalBaseData = function InternalBaseData(props, ref) {
     } else {
       setShowTotal(false);
     }
-  }, [inputRef, inputValue]);
+  }, [inputValue, isMultiple]);
+  // 当选中项文字超出输入框时，显示共多少项
+  (0, _react.useLayoutEffect)(function () {
+    handleShowTotal();
+  }, [handleShowTotal]);
   // 通过选中项显示input文字， optionLabelProp为回填到选择框的属性
   var setValueBySeleted = (0, _react.useCallback)(function () {
     var _context8;
@@ -473,6 +478,8 @@ var InternalBaseData = function InternalBaseData(props, ref) {
       className: advancedSelectorCls,
       ref: advancedSelectorRef,
       style: style
+    }, /*#__PURE__*/_react.default.createElement(_resizeObserver.default, {
+      onResize: handleShowTotal
     }, /*#__PURE__*/_react.default.createElement(_index.Input, {
       ref: inputRef,
       borderType: "none",
@@ -483,7 +490,7 @@ var InternalBaseData = function InternalBaseData(props, ref) {
       onDoubleClick: handleDoubleClick,
       onFocus: handleFocus,
       onBlur: handleBlur
-    }), showTotal && !isFocused && isMultiple && /*#__PURE__*/_react.default.createElement("span", {
+    })), showTotal && !isFocused && isMultiple && /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(advancedSelectorfixCls, "-total"),
       onClick: showInputTotal
     }, totalText), isShowDetailBtn && !disabled && /*#__PURE__*/_react.default.createElement("span", {

package/lib/popper/index.d.ts

@@ -4,6 +4,7 @@ export declare const Placements: ["top", "left", "right", "bottom", "topLeft", "
 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 Reason = TriggerType | 'scroll' | 'clickOutside' | 'parentHidden' | 'unknown';
 export declare type RenderFunction = () => React.ReactNode;
 export declare type PopperProps = {
     gap?: number;
@@ -29,7 +30,7 @@ export declare type PopperProps = {
     strategy?: 'fixed' | 'absolute';
     clickToClose?: boolean;
     onTrigger?: (trigger: TriggerType) => void;
-    onVisibleChange?: (visible: boolean) => void;
+    onVisibleChange?: (visible: boolean, reason?: Reason) => void;
     getTriggerElement?: (locatorNode: HTMLElement) => HTMLElement;
     getPopupContainer?: (locatorNode: HTMLElement) => HTMLElement;
     onTransitionEnd?: (e: React.TransitionEvent) => void;

package/lib/popper/index.js

@@ -129,8 +129,10 @@ var Popper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     visible = props.visible,
     _props$arrowSize = props.arrowSize,
     arrowSize = _props$arrowSize === void 0 ? 4.25 : _props$arrowSize,
+    _props$arrowOffset = props.arrowOffset,
+    arrowOffset = _props$arrowOffset === void 0 ? 12 : _props$arrowOffset,
     _props$gap = props.gap,
-    defaultGap = _props$gap === void 0 ? 4 : _props$gap,
+    defaultGap = _props$gap === void 0 ? 8 : _props$gap,
     _props$scrollHidden = props.scrollHidden,
     scrollHidden = _props$scrollHidden === void 0 ? false : _props$scrollHidden,
     _props$mouseEnterDela = props.mouseEnterDelay,
@@ -162,6 +164,26 @@ var Popper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var childrenInner = /*#__PURE__*/(0, _react.isValidElement)(child) && !(0, _reactNode.isFragment)(child) ? child : /*#__PURE__*/_react.default.createElement("span", null, child);
   var popperElement = getElement(tip);
   var referenceElement = _react.Children.only(childrenInner);
+  var arrowOffsetInner = arrowSize + arrowOffset;
+  var getArrowOffset = function getArrowOffset(popperSize, referenceSize, arr) {
+    var boundary = arrowOffsetInner * 2;
+    var offset;
+    if (referenceSize < boundary || popperSize < boundary) {
+      var o = Math.min(referenceSize, popperSize) / 2;
+      if (arr[1] === 'start') {
+        offset = o;
+      } else {
+        offset = Math.max(popperSize - o, 0);
+      }
+    } else {
+      if (arr[1] === 'start') {
+        offset = arrowOffsetInner;
+      } else {
+        offset = popperSize - arrowOffsetInner;
+      }
+    }
+    return offset;
+  };
   var id = (0, _useId.default)();
   var parentContext = (0, _react.useContext)(TriggerContext);
   var subPopupRefs = (0, _react.useRef)({});
@@ -203,7 +225,7 @@ var Popper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   };
   var changeVisible = function changeVisible(nextOpen) {
-    var triggerType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    var triggerType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'unknown';
     if (visibleInner !== nextOpen) {
       if (nextOpen && (0, _includes.default)(triggerTypeArray).call(triggerTypeArray, triggerType)) {
         onTrigger === null || onTrigger === void 0 ? void 0 : onTrigger(triggerType);
@@ -211,18 +233,18 @@ var Popper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       if (typeof visible === 'undefined') {
         setVisibleInner(nextOpen);
       }
-      onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(nextOpen);
+      onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(nextOpen, triggerType);
     }
     if (!nextOpen && (0, _keys.default)(subPopupRefs.current || {}).length) {
       (0, _values.default)(subPopupRefs.current).forEach(function (d) {
         if (typeof (d === null || d === void 0 ? void 0 : d.triggerOpen) === 'function' && (d === null || d === void 0 ? void 0 : d.visible)) {
-          d === null || d === void 0 ? void 0 : d.triggerOpen(false);
+          d === null || d === void 0 ? void 0 : d.triggerOpen(false, 'parentHidden');
         }
       });
     }
   };
   var triggerOpen = function triggerOpen(nextOpen) {
-    var triggerType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    var triggerType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'unknown';
     var delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
     clearDelay();
     if (!disabled) {
@@ -355,7 +377,9 @@ var Popper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           triggerOpen(false, 'clickOutside', 0);
         }
       }
-    }, 10);
+    }, 10, {
+      leading: true
+    });
     if (visibleInner) {
       document.addEventListener('click', clickHandle, true);
     }
@@ -385,7 +409,7 @@ var Popper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   }, {
     name: 'preventOverflow',
-    enabled: autoPlacement,
+    enabled: autoPlacement && !(0, _includes.default)(placementInner).call(placementInner, '-'),
     options: {
       mainAxis: true
     }
@@ -395,6 +419,50 @@ var Popper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     options: {
       fallbackPlacements: Array.isArray(autoPlacementList) ? getFallbackPlacementList(autoPlacementList) : undefined
     }
+  }, {
+    name: 'applyArrowOffset',
+    enabled: true,
+    phase: 'write',
+    fn: function fn(data) {
+      var _data$state = data.state,
+        arrow = _data$state.elements.arrow,
+        placement = _data$state.placement,
+        _data$state$rects = _data$state.rects,
+        popper = _data$state$rects.popper,
+        reference = _data$state$rects.reference;
+      if (arrow) {
+        var arr = placement.split('-');
+        var offset;
+        if (arr.length === 2) {
+          switch (arr[0]) {
+            case 'bottom':
+              offset = getArrowOffset(popper.width, reference.width, arr);
+              if (offset) {
+                arrow.style.transform = "translate(".concat(offset, "px, 0px)");
+              }
+              break;
+            case 'left':
+              offset = getArrowOffset(popper.height, reference.height, arr);
+              if (offset) {
+                arrow.style.transform = "translate(0px, ".concat(offset, "px)");
+              }
+              break;
+            case 'right':
+              offset = getArrowOffset(popper.height, reference.height, arr);
+              if (offset) {
+                arrow.style.transform = "translate(0px, ".concat(offset, "px)");
+              }
+              break;
+            default:
+              offset = getArrowOffset(popper.width, reference.width, arr);
+              if (offset) {
+                arrow.style.transform = "translate(".concat(offset, "px, 0px)");
+              }
+              break;
+          }
+        }
+      }
+    }
   }, {
     name: 'onUpdate',
     enabled: true,

package/package.json

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