Resolved Bug 3791 and 3792 : Design System > Element > React 18 > Alert > link button hand cursor is missing & App bar dropdown chevron icon is not working. And more..

raaghu-elements/rds-alert/rds-alert.scss

@@ -414,6 +414,7 @@
   border: none !important;
   font-size: var(--rds-alert-link-font-size, 0.8125rem) !important;
   padding: 0 var(--rds-spacing-xs, 4px);
+  cursor: pointer;
 }
 
 .rds-alert__secondary-button.MuiButton-root {

raaghu-elements/rds-app-bar/rds-app-bar.scss

@@ -2630,6 +2630,33 @@ $rds-app-bar-breakpoint-xs: 320px;
   }
 }
 
+.rds-language-button {
+  cursor: pointer;
+  text-transform: none;
+  min-width: 0;
+}
+
+.rds-admin-profile__button {
+  cursor: pointer;
+  text-transform: none;
+  min-width: 0;
+}
+
+.rds-admin-profile__chevron {
+  flex-shrink: 0;
+  transition: transform var(--rds-transition-base, 0.2s ease);
+  transform: rotate(0deg);
+
+  &--open {
+    transform: rotate(180deg);
+  }
+}
+
+.rds-admin-profile__drawer-avatar.MuiAvatar-root {
+  font-size: var(--rds-font-size-3xl, 2rem) !important;
+  font-weight: var(--rds-font-weight-semibold, 600) !important;
+}
+
 .rds-header--variant-dashboardwithlang {
   .rds-bottom-navigation {
     display: none;

raaghu-elements/rds-autocomplete/rds-autocomplete.scss

@@ -249,6 +249,14 @@
     }
   }
 
+  &__dropdown-paper {
+    margin-top: var(--rds-spacing-xs, 4px);
+    border: 1px solid var(--rds-border-default);
+    border-radius: var(--rds-border-radius-sm, 4px);
+    box-shadow: var(--rds-elevation-3, 0 4px 12px rgba(0, 0, 0, 0.12));
+    background-color: var(--rds-background-paper);
+  }
+
   &__chip {
     margin: var(--rds-spacing-xxs) !important;
     max-width: 120px !important;

raaghu-elements/rds-autocomplete/rds-autocomplete.tsx

@@ -125,6 +125,11 @@ const RdsAutocomplete = <T extends { label?: string },>({
         );
       } : undefined}
       sx={{ width: '100%' }}
