@apdesign/web-react 1.0.0

package/es/Menu/interface.d.ts

@@ -0,0 +1,233 @@
+import React, { ReactNode, CSSProperties, HTMLAttributes } from 'react';
+import { TriggerProps } from '../Trigger';
+import { TooltipProps } from '../Tooltip';
+/**
+ * @title Menu
+ */
+export interface MenuProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+    children?: ReactNode;
+    style?: CSSProperties;
+    prefixCls?: string;
+    className?: string | string[];
+    isMenu?: boolean;
+    inDropdown?: boolean;
+    /**
+     * @zh 菜单风格
+     * @en Theme of Menu
+     * @defaultValue light
+     */
+    theme?: 'light' | 'dark';
+    /**
+     * @zh 菜单类型，目前支持垂直（vertical）、水平菜单（horizontal）、弹出（pop）
+     * @en Mode of Menu
+     * @defaultValue vertical
+     */
+    mode?: 'vertical' | 'horizontal' | 'pop' | 'popButton';
+    /**
+     * @zh 层级之间的缩进量
+     * @en Indentation between levels
+     */
+    levelIndent?: number;
+    /**
+     * @zh 用于定制图标
+     * @en Customize icons
+     */
+    icons?: {
+        horizontalArrowDown?: ReactNode | null;
+        popArrowRight?: ReactNode | null;
+        collapseDefault?: ReactNode | null;
+        collapseActive?: ReactNode | null;
+    };
+    /**
+     * @zh 默认展开所有多级菜单
+     * @en Whether to expand all multi-level menus by default
+     */
+    autoOpen?: boolean;
+    /**
+     * @zh 是否水平折叠收起菜单
+     * @en Whether to collapse the menu horizontally
+     */
+    collapse?: boolean;
+    /**
+     * @zh 开启手风琴效果
+     * @en Whether to render as Accordion
+     */
+    accordion?: boolean;
+    /**
+     * @zh 菜单选项是否可选
+     * @en Whether is the menu item selectable
+     * @defaultValue true
+     */
+    selectable?: boolean;
+    /**
+     * @zh 水平菜单是否自动溢出省略
+     * @en Whether the horizontal menu automatically collapses when it overflows
+     * @defaultValue true
+     * @version 2.24.0
+     */
+    ellipsis?: boolean | {
+        text?: ReactNode;
+    };
+    /**
+     * @zh 是否自动滚动选中项目到可见区域
+     * @en Whether to automatically scroll the selected item to the visible area
+     */
+    autoScrollIntoView?: boolean;
+    /**
+     * @zh 是否内置折叠按钮
+     * @en Whether built-in folding button
+     */
+    hasCollapseButton?: boolean;
+    /**
+     * @zh 初始选中的菜单项 key 数组
+     * @en The initially selected menu item's key array
+     */
+    defaultSelectedKeys?: string[];
+    /**
+     * @zh 初始展开的子菜单 key 数组
+     * @en The initially opened menu item's key array
+     */
+    defaultOpenKeys?: string[];
+    /**
+     * @zh 选中的菜单项 key 数组（受控模式）
+     * @en Selected menu item's key array
+     */
+    selectedKeys?: string[];
+    /**
+     * @zh 展开的子菜单 key 数组（受控模式）
+     * @en Opened menu item's key array
+     */
+    openKeys?: string[];
+    /**
+     * @zh 点击菜单项的回调
+     * @en Click menu item callback
+     * @version `event` in 2.15.0, `keyPath` in 2.19.0
+     */
+    onClickMenuItem?: (key: string, event: any, keyPath: string[]) => any;
+    /**
+     * @zh 点击子菜单标题的回调
+     * @en Callback when click sub menu
+     * @version `keyPath` in 2.19.0
+     */
+    onClickSubMenu?: (key: string, openKeys: string[], keyPath: string[]) => void;
+    /**
+     * @zh 折叠状态改变时的回调
+     * @en Callback when menu collapse status changed
+     */
+    onCollapseChange?: (collapse: boolean) => void;
+    /**
+     * @zh 水平菜单自动超出省略发生变化时的回调
+     * @en Callback when horizontal-menu ellipsis status changed
+     * @version 2.57.0
+     */
+    onEllipsisChange?: (status: {
+        lastVisibleIndex: number;
+        overflowNodes: ReactNode[];
+    }) => void;
+    /**
+     * @zh
+     * 滚动到可见区域的配置项，接收所有[scroll-into-view-if-needed](https://github.com/stipsan/scroll-into-view-if-needed)的参数
+     * @en
+     * Scroll to the configuration item in the visible area and receive all the parameters of
+     * [scroll-into-view-if-needed](https://github.com/stipsan/scroll-into-view-if-needed)
+     */
+    scrollConfig?: {
+        [key: string]: any;
+    };
+    /**
+     * @zh 弹出模式下可接受所有 `Trigger` 的 `Props`
+     * @en Pass all `Trigger` component properties
+     */
+    triggerProps?: Partial<TriggerProps>;
+    /**
+     * @zh 弹出模式下可接受所有 `ToolTip` 的 `Props`
+     * @en Pass all `Tooltip` component properties
+     */
+    tooltipProps?: Partial<TooltipProps>;
+}
+/**
+ * @title Menu.SubMenu
+ */
+export interface MenuSubMenuProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'className'> {
+    children?: ReactNode;
+    style?: CSSProperties;
+    className?: string | string[];
+    level?: number;
+    _key?: string;
+    /**
+     * @zh 子菜单的标题
+     * @en Title of the subMenu
+     */
+    title?: string | ReactNode;
+    /**
+     * @zh 唯一标志
+     * @en Unique ID of the subMenu
+     */
+    key: string;
+    /**
+     * @zh 是否将多级菜单头也作为一个菜单项，支持点击选中等状态。
+     * @en Whether to use the subMenu header as a menu item which can be selected
+     */
+    selectable?: boolean;
+    /**
+     * @zh 是否强制使用弹出模式，`level` 表示当前子菜单的层级
+     * @en Whether to force the use of popup mode, parameter `level` indicates the level of current subMenu.
+     * @version 2.8.0
+     */
+    popup?: boolean | ((level: number) => boolean);
+    /**
+     * @zh 弹出模式下可接受所有 `Trigger` 的 `Props`
+     * @en Pass all `Trigger` component properties
+     * @version 2.19.0
+     */
+    triggerProps?: Partial<TriggerProps>;
+}
+/**
+ * @title Menu.ItemGroup
+ */
+export interface MenuItemGroupProps {
+    children?: ReactNode;
+    style?: CSSProperties;
+    className?: string | string[];
+    level?: number;
+    _key?: string;
+    /**
+     * @zh 菜单组的标题
+     * @en Title of the menu item group
+     */
+    title?: string | ReactNode;
+}
+/**
+ * @title Menu.Item
+ */
+export interface MenuItemProps extends Omit<HTMLAttributes<HTMLElement>, 'className'> {
+    children?: ReactNode;
+    style?: CSSProperties;
+    className?: string | string[];
+    level?: number;
+    _key?: string;
+    onClick?: (e: any) => void;
+    /**
+     * @zh 唯一标志
+     * @en Unique ID of the menu item
+     */
+    key: string;
+    /**
+     * @zh 菜单项禁止选中
+     * @en Whether the item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * @zh 配置最外层标签，可以是 html 标签或是组件
+     * @en Configure the outermost label, which can be a html label or a component
+     * @defaultValue div
+     * @version 2.16.0
+     */
+    wrapper?: string | React.FC<any> | React.ComponentClass<any>;
+    /**
+     * @zh 菜单折叠时，指定在 Tooltip 中展示的菜单项节点
+     * @en Set the menu item displayed in Tooltip when menu is collapsed
+     * @version 2.51.0
+     */
+    renderItemInTooltip?: () => ReactNode;
+}

