cozy-ui 128.7.0 → 128.8.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [128.8.0](https://github.com/cozy/cozy-ui/compare/v128.7.0...v128.8.0) (2025-09-09)
+
+
+### Features
+
+* **NavDesktopDropdown:** introduce NavDesktopDropdown component for enhanced navigation item management ([3cb8a44](https://github.com/cozy/cozy-ui/commit/3cb8a44))
+
 # [128.7.0](https://github.com/cozy/cozy-ui/compare/v128.6.0...v128.7.0) (2025-09-09)
 
 

package/package.json

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

package/react/Layout/Layout.md

@@ -4,6 +4,7 @@ The Layout component brings a strong context for apps with any screen resolution
 * `<Content />` is the main content or your app.
 * ⚠️ Secondary `<NavItem />` are not visible on mobile and tablets
 * `<NavDesktopLimiter />` is a component that allows you to limit the number of visible items in a list and toggle between showing a limited view and displaying all items.
+* `<NavDesktopDropdown />` is a component that allows you to show / hide the items in a list when the number of items exceeds a defined limit
 
 ### NavDesktopLimiter
 
@@ -16,17 +17,24 @@ It can be used to wrap any list of React elements, automatically providing funct
 * **children**: React.ReactNode (required) - The list items or elements that **NavDesktopLimiter** will manage.
 * **max**: number (optional) - The maximum number of items to display initially. Default is **5**.
 
-**Features**:
+### NavDesktopDropdown
 
-* **Toggle Visibility**: Allows users to toggle between seeing the limited view and the full list of items.
-* **Customizable Limit**: Users can specify how many items should be shown in the limited view.
-* **Ease of Use**: Seamlessly integrates with existing list components from cozy-ui or standard JSX elements.
+The **NavDesktopDropdown** component is designed to manage the display of nav items efficiently, allowing users to toggle between showing a collapsed view and displaying all items. This component enhances the UI/UX by providing a clean and intuitive way to handle dropdowns with many items.
+
+It can be used to wrap any list of React elements, automatically providing functionality to limit the number of displayed elements based on the `limit` prop (defaulting to **5**). Users can toggle the dropdown to show or hide the items as needed.
+
+**Props**:
+
+* **label**: string (required) - The label for the dropdown.
+* **children**: React.ReactNode (required) - The list items or elements that **NavDesktopDropdown** will manage.
+* **defaultOpen**: boolean (optional) - Determines whether the dropdown is open by default. Default is **true**.
+* **limit**: number (optional) - The maximum number of items to display before enabling collapsing. Default is **5**.
 
 ```jsx
 import { useState } from 'react'
 import { Layout, Main, Content } from 'cozy-ui/transpiled/react/Layout'
 import Sidebar from 'cozy-ui/transpiled/react/Sidebar'
-import Nav, { NavItem, NavIcon, NavText, genNavLink, NavDesktopLimiter } from 'cozy-ui/transpiled/react/Nav'
+import Nav, { NavItem, NavIcon, NavText, genNavLink, NavDesktopLimiter, NavDesktopDropdown } from 'cozy-ui/transpiled/react/Nav'
 import cx from 'classnames'
 import isEqual from 'lodash/isEqual'
 import Icon from 'cozy-ui/transpiled/react/Icon'
@@ -83,7 +91,7 @@ const useStyles = makeStyles(theme => ({
   }
 }))
 
-const initialVariants = [{ monoColumn: false, withTopBar: true, longContent: true }]
+const initialVariants = [{ monoColumn: false, withTopBar: true, longContent: true, moreThanMax: true }]
 const [active, setActive] = useState(['Section 1', 'Subsection 1'])
 const [showDialog, setShowDialog] = useState(isTesting() ? true : false)
 const styles = useStyles()
@@ -130,6 +138,17 @@ const SideBar = ({ variant }) => {
             <NavText>Section 3</NavText>
           </NavLink>
         </NavItem>
+        <NavDesktopDropdown label="Section 4" max={5}>
+        {
+          Array.from(Array(variant.moreThanMax ? 6 : 3).keys()).map(i => (
+            <NavItem secondary key={i}>
+              <NavLink>
+                <NavText>Subsection {i}</NavText>
+              </NavLink>
+            </NavItem>
+          ))
+        }
+        </NavDesktopDropdown>
       </Nav>
     </Sidebar>
   )

package/react/Nav/index.jsx

@@ -3,9 +3,11 @@ import React, { Children, isValidElement, useState, forwardRef } from 'react'
 
 import withNavLocales from './locales/withNavLocales'
 import styles from './styles.styl'
+import DropdownText from '../DropdownText'
 import Icon from '../Icon'
 import BottomIcon from '../Icons/Bottom'
 import TopIcon from '../Icons/Top'
+import ListItem from '../ListItem'
 import useBreakpoints from '../providers/Breakpoints'
 import { useI18n } from '../providers/I18n'
 
@@ -116,5 +118,46 @@ const _NavDesktopLimiter = ({ children, max = 5 }) => {
 
 export const NavDesktopLimiter = withNavLocales(_NavDesktopLimiter)
 
+export const NavDesktopDropdown = ({
+  label,
+  children,
+  defaultOpen = true,
+  limit = 5
+}) => {
+  const { isDesktop } = useBreakpoints()
+  const [open, setOpen] = useState(defaultOpen)
+  const isActivated =
+    Children.toArray(children).filter(isValidElement).length > limit
+
+  const innerIconProps = {
+    rotate: open ? 0 : -90,
+    ...(!isActivated && { className: 'u-dn' })
+  }
+
+  if (!isDesktop) return null
+
+  return (
+    <>
+      <ListItem size="small" className={isActivated ? 'u-c-pointer' : ''}>
+        <DropdownText
+          variant="subtitle2"
+          color="textSecondary"
+          innerIconProps={innerIconProps}
+          onClick={() => {
+            if (!isActivated) {
+              return
+            }
+            setOpen(!open)
+          }}
+        >
+          {label}
+        </DropdownText>
+      </ListItem>
+
+      {open && <>{children}</>}
+    </>
+  )
+}
+
 export default Nav
 Nav.NavItem = NavItem

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

@@ -23,6 +23,12 @@ export function NavIcon({ className, icon }: {
     icon: any;
 }): JSX.Element;
 export const NavDesktopLimiter: any;
+export function NavDesktopDropdown({ label, children, defaultOpen, limit }: {
+    label: any;
+    children: any;
+    defaultOpen?: boolean | undefined;
+    limit?: number | undefined;
+}): JSX.Element | null;
 export default Nav;
 import React from "react";
 declare function Nav({ className, children }: {

package/transpiled/react/Nav/index.js

@@ -1,8 +1,14 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "children", "secondary"],
     _excluded2 = ["to", "children"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import cx from 'classnames';
 import React, { Children, isValidElement, useState, forwardRef } from 'react';
 import withNavLocales from "cozy-ui/transpiled/react/Nav/locales/withNavLocales";
@@ -16,9 +22,11 @@ var styles = {
   "c-nav-item-secondary": "styles__c-nav-item-secondary___k14rf",
   "c-nav-limiter": "styles__c-nav-limiter___3oxQU"
 };
+import DropdownText from "cozy-ui/transpiled/react/DropdownText";
 import Icon from "cozy-ui/transpiled/react/Icon";
 import BottomIcon from "cozy-ui/transpiled/react/Icons/Bottom";
 import TopIcon from "cozy-ui/transpiled/react/Icons/Top";
+import ListItem from "cozy-ui/transpiled/react/ListItem";
 import useBreakpoints from "cozy-ui/transpiled/react/providers/Breakpoints";
 import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
 export var NavItem = function NavItem(_ref) {
@@ -136,5 +144,46 @@ var _NavDesktopLimiter = function _NavDesktopLimiter(_ref7) {
 };
 
 export var NavDesktopLimiter = withNavLocales(_NavDesktopLimiter);
+export var NavDesktopDropdown = function NavDesktopDropdown(_ref8) {
+  var label = _ref8.label,
+      children = _ref8.children,
+      _ref8$defaultOpen = _ref8.defaultOpen,
+      defaultOpen = _ref8$defaultOpen === void 0 ? true : _ref8$defaultOpen,
+      _ref8$limit = _ref8.limit,
+      limit = _ref8$limit === void 0 ? 5 : _ref8$limit;
+
+  var _useBreakpoints2 = useBreakpoints(),
+      isDesktop = _useBreakpoints2.isDesktop;
+
+  var _useState3 = useState(defaultOpen),
+      _useState4 = _slicedToArray(_useState3, 2),
+      open = _useState4[0],
+      setOpen = _useState4[1];
+
+  var isActivated = Children.toArray(children).filter(isValidElement).length > limit;
+
+  var innerIconProps = _objectSpread({
+    rotate: open ? 0 : -90
+  }, !isActivated && {
+    className: 'u-dn'
+  });
+
+  if (!isDesktop) return null;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem, {
+    size: "small",
+    className: isActivated ? 'u-c-pointer' : ''
+  }, /*#__PURE__*/React.createElement(DropdownText, {
+    variant: "subtitle2",
+    color: "textSecondary",
+    innerIconProps: innerIconProps,
+    onClick: function onClick() {
+      if (!isActivated) {
+        return;
+      }
+
+      setOpen(!open);
+    }
+  }, label)), open && /*#__PURE__*/React.createElement(React.Fragment, null, children));
+};
 export default Nav;
 Nav.NavItem = NavItem;

package/transpiled/react/deprecated/Menus/index.d.ts

@@ -12,11 +12,11 @@ declare var _default: React.ComponentType<Pick<Pick<PropTypes.InferProps<{
     component: PropTypes.Requireable<PropTypes.ReactElementLike>;
     /** placement for the popover */
     placement: PropTypes.Requireable<string>;
-}>, "disabled" | "placement" | "component">> & Partial<Pick<{
+}>, "disabled" | "component" | "placement">> & Partial<Pick<{
     disabled: boolean;
     component: null;
     placement: string;
-}, never>>, "disabled" | "placement" | "component"> & import("@material-ui/styles/withStyles/withStyles").StyledComponentProps<"root" | "paper">>;
+}, never>>, "disabled" | "component" | "placement"> & import("@material-ui/styles/withStyles/withStyles").StyledComponentProps<"root" | "paper">>;
 export default _default;
 export { MenuButton };
 import PropTypes from "prop-types";