cozy-ui 126.5.0 → 127.0.0

package/react/Table/Virtualized/Dnd/index.jsx

@@ -0,0 +1,35 @@
+import React, { useState, useMemo } from 'react'
+
+import CustomDragLayer from './CustomDrag/CustomDragLayer'
+import virtuosoComponentsDnd from './virtuosoComponents'
+import VirtualizedTable from '../index'
+import virtuosoComponents from '../virtuosoComponents'
+
+const _components = { ...virtuosoComponents, ...virtuosoComponentsDnd }
+
+const VirtuosoTableDnd = ({ dragProps, context, components, ...props }) => {
+  const [itemsInDropProcess, setItemsInDropProcess] = useState([]) // array of Ids, for dragndrop feature
+
+  const _context = useMemo(
+    () => ({
+      ...context,
+      dragProps,
+      itemsInDropProcess,
+      setItemsInDropProcess
+    }),
+    [context, dragProps, itemsInDropProcess]
+  )
+
+  return (
+    <>
+      <CustomDragLayer dragId={dragProps.dragId} />
+      <VirtualizedTable
+        components={components || _components}
+        context={_context}
+        {...props}
+      />
+    </>
+  )
+}
+
+export default VirtuosoTableDnd

package/react/Table/Virtualized/Dnd/virtuosoComponents.jsx

@@ -0,0 +1,25 @@
+import React, { forwardRef } from 'react'
+
+import DnDConfigWrapper from './DnDConfigWrapper'
+import TableRowDnD from './TableRow'
+import TableContainer from '../../../TableContainer'
+import virtuosoComponents from '../virtuosoComponents'
+
+/**
+ Be aware that context is spread to every components but should not be spread to Table components
+ so we desctrure it from props, but don't spread to child to avoid its presence in DOM
+*/
+const virtuosoComponentsDnd = {
+  ...virtuosoComponents,
+  // eslint-disable-next-line no-unused-vars
+  Scroller: forwardRef(({ context, ...props }, ref) => (
+    <DnDConfigWrapper ref={ref}>
+      <TableContainer {...props} ref={ref} />
+    </DnDConfigWrapper>
+  )),
+  TableRow: forwardRef((props, ref) => {
+    return <TableRowDnD {...props} ref={ref} />
+  })
+}
+
+export default virtuosoComponentsDnd

package/react/Table/Virtualized/FixedHeaderContent.jsx

@@ -1,3 +1,4 @@
+import cx from 'classnames'
 import React from 'react'
 
 import TableHeadCell from './HeadCell'