package/es/Menu/interface.js

@@ -0,0 +1 @@
+export {};

package/es/Menu/item-group.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { MenuItemGroupProps } from './interface';
+declare const ItemGroupComponent: React.ForwardRefExoticComponent<MenuItemGroupProps & React.RefAttributes<unknown>> & {
+    menuType: string;
+};
+export default ItemGroupComponent;

package/es/Menu/item-group.js

@@ -0,0 +1,21 @@
+import React, { forwardRef, useContext } from 'react';
+import cs from '../_util/classNames';
+import { processChildren } from './util';
+import MenuContext from './context';
+import MenuIndent from './indent';
+function ItemGroup(props, ref) {
+    var children = props.children, title = props.title, level = props.level, className = props.className, style = props.style;
+    var _a = useContext(MenuContext), prefixCls = _a.prefixCls, levelIndent = _a.levelIndent;
+    var childrenLevel = level === 1 ? level + 1 : level;
+    var childrenList = processChildren(children, { level: childrenLevel });
+    return (React.createElement("div", { ref: ref, className: cs(prefixCls + "-group", className), style: style },
+        React.createElement("div", { className: prefixCls + "-group-title" },
+            React.createElement(MenuIndent, { level: level, prefixCls: prefixCls, levelIndent: levelIndent }),
+            React.createElement("span", null, title)),
+        childrenList));
+}
+var ForwardRefItemGroup = forwardRef(ItemGroup);
+var ItemGroupComponent = ForwardRefItemGroup;
+ItemGroupComponent.displayName = 'MenuItemGroup';
+ItemGroupComponent.menuType = 'MenuGroup';
+export default ItemGroupComponent;

package/es/Menu/item.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { MenuItemProps } from './interface';
+declare const ItemComponent: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<unknown>> & {
+    menuType: string;
+};
+export default ItemComponent;

package/es/Menu/item.js

