cozy-ui 133.0.0 → 134.0.0

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# [134.0.0](https://github.com/cozy/cozy-ui/compare/v133.0.1...v134.0.0) (2025-11-13)
+
+
+### Bug Fixes
+
+* **ActionsBar:** Theme type wasn't set correctly ([89f4cc7](https://github.com/cozy/cozy-ui/commit/89f4cc7))
+* **BottomSheet:** Theme type wasn't set correctly ([3f5e3e3](https://github.com/cozy/cozy-ui/commit/3f5e3e3))
+
+
+### Features
+
+* **CozyTheme:** Rename prop `settingsThemeType` in `type` ([f397f65](https://github.com/cozy/cozy-ui/commit/f397f65))
+
+
+### BREAKING CHANGES
+
+* **CozyTheme:** If you use `import CozyTheme from 'cozy-ui/transpiled/react/providers/CozyTheme'` you must replace `settingsThemeType` prop by `type`. Expl: `<CozyTheme settingsThemeType={}>` becomes `<CozyTheme type={}>`
+
+## [133.0.1](https://github.com/cozy/cozy-ui/compare/v133.0.0...v133.0.1) (2025-11-05)
+
+
+### Bug Fixes
+
+* Some export of component that doesn't exist anymore ([0667bcc](https://github.com/cozy/cozy-ui/commit/0667bcc))
+
 # [133.0.0](https://github.com/cozy/cozy-ui/compare/v132.1.0...v133.0.0) (2025-10-30)
 
 
@@ -17,7 +42,18 @@
 
 * If you use a component in that list, you must import it from `cozy-ui-plus` instead: `AppIcon, AppLinker, AppSections, AppTitle, CipherIcon, ContactPicker, Contacts/AddModal, Contacts/GroupsSelect, Contacts/Header, ContactsList, ContactsListModal, AuthenticationDialogs, Field, FileImageLoader, FilePicker, hooks/useClientErrors, IntentDialogOpener, IntentIframe, Labs/CollectionField, ListItem/ListItemByDoc, ListItem/ListItemBase, ListItem/ListItemContact, ListItem/ListItemFile, Paywall, providers/CozyTheme, providers/Intent, QualificationGrid, QualificationIcon, QualificationItem, QualificationModal, ShortcutTile, SquareAppIcon, Storage, UploadQueue, Wizard`.
 
-Please note that these components have been completely removed: `deprecated/IntentModal, deprecated/IntentOpener, deprecated/QuotaAlert`
+You can use this codemods to migrate:
+
+```
+yarn add cozy-ui-plus
+yarn global add @cozy/codemods
+yarn global add jscodeshift@0.13.1
+jscodeshift -t $(yarn global dir)/node_modules/@cozy/codemods/src/transforms/transform-ui-bc-133.js src babel --ignore-pattern=src/targets/ --extensions js,jsx,tsx --parser tsx
+```
+
+You probably will need to fix linter issue after that with something like `yarn lint --fix`.
+
+* Please note that these components have been completely removed: `deprecated/IntentModal, deprecated/IntentOpener, deprecated/QuotaAlert`
 * If you used `deprecated/ActionMenu/Actions/modif` and `deprecated/ActionMenu/Actions/viewInContacts` please use those in `/ActionsMenu/Actions` instead
 * **BarContextProvider:** If you use `BarContextProvider` you must create it yourself. Take a look to the code to copy/paste
 * **Actions:** You must `import { fetchBlobFileById, isFile } from 'cozy-client/dist/models/file'` and pass it as action's option `makeActions([], { fetchBlobFileById, isFile })` when using `print` action.
@@ -3045,7 +3081,7 @@ jscodeshift -t $(yarn global dir)/node_modules/@cozy/codemods/src/transforms/tra
 
 ### BREAKING CHANGES
 
-* **Viewer:** The `toolbarProps` attribute from Viewer property has been moved into the `componentsProps` attribute. 
+* **Viewer:** The `toolbarProps` attribute from Viewer property has been moved into the `componentsProps` attribute.
 
 You can use this codemods to migrate. **Don't forget to run js linter after the codemods.**
 
@@ -3058,7 +3094,7 @@ jscodeshift -t $(yarn global dir)/node_modules/@cozy/codemods/src/transforms/tra
 ```
 
 You can do this manually by transferring the contents of `toolbarProps` to `componentsProps` under a `toolbarProps` property.
-* **Viewer:** The `onlyOfficeProps` attribute from Viewer property has been moved into the `componentsProps` attribute. 
+* **Viewer:** The `onlyOfficeProps` attribute from Viewer property has been moved into the `componentsProps` attribute.
 
 You have to move the contents of `onlyOfficeProps ` to `componentsProps` under a `OnlyOfficeViewer` property.
 
@@ -3300,7 +3336,7 @@ set to `1`
 
 This is the list of impacted components: `MuiCozyTheme/Buttons`, `MuiCozyTheme/MuiBreadcrumbs`, `MuiCozyTheme/Dialog`, `MuiCozyTheme/Accordion`, `MuiCozyTheme/AccordionDetails`, `MuiCozyTheme/AccordionSummary`, `MuiCozyTheme/Divider`, `MuiCozyTheme/Grid`, `MuiCozyTheme/List`, `MuiCozyTheme/ListItem`, `MuiCozyTheme/ListItemIcon`, `MuiCozyTheme/ListItemSecondaryAction`, `MuiCozyTheme/ListSubheader`, `MuiCozyTheme/Menu`, `MuiCozyTheme/Switch`, `MuiCozyTheme/TextField`
 
-You can use this codemods to migrate: 
+You can use this codemods to migrate:
 
 ```
 $ yarn global add @cozy/codemods
@@ -3321,7 +3357,7 @@ $ jscodeshift -t $(yarn global dir)/node_modules/@cozy/codemods/src/transforms/t
 * This is the list of deprecated component
 `ActionMenu`, `Alerter`, `BottomDrawer`, `Button`, `ButtonAction`, `Chip`, `CompositeRow`, `GridItem`, `Infos`, `InfosCarrousel`, `InlineCard`, `IntentModal`, `IntentOpener`, `Media`, `Menus`, `Modal`, `NarrowContent`, `Overlay`, `PercentageBar`, `PercentageLine`, `PushClientButton`, `QuotaAlert`, `Radio`, `RaisedList`, `ViewStack`
 
-These components are now in a `deprecated` subfolder. Use this codemods to migrate: 
+These components are now in a `deprecated` subfolder. Use this codemods to migrate:
 
 ```
 $ yarn global add @cozy/codemods

package/package.json

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

package/react/ActionsBar/index.jsx

@@ -18,7 +18,7 @@ import DotsIcon from '../Icons/Dots'
 import Toolbar from '../Toolbar'
 import Typography from '../Typography'
 import useBreakpoints from '../providers/Breakpoints'
-import CozyTheme from '../providers/CozyTheme'
+import CozyTheme, { useCozyTheme } from '../providers/CozyTheme'
 import { useI18n } from '../providers/I18n'
 import { makeStyles } from '../styles'
 
@@ -111,6 +111,7 @@ const ActionsBar = ({
   onClose
 }) => {
   const { isMobile } = useBreakpoints()
+  const { type } = useCozyTheme()
   const anchorRef = useRef()
   const [showMenu, setShowMenu] = useState(false)
   const styles = useStyles({ isMobile })
@@ -137,7 +138,7 @@ const ActionsBar = ({
   }
 
   return (
-    <CozyTheme variant="inverted">
+    <CozyTheme type={type} variant="inverted">
       <AppBar className={styles.appBar} position="fixed" color="inherit">
         <Toolbar
           className={styles.toolbar}

package/react/BottomSheet/BottomSheet.jsx

@@ -436,9 +436,11 @@ BottomSheet.propTypes = {
 }
 
 const BottomSheetPortal = forwardRef(({ portalProps, ...props }, ref) => {
-  const { variant } = useCozyTheme()
+  const { type, variant } = useCozyTheme()
   const CozyThemeWrapper = portalProps?.disablePortal ? Fragment : CozyTheme
-  const wrapperProps = portalProps?.disablePortal ? undefined : { variant }
+  const wrapperProps = portalProps?.disablePortal
+    ? undefined
+    : { type, variant }
 
   return (
     <Portal {...portalProps}>

package/react/CozyDialogs/SpecificDialogs/Readme.md

@@ -45,64 +45,6 @@ const [open, setOpen] = useState(isTesting());
 </DemoProvider>
 ```
 
-### Authentification dialog
-
-Dialog used to authenticate a user in the cozy system. The authentication logic is implemented in the applications.
-
-```jsx
-import { AuthentificationDialog } from  'cozy-ui/transpiled/react/CozyDialogs'
-import Button from  'cozy-ui/transpiled/react/Buttons'
-import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
-import Variants from 'cozy-ui/docs/components/Variants'
-import FormControlLabel from 'cozy-ui/transpiled/react/FormControlLabel'
-import RadioGroup from 'cozy-ui/transpiled/react/RadioGroup'
-import Radio from 'cozy-ui/transpiled/react/Radios'
-import FormControl from 'cozy-ui/transpiled/react/FormControl'
-import FormLabel from 'cozy-ui/transpiled/react/FormLabel'
-
-initialState = { showModal: false };
-
-const initialVariants = [{
-  closable: true,
-  loading: false,
-  oidc: false
-}]
-
-const initialErrors = [{
-  default: true,
-  invalid_password: false,
-  server_error: false
-}]
-
-const onClose = () => setState({ showModal: false })
-
-const onAuthentification = () => {
-  alert('authentification')
-  setState({ showModal: false })
-};
-
-<Variants initialVariants={initialVariants}>
-  {variant => (
-    <Variants initialVariants={initialErrors} radio>
-      {error => (
-        <DemoProvider>
-          <Button label="Open modal" onClick={() => setState({ showModal: true })}/>
-          {state.showModal && (
-            <AuthentificationDialog
-              onSubmit={onAuthentification}
-              onClose={variant.closable && onClose}
-              error={error.invalid_password ? 'invalid_password' : error.server_error ? 'server_error' : undefined }
-              isLoading={variant.loading}
-              isOIDC={variant.oidc}
-            />
-          )}
-        </DemoProvider>
-      )}
-    </Variants>
-  )}
-</Variants>
-```
-
 ### ShortcutDialog dialog
 
 ⚠️ Must be used within AlertProvider.

package/react/index.js

@@ -68,7 +68,6 @@ export { default as Stack } from './Stack'
 export { default as PercentageLine } from './deprecated/PercentageLine'
 export { default as Popup } from './Popup'
 export { default as IconStack } from './IconStack'
-export { default as QuotaAlert } from './deprecated/QuotaAlert'
 export {
   default as ViewStack,
   ModalStack,
@@ -83,7 +82,6 @@ export {
   ExperimentalDialogTitle
 } from './Labs/ExperimentalDialog'
 
-export { default as BarContextProvider } from './BarContextProvider'
 export { default as BarTitle } from './BarTitle'
 export { default as CozyTheme } from './providers/CozyTheme'
 export { default as Paper } from './Paper'

package/react/providers/CozyTheme/index.jsx

@@ -10,7 +10,7 @@ import useMediaQuery from '../../hooks/useMediaQuery'
 export const CozyThemeContext = createContext()
 
 /**
- * @returns {{ type: 'light'|'dark', variant: 'normal'|'inverted', isLight: boolean, name: 'Twake'|'Cozy' }}
+ * @returns {{ type: 'light'|'dark', variant: 'normal'|'inverted', isLight: boolean }}
  */
 export const useCozyTheme = () => {
   const context = useContext(CozyThemeContext)
@@ -31,42 +31,32 @@ export const useCozyTheme = () => {
   return context
 }
 
-const CozyTheme = ({
-  variant,
-  className,
-  ignoreItself,
-  settingsThemeType,
-  children
-}) => {
+const CozyTheme = ({ type, variant, className, ignoreItself, children }) => {
   const uiThemeType = localStorage.getItem('ui-theme-type') // use only for cozy-ui documentation and argos screenshots
   const uiThemeVariant = localStorage.getItem('ui-theme-variant') // use only for cozy-ui documentation and argos screenshots
 
   const deviceThemeType = useMediaQuery('(prefers-color-scheme: dark)')
     ? 'dark'
     : 'light'
-  const filteredSettingsThemeType = ['light', 'dark'].includes(
-    settingsThemeType
-  )
-    ? settingsThemeType
+  const filteredSettingsThemeType = ['light', 'dark'].includes(type)
+    ? type
     : undefined
 
-  const selfThemeType =
-    uiThemeType || filteredSettingsThemeType || deviceThemeType
-  const selfThemeVariant = uiThemeVariant || variant
+  const _type = uiThemeType || filteredSettingsThemeType || deviceThemeType
+  const _variant = uiThemeVariant || variant
 
   return (
     <CozyThemeContext.Provider
       value={{
-        type: selfThemeType,
-        variant: selfThemeVariant,
-        isLight: selfThemeType === 'light'
+        type: _type,
+        variant: _variant,
+        isLight: _type === 'light'
       }}
     >
-      <MuiCozyTheme type={selfThemeType} variant={selfThemeVariant}>
+      <MuiCozyTheme type={_type} variant={_variant}>
         <div
           className={cx(className, {
-            [`TwakeTheme--${selfThemeType}-${selfThemeVariant}`]:
-              Boolean(selfThemeVariant),
+            [`TwakeTheme--${_type}-${_variant}`]: Boolean(_variant),
             'u-dc': ignoreItself
           })}
         >
@@ -78,11 +68,10 @@ const CozyTheme = ({
 }
 
 CozyTheme.propTypes = {
+  type: PropTypes.oneOf(['light', 'dark', 'auto']),
   variant: PropTypes.oneOf(['normal', 'inverted']),
   /** Causes this element's children to appear as if they were direct children of the element's parent, ignoring the element itself. */
   ignoreItself: PropTypes.bool,
-  /** Theme type from io.cozy.settings.instance */
-  settingsThemeType: PropTypes.oneOf(['light', 'dark', 'auto']),
   className: PropTypes.string,
   children: PropTypes.node
 }

package/transpiled/react/ActionsBar/index.js

@@ -18,7 +18,7 @@ import DotsIcon from "cozy-ui/transpiled/react/Icons/Dots";
 import Toolbar from "cozy-ui/transpiled/react/Toolbar";
 import Typography from "cozy-ui/transpiled/react/Typography";
 import useBreakpoints from "cozy-ui/transpiled/react/providers/Breakpoints";
-import CozyTheme from "cozy-ui/transpiled/react/providers/CozyTheme";
+import CozyTheme, { useCozyTheme } from "cozy-ui/transpiled/react/providers/CozyTheme";
 import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
 import { makeStyles } from "cozy-ui/transpiled/react/styles";
 var useStyles = makeStyles({
@@ -121,6 +121,9 @@ var ActionsBar = function ActionsBar(_ref5) {
   var _useBreakpoints2 = useBreakpoints(),
       isMobile = _useBreakpoints2.isMobile;
 
+  var _useCozyTheme = useCozyTheme(),
+      type = _useCozyTheme.type;
+
   var anchorRef = useRef();
 
   var _useState = useState(false),
@@ -147,6 +150,7 @@ var ActionsBar = function ActionsBar(_ref5) {
   };
 
   return /*#__PURE__*/React.createElement(CozyTheme, {
+    type: type,
     variant: "inverted"
   }, /*#__PURE__*/React.createElement(AppBar, {
     className: styles.appBar,

package/transpiled/react/BottomSheet/BottomSheet.js

@@ -436,10 +436,12 @@ var BottomSheetPortal = /*#__PURE__*/forwardRef(function (_ref4, ref) {
       props = _objectWithoutProperties(_ref4, _excluded);
 
   var _useCozyTheme2 = useCozyTheme(),
+      type = _useCozyTheme2.type,
       variant = _useCozyTheme2.variant;
 
   var CozyThemeWrapper = portalProps !== null && portalProps !== void 0 && portalProps.disablePortal ? Fragment : CozyTheme;
   var wrapperProps = portalProps !== null && portalProps !== void 0 && portalProps.disablePortal ? undefined : {
+    type: type,
     variant: variant
   };
   return /*#__PURE__*/React.createElement(Portal, portalProps, /*#__PURE__*/React.createElement(CozyThemeWrapper, wrapperProps, /*#__PURE__*/React.createElement(BottomSheet, _extends({

package/transpiled/react/index.js

@@ -55,12 +55,10 @@ export { default as Stack } from './Stack';
 export { default as PercentageLine } from './deprecated/PercentageLine';
 export { default as Popup } from './Popup';
 export { default as IconStack } from './IconStack';
-export { default as QuotaAlert } from './deprecated/QuotaAlert';
 export { default as ViewStack, ModalStack, useViewStack, ViewStackContext } from './deprecated/ViewStack';
 export { default as DateMonthPicker } from './DateMonthPicker';
 export { default as NestedSelect, NestedSelectModal } from './NestedSelect';
 export { default as ExperimentalDialog, ExperimentalDialogActions, ExperimentalDialogTitle } from './Labs/ExperimentalDialog';
-export { default as BarContextProvider } from './BarContextProvider';
 export { default as BarTitle } from './BarTitle';
 export { default as CozyTheme } from './providers/CozyTheme';
 export { default as Paper } from './Paper';

package/transpiled/react/providers/CozyTheme/index.d.ts

@@ -3,22 +3,21 @@ export function useCozyTheme(): {
     type: 'light' | 'dark';
     variant: 'normal' | 'inverted';
     isLight: boolean;
-    name: 'Twake' | 'Cozy';
 };
 export default CozyTheme;
 import React from "react";
-declare function CozyTheme({ variant, className, ignoreItself, settingsThemeType, children }: {
+declare function CozyTheme({ type, variant, className, ignoreItself, children }: {
+    type: any;
     variant: any;
     className: any;
     ignoreItself: any;
-    settingsThemeType: any;
     children: any;
 }): JSX.Element;
 declare namespace CozyTheme {
     namespace propTypes {
+        const type: PropTypes.Requireable<string>;
         const variant: PropTypes.Requireable<string>;
         const ignoreItself: PropTypes.Requireable<boolean>;
-        const settingsThemeType: PropTypes.Requireable<string>;
         const className: PropTypes.Requireable<string>;
         const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     }

package/transpiled/react/providers/CozyTheme/index.js

@@ -7,7 +7,7 @@ import MuiCozyTheme from "cozy-ui/transpiled/react/MuiCozyTheme";
 import useMediaQuery from "cozy-ui/transpiled/react/hooks/useMediaQuery";
 export var CozyThemeContext = /*#__PURE__*/createContext();
 /**
- * @returns {{ type: 'light'|'dark', variant: 'normal'|'inverted', isLight: boolean, name: 'Twake'|'Cozy' }}
+ * @returns {{ type: 'light'|'dark', variant: 'normal'|'inverted', isLight: boolean }}
  */
 
 export var useCozyTheme = function useCozyTheme() {
@@ -28,41 +28,42 @@ export var useCozyTheme = function useCozyTheme() {
 var CozyTheme = function CozyTheme(_ref) {
   var _cx;
 
-  var variant = _ref.variant,
+  var type = _ref.type,
+      variant = _ref.variant,
       className = _ref.className,
       ignoreItself = _ref.ignoreItself,
-      settingsThemeType = _ref.settingsThemeType,
       children = _ref.children;
   var uiThemeType = localStorage.getItem('ui-theme-type'); // use only for cozy-ui documentation and argos screenshots
 
   var uiThemeVariant = localStorage.getItem('ui-theme-variant'); // use only for cozy-ui documentation and argos screenshots
 
   var deviceThemeType = useMediaQuery('(prefers-color-scheme: dark)') ? 'dark' : 'light';
-  var filteredSettingsThemeType = ['light', 'dark'].includes(settingsThemeType) ? settingsThemeType : undefined;
-  var selfThemeType = uiThemeType || filteredSettingsThemeType || deviceThemeType;
-  var selfThemeVariant = uiThemeVariant || variant;
+  var filteredSettingsThemeType = ['light', 'dark'].includes(type) ? type : undefined;
+
+  var _type = uiThemeType || filteredSettingsThemeType || deviceThemeType;
+
+  var _variant = uiThemeVariant || variant;
+
   return /*#__PURE__*/React.createElement(CozyThemeContext.Provider, {
     value: {
-      type: selfThemeType,
-      variant: selfThemeVariant,
-      isLight: selfThemeType === 'light'
+      type: _type,
+      variant: _variant,
+      isLight: _type === 'light'
     }
   }, /*#__PURE__*/React.createElement(MuiCozyTheme, {
-    type: selfThemeType,
-    variant: selfThemeVariant
+    type: _type,
+    variant: _variant
   }, /*#__PURE__*/React.createElement("div", {
-    className: cx(className, (_cx = {}, _defineProperty(_cx, "TwakeTheme--".concat(selfThemeType, "-").concat(selfThemeVariant), Boolean(selfThemeVariant)), _defineProperty(_cx, 'u-dc', ignoreItself), _cx))
+    className: cx(className, (_cx = {}, _defineProperty(_cx, "TwakeTheme--".concat(_type, "-").concat(_variant), Boolean(_variant)), _defineProperty(_cx, 'u-dc', ignoreItself), _cx))
   }, children)));
 };
 
 CozyTheme.propTypes = {
+  type: PropTypes.oneOf(['light', 'dark', 'auto']),
   variant: PropTypes.oneOf(['normal', 'inverted']),
 
   /** Causes this element's children to appear as if they were direct children of the element's parent, ignoring the element itself. */
   ignoreItself: PropTypes.bool,
-
-  /** Theme type from io.cozy.settings.instance */
-  settingsThemeType: PropTypes.oneOf(['light', 'dark', 'auto']),
   className: PropTypes.string,
   children: PropTypes.node
 };