@aurora-ds/components 0.14.0 → 0.15.1

package/dist/cjs/components/actions/button/Button.props.d.ts

@@ -9,7 +9,7 @@ export type ButtonProps = {
     /** Optional icon to display after label */
     endIcon?: ReactNode;
     /** Click handler */
-    onClick?: (e?: MouseEvent<HTMLButtonElement>) => void;
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
     /** Visual variant of the button */
     variant?: ButtonVariants;
     /** Button type attribute */

package/dist/cjs/components/actions/icon-button/IconButton.props.d.ts

@@ -5,7 +5,7 @@ export type IconButtonProps = {
     /** IconButton icon */
     icon?: ReactNode;
     /** Click handler */
-    onClick?: (e?: MouseEvent<HTMLButtonElement>) => void;
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
     /** Visual variant of the button */
     variant?: IconButtonVariants;
     /** Button type attribute */

package/dist/cjs/components/data-display/avatar/Avatar.props.d.ts

@@ -6,7 +6,7 @@ export type AvatarProps = {
     /** Fallback text to display when no image */
     label?: string;
     /** Click handler */
-    onClick?: (e?: MouseEvent<HTMLButtonElement>) => void;
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
     /** Size of the avatar */
     size?: AvatarSize;
     /** Text color for the label */

package/dist/cjs/components/overlay/menu/Menu.props.d.ts

@@ -5,4 +5,5 @@ export type MenuProps = {
     onClose: () => void;
     children: ReactNode;
     anchorOrigin?: AnchorOrigin;
+    width?: string;
 };

package/dist/cjs/components/overlay/menu/Menu.styles.d.ts

@@ -1,4 +1,4 @@
 import { AnchorOrigin, AnchorPosition } from '@hooks/useAnchorPosition.types';
 export declare const MENU_STYLES: {
-    root: (isFadingIn: boolean, anchorOrigin: AnchorOrigin, position: AnchorPosition) => string;
+    root: (isFadingIn: boolean, anchorOrigin: AnchorOrigin, position: AnchorPosition, width?: string | undefined) => string;
 };

package/dist/cjs/components/overlay/menu/MenuGroup/MenuGroup.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { MenuGroupProps } from '@components/overlay/menu/MenuGroup/MenuGroup.props';
+declare const MenuGroup: FC<MenuGroupProps>;
+export default MenuGroup;

package/dist/cjs/components/overlay/menu/MenuGroup/MenuGroup.props.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export type MenuGroupProps = {
+    children: ReactNode;
+};

package/dist/cjs/components/overlay/menu/MenuGroup/MenuGroup.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const MENU_GROUP_STYLES: {
+    root: string;
+};

package/dist/cjs/components/overlay/menu/MenuGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MenuGroup } from './MenuGroup.tsx';
+export type { MenuGroupProps } from './MenuGroup.props';

package/dist/cjs/components/overlay/menu/MenuItem/MenuItem.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { MenuItemProps } from '@components/overlay/menu/MenuItem/MenuItem.props';
+declare const MenuItem: FC<MenuItemProps>;
+export default MenuItem;

package/dist/cjs/components/overlay/menu/MenuItem/MenuItem.props.d.ts

@@ -0,0 +1,9 @@
+import { Theme } from '@aurora-ds/theme';
+import { ReactNode } from 'react';
+export type MenuItemProps = {
+    label: string;
+    icon?: ReactNode;
+    onClick: () => void;
+    textColor?: keyof Theme['colors'];
+    iconColor?: keyof Theme['colors'];
+};

package/dist/cjs/components/overlay/menu/MenuItem/MenuItem.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const MENU_ITEM_STYLES: {
+    root: string;
+};

package/dist/cjs/components/overlay/menu/MenuItem/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MenuItem } from './MenuItem.tsx';
+export type { MenuItemProps } from './MenuItem.props';

package/dist/cjs/components/overlay/menu/index.d.ts

@@ -1,2 +1,6 @@
 export { default as Menu } from './Menu';
 export type { MenuProps } from './Menu.props';
+export { MenuGroup } from './MenuGroup';
+export type { MenuGroupProps } from './MenuGroup/MenuGroup.props';
+export { MenuItem } from './MenuItem';
+export type { MenuItemProps } from './MenuItem/MenuItem.props';

package/dist/cjs/constants/globalConstants.d.ts

@@ -1,3 +1,4 @@
 export declare const BUTTON_SIZE = 36;
+export declare const MENU_ITEM_SIZE = 32;
 export declare const DRAWER_ITEM_HEIGHT = 32;
 export declare const DEFAULT_TRANSITION_DURATION_MS = 150;

package/dist/cjs/index.js

@@ -419,6 +419,7 @@ const Chip = ({ label, icon, variant = 'filled', color = 'default', size = 'md',
 Chip.displayName = 'Chip';
 
 const BUTTON_SIZE = 36;
+const MENU_ITEM_SIZE = 32;
 const DRAWER_ITEM_HEIGHT = 32;
 const DEFAULT_TRANSITION_DURATION_MS = 150;
 
@@ -1265,7 +1266,7 @@ const Accordion = ({ title, children, expanded, defaultExpanded = false, onChang
 Accordion.displayName = 'Accordion';
 
 const MENU_STYLES = theme.createStyles((theme) => ({
-    root: (isFadingIn, anchorOrigin, position) => ({
+    root: (isFadingIn, anchorOrigin, position, width) => ({
         position: 'absolute',
         zIndex: theme.zIndex.dropdown,
         marginTop: theme.spacing.xs,
@@ -1274,6 +1275,9 @@ const MENU_STYLES = theme.createStyles((theme) => ({
         border: `1px solid ${theme.colors.border}`,
         boxShadow: theme.shadows.md,
         minWidth: 150,
+        maxHeight: MENU_ITEM_SIZE * 8,
+        overflowY: 'auto',
+        width,
         opacity: isFadingIn ? 1 : 0,
         transform: isFadingIn ? 'scale(1)' : 'scale(0.95)',
         transformOrigin: anchorOrigin === 'right' ? 'top right' : 'top left',
@@ -1370,7 +1374,7 @@ const useTransitionRender = (isOpen, duration = DEFAULT_TRANSITION_DURATION_MS)
     };
 };
 
-const Menu = ({ anchor, onClose, children, anchorOrigin = 'right' }) => {
+const Menu = ({ anchor, onClose, children, anchorOrigin = 'right', width }) => {
     // refs
     const menuRef = React.useRef(null);
     const anchorRef = React.useRef(null);
@@ -1395,10 +1399,48 @@ const Menu = ({ anchor, onClose, children, anchorOrigin = 'right' }) => {
     if (!isVisible) {
         return null;
     }
-    return (jsxRuntime.jsx("div", { ref: menuRef, className: MENU_STYLES.root(isFadingIn, anchorOrigin, position), children: children }));
+    return (jsxRuntime.jsx("div", { ref: menuRef, className: MENU_STYLES.root(isFadingIn, anchorOrigin, position, width), children: children }));
 };
 Menu.displayName = 'Menu';
 
+const MENU_GROUP_STYLES = theme.createStyles((theme) => ({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        padding: theme.spacing.xs,
+    },
+}));
+
+const MenuGroup = ({ children }) => {
+    return (jsxRuntime.jsx("div", { className: MENU_GROUP_STYLES.root, children: children }));
+};
+MenuGroup.displayName = 'MenuGroup';
+
+const MENU_ITEM_STYLES = theme.createStyles((theme) => ({
+    root: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: theme.spacing.sm,
+        padding: theme.spacing.sm,
+        borderRadius: theme.radius.sm,
+        backgroundColor: theme.colors.surface,
+        outline: 'none',
+        border: 'none',
+        cursor: 'pointer',
+        height: MENU_ITEM_SIZE,
+        flexShrink: 0,
+        transition: 'background-color 150ms ease-in-out',
+        ':hover': {
+            backgroundColor: theme.colors.surfaceHover,
+        },
+    },
+}));
+
+const MenuItem = ({ label, icon, onClick, textColor, iconColor }) => {
+    return (jsxRuntime.jsxs("button", { className: MENU_ITEM_STYLES.root, onClick: onClick, children: [icon && (jsxRuntime.jsx(Icon, { color: iconColor ?? 'text', children: icon })), jsxRuntime.jsx(Text, { variant: 'label', color: textColor ?? 'text', children: label })] }));
+};
+MenuItem.displayName = 'MenuItem';
+
 /**
  * DrawerItem styles using createStyles from @aurora-ds/theme
  */
@@ -1728,6 +1770,8 @@ exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Input = Input_default;
 exports.Menu = Menu;
+exports.MenuGroup = MenuGroup;
+exports.MenuItem = MenuItem;
 exports.Page = Page;
 exports.PageSection = PageSection;
 exports.Separator = Separator;