@@ -0,0 +1,84 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef, useContext, useEffect, useRef } from 'react';
+import scrollIntoView from 'scroll-into-view-if-needed';
+import cs from '../_util/classNames';
+import Tooltip from '../Tooltip';
+import useIsFirstRender from '../_util/hooks/useIsFirstRender';
+import MenuContext from './context';
+import MenuIndent from './indent';
+import omit from '../_util/omit';
+import { PROPS_NEED_TO_BE_PASSED_IN_SUBMENU } from './util';
+import { Enter } from '../_util/keycode';
+function Item(props, ref) {
+    var _a;
+    var _key = props._key, children = props.children, level = props.level, disabled = props.disabled, className = props.className, style = props.style, _b = props.wrapper, WrapperTagName = _b === void 0 ? 'div' : _b, onClick = props.onClick, renderItemInTooltip = props.renderItemInTooltip, rest = __rest(props, ["_key", "children", "level", "disabled", "className", "style", "wrapper", "onClick", "renderItemInTooltip"]);
+    var _c = useContext(MenuContext), prefixCls = _c.prefixCls, mode = _c.mode, collapse = _c.collapse, inDropdown = _c.inDropdown, levelIndent = _c.levelIndent, selectedKeys = _c.selectedKeys, autoScrollIntoView = _c.autoScrollIntoView, scrollConfig = _c.scrollConfig, tooltipProps = _c.tooltipProps, onClickMenuItem = _c.onClickMenuItem;
+    var refElement = useRef(null);
+    var isFirstRender = useIsFirstRender();
+    var needTextIndent = mode === 'vertical' && level > 1;
+    var needTooltip = collapse && !inDropdown && level === 1;
+    var isSelected = selectedKeys && ~selectedKeys.indexOf(_key);
+    useEffect(function () {
+        var shouldScroll = isSelected && autoScrollIntoView;
+        if (refElement.current && shouldScroll) {
+            // 首次渲染需要等待展开动画结束之后滚动
+            setTimeout(function () {
+                refElement.current &&
+                    scrollIntoView(refElement.current, __assign({ behavior: 'smooth', block: 'start', scrollMode: 'if-needed', boundary: document.body }, scrollConfig));
+            }, isFirstRender ? 500 : 0);
+        }
+    }, [isSelected, autoScrollIntoView]);
+    var menuItemClickHandler = function (event) {
+        if (!disabled) {
+            onClickMenuItem(_key, event);
+            onClick && onClick(event);
+        }
+    };
+    var itemElement = (React.createElement(WrapperTagName, __assign({ tabIndex: disabled ? -1 : 0, role: "menuitem", ref: function (_ref) {
+            ref = _ref;
+            refElement.current = ref;
+        }, style: style, className: cs(prefixCls + "-item", (_a = {},
+            _a[prefixCls + "-disabled"] = disabled,
+            _a[prefixCls + "-selected"] = isSelected,
+            // 存在缩进dom
+            _a[prefixCls + "-item-indented"] = needTextIndent && !collapse,
+            _a), className), onClick: menuItemClickHandler, onKeyDown: function (event) {
+            var keyCode = event.keyCode || event.which;
+            if (keyCode === Enter.code) {
+                menuItemClickHandler(event);
+            }
+        } }, omit(rest, ['key', '_key'].concat(PROPS_NEED_TO_BE_PASSED_IN_SUBMENU))),
+        needTextIndent && !collapse ? (React.createElement(React.Fragment, null,
+            React.createElement(MenuIndent, { prefixCls: prefixCls, levelIndent: levelIndent, level: level }),
+            React.createElement("span", { className: prefixCls + "-item-inner", style: {
+                    display: 'block',
+                } }, children))) : (children),
+        isSelected && mode === 'horizontal' ? (React.createElement("div", { className: prefixCls + "-selected-label" })) : null));
+    return needTooltip ? (React.createElement(Tooltip, __assign({ trigger: "hover", position: "right", content: typeof renderItemInTooltip === 'function' ? renderItemInTooltip() : React.createElement("span", null, children), triggerProps: __assign({ className: prefixCls + "-item-tooltip" }, ((tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.triggerProps) || {})) }, omit(tooltipProps, ['triggerProps'])), itemElement)) : (itemElement);
+}
+var ForwardRefItem = forwardRef(Item);
+var ItemComponent = ForwardRefItem;
+ItemComponent.displayName = 'MenuItem';
+ItemComponent.menuType = 'MenuItem';
+export default ItemComponent;

package/es/Menu/overflow-wrap.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import type { MenuProps } from './interface';
+interface OverflowWrapProps {
+    ellipsisText?: ReactNode;
+    children: ReactNode;
+    onEllipsisChange?: MenuProps['onEllipsisChange'];
+}
+declare const OverflowWrap: (props: OverflowWrapProps) => JSX.Element;
+export default OverflowWrap;

package/es/Menu/overflow-wrap.js

