shineout 3.10.1-beta.1 → 3.10.1-beta.3

package/cjs/index.js

@@ -545,5 +545,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.10.1-beta.1'
+  version: '3.10.1-beta.3'
 };

package/dist/shineout.js

@@ -13686,7 +13686,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.10.1-beta.1');
+/* harmony default export */ var version = ('3.10.1-beta.3');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -15800,12 +15800,14 @@ var radioTokens = {
   radioSmallPaddingY: 'Spacing-1',
   radioSmallButtonPaddingY: 'Spacing-1',
   radioSmallButtonPaddingX: 'Spacing-8',
+  radioSmallButtonFontSize: 'Font-12',
   radioLargeIconWidth: 'Font-16',
   radioLargeIconBorderWidth: 'Border-2',
   radioLargeLabelFontSize: 'Font-16',
   radioLargePaddingY: 'Spacing-7',
   radioLargeButtonPaddingY: 'Spacing-7',
   radioLargeButtonPaddingX: 'Spacing-16',
+  radioLargeButtonFontSize: 'Font-16',
   radioLabelFontColor: 'Neutral-text-5',
   radioLabelFontSize: 'Font-14',
   radioLabelDisabledFontColor: 'Neutral-text-2'
@@ -20956,10 +20958,6 @@ var dropdown_dropdown = {
       marginLeft: '0',
       marginRight: src.dropdownCaretMarginLeft,
       textAlign: 'right'
-    },
-    '$wrapper[data-position^="left"] > $button & > svg': {},
-    '$wrapper[data-position^="top"] > $button & > svg': {
-      transform: 'rotate(180deg)'
     }
   },
   content: {
@@ -25196,11 +25194,13 @@ var radioStyle = objectSpread2_default()(objectSpread2_default()({}, animations)
       marginTop: 1
     },
     'button&': {
+      fontSize: src.radioSmallButtonFontSize,
       padding: "".concat(src.radioSmallButtonPaddingY, " ").concat(src.radioSmallButtonPaddingX)
     }
   },
   wrapperLarge: {
     'button&': {
+      fontSize: src.radioLargeButtonFontSize,
       padding: "".concat(src.radioLargeButtonPaddingY, " ").concat(src.radioLargeButtonPaddingX)
     }
   },
@@ -32966,12 +32966,40 @@ var getPositionStyle = function getPositionStyle(position, config) {
   }
   return newStyle;
 };
-;// CONCATENATED MODULE: ../hooks/src/common/use-position-style/get-sizing-style.ts
+;// CONCATENATED MODULE: ../hooks/src/common/use-position-style/get-boundary-style.ts
+/**
+ * 基于 boundary 容器的可用空间调整弹出方向
+ * 解决 position='auto' 时方向判断基于视口而非 boundary 的问题
+ */
+var adjustPositionByBoundary = function adjustPositionByBoundary(position, _ref) {
+  var boundary = _ref.boundary,
+    parentRect = _ref.parentRect,
+    popupGap = _ref.popupGap;
+  var boundaryEl = boundary();
+  if (!boundaryEl) return position;
+  var boundaryRect = boundaryEl.getBoundingClientRect();
+  var gap = popupGap || 0;
+  if (position.startsWith('bottom') || position.startsWith('top')) {
+    var spaceBelow = boundaryRect.bottom - parentRect.bottom - gap;
+    var spaceAbove = parentRect.top - boundaryRect.top - gap;
+    if (position.startsWith('bottom') && spaceBelow < spaceAbove) {
+      return position.replace('bottom', 'top');
+    }
+    if (position.startsWith('top') && spaceAbove < spaceBelow) {
+      return position.replace('top', 'bottom');
+    }
+  }
+  return position;
+};
+
 // 第一阶段：支持上下边界的高度限制，为vertical模式的Menu实现的
+// 第二阶段：支持上下边界的高度限制，为Dropdown实现的
 // TODO 后续支持左右边界的宽度限制
