cozy-ui 123.2.1 → 124.0.0

package/react/Table/Virtualized/FixedHeaderContent.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+
+import TableHeadCell from './HeadCell'
+import Checkbox from '../../Checkbox'
+import TableCell from '../../TableCell'
+import TableRow from '../../TableRow'
+import { makeStyles } from '../../styles'
+
+const useStyles = makeStyles({
+  visuallyHidden: {
+    border: 0,
+    clip: 'rect(0 0 0 0)',
+    height: 1,
+    margin: -1,
+    overflow: 'hidden',
+    padding: 0,
+    position: 'absolute',
+    top: 20,
+    width: 1
+  }
+})
+
+const FixedHeaderContent = ({
+  columns,
+  order,
+  orderBy,
+  rowCount,
+  selectedCount,
+  onClick,
+  onSelectAllClick
+}) => {
+  const classes = useStyles()
+
+  return (
+    <TableRow>
+      <TableCell align="center" padding="checkbox">
+        <Checkbox
+          indeterminate={selectedCount > 0 && selectedCount < rowCount}
+          checked={rowCount > 0 && selectedCount === rowCount}
+          inputProps={{ 'aria-label': 'select all' }}
+          onChange={onSelectAllClick}
+        />
+      </TableCell>
+      {columns.map(column => (
+        <TableHeadCell
+          key={column.id}
+          className={classes.visuallyHidden}
+          column={column}
+          order={order}
+          orderBy={orderBy}
+          onClick={() => onClick(column.id)}
+        />
+      ))}
+    </TableRow>
+  )
+}
+
+export default FixedHeaderContent

package/react/Table/Virtualized/HeadCell.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+
+import TableCell from '../../TableCell'
+import TableSortLabel from '../../TableSortLabel'
+import { makeStyles } from '../../styles'
+
+const useStyles = makeStyles({
+  root: {
+    width: ({ column }) => column.width,
+    maxWidth: ({ column }) => column.maxWidth
+  }
+})
+
+const TableHeadCell = ({ className, column, orderBy, order, onClick }) => {
+  const classes = useStyles({ column })
+
+  return (
+    <TableCell
+      key={column.id}
+      classes={classes}
+      align={column.textAlign ?? 'left'}
+      padding={column.disablePadding ? 'none' : 'normal'}
+      sortDirection={orderBy === column.id ? order : false}
+    >
+      {column.sortable !== false ? (
+        <TableSortLabel
+          active={orderBy === column.id}
+          direction={orderBy === column.id ? order : 'asc'}
+          onClick={onClick}
+        >
+          {column.label}
+          {orderBy === column.id && (
+            <span className={className}>
+              {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+            </span>
+          )}
+        </TableSortLabel>
+      ) : (
+        column.label
+      )}
+    </TableCell>
+  )
+}
+
+export default TableHeadCell

package/react/Table/Virtualized/RowContent.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import Cell from './Cell'
+import Checkbox from '../../Checkbox'
+import TableCell from '../../TableCell'
+
+const RowContent = ({
+  index,
+  row,
+  columns,
+  isSelectedItem,
+  children,
+  onSelectClick
+}) => {
+  return (
+    <>
+      <TableCell align="center" padding="checkbox">
+        <Checkbox
+          checked={isSelectedItem(row)}
+          inputProps={{
+            'aria-labelledby': `enhanced-table-checkbox-${index}`
+          }}
+          onChange={() => onSelectClick(row)}
+        />
+      </TableCell>
+      {columns.map(column => (
+        <Cell key={column.id} row={row} columns={columns} column={column}>
+          {children}
+        </Cell>
+      ))}
+    </>
+  )
+}
+
+export default React.memo(RowContent)

package/react/Table/Virtualized/helpers.js

@@ -0,0 +1,41 @@
+const descendingComparator = ({ a, b, order, orderBy, lang }) => {
+  const aValue = a[orderBy]
+  const bValue = b[orderBy]
+
+  if (typeof aValue === 'string') {
+    const isDate = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}/.test(aValue)
+    const isNumber = !isNaN(parseInt(aValue))
+
+    if (isDate) {
+      return new Date(bValue) - new Date(aValue)
+    }
+
+    if (isNumber) {
+      return parseInt(bValue) - parseInt(aValue)
+    }
+
+    const { compare } = Intl.Collator(lang || 'en', {
+      caseFirst: order === 'asc' ? 'upper' : 'lower'
+    })
+
+    return compare(bValue, aValue)
+  }
+
+  return bValue - aValue
+}
+
+export const getComparator = (order, orderBy, lang) => {
+  return order === 'desc'
+    ? (a, b) => descendingComparator({ a, b, order, orderBy, lang })
+    : (a, b) => -descendingComparator({ a, b, order, orderBy, lang })
+}
+
+export const stableSort = (array, comparator) => {
+  const stabilizedThis = array.map((el, index) => [el, index])
+  stabilizedThis.sort((a, b) => {
+    const order = comparator(a[0], b[0])
+    if (order !== 0) return order
+    return a[1] - b[1]
+  })
+  return stabilizedThis.map(el => el[0])
+}