@@ -0,0 +1,131 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React, { useState, useRef, useContext } from 'react';
+import SubMenu from './sub-menu';
+import { getStyle } from '../_util/style';
+import MenuContext from './context';
+import ResizeObserver from '../_util/resizeObserver';
+var OVERFLOW_THRESHOLD = 5;
+function getNodeWidth(node) {
+    // getBoundingClientRect will get a result like 20.45
+    // Use Math.ceil to avoid menu item wrap in specific menu-width
+    return node && Math.ceil(+node.getBoundingClientRect().width);
+}
+function translatePxToNumber(str) {
+    var result = Number(str.replace('px', ''));
+    return isNaN(result) ? 0 : result;
+}
+var OverflowWrap = function (props) {
+    var children = props.children, _a = props.ellipsisText, ellipsisText = _a === void 0 ? '···' : _a, onEllipsisChange = props.onEllipsisChange;
+    var prefixCls = useContext(MenuContext).prefixCls;
+    var refUl = useRef(null);
+    var _b = __read(useState(null), 2), lastVisibleIndex = _b[0], setLastVisibleIndex = _b[1];
+    var overflowSubMenuClass = prefixCls + "-overflow-sub-menu";
+    var overflowMenuItemClass = prefixCls + "-overflow-hidden-menu-item";
+    var overflowSubMenuMirrorClass = prefixCls + "-overflow-sub-menu-mirror";
+    var tryUpdateEllipsisStatus = function (_lastVisibleIndex) {
+        if (_lastVisibleIndex !== lastVisibleIndex) {
+            var childNodes = React.Children.toArray(children);
+            var noOverflow = _lastVisibleIndex === null;
+            onEllipsisChange === null || onEllipsisChange === void 0 ? void 0 : onEllipsisChange({
+                lastVisibleIndex: noOverflow ? childNodes.length - 1 : _lastVisibleIndex,
+                overflowNodes: noOverflow ? [] : childNodes.slice(_lastVisibleIndex + 1),
+            });
+            setLastVisibleIndex(_lastVisibleIndex);
+        }
+    };
+    function computeLastVisibleIndex() {
+        if (!refUl.current) {
+            return;
+        }
+        var ulElement = refUl.current;
+        var maxWidth = getNodeWidth(ulElement) - OVERFLOW_THRESHOLD;
+        var childNodeList = [].slice.call(ulElement.children);
+        var menuItemIndex = 0;
+        var currentItemRight = 0;
+        var overflowSubMenuWidth = 0;
+        // 注意 childrenNodeList.length !== React.Children.count(children) 所以需要用 menuItemIndex 来标记真实的 MenuItem 下标
+        for (var i = 0; i < childNodeList.length; i++) {
+            var node = childNodeList[i];
+            var classNames = node.className.split(' ');
+            var isOverflowSubMenu = classNames.indexOf(overflowSubMenuClass) > -1;
+            var isOverflowSubMenuMirror = classNames.indexOf(overflowSubMenuMirrorClass) > -1;
+            // 忽略 overflowSubMenu 的宽度，其宽度测量交由 overflowSubMenuMirror
+            if (isOverflowSubMenu) {
+                continue;
+            }
+            var nodeWidth = getNodeWidth(node) +
+                translatePxToNumber(getStyle(node, 'marginLeft')) +
+                translatePxToNumber(getStyle(node, 'marginRight'));
+            if (isOverflowSubMenuMirror) {
+                overflowSubMenuWidth = nodeWidth;
+                continue;
+            }
+            currentItemRight += nodeWidth;
+            // 将要溢出的菜单项
+            if (currentItemRight > maxWidth) {
+                tryUpdateEllipsisStatus(
+                // 判断如果将最后一个菜单项换为 ... 是否会超出宽度
+                menuItemIndex - (currentItemRight - nodeWidth + overflowSubMenuWidth <= maxWidth ? 1 : 2));
+                return;
+            }
+            menuItemIndex++;
+        }
+        // 全部可见
+        tryUpdateEllipsisStatus(null);
+    }
+    var renderOverflowSubMenu = function (children, isMirror) {
+        if (isMirror === void 0) { isMirror = false; }
+        return (React.createElement(SubMenu, { title: React.createElement("span", null, ellipsisText), key: "arco-menu-overflow-sub-menu" + (isMirror ? '-mirror' : ''), className: isMirror ? overflowSubMenuMirrorClass : overflowSubMenuClass, children: children }));
+    };
+    var renderChildren = function () {
+        var overflowSubMenu = null;
+        var overflowSubMenuMirror = renderOverflowSubMenu(null, true);
+        var originMenuItems = React.Children.map(children, function (child, index) {
+            var item = child;
+            if (lastVisibleIndex !== null) {
+                if (index > lastVisibleIndex) {
+                    item = React.cloneElement(child, {
+                        className: overflowMenuItemClass,
+                    });
+                }
+                if (index === lastVisibleIndex + 1) {
+                    var overflowedItems = React.Children.toArray(children)
+                        .slice(lastVisibleIndex + 1)
+                        .map(function (child) {
+                        return React.cloneElement(child, { key: child.props._key });
+                    });
+                    overflowSubMenu = renderOverflowSubMenu(overflowedItems);
+                }
+            }
+            return item;
+        });
+        return __spreadArray(__spreadArray([overflowSubMenuMirror], __read(originMenuItems), false), [overflowSubMenu], false);
+    };
+    return (React.createElement(ResizeObserver, { onResize: computeLastVisibleIndex, getTargetDOMNode: function () { return refUl.current; } },
+        React.createElement("div", { className: prefixCls + "-overflow-wrap", ref: refUl }, renderChildren())));
+};
+export default OverflowWrap;

package/es/Menu/style/css.js

@@ -0,0 +1,4 @@
+import '../../style/index.css';
+import '../../Dropdown/style/css.js';
+import '../../Tooltip/style/css.js';
+import './index.css';

package/es/Menu/style/index.css

