cozy-ui 122.3.0 → 122.4.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [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.4.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/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/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,