shineout 3.6.1-beta.5 → 3.6.1-beta.7

package/cjs/index.js

@@ -514,5 +514,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // 此文件由脚本自动生成，请勿直接修改。
 // This file was generated automatically by a script. Please do not modify it directly.
 var _default = exports.default = {
-  version: '3.6.1-beta.5'
+  version: '3.6.1-beta.7'
 };

package/dist/shineout.js

@@ -12139,7 +12139,7 @@ var handleStyle = function handleStyle(style) {
 };
 /* harmony default export */ var jss_style_handleStyle = (handleStyle);
 ;// CONCATENATED MODULE: ../shineout-style/src/version.ts
-/* harmony default export */ var version = ('3.6.1-beta.5');
+/* harmony default export */ var version = ('3.6.1-beta.7');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -27320,10 +27320,10 @@ var arrowHeight = 8;
 var tooltip_animation = {
   '@keyframes fadeIn': {
     '0%': {
-      opacity: '0'
+      opacity: 0
     },
     '100%': {
-      opacity: '1'
+      opacity: 1
     }
   },
   '@keyframes moveRight': {
@@ -27336,26 +27336,32 @@ var tooltip_animation = {
   },
   '@keyframes moveLeft': {
     '0%': {
-      marginLeft: '0'
+      opacity: 0,
+      marginRight: '0'
     },
     '100%': {
-      marginLeft: '-9px'
+      opacity: 1,
+      marginRight: '10px'
     }
   },
   '@keyframes moveTop': {
     '0%': {
+      opacity: 0,
       marginTop: '0'
     },
     '100%': {
-      marginTop: '-9px'
+      opacity: 1,
+      marginTop: -10
     }
   },
   '@keyframes moveBottom': {
     '0%': {
+      opacity: 0,
       marginTop: '0'
     },
     '100%': {
-      marginTop: '9px'
+      opacity: 1,
+      marginTop: 10
     }
   }
 };
@@ -27380,10 +27386,10 @@ var tooltipStyle = objectSpread2_default()(objectSpread2_default()({
       boxSizing: 'border-box',
       '--tooltip-background-color': src.tooltipLightBackgroundColor,
       '&[data-soui-position^="top"] $arrow': {
-        transform: 'translateY(calc(100% - 1px)) rotate(-180deg)'
+        transform: 'translate(0, -1px) rotate(-180deg)'
       },
       '&[data-soui-position^="bottom"] $arrow': {
-        transform: 'translateY(calc(-100% + 1px)) rotate(0deg)'
+        transform: 'translate(0, calc(-100% + 1px)) rotate(0deg)'
       }
     },
     '&[data-soui-type^="primary"]': {
@@ -27407,45 +27413,109 @@ var tooltipStyle = objectSpread2_default()(objectSpread2_default()({
       '--tooltip-background-color': src.tooltipDangerBackgroundColor
     },
     '&[data-soui-position^="bottom"]': {
-      marginTop: arrowGap - 2,
+      marginTop: arrowGap - 2
+    },
+    '&[data-soui-position="bottom"]': {
       '& $arrow': {
-        transform: 'translateY(calc(-100% + 1px)) rotate(0deg)'
+        left: '50%',
+        transform: 'translate(-50%, calc(-100% + 1px)) rotate(0deg)'
+      }
+    },
+    '&[data-soui-position="bottom-left"]': {
+      '& $arrow': {
+        left: 8,
+        transform: 'translate(0, calc(-100% + 1px)) rotate(0deg)'
+      }
+    },
+    '&[data-soui-position="bottom-right"]': {
+      '& $arrow': {
+        right: 8,
+        transform: 'translate(0, calc(-100% + 1px)) rotate(0deg)'
       }
     },
     '&[data-soui-position^="top"]': {
       marginTop: (arrowGap - 2) * -1,
       '& $arrow': {
-        transform: 'translateY(calc(100% + 1px)) rotate(-180deg)'
+        top: '100%'
+      }
+    },
+    '&[data-soui-position="top"]': {
+      '& $arrow': {
+        left: '50%',
+        transform: 'translate(-50%, -1px) rotate(-180deg)'
+      }
+    },
+    '&[data-soui-position="top-left"]': {
+      '& $arrow': {
+        left: 8,
+        transform: 'translate(0, -1px) rotate(-180deg)'
+      }
+    },
+    '&[data-soui-position="top-right"]': {
+      '& $arrow': {
+        right: 8,
+        transform: 'translate(0, -1px) rotate(-180deg)'
       }
     },
     '&[data-soui-position^="left"]': {
       '&[dir=ltr]': {
-        marginRight: arrowGap - 2,
-        '& $arrow': {
-          transform: 'translateX(11px) rotate(90deg)'
-        }
+        marginRight: arrowGap - 2
       },
       '&[dir=rtl]': {
-        'margin-right': arrowGap - 2,
-        '& $arrow': {
-          left: 0,
-          transform: 'translateX(11px) rotate(90deg)'
-        }
+        'margin-right': arrowGap - 2
+      }
+    },
+    '&[data-soui-position="left"]': {
+      '& $arrow': {
+        right: 0,
+        top: '50%',
+        transform: 'translate(11px, -50%) rotate(90deg)',
+        transformOrigin: 'center center'
+      }
+    },
+    '&[data-soui-position="left-top"]': {
+      '& $arrow': {
+        right: 0,
+        top: 8,
+        transform: 'translate(11px, 0) rotate(90deg)',
+        transformOrigin: 'center center'
+      }
+    },
+    '&[data-soui-position="left-bottom"]': {
+      '& $arrow': {
+        right: 0,
+        bottom: 8,
+        transform: 'translate(11px, 0) rotate(90deg)',
+        transformOrigin: 'center center'
       }
     },
     '&[data-soui-position^="right"]': {
       '&[dir=ltr]': {
-        marginLeft: arrowGap - 2,
-        '& $arrow': {
-          transform: 'translateX(-11px) rotate(-90deg)'
-        }
+        marginLeft: arrowGap - 2
       },
       '&[dir=rtl]': {
-        marginRight: arrowGap - 2,
-        '& $arrow': {
-          left: 0,
-          transform: 'translateX(-11px) rotate(-90deg)'
-        }
+        marginRight: arrowGap - 2
+      }
+    },
+    '&[data-soui-position="right"]': {
+      '& $arrow': {
+        top: '50%',
+        left: 0,
+        transform: 'translate(-11px, -50%) rotate(-90deg)'
+      }
+    },
+    '&[data-soui-position="right-top"]': {
+      '& $arrow': {
+        top: 8,
+        left: 0,
+        transform: 'translate(-11px, 0) rotate(-90deg)'
+      }
+    },
+    '&[data-soui-position="right-bottom"]': {
+      '& $arrow': {
+        bottom: 8,
+        left: 0,
+        transform: 'translate(-11px, 0) rotate(-90deg)'
       }
     }
   },
@@ -29605,7 +29675,6 @@ var usePopup = function usePopup(props) {
     removeChild = _useContext.removeChild;
   var targetRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var popupRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
-  var arrowRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     bindChild(popupRef);
     return function () {
@@ -29774,7 +29843,6 @@ var usePopup = function usePopup(props) {
     position: position,
     targetRef: targetRef,
     popupRef: popupRef,
-    arrowRef: arrowRef,
     getTargetProps: getTargetProps,
     openPop: openPop,
     closePop: closePop,
@@ -29945,19 +30013,17 @@ function getParent(el, target) {
   }
   return null;
 }
+function isScrollable(el) {
+  var style = window.getComputedStyle(el);
+  var overflowX = style.overflowX;
+  var overflowY = style.overflowY;
+  return (overflowX === 'auto' || overflowX === 'scroll' || overflowY === 'auto' || overflowY === 'scroll') && (el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth);
+}
 function getClosestScrollContainer(element) {
   if (!element) {
     return null;
   }
 
-  // 检查元素是否可滚动
-  var isScrollable = function isScrollable(el) {
-    var style = window.getComputedStyle(el);
-    var overflowX = style.overflowX;
-    var overflowY = style.overflowY;
-    return (overflowX === 'auto' || overflowX === 'scroll' || overflowY === 'auto' || overflowY === 'scroll') && (el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth);
-  };
-
   // 如果元素本身是可滚动的，直接返回
   if (isScrollable(element)) {
     return element;
@@ -30099,15 +30165,19 @@ var useCheckElementPosition = function useCheckElementPosition(elementRef) {
       if (scrollContainerRect) {
         newPosition = {
           top: rect.top - scrollContainerRect.top,
-          left: rect.left - scrollContainerRect.left
+          left: rect.left - scrollContainerRect.left,
+          width: rect.width,
+          height: rect.height
         };
       } else {
         newPosition = {
           top: rect.top,
-          left: rect.left
+          left: rect.left,
+          width: rect.width,
+          height: rect.height
         };
       }
-      if (newPosition.top !== lastPosition.current.top || newPosition.left !== lastPosition.current.left) {
+      if (newPosition.top !== lastPosition.current.top || newPosition.left !== lastPosition.current.left || newPosition.width !== lastPosition.current.width || newPosition.height !== lastPosition.current.height) {
         setPosition(newPosition);
         lastPosition.current = newPosition;
       }
@@ -30333,10 +30403,6 @@ var usePositionStyle = function usePositionStyle(config) {
     _useState2 = slicedToArray_default()(_useState, 2),
     style = _useState2[0],
     setStyle = _useState2[1];
-  var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({}),
-    _useState4 = slicedToArray_default()(_useState3, 2),
-    arrayStyle = _useState4[0],
-    setArrayStyle = _useState4[1];
   var _React$useRef = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useRef({
       containerRect: {
         left: 0,
@@ -30421,7 +30487,6 @@ var usePositionStyle = function usePositionStyle(config) {
       position: 'absolute',
       zIndex: zIndex
     };
-    var arrayStyle = {};
     if (fixedWidth) {
       var widthKey = fixedWidth === 'min' ? 'minWidth' : 'width';
       style[widthKey] = rect.width;
@@ -30448,7 +30513,6 @@ var usePositionStyle = function usePositionStyle(config) {
       if (h === 'left') {
         style.left = rect.left - containerRect.left + containerScroll.left - (offset ? offset[0] : 0);
         style.transform = '';
-        arrayStyle.left = "8px";
         if (adjust) {
           overRight = rect.left + context.popUpWidth - bodyRect.right + containerScrollBarWidth;
           if (style.left < 0 && targetRect) {
@@ -30459,7 +30523,6 @@ var usePositionStyle = function usePositionStyle(config) {
         style.right = containerRect.right - rect.right + containerScrollBarWidth - containerScroll.left - (offset ? offset[0] : 0);
         style.left = 'auto';
         style.transform = '';
-        arrayStyle.right = "8px";
         if (adjust) {
           overLeft = bodyRect.left - (rect.right - context.popUpWidth);
           if (style.right < 0 && targetRect) {
@@ -30475,9 +30538,6 @@ var usePositionStyle = function usePositionStyle(config) {
           overRight = rect.left + rect.width / 2 + context.popUpWidth / 2 - bodyRect.width + containerScrollBarWidth;
           overLeft = bodyRect.left - (rect.left + rect.width / 2 - context.popUpWidth / 2);
         }
-        if (targetRect) {
-          arrayStyle.left = "".concat(targetRect.width / 2 - 5.9, "px");
-        }
       }
       if (adjust) {
         // 调节左右溢出
@@ -30486,26 +30546,16 @@ var usePositionStyle = function usePositionStyle(config) {
           style.left -= overRight;
           // 扣除触发器距离页面右侧的距离，以保证从右侧弹出的窗口最右边对齐触发器最右边
           style.left -= toRightDistance;
-          if (targetRect) {
-            arrayStyle.left = "".concat((targetRect === null || targetRect === void 0 ? void 0 : targetRect.width) - context.parentRect.width / 2 - 5.9, "px");
-          }
         }
         if (overLeft > 0) {
           style.left += overLeft;
-          arrayStyle.left = "".concat(rect.width / 2 - 5.9, "px");
         }
       }
       if (v === 'bottom') {
         style.top = rect.bottom - containerRect.top + containerScroll.top + popupGap;
-        if (targetRect) {
-          arrayStyle.top = "".concat(0, "px");
-        }
       } else {
         style.top = rect.top - containerRect.top + containerScroll.top - popupGap;
         style.transform += 'translateY(-100%)';
-        if (targetRect) {
-          arrayStyle.top = "".concat(targetRect.height - 5.9 - 4, "px");
-        }
       }
     } else if (horizontalPosition.includes(targetPosition)) {
       var _targetPosition$split3 = targetPosition.split('-'),
@@ -30515,35 +30565,25 @@ var usePositionStyle = function usePositionStyle(config) {
       if (_v === 'top') {
         style.top = rect.top - containerRect.top + containerScroll.top - (offset ? offset[1] : 0);
         style.transform = '';
-        arrayStyle.top = "8px";
       } else if (_v === 'bottom') {
         style.top = rect.bottom - containerRect.top + containerScroll.top + (offset ? offset[1] : 0);
-        arrayStyle.bottom = "8px";
         style.transform = 'translateY(-100%)';
       } else {
         // 居中对齐
         style.top = rect.top - containerRect.top + containerScroll.top + rect.height / 2;
-        if (targetRect) {
-          arrayStyle.top = "".concat(targetRect.height / 2 - 5.9 / 2, "px");
-        }
         style.transform = 'translateY(-50%)';
       }
       if (_h === 'right') {
         style.left = rect.right - containerRect.left + containerScroll.left + popupGap;
-        arrayStyle.left = '0px';
-        arrayStyle.right = 'auto';
       } else {
         style.right = containerRect.right - rect.left;
-        arrayStyle.right = '0px';
-        arrayStyle.left = 'auto';
       }
     } else if (position === 'cover') {
       style.top = rect.top - containerRect.top + containerScroll.top;
       style.left = rect.left - containerRect.left + containerScroll.left;
     }
     return {
-      style: style,
-      arrayStyle: arrayStyle
+      style: style
     };
   };
   var getAbsoluteStyle = function getAbsoluteStyle(position) {
@@ -30563,8 +30603,7 @@ var usePositionStyle = function usePositionStyle(config) {
       }
     }
     var _getAbsolutePositionS = getAbsolutePositionStyle(rect, position),
-      style = _getAbsolutePositionS.style,
-      arrayStyle = _getAbsolutePositionS.arrayStyle;
+      style = _getAbsolutePositionS.style;
     var currentCSSZoom = getCurrentCSSZoom();
     if (currentCSSZoom && currentCSSZoom !== 1) {
       if (style.left && typeof style.left === 'number') {
@@ -30581,13 +30620,11 @@ var usePositionStyle = function usePositionStyle(config) {
       }
     }
     return {
-      style: style,
-      arrayStyle: arrayStyle
+      style: style
     };
   };
   var getStyle = function getStyle() {
     var newStyle = {};
-    var newArrayStyle = {};
     var _ref2 = config || {},
       position = _ref2.position,
       absolute = _ref2.absolute;
@@ -30611,10 +30648,8 @@ var usePositionStyle = function usePositionStyle(config) {
       });
     } else {
       var _ref3 = getAbsoluteStyle(realPosition),
-        nextStyle = _ref3.style,
-        nextArrayStyle = _ref3.arrayStyle;
+        nextStyle = _ref3.style;
       newStyle = nextStyle;
-      newArrayStyle = nextArrayStyle;
     }
     // for animation
     if (realPosition.indexOf('top') === 0) {
@@ -30623,17 +30658,14 @@ var usePositionStyle = function usePositionStyle(config) {
       newStyle.transformOrigin = 'center top';
     }
     return {
-      newStyle: newStyle,
-      newArrayStyle: newArrayStyle
+      newStyle: newStyle
     };
   };
   var updateStyle = use_persist_fn(function () {
     var _getStyle = getStyle(),
-      newStyle = _getStyle.newStyle,
-      newArrayStyle = _getStyle.newArrayStyle;
+      newStyle = _getStyle.newStyle;
     if (newStyle && !shallow_equal(style, newStyle)) {
       setStyle(newStyle);
-      setArrayStyle(newArrayStyle || {});
     }
 
     // 当父元素的滚动容器滚动时，判断是否需要更新弹出层位置，包括是否隐藏弹出层（通过hideStyle隐藏，不是show状态）
@@ -30641,8 +30673,7 @@ var usePositionStyle = function usePositionStyle(config) {
   });
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(updateStyle, [show, position, absolute, updateKey, fixedWidth, parentElNewPosition]);
   return {
-    style: style,
-    arrayStyle: arrayStyle
+    style: style
   };
 };
 /* harmony default export */ var use_position_style = ((/* unused pure expression or super */ null && (usePositionStyle)));
@@ -31292,7 +31323,6 @@ var AbsoluteList = function AbsoluteList(props) {
     _props$zIndex = props.zIndex,
     zIndex = _props$zIndex === void 0 ? 1051 : _props$zIndex,
     focus = props.focus,
-    arrowRef = props.arrowRef,
     popupElRef = props.popupElRef,
     updateKey = props.updateKey,
     popupGap = props.popupGap,
@@ -31342,19 +31372,10 @@ var AbsoluteList = function AbsoluteList(props) {
       adjust: adjust,
       offset: offset
     }),
-    style = _usePositionStyle.style,
-    arrayStyle = _usePositionStyle.arrayStyle;
+    style = _usePositionStyle.style;
   var childStyle = children.props.style;
   var newStyle = objectSpread2_default()(objectSpread2_default()({}, style), childStyle);
   if ( /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().isValidElement(children) === false) return null;
-  if (arrowRef && arrayStyle && Object.keys(arrayStyle).length > 0) {
-    Object.keys(arrayStyle).forEach(function (key) {
-      if (arrowRef.current) {
-        // @ts-ignore
-        arrowRef.current.style[key] = arrayStyle[key];
-      }
-    });
-  }
   var styledChild = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().cloneElement(children, {
     style: newStyle
   });
@@ -33903,6 +33924,7 @@ var card_group_jssStyle = {
 ;// CONCATENATED MODULE: ../hooks/src/common/use-in-view/use-in-view.ts
 
 
+
 var useInView = function useInView() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var elementRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
@@ -33935,7 +33957,7 @@ var useInView = function useInView() {
         }
       }
     }, {
-      root: options.root || null,
+      root: options.root && isScrollable(options.root) ? options.root : null,
       rootMargin: options.rootMargin || '0px',
       threshold: options.threshold || 0
     });
@@ -35904,7 +35926,6 @@ var Item = function Item(props) {
   });
   var renderChildren = function renderChildren(content) {
     if (!props.placeholder) return content;
-    if (!container) return content;
     return /*#__PURE__*/(0,jsx_runtime.jsx)(lazyload, {
       container: container,
       placeholder: props.placeholder,
@@ -50003,7 +50024,7 @@ var UseFormItem = function UseFormItem() {
 var tooltip_devUseWarning = devUseWarning;
 var defaultDelay = 0;
 var Tooltip = function Tooltip(props) {
-  var _jssStyle$tooltip, _config$tooltip$persi, _config$tooltip;
+  var _jssStyle$tooltip, _config$tooltip;
   var _props$trigger = props.trigger,
     trigger = _props$trigger === void 0 ? 'hover' : _props$trigger,
     priorityDirection = props.priorityDirection,
@@ -50023,7 +50044,7 @@ var Tooltip = function Tooltip(props) {
     popsitionProps = _props$position === void 0 ? 'auto' : _props$position;
   var tooltipClasses = jssStyle === null || jssStyle === void 0 || (_jssStyle$tooltip = jssStyle.tooltip) === null || _jssStyle$tooltip === void 0 ? void 0 : _jssStyle$tooltip.call(jssStyle);
   var config = useConfig();
-  var persistent = (_config$tooltip$persi = (_config$tooltip = config.tooltip) === null || _config$tooltip === void 0 ? void 0 : _config$tooltip.persistent) !== null && _config$tooltip$persi !== void 0 ? _config$tooltip$persi : persistentProp;
+  var persistent = persistentProp !== null && persistentProp !== void 0 ? persistentProp : (_config$tooltip = config.tooltip) === null || _config$tooltip === void 0 ? void 0 : _config$tooltip.persistent;
   var childrenProps = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.isValidElement)(children) ? children === null || children === void 0 ? void 0 : children.props : {};
   var delay = props.delay || props.mouseEnterDelay || defaultDelay;
   var _usePopup = use_popup({
@@ -50039,7 +50060,6 @@ var Tooltip = function Tooltip(props) {
     getTargetProps = _usePopup.getTargetProps,
     targetRef = _usePopup.targetRef,
     popupRef = _usePopup.popupRef,
-    arrowRef = _usePopup.arrowRef,
     closePop = _usePopup.closePop;
   var events = getTargetProps();
   var bindEvents = function bindEvents() {
@@ -50100,7 +50120,6 @@ var Tooltip = function Tooltip(props) {
       popupGap: 0,
       zIndex: zIndex,
       adjust: popsitionProps === 'auto',
-      arrowRef: arrowRef,
       children: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()({
         className: classnames_default()(className, tooltipClasses === null || tooltipClasses === void 0 ? void 0 : tooltipClasses.rootClass, tooltipClasses === null || tooltipClasses === void 0 ? void 0 : tooltipClasses.wrapper, open && (tooltipClasses === null || tooltipClasses === void 0 ? void 0 : tooltipClasses.wrapperOpen)),
         style: {
@@ -50114,7 +50133,6 @@ var Tooltip = function Tooltip(props) {
         onMouseLeave: events.onMouseLeave,
         dir: config.direction,
         children: [showArrow && /*#__PURE__*/(0,jsx_runtime.jsx)("span", objectSpread2_default()({
-          ref: arrowRef,
           className: tooltipClasses === null || tooltipClasses === void 0 ? void 0 : tooltipClasses.arrow
         }, getDataAttribute({
           role: 'arrow'
@@ -52309,7 +52327,7 @@ var useNumberFormat = function useNumberFormat(props) {
   var onInnerChange = use_persist_fn(function (val) {
     setInternalInputValue(getStringValue(val));
     if (typeof val === 'string') {
-      if (val.endsWith('.')) return;
+      if (val.endsWith('.') || val.includes('.') && val.endsWith('0')) return;
       var num = parseFloat(val);
       if (val === '') {
         // 如果允许空值，则返回 null，否则返回 undefined
@@ -69678,7 +69696,7 @@ var upload_interface = __webpack_require__(8821);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.6.1-beta.5'
+  version: '3.6.1-beta.7'
 });
 }();
 /******/ 	return __webpack_exports__;