@aurora-ds/components 0.15.0 → 0.15.2

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

@@ -1,6 +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/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;
 
@@ -1274,6 +1275,8 @@ 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)',
@@ -1424,6 +1427,9 @@ const MENU_ITEM_STYLES = theme.createStyles((theme) => ({
         outline: 'none',
         border: 'none',
         cursor: 'pointer',
+        minHeight: MENU_ITEM_SIZE,
+        maxHeight: MENU_ITEM_SIZE,
+        flexShrink: 0,
         transition: 'background-color 150ms ease-in-out',
         ':hover': {
             backgroundColor: theme.colors.surfaceHover,
@@ -1431,8 +1437,8 @@ const MENU_ITEM_STYLES = theme.createStyles((theme) => ({
     },
 }));
 
-const MenuItem = ({ label, icon, onClick }) => {
-    return (jsxRuntime.jsxs("button", { className: MENU_ITEM_STYLES.root, onClick: onClick, children: [icon && (jsxRuntime.jsx(Icon, { color: 'text', children: icon })), jsxRuntime.jsx(Text, { children: label })] }));
+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', maxLines: 1, children: label })] }));
 };
 MenuItem.displayName = 'MenuItem';