cozy-ui 146.3.0 → 146.5.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+# [146.5.0](https://github.com/cozy/cozy-ui/compare/v146.4.0...v146.5.0) (2026-11-04)
+
+
+### Features
+
+* **ColorList:** Name the colors ([886abac](https://github.com/cozy/cozy-ui/commit/886abac))
+
+# [146.4.0](https://github.com/cozy/cozy-ui/compare/v146.3.1...v146.4.0) (2026-11-04)
+
+
+### Features
+
+* **EditBadge:** Add componentsProps to customize the badge button ([8248bc7](https://github.com/cozy/cozy-ui/commit/8248bc7))
+
+## [146.3.1](https://github.com/cozy/cozy-ui/compare/v146.3.0...v146.3.1) (2026-11-03)
+
+
+### Bug Fixes
+
+* **MemberAutocomplete:** Enable Send only for a text giving members ([6ffaeb0](https://github.com/cozy/cozy-ui/commit/6ffaeb0))
+* **MuiCozyTheme:** Stop the CircularProgress animation in screenshots ([d5025ad](https://github.com/cozy/cozy-ui/commit/d5025ad))
+
 # [146.3.0](https://github.com/cozy/cozy-ui/compare/v146.2.2...v146.3.0) (2026-11-03)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "146.3.0",
+  "version": "146.5.0",
   "description": "Cozy apps UI SDK",
   "engines": {
     "node": "24.x"

package/react/ColorList/Readme.md

@@ -15,8 +15,10 @@ const ColorPickerDemo = ({ variant }) => {
     <div style={{ width: (variant.medium || isMobile) ? '100%' : 200 }}>
       <ColorList
         size={variant.medium ? 'medium' : undefined}
+        getColorLabel={color => `Color ${color}`}
         customColorProps={{
           enabled: true,
+          'aria-label': 'Custom color',
           onClick: () => {}
         }}
         selectedColor={selectedColor}

package/react/ColorList/index.jsx

@@ -15,7 +15,15 @@ const sizeToPx = {
   medium: 41
 }
 
-const ColorList = ({ size, selectedColor, customColorProps, onClick }) => {
+const ColorList = ({
+  size,
+  selectedColor,
+  getColorLabel,
+  customColorProps,
+  onClick
+}) => {
+  const { enabled: isCustomEnabled, ...customButtonProps } =
+    customColorProps ?? {}
   const { isMobile } = useBreakpoints()
 
   const _size = size || (isMobile ? 'medium' : 'small')
@@ -37,6 +45,8 @@ const ColorList = ({ size, selectedColor, customColorProps, onClick }) => {
           <ButtonBase
             className="u-bdrs-circle"
             component="div"
+            aria-label={getColorLabel?.(color) ?? color}
+            aria-pressed={selectedColor?.toUpperCase() === color}
             onClick={() => onClick?.(color)}
           >
             <Avatar color={color} size={avatarSize}>
@@ -49,12 +59,13 @@ const ColorList = ({ size, selectedColor, customColorProps, onClick }) => {
           </ButtonBase>
         </ImageListItem>
       ))}
-      {customColorProps?.enabled && (
+      {isCustomEnabled && (
         <ImageListItem
           className="u-ta-center"
           classes={{ item: 'u-ov-visible' }}
         >
           <Button
+            {...customButtonProps}
             className="u-miw-auto u-mih-auto u-p-0 u-bdrs-circle"
             variant="ghost"
             style={{
@@ -68,7 +79,6 @@ const ColorList = ({ size, selectedColor, customColorProps, onClick }) => {
             }}
             classes={{ label: 'u-flex u-w-auto' }}
             label={<Icon icon={Palette} size={iconSize} color="#000" />}
-            onClick={ev => customColorProps?.onClick(ev)}
           />
         </ImageListItem>
       )}
@@ -79,9 +89,14 @@ const ColorList = ({ size, selectedColor, customColorProps, onClick }) => {
 ColorList.propTypes = {
   size: propTypes.oneOf(['small', 'medium']),
   selectedColor: propTypes.string,
+  /** Accessible name of a color. Defaults to its hexadecimal code */
+  getColorLabel: propTypes.func,
   customColorProps: propTypes.shape({
     enabled: propTypes.bool,
-    onClick: propTypes.func
+    onClick: propTypes.func,
+    'aria-label': propTypes.string,
+    'aria-pressed': propTypes.bool,
+    'data-testid': propTypes.string
   }),
   onClick: propTypes.func
 }

package/react/ColorList/index.spec.jsx

@@ -0,0 +1,56 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import React from 'react'
+
+import ColorList from '.'
+import { BreakpointsProvider } from '../providers/Breakpoints'
+
+const setup = props =>
+  render(
+    <BreakpointsProvider>
+      <ColorList {...props} />
+    </BreakpointsProvider>
+  )
+
+describe('ColorList', () => {
+  it('lets a keyboard reach and pick a color', () => {
+    const onClick = jest.fn()
+    setup({ onClick })
+
+    const color = screen.getByRole('button', { name: '#273891' })
+    expect(color.tabIndex).toBe(0)
+    fireEvent.keyDown(color, { key: 'Enter' })
+    expect(onClick).toHaveBeenCalledWith('#273891')
+  })
+
+  it('names its colors and tells the selected one, whatever its case', () => {
+    setup({
+      selectedColor: '#7e57e3',
+      getColorLabel: color => (color === '#7E57E3' ? 'Purple' : color)
+    })
+
+    expect(screen.getByRole('button', { name: 'Purple' })).toHaveAttribute(
+      'aria-pressed',
+      'true'
+    )
+    expect(screen.getByRole('button', { name: '#273891' })).toHaveAttribute(
+      'aria-pressed',
+      'false'
+    )
+  })
+
+  it('passes its props to the custom color button', () => {
+    const onClick = jest.fn()
+    setup({
+      customColorProps: {
+        enabled: true,
+        onClick,
+        'aria-label': 'Custom color',
+        'data-testid': 'custom'
+      }
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Custom color' }))
+    expect(onClick).toHaveBeenCalledTimes(1)
+    expect(screen.queryByTestId('custom')).toBeInTheDocument()
+  })
+})

package/react/EditBadge/Readme.md

@@ -14,6 +14,7 @@ import Avatar from 'cozy-ui/transpiled/react/Avatar'
       src={timestamp => ""}
       onUpload={file => {}}
       onDelete={() => {}}
+      componentsProps={{ button: { 'aria-label': 'Edit avatar' } }}
     >
       <Avatar size={94} alt="Avatar" />
     </EditBadge>

package/react/EditBadge/index.jsx

@@ -1,4 +1,5 @@
 import { Icon, Pen } from '@linagora/twake-icons'
+import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useState, useRef } from 'react'
 
@@ -12,6 +13,7 @@ const EditBadge = ({
   onUpload,
   onDelete,
   anchorOrigin,
+  componentsProps,
   children,
   ...props
 }) => {
@@ -28,9 +30,13 @@ const EditBadge = ({
       badgeContent={
         <>
           <Button
+            {...componentsProps?.button}
             ref={menuAnchorRef}
             component="div"
-            className="u-miw-auto u-w-2-half u-h-2-half u-bdrs-circle"
+            className={cx(
+              'u-miw-auto u-w-2-half u-h-2-half u-bdrs-circle',
+              componentsProps?.button?.className
+            )}
             classes={{ label: 'u-flex u-w-auto' }}
             style={{
               outline: '4px solid var(--paperBackgroundColor)'
@@ -74,7 +80,11 @@ EditBadge.defaultProps = {
 EditBadge.propTypes = {
   src: PropTypes.func.isRequired,
   onUpload: PropTypes.func.isRequired,
-  onDelete: PropTypes.func.isRequired
+  onDelete: PropTypes.func.isRequired,
+  componentsProps: PropTypes.shape({
+    /** Props spread to the badge button */
+    button: PropTypes.object
+  })
 }
 
 export default EditBadge

package/react/MemberAutocomplete/MemberAutocomplete.spec.jsx

@@ -80,4 +80,28 @@ describe('MemberAutocomplete', () => {
 
     expect(input.value).toBe('bo')
   })
+
+  it('enables Send only for a typed text that gives members', () => {
+    const getMembersWithDomain = text =>
+      (text.match(/\S+@\S+\.\S+/g) || []).map(email => ({ id: email }))
+    render(
+      <DemoProvider>
+        <MemberAutocomplete
+          value={[]}
+          getMembersFromText={getMembersWithDomain}
+          placeholder="Add people"
+          onChange={() => {}}
+          onSubmit={() => {}}
+        />
+      </DemoProvider>
+    )
+    const input = screen.getByPlaceholderText('Add people')
+    const send = screen.getByRole('button', { name: 'Send' })
+
+    fireEvent.change(input, { target: { value: 'bob@example' } })
+    expect(send).toBeDisabled()
+
+    fireEvent.change(input, { target: { value: 'bob@example.com' } })
+    expect(send).toBeEnabled()
+  })
 })

package/react/MemberAutocomplete/index.jsx

@@ -6,7 +6,7 @@ import { useI18n, useExtendI18n } from 'twake-i18n'
 import MemberAutocompleteActions from './MemberAutocompleteActions'
 import MemberChip from './MemberChip'
 import MemberSuggestion from './MemberSuggestion'
-import { getUnpickedMembers, isEmailLike } from './helpers'
+import { getUnpickedMembers } from './helpers'
 import { locales } from './locales'
 import { useMemberInput } from './useMemberInput'
 import { useMemberSuggestions } from './useMemberSuggestions'
@@ -89,6 +89,7 @@ const MemberAutocomplete = ({
     debounceMs
   })
   const {
+    isTextAddedOnBlur,
     handleChange,
     handleInputChange,
     handleKeyDown,
@@ -112,7 +113,7 @@ const MemberAutocomplete = ({
   const titleId = `${inputId}-title`
   const isTitleShown = title !== undefined
   const isSubmitShown = onSubmit !== undefined
-  const hasMembersToSend = value.length > 0 || isEmailLike(inputValue)
+  const hasMembersToSend = value.length > 0 || isTextAddedOnBlur
   const isLoading = loading || isFetching
   const unpickedSuggestions = getUnpickedMembers(suggestions, value)
   const fieldPlaceholder = value.length === 0 ? placeholder : undefined

package/react/MemberAutocomplete/useMemberInput.js

@@ -64,13 +64,17 @@ export const useMemberInput = ({
     }
   }
 
+  const isTextAddedOnBlur =
+    isEmailLike(inputValue) && getKnownMembersFromText(inputValue).length > 0
+
   const handleBlur = () => {
-    if (isEmailLike(inputValue) && addMembersFromText(inputValue)) {
+    if (isTextAddedOnBlur && addMembersFromText(inputValue)) {
       onInputValueChange('')
     }
   }
 
   return {
+    isTextAddedOnBlur,
     handleChange,
     handleInputChange,
     handleKeyDown,

package/react/MuiCozyTheme/makeTheme.jsx

@@ -35,6 +35,14 @@ const themesCommonConfig = {
   ...(isTesting() && { transitions: { create: () => 'none' } })
 }
 
+// Keyframe animations ignore `transitions`, so they would change each screenshot
+const testingOverrides = {
+  MuiCircularProgress: {
+    indeterminate: { animation: 'none' },
+    circleIndeterminate: { animation: 'none' }
+  }
+}
+
 export const makeTheme = type => {
   // to hold the values of css variables, recoverable by getCssVariableValue()
   createNodeWithThemeCssVars(type)
@@ -48,7 +56,10 @@ export const makeTheme = type => {
     palette
   })
 
-  const overrides = makeOverridesByTheme(theme)[type]
+  const overrides = {
+    ...makeOverridesByTheme(theme)[type],
+    ...(isTesting() && testingOverrides)
+  }
 
   return {
     ...theme,

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

@@ -1,9 +1,10 @@
 export { COLORS };
 export default ColorList;
 import { COLORS } from "./helpers";
-declare function ColorList({ size, selectedColor, customColorProps, onClick }: {
+declare function ColorList({ size, selectedColor, getColorLabel, customColorProps, onClick }: {
     size: any;
     selectedColor: any;
+    getColorLabel: any;
     customColorProps: any;
     onClick: any;
 }): JSX.Element;
@@ -11,9 +12,13 @@ declare namespace ColorList {
     namespace propTypes {
         const size: propTypes.Requireable<string>;
         const selectedColor: propTypes.Requireable<string>;
+        const getColorLabel: propTypes.Requireable<(...args: any[]) => any>;
         const customColorProps: propTypes.Requireable<propTypes.InferProps<{
             enabled: propTypes.Requireable<boolean>;
             onClick: propTypes.Requireable<(...args: any[]) => any>;
+            'aria-label': propTypes.Requireable<string>;
+            'aria-pressed': propTypes.Requireable<boolean>;
+            'data-testid': propTypes.Requireable<string>;
         }>>;
         const onClick: propTypes.Requireable<(...args: any[]) => any>;
     }

package/transpiled/react/ColorList/index.js

@@ -1,3 +1,6 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["enabled"];
 import { Icon, Check, Palette } from '@linagora/twake-icons';
 import propTypes from 'prop-types';
 import React from 'react';
@@ -16,9 +19,14 @@ var sizeToPx = {
 var ColorList = function ColorList(_ref) {
   var size = _ref.size,
       selectedColor = _ref.selectedColor,
+      getColorLabel = _ref.getColorLabel,
       customColorProps = _ref.customColorProps,
       _onClick = _ref.onClick;
 
+  var _ref2 = customColorProps !== null && customColorProps !== void 0 ? customColorProps : {},
+      isCustomEnabled = _ref2.enabled,
+      customButtonProps = _objectWithoutProperties(_ref2, _excluded);
+
   var _useBreakpoints = useBreakpoints(),
       isMobile = _useBreakpoints.isMobile;
 
@@ -31,6 +39,8 @@ var ColorList = function ColorList(_ref) {
     rowHeight: avatarSize,
     gap: _size === 'medium' ? 16 : 5
   }, COLORS.map(function (color) {
+    var _getColorLabel;
+
     return /*#__PURE__*/React.createElement(ImageListItem, {
       key: color,
       className: "u-ta-center",
@@ -40,6 +50,8 @@ var ColorList = function ColorList(_ref) {
     }, /*#__PURE__*/React.createElement(ButtonBase, {
       className: "u-bdrs-circle",
       component: "div",
+      "aria-label": (_getColorLabel = getColorLabel === null || getColorLabel === void 0 ? void 0 : getColorLabel(color)) !== null && _getColorLabel !== void 0 ? _getColorLabel : color,
+      "aria-pressed": (selectedColor === null || selectedColor === void 0 ? void 0 : selectedColor.toUpperCase()) === color,
       onClick: function onClick() {
         return _onClick === null || _onClick === void 0 ? void 0 : _onClick(color);
       }
@@ -50,12 +62,12 @@ var ColorList = function ColorList(_ref) {
       icon: Check,
       size: iconSize
     }) : ' ')));
-  }), (customColorProps === null || customColorProps === void 0 ? void 0 : customColorProps.enabled) && /*#__PURE__*/React.createElement(ImageListItem, {
+  }), isCustomEnabled && /*#__PURE__*/React.createElement(ImageListItem, {
     className: "u-ta-center",
     classes: {
       item: 'u-ov-visible'
     }
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(Button, _extends({}, customButtonProps, {
     className: "u-miw-auto u-mih-auto u-p-0 u-bdrs-circle",
     variant: "ghost",
     style: {
@@ -73,19 +85,22 @@ var ColorList = function ColorList(_ref) {
       icon: Palette,
       size: iconSize,
       color: "#000"
-    }),
-    onClick: function onClick(ev) {
-      return customColorProps === null || customColorProps === void 0 ? void 0 : customColorProps.onClick(ev);
-    }
-  })));
+    })
+  }))));
 };
 
 ColorList.propTypes = {
   size: propTypes.oneOf(['small', 'medium']),
   selectedColor: propTypes.string,
+
+  /** Accessible name of a color. Defaults to its hexadecimal code */
+  getColorLabel: propTypes.func,
   customColorProps: propTypes.shape({
     enabled: propTypes.bool,
-    onClick: propTypes.func
+    onClick: propTypes.func,
+    'aria-label': propTypes.string,
+    'aria-pressed': propTypes.bool,
+    'data-testid': propTypes.string
   }),
   onClick: propTypes.func
 };

package/transpiled/react/ColorList/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,10 +1,11 @@
 export default EditBadge;
-declare function EditBadge({ src, onUpload, onDelete, anchorOrigin, children, ...props }: {
+declare function EditBadge({ src, onUpload, onDelete, anchorOrigin, componentsProps, children, ...props }: {
     [x: string]: any;
     src: any;
     onUpload: any;
     onDelete: any;
     anchorOrigin: any;
+    componentsProps: any;
     children: any;
 }): JSX.Element;
 declare namespace EditBadge {
@@ -18,6 +19,10 @@ declare namespace EditBadge {
         const src: PropTypes.Validator<(...args: any[]) => any>;
         const onUpload: PropTypes.Validator<(...args: any[]) => any>;
         const onDelete: PropTypes.Validator<(...args: any[]) => any>;
+        const componentsProps: PropTypes.Requireable<PropTypes.InferProps<{
+            /** Props spread to the badge button */
+            button: PropTypes.Requireable<object>;
+        }>>;
     }
 }
 import PropTypes from "prop-types";

package/transpiled/react/EditBadge/index.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["src", "onUpload", "onDelete", "anchorOrigin", "children"];
+var _excluded = ["src", "onUpload", "onDelete", "anchorOrigin", "componentsProps", "children"];
 import { Icon, Pen } from '@linagora/twake-icons';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useState, useRef } from 'react';
 import EditMenu from "cozy-ui/transpiled/react/EditBadge/EditMenu";
@@ -11,10 +12,13 @@ import Badge from "cozy-ui/transpiled/react/Badge";
 import Button from "cozy-ui/transpiled/react/Buttons";
 
 var EditBadge = function EditBadge(_ref) {
+  var _componentsProps$butt;
+
   var src = _ref.src,
       onUpload = _ref.onUpload,
       onDelete = _ref.onDelete,
       anchorOrigin = _ref.anchorOrigin,
+      componentsProps = _ref.componentsProps,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -37,10 +41,10 @@ var EditBadge = function EditBadge(_ref) {
   var menuAnchorRef = useRef(null);
   return /*#__PURE__*/React.createElement(Badge, _extends({}, props, {
     anchorOrigin: anchorOrigin,
-    badgeContent: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    badgeContent: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, _extends({}, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.button, {
       ref: menuAnchorRef,
       component: "div",
-      className: "u-miw-auto u-w-2-half u-h-2-half u-bdrs-circle",
+      className: cx('u-miw-auto u-w-2-half u-h-2-half u-bdrs-circle', componentsProps === null || componentsProps === void 0 ? void 0 : (_componentsProps$butt = componentsProps.button) === null || _componentsProps$butt === void 0 ? void 0 : _componentsProps$butt.className),
       classes: {
         label: 'u-flex u-w-auto'
       },
@@ -56,7 +60,7 @@ var EditBadge = function EditBadge(_ref) {
           return !v;
         });
       }
-    }), /*#__PURE__*/React.createElement(EditMenu, {
+    })), /*#__PURE__*/React.createElement(EditMenu, {
       anchorRef: menuAnchorRef.current,
       status: status,
       showMenu: showMenu,
@@ -83,6 +87,10 @@ EditBadge.defaultProps = {
 EditBadge.propTypes = {
   src: PropTypes.func.isRequired,
   onUpload: PropTypes.func.isRequired,
-  onDelete: PropTypes.func.isRequired
+  onDelete: PropTypes.func.isRequired,
+  componentsProps: PropTypes.shape({
+    /** Props spread to the badge button */
+    button: PropTypes.object
+  })
 };
 export default EditBadge;

package/transpiled/react/MemberAutocomplete/index.js

@@ -13,7 +13,7 @@ import { useI18n, useExtendI18n } from 'twake-i18n';
 import MemberAutocompleteActions from "cozy-ui/transpiled/react/MemberAutocomplete/MemberAutocompleteActions";
 import MemberChip from "cozy-ui/transpiled/react/MemberAutocomplete/MemberChip";
 import MemberSuggestion from "cozy-ui/transpiled/react/MemberAutocomplete/MemberSuggestion";
-import { getUnpickedMembers, isEmailLike } from "cozy-ui/transpiled/react/MemberAutocomplete/helpers";
+import { getUnpickedMembers } from "cozy-ui/transpiled/react/MemberAutocomplete/helpers";
 import { locales } from "cozy-ui/transpiled/react/MemberAutocomplete/locales";
 import { useMemberInput } from "cozy-ui/transpiled/react/MemberAutocomplete/useMemberInput";
 import { useMemberSuggestions } from "cozy-ui/transpiled/react/MemberAutocomplete/useMemberSuggestions";
@@ -133,6 +133,7 @@ var MemberAutocomplete = function MemberAutocomplete(_ref2) {
     onInputValueChange: setInputValue,
     onChange: onChange
   }),
+      isTextAddedOnBlur = _useMemberInput.isTextAddedOnBlur,
       handleChange = _useMemberInput.handleChange,
       handleInputChange = _useMemberInput.handleInputChange,
       handleKeyDown = _useMemberInput.handleKeyDown,
@@ -148,7 +149,7 @@ var MemberAutocomplete = function MemberAutocomplete(_ref2) {
   var titleId = "".concat(inputId, "-title");
   var isTitleShown = title !== undefined;
   var isSubmitShown = onSubmit !== undefined;
-  var hasMembersToSend = value.length > 0 || isEmailLike(inputValue);
+  var hasMembersToSend = value.length > 0 || isTextAddedOnBlur;
   var isLoading = loading || isFetching;
   var unpickedSuggestions = getUnpickedMembers(suggestions, value);
   var fieldPlaceholder = value.length === 0 ? placeholder : undefined;

package/transpiled/react/MemberAutocomplete/useMemberInput.d.ts

@@ -6,6 +6,7 @@ export function useMemberInput({ inputValue, value, suggestions, getMembersFromT
     onInputValueChange: Function;
     onChange: Function;
 }): {
+    isTextAddedOnBlur: boolean;
     handleChange: (event: any, newValue: any, reason: any) => void;
     handleInputChange: (event: any, newInputValue: any, reason: any) => void;
     handleKeyDown: (event: any) => void;

package/transpiled/react/MemberAutocomplete/useMemberInput.js

@@ -60,13 +60,16 @@ export var useMemberInput = function useMemberInput(_ref) {
     }
   };
 
+  var isTextAddedOnBlur = isEmailLike(inputValue) && getKnownMembersFromText(inputValue).length > 0;
+
   var handleBlur = function handleBlur() {
-    if (isEmailLike(inputValue) && addMembersFromText(inputValue)) {
+    if (isTextAddedOnBlur && addMembersFromText(inputValue)) {
       onInputValueChange('');
     }
   };
 
   return {
+    isTextAddedOnBlur: isTextAddedOnBlur,
     handleChange: handleChange,
     handleInputChange: handleInputChange,
     handleKeyDown: handleKeyDown,

package/transpiled/react/MuiCozyTheme/makeTheme.js

@@ -43,8 +43,19 @@ var themesCommonConfig = _objectSpread({
       return 'none';
     }
   }
-});
+}); // Keyframe animations ignore `transitions`, so they would change each screenshot
 
+
+var testingOverrides = {
+  MuiCircularProgress: {
+    indeterminate: {
+      animation: 'none'
+    },
+    circleIndeterminate: {
+      animation: 'none'
+    }
+  }
+};
 export var makeTheme = function makeTheme(type) {
   // to hold the values of css variables, recoverable by getCssVariableValue()
   createNodeWithThemeCssVars(type);
@@ -55,7 +66,9 @@ export var makeTheme = function makeTheme(type) {
     type: type,
     palette: palette
   }));
-  var overrides = makeOverridesByTheme(theme)[type];
+
+  var overrides = _objectSpread(_objectSpread({}, makeOverridesByTheme(theme)[type]), isTesting() && testingOverrides);
+
   return _objectSpread(_objectSpread({}, theme), {}, {
     overrides: overrides
   });