@akinon/ui-menu 0.5.0 → 1.0.1

package/dist/cjs/index.d.ts

@@ -1,5 +1,5 @@
-import type { MenuProps as AntMenuProps } from 'antd';
 import * as React from 'react';
-export type MenuProps = Omit<AntMenuProps, 'className' | 'classNames' | 'rootClassName' | 'styles' | 'prefixCls'>;
-export declare const Menu: ({ defaultOpenKeys, theme, ...restMenuProps }: MenuProps) => React.JSX.Element;
+import type { IMenuProps } from './types';
+export declare const Menu: ({ defaultOpenKeys, ...restMenuProps }: IMenuProps) => React.JSX.Element;
+export type * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,IAAI,YAAY,EAAE,MAAM,MAAM,CAAC;AAEtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,SAAS,GAAG,IAAI,CAC1B,YAAY,EACZ,WAAW,GAAG,YAAY,GAAG,eAAe,GAAG,QAAQ,GAAG,WAAW,CACtE,CAAC;AAEF,eAAO,MAAM,IAAI,iDAId,SAAS,sBAQX,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,UAAU,EAAiB,MAAM,SAAS,CAAC;AAqBzD,eAAO,MAAM,IAAI,0CAA2C,UAAU,sBA0MrE,CAAC;AAEF,mBAAmB,SAAS,CAAC"}

package/dist/cjs/index.js

@@ -12,10 +12,187 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Menu = void 0;
+const icons_1 = require("@akinon/icons");
+const ui_theme_1 = require("@akinon/ui-theme");
+const cssinjs_1 = require("@ant-design/cssinjs");
 const antd_1 = require("antd");
 const React = require("react");
