cozy-ui 119.1.0 → 120.0.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [120.0.0](https://github.com/cozy/cozy-ui/compare/v119.2.0...v120.0.0) (2025-03-13)
+
+
+### Features
+
+* Set pdf-lib as a peerDep ([15604af](https://github.com/cozy/cozy-ui/commit/15604af))
+
+
+### BREAKING CHANGES
+
+* If you use print action, please add pdf-lib as a dep in your app because it is now a peerDep in cozy-ui. `yarn add pdf-lib@1.17.1`
+
+# [119.2.0](https://github.com/cozy/cozy-ui/compare/v119.1.0...v119.2.0) (2025-03-12)
+
+
+### Features
+
+* **Switch:** Adjust style component ([4e89011](https://github.com/cozy/cozy-ui/commit/4e89011))
+
 # [119.1.0](https://github.com/cozy/cozy-ui/compare/v119.0.3...v119.1.0) (2025-03-12)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "119.1.0",
+  "version": "120.0.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -126,6 +126,7 @@
     "mini-css-extract-plugin": "0.6.0",
     "nodemon": "1.19.4",
     "npm-run-all": "4.1.5",
+    "pdf-lib": "1.17.1",
     "postcss-cli": "6.1.3",
     "postcss-loader": "2.1.6",
     "prettier": "2.6.0",
@@ -172,7 +173,6 @@
     "mui-bottom-sheet": "https://github.com/cozy/mui-bottom-sheet.git#v1.0.9",
     "node-polyglot": "^2.5.0",
     "normalize.css": "^8.0.0",
-    "pdf-lib": "1.17.1",
     "react-chartjs-2": "4.1.0",
     "react-markdown": "^4.0.8",
     "react-popper": "^2.2.3",
@@ -186,9 +186,15 @@
     "cozy-device-helper": "^2.0.0",
     "cozy-flags": ">=2.10.1",
     "cozy-intent": ">=2.29.1",
+    "pdf-lib": "1.17.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
   },
+  "peerDependenciesMeta": {
+    "pdf-lib": {
+      "optional": true
+    }
+  },
   "eslintConfig": {
     "extends": [
       "eslint-config-cozy-app"

package/react/ActionsMenu/Readme.md

@@ -4,6 +4,25 @@ You can pass a reference to a custom DOM element through the `ref` prop to attac
 
 A header `ActionsMenuMobileHeader` can be used to provide context on the menu actions. Since on desktop, we display a popper and not a `BottomSheet`, context for the user is not lost, so the header would be redundant. This is why it is not rendered unless we are on mobile.
 
+## Available actions
+
+cozy-ui exposes a list of ready-to-use action : 
+- makeActions
+- divider
+- modify
+- smsTo
+- call
+- emailTo
+- print (requires to add `pdf-lib` in the app)
+- download
+- addToFavorites
+- removeFromFavorites
+- viewInContacts
+- viewInDrive
+- copyToClipboard
+- editAttribute
+- others
+
 ### How to create and use actions
 
 An action is a simple function that returns an object with specific keys:

package/react/MuiCozyTheme/overrides/twake/makeLightNormalOverrides.js

@@ -10,6 +10,60 @@ export const makeLightNormalTwakeOverrides = theme => {
         padding: 8
       }
     },
+    MuiSwitch: {
+      root: {
+        width: 50,
+        height: 40,
+        padding: '6px 1px'
+      },
+      switchBase: {
+        padding: 5,
+        top: 5,
+        color: theme.palette.text.icon,
+        '& .cozySwitchThumb': {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: 20,
+          height: 20,
+          borderRadius: '50%',
+          boxShadow: theme.shadows[1],
+          backgroundColor: theme.palette.common.white
+        }
+      },
+      track: {
+        width: 44,
+        height: '100%',
+        borderRadius: 100
+      },
+      thumb: {
+        width: 20,
+        height: 20
+      },
+      colorPrimary: {
+        '&$disabled + $track': {
+          opacity: 1,
+          backgroundColor: theme.palette.action.disabledBackground
+        }
+      },
+      colorSecondary: {
+        '&$checked': {
+          color: theme.palette.success.main
+        },
+        '&$disabled + $track': {
+          opacity: 1,
+          backgroundColor: theme.palette.action.disabledBackground
+        }
+      },
+      disabled: {
+        '&$checked + $track': {
+          backgroundColor: theme.palette.action.disabledBackground
+        },
+        '& .cozySwitchThumb': {
+          backgroundColor: theme.palette.background.default
+        }
+      }
+    },
     MuiButton: {
       root: {
         borderRadius: 100,

package/react/Switch/Readme.md

@@ -1,14 +1,13 @@
 Used to present a binary choice to the user.
 
-Uses [Material UI's Switch](https://material-ui.com/components/switches/).
-
 ```jsx
 import { useState, useCallback } from 'react'
-import { Media, Img } from 'cozy-ui/transpiled/react/deprecated/Media'
 import Switch from 'cozy-ui/transpiled/react/Switch'
 import Typography from "cozy-ui/transpiled/react/Typography"
 import Stack from "cozy-ui/transpiled/react/Stack"
-import Box from '@material-ui/core/Box'
+import Box from 'cozy-ui/transpiled/react/Box'
+import CheckIcon from 'cozy-ui/transpiled/react/Icons/Check'
+import FormControlLabel from 'cozy-ui/transpiled/react/FormControlLabel'
 
 initialState = {
   switch0: true,
@@ -22,26 +21,54 @@ const StateSwitch = ({ id, color }) => {
   return <Switch
     color={color}
     checked={checked}
+    {...(isTwakeTheme() && { icon: CheckIcon })}
     onChange={handleClick}
   />
 }
 
-const Switches = () => {
-  return <Stack spacing='xs'>
-    {['primary', 'secondary', 'default'].map((color, i) => {
-      return (
-        <Box display='flex' alignItems='center' key={i}>
-          <Typography variant='body1' display="inline">
-            { color }
-          </Typography>
-          <StateSwitch id={i} color={color} />
-        </Box>
-      )
-    })}
-  </Stack>
-}
-
 ;
 
-<Switches />
+<Stack spacing='xs'>
+  {['primary', 'secondary', 'default'].map((color, i) => {
+    return (
+      <Box display='flex' alignItems='center' key={i}>
+        <Typography variant='body1' display="inline">{ color }</Typography>
+        <StateSwitch id={i} color={color} />
+      </Box>
+    )
+  })}
+  <FormControlLabel control={<Switch color="primary" />} label="With label" />
+  <FormControlLabel control={<Switch color="primary" checked />} label="With label" />
+  <br />
+  <FormControlLabel control={<Switch color="primary" disabled />} label="Primary, disabled with label" />
+  <FormControlLabel control={<Switch color="primary" checked disabled />} label="Primary, checked - disabled with label" />
+  <br />
+  <FormControlLabel
+    label="Primary, disabled with label"
+    control={
+      <Switch
+        color="primary"
+        {...(isTwakeTheme() && { icon: CheckIcon })}
+        disabled
+      />
+    }
+  />
+  <FormControlLabel
+    label="Primary, checked - disabled with label"
+    control={
+      <Switch
+        color="primary"
+        {...(isTwakeTheme() && { icon: CheckIcon })}
+        checked
+        disabled
+      />
+    }
+  />
+  <br />
+  <FormControlLabel control={<Switch color="secondary" disabled />} label="Secondary, checked with label" />
+  <FormControlLabel control={<Switch color="secondary" checked disabled />} label="Secondary, checked - disabled with label" />
+  <br />
+  <FormControlLabel control={<Switch disabled />} label="Default, checked with label" />
+  <FormControlLabel control={<Switch checked disabled />} label="Default, checked - disabled with label" />
+</Stack>
 ```

package/react/Switch/index.jsx

@@ -1,3 +1,22 @@
-import Switch from '@material-ui/core/Switch'
+import MuiSwitch from '@material-ui/core/Switch'
+import React from 'react'
+
+import Icon from '../Icon'
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
+
+const Switch = ({ icon, ...props }) => {
+  const _icon = (
+    <span className="cozySwitchThumb">
+      {!!icon && <Icon icon={icon} size={14} />}
+    </span>
+  )
+
+  return (
+    <MuiSwitch
+      {...props}
+      {...(isTwakeTheme() && { icon: _icon, checkedIcon: _icon })}
+    />
+  )
+}
 
 export default Switch

package/transpiled/react/MuiCozyTheme/overrides/twake/makeDarkInvertedOverrides.d.ts

@@ -1417,6 +1417,60 @@ export function makeDarkInvertedTwakeOverrides(theme: any): {
             padding: number;
         };
     };
+    MuiSwitch: {
+        root: {
+            width: number;
+            height: number;
+            padding: string;
+        };
+        switchBase: {
+            padding: number;
+            top: number;
+            color: any;
+            '& .cozySwitchThumb': {
+                display: string;
+                alignItems: string;
+                justifyContent: string;
+                width: number;
+                height: number;
+                borderRadius: string;
+                boxShadow: any;
+                backgroundColor: any;
+            };
+        };
+        track: {
+            width: number;
+            height: string;
+            borderRadius: number;
+        };
+        thumb: {
+            width: number;
+            height: number;
+        };
+        colorPrimary: {
+            '&$disabled + $track': {
+                opacity: number;
+                backgroundColor: any;
+            };
+        };
+        colorSecondary: {
+            '&$checked': {
+                color: any;
+            };
+            '&$disabled + $track': {
+                opacity: number;
+                backgroundColor: any;
+            };
+        };
+        disabled: {
+            '&$checked + $track': {
+                backgroundColor: any;
+            };
+            '& .cozySwitchThumb': {
+                backgroundColor: any;
+            };
+        };
+    };
     MuiButton: {
         root: {
             borderRadius: number;

package/transpiled/react/MuiCozyTheme/overrides/twake/makeDarkNormalOverrides.d.ts

@@ -1417,6 +1417,60 @@ export function makeDarkNormalTwakeOverrides(theme: any): {
             padding: number;
         };
     };
+    MuiSwitch: {
+        root: {
+            width: number;
+            height: number;
+            padding: string;
+        };
+        switchBase: {
+            padding: number;
+            top: number;
+            color: any;
+            '& .cozySwitchThumb': {
+                display: string;
+                alignItems: string;
+                justifyContent: string;
+                width: number;
+                height: number;
+                borderRadius: string;
+                boxShadow: any;
+                backgroundColor: any;
+            };
+        };
+        track: {
+            width: number;
+            height: string;
+            borderRadius: number;
+        };
+        thumb: {
+            width: number;
+            height: number;
+        };
+        colorPrimary: {
+            '&$disabled + $track': {
+                opacity: number;
+                backgroundColor: any;
+            };
+        };
+        colorSecondary: {
+            '&$checked': {
+                color: any;
+            };
+            '&$disabled + $track': {
+                opacity: number;
+                backgroundColor: any;
+            };
+        };
+        disabled: {
+            '&$checked + $track': {
+                backgroundColor: any;
+            };
+            '& .cozySwitchThumb': {
+                backgroundColor: any;
+            };
+        };
+    };
     MuiButton: {
         root: {
             borderRadius: number;

package/transpiled/react/MuiCozyTheme/overrides/twake/makeLightInvertedOverrides.d.ts

@@ -1417,6 +1417,60 @@ export function makeLightInvertedTwakeOverrides(theme: any): {
             padding: number;
         };
     };
+    MuiSwitch: {
+        root: {
+            width: number;
+            height: number;
+            padding: string;
+        };
+        switchBase: {
+            padding: number;
+            top: number;
+            color: any;
+            '& .cozySwitchThumb': {
+                display: string;
+                alignItems: string;
+                justifyContent: string;
+                width: number;
+                height: number;
+                borderRadius: string;
+                boxShadow: any;
+                backgroundColor: any;
+            };
+        };
+        track: {
+            width: number;
+            height: string;
+            borderRadius: number;
+        };
+        thumb: {
+            width: number;
+            height: number;
+        };
+        colorPrimary: {
+            '&$disabled + $track': {
+                opacity: number;
+                backgroundColor: any;
+            };
+        };
+        colorSecondary: {
+            '&$checked': {
+                color: any;
+            };
+            '&$disabled + $track': {
+                opacity: number;
+                backgroundColor: any;
+            };
+        };
+        disabled: {
+            '&$checked + $track': {
+                backgroundColor: any;
+            };
+            '& .cozySwitchThumb': {
+                backgroundColor: any;
+            };
+        };
+    };
     MuiButton: {
         root: {
             borderRadius: number;

package/transpiled/react/MuiCozyTheme/overrides/twake/makeLightNormalOverrides.d.ts

@@ -1417,6 +1417,60 @@ export function makeLightNormalTwakeOverrides(theme: any): {
             padding: number;
         };
     };
+    MuiSwitch: {
+        root: {
+            width: number;
+            height: number;
+            padding: string;
+        };
+        switchBase: {
+            padding: number;
+            top: number;
+            color: any;
+            '& .cozySwitchThumb': {
+                display: string;
+                alignItems: string;
+                justifyContent: string;
+                width: number;
+                height: number;
+                borderRadius: string;
+                boxShadow: any;
+                backgroundColor: any;
+            };
+        };
+        track: {
+            width: number;
+            height: string;
+            borderRadius: number;
+        };
+        thumb: {
+            width: number;
+            height: number;
+        };
+        colorPrimary: {
+            '&$disabled + $track': {
+                opacity: number;
+                backgroundColor: any;
+            };
+        };
+        colorSecondary: {
+            '&$checked': {
+                color: any;
+            };
+            '&$disabled + $track': {
+                opacity: number;
+                backgroundColor: any;
+            };
+        };
+        disabled: {
+            '&$checked + $track': {
+                backgroundColor: any;
+            };
+            '& .cozySwitchThumb': {
+                backgroundColor: any;
+            };
+        };
+    };
     MuiButton: {
         root: {
             borderRadius: number;

package/transpiled/react/MuiCozyTheme/overrides/twake/makeLightNormalOverrides.js

@@ -9,6 +9,60 @@ export var makeLightNormalTwakeOverrides = function makeLightNormalTwakeOverride
           padding: 8
         }
       },
+      MuiSwitch: {
+        root: {
+          width: 50,
+          height: 40,
+          padding: '6px 1px'
+        },
+        switchBase: {
+          padding: 5,
+          top: 5,
+          color: theme.palette.text.icon,
+          '& .cozySwitchThumb': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 20,
+            height: 20,
+            borderRadius: '50%',
+            boxShadow: theme.shadows[1],
+            backgroundColor: theme.palette.common.white
+          }
+        },
+        track: {
+          width: 44,
+          height: '100%',
+          borderRadius: 100
+        },
+        thumb: {
+          width: 20,
+          height: 20
+        },
+        colorPrimary: {
+          '&$disabled + $track': {
+            opacity: 1,
+            backgroundColor: theme.palette.action.disabledBackground
+          }
+        },
+        colorSecondary: {
+          '&$checked': {
+            color: theme.palette.success.main
+          },
+          '&$disabled + $track': {
+            opacity: 1,
+            backgroundColor: theme.palette.action.disabledBackground
+          }
+        },
+        disabled: {
+          '&$checked + $track': {
+            backgroundColor: theme.palette.action.disabledBackground
+          },
+          '& .cozySwitchThumb': {
+            backgroundColor: theme.palette.background.default
+          }
+        }
+      },
       MuiButton: {
         root: {
           borderRadius: 100,

package/transpiled/react/Switch/index.js

@@ -1,2 +1,26 @@
-import Switch from '@material-ui/core/Switch';
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["icon"];
+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";
+
+var Switch = function Switch(_ref) {
+  var icon = _ref.icon,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _icon = /*#__PURE__*/React.createElement("span", {
+    className: "cozySwitchThumb"
+  }, !!icon && /*#__PURE__*/React.createElement(Icon, {
+    icon: icon,
+    size: 14
+  }));
+
+  return /*#__PURE__*/React.createElement(MuiSwitch, _extends({}, props, isTwakeTheme() && {
+    icon: _icon,
+    checkedIcon: _icon
+  }));
+};
+
 export default Switch;