@aloudata/aloudata-design 2.9.1 → 2.10.0

package/dist/Button/index.d.ts

@@ -53,5 +53,5 @@ export declare function getShape(ButtonShape: 'circle' | 'default'): 'circle' |
 export declare const setIcon: (iconNode: React.ReactElement, loading: boolean | {
     delay?: number | undefined;
 }) => React.JSX.Element;
-declare function Button(props: IButtonProps): React.JSX.Element;
-export default Button;
+declare const _default: React.ForwardRefExoticComponent<IButtonProps & React.RefAttributes<HTMLElement>>;
+export default _default;

package/dist/Button/index.js

@@ -11,7 +11,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 import { Button as AntdButton } from 'antd';
 import { useCompactItemContext } from 'antd/lib/space/Compact';
 import classNames from 'classnames';
-import React, { useContext } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { ConfigContext } from "../ConfigProvider";
 import SizeContext from "../ConfigProvider/sizeContext";
 import { LoadingLine } from "../Icon";
@@ -61,7 +61,7 @@ export var setIcon = function setIcon(iconNode, loading) {
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null);
 };
-function Button(props) {
+function Button(props, ref) {
   var _props$type = props.type,
     type = _props$type === void 0 ? 'secondary' : _props$type,
     customSize = props.size,
@@ -90,7 +90,8 @@ function Button(props) {
     type: getButtonType(type),
     className: classNames(btnPrefix, "".concat(btnPrefix, "-").concat(type), className, getButtonSizeClass(size), compactItemClassnames),
     danger: getDangerStatus(type),
-    shape: getShape(shape)
+    shape: getShape(shape),
+    ref: ref
   }), props.children);
 }
-export default Button;
+export default /*#__PURE__*/forwardRef(Button);

package/dist/Dropdown/index.d.ts

@@ -1,28 +1,17 @@
+import { OffsetOptions } from '@floating-ui/react';
 import React from 'react';
 import { MenuProps } from '../Menu';
