cozy-ui 128.10.1 → 129.0.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [129.0.0](https://github.com/cozy/cozy-ui/compare/v128.10.1...v129.0.0) (2025-09-17)
+
+
+### Bug Fixes
+
+* **SelectionProvider:** Replace `item`by `itemId` and don't rely on `._id` anymore ([f6086d3](https://github.com/cozy/cozy-ui/commit/f6086d3))
+* **VirtualizedTable:** Now don't sort anything if no `defaultOrder` set ([707d62d](https://github.com/cozy/cozy-ui/commit/707d62d))
+* **VirtualizedTable:** Prop `onSortChange` is now longer required ([31188a6](https://github.com/cozy/cozy-ui/commit/31188a6))
+
+
+### BREAKING CHANGES
+
+* **SelectionProvider:** If you use `cozy-ui/transpiled/react/providers/Selection` you have to replace prop object by its `id` value. For example replace `isSelectedItem(item)` by `isSelectedItem(item.id)` or `toggleSelectAllItems(items)` by `toggleSelectAllItems(items.map(item => item.id))`
+
 ## [128.10.1](https://github.com/cozy/cozy-ui/compare/v128.10.0...v128.10.1) (2025-09-16)
 
 

package/package.json

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

package/react/Table/Readme.md

@@ -1,8 +1,11 @@
 ### React-Virtuoso
 
 ```jsx
+import { useState } from 'react'
 import VirtualizedTable from 'cozy-ui/transpiled/react/Table/Virtualized'
 import Variants from 'cozy-ui/docs/components/Variants'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import SelectionProvider, { useSelection } from 'cozy-ui/transpiled/react/providers/Selection'
 
 const createData = (id, name, calories, fat, carbs, protein) => {
   return { id, name, calories, fat, carbs, protein }
@@ -10,18 +13,18 @@ const createData = (id, name, calories, fat, carbs, protein) => {
 
 const rows = [
   createData(0, 'Cupcake', 305, 3.7, 67, 4.3),
-  createData(1, 'Donut', 452, 25.0, 51, 4.9),
-  createData(2, 'Eclair', 262, 16.0, 24, 6.0),
-  createData(3, 'Frozen yoghurt', 159, 6.0, 24, 4.0),
-  createData(4, 'Gingerbread', 356, 16.0, 49, 3.9),
-  createData(5, 'Honeycomb', 408, 3.2, 87, 6.5),
-  createData(6, 'Ice cream sandwich', 237, 9.0, 37, 4.3),
+  createData(1, 'Frozen yoghurt', 159, 6.0, 24, 4.0),
+  createData(2, 'Donut', 452, 25.0, 51, 4.9),
+  createData(3, 'Eclair', 262, 16.0, 24, 6.0),
+  createData(4, 'Ice cream sandwich', 237, 9.0, 37, 4.3),
+  createData(5, 'Gingerbread', 356, 16.0, 49, 3.9),
+  createData(6, 'Honeycomb', 408, 3.2, 87, 6.5),
   createData(7, 'Jelly Bean', 375, 0.0, 94, 0.0),
   createData(8, 'KitKat', 518, 26.0, 65, 7.0),
-  createData(9, 'Lollipop', 392, 0.2, 98, 0.0),
+  createData(9, 'Oreo', 437, 18.0, 63, 4.0),
   createData(10, 'Marshmallow', 318, 0, 81, 2.0),
-  createData(11, 'Nougat', 360, 19.0, 9, 37.0),
-  createData(12, 'Oreo', 437, 18.0, 63, 4.0),
+  createData(11, 'Lollipop', 392, 0.2, 98, 0.0),
+  createData(12, 'Nougat', 360, 19.0, 9, 37.0),
   createData(
     13,
     'Ice cream with a very long list of ingredient to see how the table can handle this kind of item, and this is the end',
@@ -70,59 +73,30 @@ const columns = [
   }
 ]
 
-initialState = { selectedItemsId: [] }
-
-const isSelectedItem = row => state.selectedItemsId.some(selectedItem => selectedItem === row.id)
-const addSelected = row => setState(prev => {
-    const arr = prev.selectedItemsId
-    arr.push(row.id)
-    return { selectedItemsId: arr }
-})
-const removeSelected = (row) => setState(prev => {
-    const arr = prev.selectedItemsId
-    arr.splice(arr.indexOf(row.id), 1)
-    return { selectedItemsId: arr }
-})
-const onSelect = row => {
-  if (isSelectedItem(row)) {
-    removeSelected(row)
-  } else {
-    addSelected(row)
-  }
-}
-const onSelectAll = rows => {
-  const ids = rows.map(row => row.id)
-  if (state.selectedItemsId.length === ids.length) {
-    setState({ selectedItemsId: [] })
-  } else {
-    setState({ selectedItemsId: ids })
-  }
-}
-
 const initialVariants = [{ grouped: false }]
 
-const makeGroups = () => ({ groupLabels: ['C', 'D', 'Others'], groupCounts: [1,1,12] })
+// Very basic usage only works when Dessert is sorted "asc"
+// Ideally you have to create a logic to create groups with sorted data
+const makeGroups = () => ({ groupLabels: ['C', 'D', 'E', 'Others'], groupCounts: [1,1,1,11] })
 
-/**
- * @param order
- * @param orderBy
- */
-const onSortChange = ({ order, orderBy }) => {
-  setState({ order, orderBy })
-}
+const ExampleTable = ({ variant, ...props }) => {
+  const { selectedItemsId, isSelectedItem, toggleSelectedItem, toggleSelectAllItems } = useSelection()
 
-<Variants initialVariants={initialVariants} screenshotAllVariants>
-  {variant => (
+  const onSortChange = ({ order, orderBy }) => {
+    console.info('order:', order, 'oderBy:', orderBy)
+  }
+
+  return (
     <div style={{ border: "1px solid var(--borderMainColor)", height: 400, width: "100%" }}>
       <VirtualizedTable
+        {...props}
         rows={rows}
         columns={columns}
         groups={variant.grouped ? makeGroups : undefined}
-        defaultOrder={columns[0].id}
-        selectedItems={state.selectedItemsId}
-        isSelectedItem={row => isSelectedItem(row)}
-        onSelect={onSelect}
-        onSelectAll={onSelectAll}
+        selectedItems={selectedItemsId}
+        isSelectedItem={row => isSelectedItem(row.id)}
+        onSelect={(row, event, index) => toggleSelectedItem(row.id)}
+        onSelectAll={rows => toggleSelectAllItems(rows.map(item => item.id))}
         onSortChange={onSortChange}
         componentsProps={{
           rowContent: {
@@ -132,6 +106,25 @@ const onSortChange = ({ order, orderBy }) => {
         }}
       />
     </div>
+  )
+}
+
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <>
+      <Typography variant="h4">Not sorted table</Typography>
+      <div className="u-mt-half" style={{ border: "1px solid var(--borderMainColor)", height: 400, width: "100%" }}>
+        <SelectionProvider>
+          <ExampleTable variant={variant} />
+        </SelectionProvider>
+      </div>
+      <Typography className="u-mt-1" variant="h4">Sorted table</Typography>
+      <div className="u-mt-half" style={{ border: "1px solid var(--borderMainColor)", height: 400, width: "100%" }}>
+        <SelectionProvider>
+          <ExampleTable variant={variant} defaultOrder={columns[0].id} />
+        </SelectionProvider>
+      </div>
+    </>
   )}
 </Variants>
 ```

package/react/Table/Virtualized/FixedHeaderContent.jsx

@@ -23,7 +23,7 @@ const useStyles = makeStyles({
 
 const FixedHeaderContent = ({
   columns,
-  order,
+  orderDirection,
   orderBy,
   rowCount,
   context,
@@ -52,7 +52,7 @@ const FixedHeaderContent = ({
           key={column.id}
           className={classes.visuallyHidden}
           column={column}
-          order={order}
+          orderDirection={orderDirection}
           orderBy={orderBy}
           onClick={() => onClick(column.id)}
         />

package/react/Table/Virtualized/HeadCell.jsx

@@ -11,7 +11,13 @@ const useStyles = makeStyles({
   }
 })
 
-const TableHeadCell = ({ className, column, orderBy, order, onClick }) => {
+const TableHeadCell = ({
+  className,
+  column,
+  orderBy,
+  orderDirection,
+  onClick
+}) => {
   const classes = useStyles({ column })
 
   return (
@@ -20,18 +26,20 @@ const TableHeadCell = ({ className, column, orderBy, order, onClick }) => {
       classes={classes}
       align={column.textAlign ?? 'left'}
       padding={column.disablePadding ? 'none' : 'normal'}
-      sortDirection={orderBy === column.id ? order : false}
+      sortDirection={orderBy === column.id ? orderDirection : false}
     >
       {column.sortable !== false ? (
         <TableSortLabel
           active={orderBy === column.id}
-          direction={orderBy === column.id ? order : 'asc'}
+          direction={orderBy === column.id ? orderDirection : 'asc'}
           onClick={onClick}
         >
           {column.label}
           {orderBy === column.id && (
             <span className={className}>
-              {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+              {orderDirection === 'desc'
+                ? 'sorted descending'
+                : 'sorted ascending'}
             </span>
           )}
         </TableSortLabel>

package/react/Table/Virtualized/helpers.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get'
 
-const descendingComparator = ({ a, b, order, orderBy, lang }) => {
+const descendingComparator = ({ a, b, orderDirection, orderBy, lang }) => {
   const aValue = get(a, orderBy, '')
   const bValue = get(b, orderBy, '')
 
@@ -17,7 +17,7 @@ const descendingComparator = ({ a, b, order, orderBy, lang }) => {
     }
 
     const { compare } = Intl.Collator(lang || 'en', {
-      caseFirst: order === 'asc' ? 'upper' : 'lower'
+      caseFirst: orderDirection === 'asc' ? 'upper' : 'lower'
     })
 
     return compare(bValue, aValue)
@@ -26,10 +26,10 @@ const descendingComparator = ({ a, b, order, orderBy, lang }) => {
   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 getComparator = (orderDirection, orderBy, lang) => {
+  return orderDirection === 'desc'
+    ? (a, b) => descendingComparator({ a, b, orderDirection, orderBy, lang })
+    : (a, b) => -descendingComparator({ a, b, orderDirection, orderBy, lang })
 }
 
 export const stableSort = (array, comparator) => {

package/react/Table/Virtualized/index.jsx

@@ -28,10 +28,12 @@ const VirtualizedTable = forwardRef(
     },
     ref
   ) => {
-    const [order, setOrder] = useState('asc')
+    const [orderDirection, setOrderDirection] = useState('asc')
     const [orderBy, setOrderBy] = useState(defaultOrder)
 
-    const sortedData = stableSort(rows, getComparator(order, orderBy))
+    const sortedData = orderBy
+      ? stableSort(rows, getComparator(orderDirection, orderBy))
+      : rows
     const data = secondarySort ? secondarySort(sortedData) : sortedData
     const { groupLabels, groupCounts } = groups?.(data) || {}
     const isGroupedTable = !!groupCounts
@@ -43,11 +45,11 @@ const VirtualizedTable = forwardRef(
     }
 
     const handleSort = property => {
-      const isAsc = orderBy === property && order === 'asc'
+      const isAsc = orderBy === property && orderDirection === 'asc'
       const newOrder = isAsc ? 'desc' : 'asc'
-      setOrder(newOrder)
+      setOrderDirection(newOrder)
       setOrderBy(property)
-      onSortChange({ order: newOrder, orderBy: property })
+      onSortChange?.({ order: newOrder, orderBy: property })
     }
 
     const handleSelectAll = event => {
@@ -74,7 +76,7 @@ const VirtualizedTable = forwardRef(
             columns={columns}
             rowCount={rows.length}
             context={_context}
-            order={order}
+            orderDirection={orderDirection}
             orderBy={orderBy}
             onClick={handleSort}
             onSelectAllClick={handleSelectAll}
@@ -115,10 +117,12 @@ VirtualizedTable.defaultProps = {
 }
 
 VirtualizedTable.propTypes = {
-  /**
-     Returned object is: PropTypes.shape({ groupLabels: PropTypes.array, groupCounts: PropTypes.array })
-  */
-  groups: PropTypes.func
+  /** Column ID to be used for initiating the sort */
+  defaultOrder: PropTypes.string,
+  /** Returned object is: PropTypes.shape({ groupLabels: PropTypes.array, groupCounts: PropTypes.array }) */
+  groups: PropTypes.func,
+  /** Callback called after the sort */
+  onSortChange: PropTypes.func
 }
 
 export default VirtualizedTable

package/react/providers/Selection/Readme.md

@@ -12,8 +12,8 @@ const Component = () => {
   return (
     <>
       <Typography>selectedItemsId : {JSON.stringify(selectedItemsId)}</Typography>
-      <Button label="Add Item" onClick={() => addSelectedItem({ _id: '01' })} />
-      <Button label="Remove Item" onClick={() => removeSelectedItem({ _id: '01' })} />
+      <Button label="Add Item" onClick={() => addSelectedItem('01')} />
+      <Button label="Remove Item" onClick={() => removeSelectedItem('01')} />
   </>
   )
 }

package/react/providers/Selection/index.jsx

@@ -18,48 +18,47 @@ export const useSelection = () => {
 const SelectionProvider = ({ children }) => {
   const [selectedItemsId, setSelectedItemsId] = useState([])
 
-  const isSelectedItem = item => {
-    return selectedItemsId.some(selectedItemId => selectedItemId === item._id)
+  const isSelectedItem = itemId => {
+    return selectedItemsId.some(selectedItemId => selectedItemId === itemId)
   }
 
   const isSelectionEnabled = selectedItemsId.length > 0
 
-  const addSelectedItem = item => {
-    setSelectedItemsId(prev => [...prev, item._id])
+  const addSelectedItem = itemId => {
+    setSelectedItemsId(prev => [...prev, itemId])
   }
 
-  const removeSelectedItem = item => {
-    setSelectedItemsId(prev => prev.filter(el => el !== item._id))
+  const removeSelectedItem = itemId => {
+    setSelectedItemsId(prev => prev.filter(el => el !== itemId))
   }
 
-  const toggleSelectedItem = item => {
-    if (isSelectedItem(item)) {
-      removeSelectedItem(item)
+  const toggleSelectedItem = itemId => {
+    if (isSelectedItem(itemId)) {
+      removeSelectedItem(itemId)
     } else {
-      addSelectedItem(item)
+      addSelectedItem(itemId)
     }
   }
 
-  const selectAll = items => {
-    const ids = items.map(item => item._id)
-    setSelectedItemsId(ids)
+  const selectAll = itemsId => {
+    setSelectedItemsId(itemsId)
   }
 
   const unselectAll = () => {
     setSelectedItemsId([])
   }
 
-  const isSelectedAllItems = items => {
+  const isSelectedAllItems = itemsId => {
     const a = selectedItemsId.sort()
-    const b = items.map(item => item._id).sort()
+    const b = itemsId.sort()
     return isEqual(a, b)
   }
 
-  const toggleSelectAllItems = items => {
-    if (isSelectedAllItems(items)) {
+  const toggleSelectAllItems = itemsId => {
+    if (isSelectedAllItems(itemsId)) {
       unselectAll()
     } else {
-      selectAll(items)
+      selectAll(itemsId)
     }
   }
 

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

@@ -1,7 +1,7 @@
 export default FixedHeaderContent;
-declare function FixedHeaderContent({ columns, order, orderBy, rowCount, context, onClick, onSelectAllClick }: {
+declare function FixedHeaderContent({ columns, orderDirection, orderBy, rowCount, context, onClick, onSelectAllClick }: {
     columns: any;
-    order: any;
+    orderDirection: any;
     orderBy: any;
     rowCount: any;
     context: any;

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

@@ -21,7 +21,7 @@ var useStyles = makeStyles({
 
 var FixedHeaderContent = function FixedHeaderContent(_ref) {
   var columns = _ref.columns,
-      order = _ref.order,
+      orderDirection = _ref.orderDirection,
       orderBy = _ref.orderBy,
       rowCount = _ref.rowCount,
       context = _ref.context,
@@ -48,7 +48,7 @@ var FixedHeaderContent = function FixedHeaderContent(_ref) {
       key: column.id,
       className: classes.visuallyHidden,
       column: column,
-      order: order,
+      orderDirection: orderDirection,
       orderBy: orderBy,
       onClick: function onClick() {
         return _onClick(column.id);

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

@@ -1,8 +1,8 @@
 export default TableHeadCell;
-declare function TableHeadCell({ className, column, orderBy, order, onClick }: {
+declare function TableHeadCell({ className, column, orderBy, orderDirection, onClick }: {
     className: any;
     column: any;
     orderBy: any;
-    order: any;
+    orderDirection: any;
     onClick: any;
 }): JSX.Element;

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

@@ -21,7 +21,7 @@ var TableHeadCell = function TableHeadCell(_ref3) {
   var className = _ref3.className,
       column = _ref3.column,
       orderBy = _ref3.orderBy,
-      order = _ref3.order,
+      orderDirection = _ref3.orderDirection,
       onClick = _ref3.onClick;
   var classes = useStyles({
     column: column
@@ -31,14 +31,14 @@ var TableHeadCell = function TableHeadCell(_ref3) {
     classes: classes,
     align: (_column$textAlign = column.textAlign) !== null && _column$textAlign !== void 0 ? _column$textAlign : 'left',
     padding: column.disablePadding ? 'none' : 'normal',
-    sortDirection: orderBy === column.id ? order : false
+    sortDirection: orderBy === column.id ? orderDirection : false
   }, column.sortable !== false ? /*#__PURE__*/React.createElement(TableSortLabel, {
     active: orderBy === column.id,
-    direction: orderBy === column.id ? order : 'asc',
+    direction: orderBy === column.id ? orderDirection : 'asc',
     onClick: onClick
   }, column.label, orderBy === column.id && /*#__PURE__*/React.createElement("span", {
     className: className
-  }, order === 'desc' ? 'sorted descending' : 'sorted ascending')) : column.label);
+  }, orderDirection === 'desc' ? 'sorted descending' : 'sorted ascending')) : column.label);
 };
 
 export default TableHeadCell;

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

@@ -1,2 +1,2 @@
-export function getComparator(order: any, orderBy: any, lang: any): (a: any, b: any) => number;
+export function getComparator(orderDirection: any, orderBy: any, lang: any): (a: any, b: any) => number;
 export function stableSort(array: any, comparator: any): any;

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

@@ -3,7 +3,7 @@ import get from 'lodash/get';
 var descendingComparator = function descendingComparator(_ref) {
   var a = _ref.a,
       b = _ref.b,
-      order = _ref.order,
+      orderDirection = _ref.orderDirection,
       orderBy = _ref.orderBy,
       lang = _ref.lang;
   var aValue = get(a, orderBy, '');
@@ -22,7 +22,7 @@ var descendingComparator = function descendingComparator(_ref) {
     }
 
     var _Intl$Collator = Intl.Collator(lang || 'en', {
-      caseFirst: order === 'asc' ? 'upper' : 'lower'
+      caseFirst: orderDirection === 'asc' ? 'upper' : 'lower'
     }),
         compare = _Intl$Collator.compare;
 
@@ -32,12 +32,12 @@ var descendingComparator = function descendingComparator(_ref) {
   return bValue - aValue;
 };
 
-export var getComparator = function getComparator(order, orderBy, lang) {
-  return order === 'desc' ? function (a, b) {
+export var getComparator = function getComparator(orderDirection, orderBy, lang) {
+  return orderDirection === 'desc' ? function (a, b) {
     return descendingComparator({
       a: a,
       b: b,
-      order: order,
+      orderDirection: orderDirection,
       orderBy: orderBy,
       lang: lang
     });
@@ -45,7 +45,7 @@ export var getComparator = function getComparator(order, orderBy, lang) {
     return -descendingComparator({
       a: a,
       b: b,
-      order: order,
+      orderDirection: orderDirection,
       orderBy: orderBy,
       lang: lang
     });

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

@@ -34,15 +34,15 @@ var VirtualizedTable = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   var _useState = useState('asc'),
       _useState2 = _slicedToArray(_useState, 2),
-      order = _useState2[0],
-      setOrder = _useState2[1];
+      orderDirection = _useState2[0],
+      setOrderDirection = _useState2[1];
 
   var _useState3 = useState(defaultOrder),
       _useState4 = _slicedToArray(_useState3, 2),
       orderBy = _useState4[0],
       setOrderBy = _useState4[1];
 
-  var sortedData = stableSort(rows, getComparator(order, orderBy));
+  var sortedData = orderBy ? stableSort(rows, getComparator(orderDirection, orderBy)) : rows;
   var data = secondarySort ? secondarySort(sortedData) : sortedData;
 
   var _ref2 = (groups === null || groups === void 0 ? void 0 : groups(data)) || {},
@@ -60,11 +60,11 @@ var VirtualizedTable = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 
   var handleSort = function handleSort(property) {
-    var isAsc = orderBy === property && order === 'asc';
+    var isAsc = orderBy === property && orderDirection === 'asc';
     var newOrder = isAsc ? 'desc' : 'asc';
-    setOrder(newOrder);
+    setOrderDirection(newOrder);
     setOrderBy(property);
-    onSortChange({
+    onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange({
       order: newOrder,
       orderBy: property
     });
@@ -93,7 +93,7 @@ var VirtualizedTable = /*#__PURE__*/forwardRef(function (_ref, ref) {
         columns: columns,
         rowCount: rows.length,
         context: _context,
-        order: order,
+        orderDirection: orderDirection,
         orderBy: orderBy,
         onClick: handleSort,
         onSelectAllClick: handleSelectAll
@@ -129,9 +129,13 @@ VirtualizedTable.defaultProps = {
   onSelectAll: function onSelectAll() {}
 };
 VirtualizedTable.propTypes = {
-  /**
-     Returned object is: PropTypes.shape({ groupLabels: PropTypes.array, groupCounts: PropTypes.array })
-  */
-  groups: PropTypes.func
+  /** Column ID to be used for initiating the sort */
+  defaultOrder: PropTypes.string,
+
+  /** Returned object is: PropTypes.shape({ groupLabels: PropTypes.array, groupCounts: PropTypes.array }) */
+  groups: PropTypes.func,
+
+  /** Callback called after the sort */
+  onSortChange: PropTypes.func
 };
 export default VirtualizedTable;

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

@@ -24,60 +24,55 @@ var SelectionProvider = function SelectionProvider(_ref) {
       selectedItemsId = _useState2[0],
       setSelectedItemsId = _useState2[1];
 
-  var isSelectedItem = function isSelectedItem(item) {
+  var isSelectedItem = function isSelectedItem(itemId) {
     return selectedItemsId.some(function (selectedItemId) {
-      return selectedItemId === item._id;
+      return selectedItemId === itemId;
     });
   };
 
   var isSelectionEnabled = selectedItemsId.length > 0;
 
-  var addSelectedItem = function addSelectedItem(item) {
+  var addSelectedItem = function addSelectedItem(itemId) {
     setSelectedItemsId(function (prev) {
-      return [].concat(_toConsumableArray(prev), [item._id]);
+      return [].concat(_toConsumableArray(prev), [itemId]);
     });
   };
 
-  var removeSelectedItem = function removeSelectedItem(item) {
+  var removeSelectedItem = function removeSelectedItem(itemId) {
     setSelectedItemsId(function (prev) {
       return prev.filter(function (el) {
-        return el !== item._id;
+        return el !== itemId;
       });
     });
   };
 
-  var toggleSelectedItem = function toggleSelectedItem(item) {
-    if (isSelectedItem(item)) {
-      removeSelectedItem(item);
+  var toggleSelectedItem = function toggleSelectedItem(itemId) {
+    if (isSelectedItem(itemId)) {
+      removeSelectedItem(itemId);
     } else {
-      addSelectedItem(item);
+      addSelectedItem(itemId);
     }
   };
 
-  var selectAll = function selectAll(items) {
-    var ids = items.map(function (item) {
-      return item._id;
-    });
-    setSelectedItemsId(ids);
+  var selectAll = function selectAll(itemsId) {
+    setSelectedItemsId(itemsId);
   };
 
   var unselectAll = function unselectAll() {
     setSelectedItemsId([]);
   };
 
-  var isSelectedAllItems = function isSelectedAllItems(items) {
+  var isSelectedAllItems = function isSelectedAllItems(itemsId) {
     var a = selectedItemsId.sort();
-    var b = items.map(function (item) {
-      return item._id;
-    }).sort();
+    var b = itemsId.sort();
     return isEqual(a, b);
   };
 
-  var toggleSelectAllItems = function toggleSelectAllItems(items) {
-    if (isSelectedAllItems(items)) {
+  var toggleSelectAllItems = function toggleSelectAllItems(itemsId) {
+    if (isSelectedAllItems(itemsId)) {
       unselectAll();
     } else {
-      selectAll(items);
+      selectAll(itemsId);
     }
   };