package/react/Table/Virtualized/helpers.spec.js

@@ -0,0 +1,108 @@
+import { stableSort, getComparator } from './helpers'
+
+describe('stableSort', () => {
+  describe('it should sort string correctly even with number', () => {
+    const rows = [
+      { name: 'b' },
+      { name: 'A' },
+      { name: 'B' },
+      { name: 'a' },
+      { name: '10' }
+    ]
+
+    it('for asc', () => {
+      const sortedData = stableSort(rows, getComparator('asc', 'name', 'fr'))
+
+      const onlyValues = sortedData.map(el => el.name)
+      expect(onlyValues).toStrictEqual(['A', 'a', 'B', 'b', '10'])
+    })
+
+    it('for desc', () => {
+      const sortedData = stableSort(rows, getComparator('desc', 'name', 'fr'))
+
+      const onlyValues = sortedData.map(el => el.name)
+      expect(onlyValues).toStrictEqual(['B', 'b', 'A', 'a', '10'])
+    })
+  })
+
+  describe('it should sort number correctly', () => {
+    const rows = [
+      { number: 40 },
+      { number: 1 },
+      { number: 8 },
+      { number: 30 },
+      { number: 40 }
+    ]
+
+    it('for asc', () => {
+      const sortedData = stableSort(rows, getComparator('asc', 'number', 'fr'))
+
+      const onlyValues = sortedData.map(el => el.number)
+      expect(onlyValues).toStrictEqual([1, 8, 30, 40, 40])
+    })
+
+    it('for desc', () => {
+      const sortedData = stableSort(rows, getComparator('desc', 'number', 'fr'))
+
+      const onlyValues = sortedData.map(el => el.number)
+      expect(onlyValues).toStrictEqual([40, 40, 30, 8, 1])
+    })
+  })
+
+  describe('it should sort string-number correctly', () => {
+    const rows = [
+      { number: '40' },
+      { number: '1' },
+      { number: '8' },
+      { number: '30' },
+      { number: '40' }
+    ]
+
+    it('for asc', () => {
+      const sortedData = stableSort(rows, getComparator('asc', 'number', 'fr'))
+
+      const onlyValues = sortedData.map(el => el.number)
+      expect(onlyValues).toStrictEqual(['1', '8', '30', '40', '40'])
+    })
+
+    it('for desc', () => {
+      const sortedData = stableSort(rows, getComparator('desc', 'number', 'fr'))
+
+      const onlyValues = sortedData.map(el => el.number)
+      expect(onlyValues).toStrictEqual(['40', '40', '30', '8', '1'])
+    })
+  })
+
+  describe('it should sort date correctly', () => {
+    const rows = [
+      { date: '2025-05-01T12:00:00.0000+01:00' },
+      { date: '2025-08-01T12:00:00.0000+01:00' },
+      { date: '2025-01-01T12:00:00.0000+01:00' },
+      { date: '2025-04-01T12:00:00.0000+01:00' }
+    ]
+
+    it('for asc', () => {
+      const sortedData = stableSort(rows, getComparator('asc', 'date', 'fr'))
+
+      const onlyValues = sortedData.map(el => el.date)
+      expect(onlyValues).toStrictEqual([
+        '2025-01-01T12:00:00.0000+01:00',
+        '2025-04-01T12:00:00.0000+01:00',
+        '2025-05-01T12:00:00.0000+01:00',
+        '2025-08-01T12:00:00.0000+01:00'
+      ])
+    })
+
+    it('for desc', () => {
+      const sortedData = stableSort(rows, getComparator('desc', 'date', 'fr'))
+
+      const onlyValues = sortedData.map(el => el.date)
+      expect(onlyValues).toStrictEqual([
+        '2025-08-01T12:00:00.0000+01:00',
+        '2025-05-01T12:00:00.0000+01:00',
+        '2025-04-01T12:00:00.0000+01:00',
+        '2025-01-01T12:00:00.0000+01:00'
+      ])
+    })
+  })
+})

