@aloudata/aloudata-design 2.19.4 → 2.19.6

package/dist/Dropdown/index.d.ts

@@ -86,5 +86,10 @@ export interface IDropdownProps {
      * @default false
      */
     popupMatchTriggerWidth?: boolean | number;
+    /**
+     * @description 空间不足时自动计算菜单最大高度并启用滚动，启用后 offset 固定为 0
+     * @default false
+     */
+    allowOverlap?: boolean;
 }
 export default function Dropdown(props: IDropdownProps): React.JSX.Element;

package/dist/Dropdown/index.js

@@ -45,7 +45,9 @@ export default function Dropdown(props) {
     _props$initialFocus = props.initialFocus,
     initialFocus = _props$initialFocus === void 0 ? -1 : _props$initialFocus,
     _props$popupMatchTrig = props.popupMatchTriggerWidth,
-    popupMatchTriggerWidth = _props$popupMatchTrig === void 0 ? false : _props$popupMatchTrig;
+    popupMatchTriggerWidth = _props$popupMatchTrig === void 0 ? false : _props$popupMatchTrig,
+    _props$allowOverlap = props.allowOverlap,
+    allowOverlap = _props$allowOverlap === void 0 ? false : _props$allowOverlap;
   var _useState = useState(open || false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -69,24 +71,31 @@ export default function Dropdown(props) {
       placement: placement,
       open: isOpen,
       onOpenChange: onChangeOpen,
-      middleware: [offset(offsetProps), flip({
+      middleware: [offset(allowOverlap ? 0 : offsetProps), flip(_objectSpread({
         fallbackAxisSideDirection: 'end'
-      }), shift(), popupMatchTriggerWidth ? size({
+      }, allowOverlap && {
+        fallbackStrategy: 'bestFit'
+      })), shift(allowOverlap ? {
+        mainAxis: true
+      } : undefined), size(_objectSpread(_objectSpread({}, allowOverlap && {
+        padding: 8
+      }), {}, {
         apply: function apply(_ref) {
-          var rects = _ref.rects,
+          var availableHeight = _ref.availableHeight,
+            rects = _ref.rects,
             elements = _ref.elements;
-          Object.assign(elements.floating.style, {
+          var widthStyle = popupMatchTriggerWidth ? {
             width: typeof popupMatchTriggerWidth === 'number' ? "".concat(popupMatchTriggerWidth, "px") : "".concat(rects.reference.width, "px")
-          });
-        }
-      }) : size({
-        apply: function apply(_ref2) {
-          var elements = _ref2.elements;
-          Object.assign(elements.floating.style, {
+          } : {
             minWidth: '144px'
-          });
+          };
+          var heightStyle = allowOverlap ? {
+            maxHeight: "".concat(Math.max(100, availableHeight), "px"),
+            overflowY: 'auto'
+          } : {};
+          Object.assign(elements.floating.style, _objectSpread(_objectSpread({}, widthStyle), heightStyle));
         }
-      })],
+      }))],
       whileElementsMounted: autoUpdatePos ? autoUpdate : undefined
     }),
     refs = _useFloating.refs,
@@ -150,9 +159,10 @@ export default function Dropdown(props) {
       items: (menu === null || menu === void 0 ? void 0 : menu.items) || []
     });
     return /*#__PURE__*/React.createElement(Menu, _extends({}, menuProps, {
-      onClick: onMenuItemClick
+      onClick: onMenuItemClick,
+      externalOverflow: allowOverlap
     }));
-  }, [menu, onMenuItemClick]);
+  }, [menu, onMenuItemClick, allowOverlap]);
   var popupElement = useMemo(function () {
     return typeof dropdownRender === 'function' ? dropdownRender(menuInstance) : menuInstance;
   }, [dropdownRender, menuInstance]);

package/dist/Menu/index.d.ts

@@ -5,6 +5,8 @@ export interface MenuProps {
     items: MenuItemType[];
     selectedKeys?: string[];
     menuStyle?: React.CSSProperties;
+    /** @internal 由 Dropdown 注入，禁用内部定位/overflow 计算。不支持含 SubMenu 的菜单 */
+    externalOverflow?: boolean;
 }
 export default function Menu(props: MenuProps): React.JSX.Element;
 export declare function isHeaderMenuItem(menuItem: MenuItemType): menuItem is MenuHeaderType;

package/dist/Menu/index.js

@@ -20,7 +20,8 @@ export default function Menu(props) {
     items = props.items,
     onMenuClick = props.onClick,
     selectedKeys = props.selectedKeys,
-    menuStyle = props.menuStyle;
+    menuStyle = props.menuStyle,
+    externalOverflow = props.externalOverflow;
   var getMenuItems = function getMenuItems(items) {
     var parentPath = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
     return items.map(function (item, index) {
@@ -95,6 +96,7 @@ export default function Menu(props) {
     });
   };
   var ref = useRef(null);
+  var leafOverflow = isLeafMenu(items) ? 'auto' : undefined;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'none '
@@ -103,14 +105,14 @@ export default function Menu(props) {
   }), /*#__PURE__*/React.createElement(ControlledMenu, {
     state: "open",
     menuStyle: _objectSpread(_objectSpread({}, menuStyle), {}, {
-      overflow: isLeafMenu(items) ? 'auto' : undefined
+      overflow: externalOverflow ? undefined : leafOverflow
     }),
     anchorRef: ref,
     className: classNames(className, 'ald-menu'),
-    position: "auto",
+    position: externalOverflow ? 'initial' : 'auto',
     captureFocus: false,
-    viewScroll: "auto",
-    overflow: isLeafMenu(items) ? 'auto' : undefined
+    viewScroll: externalOverflow ? 'initial' : 'auto',
+    overflow: externalOverflow ? 'visible' : leafOverflow
   }, getMenuItems(items || [])));
 }
 export function isHeaderMenuItem(menuItem) {

package/dist/Tag/index.js

@@ -68,7 +68,7 @@ export default function Tag(props) {
     }
     onClose === null || onClose === void 0 ? void 0 : onClose(e);
   }, [disabled, onClose]);
-  var DEFAULT_MAX_WIDTH = 160;
+  var DEFAULT_MAX_WIDTH = 400;
   var domTitle = title !== undefined ? title : typeof children === 'string' ? children : '';
   return /*#__PURE__*/React.createElement("span", {
     className: classNames(prefixCls('container'), (_classNames = {}, _defineProperty(_classNames, prefixCls('small'), size === 'small'), _defineProperty(_classNames, prefixCls('large'), size === 'large'), _defineProperty(_classNames, prefixCls('disabled'), disabled), _classNames), className || ''),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aloudata/aloudata-design",
-  "version": "2.19.4",
+  "version": "2.19.6",
   "description": "",
   "license": "MIT",
   "module": "dist/index.js",
@@ -60,7 +60,7 @@
   ],
   "dependencies": {
     "@ant-design/cssinjs": "^1.9.1",
-    "@floating-ui/react": "^0.26.15",
+    "@floating-ui/react": "^0.27.19",
     "@radix-ui/react-scroll-area": "^1.0.4",
     "@rc-component/color-picker": "^2.0.1",
     "@szhsin/react-menu": "^4.1.0",