+      slotProps={{
+        paper: {
+          className: 'rds-autocomplete__dropdown-paper',
+        },
+      }}
       ListboxProps={{
         sx: {
           '& .MuiAutocomplete-option': {

raaghu-elements/rds-avatar/rds-avatar.scss

@@ -126,6 +126,24 @@
     background: none;
     box-shadow: none;
   }
+  &--with-ring {
+    .rds-avatar__avatar-wrap {
+      padding: calc(var(--rds-spacing-xs, 4px) + 1px);
+    }
+
+    .rds-avatar__ring {
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+
+    .MuiAvatar-root {
+      position: relative;
+      z-index: 1;
+    }
+  }
+
   &--name-bottom {
     display: flex;
     flex-direction: column;
@@ -143,17 +161,12 @@
       overflow: visible;
       padding: calc(var(--rds-spacing-xs, 4px) / 2);
     }
-    .rds-avatar__ring {
-      position: absolute;
-      top: -0.5px;
-      left: -0.5px;
-      right: -0.5px;
-      bottom: -0.5px;
-      border: 2.5px solid currentColor;
-      border-radius: var(--rds-border-radius-full, 50%);
-      z-index: var(--rds-z-index-base);
-      pointer-events: none;
-      background-color: transparent;
+
+    &.rds-avatar--with-ring {
+      .rds-avatar__avatar-outer,
+      .rds-avatar__avatar-wrap {
+        padding: calc(var(--rds-spacing-xs, 4px) + 1px);
+      }
     }
     .rds-avatar__dot {
       position: absolute;

raaghu-elements/rds-breadcrumbs/rds-breadcrumbs.stories.tsx

@@ -23,6 +23,10 @@ const meta: Meta<typeof RdsBreadcrumbs> = {
       options: Object.values(BreadcrumbSeparator),
       description: 'Type of separator to use between breadcrumb items',
     },
+    separator: {
+      control: false,
+      table: { disable: true },
+    },
     autoIcons: {
       control: 'boolean',
       description: 'Automatically assign different icons based on breadcrumb position and content',

raaghu-elements/rds-breadcrumbs/rds-breadcrumbs.test.tsx

@@ -212,6 +212,17 @@ describe('RdsBreadcrumbs', () => {
       );
       expect(container.textContent).toContain('@');
     });
+
+    it('should ignore empty object separator and fall back to separatorType', () => {
+      const { container } = render(
+        <RdsBreadcrumbs
+          {...defaultProps}
+          separator={{} as React.ReactNode}
+          separatorType={BreadcrumbSeparator.Slash}
+        />
+      );
+      expect(container.textContent).toContain('/');
+    });
   });
 
   describe('Layouts', () => {

raaghu-elements/rds-breadcrumbs/rds-breadcrumbs.tsx

@@ -90,8 +90,15 @@ const RdsBreadcrumbs = ({
 }:RdsBreadcrumbsProps) => {
   const [selectedIdx, setSelectedIdx] = React.useState<number | null>(null);
 
+  const isRenderableSeparator = (value: unknown): value is React.ReactNode | BreadcrumbSeparator => {
+    if (value === undefined || value === null) return false;
+    if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') return true;
+    if (React.isValidElement(value)) return true;
+    return false;
+  };
+
   const getSeparator = (): React.ReactNode => {
-    if (separator !== undefined) {
+    if (isRenderableSeparator(separator)) {
       return separator;
     }
 

raaghu-elements/shared/components/ProfileMenu.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IconButton, Avatar, Menu as MuiMenu, Box, MenuItem } from '@mui/material';
+import { Button, Avatar, Menu as MuiMenu, Box, MenuItem } from '@mui/material';
 import PersonIcon from '@mui/icons-material/Person';
 import Brightness5Icon from '@mui/icons-material/Brightness5';
 import SettingsIcon from '@mui/icons-material/Settings';
@@ -36,6 +36,26 @@ const getInitials = (name: string): string =>
     .join('')
     .toUpperCase();
 
+const ProfileMenuChevron = ({ open }: { open: boolean }) => (
+  <svg
+    className={`rds-profile-menu__chevron${open ? ' rds-profile-menu__chevron--open' : ''}`}
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden
+  >
+    <path
+      d="M6 8L10 12L14 8"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
 const DEFAULT_MENU_ITEMS: ProfileMenuItem[] = [
   { label: 'My Profile', icon: <PersonIcon fontSize="small" /> },
   { label: 'Theme', icon: <Brightness5Icon fontSize="small" /> },
@@ -75,7 +95,7 @@ export const ProfileMenu = ({
   }, [variant]);
 
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
+    setAnchorEl(open ? null : event.currentTarget);
   };
 
   const handleClose = () => {
@@ -84,14 +104,15 @@ export const ProfileMenu = ({
 
   return (
     <>
-      <IconButton
-        aria-label="Draw"
+      <Button
+        aria-label="Open profile menu"
         color="inherit"
         onClick={handleClick}
         size="small"
         className="rds-profile-menu__button"
         aria-haspopup="true"
         aria-expanded={open}
+        disableElevation
       >
         {variant === 'rich' ? (
           <>
@@ -103,50 +124,16 @@ export const ProfileMenu = ({
               showName={!isSmallScreen}
               size="small"
             />
-            {!isSmallScreen && (
-              <svg
-                className="rds-profile-menu__chevron"
-                width="20"
-                height="20"
-                viewBox="0 0 20 20"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                aria-hidden
-              >
-                <path
-                  d="M6 8L10 12L14 8"
-                  stroke="currentColor"
-                  strokeWidth="1.5"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </svg>
-            )}
+            {!isSmallScreen && <ProfileMenuChevron open={open} />}
           </>
         ) : (
           <>
             <Avatar className="rds-profile-menu__avatar">{initials}</Avatar>
             <span className="rds-profile-menu__name">{name}</span>
-            <svg
-              className="rds-profile-menu__chevron"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden
-            >
-              <path
-                d="M6 8L10 12L14 8"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
+            <ProfileMenuChevron open={open} />
           </>
         )}
-      </IconButton>
+      </Button>
       <MuiMenu
         anchorEl={anchorEl}
         open={open}

raaghu-elements/shared/styles/rds-profile-menu.scss

@@ -21,7 +21,11 @@
 .rds-profile-menu__button.MuiIconButton-root:hover,
 .rds-profile-menu__button.MuiIconButton-root:active,
 .rds-profile-menu__button.MuiIconButton-root:focus,
-.rds-profile-menu__button.MuiIconButton-root.Mui-focusVisible {
+.rds-profile-menu__button.MuiIconButton-root.Mui-focusVisible,
+.rds-profile-menu__button.MuiButton-root:hover,
+.rds-profile-menu__button.MuiButton-root:active,
+.rds-profile-menu__button.MuiButton-root:focus,
+.rds-profile-menu__button.MuiButton-root.Mui-focusVisible {
   background-color: transparent !important;
 }
 
@@ -37,9 +41,19 @@
   padding-left: 0.5rem;
   padding-right: 1rem;
   border-radius: var(--rds-profile-menu-button-radius, 16px);
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: var(--rds-profile-menu-button-gap, 8px);
+  cursor: pointer;
+  text-transform: none;
+  min-width: 0;
+
+  .rds-avatar,
+  .rds-profile-menu__avatar,
+  .rds-profile-menu__name,
+  .rds-profile-menu__chevron {
+    pointer-events: none;
+  }
 }
 
 .rds-profile-menu__avatar {
@@ -54,6 +68,13 @@
 .rds-profile-menu__chevron {
   margin-left: var(--rds-spacing-xs);
   color: var(--rds-secondary-main);
+  flex-shrink: 0;
+  transition: transform var(--rds-transition-base, 0.2s ease);
+  transform: rotate(0deg);
+
+  &--open {
+    transform: rotate(180deg);
+  }
 }
 
 .rds-profile-menu__name {