@@ -25,19 +26,24 @@ const FixedHeaderContent = ({
   order,
   orderBy,
   rowCount,
-  selectedCount,
+  context,
   onClick,
   onSelectAllClick
 }) => {
   const classes = useStyles()
+  const selectedCount = context.selectedItems.length
 
   return (
     <TableRow>
       <TableCell align="center" padding="checkbox">
         <Checkbox
+          className={cx('virtualizedCheckbox', {
+            checked: selectedCount > 0
+          })}
           indeterminate={selectedCount > 0 && selectedCount < rowCount}
           checked={rowCount > 0 && selectedCount === rowCount}
           inputProps={{ 'aria-label': 'select all' }}
+          size="small"
           onChange={onSelectAllClick}
         />
       </TableCell>

package/react/Table/Virtualized/RowContent.jsx

@@ -1,3 +1,4 @@
+import cx from 'classnames'
 import React from 'react'
 
 import Cell from './Cell'
@@ -8,23 +9,37 @@ const RowContent = ({
   index,
   row,
   columns,
-  isSelectedItem,
+  context,
   children,
-  onSelectClick
+  onSelectClick,
+  onClick
 }) => {
+  const selectedCount = context.selectedItems.length
+
   return (
     <>
       <TableCell align="center" padding="checkbox">
         <Checkbox
-          checked={isSelectedItem(row)}
+          className={cx('virtualizedCheckbox', {
+            visible: selectedCount > 0,
+            checked: context.isSelectedItem(row)
+          })}
+          checked={context.isSelectedItem(row)}
           inputProps={{
             'aria-labelledby': `enhanced-table-checkbox-${index}`
           }}
+          size="small"
           onChange={() => onSelectClick(row)}
         />
       </TableCell>
       {columns.map(column => (
-        <Cell key={column.id} row={row} columns={columns} column={column}>
+        <Cell
+          key={column.id}
+          row={row}
+          columns={columns}
+          column={column}
+          onClick={onClick}
+        >
           {children}
         </Cell>
       ))}

package/react/Table/Virtualized/TableRow.jsx

@@ -0,0 +1,20 @@
+import cx from 'classnames'
+import React, { forwardRef } from 'react'
+
+import TableRowClassic from '../../TableRow'
+
+const TableRow = forwardRef(({ item, context, className, ...props }, ref) => {
+  const isSelected = context?.isSelectedItem(item)
+
+  return (
+    <TableRowClassic
+      {...props}
+      className={cx(className, 'virtualized')}
+      ref={ref}
+      selected={isSelected}
+      hover
+    />
+  )
+})
+
+export default TableRow

package/react/Table/Virtualized/helpers.js

@@ -1,6 +1,8 @@
+import get from 'lodash/get'
+
 const descendingComparator = ({ a, b, order, orderBy, lang }) => {
-  const aValue = a[orderBy]
-  const bValue = b[orderBy]
+  const aValue = get(a, orderBy, '')
+  const bValue = get(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)

package/react/Table/Virtualized/index.jsx

@@ -1,7 +1,6 @@
 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'
@@ -19,7 +18,6 @@ const VirtualizedTable = forwardRef(
       onSelectAll,
       isSelectedItem,
       componentsProps,
-      dragProps,
       context,
       components,
       ...props
@@ -28,10 +26,14 @@ const VirtualizedTable = forwardRef(
   ) => {
     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 _context = {
+      ...context,
+      isSelectedItem,
+      selectedItems
+    }
 
     const handleSort = property => {
       const isAsc = orderBy === property && order === 'asc'
@@ -52,35 +54,29 @@ const VirtualizedTable = forwardRef(
         {...props}
         ref={ref}
         data={data}
-        context={{
-          ...context,
-          isSelectedItem,
-          selectedItems,
-          dragProps,
-          itemsInDropProcess,
-          setItemsInDropProcess
-        }}
+        context={_context}
         components={components || virtuosoComponents}
         fixedHeaderContent={() => (
           <FixedHeaderContent
-            {...componentsProps?.FixedHeaderContent}
+            {...componentsProps?.fixedHeaderContent}
             columns={columns}
             rowCount={rows.length}
-            selectedCount={selectedItems.length}
+            context={_context}
             order={order}
             orderBy={orderBy}
             onClick={handleSort}
             onSelectAllClick={handleSelectAll}
           />
         )}
-        itemContent={(_index, row) => (
+        itemContent={(_index, row, context) => (
           <RowContent
-            {...componentsProps?.RowContent}
+            {...componentsProps?.rowContent}
             index={_index}
             row={row}
             columns={columns}
-            isSelectedItem={isSelectedItem}
+            context={context}
             onSelectClick={onSelect}
+            onClick={componentsProps?.rowContent?.onClick}
           >
             {componentsProps?.rowContent?.children}
           </RowContent>
@@ -100,17 +96,4 @@ VirtualizedTable.defaultProps = {
   onSelectAll: () => {}
 }
 
-const VirtuosoTableWrapper = props => {
-  if (!props.dragProps?.enabled) {
-    return <VirtualizedTable {...props} />
-  } else {
-    return (
-      <>
-        <CustomDragLayer dragId={props.dragProps.dragId} />
-        <VirtualizedTable {...props} />
-      </>
-    )
-  }
-}
-
-export default VirtuosoTableWrapper
+export default VirtualizedTable

package/react/Table/Virtualized/virtuosoComponents.jsx

@@ -1,61 +1,35 @@
+/* eslint-disable no-unused-vars */
+import cx from 'classnames'
 import React, { forwardRef } from 'react'
 
-import DnDConfigWrapper from './Dnd/DnDConfigWrapper'
-import TableRowDnD from './Dnd/TableRow'
+import TableRow from './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'
 
+/**
+ Be aware that context is spread to every components but should not be spread to Table components
+ so we desctrure it from props, but don't spread to child to avoid its presence in DOM
+*/
 const virtuosoComponents = {
-  Scroller: forwardRef(({ context, ...props }, ref) => {
-    if (!context.dragProps?.enabled) {
-      return <_TableContainer {...props} ref={ref} />
-    } else {
-      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 />
-    } else {
-      return (
-        <TableRowDnD
-          {...props}
-          item={item}
-          context={context}
-          selected={isSelected}
-          disabled={isDisabled}
-          hover
-        />
-      )
-    }
-  })
+  Scroller: forwardRef(({ context, ...props }, ref) => (
+    <TableContainer {...props} ref={ref} />
+  )),
+  Table: forwardRef(({ context, ...props }, ref) => (
+    <Table {...props} ref={ref} />
+  )),
+  TableHead: forwardRef(({ context, className, ...props }, ref) => (
+    <TableHead {...props} className={cx(className, 'virtualized')} ref={ref} />
+  )),
+  TableBody: forwardRef(({ context, ...props }, ref) => (
+    <TableBody {...props} ref={ref} />
+  )),
+  TableFooter: forwardRef(({ context, ...props }, ref) => (
+    <TableFooter {...props} ref={ref} />
+  )),
+  TableRow: forwardRef((props, ref) => <TableRow {...props} ref={ref} />)
 }
 
 export default virtuosoComponents

package/react/TableContainer/index.js

@@ -1,3 +1,18 @@
-import TableContainer from '@material-ui/core/TableContainer'
+import MuiTableContainer from '@material-ui/core/TableContainer'
+import React, { forwardRef } from 'react'
+
+import Paper from '../Paper'
+
+const TableContainer = forwardRef((props, ref) => {
+  return (
+    <MuiTableContainer
+      {...props}
+      ref={ref}
+      component={Paper}
+      style={{ zIndex: 'var(--zIndex-app)', ...props.style }}
+      elevation={0}
+    />
+  )
+})
 
 export default TableContainer

package/react/utils/index.js

@@ -0,0 +1 @@
+export * from '@material-ui/core/utils'

package/transpiled/react/ActionsMenu/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["docs", "actions", "anchorOrigin", "children", "componentsProps", "onClose"];
+var _excluded = ["docs", "actions", "anchorOrigin", "children", "componentsProps", "onClose", "autoCloseOnContextMenu"];
 import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
 import ActionsItems from "cozy-ui/transpiled/react/ActionsMenu/ActionsItems";
@@ -23,6 +23,7 @@ var ActionsMenu = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       children = _ref2.children,
       componentsProps = _ref2.componentsProps,
       onClose = _ref2.onClose,
+      autoCloseOnContextMenu = _ref2.autoCloseOnContextMenu,
       props = _objectWithoutProperties(_ref2, _excluded);
 
   var transformOrigin = useTransformOrigin(anchorOrigin);
@@ -31,7 +32,13 @@ var ActionsMenu = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     getContentAnchorEl: null,
     anchorOrigin: anchorOrigin,
     transformOrigin: transformOrigin,
-    keepMounted: true,
+    keepMounted: true
+  }, autoCloseOnContextMenu && {
+    onContextMenu: function onContextMenu(ev) {
+      ev.preventDefault();
+      onClose();
+    }
+  }, {
     onClose: onClose
   }), children, /*#__PURE__*/React.createElement(ActionsItems, _extends({}, componentsProps.actionsItems, {
     docs: docs,
@@ -44,6 +51,7 @@ ActionsMenu.defaultProps = {
     horizontal: 'left'
   },
   autoClose: true,
+  autoCloseOnContextMenu: true,
   componentsProps: {}
 };
 ActionsMenu.propTypes = {
@@ -65,6 +73,9 @@ ActionsMenu.propTypes = {
   /** Whether the menu should automatically close itself when an item is clicked */
   autoClose: PropTypes.bool,
 
+  /** Whether the menu should automatically close itself when right-click is triggered */
+  autoCloseOnContextMenu: PropTypes.bool,
+
   /* Props passed to components with the same name */
   componentsProps: PropTypes.shape({
     /** Props spread to ActionsItems component */

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

@@ -1,5 +1,5 @@
 export default Avatar;
-declare function Avatar({ className, color, size, border, innerBorder, disabled, ...props }: {
+declare function Avatar({ className, color, size, border, innerBorder, disabled, display, ...props }: {
     [x: string]: any;
     className: any;
     color: any;
@@ -7,15 +7,19 @@ declare function Avatar({ className, color, size, border, innerBorder, disabled,
     border: any;
     innerBorder: any;
     disabled: any;
+    display: any;
 }): JSX.Element;
 declare namespace Avatar {
     namespace propTypes {
         const className: PropTypes.Requireable<string>;
         const size: PropTypes.Requireable<string | number>;
         const color: PropTypes.Requireable<string>;
+        const display: PropTypes.Requireable<string>;
         const disabled: PropTypes.Requireable<boolean>;
     }
     namespace defaultProps {
+        const display_1: string;
+        export { display_1 as display };
         const size_1: string;
         export { size_1 as size };
     }

package/transpiled/react/Avatar/index.js

@@ -1,13 +1,15 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "color", "size", "border", "innerBorder", "disabled"];
+var _excluded = ["className", "color", "size", "border", "innerBorder", "disabled", "display"];
 import AvatarMui from '@material-ui/core/Avatar';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { colorMapping, supportedColors, nameToColor } from "cozy-ui/transpiled/react/Avatar/helpers";
 import { makeStyles } from "cozy-ui/transpiled/react/styles";
+import { capitalize } from "cozy-ui/transpiled/react/utils/index";
 var useStyles = makeStyles(function (theme) {
   return {
     colorDefault: {
@@ -24,12 +26,15 @@ var useStyles = makeStyles(function (theme) {
 });
 
 var Avatar = function Avatar(_ref3) {
+  var _cx;
+
   var className = _ref3.className,
       color = _ref3.color,
       size = _ref3.size,
       border = _ref3.border,
       innerBorder = _ref3.innerBorder,
       disabled = _ref3.disabled,
+      display = _ref3.display,
       props = _objectWithoutProperties(_ref3, _excluded);
 
   var defaultColor = typeof props.children === 'string' ? nameToColor(props.children) : undefined;
@@ -38,11 +43,10 @@ var Avatar = function Avatar(_ref3) {
   });
   return /*#__PURE__*/React.createElement(AvatarMui, _extends({
     classes: classes,
-    className: cx(className, "size-".concat(size), {
+    className: cx(className, "size-".concat(size), (_cx = {
       disabled: !!disabled,
-      border: !!border,
-      innerBorder: !!innerBorder
-    })
+      border: !!border
+    }, _defineProperty(_cx, "display".concat(capitalize(display)), display !== 'initial'), _defineProperty(_cx, "innerBorder", !!innerBorder), _cx))
   }, props));
 };
 
@@ -50,9 +54,13 @@ Avatar.propTypes = {
   className: PropTypes.string,
   size: PropTypes.oneOfType([PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl']), PropTypes.number]),
   color: PropTypes.oneOf([].concat(_toConsumableArray(supportedColors), ['none'])),
+
+  /** Controls the display type */
+  display: PropTypes.oneOf(['initial', 'inline']),
   disabled: PropTypes.bool
 };
 Avatar.defaultProps = {
+  display: 'initial',
   size: 'm'
 };
 export default Avatar;

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

@@ -13,6 +13,8 @@ declare namespace Checkbox {
         const error: PropTypes.Requireable<boolean>;
         const disabled: PropTypes.Requireable<boolean>;
         const mixed: PropTypes.Requireable<boolean>;
+        const disableEffect: PropTypes.Requireable<boolean>;
+        const size: PropTypes.Requireable<string>;
         const label: PropTypes.Requireable<string>;
     }
     namespace defaultProps {
@@ -24,6 +26,10 @@ declare namespace Checkbox {
         export { error_1 as error };
         const mixed_1: boolean;
         export { mixed_1 as mixed };
+        const disableEffect_1: boolean;
+        export { disableEffect_1 as disableEffect };
+        const size_1: string;
+        export { size_1 as size };
         const label_1: string;
         export { label_1 as label };
     }

package/transpiled/react/Checkbox/index.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["label", "error", "mixed", "disabled"],
+var _excluded = ["className", "label", "error", "mixed", "disabled", "size", "disableEffect"],
     _excluded2 = ["className", "label", "onChange", "children"];
 import MUICheckbox from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
@@ -13,13 +14,19 @@ import createDepreciationLogger from "cozy-ui/transpiled/react/helpers/createDep
 var logDepecratedCheckbox = createDepreciationLogger();
 
 var DefaultCheckbox = function DefaultCheckbox(_ref) {
-  var label = _ref.label,
+  var _cx;
+
+  var className = _ref.className,
+      label = _ref.label,
       error = _ref.error,
       mixed = _ref.mixed,
       disabled = _ref.disabled,
+      size = _ref.size,
+      disableEffect = _ref.disableEffect,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(MUICheckbox, _extends({
+    className: cx(className, (_cx = {}, _defineProperty(_cx, 'u-p-0', disableEffect), _defineProperty(_cx, "small", size === 'small'), _cx)),
     inputProps: {
       'aria-label': label,
       'aria-checked': mixed ? 'mixed' : '',
@@ -28,15 +35,17 @@ var DefaultCheckbox = function DefaultCheckbox(_ref) {
     color: error ? 'secondary' : 'primary',
     indeterminate: mixed,
     disabled: disabled,
+    size: size,
+    disableRipple: disableEffect,
     checkedIcon: /*#__PURE__*/React.createElement("div", {
       className: "u-flex u-flex-items-center u-flex-justify-center",
       style: {
-        width: 24,
-        height: 24
+        width: size === 'small' ? 20 : 24,
+        height: size === 'small' ? 20 : 24
       }
     }, /*#__PURE__*/React.createElement(Icon, {
       icon: CheckSquareIcon,
-      size: 18
+      size: size === 'small' ? 16 : 18
     }))
   }, props));
 };
@@ -78,6 +87,8 @@ Checkbox.propTypes = {
   error: PropTypes.bool,
   disabled: PropTypes.bool,
   mixed: PropTypes.bool,
+  disableEffect: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'medium']),
   label: PropTypes.string
 };
 Checkbox.defaultProps = {
@@ -85,6 +96,8 @@ Checkbox.defaultProps = {
   value: '',
   error: false,
   mixed: false,
+  disableEffect: false,
+  size: 'medium',
   label: ''
 };
 export default Checkbox;

package/transpiled/react/ContactsList/ContactRow.js

@@ -41,7 +41,7 @@ var ContactRow = function ContactRow(_ref) {
     divider: divider,
     gutters: isDesktop ? 'double' : 'default',
     onClick: function onClick() {
-      return _onClick(contact);
+      return _onClick === null || _onClick === void 0 ? void 0 : _onClick(contact);
     }
   }, rest), /*#__PURE__*/React.createElement(ContactIdentity, {
     contact: contact

package/transpiled/react/ContactsList/Contacts/ContactIdentity.d.ts

@@ -1,10 +1,10 @@
-export default ContactIdentity;
-declare function ContactIdentity({ contact }: {
-    contact: any;
+export default ContactIdentityWrapper;
+declare function ContactIdentityWrapper({ noWrapper, ...props }: {
+    [x: string]: any;
+    noWrapper: any;
 }): JSX.Element;
-declare namespace ContactIdentity {
-    namespace propTypes {
-        const contact: PropTypes.Validator<object>;
+declare namespace ContactIdentityWrapper {
+    namespace defaultProps {
+        const noWrapper: boolean;
     }
 }
-import PropTypes from "prop-types";