ezr-antd 1.0.0

package/es/menu/MenuItem.js

@@ -0,0 +1,83 @@
+"use client";
+
+import * as React from 'react';
+import classNames from 'classnames';
+import { Item } from 'rc-menu';
+import toArray from "rc-util/es/Children/toArray";
+import omit from "rc-util/es/omit";
+import { cloneElement } from '../_util/reactNode';
+import { SiderContext } from '../layout/Sider';
+import Tooltip from '../tooltip';
+import MenuContext from './MenuContext';
+const MenuItem = props => {
+  var _a;
+  const {
+    className,
+    children,
+    icon,
+    title,
+    danger,
+    extra
+  } = props;
+  const {
+    prefixCls,
+    firstLevel,
+    direction,
+    disableMenuItemTitleTooltip,
+    inlineCollapsed: isInlineCollapsed
+  } = React.useContext(MenuContext);
+  const renderItemChildren = inlineCollapsed => {
+    const label = children === null || children === void 0 ? void 0 : children[0];
+    const wrapNode = /*#__PURE__*/React.createElement("span", {
+      className: classNames(`${prefixCls}-title-content`, {
+        [`${prefixCls}-title-content-with-extra`]: !!extra || extra === 0
+      })
+    }, children);
+    // inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性，则内部包裹一个 span
+    // ref: https://github.com/ant-design/ant-design/pull/23456
+    if (!icon || /*#__PURE__*/React.isValidElement(children) && children.type === 'span') {
+      if (children && inlineCollapsed && firstLevel && typeof label === 'string') {
+        return /*#__PURE__*/React.createElement("div", {
+          className: `${prefixCls}-inline-collapsed-noicon`
+        }, label.charAt(0));
+      }
+    }
+    return wrapNode;
+  };
+  const {
+    siderCollapsed
+  } = React.useContext(SiderContext);
+  let tooltipTitle = title;
+  if (typeof title === 'undefined') {
+    tooltipTitle = firstLevel ? children : '';
+  } else if (title === false) {
+    tooltipTitle = '';
+  }
+  const tooltipProps = {
+    title: tooltipTitle
+  };
+  if (!siderCollapsed && !isInlineCollapsed) {
+    tooltipProps.title = null;
+    // Reset `open` to fix control mode tooltip display not correct
+    // ref: https://github.com/ant-design/ant-design/issues/16742
+    tooltipProps.open = false;
+  }
+  const childrenLength = toArray(children).length;
+  let returnNode = /*#__PURE__*/React.createElement(Item, Object.assign({}, omit(props, ['title', 'icon', 'danger']), {
+    className: classNames({
+      [`${prefixCls}-item-danger`]: danger,
+      [`${prefixCls}-item-only-child`]: (icon ? childrenLength + 1 : childrenLength) === 1
+    }, className),
+    title: typeof title === 'string' ? title : undefined
+  }), cloneElement(icon, {
+    className: classNames(/*#__PURE__*/React.isValidElement(icon) ? (_a = icon.props) === null || _a === void 0 ? void 0 : _a.className : '', `${prefixCls}-item-icon`)
+  }), renderItemChildren(isInlineCollapsed));
+  if (!disableMenuItemTitleTooltip) {
+    returnNode = /*#__PURE__*/React.createElement(Tooltip, Object.assign({}, tooltipProps, {
+      placement: direction === 'rtl' ? 'left' : 'right',
+      overlayClassName: `${prefixCls}-inline-collapsed-tooltip`
+    }), returnNode);
+  }
+  return returnNode;
+};
+export default MenuItem;

package/es/menu/OverrideContext.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { MenuProps } from './menu';
+export interface OverrideContextProps {
+    prefixCls?: string;
+    expandIcon?: React.ReactNode;
+    mode?: MenuProps['mode'];
+    selectable?: boolean;
+    validator?: (menuProps: Pick<MenuProps, 'mode'>) => void;
+    onClick?: () => void;
+    rootClassName?: string;
+}
+declare const OverrideContext: React.Context<OverrideContextProps | null>;
+export {};

