cozy-ui 73.1.0 → 73.2.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [73.2.0](https://github.com/cozy/cozy-ui/compare/v73.1.0...v73.2.0) (2022-08-26)
+
+
+### Features
+
+* Add genNavLinkForV6() in Nav component ([b5df157](https://github.com/cozy/cozy-ui/commit/b5df157))
+
 # [73.1.0](https://github.com/cozy/cozy-ui/compare/v73.0.1...v73.1.0) (2022-08-26)
 
 

package/package.json

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

package/react/Nav/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import Icon from '../Icon'
 import styles from './styles.styl'
 import cx from 'classnames'
@@ -24,6 +24,7 @@ export const NavLink = {
   activeClassName: styles['is-active']
 }
 
+// Generates a styled NavLink for react-routeur v5 and older
 export const genNavLink = RRNavLink => ({ to, children, ...rest }) => (
   <RRNavLink
     to={to}
@@ -35,6 +36,18 @@ export const genNavLink = RRNavLink => ({ to, children, ...rest }) => (
   </RRNavLink>
 )
 
+// Generates a styled NavLink for react-routeur v6
+export const genNavLinkForV6 = RRNavLink =>
+  forwardRef((props, ref) => (
+    <RRNavLink
+      ref={ref}
+      className={({ isActive }) =>
+        styles['c-nav-link'] + (isActive ? ` ${styles['is-active']}` : '')
+      }
+      {...props}
+    />
+  ))
+
 export const NavIcon = ({ icon }) => (
   <span className={cx(styles['c-nav-icon'])}>
     <Icon icon={icon} aria-hidden="true" focusable="false" />

package/react/Sidebar/Readme.md

@@ -2,6 +2,8 @@ On desktop shows a vertical menu on the left. On mobile, shows a horizontal bott
 
 ⚠️ `NavLink` must be imported normally from `react-router-dom` and used as follows.
 
+⚠️ You must use `genNavLinkForV6` instead of `genNavLink` for `react-router-dom` version 6.
+
 ```jsx static
 import { NavLink as RouterLink } from 'react-router'
 import { genNavLink } from 'cozy-ui/transpiled/react/Nav'

package/transpiled/react/Nav/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "secondary"],
     _excluded2 = ["to", "children"];
-import React from 'react';
+import React, { forwardRef } from 'react';
 import Icon from "cozy-ui/transpiled/react/Icon";
 var styles = {
   "CozyTheme--inverted": "styles__CozyTheme--inverted____lEpp",
@@ -34,7 +34,8 @@ export var NavText = function NavText(_ref2) {
 export var NavLink = {
   className: styles['c-nav-link'],
   activeClassName: styles['is-active']
-};
+}; // Generates a styled NavLink for react-routeur v5 and older
+
 export var genNavLink = function genNavLink(RRNavLink) {
   return function (_ref3) {
     var to = _ref3.to,
@@ -47,9 +48,21 @@ export var genNavLink = function genNavLink(RRNavLink) {
       activeClassName: NavLink.activeClassName
     }, rest), children);
   };
+}; // Generates a styled NavLink for react-routeur v6
+
+export var genNavLinkForV6 = function genNavLinkForV6(RRNavLink) {
+  return /*#__PURE__*/forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(RRNavLink, _extends({
+      ref: ref,
+      className: function className(_ref4) {
+        var isActive = _ref4.isActive;
+        return styles['c-nav-link'] + (isActive ? " ".concat(styles['is-active']) : '');
+      }
+    }, props));
+  });
 };
-export var NavIcon = function NavIcon(_ref4) {
-  var icon = _ref4.icon;
+export var NavIcon = function NavIcon(_ref5) {
+  var icon = _ref5.icon;
   return /*#__PURE__*/React.createElement("span", {
     className: cx(styles['c-nav-icon'])
   }, /*#__PURE__*/React.createElement(Icon, {
@@ -59,8 +72,8 @@ export var NavIcon = function NavIcon(_ref4) {
   }));
 };
 
-var Nav = function Nav(_ref5) {
-  var children = _ref5.children;
+var Nav = function Nav(_ref6) {
+  var children = _ref6.children;
   return /*#__PURE__*/React.createElement("nav", {
     role: "navigation"
   }, /*#__PURE__*/React.createElement("ul", {