cozy-ui 130.6.1 → 130.7.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [130.7.1](https://github.com/cozy/cozy-ui/compare/v130.7.0...v130.7.1) (2025-10-09)
+
+
+### Bug Fixes
+
+* **GridListVirtualized:** Avoid useless redering ([6c75a3e](https://github.com/cozy/cozy-ui/commit/6c75a3e))
+
+# [130.7.0](https://github.com/cozy/cozy-ui/compare/v130.6.1...v130.7.0) (2025-10-07)
+
+
+### Features
+
+* Change highlighted item color :sparkles: ([14d2a3f](https://github.com/cozy/cozy-ui/commit/14d2a3f))
+
 ## [130.6.1](https://github.com/cozy/cozy-ui/compare/v130.6.0...v130.6.1) (2025-10-06)
 
 

package/package.json

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

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

@@ -1,59 +1,52 @@
-import React, { forwardRef, useState, useMemo } from 'react'
+import React, { useState, useMemo } from 'react'
 
-import GridItem from './GridItem'
+import virtuosoComponents from './virtuosoComponents'
 import VirtualizedGridList from '../'
 import CustomDragLayer from '../../../utils/Dnd/CustomDrag/CustomDragLayer'
-import DnDConfigWrapper from '../../../utils/Dnd/DnDConfigWrapper'
 
 const VirtualizedGridListDnd = ({
+  items,
   dragProps,
   context,
   itemRenderer,
   children,
-  componentProps = {
-    List: {},
-    Item: {}
-  },
+  componentProps,
   components,
   ...props
 }) => {
   const [itemsInDropProcess, setItemsInDropProcess] = useState([])
 
+  const _components = useMemo(
+    () => ({ ...virtuosoComponents, ...components }),
+    [components]
+  )
+
   const _context = useMemo(
     () => ({
       ...context,
       dragProps,
       itemRenderer,
       itemsInDropProcess,
+      componentProps,
       setItemsInDropProcess,
-      items: props.items
+      items
     }),
-    [context, dragProps, itemRenderer, itemsInDropProcess, props.items]
+    [
+      context,
+      dragProps,
+      itemRenderer,
+      itemsInDropProcess,
+      componentProps,
+      items
+    ]
   )
 
   return (
     <>
       <CustomDragLayer dragId={dragProps.dragId} />
       <VirtualizedGridList
-        components={{
-          Scroller: forwardRef(({ ...scrollerProps }, ref) => (
-            <DnDConfigWrapper ref={ref}>
-              <div {...scrollerProps} ref={ref} />
-            </DnDConfigWrapper>
-          )),
-          Item: ({ context, ...props }) => {
-            const item = context?.items?.[props['data-index']]
-            return (
-              <GridItem
-                item={item}
-                context={context}
-                renderItem={itemRenderer}
-                {...componentProps.Item}
-              />
-            )
-          },
-          ...components
-        }}
+        items={items}
+        components={_components}
         context={_context}
         {...props}
       >

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

@@ -0,0 +1,36 @@
+/* eslint-disable no-unused-vars */ // for unused context
+
+import React, { forwardRef } from 'react'
+
+import GridItem from './GridItem'
+import DnDConfigWrapper from '../../../utils/Dnd/DnDConfigWrapper'
+
+/**
+ Be aware that context is spread to every components but should not be spread to root components
+ so we desctrure it from props, but don't spread to child to avoid its presence in DOM
+*/
+const virtuosoComponents = {
+  Scroller: forwardRef(({ context, ...scrollerProps }, ref) => {
+    return (
+      <DnDConfigWrapper ref={ref}>
+        <div {...scrollerProps} ref={ref} />
+      </DnDConfigWrapper>
+    )
+  }),
+  Item: ({ context, ...props }) => {
+    const item = context.items?.[props['data-index']]
+    const itemRenderer = context.itemRenderer
+    const _props = context.componentProps?.Item || {}
+
+    return (
+      <GridItem
+        item={item}
+        context={context}
+        renderItem={itemRenderer}
+        {..._props}
+      />
+    )
+  }
+}
+
+export default virtuosoComponents

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

@@ -87,10 +87,9 @@ const TableRow = ({ item, context, componentsProps, ...props }) => {
     <TableRowClassic
       {...props}
       ref={node => dragRef(dropRef(node))}
-      selected={isSelected || dropCollect.isOver}
+      selected={isSelected || dropCollect.isOver || isNew}
       className={cx(
-        dragCollect.isDragging ? 'virtualized u-o-50' : 'virtualized',
-        isNew ? 'u-bg-primaryColorLight' : ''
+        dragCollect.isDragging ? 'virtualized u-o-50' : 'virtualized'
       )}
       disabled={isDisabled}
       hover

package/transpiled/react/GridList/Virtualized/Dnd/index.d.ts

@@ -1,13 +1,11 @@
 export default VirtualizedGridListDnd;
-declare function VirtualizedGridListDnd({ dragProps, context, itemRenderer, children, componentProps, components, ...props }: {
+declare function VirtualizedGridListDnd({ items, dragProps, context, itemRenderer, children, componentProps, components, ...props }: {
     [x: string]: any;
+    items: any;
     dragProps: any;
     context: any;
     itemRenderer: any;
     children: any;
-    componentProps?: {
-        List: {};
-        Item: {};
-    } | undefined;
+    componentProps: any;
     components: any;
 }): JSX.Element;

package/transpiled/react/GridList/Virtualized/Dnd/index.js

@@ -2,29 +2,24 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["dragProps", "context", "itemRenderer", "children", "componentProps", "components"],
-    _excluded2 = ["context"];
+var _excluded = ["items", "dragProps", "context", "itemRenderer", "children", "componentProps", "components"];
 
 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, { forwardRef, useState, useMemo } from 'react';
-import GridItem from "cozy-ui/transpiled/react/GridList/Virtualized/Dnd/GridItem";
+import React, { useState, useMemo } from 'react';
+import virtuosoComponents from "cozy-ui/transpiled/react/GridList/Virtualized/Dnd/virtuosoComponents";
 import VirtualizedGridList from "cozy-ui/transpiled/react/GridList/Virtualized";
 import CustomDragLayer from "cozy-ui/transpiled/react/utils/Dnd/CustomDrag/CustomDragLayer";
-import DnDConfigWrapper from "cozy-ui/transpiled/react/utils/Dnd/DnDConfigWrapper";
 
 var VirtualizedGridListDnd = function VirtualizedGridListDnd(_ref) {
-  var dragProps = _ref.dragProps,
+  var items = _ref.items,
+      dragProps = _ref.dragProps,
       context = _ref.context,
       itemRenderer = _ref.itemRenderer,
       children = _ref.children,
-      _ref$componentProps = _ref.componentProps,
-      componentProps = _ref$componentProps === void 0 ? {
-    List: {},
-    Item: {}
-  } : _ref$componentProps,
+      componentProps = _ref.componentProps,
       components = _ref.components,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -33,43 +28,26 @@ var VirtualizedGridListDnd = function VirtualizedGridListDnd(_ref) {
       itemsInDropProcess = _useState2[0],
       setItemsInDropProcess = _useState2[1];
 
+  var _components = useMemo(function () {
+    return _objectSpread(_objectSpread({}, virtuosoComponents), components);
+  }, [components]);
+
   var _context = useMemo(function () {
     return _objectSpread(_objectSpread({}, context), {}, {
       dragProps: dragProps,
       itemRenderer: itemRenderer,
       itemsInDropProcess: itemsInDropProcess,
+      componentProps: componentProps,
       setItemsInDropProcess: setItemsInDropProcess,
-      items: props.items
+      items: items
     });
-  }, [context, dragProps, itemRenderer, itemsInDropProcess, props.items]);
+  }, [context, dragProps, itemRenderer, itemsInDropProcess, componentProps, items]);
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomDragLayer, {
     dragId: dragProps.dragId
   }), /*#__PURE__*/React.createElement(VirtualizedGridList, _extends({
-    components: _objectSpread({
-      Scroller: /*#__PURE__*/forwardRef(function (_ref2, ref) {
-        var scrollerProps = _extends({}, _ref2);
-
-        return /*#__PURE__*/React.createElement(DnDConfigWrapper, {
-          ref: ref
-        }, /*#__PURE__*/React.createElement("div", _extends({}, scrollerProps, {
-          ref: ref
-        })));
-      }),
-      Item: function Item(_ref3) {
-        var _context$items;
-
-        var context = _ref3.context,
-            props = _objectWithoutProperties(_ref3, _excluded2);
-
-        var item = context === null || context === void 0 ? void 0 : (_context$items = context.items) === null || _context$items === void 0 ? void 0 : _context$items[props['data-index']];
-        return /*#__PURE__*/React.createElement(GridItem, _extends({
-          item: item,
-          context: context,
-          renderItem: itemRenderer
-        }, componentProps.Item));
-      }
-    }, components),
+    items: items,
+    components: _components,
     context: _context
   }, props), children));
 };

package/transpiled/react/GridList/Virtualized/Dnd/virtuosoComponents.d.ts

@@ -0,0 +1,9 @@
+export default virtuosoComponents;
+declare namespace virtuosoComponents {
+    const Scroller: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+    function Item({ context, ...props }: {
+        [x: string]: any;
+        context: any;
+    }): JSX.Element;
+}
+import React from "react";

package/transpiled/react/GridList/Virtualized/Dnd/virtuosoComponents.js

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["context"],
+    _excluded2 = ["context"];
+
+/* eslint-disable no-unused-vars */
+// for unused context
+import React, { forwardRef } from 'react';
+import GridItem from "cozy-ui/transpiled/react/GridList/Virtualized/Dnd/GridItem";
+import DnDConfigWrapper from "cozy-ui/transpiled/react/utils/Dnd/DnDConfigWrapper";
+/**
+ Be aware that context is spread to every components but should not be spread to root components
+ so we desctrure it from props, but don't spread to child to avoid its presence in DOM
+*/
+
+var virtuosoComponents = {
+  Scroller: /*#__PURE__*/forwardRef(function (_ref, ref) {
+    var context = _ref.context,
+        scrollerProps = _objectWithoutProperties(_ref, _excluded);
+
+    return /*#__PURE__*/React.createElement(DnDConfigWrapper, {
+      ref: ref
+    }, /*#__PURE__*/React.createElement("div", _extends({}, scrollerProps, {
+      ref: ref
+    })));
+  }),
+  Item: function Item(_ref2) {
+    var _context$items, _context$componentPro;
+
+    var context = _ref2.context,
+        props = _objectWithoutProperties(_ref2, _excluded2);
+
+    var item = (_context$items = context.items) === null || _context$items === void 0 ? void 0 : _context$items[props['data-index']];
+    var itemRenderer = context.itemRenderer;
+
+    var _props = ((_context$componentPro = context.componentProps) === null || _context$componentPro === void 0 ? void 0 : _context$componentPro.Item) || {};
+
+    return /*#__PURE__*/React.createElement(GridItem, _extends({
+      item: item,
+      context: context,
+      renderItem: itemRenderer
+    }, _props));
+  }
+};
+export default virtuosoComponents;

package/transpiled/react/Table/Virtualized/Dnd/TableRow.js

@@ -127,8 +127,8 @@ var TableRow = function TableRow(_ref) {
     ref: function ref(node) {
       return dragRef(dropRef(node));
     },
-    selected: isSelected || dropCollect.isOver,
-    className: cx(dragCollect.isDragging ? 'virtualized u-o-50' : 'virtualized', isNew ? 'u-bg-primaryColorLight' : ''),
+    selected: isSelected || dropCollect.isOver || isNew,
+    className: cx(dragCollect.isDragging ? 'virtualized u-o-50' : 'virtualized'),
     disabled: isDisabled,
     hover: true
   }));