-var getSizingStyle = function getSizingStyle(position, _ref) {
-  var boundary = _ref.boundary,
-    parentRect = _ref.parentRect;
+var getBoundaryStyle = function getBoundaryStyle(position, _ref2) {
+  var _maxHeight;
+  var boundary = _ref2.boundary,
+    parentRect = _ref2.parentRect,
+    popupGap = _ref2.popupGap;
   var boundaryEl = boundary();
   if (!boundaryEl) return {};
   var boundaryRect = boundaryEl.getBoundingClientRect();
@@ -32980,9 +33008,13 @@ var getSizingStyle = function getSizingStyle(position, _ref) {
     maxHeight = boundaryRect.bottom - parentRect.top;
   } else if (position.endsWith('-bottom')) {
     maxHeight = parentRect.bottom - boundaryRect.top;
+  } else if (position.startsWith('bottom')) {
+    maxHeight = boundaryRect.bottom - parentRect.bottom - (popupGap || 0);
+  } else if (position.startsWith('top')) {
+    maxHeight = parentRect.top - boundaryRect.top - (popupGap || 0);
   }
   return {
-    maxHeight: maxHeight,
+    maxHeight: Math.max((_maxHeight = maxHeight) !== null && _maxHeight !== void 0 ? _maxHeight : 0, 0),
     overflowY: 'auto'
   };
 };
@@ -33338,14 +33370,12 @@ var usePositionStyle = function usePositionStyle(config) {
     adjust = _ref.adjust,
     offset = _ref.offset,
     checkPosition = _ref.checkPosition,
-    setSizingStyle = _ref.setSizingStyle;
+    setBoundaryStyle = _ref.setBoundaryStyle;
   // 初次渲染无样式的时候， 隐藏展示
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(hideStyle),
     _useState2 = slicedToArray_default()(_useState, 2),
     style = _useState2[0],
     setStyle = _useState2[1];
-  // const [sizingStyle, setSizingStyle] = useState<React.CSSProperties>();
-
   var _React$useRef = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useRef({
       containerRect: {
         left: 0,
@@ -33366,7 +33396,7 @@ var usePositionStyle = function usePositionStyle(config) {
     context = _React$useRef.current;
   var parentElNewPosition = useCheckElementPosition(parentElRef, {
     scrollContainer: scrollElRef === null || scrollElRef === void 0 ? void 0 : scrollElRef.current,
-    enable: show && (adjust || checkPosition)
+    enable: show && (adjust || checkPosition || !!boundary)
   });
   var parentElBorderWidth = useCheckElementBorderWidth(parentElRef, {
     direction: 'horizontal',
@@ -33651,7 +33681,18 @@ var usePositionStyle = function usePositionStyle(config) {
     };
     context.parentRect = parentElRef.current.getBoundingClientRect();
     var realPosition = position;
-    if (adjust) {
+
+    // 运行时检测 boundary 是否返回有效元素
+    var boundaryAvailable = typeof boundary === 'function' && boundary() !== null;
+    if (boundaryAvailable) {
+      // boundary 模式：基于边界容器的可用空间调整方向
+      realPosition = adjustPositionByBoundary(realPosition, {
+        boundary: boundary,
+        parentRect: context.parentRect,
+        popupGap: popupGap
+      });
+    } else if (adjust) {
+      // 无 boundary 或 boundary 返回 null 时，fallback 到视口调整
       var popupInfo = getPopUpInfo(context.parentRect);
       context.popUpHeight = popupInfo.height;
       context.popUpWidth = popupInfo.width;
@@ -33675,14 +33716,15 @@ var usePositionStyle = function usePositionStyle(config) {
     } else if (realPosition.indexOf('bottom') === 0) {
       newStyle.transformOrigin = 'center top';
     }
-    if (boundary && show && popupElRef.current) {
-      var newSizingStyle = getSizingStyle(realPosition, {
+    if (boundaryAvailable && show && popupElRef.current) {
+      var newBoundaryStyle = getBoundaryStyle(realPosition, {
         boundary: boundary,
-        parentRect: context.parentRect
+        parentRect: context.parentRect,
+        popupGap: popupGap
       });
       return {
         newStyle: newStyle,
-        newSizingStyle: newSizingStyle
+        newBoundaryStyle: newBoundaryStyle
       };
     }
     return {
@@ -33692,11 +33734,11 @@ var usePositionStyle = function usePositionStyle(config) {
   var updateStyle = use_persist_fn(function () {
     var _getStyle = getStyle(),
       newStyle = _getStyle.newStyle,
-      newSizingStyle = _getStyle.newSizingStyle;
+      newBoundaryStyle = _getStyle.newBoundaryStyle;
     if (newStyle && !shallow_equal(style, newStyle)) {
       setStyle(newStyle);
     }
-    setSizingStyle === null || setSizingStyle === void 0 || setSizingStyle(newSizingStyle);
+    setBoundaryStyle === null || setBoundaryStyle === void 0 || setBoundaryStyle(newBoundaryStyle);
 
     // 当父元素的滚动容器滚动时，判断是否需要更新弹出层位置，包括是否隐藏弹出层（通过hideStyle隐藏，不是show状态）
     if (show) {
@@ -33821,7 +33863,7 @@ var AbsoluteList = function AbsoluteList(props) {
     adjust = props.adjust,
     onAdjust = props.onAdjust,
     offset = props.offset,
-    setSizingStyle = props.setSizingStyle,
+    setBoundaryStyle = props.setBoundaryStyle,
     _props$destroy = props.destroy,
     destroy = _props$destroy === void 0 ? false : _props$destroy,
     _props$lazy = props.lazy,
@@ -33870,7 +33912,7 @@ var AbsoluteList = function AbsoluteList(props) {
       offset: offset,
       onAdjust: onAdjust,
       checkPosition: checkPosition,
-      setSizingStyle: setSizingStyle
+      setBoundaryStyle: setBoundaryStyle
     }),
     style = _usePositionStyle.style;
   var childStyle = children.props.style;
@@ -33980,8 +34022,8 @@ var Popover = function Popover(props) {
     setPositionState = _React$useState2[1];
   var _React$useState3 = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useState(),
     _React$useState4 = slicedToArray_default()(_React$useState3, 2),
-    contentStyle = _React$useState4[0],
-    setContentStyle = _React$useState4[1];
+    boundaryStyle = _React$useState4[0],
+    setBoundaryStyle = _React$useState4[1];
 
   // Semantic DOM 访问器：合并用户 classNames / styles、setConfig 全局兜底与内部 JSS class
   // 优先级（高→低）：props > setConfig({ popover: { ... } }) > 内部默认
@@ -34132,7 +34174,7 @@ var Popover = function Popover(props) {
     lazy: props.lazy,
     offset: mergedOffset,
     updateKey: updateKey,
-    setSizingStyle: props.boundary ? setContentStyle : undefined,
+    setBoundaryStyle: props.boundary ? setBoundaryStyle : undefined,
     children: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()(objectSpread2_default()({
       className: classnames_default()(className, popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.rootClass, popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.wrapper, open && (popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.wrapperOpen), !showArrow && (popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.hideArrow), animation === false && (popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.wrapperNoAnimation), semClass('root')),
       style: objectSpread2_default()(objectSpread2_default()({}, containerStyle), semStyle('root'))
@@ -34150,7 +34192,7 @@ var Popover = function Popover(props) {
         dir: config.direction
       }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
         className: classnames_default()(popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.content, (typeof childrened === 'string' || props.useTextStyle) && (popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.text), semClass('content')),
-        style: objectSpread2_default()(objectSpread2_default()(objectSpread2_default()({}, contentStyle), style), semStyle('content')),
+        style: objectSpread2_default()(objectSpread2_default()(objectSpread2_default()({}, style), boundaryStyle), semStyle('content')),
         onClick: emptyEvent,
         children: /*#__PURE__*/(0,jsx_runtime.jsx)(Provider, {
           value: providerValue,
@@ -52355,6 +52397,67 @@ var DrawerComp = drawer;
 DrawerComp.displayName = 'ShineoutDrawer';
 DrawerComp.Submit = src_modal_0.Submit;
 /* harmony default export */ var src_drawer = (DrawerComp);
+;// CONCATENATED MODULE: ../hooks/src/common/use-boundary/index.tsx
+
+
+/**
+ * useBoundary Hook
+ *
+ * 用于管理弹出层的边界样式，支持延迟清除功能
+ *
+ * @param options - 配置选项
+ * @returns 包含 boundaryStyle 和 setBoundaryStyle 的对象
+ *
+ * @example
+ * ```tsx
+ * const { boundaryStyle, setBoundaryStyle } = useBoundary({ clearDelay: 300 });
+ *
+ * 设置边界样式
+ * setBoundaryStyle({ maxHeight: 200, overflowY: 'auto' });
+ *
+ * 清除边界样式（延迟执行）
+ * setBoundaryStyle();
+ * ```
+ */
+var useBoundary = function useBoundary() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _options$clearDelay = options.clearDelay,
+    clearDelay = _options$clearDelay === void 0 ? 300 : _options$clearDelay;
+  var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(),
+    _useState2 = slicedToArray_default()(_useState, 2),
+    boundaryStyle = _useState2[0],
+    _setBoundaryStyle = _useState2[1];
+  var _useRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)({
+      boundaryTimer: null
+    }),
+    context = _useRef.current;
+  var setBoundaryStyle = function setBoundaryStyle(style) {
+    if (!style) {
+      // 延迟清除边界样式
+      context.boundaryTimer = setTimeout(function () {
+        _setBoundaryStyle(undefined);
+      }, clearDelay);
+    } else {
+      // 立即设置边界样式，取消之前的清除定时器
+      if (context.boundaryTimer) {
+        clearTimeout(context.boundaryTimer);
+        context.boundaryTimer = null;
+      }
+      _setBoundaryStyle(style);
+    }
+  };
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    return function () {
+      if (context.boundaryTimer) {
+        clearTimeout(context.boundaryTimer);
+      }
+    };
+  }, []);
+  return {
+    boundaryStyle: boundaryStyle,
+    setBoundaryStyle: setBoundaryStyle
+  };
+};
 ;// CONCATENATED MODULE: ../base/src/dropdown/Item.tsx
 'use client';
 
@@ -52493,7 +52596,8 @@ var Dropdown = function Dropdown(props) {
     zIndex = props.zIndex,
     popupClassName = props.popupClassName,
     classNamesProp = props.classNames,
-    stylesProp = props.styles;
+    stylesProp = props.styles,
+    boundary = props.boundary;
   var dropdownClasses = jssStyle === null || jssStyle === void 0 || (_jssStyle$dropdown = jssStyle.dropdown) === null || _jssStyle$dropdown === void 0 ? void 0 : _jssStyle$dropdown.call(jssStyle);
   var config = useConfig();
   var isRtl = config.direction === 'rtl';
@@ -52541,6 +52645,21 @@ var Dropdown = function Dropdown(props) {
     _useSemantic2 = slicedToArray_default()(_useSemantic, 2),
     semClass = _useSemantic2[0],
     semStyle = _useSemantic2[1];
+  var _useBoundary = useBoundary({
+      clearDelay: 300
+    }),
+    boundaryStyle = _useBoundary.boundaryStyle,
+    setBoundaryStyle = _useBoundary.setBoundaryStyle;
+  var finalBoundary = boundary === true ? function () {
+    return getClosestScrollContainer(targetRef.current);
+  } : boundary === false ? undefined : boundary;
+  var contentStyle = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function () {
+    return objectSpread2_default()(objectSpread2_default()({
+      width: width,
+      minWidth: 90,
+      gridTemplateColumns: columns ? "repeat(".concat(columns, ", 1fr)") : undefined
+    }, !isSub ? semStyle('list') : undefined), boundaryStyle);
+  }, [width, columns, isSub, semStyle, boundaryStyle]);
 
   // buttonProps
   var type = props.type,
@@ -52668,14 +52787,12 @@ var Dropdown = function Dropdown(props) {
       popupGap: 4,
       popupElRef: popupRef,
       adjust: adjust,
+      boundary: finalBoundary,
+      setBoundaryStyle: finalBoundary ? setBoundaryStyle : undefined,
       children: /*#__PURE__*/(0,jsx_runtime.jsx)(animation_list, {
         display: columns ? 'grid' : 'block',
         className: classnames_default()(popupClassName, dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.list, hasChildren && (dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.listHasChildren), columns !== undefined && columns > 1 && (dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.boxList), size === 'small' && (dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.listSmall), size === 'large' && (dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.listLarge), !isSub && semClass('list')),
-        style: objectSpread2_default()({
-          width: width,
-          minWidth: 90,
-          gridTemplateColumns: columns ? "repeat(".concat(columns, ", 1fr)") : undefined
-        }, !isSub ? semStyle('list') : undefined),
+        style: contentStyle,
         type: 'fade',
         duration: 'fast',
         show: open,
@@ -79660,7 +79777,7 @@ var watermark_interface = __webpack_require__(6640);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.10.1-beta.1'
+  version: '3.10.1-beta.3'
 });
 }();
 /******/ 	return __webpack_exports__;