+/**
+ * Menu component for navigation and hierarchical data presentation.
+ *
+ * The Menu component is designed to provide users with a structured navigation system or a display of hierarchical data.
+ * It supports different modes, themes, and configurations, enabling flexibility for various use cases.
+ *
+ * Features:
+ * - Horizontal, vertical, and inline modes for different layouts.
+ * - Light and dark themes for visual adaptability.
+ * - Submenu nesting with configurable triggers (click or hover).
+ * - Multi-select support and custom icons for menu items.
+ * - Grouping and dividers for better organization.
+ * - Fully customizable behavior with callbacks for item selection, submenu expansion, and more.
+ *
+ * The Menu component ensures a user-friendly and visually coherent way to navigate complex datasets or application structures.
+ */
+const MAX_DEPTH = 3;
 const Menu = (_a) => {
-    var { defaultOpenKeys, theme } = _a, restMenuProps = __rest(_a, ["defaultOpenKeys", "theme"]);
-    return (React.createElement(antd_1.Menu, Object.assign({ defaultOpenKeys: defaultOpenKeys, theme: theme || 'dark' }, restMenuProps)));
+    var { defaultOpenKeys } = _a, restMenuProps = __rest(_a, ["defaultOpenKeys"]);
+    const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
+    const { token, hashId } = (0, ui_theme_1.useToken)();
+    const menuToken = token.Menu;
+    const prefixWithoutHash = `${getPrefixCls()}-menu`;
+    const prefixClsWithoutHash = `.${prefixWithoutHash}`;
+    const customTokens = theme.CustomTokens || {};
+    const useStyle = (0, cssinjs_1.useStyleRegister)({
+        token: token,
+        path: ['Menu'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId})${prefixClsWithoutHash}`;
+        return {
+            [prefixCls]: {
+                minWidth: menuToken.minWidth,
+                [`&${prefixClsWithoutHash}-inline-collapsed`]: {
+                    minWidth: customTokens.others.valueUnset
+                },
+                [`&${prefixClsWithoutHash}-dark`]: {
+                    [`${prefixClsWithoutHash}-title, ${prefixClsWithoutHash}-submenu-title`]: {
+                        paddingInlineEnd: '1rem',
+                        color: menuToken.mainMenuColor,
+                        fontWeight: customTokens.typography.fontWeightBold
+                    },
+                    [`${prefixClsWithoutHash}-item`]: {
+                        color: menuToken.mainMenuColor,
+                        fontWeight: customTokens.typography.fontWeightBold
+                    },
+                    [`${prefixClsWithoutHash}-sub`]: {
+                        fontWeight: customTokens.typography.fontWeightMedium,
+                        [`${prefixClsWithoutHash}-item`]: {
+                            color: menuToken.subMenuTitleColor,
+                            fontWeight: customTokens.typography.fontWeightMedium
+                        },
+                        [`${prefixClsWithoutHash}-submenu`]: {
+                            [`${prefixClsWithoutHash}-submenu-title`]: {
+                                color: menuToken.subMenuTitleColor,
+                                ['svg']: {
+                                    position: customTokens.layout.positionAbsolute,
+                                    marginLeft: menuToken.subMenuTitleIconMargin,
+                                    insetInlineEnd: customTokens.others.valueUnset
+                                }
+                            },
+                            [`${prefixClsWithoutHash}-sub`]: {
+                                [`${prefixClsWithoutHash}-item-selected`]: {
+                                    [`&${prefixClsWithoutHash}-item-only-child`]: {
+                                        ['&::after']: {
+                                            background: menuToken.subMenuItemSelectedChildColor
+                                        }
+                                    }
+                                },
+                                [`${prefixClsWithoutHash}-item-only-child`]: {
+                                    ['&::after']: {
+                                        width: menuToken.childMenuItemSelectedChildWidth,
+                                        height: menuToken.childMenuItemSelectedChildHeight,
+                                        borderRadius: menuToken.childMenuItemSelectedChildRadius,
+                                        marginLeft: menuToken.childMenuItemSelectedChildMargin,
+                                        opacity: customTokens.others.opacityFull,
+                                        insetBlock: customTokens.others.valueUnset,
+                                        insetInlineEnd: customTokens.others.valueUnset,
+                                        transform: customTokens.layout.displayNone,
+                                        background: menuToken.childMenuItemSelectedChildBgColor
+                                    }
+                                }
+                            }
+                        },
+                        [`${prefixClsWithoutHash}-item-only-child`]: {
+                            ['&::after']: {
+                                width: menuToken.subMenuOnlyChildSize,
+                                height: menuToken.subMenuOnlyChildSize,
+                                borderRadius: customTokens.sizing.valueHalf,
+                                background: menuToken.subMenuOnlyChildBgColor,
+                                marginLeft: menuToken.subMenuOnlyChildMargin,
+                                opacity: customTokens.others.opacityFull,
+                                insetBlock: customTokens.others.valueUnset,
+                                insetInlineEnd: customTokens.others.valueUnset,
+                                transform: customTokens.layout.displayNone
+                            }
+                        }
+                    }
+                },
+                [`&${prefixClsWithoutHash}-light`]: {
+                    background: menuToken.lightItemBg,
+                    [`${prefixClsWithoutHash}-submenu`]: {
+                        [`svg:first-child`]: {
+                            color: menuToken.lightItemMainIconColor,
+                            fill: menuToken.lightItemMainIconColor
+                        },
+                        ['&-title']: {
+                            color: menuToken.lightItemMainTitle
+                        },
+                        [`${prefixClsWithoutHash}-sub`]: {
+                            background: menuToken.LightSubItemBg,
+                            [`${prefixClsWithoutHash}-submenu`]: {
+                                [`${prefixClsWithoutHash}-submenu-title`]: {
+                                    color: menuToken.lightSubTitleColor,
+                                    ['i']: {
+                                        background: menuToken.lightSubIconColor
+                                    }
+                                },
+                                [`${prefixClsWithoutHash}-sub`]: {
+                                    [`${prefixClsWithoutHash}-item-selected`]: {
+                                        [`&${prefixClsWithoutHash}-item-only-child`]: {
+                                            background: menuToken.lightchildItemBg,
+                                            color: menuToken.lightChildItemColor,
+                                            ['&::after']: {
+                                                background: menuToken.lightChildItemColor
+                                            }
+                                        }
+                                    },
+                                    [`${prefixClsWithoutHash}-item-only-child`]: {
+                                        color: menuToken.lightSubTitleColor,
+                                        ['&::after']: {
+                                            background: menuToken.lightSubTitleColor
+                                        }
+                                    }
+                                }
+                            },
+                            [`${prefixClsWithoutHash}-item-only-child`]: {
+                                color: menuToken.lightSubTitleColor,
+                                fontWeight: customTokens.typography.fontWeightMedium,
+                                ['&::after']: {
+                                    background: menuToken.lightSubTitleColor
+                                }
+                            }
+                        }
+                    }
+                }
+            },
+            [prefixClsWithoutHash]: {}
+        };
+    });
+    const processMenuItems = (items, depth = 0) => {
+        if (!items || depth >= MAX_DEPTH)
+            return items;
+        return items.map(item => {
+            const processedItem = Object.assign({}, item);
+            // Process icon if present
+            if ('icon' in processedItem && processedItem.icon) {
+                processedItem.icon = (React.createElement(icons_1.Icon, { icon: processedItem.icon, size: depth === 0 ? 18 : 10 }));
+            }
+            // Process submenu items recursively
+            if ('children' in processedItem &&
+                Array.isArray(processedItem.children)) {
+                processedItem.children = processMenuItems(processedItem.children, depth + 1);
+            }
+            return processedItem;
+        });
+    };
+    const processedItems = processMenuItems(restMenuProps.items);
+    const expandIcon = (props) => {
+        return (React.createElement(icons_1.Icon, { icon: "chevron_down", size: 14, style: {
+                transform: props.isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                transition: 'transform 0.3s ease-in-out'
+            } }));
+    };
+    return useStyle(React.createElement(antd_1.Menu, Object.assign({ defaultOpenKeys: defaultOpenKeys }, restMenuProps, { items: processedItems, expandIcon: expandIcon })));
 };
 exports.Menu = Menu;

package/dist/cjs/types.d.ts

@@ -0,0 +1,296 @@
+import { IconName } from '@akinon/icons';
+import { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
+import { ReactNode } from 'react';
+
+export type TMenuExpandIcon =
+  | ReactNode
+  | ((props: SubMenuProps & { isSubMenu: boolean }) => ReactNode);
+
+export type TMenuMode = 'horizontal' | 'vertical' | 'inline';
+
+export type TMenuTheme = 'light' | 'dark';
+
+export type TMenuTriggerSubMenuAction = 'click' | 'hover';
+
+export type TMenuOnClick = ({
+  item,
+  key,
+  keyPath,
+  domEvent
+}: {
+  item: ReactNode;
+  key: string;
+  keyPath: string[];
+  domEvent: React.MouseEvent;
+}) => void;
+
+export type TMenuOnDeSelect = ({
+  item,
+  key,
+  keyPath,
+  selectedKeys,
+  domEvent
+}: {
+  item: ReactNode;
+  key: string;
+  keyPath: string[];
+  selectedKeys: string[];
+  domEvent: React.MouseEvent;
+}) => void;
+
+export type TMenuOnOpenChange = (openKeys: string[]) => void;
+
+export type TMenuOnSelect = ({
+  item,
+  key,
+  keyPath,
+  selectedKeys,
+  domEvent
+}: {
+  item: ReactNode;
+  key: string;
+  keyPath: string[];
+  selectedKeys: string[];
+  domEvent: React.MouseEvent;
+}) => void;
+
+export type TMenuItemType =
+  | IMenuItemType
+  | ISubMenuType
+  | IMenuItemGroupType
+  | IMenuDividerType;
+
+export interface IMenuProps {
+  /**
+   * Array with the keys of default opened sub menus
+   */
+  defaultOpenKeys?: string[];
+
+  /**
+   * Array with the keys of default selected menu items
+   */
+  defaultSelectedKeys?: string[];
+
+  /**
+   * Custom expand icon of submenu
+   */
+  expandIcon?: TMenuExpandIcon;
+
+  /**
+   * Render submenu into DOM before it becomes visible
+   */
+  forceSubMenuRender?: boolean;
+
+  /**
+   * Specifies the collapsed status when menu is in inline mode
+   */
+  inlineCollapsed?: boolean;
+
+  /**
+   * Indent (in pixels) of inline menu items on each level
+   */
+  inlineIndent?: number;
+
+  /**
+   * Menu item content
+   */
+  items?: TMenuItemType[];
+
+  /**
+   * Type of menu
+   */
+  mode?: TMenuMode;
+
+  /**
+   * Allows selection of multiple items
+   */
+  multiple?: boolean;
+
+  /**
+   * Array with the keys of currently opened sub-menus
+   */
+  openKeys?: string[];
+
+  /**
+   * Customized the ellipsis icon when menu is collapsed horizontally
+   */
+  overflowedIndicator?: ReactNode;
+
+  /**
+   * Allows selecting menu items
+   */
+  selectable?: boolean;
+
+  /**
+   * Array with the keys of currently selected menu items
+   */
+  selectedKeys?: string[];
+
+  /**
+   * Delay time to hide submenu when mouse leaves (in seconds)
+   */
+  subMenuCloseDelay?: number;
+
+  /**
+   * Delay time to show submenu when mouse enters, (in seconds)
+   */
+  subMenuOpenDelay?: number;
+
+  /**
+   * Color theme of the menu
+   */
+  theme?: TMenuTheme;
+
+  /**
+   * Which action can trigger submenu open/close
+   */
+  triggerSubMenuAction?: TMenuTriggerSubMenuAction;
+
+  /**
+   * Called when a menu item is clicked
+   */
+  onClick?: TMenuOnClick;
+
+  /**
+   * Called when a menu item is deselected (multiple mode only)
+   */
+  onDeselect?: TMenuOnDeSelect;
+
+  /**
+   * Called when sub-menus are opened or closed
+   */
+  onOpenChange?: TMenuOnOpenChange;
+
+  /**
+   * Called when a menu item is selected
+   */
+  onSelect?: TMenuOnSelect;
+
+  /**
+   * Never use this prop. Akinon design system does not allow custom styles.
+   * @ignore
+   */
+  style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+}
+
+export interface IMenuItemType {
+  /**
+   * Display the danger style
+   * @default false
+   */
+  danger?: boolean;
+
+  /**
+   * Whether menu item is disabled
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * The extra of the menu item
+   */
+  extra?: ReactNode;
+
+  /**
+   * The icon of the menu item
+   */
+  icon?: IconName;
+
+  /**
+   * Unique ID of the menu item
+   */
+  key?: string;
+
+  /**
+   * Menu label
+   */
+  label?: ReactNode;
+
+  /**
+   * Set display title for collapsed item
+   */
+  title?: string;
+
+  /**
+   * Sub-menus or sub-menu items
+   */
+  children?: TMenuItemType[];
+}
+
+export interface ISubMenuType {
+  /**
+   * Sub-menus or sub-menu items
+   */
+  children?: TMenuItemType[];
+
+  /**
+   * Whether sub-menu is disabled
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Icon of sub menu
+   */
+  icon?: IconName;
+
+  /**
+   * Unique ID of the sub-menu
+   */
+  key?: string;
+
+  /**
+   * Menu label
+   */
+  label?: ReactNode;
+
+  /**
+   * Sub-menu class name, not working when mode="inline"
+   */
+  popupClassName?: string;
+
+  /**
+   * Sub-menu offset, not working when mode="inline"
+   */
+  popupOffset?: [number, number];
+
+  /**
+   * Color theme of the SubMenu (inherits from Menu by default)
+   */
+  theme?: TMenuTheme;
+
+  /**
+   * Callback executed when the sub-menu title is clicked
+   */
+  onTitleClick?: (params: { key: string; domEvent: React.MouseEvent }) => void;
+}
+
+export interface IMenuItemGroupType {
+  /**
+   * Must have | Define type as group to make as group
+   */
+  type: 'group';
+
+  /**
+   * Sub-menu items
+   */
+  children?: IMenuItemType[];
+
+  /**
+   * The title of the group
+   */
+  label?: ReactNode;
+}
+
+export interface IMenuDividerType {
+  /**
+   * Must have | Need define the type as divider
+   */
+  type: 'divider';
+
+  /**
+   * Whether line is dashed
+   * @default false
+   */
+  dashed?: boolean;
+}

package/dist/esm/index.d.ts

@@ -1,5 +1,5 @@
-import type { MenuProps as AntMenuProps } from 'antd';
 import * as React from 'react';
-export type MenuProps = Omit<AntMenuProps, 'className' | 'classNames' | 'rootClassName' | 'styles' | 'prefixCls'>;
-export declare const Menu: ({ defaultOpenKeys, theme, ...restMenuProps }: MenuProps) => React.JSX.Element;
+import type { IMenuProps } from './types';
+export declare const Menu: ({ defaultOpenKeys, ...restMenuProps }: IMenuProps) => React.JSX.Element;
+export type * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,IAAI,YAAY,EAAE,MAAM,MAAM,CAAC;AAEtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,SAAS,GAAG,IAAI,CAC1B,YAAY,EACZ,WAAW,GAAG,YAAY,GAAG,eAAe,GAAG,QAAQ,GAAG,WAAW,CACtE,CAAC;AAEF,eAAO,MAAM,IAAI,iDAId,SAAS,sBAQX,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,UAAU,EAAiB,MAAM,SAAS,CAAC;AAqBzD,eAAO,MAAM,IAAI,0CAA2C,UAAU,sBA0MrE,CAAC;AAEF,mBAAmB,SAAS,CAAC"}

package/dist/esm/index.js

@@ -9,9 +9,186 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Menu as AntMenu } from 'antd';
+import { Icon } from '@akinon/icons';
+import { useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { ConfigProvider, Menu as AntMenu } from 'antd';
 import * as React from 'react';
+/**
+ * Menu component for navigation and hierarchical data presentation.
+ *
+ * The Menu component is designed to provide users with a structured navigation system or a display of hierarchical data.
+ * It supports different modes, themes, and configurations, enabling flexibility for various use cases.
+ *
+ * Features:
+ * - Horizontal, vertical, and inline modes for different layouts.
+ * - Light and dark themes for visual adaptability.
+ * - Submenu nesting with configurable triggers (click or hover).
+ * - Multi-select support and custom icons for menu items.
+ * - Grouping and dividers for better organization.
+ * - Fully customizable behavior with callbacks for item selection, submenu expansion, and more.
+ *
+ * The Menu component ensures a user-friendly and visually coherent way to navigate complex datasets or application structures.
+ */
+const MAX_DEPTH = 3;
 export const Menu = (_a) => {
-    var { defaultOpenKeys, theme } = _a, restMenuProps = __rest(_a, ["defaultOpenKeys", "theme"]);
-    return (React.createElement(AntMenu, Object.assign({ defaultOpenKeys: defaultOpenKeys, theme: theme || 'dark' }, restMenuProps)));
+    var { defaultOpenKeys } = _a, restMenuProps = __rest(_a, ["defaultOpenKeys"]);
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    const menuToken = token.Menu;
+    const prefixWithoutHash = `${getPrefixCls()}-menu`;
+    const prefixClsWithoutHash = `.${prefixWithoutHash}`;
+    const customTokens = theme.CustomTokens || {};
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['Menu'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId})${prefixClsWithoutHash}`;
+        return {
+            [prefixCls]: {
+                minWidth: menuToken.minWidth,
+                [`&${prefixClsWithoutHash}-inline-collapsed`]: {
+                    minWidth: customTokens.others.valueUnset
+                },
+                [`&${prefixClsWithoutHash}-dark`]: {
+                    [`${prefixClsWithoutHash}-title, ${prefixClsWithoutHash}-submenu-title`]: {
+                        paddingInlineEnd: '1rem',
+                        color: menuToken.mainMenuColor,
+                        fontWeight: customTokens.typography.fontWeightBold
+                    },
+                    [`${prefixClsWithoutHash}-item`]: {
+                        color: menuToken.mainMenuColor,
+                        fontWeight: customTokens.typography.fontWeightBold
+                    },
+                    [`${prefixClsWithoutHash}-sub`]: {
+                        fontWeight: customTokens.typography.fontWeightMedium,
+                        [`${prefixClsWithoutHash}-item`]: {
+                            color: menuToken.subMenuTitleColor,
+                            fontWeight: customTokens.typography.fontWeightMedium
+                        },
+                        [`${prefixClsWithoutHash}-submenu`]: {
+                            [`${prefixClsWithoutHash}-submenu-title`]: {
+                                color: menuToken.subMenuTitleColor,
+                                ['svg']: {
+                                    position: customTokens.layout.positionAbsolute,
+                                    marginLeft: menuToken.subMenuTitleIconMargin,
+                                    insetInlineEnd: customTokens.others.valueUnset
+                                }
+                            },
+                            [`${prefixClsWithoutHash}-sub`]: {
+                                [`${prefixClsWithoutHash}-item-selected`]: {
+                                    [`&${prefixClsWithoutHash}-item-only-child`]: {
+                                        ['&::after']: {
+                                            background: menuToken.subMenuItemSelectedChildColor
+                                        }
+                                    }
+                                },
+                                [`${prefixClsWithoutHash}-item-only-child`]: {
+                                    ['&::after']: {
+                                        width: menuToken.childMenuItemSelectedChildWidth,
+                                        height: menuToken.childMenuItemSelectedChildHeight,
+                                        borderRadius: menuToken.childMenuItemSelectedChildRadius,
+                                        marginLeft: menuToken.childMenuItemSelectedChildMargin,
+                                        opacity: customTokens.others.opacityFull,
+                                        insetBlock: customTokens.others.valueUnset,
+                                        insetInlineEnd: customTokens.others.valueUnset,
+                                        transform: customTokens.layout.displayNone,
+                                        background: menuToken.childMenuItemSelectedChildBgColor
+                                    }
+                                }
+                            }
+                        },
+                        [`${prefixClsWithoutHash}-item-only-child`]: {
+                            ['&::after']: {
+                                width: menuToken.subMenuOnlyChildSize,
+                                height: menuToken.subMenuOnlyChildSize,
+                                borderRadius: customTokens.sizing.valueHalf,
+                                background: menuToken.subMenuOnlyChildBgColor,
+                                marginLeft: menuToken.subMenuOnlyChildMargin,
+                                opacity: customTokens.others.opacityFull,
+                                insetBlock: customTokens.others.valueUnset,
+                                insetInlineEnd: customTokens.others.valueUnset,
+                                transform: customTokens.layout.displayNone
+                            }
+                        }
+                    }
+                },
+                [`&${prefixClsWithoutHash}-light`]: {
+                    background: menuToken.lightItemBg,
+                    [`${prefixClsWithoutHash}-submenu`]: {
+                        [`svg:first-child`]: {
+                            color: menuToken.lightItemMainIconColor,
+                            fill: menuToken.lightItemMainIconColor
+                        },
+                        ['&-title']: {
+                            color: menuToken.lightItemMainTitle
+                        },
+                        [`${prefixClsWithoutHash}-sub`]: {
+                            background: menuToken.LightSubItemBg,
+                            [`${prefixClsWithoutHash}-submenu`]: {
+                                [`${prefixClsWithoutHash}-submenu-title`]: {
+                                    color: menuToken.lightSubTitleColor,
+                                    ['i']: {
+                                        background: menuToken.lightSubIconColor
+                                    }
+                                },
+                                [`${prefixClsWithoutHash}-sub`]: {
+                                    [`${prefixClsWithoutHash}-item-selected`]: {
+                                        [`&${prefixClsWithoutHash}-item-only-child`]: {
+                                            background: menuToken.lightchildItemBg,
+                                            color: menuToken.lightChildItemColor,
+                                            ['&::after']: {
+                                                background: menuToken.lightChildItemColor
+                                            }
+                                        }
+                                    },
+                                    [`${prefixClsWithoutHash}-item-only-child`]: {
+                                        color: menuToken.lightSubTitleColor,
+                                        ['&::after']: {
+                                            background: menuToken.lightSubTitleColor
+                                        }
+                                    }
+                                }
+                            },
+                            [`${prefixClsWithoutHash}-item-only-child`]: {
+                                color: menuToken.lightSubTitleColor,
+                                fontWeight: customTokens.typography.fontWeightMedium,
+                                ['&::after']: {
+                                    background: menuToken.lightSubTitleColor
+                                }
+                            }
+                        }
+                    }
+                }
+            },
+            [prefixClsWithoutHash]: {}
+        };
+    });
+    const processMenuItems = (items, depth = 0) => {
+        if (!items || depth >= MAX_DEPTH)
+            return items;
+        return items.map(item => {
+            const processedItem = Object.assign({}, item);
+            // Process icon if present
+            if ('icon' in processedItem && processedItem.icon) {
+                processedItem.icon = (React.createElement(Icon, { icon: processedItem.icon, size: depth === 0 ? 18 : 10 }));
+            }
+            // Process submenu items recursively
+            if ('children' in processedItem &&
+                Array.isArray(processedItem.children)) {
+                processedItem.children = processMenuItems(processedItem.children, depth + 1);
+            }
+            return processedItem;
+        });
+    };
+    const processedItems = processMenuItems(restMenuProps.items);
+    const expandIcon = (props) => {
+        return (React.createElement(Icon, { icon: "chevron_down", size: 14, style: {
+                transform: props.isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                transition: 'transform 0.3s ease-in-out'
+            } }));
+    };
+    return useStyle(React.createElement(AntMenu, Object.assign({ defaultOpenKeys: defaultOpenKeys }, restMenuProps, { items: processedItems, expandIcon: expandIcon })));
 };

