cozy-ui 141.0.0 → 142.1.0

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+# [142.1.0](https://github.com/cozy/cozy-ui/compare/v142.0.1...v142.1.0) (2026-09-24)
+
+
+### Bug Fixes
+
+* **Table:** Keep slow clicks on VirtualizedTable cells without a long press handler ([a283f77](https://github.com/cozy/cozy-ui/commit/a283f77))
+* **Table:** Show a pointer only on clickable VirtualizedTable cells ([9953f49](https://github.com/cozy/cozy-ui/commit/9953f49))
+* **Table:** Sort VirtualizedTable rows only when rows or order change ([b1be981](https://github.com/cozy/cozy-ui/commit/b1be981))
+* **Table:** Translate the VirtualizedTable sort direction announcement ([2d67cd8](https://github.com/cozy/cozy-ui/commit/2d67cd8))
+
+
+### Features
+
+* **Table:** Export VirtuosoMockContext to test VirtualizedTable ([ba3e8bd](https://github.com/cozy/cozy-ui/commit/ba3e8bd))
+
+## [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "141.0.0",
+  "version": "142.1.0",
   "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/Table/Readme.md

@@ -3,6 +3,7 @@
 ```jsx
 import { useState } from 'react'
 import VirtualizedTable from 'cozy-ui/transpiled/react/Table/Virtualized'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 import Variants from 'cozy-ui/docs/components/Variants'
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import Stack from 'cozy-ui/transpiled/react/Stack'
@@ -138,26 +139,28 @@ const SelectButton = () => {
 
 ;
 
-<Variants initialVariants={initialVariants} screenshotAllVariants>
-  {variant => (
-    <>
-      <SelectionProvider>
-        <Typography className="u-mt-1" variant="h4">Not sorted table</Typography>
-        <SelectButton />
-        <div style={{ border: "1px solid var(--borderMainColor)", height: 400, width: "100%" }}>
-          <ExampleTable variant={variant} />
-        </div>
-      </SelectionProvider>
-      <SelectionProvider>
-        <Typography className="u-mt-1" variant="h4">Sorted table</Typography>
-        <SelectButton />
-        <div style={{ border: "1px solid var(--borderMainColor)", height: 400, width: "100%" }}>
-          <ExampleTable variant={variant} defaultOrder={{by: columns[0].id, direction: 'asc'}} />
-        </div>
-      </SelectionProvider>
-    </>
-  )}
-</Variants>
+<DemoProvider>
+  <Variants initialVariants={initialVariants} screenshotAllVariants>
+    {variant => (
+      <>
+        <SelectionProvider>
+          <Typography className="u-mt-1" variant="h4">Not sorted table</Typography>
+          <SelectButton />
+          <div style={{ border: "1px solid var(--borderMainColor)", height: 400, width: "100%" }}>
+            <ExampleTable variant={variant} />
+          </div>
+        </SelectionProvider>
+        <SelectionProvider>
+          <Typography className="u-mt-1" variant="h4">Sorted table</Typography>
+          <SelectButton />
+          <div style={{ border: "1px solid var(--borderMainColor)", height: 400, width: "100%" }}>
+            <ExampleTable variant={variant} defaultOrder={{by: columns[0].id, direction: 'asc'}} />
+          </div>
+        </SelectionProvider>
+      </>
+    )}
+  </Variants>
+</DemoProvider>
 ```
 
 ### With Drag'n'Drop
@@ -165,6 +168,7 @@ const SelectButton = () => {
 ```jsx
 import { useState } from 'react'
 import VirtualizedTableDnd from 'cozy-ui/transpiled/react/Table/Virtualized/Dnd'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import SelectionProvider, { useSelection } from 'cozy-ui/transpiled/react/providers/Selection'
 import { DndProvider } from 'react-dnd'
@@ -238,11 +242,13 @@ const DndExample = () => {
 
 ;
 
-<SelectionProvider>
-  <DndProvider backend={HTML5Backend}>
-    <div className="u-mt-half" style={{ border: "1px solid var(--borderMainColor)", height: 400, width: "100%" }}>
-      <DndExample />
-    </div>
-  </DndProvider>
-</SelectionProvider>
+<DemoProvider>
+  <SelectionProvider>
+    <DndProvider backend={HTML5Backend}>
+      <div className="u-mt-half" style={{ border: "1px solid var(--borderMainColor)", height: 400, width: "100%" }}>
+        <DndExample />
+      </div>
+    </DndProvider>
+  </SelectionProvider>
+</DemoProvider>
 ```

package/react/Table/Virtualized/Cell.jsx

@@ -28,17 +28,21 @@ const Cell = ({
   const [isLongPress, setIsLongPress] = useState(false) // onClick is triggered after a long press anyway, so we need this bool to avoid this behavior
   const [lastClickTime, setLastClickTime] = useState(0)
 
-  const classes = useStyles({ column, isClickable: !!onClick })
+  const classes = useStyles({
+    column,
+    isClickable: !!onClick && !column.disableClick
+  })
   const cellContent = get(row, column.id, '—')
 
   const longPressRef = useOnLongPress(
     () => {
-      if (column.disableClick) {
+      // without a long press handler, a slow click must stay a click
+      if (column.disableClick || !onLongPress) {
         return
       }
 
       setIsLongPress(true)
-      onLongPress?.(row, column)
+      onLongPress(row, column)
     },
     { duration: 300 }
   )

package/react/Table/Virtualized/HeadCell.jsx

@@ -1,9 +1,16 @@
 import React from 'react'
+import { useI18n, useExtendI18n } from 'twake-i18n'
 
+import en from './locales/en.json'
+import fr from './locales/fr.json'
+import ru from './locales/ru.json'
+import vi from './locales/vi.json'
 import TableCell from '../../TableCell'
 import TableSortLabel from '../../TableSortLabel'
 import { makeStyles } from '../../styles'
 
+const locales = { en, fr, ru, vi }
+
 const useStyles = makeStyles({
   root: {
     width: ({ column }) => column.width,
@@ -18,6 +25,8 @@ const TableHeadCell = ({
   orderDirection,
   onClick
 }) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
   const classes = useStyles({ column })
 
   return (
@@ -39,8 +48,8 @@ const TableHeadCell = ({
           {orderBy === column.id && (
             <span className={className}>
               {orderDirection === 'desc'
-                ? 'sorted descending'
-                : 'sorted ascending'}
+                ? t('VirtualizedTable.sortedDesc')
+                : t('VirtualizedTable.sortedAsc')}
             </span>
           )}
         </TableSortLabel>

package/react/Table/Virtualized/index.jsx

@@ -1,7 +1,9 @@
 import PropTypes from 'prop-types'
-import React, { useState, forwardRef } from 'react'
+import React, { useMemo, useState, forwardRef } from 'react'
 import { TableVirtuoso, GroupedTableVirtuoso } from 'react-virtuoso'
 
+export { VirtuosoMockContext } from 'react-virtuoso'
+
 import FixedHeaderContent from './FixedHeaderContent'
 import RowContent from './RowContent'
 import { stableSort, getComparator } from './helpers'
@@ -32,10 +34,12 @@ const VirtualizedTable = forwardRef(
     )
     const [orderBy, setOrderBy] = useState(defaultOrder?.by ?? undefined)
 
-    const sortedData = orderBy
-      ? stableSort(rows, getComparator(orderDirection, orderBy))
-      : rows
-    const data = secondarySort ? secondarySort(sortedData) : sortedData
+    const data = useMemo(() => {
+      const sortedData = orderBy
+        ? stableSort(rows, getComparator(orderDirection, orderBy))
+        : rows
+      return secondarySort ? secondarySort(sortedData) : sortedData
+    }, [rows, orderBy, orderDirection, secondarySort])
     const { groupLabels, groupCounts } = groups?.(data) || {}
     const isGroupedTable = !!groupCounts
     const _context = {

package/react/Table/Virtualized/locales/en.json

@@ -0,0 +1,6 @@
+{
+  "VirtualizedTable": {
+    "sortedAsc": "sorted ascending",
+    "sortedDesc": "sorted descending"
+  }
+}

package/react/Table/Virtualized/locales/fr.json

@@ -0,0 +1,6 @@
+{
+  "VirtualizedTable": {
+    "sortedAsc": "tri croissant",
+    "sortedDesc": "tri décroissant"
+  }
+}

package/react/Table/Virtualized/locales/ru.json

@@ -0,0 +1,6 @@
+{
+  "VirtualizedTable": {
+    "sortedAsc": "отсортировано по возрастанию",
+    "sortedDesc": "отсортировано по убыванию"
+  }
+}

package/react/Table/Virtualized/locales/vi.json

@@ -0,0 +1,6 @@
+{
+  "VirtualizedTable": {
+    "sortedAsc": "sắp xếp tăng dần",
+    "sortedDesc": "sắp xếp giảm dần"
+  }
+}

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/Table/Virtualized/Cell.js

@@ -47,16 +47,17 @@ var Cell = function Cell(_ref4) {
 
   var classes = useStyles({
     column: column,
-    isClickable: !!onClick
+    isClickable: !!onClick && !column.disableClick
   });
   var cellContent = get(row, column.id, '—');
   var longPressRef = useOnLongPress(function () {
-    if (column.disableClick) {
+    // without a long press handler, a slow click must stay a click
+    if (column.disableClick || !onLongPress) {
       return;
     }
 
     setIsLongPress(true);
-    onLongPress === null || onLongPress === void 0 ? void 0 : onLongPress(row, column);
+    onLongPress(row, column);
   }, {
     duration: 300
   });

package/transpiled/react/Table/Virtualized/HeadCell.js

@@ -1,7 +1,38 @@
 import React from 'react';
+import { useI18n, useExtendI18n } from 'twake-i18n';
+var en = {
+  VirtualizedTable: {
+    sortedAsc: "sorted ascending",
+    sortedDesc: "sorted descending"
+  }
+};
+var fr = {
+  VirtualizedTable: {
+    sortedAsc: "tri croissant",
+    sortedDesc: "tri d\xE9croissant"
+  }
+};
+var ru = {
+  VirtualizedTable: {
+    sortedAsc: "\u043E\u0442\u0441\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u043D\u043E \u043F\u043E \u0432\u043E\u0437\u0440\u0430\u0441\u0442\u0430\u043D\u0438\u044E",
+    sortedDesc: "\u043E\u0442\u0441\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u043D\u043E \u043F\u043E \u0443\u0431\u044B\u0432\u0430\u043D\u0438\u044E"
+  }
+};
+var vi = {
+  VirtualizedTable: {
+    sortedAsc: "s\u1EAFp x\u1EBFp t\u0103ng d\u1EA7n",
+    sortedDesc: "s\u1EAFp x\u1EBFp gi\u1EA3m d\u1EA7n"
+  }
+};
 import TableCell from "cozy-ui/transpiled/react/TableCell";
 import TableSortLabel from "cozy-ui/transpiled/react/TableSortLabel";
 import { makeStyles } from "cozy-ui/transpiled/react/styles";
+var locales = {
+  en: en,
+  fr: fr,
+  ru: ru,
+  vi: vi
+};
 var useStyles = makeStyles({
   root: {
     width: function width(_ref) {
@@ -23,6 +54,11 @@ var TableHeadCell = function TableHeadCell(_ref3) {
       orderBy = _ref3.orderBy,
       orderDirection = _ref3.orderDirection,
       onClick = _ref3.onClick;
+  useExtendI18n(locales);
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
   var classes = useStyles({
     column: column
   });
@@ -39,7 +75,7 @@ var TableHeadCell = function TableHeadCell(_ref3) {
     onClick: onClick
   }, column.label, orderBy === column.id && /*#__PURE__*/React.createElement("span", {
     className: className
-  }, orderDirection === 'desc' ? 'sorted descending' : 'sorted ascending')) : column.label);
+  }, orderDirection === 'desc' ? t('VirtualizedTable.sortedDesc') : t('VirtualizedTable.sortedAsc'))) : column.label);
 };
 
 export default TableHeadCell;

package/transpiled/react/Table/Virtualized/index.d.ts

@@ -1,3 +1,4 @@
+export { VirtuosoMockContext } from "react-virtuoso";
 export default VirtualizedTable;
 declare const VirtualizedTable: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from "react";

package/transpiled/react/Table/Virtualized/index.js

@@ -9,8 +9,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 PropTypes from 'prop-types';
-import React, { useState, forwardRef } from 'react';
+import React, { useMemo, useState, forwardRef } from 'react';
 import { TableVirtuoso, GroupedTableVirtuoso } from 'react-virtuoso';
+export { VirtuosoMockContext } from 'react-virtuoso';
 import FixedHeaderContent from "cozy-ui/transpiled/react/Table/Virtualized/FixedHeaderContent";
 import RowContent from "cozy-ui/transpiled/react/Table/Virtualized/RowContent";
 import { stableSort, getComparator } from "cozy-ui/transpiled/react/Table/Virtualized/helpers";
@@ -43,8 +44,10 @@ var VirtualizedTable = /*#__PURE__*/forwardRef(function (_ref, ref) {
       orderBy = _useState4[0],
       setOrderBy = _useState4[1];
 
-  var sortedData = orderBy ? stableSort(rows, getComparator(orderDirection, orderBy)) : rows;
-  var data = secondarySort ? secondarySort(sortedData) : sortedData;
+  var data = useMemo(function () {
+    var sortedData = orderBy ? stableSort(rows, getComparator(orderDirection, orderBy)) : rows;
+    return secondarySort ? secondarySort(sortedData) : sortedData;
+  }, [rows, orderBy, orderDirection, secondarySort]);
 
   var _ref2 = (groups === null || groups === void 0 ? void 0 : groups(data)) || {},
       groupLabels = _ref2.groupLabels,