cozy-ui 122.3.0 → 122.5.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [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)
+
+
+### Features
+
+* Add typing for IconButton, ListItemIcon, ListItemText & Switch ([2bd8ae5](https://github.com/cozy/cozy-ui/commit/2bd8ae5))
+
 # [122.3.0](https://github.com/cozy/cozy-ui/compare/v122.2.0...v122.3.0) (2025-04-10)
 
 

package/package.json

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

package/react/IconButton/index.jsx

@@ -5,6 +5,16 @@ import React, { forwardRef } from 'react'
 
 const muiSupportedColors = ['default', 'inherit', 'primary', 'secondary']
 
+/**
+ * @typedef {Object} IconButtonPropTypes
+ * @property {React.ReactNode} children - The content of the button, typically an icon.
+ * @property {'default' | 'inherit' | 'primary' | 'secondary' | 'error'} [color='default'] - The color of the button.
+ * @property {'small' | 'medium' | 'large' | 'xlarge'} [size='large'] - The size of the button.
+ */
+
+/**
+ * @type React.ForwardRefRenderFunction<HTMLDivElement, IconButtonPropTypes & import('@material-ui/core/IconButton').IconButtonProps>
+ */
 const IconButton = forwardRef(
   ({ size = 'large', className, children, color, ...props }, ref) => {
     const selfColor = muiSupportedColors.includes(color) ? color : 'default'

package/react/ListItemIcon/index.js

@@ -7,6 +7,10 @@ export const mediumSize = 24
 export const largeSize = 32
 
 // We add a specific class to be able to override the style in makeOverride when used in an other component
+
+/**
+ * @type React.ForwardRefRenderFunction<HTMLDivElement, import('@material-ui/core/ListItemIcon').ListItemIconProps>
+ */
 const ListItemIcon = forwardRef(({ className, ...props }, ref) => {
   return (
     <MuiListItemIcon

package/react/ListItemText/index.jsx

@@ -22,6 +22,9 @@ const getTypographyProp = (props, className, ellipsis) => {
       }
 }
 
+/**
+ * @type React.ForwardRefRenderFunction<HTMLDivElement, import('@material-ui/core/ListItemText').ListItemTextProps>
+ */
 const ListItemText = forwardRef((props, ref) => {
   const {
     primaryText,

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/react/Switch/index.jsx

@@ -4,6 +4,9 @@ import React from 'react'
 import Icon from '../Icon'
 import { isTwakeTheme } from '../helpers/isTwakeTheme'
 
+/**
+ * @type JSX.Element<HTMLDivElement, import('@material-ui/core/Switch').SwitchProps>
+ */
 const Switch = ({ icon, ...props }) => {
   const _icon = (
     <span className="cozySwitchThumb">

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

@@ -1,3 +1,46 @@
 export default IconButton;
-declare const IconButton: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export type IconButtonPropTypes = {
+    /**
+     * - The content of the button, typically an icon.
+     */
+    children: React.ReactNode;
+    /**
+     * - The color of the button.
+     */
+    color?: "default" | "error" | "primary" | "secondary" | "inherit" | undefined;
+    /**
+     * - The size of the button.
+     */
+    size?: "small" | "large" | "medium" | "xlarge" | undefined;
+};
+/**
+ * @typedef {Object} IconButtonPropTypes
+ * @property {React.ReactNode} children - The content of the button, typically an icon.
+ * @property {'default' | 'inherit' | 'primary' | 'secondary' | 'error'} [color='default'] - The color of the button.
+ * @property {'small' | 'medium' | 'large' | 'xlarge'} [size='large'] - The size of the button.
+ */
+/**
+ * @type React.ForwardRefRenderFunction<HTMLDivElement, IconButtonPropTypes & import('@material-ui/core/IconButton').IconButtonProps>
+ */
+declare const IconButton: React.ForwardRefRenderFunction<HTMLDivElement, IconButtonPropTypes & {
+    color?: import("@material-ui/core").PropTypes.Color | undefined;
+    disableFocusRipple?: boolean | undefined;
+    edge?: false | "end" | "start" | undefined;
+    size?: "small" | "medium" | undefined;
+} & {
+    action?: React.Ref<import("@material-ui/core").ButtonBaseActions> | undefined;
+    buttonRef?: React.Ref<unknown> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: React.ReactNode;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    onFocusVisible?: React.FocusEventHandler<any> | undefined;
+    tabIndex?: string | number | undefined;
+    TouchRippleProps?: Partial<import("@material-ui/core/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+} & import("@material-ui/core/OverridableComponent").CommonProps<import("@material-ui/core/IconButton").IconButtonTypeMap<{}, "button">> & Pick<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+}, "color" | "ref" | "form" | "title" | "children" | "disabled" | "aria-busy" | "aria-disabled" | "onClick" | "type" | "hidden" | "role" | "dir" | "slot" | "id" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "name" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value">>;
 import React from "react";

package/transpiled/react/IconButton/index.js

@@ -6,6 +6,17 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
 var muiSupportedColors = ['default', 'inherit', 'primary', 'secondary'];
+/**
+ * @typedef {Object} IconButtonPropTypes
+ * @property {React.ReactNode} children - The content of the button, typically an icon.
+ * @property {'default' | 'inherit' | 'primary' | 'secondary' | 'error'} [color='default'] - The color of the button.
+ * @property {'small' | 'medium' | 'large' | 'xlarge'} [size='large'] - The size of the button.
+ */
+
+/**
+ * @type React.ForwardRefRenderFunction<HTMLDivElement, IconButtonPropTypes & import('@material-ui/core/IconButton').IconButtonProps>
+ */
+
 var IconButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'large' : _ref$size,

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

@@ -2,5 +2,7 @@ export const smallSize: 16;
 export const mediumSize: 24;
 export const largeSize: 32;
 export default ListItemIcon;
-declare const ListItemIcon: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from "react";
+/**
+ * @type React.ForwardRefRenderFunction<HTMLDivElement, import('@material-ui/core/ListItemIcon').ListItemIconProps>
+ */
+declare const ListItemIcon: React.ForwardRefRenderFunction<HTMLDivElement, import("@material-ui/core/ListItemIcon").ListItemIconProps>;

package/transpiled/react/ListItemIcon/index.js

@@ -8,6 +8,10 @@ export var smallSize = 16;
 export var mediumSize = 24;
 export var largeSize = 32; // We add a specific class to be able to override the style in makeOverride when used in an other component
 
+/**
+ * @type React.ForwardRefRenderFunction<HTMLDivElement, import('@material-ui/core/ListItemIcon').ListItemIconProps>
+ */
+
 var ListItemIcon = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
       props = _objectWithoutProperties(_ref, _excluded);

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

@@ -1,3 +1,5 @@
 export default ListItemText;
-declare const ListItemText: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from "react";
+/**
+ * @type React.ForwardRefRenderFunction<HTMLDivElement, import('@material-ui/core/ListItemText').ListItemTextProps>
+ */
+declare const ListItemText: React.ForwardRefRenderFunction<HTMLDivElement, import("@material-ui/core/ListItemText").ListItemTextProps<"span", "p">>;

package/transpiled/react/ListItemText/index.js

@@ -26,6 +26,10 @@ var getTypographyProp = function getTypographyProp(props, className, ellipsis) {
     }
   }, props);
 };
+/**
+ * @type React.ForwardRefRenderFunction<HTMLDivElement, import('@material-ui/core/ListItemText').ListItemTextProps>
+ */
+
 
 var ListItemText = /*#__PURE__*/forwardRef(function (props, ref) {
   var primaryText = props.primaryText,

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));
 };
 /**

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

@@ -1,5 +1,5 @@
 export default Switch;
-declare function Switch({ icon, ...props }: {
-    [x: string]: any;
-    icon: any;
-}): JSX.Element;
+/**
+ * @type JSX.Element<HTMLDivElement, import('@material-ui/core/Switch').SwitchProps>
+ */
+declare const Switch: any;

package/transpiled/react/Switch/index.js

@@ -5,6 +5,9 @@ import MuiSwitch from '@material-ui/core/Switch';
 import React from 'react';
 import Icon from "cozy-ui/transpiled/react/Icon";
 import { isTwakeTheme } from "cozy-ui/transpiled/react/helpers/isTwakeTheme";
+/**
+ * @type JSX.Element<HTMLDivElement, import('@material-ui/core/Switch').SwitchProps>
+ */
 
 var Switch = function Switch(_ref) {
   var icon = _ref.icon,