cozy-ui 140.6.0 → 142.0.1

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+## [142.0.1](https://github.com/cozy/cozy-ui/compare/v142.0.0...v142.0.1) (2026-09-17)
+
+
+### Bug Fixes
+
+* Dialog doc ([1d28879](https://github.com/cozy/cozy-ui/commit/1d28879))
+
+# [142.0.0](https://github.com/cozy/cozy-ui/compare/v141.0.0...v142.0.0) (2026-09-03)
+
+
+### Features
+
+* Build docs with transpiled [@react-spring](https://github.com/react-spring) ([07af455](https://github.com/cozy/cozy-ui/commit/07af455))
+* Remove ViewStack and InfosCarrousel ([db3eeef](https://github.com/cozy/cozy-ui/commit/db3eeef))
+* Update mui-bottom-sheet ([384f167](https://github.com/cozy/cozy-ui/commit/384f167))
+* Update react-markdown ([7eb612c](https://github.com/cozy/cozy-ui/commit/7eb612c))
+
+
+### BREAKING CHANGES
+
+* ViewStack and InfosCarrousel have been removed without replacement.
+
+# [141.0.0](https://github.com/cozy/cozy-ui/compare/v140.6.0...v141.0.0) (2026-07-30)
+
+
+* fix(breakpoints)!: target the requesting iframe ([b222ae2](https://github.com/cozy/cozy-ui/commit/b222ae2)), closes [#2949](https://github.com/cozy/cozy-ui/issues/2949)
+
+
+### BREAKING CHANGES
+
+* replace the old hook usage with:
+
+const { iframeWindow } = useIframeConnection({ parentBasedIframe })
+useIframeToSendWidth({ iframeWindow })
+
 # [140.6.0](https://github.com/cozy/cozy-ui/compare/v140.5.2...v140.6.0) (2026-07-29)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "140.6.0",
+  "version": "142.0.1",
   "description": "Cozy apps UI SDK",
   "engines": {
     "node": "24.x"
@@ -169,18 +169,18 @@
     "date-fns": "2.30.0",
     "hammerjs": "^2.0.8",
     "intersection-observer": "0.11.0",
-    "mui-bottom-sheet": "https://github.com/cozy/mui-bottom-sheet.git#v1.0.9",
+    "mui-bottom-sheet": "https://github.com/cozy/mui-bottom-sheet.git#v1.0.10",
     "node-polyglot": "^2.5.0",
     "normalize.css": "^8.0.0",
     "patch-package": "^8.0.0",
     "pdf-lib": "1.17.1",
     "react-colorful": "5.7.0",
-    "react-markdown": "^4.0.8",
+    "react-markdown": "^6.0.3",
     "react-popper": "^2.2.3",
     "react-remove-scroll": "^2.4.0",
     "react-select": "^4.3.0",
-    "react-swipeable-views": "^0.13.3",
     "react-virtuoso": "^4.13.0",
+    "remark-gfm": "^1.0.0",
     "rooks": "7.14.1"
   },
   "peerDependencies": {

package/react/Dialog/Readme.md

@@ -18,9 +18,7 @@ import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction'
-import { FileTypeFolder, FileTypeText, Icon } from '@linagora/twake-icons'
-
-import { Dots } from '@linagora/twake-icons'
+import { FileTypeFolder, FileTypeText, Icon, Dots } from '@linagora/twake-icons'
 
 const handleClose = () => setState({ modalOpened: !state.modalOpened })
 

package/react/Markdown/index.jsx

@@ -1,31 +1,40 @@
 import React from 'react'
 import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
 
 import Link from '../Link'
 import Typography from '../Typography'
 
+const heading =
+  level =>
+  ({ children }) =>
+    (
+      <Typography variant={`h${level}`} className="u-mb-1">
+        {children}
+      </Typography>
+    )
+
+const components = {
+  a: ({ children, href }) => (
+    <Link href={href} rel="noreferrer" target="_blank">
+      {children}
+    </Link>
+  ),
+  p: ({ children }) => (
+    <Typography variant="body1" className="u-mb-1">
+      {children}
+    </Typography>
+  ),
+  ...Object.fromEntries(
+    [1, 2, 3, 4, 5, 6].map(level => [`h${level}`, heading(level)])
+  )
+}
+
 const Markdown = ({ content }) => {
   return (
-    <ReactMarkdown
-      source={content}
-      renderers={{
-        link: ({ children, href }) => (
-          <Link href={href} rel="noreferrer" target="_blank">
-            {children}
-          </Link>
-        ),
-        heading: ({ children, level }) => (
-          <Typography variant={`h${level}`} className="u-mb-1">
-            {children}
-          </Typography>
-        ),
-        paragraph: ({ children }) => (
-          <Typography variant="body1" className="u-mb-1">
-            {children}
-          </Typography>
-        )
-      }}
-    />
+    <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
+      {content}
+    </ReactMarkdown>
   )
 }
 

package/react/Markdown/index.spec.jsx

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+
+import Markdown from '.'
+
+describe('Markdown', () => {
+  it('renders headings and paragraphs', () => {
+    render(<Markdown content={'# Title\n\nSome text.'} />)
+
+    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Title')
+    expect(screen.getByText('Some text.')).toBeInTheDocument()
+  })
+
+  it('renders links that open in a new tab', () => {
+    render(<Markdown content="[cozy](https://cozy.io)" />)
+
+    const link = screen.getByRole('link', { name: 'cozy' })
+
+    expect(link).toHaveAttribute('href', 'https://cozy.io')
+    expect(link).toHaveAttribute('target', '_blank')
+  })
+
+  it('renders strikethrough', () => {
+    render(<Markdown content="~~gone~~" />)
+
+    expect(screen.getByText('gone')).toBeInTheDocument()
+    expect(document.querySelector('del')).toBeInTheDocument()
+  })
+})

package/react/providers/Breakpoints/index.jsx

@@ -13,8 +13,8 @@ export const BreakpointsProvider = ({ parentBasedIframe, children }) => {
   const [breakpoints, setBreakpoints] = useState(
     getBreakpointsStatus(breakpointDefs)
   )
-  const { hasIframe } = useIframeConnection({ parentBasedIframe })
-  useIframeToSendWidth({ hasIframe })
+  const { iframeWindow } = useIframeConnection({ parentBasedIframe })
+  useIframeToSendWidth({ iframeWindow })
   const { parentBreakpoints } = useParentBreakpoints({ parentBasedIframe })
 
   useEffect(() => {

package/react/providers/Breakpoints/index.spec.jsx

@@ -0,0 +1,27 @@
+import { act, render } from '@testing-library/react'
+import React from 'react'
+
+import { BreakpointsProvider } from './index'
+
+it('sends parent breakpoints to the requesting iframe', () => {
+  const iframeWindow = { postMessage: jest.fn() }
+  const message = new MessageEvent('message', {
+    data: 'UI-breakpoints-needParentBreakpoints'
+  })
+  Object.defineProperty(message, 'source', { value: iframeWindow })
+
+  render(
+    <BreakpointsProvider>
+      <div />
+    </BreakpointsProvider>
+  )
+
+  act(() => {
+    window.dispatchEvent(message)
+  })
+
+  expect(iframeWindow.postMessage).toHaveBeenCalledWith(
+    `UI-breakpoints-value:${window.innerWidth}`,
+    '*'
+  )
+})

package/react/providers/Breakpoints/useIframeConnection.jsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
 import { isInsideIframe } from '../../helpers/breakpoints'
 
 export const useIframeConnection = ({ parentBasedIframe }) => {
-  const [hasIframe, setHasIframe] = useState(false)
+  const [iframeWindow, setIframeWindow] = useState(null)
 
   const isIframe = parentBasedIframe && isInsideIframe()
 
@@ -11,7 +11,7 @@ export const useIframeConnection = ({ parentBasedIframe }) => {
   useEffect(() => {
     const handleMessage = ev => {
       if (ev.data === 'UI-breakpoints-needParentBreakpoints') {
-        setHasIframe(true)
+        setIframeWindow(ev.source)
       }
     }
 
@@ -27,5 +27,5 @@ export const useIframeConnection = ({ parentBasedIframe }) => {
     }
   }, [isIframe])
 
-  return { hasIframe }
+  return { iframeWindow }
 }

package/react/providers/Breakpoints/useIframeToSendWidth.jsx

@@ -1,27 +1,19 @@
 import throttle from 'lodash/throttle'
 import { useEffect } from 'react'
 
-/**
- * To send window innerWidth to first iframe
- * @returns
- */
-const sendWidthToIframe = () =>
-  window.frames[1].postMessage(`UI-breakpoints-value:${window.innerWidth}`, '*')
+const sendWidthToIframe = iframeWindow =>
+  iframeWindow?.postMessage(`UI-breakpoints-value:${window.innerWidth}`, '*')
 
-export const useIframeToSendWidth = ({ hasIframe }) => {
+export const useIframeToSendWidth = ({ iframeWindow }) => {
   // parent window send its innerWidth
   useEffect(() => {
-    if (hasIframe) {
-      sendWidthToIframe()
-    }
-  }, [hasIframe])
+    sendWidthToIframe(iframeWindow)
+  }, [iframeWindow])
 
   // parent window send its innerWidth on resize
   useEffect(() => {
     const handleResize = throttle(() => {
-      if (hasIframe) {
-        sendWidthToIframe()
-      }
+      sendWidthToIframe(iframeWindow)
     }, 100)
 
     window.addEventListener('resize', handleResize)
@@ -29,5 +21,5 @@ export const useIframeToSendWidth = ({ hasIframe }) => {
     return () => {
       window.removeEventListener('resize', handleResize)
     }
-  }, [hasIframe])
+  }, [iframeWindow])
 }

package/transpiled/react/Markdown/index.js

@@ -1,39 +1,52 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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 React from 'react';
 import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 import Link from "cozy-ui/transpiled/react/Link";
 import Typography from "cozy-ui/transpiled/react/Typography";
 
-var Markdown = function Markdown(_ref) {
-  var content = _ref.content;
+var heading = function heading(level) {
+  return function (_ref) {
+    var children = _ref.children;
+    return /*#__PURE__*/React.createElement(Typography, {
+      variant: "h".concat(level),
+      className: "u-mb-1"
+    }, children);
+  };
+};
+
+var components = _objectSpread({
+  a: function a(_ref2) {
+    var children = _ref2.children,
+        href = _ref2.href;
+    return /*#__PURE__*/React.createElement(Link, {
+      href: href,
+      rel: "noreferrer",
+      target: "_blank"
+    }, children);
+  },
+  p: function p(_ref3) {
+    var children = _ref3.children;
+    return /*#__PURE__*/React.createElement(Typography, {
+      variant: "body1",
+      className: "u-mb-1"
+    }, children);
+  }
+}, Object.fromEntries([1, 2, 3, 4, 5, 6].map(function (level) {
+  return ["h".concat(level), heading(level)];
+})));
+
+var Markdown = function Markdown(_ref4) {
+  var content = _ref4.content;
   return /*#__PURE__*/React.createElement(ReactMarkdown, {
-    source: content,
-    renderers: {
-      link: function link(_ref2) {
-        var children = _ref2.children,
-            href = _ref2.href;
-        return /*#__PURE__*/React.createElement(Link, {
-          href: href,
-          rel: "noreferrer",
-          target: "_blank"
-        }, children);
-      },
-      heading: function heading(_ref3) {
-        var children = _ref3.children,
-            level = _ref3.level;
-        return /*#__PURE__*/React.createElement(Typography, {
-          variant: "h".concat(level),
-          className: "u-mb-1"
-        }, children);
-      },
-      paragraph: function paragraph(_ref4) {
-        var children = _ref4.children;
-        return /*#__PURE__*/React.createElement(Typography, {
-          variant: "body1",
-          className: "u-mb-1"
-        }, children);
-      }
-    }
-  });
+    remarkPlugins: [remarkGfm],
+    components: components
+  }, content);
 };
 
 export default Markdown;

package/transpiled/react/Markdown/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -19,10 +19,10 @@ export var BreakpointsProvider = function BreakpointsProvider(_ref) {
   var _useIframeConnection = useIframeConnection({
     parentBasedIframe: parentBasedIframe
   }),
-      hasIframe = _useIframeConnection.hasIframe;
+      iframeWindow = _useIframeConnection.iframeWindow;
 
   useIframeToSendWidth({
-    hasIframe: hasIframe
+    iframeWindow: iframeWindow
   });
 
   var _useParentBreakpoints = useParentBreakpoints({

package/transpiled/react/providers/Breakpoints/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/transpiled/react/providers/Breakpoints/useIframeConnection.d.ts

@@ -1,5 +1,5 @@
 export function useIframeConnection({ parentBasedIframe }: {
     parentBasedIframe: any;
 }): {
-    hasIframe: boolean;
+    iframeWindow: null;
 };

package/transpiled/react/providers/Breakpoints/useIframeConnection.js

@@ -4,17 +4,17 @@ import { isInsideIframe } from "cozy-ui/transpiled/react/helpers/breakpoints";
 export var useIframeConnection = function useIframeConnection(_ref) {
   var parentBasedIframe = _ref.parentBasedIframe;
 
-  var _useState = useState(false),
+  var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
-      hasIframe = _useState2[0],
-      setHasIframe = _useState2[1];
+      iframeWindow = _useState2[0],
+      setIframeWindow = _useState2[1];
 
   var isIframe = parentBasedIframe && isInsideIframe(); // parent window receives from iframe to give breakpoints
 
   useEffect(function () {
     var handleMessage = function handleMessage(ev) {
       if (ev.data === 'UI-breakpoints-needParentBreakpoints') {
-        setHasIframe(true);
+        setIframeWindow(ev.source);
       }
     };
 
@@ -30,6 +30,6 @@ export var useIframeConnection = function useIframeConnection(_ref) {
     }
   }, [isIframe]);
   return {
-    hasIframe: hasIframe
+    iframeWindow: iframeWindow
   };
 };

package/transpiled/react/providers/Breakpoints/useIframeToSendWidth.d.ts

@@ -1,3 +1,3 @@
-export function useIframeToSendWidth({ hasIframe }: {
-    hasIframe: any;
+export function useIframeToSendWidth({ iframeWindow }: {
+    iframeWindow: any;
 }): void;

package/transpiled/react/providers/Breakpoints/useIframeToSendWidth.js

@@ -1,32 +1,24 @@
 import throttle from 'lodash/throttle';
 import { useEffect } from 'react';
-/**
- * To send window innerWidth to first iframe
- * @returns
- */
 
-var sendWidthToIframe = function sendWidthToIframe() {
-  return window.frames[1].postMessage("UI-breakpoints-value:".concat(window.innerWidth), '*');
+var sendWidthToIframe = function sendWidthToIframe(iframeWindow) {
+  return iframeWindow === null || iframeWindow === void 0 ? void 0 : iframeWindow.postMessage("UI-breakpoints-value:".concat(window.innerWidth), '*');
 };
 
 export var useIframeToSendWidth = function useIframeToSendWidth(_ref) {
-  var hasIframe = _ref.hasIframe;
+  var iframeWindow = _ref.iframeWindow;
   // parent window send its innerWidth
   useEffect(function () {
-    if (hasIframe) {
-      sendWidthToIframe();
-    }
-  }, [hasIframe]); // parent window send its innerWidth on resize
+    sendWidthToIframe(iframeWindow);
+  }, [iframeWindow]); // parent window send its innerWidth on resize
 
   useEffect(function () {
     var handleResize = throttle(function () {
-      if (hasIframe) {
-        sendWidthToIframe();
-      }
+      sendWidthToIframe(iframeWindow);
     }, 100);
     window.addEventListener('resize', handleResize);
     return function () {
       window.removeEventListener('resize', handleResize);
     };
-  }, [hasIframe]);
+  }, [iframeWindow]);
 };