cozy-ui 130.4.0 → 130.6.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [130.6.0](https://github.com/cozy/cozy-ui/compare/v130.5.0...v130.6.0) (2025-10-02)
+
+
+### Features
+
+* **AlertProvider:** Add `noClickAway` and `noTimeOut` prop ([eee29d0](https://github.com/cozy/cozy-ui/commit/eee29d0))
+
+# [130.5.0](https://github.com/cozy/cozy-ui/compare/v130.4.0...v130.5.0) (2025-10-01)
+
+
+### Features
+
+* **TableRow, VirtualizedTable:** add isNewItem prop to track new items and highlight them ([d60d485](https://github.com/cozy/cozy-ui/commit/d60d485))
+
 # [130.4.0](https://github.com/cozy/cozy-ui/compare/v130.3.1...v130.4.0) (2025-10-01)
 
 

package/package.json

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

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

@@ -1,4 +1,6 @@
 import React, { useEffect } from 'react'
+import cx from 'classnames'
+
 import { useDrag, useDrop } from 'react-dnd'
 import { getEmptyImage } from 'react-dnd-html5-backend'
 
@@ -20,6 +22,7 @@ const TableRow = ({ item, context, componentsProps, ...props }) => {
   const isSelected = context?.isSelectedItem(item)
   const isDisabled =
     itemsInDropProcess.includes(item._id) || componentsProps?.tableRow?.disabled
+  const isNew = context?.isNewItem?.(item)
 
   const [dragCollect, dragRef, dragRefPreview] = useDrag(
     () => ({
@@ -85,7 +88,10 @@ const TableRow = ({ item, context, componentsProps, ...props }) => {
       {...props}
       ref={node => dragRef(dropRef(node))}
       selected={isSelected || dropCollect.isOver}
-      className={dragCollect.isDragging ? 'virtualized u-o-50' : 'virtualized'}
+      className={cx(
+        dragCollect.isDragging ? 'virtualized u-o-50' : 'virtualized',
+        isNew ? 'u-bg-primaryColorLight' : ''
+      )}
       disabled={isDisabled}
       hover
     />

package/react/Table/Virtualized/index.jsx

@@ -24,6 +24,7 @@ const VirtualizedTable = forwardRef(
       context,
       components,
       onSortChange,
+      isNewItem,
       ...props
     },
     ref
@@ -43,7 +44,8 @@ const VirtualizedTable = forwardRef(
       ...context,
       ...(isGroupedTable && { data }), // we use directly `data` prop if no groupCounts
       isSelectedItem,
-      selectedItems
+      selectedItems,
+      isNewItem
     }
 
     const handleSort = property => {
@@ -141,7 +143,9 @@ VirtualizedTable.propTypes = {
   /** Function to determine if a row is selected */
   isSelectedItem: PropTypes.func,
   /** Callback called after the sort */
-  onSortChange: PropTypes.func
+  onSortChange: PropTypes.func,
+  /** Function to determine if a row is new */
+  isNewItem: PropTypes.func
 }
 
 export default VirtualizedTable

package/react/providers/Alert/Readme.md

@@ -15,6 +15,8 @@ const initialVariants = [{
   square: false,
   standard: false,
   outlined: false,
+  noClickAway: false,
+  noTimeOut: false,
   close: true
 }]
 
@@ -23,7 +25,7 @@ const Component = ({ variant }) => {
 
   return (
     <Button
-      label="show alert"
+      label="Show alert"
       onClick={() =>
         showAlert({
           title: variant.title ? 'Alert title' : undefined,
@@ -42,6 +44,8 @@ const Component = ({ variant }) => {
             : variant.largeIcon
             ? <Icon icon={DeviceLaptopIcon} size={32} />
             : undefined,
+          noClickAway: variant.noClickAway,
+          noTimeOut: variant.noTimeOut,
           onClose: variant.close ? () => {} : undefined
         })
       }

package/react/providers/Alert/helpers.js

@@ -0,0 +1,13 @@
+export const handleClose = (state, setState) => (event, reason) => {
+  const { noClickAway, noTimeOut } = state
+
+  if (reason === 'clickaway' && noClickAway) {
+    return
+  }
+
+  if (reason === 'timeout' && noTimeOut) {
+    return
+  }
+
+  return setState({ ...state, open: false })
+}

package/react/providers/Alert/index.jsx

@@ -1,5 +1,6 @@
 import React, { createContext, useState, useContext, useMemo } from 'react'
 
+import { handleClose } from './helpers'
 import Alert from '../../Alert'
 import AlertTitle from '../../AlertTitle'
 import Snackbar from '../../Snackbar'
@@ -32,13 +33,19 @@ const defaultState = {
   duration: null,
   open: false
 }
-const handleClose = (state, setState) => () => {
-  return setState({ ...state, open: false })
-}
 
 const AlertProvider = ({ children }) => {
   const [state, setState] = useState(defaultState)
-  const { open, message, title, duration, ...alertProps } = state
+  // noTimeOut and noClickAway are destructured to not being passed to the DOM through ...alertProps
+  const {
+    open,
+    message,
+    title,
+    duration,
+    noTimeOut, // eslint-disable-line no-unused-vars
+    noClickAway, // eslint-disable-line no-unused-vars
+    ...alertProps
+  } = state
 
   const value = useMemo(
     () => ({
@@ -63,7 +70,7 @@ const AlertProvider = ({ children }) => {
         <Alert
           variant="filled"
           elevation={6}
-          onClose={handleClose(state, setState)}
+          onClose={ev => handleClose(state, setState)(ev, 'click')}
           {...alertProps}
         >
           {title && <AlertTitle>{title}</AlertTitle>}

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

@@ -5,12 +5,13 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["item", "context", "componentsProps"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useEffect } from 'react';
+import cx from 'classnames';
 import { useDrag, useDrop } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 import TableRowClassic from "cozy-ui/transpiled/react/TableRow";
 
 var TableRow = function TableRow(_ref) {
-  var _componentsProps$tabl;
+  var _componentsProps$tabl, _context$isNewItem;
 
   var item = _ref.item,
       context = _ref.context,
@@ -27,6 +28,7 @@ var TableRow = function TableRow(_ref) {
       dragId = dragProps.dragId;
   var isSelected = context === null || context === void 0 ? void 0 : context.isSelectedItem(item);
   var isDisabled = itemsInDropProcess.includes(item._id) || (componentsProps === null || componentsProps === void 0 ? void 0 : (_componentsProps$tabl = componentsProps.tableRow) === null || _componentsProps$tabl === void 0 ? void 0 : _componentsProps$tabl.disabled);
+  var isNew = context === null || context === void 0 ? void 0 : (_context$isNewItem = context.isNewItem) === null || _context$isNewItem === void 0 ? void 0 : _context$isNewItem.call(context, item);
 
   var _useDrag = useDrag(function () {
     return {
@@ -126,7 +128,7 @@ var TableRow = function TableRow(_ref) {
       return dragRef(dropRef(node));
     },
     selected: isSelected || dropCollect.isOver,
-    className: dragCollect.isDragging ? 'virtualized u-o-50' : 'virtualized',
+    className: cx(dragCollect.isDragging ? 'virtualized u-o-50' : 'virtualized', isNew ? 'u-bg-primaryColorLight' : ''),
     disabled: isDisabled,
     hover: true
   }));

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

@@ -2,7 +2,7 @@ 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 = ["rows", "columns", "groups", "defaultOrder", "secondarySort", "selectedItems", "onSelect", "onSelectAll", "isSelectedItem", "componentsProps", "context", "components", "onSortChange"];
+var _excluded = ["rows", "columns", "groups", "defaultOrder", "secondarySort", "selectedItems", "onSelect", "onSelectAll", "isSelectedItem", "componentsProps", "context", "components", "onSortChange", "isNewItem"];
 
 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; }
 
@@ -32,6 +32,7 @@ var VirtualizedTable = /*#__PURE__*/forwardRef(function (_ref, ref) {
       context = _ref.context,
       components = _ref.components,
       onSortChange = _ref.onSortChange,
+      isNewItem = _ref.isNewItem,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = useState((_defaultOrder$directi = defaultOrder === null || defaultOrder === void 0 ? void 0 : defaultOrder.direction) !== null && _defaultOrder$directi !== void 0 ? _defaultOrder$directi : 'asc'),
@@ -58,7 +59,8 @@ var VirtualizedTable = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }), {}, {
     // we use directly `data` prop if no groupCounts
     isSelectedItem: isSelectedItem,
-    selectedItems: selectedItems
+    selectedItems: selectedItems,
+    isNewItem: isNewItem
   });
 
   var handleSort = function handleSort(property) {
@@ -162,6 +164,9 @@ VirtualizedTable.propTypes = {
   isSelectedItem: PropTypes.func,
 
   /** Callback called after the sort */
-  onSortChange: PropTypes.func
+  onSortChange: PropTypes.func,
+
+  /** Function to determine if a row is new */
+  isNewItem: PropTypes.func
 };
 export default VirtualizedTable;

package/transpiled/react/providers/Alert/helpers.d.ts

@@ -0,0 +1 @@
+export function handleClose(state: any, setState: any): (event: any, reason: any) => any;

package/transpiled/react/providers/Alert/helpers.js

@@ -0,0 +1,24 @@
+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; }
+
+export var handleClose = function handleClose(state, setState) {
+  return function (event, reason) {
+    var noClickAway = state.noClickAway,
+        noTimeOut = state.noTimeOut;
+
+    if (reason === 'clickaway' && noClickAway) {
+      return;
+    }
+
+    if (reason === 'timeout' && noTimeOut) {
+      return;
+    }
+
+    return setState(_objectSpread(_objectSpread({}, state), {}, {
+      open: false
+    }));
+  };
+};

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

@@ -1,14 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["open", "message", "title", "duration"];
+var _excluded = ["open", "message", "title", "duration", "noTimeOut", "noClickAway"];
 
 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, { createContext, useState, useContext, useMemo } from 'react';
+import { handleClose } from "cozy-ui/transpiled/react/providers/Alert/helpers";
 import Alert from "cozy-ui/transpiled/react/Alert";
 import AlertTitle from "cozy-ui/transpiled/react/AlertTitle";
 import Snackbar from "cozy-ui/transpiled/react/Snackbar";
@@ -42,26 +43,21 @@ var defaultState = {
   open: false
 };
 
-var handleClose = function handleClose(state, setState) {
-  return function () {
-    return setState(_objectSpread(_objectSpread({}, state), {}, {
-      open: false
-    }));
-  };
-};
-
 var AlertProvider = function AlertProvider(_ref) {
   var children = _ref.children;
 
   var _useState = useState(defaultState),
       _useState2 = _slicedToArray(_useState, 2),
       state = _useState2[0],
-      setState = _useState2[1];
+      setState = _useState2[1]; // noTimeOut and noClickAway are destructured to not being passed to the DOM through ...alertProps
+
 
   var open = state.open,
       message = state.message,
       title = state.title,
       duration = state.duration,
+      noTimeOut = state.noTimeOut,
+      noClickAway = state.noClickAway,
       alertProps = _objectWithoutProperties(state, _excluded);
 
   var value = useMemo(function () {
@@ -85,7 +81,9 @@ var AlertProvider = function AlertProvider(_ref) {
   }, /*#__PURE__*/React.createElement(Alert, _extends({
     variant: "filled",
     elevation: 6,
-    onClose: handleClose(state, setState)
+    onClose: function onClose(ev) {
+      return handleClose(state, setState)(ev, 'click');
+    }
   }, alertProps), title && /*#__PURE__*/React.createElement(AlertTitle, null, title), message)));
 };