@@ -0,0 +1 @@
+@keyframes arco-menu-selected-item-label-enter{from{opacity:0}to{opacity:1}}.arco-menu{position:relative;box-sizing:border-box;width:100%;font-size:14px;line-height:1.5715;transition:width .2s cubic-bezier(.34,.69,.1,1)}.arco-menu-indent{display:inline-block;width:20px}.arco-menu .arco-menu-group-title,.arco-menu .arco-menu-inline-header,.arco-menu .arco-menu-item,.arco-menu .arco-menu-pop-header{position:relative;border-radius:var(--border-radius-small);box-sizing:border-box;cursor:pointer}.arco-menu .arco-menu-group-title.arco-menu-disabled,.arco-menu .arco-menu-inline-header.arco-menu-disabled,.arco-menu .arco-menu-item.arco-menu-disabled,.arco-menu .arco-menu-pop-header.arco-menu-disabled{cursor:not-allowed}.arco-menu .arco-menu-group-title.arco-menu-selected,.arco-menu .arco-menu-inline-header.arco-menu-selected,.arco-menu .arco-menu-item.arco-menu-selected,.arco-menu .arco-menu-pop-header.arco-menu-selected{font-weight:500;transition:color .2s cubic-bezier(0,0,1,1)}.arco-menu .arco-menu-group-title.arco-menu-selected svg,.arco-menu .arco-menu-inline-header.arco-menu-selected svg,.arco-menu .arco-menu-item.arco-menu-selected svg,.arco-menu .arco-menu-pop-header.arco-menu-selected svg{transition:color .2s cubic-bezier(0,0,1,1)}.arco-menu .arco-menu-group-title .arco-icon,.arco-menu .arco-menu-inline-header .arco-icon,.arco-menu .arco-menu-item .arco-icon,.arco-menu .arco-menu-pop-header .arco-icon{margin-right:16px}.arco-menu-light{background-color:var(--color-menu-light-bg)}.arco-menu-light .arco-menu-group-title,.arco-menu-light .arco-menu-inline-header,.arco-menu-light .arco-menu-item,.arco-menu-light .arco-menu-pop-header{background-color:var(--color-menu-light-bg);color:var(--color-text-2)}.arco-menu-light .arco-menu-group-title .arco-icon,.arco-menu-light .arco-menu-inline-header .arco-icon,.arco-menu-light .arco-menu-item .arco-icon,.arco-menu-light .arco-menu-pop-header .arco-icon{color:var(--color-text-3)}.arco-menu-light .arco-menu-group-title:hover,.arco-menu-light .arco-menu-inline-header:hover,.arco-menu-light .arco-menu-item:hover,.arco-menu-light .arco-menu-pop-header:hover{background-color:var(--color-fill-2);color:var(--color-text-2)}.arco-menu-light .arco-menu-group-title:hover .arco-icon,.arco-menu-light .arco-menu-inline-header:hover .arco-icon,.arco-menu-light .arco-menu-item:hover .arco-icon,.arco-menu-light .arco-menu-pop-header:hover .arco-icon{color:var(--color-text-3)}.arco-menu-light .arco-menu-group-title:focus-visible,.arco-menu-light .arco-menu-inline-header:focus-visible,.arco-menu-light .arco-menu-item:focus-visible,.arco-menu-light .arco-menu-pop-header:focus-visible{box-shadow:0 0 0 2px rgb(var(--primary-6)) inset}.arco-menu-light .arco-menu-group-title.arco-menu-selected,.arco-menu-light .arco-menu-inline-header.arco-menu-selected,.arco-menu-light .arco-menu-item.arco-menu-selected,.arco-menu-light .arco-menu-pop-header.arco-menu-selected{color:rgb(var(--primary-6))}.arco-menu-light .arco-menu-group-title.arco-menu-selected .arco-icon,.arco-menu-light .arco-menu-inline-header.arco-menu-selected .arco-icon,.arco-menu-light .arco-menu-item.arco-menu-selected .arco-icon,.arco-menu-light .arco-menu-pop-header.arco-menu-selected .arco-icon{color:rgb(var(--primary-6))}.arco-menu-light .arco-menu-group-title.arco-menu-disabled,.arco-menu-light .arco-menu-inline-header.arco-menu-disabled,.arco-menu-light .arco-menu-item.arco-menu-disabled,.arco-menu-light .arco-menu-pop-header.arco-menu-disabled{background-color:var(--color-menu-light-bg);color:var(--color-text-4)}.arco-menu-light .arco-menu-group-title.arco-menu-disabled .arco-icon,.arco-menu-light .arco-menu-inline-header.arco-menu-disabled .arco-icon,.arco-menu-light .arco-menu-item.arco-menu-disabled .arco-icon,.arco-menu-light .arco-menu-pop-header.arco-menu-disabled .arco-icon{color:var(--color-text-4)}.arco-menu-light .arco-menu-item.arco-menu-selected{background-color:var(--color-fill-2)}.arco-menu-light .arco-menu-inline-header.arco-menu-selected{color:rgb(var(--primary-6))}.arco-menu-light .arco-menu-inline-header.arco-menu-selected .arco-icon{color:rgb(var(--primary-6))}.arco-menu-light .arco-menu-inline-header.arco-menu-selected:hover{background-color:var(--color-fill-2)}.arco-menu-light.arco-menu-horizontal .arco-menu-group-title.arco-menu-selected,.arco-menu-light.arco-menu-horizontal .arco-menu-inline-header.arco-menu-selected,.arco-menu-light.arco-menu-horizontal .arco-menu-item.arco-menu-selected,.arco-menu-light.arco-menu-horizontal .arco-menu-pop-header.arco-menu-selected{background:0 0;transition:color .2s cubic-bezier(0,0,1,1)}.arco-menu-light.arco-menu-horizontal .arco-menu-group-title.arco-menu-selected:hover,.arco-menu-light.arco-menu-horizontal .arco-menu-inline-header.arco-menu-selected:hover,.arco-menu-light.arco-menu-horizontal .arco-menu-item.arco-menu-selected:hover,.arco-menu-light.arco-menu-horizontal .arco-menu-pop-header.arco-menu-selected:hover{background-color:var(--color-fill-2)}.arco-menu-light .arco-menu-group-title{color:var(--color-text-3);pointer-events:none}.arco-menu-light .arco-menu-collapse-button{background-color:var(--color-fill-1);color:var(--color-text-3)}.arco-menu-light .arco-menu-collapse-button:hover{background-color:var(--color-fill-3)}.arco-menu-light .arco-menu-collapse-button:focus-visible{box-shadow:0 0 0 2px rgb(var(--primary-6))}.arco-menu-dark{background-color:var(--color-menu-dark-bg)}.arco-menu-dark .arco-menu-group-title,.arco-menu-dark .arco-menu-inline-header,.arco-menu-dark .arco-menu-item,.arco-menu-dark .arco-menu-pop-header{background-color:var(--color-menu-dark-bg);color:var(--color-text-4)}.arco-menu-dark .arco-menu-group-title .arco-icon,.arco-menu-dark .arco-menu-inline-header .arco-icon,.arco-menu-dark .arco-menu-item .arco-icon,.arco-menu-dark .arco-menu-pop-header .arco-icon{color:var(--color-text-3)}.arco-menu-dark .arco-menu-group-title:hover,.arco-menu-dark .arco-menu-inline-header:hover,.arco-menu-dark .arco-menu-item:hover,.arco-menu-dark .arco-menu-pop-header:hover{background-color:var(--color-menu-dark-hover);color:var(--color-text-4)}.arco-menu-dark .arco-menu-group-title:hover .arco-icon,.arco-menu-dark .arco-menu-inline-header:hover .arco-icon,.arco-menu-dark .arco-menu-item:hover .arco-icon,.arco-menu-dark .arco-menu-pop-header:hover .arco-icon{color:var(--color-text-3)}.arco-menu-dark .arco-menu-group-title:focus-visible,.arco-menu-dark .arco-menu-inline-header:focus-visible,.arco-menu-dark .arco-menu-item:focus-visible,.arco-menu-dark .arco-menu-pop-header:focus-visible{box-shadow:0 0 0 2px rgb(var(--primary-6)) inset}.arco-menu-dark .arco-menu-group-title.arco-menu-selected,.arco-menu-dark .arco-menu-inline-header.arco-menu-selected,.arco-menu-dark .arco-menu-item.arco-menu-selected,.arco-menu-dark .arco-menu-pop-header.arco-menu-selected{color:var(--color-white)}.arco-menu-dark .arco-menu-group-title.arco-menu-selected .arco-icon,.arco-menu-dark .arco-menu-inline-header.arco-menu-selected .arco-icon,.arco-menu-dark .arco-menu-item.arco-menu-selected .arco-icon,.arco-menu-dark .arco-menu-pop-header.arco-menu-selected .arco-icon{color:var(--color-white)}.arco-menu-dark .arco-menu-group-title.arco-menu-disabled,.arco-menu-dark .arco-menu-inline-header.arco-menu-disabled,.arco-menu-dark .arco-menu-item.arco-menu-disabled,.arco-menu-dark .arco-menu-pop-header.arco-menu-disabled{background-color:var(--color-menu-dark-bg);color:var(--color-text-2)}.arco-menu-dark .arco-menu-group-title.arco-menu-disabled .arco-icon,.arco-menu-dark .arco-menu-inline-header.arco-menu-disabled .arco-icon,.arco-menu-dark .arco-menu-item.arco-menu-disabled .arco-icon,.arco-menu-dark .arco-menu-pop-header.arco-menu-disabled .arco-icon{color:var(--color-text-2)}.arco-menu-dark .arco-menu-item.arco-menu-selected{background-color:var(--color-menu-dark-hover)}.arco-menu-dark .arco-menu-inline-header.arco-menu-selected{color:rgb(var(--primary-6))}.arco-menu-dark .arco-menu-inline-header.arco-menu-selected .arco-icon{color:rgb(var(--primary-6))}.arco-menu-dark .arco-menu-inline-header.arco-menu-selected:hover{background-color:var(--color-menu-dark-hover)}.arco-menu-dark.arco-menu-horizontal .arco-menu-group-title.arco-menu-selected,.arco-menu-dark.arco-menu-horizontal .arco-menu-inline-header.arco-menu-selected,.arco-menu-dark.arco-menu-horizontal .arco-menu-item.arco-menu-selected,.arco-menu-dark.arco-menu-horizontal .arco-menu-pop-header.arco-menu-selected{background:0 0;transition:color .2s cubic-bezier(0,0,1,1)}.arco-menu-dark.arco-menu-horizontal .arco-menu-group-title.arco-menu-selected:hover,.arco-menu-dark.arco-menu-horizontal .arco-menu-inline-header.arco-menu-selected:hover,.arco-menu-dark.arco-menu-horizontal .arco-menu-item.arco-menu-selected:hover,.arco-menu-dark.arco-menu-horizontal .arco-menu-pop-header.arco-menu-selected:hover{background-color:var(--color-menu-dark-hover)}.arco-menu-dark .arco-menu-group-title{color:var(--color-text-3);pointer-events:none}.arco-menu-dark .arco-menu-collapse-button{background-color:rgb(var(--primary-6));color:var(--color-white)}.arco-menu-dark .arco-menu-collapse-button:hover{background-color:rgb(var(--primary-7))}.arco-menu-dark .arco-menu-collapse-button:focus-visible{box-shadow:0 0 0 2px rgb(var(--primary-6))}.arco-menu a,.arco-menu a:active,.arco-menu a:focus,.arco-menu a:hover{color:inherit;cursor:inherit;text-decoration:none}.arco-menu-item-inner>a:only-child::before{content:'';position:absolute;left:0;right:0;top:0;bottom:0}.arco-menu-inner{box-sizing:border-box;width:100%;height:100%;overflow:auto}.arco-menu-vertical .arco-menu-group-title,.arco-menu-vertical .arco-menu-inline-header,.arco-menu-vertical .arco-menu-item,.arco-menu-vertical .arco-menu-pop-header{padding:0 12px;line-height:40px}.arco-menu-vertical .arco-menu-group-title .arco-menu-icon-suffix .arco-icon,.arco-menu-vertical .arco-menu-inline-header .arco-menu-icon-suffix .arco-icon,.arco-menu-vertical .arco-menu-item .arco-menu-icon-suffix .arco-icon,.arco-menu-vertical .arco-menu-pop-header .arco-menu-icon-suffix .arco-icon{margin-right:0}.arco-menu-vertical .arco-menu-group-title,.arco-menu-vertical .arco-menu-inline-header,.arco-menu-vertical .arco-menu-item,.arco-menu-vertical .arco-menu-pop-header{margin-bottom:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.arco-menu-vertical .arco-menu-group-title .arco-menu-item-inner,.arco-menu-vertical .arco-menu-inline-header .arco-menu-item-inner,.arco-menu-vertical .arco-menu-item .arco-menu-item-inner,.arco-menu-vertical .arco-menu-pop-header .arco-menu-item-inner{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.arco-menu-vertical .arco-menu-group-title .arco-menu-icon-suffix,.arco-menu-vertical .arco-menu-inline-header .arco-menu-icon-suffix,.arco-menu-vertical .arco-menu-item .arco-menu-icon-suffix,.arco-menu-vertical .arco-menu-pop-header .arco-menu-icon-suffix{position:absolute;right:12px;top:50%;transform:translateY(-50%)}.arco-menu-vertical .arco-menu-group-title .arco-menu-icon-suffix.is-open,.arco-menu-vertical .arco-menu-inline-header .arco-menu-icon-suffix.is-open,.arco-menu-vertical .arco-menu-item .arco-menu-icon-suffix.is-open,.arco-menu-vertical .arco-menu-pop-header .arco-menu-icon-suffix.is-open{transform:translateY(-50%) rotate(180deg)}.arco-menu-vertical .arco-menu-inner{padding:4px 8px}.arco-menu-vertical .arco-menu-item.arco-menu-item-indented{display:flex}.arco-menu-vertical .arco-menu-inline-header,.arco-menu-vertical .arco-menu-pop-header{padding-right:28px}.arco-menu-horizontal{width:auto;height:auto}.arco-menu-horizontal .arco-menu-group-title,.arco-menu-horizontal .arco-menu-inline-header,.arco-menu-horizontal .arco-menu-item,.arco-menu-horizontal .arco-menu-pop-header{padding:0 12px;line-height:30px}.arco-menu-horizontal .arco-menu-group-title .arco-menu-icon-suffix .arco-icon,.arco-menu-horizontal .arco-menu-inline-header .arco-menu-icon-suffix .arco-icon,.arco-menu-horizontal .arco-menu-item .arco-menu-icon-suffix .arco-icon,.arco-menu-horizontal .arco-menu-pop-header .arco-menu-icon-suffix .arco-icon{margin-right:0}.arco-menu-horizontal .arco-menu-group-title .arco-icon,.arco-menu-horizontal .arco-menu-inline-header .arco-icon,.arco-menu-horizontal .arco-menu-item .arco-icon,.arco-menu-horizontal .arco-menu-pop-header .arco-icon{margin-right:8px}.arco-menu-horizontal .arco-menu-group-title .arco-menu-icon-suffix,.arco-menu-horizontal .arco-menu-inline-header .arco-menu-icon-suffix,.arco-menu-horizontal .arco-menu-item .arco-menu-icon-suffix,.arco-menu-horizontal .arco-menu-pop-header .arco-menu-icon-suffix{margin-left:6px}.arco-menu-horizontal .arco-menu-inner{display:flex;align-items:center;padding:14px 20px}.arco-menu-horizontal .arco-menu-item,.arco-menu-horizontal .arco-menu-pop{display:inline-block;vertical-align:middle;flex-shrink:0}.arco-menu-horizontal .arco-menu-item:not(:first-child),.arco-menu-horizontal .arco-menu-pop:not(:first-child){margin-left:12px}.arco-menu-horizontal .arco-menu-pop::after{content:' ';width:100%;height:14px;position:absolute;left:0;bottom:-14px}.arco-menu-overflow-wrap{width:100%}.arco-menu-overflow-sub-menu-mirror{margin-left:12px}.arco-menu-overflow-hidden-menu-item,.arco-menu-overflow-sub-menu-mirror{position:absolute!important;white-space:nowrap;visibility:hidden;pointer-events:none}.arco-menu-selected-label{position:absolute;left:12px;right:12px;bottom:-14px;height:3px;background-color:rgb(var(--primary-6));animation:arco-menu-selected-item-label-enter .2s cubic-bezier(0,0,1,1)}.arco-menu-pop-button{width:auto;background:0 0;box-shadow:none}.arco-menu-pop-button.arco-menu-collapse{width:auto}.arco-menu-pop-button .arco-menu-group-title,.arco-menu-pop-button .arco-menu-inline-header,.arco-menu-pop-button .arco-menu-item,.arco-menu-pop-button .arco-menu-pop-header{width:40px;height:40px;line-height:40px;border-radius:50%;border:1px solid transparent;box-shadow:0 4px 10px rgba(0,0,0,.1);margin-bottom:16px}.arco-menu-collapse{width:48px}.arco-menu-collapse .arco-menu-inner{padding:4px 4px}.arco-menu-collapse .arco-menu-group-title,.arco-menu-collapse .arco-menu-icon-suffix{display:none}.arco-menu-collapse .arco-menu-group-title .arco-icon,.arco-menu-collapse .arco-menu-inline-header .arco-icon,.arco-menu-collapse .arco-menu-item .arco-icon,.arco-menu-collapse .arco-menu-pop-header .arco-icon{margin-left:1px;margin-right:100vw}.arco-menu-collapse .arco-menu-collapse-button{right:unset;left:50%;transform:translateX(-50%)}.arco-menu-collapse-button{display:flex;align-items:center;justify-content:center;position:absolute;right:12px;bottom:12px;width:24px;height:24px;border-radius:var(--border-radius-small);cursor:pointer}.arco-menu-inline-content{overflow:hidden;height:auto;transition:height .2s cubic-bezier(.34,.69,.1,1)}.arco-menu-item-tooltip a{color:inherit;cursor:pointer;text-decoration:none}.arco-menu-item-tooltip a:active,.arco-menu-item-tooltip a:focus,.arco-menu-item-tooltip a:hover{color:inherit}.arco-menu-item-tooltip a::before{content:'';position:absolute;left:0;right:0;top:0;bottom:0}.arco-menu-pop-trigger.arco-trigger-position-bl{transform:translateY(14px)}.arco-menu-pop-trigger.arco-trigger-position-bl .arco-trigger-arrow{z-index:0;border-left:1px solid var(--color-neutral-3);border-top:1px solid var(--color-neutral-3)}.arco-menu-pop-trigger.arco-trigger[trigger-placement=rt]{transform:translateX(8px)}.arco-menu-pop-trigger.arco-trigger[trigger-placement=rt] .arco-trigger-arrow{z-index:0;border-left:1px solid var(--color-neutral-3);border-bottom:1px solid var(--color-neutral-3)}.arco-menu-pop-trigger.arco-trigger[trigger-placement=lt]{transform:translateX(-8px)}.arco-menu-pop-trigger.arco-trigger[trigger-placement=lt] .arco-trigger-arrow{z-index:0;border-right:1px solid var(--color-neutral-3);border-top:1px solid var(--color-neutral-3)}.arco-menu-pop-trigger .arco-dropdown-menu-dark~.arco-trigger-arrow-container .arco-trigger-arrow{background-color:var(--color-menu-dark-bg);border-color:var(--color-menu-dark-bg)}.arco-menu-rtl{direction:rtl}.arco-menu-rtl .arco-menu-group-title .arco-icon,.arco-menu-rtl .arco-menu-inline-header .arco-icon,.arco-menu-rtl .arco-menu-item .arco-icon,.arco-menu-rtl .arco-menu-pop-header .arco-icon{margin-right:0;margin-left:16px}.arco-menu-rtl.arco-menu-horizontal .arco-menu-group-title .arco-menu-icon-suffix .arco-icon,.arco-menu-rtl.arco-menu-horizontal .arco-menu-inline-header .arco-menu-icon-suffix .arco-icon,.arco-menu-rtl.arco-menu-horizontal .arco-menu-item .arco-menu-icon-suffix .arco-icon,.arco-menu-rtl.arco-menu-horizontal .arco-menu-pop-header .arco-menu-icon-suffix .arco-icon{margin-left:0}.arco-menu-rtl.arco-menu-horizontal .arco-menu-group-title .arco-icon,.arco-menu-rtl.arco-menu-horizontal .arco-menu-inline-header .arco-icon,.arco-menu-rtl.arco-menu-horizontal .arco-menu-item .arco-icon,.arco-menu-rtl.arco-menu-horizontal .arco-menu-pop-header .arco-icon{margin-right:0;margin-left:8px}.arco-menu-rtl.arco-menu-horizontal .arco-menu-group-title .arco-menu-icon-suffix,.arco-menu-rtl.arco-menu-horizontal .arco-menu-inline-header .arco-menu-icon-suffix,.arco-menu-rtl.arco-menu-horizontal .arco-menu-item .arco-menu-icon-suffix,.arco-menu-rtl.arco-menu-horizontal .arco-menu-pop-header .arco-menu-icon-suffix{margin-left:0;margin-right:6px}.arco-menu-rtl.arco-menu-horizontal .arco-menu-item:not(:first-child),.arco-menu-rtl.arco-menu-horizontal .arco-menu-pop:not(:first-child){margin-left:0;margin-right:12px}.arco-menu-rtl.arco-menu-vertical .arco-menu-group-title .arco-menu-icon-suffix .arco-icon,.arco-menu-rtl.arco-menu-vertical .arco-menu-inline-header .arco-menu-icon-suffix .arco-icon,.arco-menu-rtl.arco-menu-vertical .arco-menu-item .arco-menu-icon-suffix .arco-icon,.arco-menu-rtl.arco-menu-vertical .arco-menu-pop-header .arco-menu-icon-suffix .arco-icon{margin-left:0}.arco-menu-rtl.arco-menu-vertical .arco-menu-group-title,.arco-menu-rtl.arco-menu-vertical .arco-menu-inline-header,.arco-menu-rtl.arco-menu-vertical .arco-menu-item,.arco-menu-rtl.arco-menu-vertical .arco-menu-pop-header{text-overflow:clip}.arco-menu-rtl.arco-menu-vertical .arco-menu-group-title .arco-menu-item-inner,.arco-menu-rtl.arco-menu-vertical .arco-menu-inline-header .arco-menu-item-inner,.arco-menu-rtl.arco-menu-vertical .arco-menu-item .arco-menu-item-inner,.arco-menu-rtl.arco-menu-vertical .arco-menu-pop-header .arco-menu-item-inner{text-overflow:clip}.arco-menu-rtl.arco-menu-vertical .arco-menu-group-title .arco-menu-icon-suffix,.arco-menu-rtl.arco-menu-vertical .arco-menu-inline-header .arco-menu-icon-suffix,.arco-menu-rtl.arco-menu-vertical .arco-menu-item .arco-menu-icon-suffix,.arco-menu-rtl.arco-menu-vertical .arco-menu-pop-header .arco-menu-icon-suffix{right:initial;left:12px}.arco-menu-rtl.arco-menu-vertical .arco-menu-inline-header,.arco-menu-rtl.arco-menu-vertical .arco-menu-pop-header{padding-right:12px;padding-left:28px}.arco-menu-rtl .arco-menu-pop::after{right:0;left:initial}.arco-menu-rtl .arco-menu-collapse .arco-menu-group-title .arco-icon,.arco-menu-rtl .arco-menu-collapse .arco-menu-inline-header .arco-icon,.arco-menu-rtl .arco-menu-collapse .arco-menu-item .arco-icon,.arco-menu-rtl .arco-menu-collapse .arco-menu-pop-header .arco-icon{margin-left:100vw;margin-right:1px}.arco-menu-rtl .arco-menu-pop-trigger.arco-trigger-position-bl .arco-trigger-arrow{border-left:none;border-right:1px solid var(--color-neutral-3)}.arco-menu-rtl .arco-menu-pop-trigger.arco-trigger[trigger-placement=rt]{transform:translateX(-8px)}.arco-menu-rtl .arco-menu-pop-trigger.arco-trigger[trigger-placement=lt]{transform:translateX(8px)}.arco-menu-rtl .arco-menu-pop-trigger.arco-trigger[trigger-placement=lt] .arco-trigger-arrow{border-right:none;border-left:1px solid var(--color-neutral-3)}

package/es/Menu/style/index.d.ts

@@ -0,0 +1,4 @@
+import '../../style/index.less';
+import '../../Dropdown/style';
+import '../../Tooltip/style';
+import './index.less';

package/es/Menu/style/index.js

@@ -0,0 +1,4 @@
+import '../../style/index.less';
+import '../../Dropdown/style';
+import '../../Tooltip/style';
+import './index.less';