Extend menu component props

[skrobek]

PR Type

enhancement, tests

---

Description

• Added isExpanded property to MenuItem interface and updated Menu component to utilize this property for controlling the default open state of details elements.
• Updated the Menu story to demonstrate the use of the isExpanded property.
• Incremented the package version to 0.11.4 to reflect the new enhancements.

---

Changes walkthrough 📝

	Relevant files
Enhancement	Menu.tsx Add `isExpanded` property to Menu component                            src/components/ui/menu/Menu.tsx Added isExpanded property to menu items. Updated details element to use isExpanded for default open state. +10/-2    types.ts Extend `MenuItem` interface with `isExpanded`                        src/components/ui/menu/types.ts Added isExpanded property to MenuItem interface. +1/-0
Tests	Menu.stories.tsx Update Menu story to include `isExpanded` example                src/stories/Menu.stories.tsx Added isExpanded property to a menu item in the story example. +1/-0
Configuration changes	package.json Bump package version to 0.11.4                                                      package.json Updated package version from 0.11.3 to 0.11.4. +1/-1

---

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Default Prop Handling Ensure that the default values for props like className and onClick are handled correctly to avoid potential runtime errors or unexpected behaviors.

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Enhancement	Prevent rendering empty dropdown components Use conditional rendering to ensure that the details element is only included when there are children to display, preventing empty dropdowns. src/components/ui/menu/Menu.tsx [56-60] -<details open={isExpanded}> - <summary className={itemClassNames} onClick={onClick}> - {label} - </summary> - <ul className='before:w-0'>{children.map(renderMenItem)}</ul> +{children && ( + <details open={isExpanded}> + <summary className={itemClassNames} onClick={onClick}> + {label} + </summary> + <ul className='before:w-0'>{children.map(renderMenItem)}</ul> + </details> +)} Suggestion importance[1-10]: 9 Why: This suggestion effectively prevents the rendering of empty dropdowns, enhancing the user interface by ensuring that dropdowns only appear when there are children to display.	9
Possible bug	Ensure onClick is callable to prevent runtime errors Add a check to ensure that onClick is a function before using it as an event handler to prevent runtime errors if undefined or a non-function value is passed. src/components/ui/menu/Menu.tsx [51] -<a className={itemClassNames} onClick={onClick}> +<a className={itemClassNames} onClick={onClick && (() => onClick())}> Suggestion importance[1-10]: 8 Why: Adding a check to ensure onClick is a function prevents potential runtime errors, which is crucial for maintaining the stability of the application.	8
Possible issue	Prevent unintentional overriding of existing class names Ensure that the default value for className in the destructuring of item does not unintentionally override existing class names passed to the component. Consider appending the default class name instead of replacing it. src/components/ui/menu/Menu.tsx [12-19] const { icon, badge, children, active = false, - className = '', + className = `default-class ${item.className}`, onClick = undefined, isExpanded = false } = item; Suggestion importance[1-10]: 7 Why: This suggestion addresses a potential issue where the default class name could override existing class names, improving the robustness of the component styling.	7