cozy-ui 122.4.0 → 122.5.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [122.5.0](https://github.com/cozy/cozy-ui/compare/v122.4.0...v122.5.0) (2025-04-14)
+
+
+### Features
+
+* **Nav:** Spread classname on NavItem, NavText and NavIcon ([2396f11](https://github.com/cozy/cozy-ui/commit/2396f11))
+
 # [122.4.0](https://github.com/cozy/cozy-ui/compare/v122.3.0...v122.4.0) (2025-04-11)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "122.4.0",
+  "version": "122.5.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/Nav/index.jsx

@@ -9,10 +9,11 @@ import TopIcon from '../Icons/Top'
 import useBreakpoints from '../providers/Breakpoints'
 import { useI18n } from '../providers/I18n'
 
-export const NavItem = ({ children, secondary, ...restProps }) => (
+export const NavItem = ({ className, children, secondary, ...restProps }) => (
   <li
     className={cx(
       styles['c-nav-item'],
+      className,
       secondary ? styles['c-nav-item-secondary'] : null
     )}
     {...restProps}
@@ -21,8 +22,8 @@ export const NavItem = ({ children, secondary, ...restProps }) => (
   </li>
 )
 
-export const NavText = ({ children }) => (
-  <span className={styles['c-nav-text']}>{children}</span>
+export const NavText = ({ className, children }) => (
+  <span className={cx(styles['c-nav-text'], className)}>{children}</span>
 )
 
 export const NavLink = {
@@ -57,16 +58,16 @@ export const genNavLinkForV6 = RRNavLink =>
     />
   ))
 
-export const NavIcon = ({ icon }) => (
-  <span className={cx(styles['c-nav-icon'])}>
+export const NavIcon = ({ className, icon }) => (
+  <span className={cx(styles['c-nav-icon'], className)}>
     <Icon icon={icon} aria-hidden="true" focusable="false" />
   </span>
 )
 
-const Nav = ({ children }) => {
+const Nav = ({ className, children }) => {
   return (
     <nav role="navigation">
-      <ul className={styles['c-nav']}>{children}</ul>
+      <ul className={cx(styles['c-nav'], className)}>{children}</ul>
     </nav>
   )
 }

package/transpiled/react/Nav/index.d.ts

@@ -1,9 +1,11 @@
-export function NavItem({ children, secondary, ...restProps }: {
+export function NavItem({ className, children, secondary, ...restProps }: {
     [x: string]: any;
+    className: any;
     children: any;
     secondary: any;
 }): JSX.Element;
-export function NavText({ children }: {
+export function NavText({ className, children }: {
+    className: any;
     children: any;
 }): JSX.Element;
 export namespace NavLink {
@@ -16,13 +18,15 @@ export function genNavLink(RRNavLink: any): ({ to, children, ...rest }: {
     children: any;
 }) => JSX.Element;
 export function genNavLinkForV6(RRNavLink: any): React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-export function NavIcon({ icon }: {
+export function NavIcon({ className, icon }: {
+    className: any;
     icon: any;
 }): JSX.Element;
 export const NavDesktopLimiter: any;
 export default Nav;
 import React from "react";
-declare function Nav({ children }: {
+declare function Nav({ className, children }: {
+    className: any;
     children: any;
 }): JSX.Element;
 declare namespace Nav {

package/transpiled/react/Nav/index.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "secondary"],
+var _excluded = ["className", "children", "secondary"],
     _excluded2 = ["to", "children"];
 import cx from 'classnames';
 import React, { Children, isValidElement, useState, forwardRef } from 'react';
@@ -22,18 +22,20 @@ import TopIcon from "cozy-ui/transpiled/react/Icons/Top";
 import useBreakpoints from "cozy-ui/transpiled/react/providers/Breakpoints";
 import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
 export var NavItem = function NavItem(_ref) {
-  var children = _ref.children,
+  var className = _ref.className,
+      children = _ref.children,
       secondary = _ref.secondary,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement("li", _extends({
-    className: cx(styles['c-nav-item'], secondary ? styles['c-nav-item-secondary'] : null)
+    className: cx(styles['c-nav-item'], className, secondary ? styles['c-nav-item-secondary'] : null)
   }, restProps), children);
 };
 export var NavText = function NavText(_ref2) {
-  var children = _ref2.children;
+  var className = _ref2.className,
+      children = _ref2.children;
   return /*#__PURE__*/React.createElement("span", {
-    className: styles['c-nav-text']
+    className: cx(styles['c-nav-text'], className)
   }, children);
 };
 export var NavLink = {
@@ -67,9 +69,10 @@ export var genNavLinkForV6 = function genNavLinkForV6(RRNavLink) {
   });
 };
 export var NavIcon = function NavIcon(_ref5) {
-  var icon = _ref5.icon;
+  var className = _ref5.className,
+      icon = _ref5.icon;
   return /*#__PURE__*/React.createElement("span", {
-    className: cx(styles['c-nav-icon'])
+    className: cx(styles['c-nav-icon'], className)
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: icon,
     "aria-hidden": "true",
@@ -78,11 +81,12 @@ export var NavIcon = function NavIcon(_ref5) {
 };
 
 var Nav = function Nav(_ref6) {
-  var children = _ref6.children;
+  var className = _ref6.className,
+      children = _ref6.children;
   return /*#__PURE__*/React.createElement("nav", {
     role: "navigation"
   }, /*#__PURE__*/React.createElement("ul", {
-    className: styles['c-nav']
+    className: cx(styles['c-nav'], className)
   }, children));
 };
 /**