package/es/menu/OverrideContext.js

@@ -0,0 +1,38 @@
+"use client";
+
+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 * as React from 'react';
+import { supportNodeRef, useComposeRef } from "rc-util/es/ref";
+import ContextIsolator from '../_util/ContextIsolator';
+const OverrideContext = /*#__PURE__*/React.createContext(null);
+/** @internal Only used for Dropdown component. Do not use this in your production. */
+export const OverrideProvider = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+      children
+    } = props,
+    restProps = __rest(props, ["children"]);
+  const override = React.useContext(OverrideContext);
+  const context = React.useMemo(() => Object.assign(Object.assign({}, override), restProps), [override, restProps.prefixCls,
+  // restProps.expandIcon, Not mark as deps since this is a ReactNode
+  restProps.mode, restProps.selectable, restProps.rootClassName
+  // restProps.validator, Not mark as deps since this is a function
+  ]);
+  const canRef = supportNodeRef(children);
+  const mergedRef = useComposeRef(ref, canRef ? children.ref : null);
+  return /*#__PURE__*/React.createElement(OverrideContext.Provider, {
+    value: context
+  }, /*#__PURE__*/React.createElement(ContextIsolator, {
+    space: true
+  }, canRef ? /*#__PURE__*/React.cloneElement(children, {
+    ref: mergedRef
+  }) : children));
+});
+/** @internal Only used for Dropdown component. Do not use this in your production. */
+export default OverrideContext;

package/es/menu/SubMenu.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { SubMenuType } from './interface';
+export interface SubMenuProps extends Omit<SubMenuType, 'ref' | 'key' | 'children' | 'label'> {
+    title?: React.ReactNode;
+    children?: React.ReactNode;
+    /**
+     * @deprecated No longer needed, it can now be safely deleted.
+     * @see: https://github.com/ant-design/ant-design/pull/30638
+     */
+    level?: number;
+}
+declare const SubMenu: React.FC<SubMenuProps>;
+export default SubMenu;

package/es/menu/SubMenu.js

@@ -0,0 +1,57 @@
+"use client";
+
+import * as React from 'react';
+import classNames from 'classnames';
+import { SubMenu as RcSubMenu, useFullPath } from 'rc-menu';
+import omit from "rc-util/es/omit";
+import { useZIndex } from '../_util/hooks/useZIndex';
+import { cloneElement } from '../_util/reactNode';
+import MenuContext from './MenuContext';
+const SubMenu = props => {
+  var _a;
+  const {
+    popupClassName,
+    icon,
+    title,
+    theme: customTheme
+  } = props;
+  const context = React.useContext(MenuContext);
+  const {
+    prefixCls,
+    inlineCollapsed,
+    theme: contextTheme
+  } = context;
+  const parentPath = useFullPath();
+  let titleNode;
+  if (!icon) {
+    titleNode = inlineCollapsed && !parentPath.length && title && typeof title === 'string' ? (/*#__PURE__*/React.createElement("div", {
+      className: `${prefixCls}-inline-collapsed-noicon`
+    }, title.charAt(0))) : (/*#__PURE__*/React.createElement("span", {
+      className: `${prefixCls}-title-content`
+    }, title));
+  } else {
+    // inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性，则内部包裹一个 span
+    // ref: https://github.com/ant-design/ant-design/pull/23456
+    const titleIsSpan = /*#__PURE__*/React.isValidElement(title) && title.type === 'span';
+    titleNode = /*#__PURE__*/React.createElement(React.Fragment, null, cloneElement(icon, {
+      className: classNames(/*#__PURE__*/React.isValidElement(icon) ? (_a = icon.props) === null || _a === void 0 ? void 0 : _a.className : '', `${prefixCls}-item-icon`)
+    }), titleIsSpan ? title : /*#__PURE__*/React.createElement("span", {
+      className: `${prefixCls}-title-content`
+    }, title));
+  }
+  const contextValue = React.useMemo(() => Object.assign(Object.assign({}, context), {
+    firstLevel: false
+  }), [context]);
+  // ============================ zIndex ============================
+  const [zIndex] = useZIndex('Menu');
+  return /*#__PURE__*/React.createElement(MenuContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(RcSubMenu, Object.assign({}, omit(props, ['icon']), {
+    title: titleNode,
+    popupClassName: classNames(prefixCls, popupClassName, `${prefixCls}-${customTheme || contextTheme}`),
+    popupStyle: Object.assign({
+      zIndex
+    }, props.popupStyle)
+  })));
+};
+export default SubMenu;

