@aurora-ds/components 0.23.0 → 0.23.2

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

@@ -6,4 +6,9 @@ export type MenuItemProps = {
     onClick: () => void;
     textColor?: keyof ThemeContract['colors'];
     iconColor?: keyof ThemeContract['colors'];
+    /** If true, the menu item is highlighted as active */
+    active?: boolean;
+};
+export type MenuItemStyleParams = {
+    active: boolean;
 };

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

@@ -1,3 +1,4 @@
+import { MenuItemStyleParams } from '@components/overlay/menu/MenuItem/MenuItem.props';
 export declare const MENU_ITEM_STYLES: {
-    root: string;
+    root: (args_0: MenuItemStyleParams) => string;
 };

package/dist/cjs/index.js

@@ -1609,28 +1609,30 @@ const MenuGroup = ({ children }) => {
 MenuGroup.displayName = 'MenuGroup';
 
 const MENU_ITEM_STYLES = theme.createStyles((theme) => ({
-    root: {
+    root: ({ active }) => ({
         display: 'flex',
         alignItems: 'center',
         gap: theme.spacing.sm,
         padding: theme.spacing.sm,
         borderRadius: theme.radius.sm,
-        backgroundColor: theme.colors.surface,
+        backgroundColor: active ? theme.colors.primary : theme.colors.surface,
         outline: 'none',
         border: 'none',
         cursor: 'pointer',
         minHeight: MENU_ITEM_SIZE,
         maxHeight: MENU_ITEM_SIZE,
         flexShrink: 0,
+        width: '100%',
         transition: 'background-color 150ms ease-in-out',
+        color: active ? theme.colors.surface : theme.colors.text,
         ':hover': {
-            backgroundColor: theme.colors.surfaceHover,
+            backgroundColor: active ? theme.colors.primary : 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', size: 'sm', children: icon })), jsxRuntime.jsx(Text, { variant: 'label', color: textColor ?? 'text', maxLines: 1, fontSize: 'sm', children: label })] }));
+const MenuItem = ({ label, icon, onClick, textColor, iconColor, active = false }) => {
+    return (jsxRuntime.jsxs("button", { className: MENU_ITEM_STYLES.root({ active }), onClick: onClick, children: [icon && (jsxRuntime.jsx(Icon, { color: active ? 'surface' : (iconColor ?? 'text'), size: 'sm', children: icon })), jsxRuntime.jsx(Text, { variant: 'label', color: active ? 'surface' : (textColor ?? 'text'), maxLines: 1, fontSize: 'sm', children: label })] }));
 };
 MenuItem.displayName = 'MenuItem';