package/react/Table/Virtualized/index.jsx

@@ -0,0 +1,104 @@
+import React, { useState, forwardRef } from 'react'
+import { TableVirtuoso } from 'react-virtuoso'
+
+import CustomDragLayer from './Dnd/CustomDrag/CustomDragLayer'
+import FixedHeaderContent from './FixedHeaderContent'
+import RowContent from './RowContent'
+import { stableSort, getComparator } from './helpers'
+import virtuosoComponents from './virtuosoComponents'
+
+const VirtualizedTable = forwardRef(
+  (
+    {
+      rows,
+      columns,
+      defaultOrder,
+      secondarySort,
+      selectedItems = [],
+      onSelect = () => {},
+      onSelectAll = () => {},
+      isSelectedItem = () => {},
+      componentsProps,
+      dragProps,
+      ...props
+    },
+    ref
+  ) => {
+    const [order, setOrder] = useState('asc')
+    const [orderBy, setOrderBy] = useState(defaultOrder)
+    const [itemsInDropProcess, setItemsInDropProcess] = useState([]) // array of Ids, for dragndrop feature
+
+    const sortedData = stableSort(rows, getComparator(order, orderBy))
+    const data = secondarySort ? secondarySort(sortedData) : sortedData
+
+    const handleSort = property => {
+      const isAsc = orderBy === property && order === 'asc'
+      setOrder(isAsc ? 'desc' : 'asc')
+      setOrderBy(property)
+    }
+
+    const handleSelectAll = event => {
+      if (event?.target?.checked) {
+        onSelectAll(rows)
+        return
+      }
+      onSelectAll([])
+    }
+
+    return (
+      <TableVirtuoso
+        {...props}
+        ref={ref}
+        data={data}
+        context={{
+          isSelectedItem,
+          selectedItems,
+          dragProps,
+          itemsInDropProcess,
+          setItemsInDropProcess
+        }}
+        components={virtuosoComponents}
+        fixedHeaderContent={() => (
+          <FixedHeaderContent
+            columns={columns}
+            rowCount={rows.length}
+            selectedCount={selectedItems.length}
+            order={order}
+            orderBy={orderBy}
+            onClick={handleSort}
+            onSelectAllClick={handleSelectAll}
+          />
+        )}
+        itemContent={(_index, row) => (
+          <RowContent
+            index={_index}
+            row={row}
+            columns={columns}
+            isSelectedItem={isSelectedItem}
+            onSelectClick={onSelect}
+          >
+            {componentsProps?.rowContent?.children}
+          </RowContent>
+        )}
+        rowSpan={2}
+      />
+    )
+  }
+)
+
+VirtualizedTable.displayName = 'VirtualizedTable'
+
+const VirtuosoTableWrapper = props => {
+  if (!props.dragProps?.enabled) {
+    return <VirtualizedTable {...props} />
+  }
+
+  return (
+    <>
+      <CustomDragLayer dragId={props.dragProps.dragId} />
+      <VirtualizedTable {...props} />
+    </>
+  )
+}
+
+export default VirtuosoTableWrapper

package/react/Table/Virtualized/virtuosoComponents.jsx