package/es/menu/index.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import type { MenuRef as RcMenuRef } from 'rc-menu';
+import { ItemGroup } from 'rc-menu';
+import type { ItemType, MenuItemType } from './interface';
+import type { MenuProps } from './menu';
+import type { MenuTheme } from './MenuContext';
+import MenuDivider from './MenuDivider';
+import Item from './MenuItem';
+import type { MenuItemProps } from './MenuItem';
+import SubMenu from './SubMenu';
+import type { SubMenuProps } from './SubMenu';
+export type { MenuItemGroupProps } from 'rc-menu';
+export type { MenuDividerProps } from './MenuDivider';
+export type { MenuItemProps, MenuProps, MenuTheme, SubMenuProps };
+export type MenuRef = {
+    menu: RcMenuRef | null;
+    focus: (options?: FocusOptions) => void;
+};
+type ComponentProps = MenuProps & React.RefAttributes<MenuRef>;
+type GenericItemType<T = unknown> = T extends infer U extends MenuItemType ? unknown extends U ? ItemType : ItemType<U> : ItemType;
+type GenericComponentProps<T = unknown> = Omit<ComponentProps, 'items'> & {
+    items?: GenericItemType<T>[];
+};
+type CompoundedComponent = React.ForwardRefExoticComponent<GenericComponentProps> & {
+    Item: typeof Item;
+    SubMenu: typeof SubMenu;
+    Divider: typeof MenuDivider;
+    ItemGroup: typeof ItemGroup;
+};
+interface GenericComponent extends Omit<CompoundedComponent, ''> {
+    <T extends MenuItemType>(props: GenericComponentProps<T>): ReturnType<CompoundedComponent>;
+}
+declare const Menu: GenericComponent;
+export default Menu;

package/es/menu/index.js