-import DropdownButton from './Button';
-type Align = {
-    points?: [string, string];
-    offset?: [number, number];
-    targetOffset?: [number, number];
-    overflow?: {
-        adjustX?: boolean;
-        adjustY?: boolean;
-    };
-    useCssRight?: boolean;
-    useCssBottom?: boolean;
-    useCssTransform?: boolean;
-};
-export type ActionType = 'hover' | 'click' | 'contextMenu';
-export type PlacementType = 'bottomLeft' | 'bottom' | 'bottomRight' | 'topLeft' | 'top' | 'topRight';
+import './style/index.less';
+export type ActionType = 'hover' | 'click';
+export type PlacementType = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
 export interface IDropdownProps {
+    children: React.ReactNode;
     /**
-     * @description 位置状态
-     * @default {}
+     * @description 菜单弹出位置的偏移量
      */
-    align?: Align;
+    offset?: OffsetOptions;
     /**
-     * @description 关闭后是否销毁Dropdown
+     * @description 关闭后是否销毁 Dropdown
      * @default false
      */
     destroyPopupOnHide?: boolean;
@@ -30,7 +19,7 @@ export interface IDropdownProps {
      * @description 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位
      * @default () => document.body
      */
-    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    getPopupContainer?: () => HTMLElement;
     /**
      * @description 菜单
      * @type Menu | () => Menu
@@ -46,13 +35,13 @@ export interface IDropdownProps {
      * @description 菜单弹出位置
      * @default bottomLeft
      */
-    placement?: 'bottomLeft' | 'bottom' | 'bottomRight' | 'topLeft' | 'top' | 'topRight';
+    placement?: PlacementType;
     /**
      * @description 触发下拉的行为
-     * @type ActionType[], 其中 ActionType 为 'hover' | 'click' | 'contextMenu';
-     * @default [hover]
+     * @type ActionType, 其中 ActionType 为 'hover' | 'click' | 'contextMenu';
+     * @default click
      */
-    trigger?: ActionType[];
+    trigger?: ActionType;
     /**
      * @description 菜单是否显示
      * @default -
@@ -68,12 +57,6 @@ export interface IDropdownProps {
      * @default -
      */
     overlayStyle?: React.CSSProperties;
-    /**
-     * @description 是否强制渲染
-     * @default -
-     */
-    forceRender?: boolean;
-    children?: React.ReactNode;
     /**
      * @description 自定义下拉框内容
      * @default -
@@ -85,8 +68,4 @@ export interface IDropdownProps {
      */
     disabled?: boolean;
 }
-declare function Dropdown(props: IDropdownProps): React.JSX.Element;
-declare namespace Dropdown {
-    var Button: typeof DropdownButton;
-}
-export default Dropdown;
+export default function Dropdown(props: IDropdownProps): React.JSX.Element;

package/dist/Dropdown/index.js

@@ -1,5 +1,4 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var _excluded = ["children", "open", "overlayClassName", "menu", "align", "placement", "trigger", "dropdownRender", "destroyPopupOnHide", "onOpenChange"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -12,48 +11,103 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { Dropdown as AntdDropdown } from 'antd';
-import getPlacements from 'antd/lib/_util/placements';
+import { FloatingFocusManager, autoUpdate, flip, offset, safePolygon, shift, useClick, useDismiss, useFloating, useHover, useId, useInteractions, useRole } from '@floating-ui/react';
+import { useMemoizedFn } from 'ahooks';
 import classNames from 'classnames';
-import React, { useCallback, useMemo, useState } from 'react';
+import ResizeObserver from 'rc-resize-observer';
+import React, { cloneElement, useCallback, useEffect, useMemo, useState } from 'react';
+import ReactDOM from 'react-dom';
 import Menu from "../Menu";
-import DropdownButton from "./Button";
+import "./style/index.less";
 export default function Dropdown(props) {
   var children = props.children,
-    open = props.open,
-    overlayClassName = props.overlayClassName,
+    _props$destroyPopupOn = props.destroyPopupOnHide,
+    destroyPopupOnHide = _props$destroyPopupOn === void 0 ? true : _props$destroyPopupOn,
+    getPopupContainer = props.getPopupContainer,
     menu = props.menu,
-    align = props.align,
-    placement = props.placement,
+    overlayClassName = props.overlayClassName,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'bottom-start' : _props$placement,
     _props$trigger = props.trigger,
-    trigger = _props$trigger === void 0 ? ['click'] : _props$trigger,
+    trigger = _props$trigger === void 0 ? 'click' : _props$trigger,
+    open = props.open,
+    _props$onOpenChange = props.onOpenChange,
+    onOpenChange = _props$onOpenChange === void 0 ? function () {} : _props$onOpenChange,
+    overlayStyle = props.overlayStyle,
     dropdownRender = props.dropdownRender,
-    _props$destroyPopupOn = props.destroyPopupOnHide,
-    destroyPopupOnHide = _props$destroyPopupOn === void 0 ? true : _props$destroyPopupOn,
-    onOpenChange = props.onOpenChange,
-    otherProps = _objectWithoutProperties(props, _excluded);
-  // antd 根据 open 字段是否存在来判断 open 是否是可控模式
-  var antdDropdownProps = otherProps;
-  var defaultAlign = useMemo(function () {
-    var _getPlacements;
-    if (align) {
-      return align;
-    }
-    return {
-      offset: ((_getPlacements = getPlacements({
-        arrowWidth: 0,
-        offset: 4,
-        borderRadius: 0
-      })[placement || 'bottomLeft']) === null || _getPlacements === void 0 ? void 0 : _getPlacements['offset']) || [0, 4]
-    };
-  }, [align, placement]);
-  var isOpenControlled = open !== undefined;
-  var _useState = useState(open),
+    disabled = props.disabled,
+    _props$offset = props.offset,
+    offsetProps = _props$offset === void 0 ? 4 : _props$offset;
+  var _useState = useState(open || false),
     _useState2 = _slicedToArray(_useState, 2),
-    dropdownOpen = _useState2[0],
-    setDropdownOpen = _useState2[1];
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var onOpenChangeFn = useMemoizedFn(onOpenChange);
+  var isOpenControlled = open !== undefined;
+  useEffect(function () {
+    if (isOpenControlled) {
+      setIsOpen(open);
+    }
+  }, [open, isOpenControlled]);
+  var onChangeOpen = useCallback(function (newOpen) {
+    if (!isOpenControlled) {
+      setIsOpen(newOpen);
+    }
+    onOpenChangeFn(newOpen);
+  }, [isOpenControlled, onOpenChangeFn]);
+  var _useFloating = useFloating({
+      placement: placement,
+      open: isOpen,
+      onOpenChange: onChangeOpen,
+      middleware: [offset(offsetProps), flip({
+        fallbackAxisSideDirection: 'end'
+      }), shift()],
+      whileElementsMounted: autoUpdate
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles,
+    context = _useFloating.context;
+  var click = useClick(context);
+  var hover = useHover(context, {
+    enabled: trigger === 'hover',
+    handleClose: safePolygon({})
+  });
+  var dismiss = useDismiss(context);
+  var role = useRole(context);
+  var propsList = useMemo(function () {
+    var res = [dismiss, role];
+    var finalTrigger = trigger;
+    if (Array.isArray(trigger)) {
+      // 对于数组形式的 trigger，告警
+      console.error('trigger should be a string, support "hover" or "click" now.');
+      finalTrigger = 'click';
+    }
+    if (finalTrigger === 'hover') {
+      res.unshift(hover);
+    } else if (finalTrigger === 'click') {
+      res.unshift(click);
+    }
+    return res;
+  }, [trigger, click, dismiss, role, hover]);
+  var _useInteractions = useInteractions(propsList),
+    getReferenceProps = _useInteractions.getReferenceProps,
+    getFloatingProps = _useInteractions.getFloatingProps;
+  var headingId = useId();
+  var child = children;
+  var childProps = child.props || {};
+  var referenceProps = getReferenceProps();
+  var modifiedChild = /*#__PURE__*/cloneElement(child, _objectSpread(_objectSpread(_objectSpread({}, childProps), {}, {
+    disabled: disabled
+  }, referenceProps), {}, {
+    onClick: function onClick(event) {
+      var _childProps$onClick;
+      (_childProps$onClick = childProps.onClick) === null || _childProps$onClick === void 0 ? void 0 : _childProps$onClick.call(childProps, event);
+      var referenceOnClick = referenceProps.onClick;
+      if (typeof referenceOnClick === 'function') {
+        referenceOnClick(event);
+      }
+    }
+  }));
   var onMenuItemClick = useCallback(function (info) {
     if (menu !== null && menu !== void 0 && menu.onClick) {
       menu.onClick(info);
@@ -62,17 +116,9 @@ export default function Dropdown(props) {
       return;
     }
     if (!isOpenControlled) {
-      setDropdownOpen(false);
+      setIsOpen(false);
     }
   }, [isOpenControlled, menu]);
-  var onDropdownOpenChange = useCallback(function (isDropdownOpen) {
-    if (onOpenChange) {
-      onOpenChange(isDropdownOpen);
-    }
-    if (!isOpenControlled) {
-      setDropdownOpen(isDropdownOpen);
-    }
-  }, [isOpenControlled, onOpenChange]);
   var menuInstance = useMemo(function () {
     var menuProps = _objectSpread(_objectSpread({}, menu), {}, {
       items: (menu === null || menu === void 0 ? void 0 : menu.items) || []
@@ -81,24 +127,30 @@ export default function Dropdown(props) {
       onClick: onMenuItemClick
     }));
   }, [menu, onMenuItemClick]);
-  var menuRender = useCallback(function () {
-    if (dropdownRender) {
-      return dropdownRender(menuInstance);
-    }
-    if (menu) {
-      return menuInstance;
-    }
-    return undefined;
-  }, [menuInstance, dropdownRender, menu]);
-  return /*#__PURE__*/React.createElement(AntdDropdown, _extends({
-    overlayClassName: classNames('ald-dropdown-overlay', overlayClassName),
-    align: defaultAlign,
-    trigger: trigger,
-    placement: placement,
-    dropdownRender: menuRender,
-    destroyPopupOnHide: destroyPopupOnHide,
-    open: !!(isOpenControlled ? open : dropdownOpen),
-    onOpenChange: onDropdownOpenChange
-  }, antdDropdownProps), children);
-}
-Dropdown.Button = DropdownButton;
+  var popupElement = useMemo(function () {
+    return typeof dropdownRender === 'function' ? dropdownRender(menuInstance) : menuInstance;
+  }, [dropdownRender, menuInstance]);
+
+  // 渲染浮动内容到自定义容器
+  var renderFloatingContent = useCallback(function () {
+    var popupElem = /*#__PURE__*/React.createElement(FloatingFocusManager, {
+      context: context,
+      modal: false
+    }, /*#__PURE__*/React.createElement("div", _extends({
+      className: classNames('ald-dropdown-overlay', overlayClassName, _defineProperty({}, 'ald-dropdown-overlay-hidden', !isOpen)),
+      ref: refs.setFloating,
+      style: _objectSpread(_objectSpread({}, floatingStyles), overlayStyle),
+      "aria-labelledby": headingId
+    }, getFloatingProps()), popupElement));
+    var popupContainer = typeof getPopupContainer === 'function' ? getPopupContainer() : document.body;
+    return /*#__PURE__*/ReactDOM.createPortal(popupElem, popupContainer);
+  }, [context, floatingStyles, getFloatingProps, getPopupContainer, headingId, popupElement, refs.setFloating, overlayClassName, overlayStyle, isOpen]);
+  var popup = destroyPopupOnHide ? isOpen && renderFloatingContent() : renderFloatingContent();
+  var setTargetRef = useCallback(function (node) {
+    refs.setReference(node);
+  }, [refs]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizeObserver, {
+    disabled: !isOpen,
+    ref: setTargetRef
+  }, modifiedChild), popup);
+}

package/dist/Dropdown/style/index.less

@@ -5,6 +5,10 @@
 .ald-dropdown-overlay {
   .menuContainerStyle();
 
+  &.ald-dropdown-overlay-hidden {
+    visibility: hidden;
+  }
+
   padding: 4px 0 !important;
   animation-duration: 0s !important;
   max-width: none;

package/dist/IconButton/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IDropdownProps } from '../Dropdown';
+import { IDropdownProps } from '../Dropdown/index';
 import { TSize } from '../Input';
 import { ITooltipProps } from '../Tooltip';
 interface IIconButtonProps {
@@ -13,7 +13,7 @@ interface IIconButtonProps {
     id?: string;
     mode?: 'light' | 'dark';
 }
-declare const DropdownButton: React.ForwardRefExoticComponent<IIconButtonProps & IDropdownProps & {
+declare const DropdownButton: React.ForwardRefExoticComponent<IIconButtonProps & Omit<IDropdownProps, "children"> & {
     showArrow?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const IconButton: React.ForwardRefExoticComponent<IIconButtonProps & React.RefAttributes<HTMLDivElement>> & {

package/dist/IconButton/index.js

@@ -1,10 +1,10 @@
-var _excluded = ["icon", "onClick", "disabled", "size", "menu", "className", "onOpenChange", "tooltip", "id", "trigger", "showArrow", "mode"];
+var _excluded = ["icon", "onClick", "disabled", "size", "menu", "className", "onOpenChange", "tooltip", "id", "showArrow", "mode"];
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import classnames from 'classnames';
 import React, { forwardRef, useMemo } from 'react';
-import Dropdown from "../Dropdown";
+import Dropdown from "../Dropdown/index";
 import { FoldDownFill } from "../Icon";
 import { getSizeType } from "../Input/components/Input";
 import Tooltip from "../Tooltip";
@@ -57,8 +57,6 @@ var DropdownButton = /*#__PURE__*/forwardRef(function (props, ref) {
     onOpenChange = props.onOpenChange,
     tooltip = props.tooltip,
     id = props.id,
-    _props$trigger = props.trigger,
-    trigger = _props$trigger === void 0 ? ['click'] : _props$trigger,
     showArrow = props.showArrow,
     _props$mode2 = props.mode,
     mode = _props$mode2 === void 0 ? 'light' : _props$mode2,
@@ -94,7 +92,6 @@ var DropdownButton = /*#__PURE__*/forwardRef(function (props, ref) {
     title: tooltip === null || tooltip === void 0 ? void 0 : tooltip.title
   }), /*#__PURE__*/React.createElement(Dropdown, _extends({
     menu: menu,
-    trigger: trigger,
     onOpenChange: onOpenChange
   }, restDropdownProps), /*#__PURE__*/React.createElement("div", {
     id: id,

package/dist/Menu/style/index.less

@@ -18,7 +18,8 @@
   background: var(--alias-colors-bg-skeleton-subtler, #fff);
   box-shadow: 0 10px 18px -2px #00000014;
   min-width: @menu-width;
-  z-index: 999;
+  font-size: 14px;
+  z-index: 1001;
 }
 
 .ald-menu {