@@ -0,0 +1,61 @@
+import React, { forwardRef } from 'react'
+
+import DnDConfigWrapper from './Dnd/DnDConfigWrapper'
+import TableRowDnD from './Dnd/TableRow'
+import Table from '..'
+import Paper from '../../Paper'
+import TableBody from '../../TableBody'
+import TableContainer from '../../TableContainer'
+import TableFooter from '../../TableFooter'
+import TableHead from '../../TableHead'
+import TableRow from '../../TableRow'
+
+const _TableContainer = forwardRef((props, ref) => (
+  <TableContainer
+    {...props}
+    ref={ref}
+    component={Paper}
+    style={{ zIndex: 'var(--zIndex-app)', ...props.style }}
+    elevation={0}
+  />
+))
+_TableContainer.displayName = '_TableContainer'
+
+const virtuosoComponents = {
+  Scroller: forwardRef(({ context, ...props }, ref) => {
+    if (!context.dragProps?.enabled) {
+      return <_TableContainer {...props} ref={ref} />
+    }
+
+    return (
+      <DnDConfigWrapper ref={ref}>
+        <_TableContainer {...props} ref={ref} />
+      </DnDConfigWrapper>
+    )
+  }),
+  Table: forwardRef((props, ref) => <Table {...props} ref={ref} />),
+  TableHead: forwardRef((props, ref) => <TableHead {...props} ref={ref} />),
+  TableBody: forwardRef((props, ref) => <TableBody {...props} ref={ref} />),
+  TableFooter: forwardRef((props, ref) => <TableFooter {...props} ref={ref} />),
+  TableRow: forwardRef(({ item, context, ...props }, ref) => {
+    const isSelected = context?.isSelectedItem(item)
+    const isDisabled = context?.itemsInDropProcess.includes(item._id)
+
+    if (!context.dragProps?.enabled) {
+      return <TableRow {...props} ref={ref} selected={isSelected} hover />
+    }
+
+    return (
+      <TableRowDnD
+        {...props}
+        item={item}
+        context={context}
+        selected={isSelected}
+        disabled={isDisabled}
+        hover
+      />
+    )
+  })
+}
+
+export default virtuosoComponents

package/react/TableRow/index.js

@@ -1,3 +1,18 @@
-import TableRow from '@material-ui/core/TableRow'
+import MuiTableRow from '@material-ui/core/TableRow'
+import cx from 'classnames'
+import React, { forwardRef } from 'react'
+
+const TableRow = forwardRef(({ disabled, className, ...props }, ref) => {
+  return (
+    <MuiTableRow
+      {...props}
+      className={cx(className, { disabled })}
+      disabled={disabled}
+      ref={ref}
+    />
+  )
+})
+
+TableRow.displayName = 'TableRow'
 
 export default TableRow

package/transpiled/react/Filename/index.d.ts

@@ -1,10 +1,11 @@
 export default Filename;