@@ -0,0 +1,32 @@
+"use client";
+
+import * as React from 'react';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { ItemGroup } from 'rc-menu';
+import { SiderContext } from '../layout/Sider';
+import InternalMenu from './menu';
+import MenuDivider from './MenuDivider';
+import Item from './MenuItem';
+import SubMenu from './SubMenu';
+const Menu = /*#__PURE__*/forwardRef((props, ref) => {
+  const menuRef = useRef(null);
+  const context = React.useContext(SiderContext);
+  useImperativeHandle(ref, () => ({
+    menu: menuRef.current,
+    focus: options => {
+      var _a;
+      (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.focus(options);
+    }
+  }));
+  return /*#__PURE__*/React.createElement(InternalMenu, Object.assign({
+    ref: menuRef
+  }, props, context));
+});
+Menu.Item = Item;
+Menu.SubMenu = SubMenu;
+Menu.Divider = MenuDivider;
+Menu.ItemGroup = ItemGroup;
+if (process.env.NODE_ENV !== 'production') {
+  Menu.displayName = 'Menu';
+}
+export default Menu;

package/es/menu/interface.d.ts

@@ -0,0 +1,20 @@
+import type { MenuDividerType as RcMenuDividerType, MenuItemGroupType as RcMenuItemGroupType, MenuItemType as RcMenuItemType, SubMenuType as RcSubMenuType } from 'rc-menu/lib/interface';
+export interface MenuItemType extends RcMenuItemType {
+    danger?: boolean;
+    icon?: React.ReactNode;
+    title?: string;
+}
+export interface SubMenuType<T extends MenuItemType = MenuItemType> extends Omit<RcSubMenuType, 'children'> {
+    icon?: React.ReactNode;
+    theme?: 'dark' | 'light';
+    children: ItemType<T>[];
+}
+export interface MenuItemGroupType<T extends MenuItemType = MenuItemType> extends Omit<RcMenuItemGroupType, 'children'> {
+    children?: ItemType<T>[];
+    key?: React.Key;
+}
+export interface MenuDividerType extends RcMenuDividerType {
+    dashed?: boolean;
+    key?: React.Key;
+}
+export type ItemType<T extends MenuItemType = MenuItemType> = T | SubMenuType<T> | MenuItemGroupType<T> | MenuDividerType | null;

package/es/menu/interface.js

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

package/es/menu/menu.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { MenuProps as RcMenuProps, MenuRef as RcMenuRef } from 'rc-menu';
+import type { SiderContextProps } from '../layout/Sider';
+import type { ItemType } from './interface';
+import type { MenuTheme } from './MenuContext';
+export interface MenuProps extends Omit<RcMenuProps, 'items' | '_internalComponents'> {
+    theme?: MenuTheme;
+    inlineIndent?: number;
+    /**
+     * @private Internal Usage. Not promise crash if used in production. Connect with chenshuai2144
+     *   for removing.
+     */
+    _internalDisableMenuItemTitleTooltip?: boolean;
+    items?: ItemType[];
+}
+declare const InternalMenu: React.ForwardRefExoticComponent<MenuProps & SiderContextProps & {
+    collapsedWidth?: string | number;
+} & React.RefAttributes<RcMenuRef>>;
+export default InternalMenu;

package/es/menu/menu.js

@@ -0,0 +1,159 @@
+"use client";
+
+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 * as React from 'react';
+import { forwardRef } from 'react';
+import EllipsisOutlined from "@ant-design/icons/es/icons/EllipsisOutlined";
+import classNames from 'classnames';
+import RcMenu from 'rc-menu';
+import useEvent from "rc-util/es/hooks/useEvent";
+import omit from "rc-util/es/omit";
+import initCollapseMotion from '../_util/motion';
+import { cloneElement } from '../_util/reactNode';
+import { devUseWarning } from '../_util/warning';
+import { ConfigContext } from '../config-provider';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
+import MenuContext from './MenuContext';
+import Divider from './MenuDivider';
+import MenuItem from './MenuItem';
+import OverrideContext from './OverrideContext';
+import useStyle from './style';
+import SubMenu from './SubMenu';
+function isEmptyIcon(icon) {
+  return icon === null || icon === false;
+}
+const MENU_COMPONENTS = {
+  item: MenuItem,
+  submenu: SubMenu,
+  divider: Divider
+};
+const InternalMenu = /*#__PURE__*/forwardRef((props, ref) => {
+  var _a;
+  const override = React.useContext(OverrideContext);
+  const overrideObj = override || {};
+  const {
+    getPrefixCls,
+    getPopupContainer,
+    direction,
+    menu
+  } = React.useContext(ConfigContext);
+  const rootPrefixCls = getPrefixCls();
+  const {
+      prefixCls: customizePrefixCls,
+      className,
+      style,
+      theme = 'light',
+      expandIcon,
+      _internalDisableMenuItemTitleTooltip,
+      inlineCollapsed,
+      siderCollapsed,
+      rootClassName,
+      mode,
+      selectable,
+      onClick,
+      overflowedIndicatorPopupClassName
+    } = props,
+    restProps = __rest(props, ["prefixCls", "className", "style", "theme", "expandIcon", "_internalDisableMenuItemTitleTooltip", "inlineCollapsed", "siderCollapsed", "rootClassName", "mode", "selectable", "onClick", "overflowedIndicatorPopupClassName"]);
+  const passedProps = omit(restProps, ['collapsedWidth']);
+  // ======================== Warning ==========================
+  if (process.env.NODE_ENV !== 'production') {
+    const warning = devUseWarning('Menu');
+    process.env.NODE_ENV !== "production" ? warning(!('inlineCollapsed' in props && mode !== 'inline'), 'usage', '`inlineCollapsed` should only be used when `mode` is inline.') : void 0;
+    process.env.NODE_ENV !== "production" ? warning(!(props.siderCollapsed !== undefined && 'inlineCollapsed' in props), 'usage', '`inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.') : void 0;
+    warning.deprecated('items' in props && !props.children, 'children', 'items');
+  }
+  (_a = overrideObj.validator) === null || _a === void 0 ? void 0 : _a.call(overrideObj, {
+    mode
+  });
+  // ========================== Click ==========================
+  // Tell dropdown that item clicked
+  const onItemClick = useEvent((...args) => {
+    var _a;
+    onClick === null || onClick === void 0 ? void 0 : onClick.apply(void 0, args);
+    (_a = overrideObj.onClick) === null || _a === void 0 ? void 0 : _a.call(overrideObj);
+  });
+  // ========================== Mode ===========================
+  const mergedMode = overrideObj.mode || mode;
+  // ======================= Selectable ========================
+  const mergedSelectable = selectable !== null && selectable !== void 0 ? selectable : overrideObj.selectable;
+  // ======================== Collapsed ========================
+  // Inline Collapsed
+  const mergedInlineCollapsed = React.useMemo(() => {
+    if (siderCollapsed !== undefined) {
+      return siderCollapsed;
+    }
+    return inlineCollapsed;
+  }, [inlineCollapsed, siderCollapsed]);
+  const defaultMotions = {
+    horizontal: {
+      motionName: `${rootPrefixCls}-slide-up`
+    },
+    inline: initCollapseMotion(rootPrefixCls),
+    other: {
+      motionName: `${rootPrefixCls}-zoom-big`
+    }
+  };
+  const prefixCls = getPrefixCls('menu', customizePrefixCls || overrideObj.prefixCls);
+  const rootCls = useCSSVarCls(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls, !override);
+  const menuClassName = classNames(`${prefixCls}-${theme}`, menu === null || menu === void 0 ? void 0 : menu.className, className);
+  // ====================== ExpandIcon ========================
+  const mergedExpandIcon = React.useMemo(() => {
+    var _a, _b;
+    if (typeof expandIcon === 'function' || isEmptyIcon(expandIcon)) {
+      return expandIcon || null;
+    }
+    if (typeof overrideObj.expandIcon === 'function' || isEmptyIcon(overrideObj.expandIcon)) {
+      return overrideObj.expandIcon || null;
+    }
+    if (typeof (menu === null || menu === void 0 ? void 0 : menu.expandIcon) === 'function' || isEmptyIcon(menu === null || menu === void 0 ? void 0 : menu.expandIcon)) {
+      return (menu === null || menu === void 0 ? void 0 : menu.expandIcon) || null;
+    }
+    const mergedIcon = (_a = expandIcon !== null && expandIcon !== void 0 ? expandIcon : overrideObj === null || overrideObj === void 0 ? void 0 : overrideObj.expandIcon) !== null && _a !== void 0 ? _a : menu === null || menu === void 0 ? void 0 : menu.expandIcon;
+    return cloneElement(mergedIcon, {
+      className: classNames(`${prefixCls}-submenu-expand-icon`, /*#__PURE__*/React.isValidElement(mergedIcon) ? (_b = mergedIcon.props) === null || _b === void 0 ? void 0 : _b.className : undefined)
+    });
+  }, [expandIcon, overrideObj === null || overrideObj === void 0 ? void 0 : overrideObj.expandIcon, menu === null || menu === void 0 ? void 0 : menu.expandIcon, prefixCls]);
+  // ======================== Context ==========================
+  const contextValue = React.useMemo(() => ({
+    prefixCls,
+    inlineCollapsed: mergedInlineCollapsed || false,
+    direction,
+    firstLevel: true,
+    theme,
+    mode: mergedMode,
+    disableMenuItemTitleTooltip: _internalDisableMenuItemTitleTooltip
+  }), [prefixCls, mergedInlineCollapsed, direction, _internalDisableMenuItemTitleTooltip, theme]);
+  // ========================= Render ==========================
+  return wrapCSSVar(/*#__PURE__*/React.createElement(OverrideContext.Provider, {
+    value: null
+  }, /*#__PURE__*/React.createElement(MenuContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(RcMenu, Object.assign({
+    getPopupContainer: getPopupContainer,
+    overflowedIndicator: /*#__PURE__*/React.createElement(EllipsisOutlined, null),
+    overflowedIndicatorPopupClassName: classNames(prefixCls, `${prefixCls}-${theme}`, overflowedIndicatorPopupClassName),
+    mode: mergedMode,
+    selectable: mergedSelectable,
+    onClick: onItemClick
+  }, passedProps, {
+    inlineCollapsed: mergedInlineCollapsed,
+    style: Object.assign(Object.assign({}, menu === null || menu === void 0 ? void 0 : menu.style), style),
+    className: menuClassName,
+    prefixCls: prefixCls,
+    direction: direction,
+    defaultMotions: defaultMotions,
+    expandIcon: mergedExpandIcon,
+    ref: ref,
+    rootClassName: classNames(rootClassName, hashId, overrideObj.rootClassName, cssVarCls, rootCls),
+    _internalComponents: MENU_COMPONENTS
+  })))));
+});
+export default InternalMenu;

package/es/menu/style/horizontal.d.ts

@@ -0,0 +1,4 @@
+import type { MenuToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+declare const getHorizontalStyle: GenerateStyle<MenuToken>;
+export default getHorizontalStyle;

package/es/menu/style/horizontal.js

@@ -0,0 +1,46 @@
+import { unit } from '@ant-design/cssinjs';
+const getHorizontalStyle = token => {
+  const {
+    componentCls,
+    motionDurationSlow,
+    horizontalLineHeight,
+    colorSplit,
+    lineWidth,
+    lineType,
+    itemPaddingInline
+  } = token;
+  return {
+    [`${componentCls}-horizontal`]: {
+      lineHeight: horizontalLineHeight,
+      border: 0,
+      borderBottom: `${unit(lineWidth)} ${lineType} ${colorSplit}`,
+      boxShadow: 'none',
+      '&::after': {
+        display: 'block',
+        clear: 'both',
+        height: 0,
+        content: '"\\20"'
+      },
+      // ======================= Item =======================
+      [`${componentCls}-item, ${componentCls}-submenu`]: {
+        position: 'relative',
+        display: 'inline-block',
+        verticalAlign: 'bottom',
+        paddingInline: itemPaddingInline
+      },
+      [`> ${componentCls}-item:hover,
+        > ${componentCls}-item-active,
+        > ${componentCls}-submenu ${componentCls}-submenu-title:hover`]: {
+        backgroundColor: 'transparent'
+      },
+      [`${componentCls}-item, ${componentCls}-submenu-title`]: {
+        transition: [`border-color ${motionDurationSlow}`, `background ${motionDurationSlow}`].join(',')
+      },
+      // ===================== Sub Menu =====================
+      [`${componentCls}-submenu-arrow`]: {
+        display: 'none'
+      }
+    }
+  };
+};
+export default getHorizontalStyle;