package/dist/esm/types.d.ts

@@ -0,0 +1,296 @@
+import { IconName } from '@akinon/icons';
+import { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
+import { ReactNode } from 'react';
+
+export type TMenuExpandIcon =
+  | ReactNode
+  | ((props: SubMenuProps & { isSubMenu: boolean }) => ReactNode);
+
+export type TMenuMode = 'horizontal' | 'vertical' | 'inline';
+
+export type TMenuTheme = 'light' | 'dark';
+
+export type TMenuTriggerSubMenuAction = 'click' | 'hover';
+
+export type TMenuOnClick = ({
+  item,
+  key,
+  keyPath,
+  domEvent
+}: {
+  item: ReactNode;
+  key: string;
+  keyPath: string[];
+  domEvent: React.MouseEvent;
+}) => void;
+
+export type TMenuOnDeSelect = ({
+  item,
+  key,
+  keyPath,
+  selectedKeys,
+  domEvent
+}: {
+  item: ReactNode;
+  key: string;
+  keyPath: string[];
+  selectedKeys: string[];
+  domEvent: React.MouseEvent;
+}) => void;
+
+export type TMenuOnOpenChange = (openKeys: string[]) => void;
+
+export type TMenuOnSelect = ({
+  item,
+  key,
+  keyPath,
+  selectedKeys,
+  domEvent
+}: {
+  item: ReactNode;
+  key: string;
+  keyPath: string[];
+  selectedKeys: string[];
+  domEvent: React.MouseEvent;
+}) => void;
+
+export type TMenuItemType =
+  | IMenuItemType
+  | ISubMenuType
+  | IMenuItemGroupType
+  | IMenuDividerType;
+
+export interface IMenuProps {
+  /**
+   * Array with the keys of default opened sub menus
+   */
+  defaultOpenKeys?: string[];
+
+  /**
+   * Array with the keys of default selected menu items
+   */
+  defaultSelectedKeys?: string[];
+
+  /**
+   * Custom expand icon of submenu
+   */
+  expandIcon?: TMenuExpandIcon;
+
+  /**
+   * Render submenu into DOM before it becomes visible
+   */
+  forceSubMenuRender?: boolean;
+
+  /**
+   * Specifies the collapsed status when menu is in inline mode
+   */
+  inlineCollapsed?: boolean;
+
+  /**
+   * Indent (in pixels) of inline menu items on each level
+   */
+  inlineIndent?: number;
+
+  /**
+   * Menu item content
+   */
+  items?: TMenuItemType[];
+
+  /**
+   * Type of menu
+   */
+  mode?: TMenuMode;
+
+  /**
+   * Allows selection of multiple items
+   */
+  multiple?: boolean;
+
+  /**
+   * Array with the keys of currently opened sub-menus
+   */
+  openKeys?: string[];
+
+  /**
+   * Customized the ellipsis icon when menu is collapsed horizontally
+   */
+  overflowedIndicator?: ReactNode;
+
+  /**
+   * Allows selecting menu items
+   */
+  selectable?: boolean;
+
+  /**
+   * Array with the keys of currently selected menu items
+   */
+  selectedKeys?: string[];
+
+  /**
+   * Delay time to hide submenu when mouse leaves (in seconds)
+   */
+  subMenuCloseDelay?: number;
+
+  /**
+   * Delay time to show submenu when mouse enters, (in seconds)
+   */
+  subMenuOpenDelay?: number;
+
+  /**
+   * Color theme of the menu
+   */
+  theme?: TMenuTheme;
+
+  /**
+   * Which action can trigger submenu open/close
+   */
+  triggerSubMenuAction?: TMenuTriggerSubMenuAction;
+
+  /**
+   * Called when a menu item is clicked
+   */
+  onClick?: TMenuOnClick;
+
+  /**
+   * Called when a menu item is deselected (multiple mode only)
+   */
+  onDeselect?: TMenuOnDeSelect;
+
+  /**
+   * Called when sub-menus are opened or closed
+   */
+  onOpenChange?: TMenuOnOpenChange;
+
+  /**
+   * Called when a menu item is selected
+   */
+  onSelect?: TMenuOnSelect;
+
+  /**
+   * Never use this prop. Akinon design system does not allow custom styles.
+   * @ignore
+   */
+  style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+}
+
+export interface IMenuItemType {
+  /**
+   * Display the danger style
+   * @default false
+   */
+  danger?: boolean;
+
+  /**
+   * Whether menu item is disabled
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * The extra of the menu item
+   */
+  extra?: ReactNode;
+
+  /**
+   * The icon of the menu item
+   */
+  icon?: IconName;
+
+  /**
+   * Unique ID of the menu item
+   */
+  key?: string;
+
+  /**
+   * Menu label
+   */
+  label?: ReactNode;
+
+  /**
+   * Set display title for collapsed item
+   */
+  title?: string;
+
+  /**
+   * Sub-menus or sub-menu items
+   */
+  children?: TMenuItemType[];
+}
+
+export interface ISubMenuType {
+  /**
+   * Sub-menus or sub-menu items
+   */
+  children?: TMenuItemType[];
+
+  /**
+   * Whether sub-menu is disabled
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Icon of sub menu
+   */
+  icon?: IconName;
+
+  /**
+   * Unique ID of the sub-menu
+   */
+  key?: string;
+
+  /**
+   * Menu label
+   */
+  label?: ReactNode;
+
+  /**
+   * Sub-menu class name, not working when mode="inline"
+   */
+  popupClassName?: string;
+
+  /**
+   * Sub-menu offset, not working when mode="inline"
+   */
+  popupOffset?: [number, number];
+
+  /**
+   * Color theme of the SubMenu (inherits from Menu by default)
+   */
+  theme?: TMenuTheme;
+
+  /**
+   * Callback executed when the sub-menu title is clicked
+   */
+  onTitleClick?: (params: { key: string; domEvent: React.MouseEvent }) => void;
+}
+
+export interface IMenuItemGroupType {
+  /**
+   * Must have | Define type as group to make as group
+   */
+  type: 'group';
+
+  /**
+   * Sub-menu items
+   */
+  children?: IMenuItemType[];
+
+  /**
+   * The title of the group
+   */
+  label?: ReactNode;
+}
+
+export interface IMenuDividerType {
+  /**
+   * Must have | Need define the type as divider
+   */
+  type: 'divider';
+
+  /**
+   * Whether line is dashed
+   * @default false
+   */
+  dashed?: boolean;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-menu",
-  "version": "0.5.0",
+  "version": "1.0.1",
   "private": false,
   "type": "module",
   "main": "dist/esm/index.js",
@@ -9,14 +9,16 @@
     "dist"
   ],
   "dependencies": {
-    "antd": "5.17.0"
+    "antd": "5.22.6",
+    "@akinon/icons": "1.0.1",
+    "@akinon/ui-theme": "1.0.1"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
-    "typescript": "^5.2.2",
-    "@akinon/typescript-config": "0.4.0"
+    "typescript": "*",
+    "@akinon/typescript-config": "1.0.1"
   },
   "peerDependencies": {
     "react": ">=18",