-declare function Filename({ icon, filename, extension, midEllipsis, variant }: {
+declare function Filename({ icon, filename, extension, midEllipsis, variant, path }: {
     icon: any;
     filename: any;
     extension: any;
     midEllipsis: any;
     variant: any;
+    path: any;
 }): JSX.Element;
 declare namespace Filename {
     namespace propTypes {

package/transpiled/react/Filename/index.js

@@ -1,24 +1,21 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
-import Icon, { iconPropType } from "cozy-ui/transpiled/react/Icon";
+import React, { Fragment } from 'react';
+var styles = {
+  "icon-withPath": "styles__icon-withPath___1IcPC"
+};
+import { iconPropType } from "cozy-ui/transpiled/react/Icon";
 import MidEllipsis from "cozy-ui/transpiled/react/MidEllipsis";
 import Typography from "cozy-ui/transpiled/react/Typography";
 
-var Filename = function Filename(_ref) {
-  var icon = _ref.icon,
-      filename = _ref.filename,
+var NameAndExtension = function NameAndExtension(_ref) {
+  var filename = _ref.filename,
       extension = _ref.extension,
-      midEllipsis = _ref.midEllipsis,
-      variant = _ref.variant;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "u-flex u-flex-items-center"
-  }, icon && /*#__PURE__*/React.createElement("div", {
-    className: "u-mr-1"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: icon,
-    width: 30,
-    height: 30
-  })), filename && /*#__PURE__*/React.createElement(Typography, {
+      variant = _ref.variant,
+      midEllipsis = _ref.midEllipsis;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, filename && /*#__PURE__*/React.createElement(Typography, {
     variant: variant,
     component: "span",
     noWrap: true
@@ -31,6 +28,42 @@ var Filename = function Filename(_ref) {
   }, extension));
 };
 
+var Filename = function Filename(_ref2) {
+  var icon = _ref2.icon,
+      filename = _ref2.filename,
+      extension = _ref2.extension,
+      midEllipsis = _ref2.midEllipsis,
+      variant = _ref2.variant,
+      path = _ref2.path;
+
+  var _ref3 = path ? [Fragment, {}] : ['div', {
+    className: cx('u-flex u-flex-items-center')
+  }],
+      _ref4 = _slicedToArray(_ref3, 2),
+      Wrapper = _ref4[0],
+      wrapperProps = _ref4[1];
+
+  return /*#__PURE__*/React.createElement(Wrapper, wrapperProps, icon && /*#__PURE__*/React.createElement("div", {
+    className: cx('u-flex u-pos-relative u-mr-1', _defineProperty({}, styles['icon-withPath'], !!path))
+  }, icon), path ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "u-flex"
+  }, /*#__PURE__*/React.createElement(NameAndExtension, {
+    filename: filename,
+    extension: extension,
+    variant: variant,
+    midEllipsis: midEllipsis
+  })), /*#__PURE__*/React.createElement(Typography, {
+    variant: "body2",
+    component: "div",
+    noWrap: true
+  }, path)) : /*#__PURE__*/React.createElement(NameAndExtension, {
+    filename: filename,
+    extension: extension,
+    variant: variant,
+    midEllipsis: midEllipsis
+  }));
+};
+
 Filename.propTypes = {
   /** Filename icon */
   icon: iconPropType,

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

@@ -580,6 +580,62 @@ export function makeDarkInvertedOverrides(theme: any): {
             paddingRight: number;
         };
     };
+    MuiTableHead: {
+        root: {
+            backgroundColor: any;
+        };
+    };
+    MuiTableRow: {
+        root: {
+            '&.disabled': {
+                cursor: string;
+                pointerEvents: string;
+                opacity: number;
+            };
+        };
+    };
+    MuiTableCell: {
+        root: {
+            padding: string;
+        };
+        head: any;
+        body: {
+            color: any;
+            '&.sortable': {
+                '&$paddingNone': {
+                    '&$alignLeft': {
+                        paddingLeft: string;
+                    };
+                    '&$alignRight': {
+                        paddingRight: string;
+                    };
+                };
+                '&$alignLeft': {
+                    paddingLeft: string;
+                };
+                '&$alignRight': {
+                    paddingRight: string;
+                };
+            };
+        };
+        stickyHeader: {
+            backgroundColor: any;
+        };
+    };
+    MuiTableSortLabel: {
+        root: {
+            padding: string;
+            color: any;
+            '&:hover': {
+                color: any;
+                borderRadius: number;
+                backgroundColor: any;
+            };
+        };
+        icon: {
+            fontSize: number;
+        };
+    };
     MuiFormLabel: {
         root: {
             color: any;

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

@@ -580,6 +580,62 @@ export function makeDarkNormalOverrides(theme: any): {
             paddingRight: number;
         };
     };
+    MuiTableHead: {
+        root: {
+            backgroundColor: any;
+        };
+    };
+    MuiTableRow: {
+        root: {
+            '&.disabled': {
+                cursor: string;
+                pointerEvents: string;
+                opacity: number;
+            };
+        };
+    };
+    MuiTableCell: {
+        root: {
+            padding: string;
+        };
+        head: any;
+        body: {
+            color: any;
+            '&.sortable': {
+                '&$paddingNone': {
+                    '&$alignLeft': {
+                        paddingLeft: string;
+                    };
+                    '&$alignRight': {
+                        paddingRight: string;
+                    };
+                };
+                '&$alignLeft': {
+                    paddingLeft: string;
+                };
+                '&$alignRight': {
+                    paddingRight: string;
+                };
+            };
+        };
+        stickyHeader: {
+            backgroundColor: any;
+        };
+    };
+    MuiTableSortLabel: {
+        root: {
+            padding: string;
+            color: any;
+            '&:hover': {
+                color: any;
+                borderRadius: number;
+                backgroundColor: any;
+            };
+        };
+        icon: {
+            fontSize: number;
+        };
+    };
     MuiFormLabel: {
         root: {
             color: any;