decap-cms-widget-list 3.2.3-beta.0 → 3.4.0

package/dist/esm/index.js

@@ -1,30 +1,19 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.DecapCmsWidgetList = void 0;
-var _decapCmsWidgetObject = _interopRequireDefault(require("decap-cms-widget-object"));
-var _ListControl = _interopRequireDefault(require("./ListControl"));
-var _schema = _interopRequireDefault(require("./schema"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-const previewComponent = _decapCmsWidgetObject.default.previewComponent;
+import DecapCmsWidgetObject from 'decap-cms-widget-object';
+import controlComponent from './ListControl';
+import schema from './schema';
+const previewComponent = DecapCmsWidgetObject.previewComponent;
 function Widget(opts = {}) {
-  return _objectSpread({
+  return {
     name: 'list',
-    controlComponent: _ListControl.default,
+    controlComponent,
     previewComponent,
-    schema: _schema.default
-  }, opts);
+    schema,
+    ...opts
+  };
 }
-const DecapCmsWidgetList = exports.DecapCmsWidgetList = {
+export const DecapCmsWidgetList = {
   Widget,
-  controlComponent: _ListControl.default,
+  controlComponent,
   previewComponent
 };
-var _default = exports.default = DecapCmsWidgetList;
+export default DecapCmsWidgetList;

package/dist/esm/schema.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = exports.default = {
+export default {
   properties: {
     allow_add: {
       type: 'boolean'

package/dist/esm/typedListHelpers.js

@@ -1,23 +1,13 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TYPE_KEY = exports.TYPES_KEY = exports.DEFAULT_TYPE_KEY = void 0;
-exports.getErrorMessageForTypedFieldAndValue = getErrorMessageForTypedFieldAndValue;
-exports.getTypedFieldForValue = getTypedFieldForValue;
-exports.resolveFieldKeyType = resolveFieldKeyType;
-exports.resolveFunctionForTypedField = resolveFunctionForTypedField;
-const TYPES_KEY = exports.TYPES_KEY = 'types';
-const TYPE_KEY = exports.TYPE_KEY = 'typeKey';
-const DEFAULT_TYPE_KEY = exports.DEFAULT_TYPE_KEY = 'type';
-function getTypedFieldForValue(field, value) {
+export const TYPES_KEY = 'types';
+export const TYPE_KEY = 'typeKey';
+export const DEFAULT_TYPE_KEY = 'type';
+export function getTypedFieldForValue(field, value) {
   const typeKey = resolveFieldKeyType(field);
   const types = field.get(TYPES_KEY);
   const valueType = value.get(typeKey);
   return types.find(type => type.get('name') === valueType);
 }
-function resolveFunctionForTypedField(field) {
+export function resolveFunctionForTypedField(field) {
   const typeKey = resolveFieldKeyType(field);
   const types = field.get(TYPES_KEY);
   return value => {
@@ -25,10 +15,10 @@ function resolveFunctionForTypedField(field) {
     return types.find(type => type.get('name') === valueType);
   };
 }
-function resolveFieldKeyType(field) {
+export function resolveFieldKeyType(field) {
   return field.get(TYPE_KEY, DEFAULT_TYPE_KEY);
 }
-function getErrorMessageForTypedFieldAndValue(field, value) {
+export function getErrorMessageForTypedFieldAndValue(field, value) {
   const keyType = resolveFieldKeyType(field);
   const type = value.get(keyType);
   let errorMessage;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "decap-cms-widget-list",
   "description": "Widget for editing lists in Decap CMS.",
-  "version": "3.2.3-beta.0",
+  "version": "3.4.0",
   "homepage": "https://www.decapcms.org/docs/widgets/#list",
   "repository": "https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-list",
   "bugs": "https://github.com/decaporg/decap-cms/issues",
@@ -34,8 +34,8 @@
     "immutable": "^3.7.6",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
-    "react": "17.x || 18.x",
+    "react": "^19.1.0",
     "react-immutable-proptypes": "^2.1.0"
   },
-  "gitHead": "0f91300093c3c074f50c7af8f20a4ad331806e62"
+  "gitHead": "ed7e99318007b83f4c57f3237bf92b931676820a"
 }

package/src/ListControl.js

@@ -4,7 +4,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from '@emotion/styled';
 import { css, ClassNames } from '@emotion/react';
 import { List, Map, fromJS } from 'immutable';
-import { partial, isEmpty, uniqueId } from 'lodash';
+import partial from 'lodash/partial';
+import isEmpty from 'lodash/isEmpty';
+import uniqueId from 'lodash/uniqueId';
 import { v4 as uuid } from 'uuid';
 import DecapCmsWidgetObject from 'decap-cms-widget-object';
 import {
@@ -171,7 +173,7 @@ function LabelComponent({ field, isActive, hasErrors, uniqueFieldId, isFieldOpti
 }
 
 export default class ListControl extends React.Component {
-  validations = [];
+  childRefs = {};
 
   static propTypes = {
     metadata: ImmutablePropTypes.map,
@@ -219,6 +221,11 @@ export default class ListControl extends React.Component {
     };
   }
 
+  componentDidMount() {
+    // Manually validate PropTypes - React 19 breaking change
+    PropTypes.checkPropTypes(ListControl.propTypes, this.props, 'prop', 'ListControl');
+  }
+
   valueToString = value => {
     let stringValue;
     if (List.isList(value) || Array.isArray(value)) {
@@ -365,16 +372,18 @@ export default class ListControl extends React.Component {
   processControlRef = ref => {
     if (!ref) return;
     const {
-      validate,
       props: { validationKey: key },
     } = ref;
-    this.validations.push({ key, validate });
+    this.childRefs[key] = ref;
+    this.props.controlRef?.(this);
   };
 
   validate = () => {
-    if (this.getValueType()) {
-      this.validations.forEach(item => {
-        item.validate();
+    // First validate child widgets if this is a complex list
+    const hasChildWidgets = this.getValueType() && Object.keys(this.childRefs).length > 0;
+    if (hasChildWidgets) {
+      Object.values(this.childRefs).forEach(widget => {
+        widget?.validate?.();
       });
     } else {
       this.props.validate();
@@ -431,7 +440,17 @@ export default class ListControl extends React.Component {
   handleRemove = (index, event) => {
     event.preventDefault();
     const { itemsCollapsed } = this.state;
-    const { value, metadata, onChange, field, clearFieldErrors } = this.props;
+    const {
+      value,
+      metadata,
+      onChange,
+      field,
+      clearFieldErrors,
+      onValidateObject,
+      forID,
+      fieldsErrors,
+    } = this.props;
+
     const collectionName = field.get('name');
     const isSingleField = this.getValueType() === valueTypes.SINGLE;
 
@@ -441,17 +460,41 @@ export default class ListControl extends React.Component {
         ? { [collectionName]: metadata.removeIn(metadataRemovePath) }
         : metadata;
 
+    // Get the key of the item being removed
+    const removedKey = this.state.keys[index];
+
+    // Update state while preserving keys for remaining items
+    const newKeys = [...this.state.keys];
+    newKeys.splice(index, 1);
     itemsCollapsed.splice(index, 1);
-    // clear validations
-    this.validations = [];
 
     this.setState({
       itemsCollapsed: [...itemsCollapsed],
-      keys: Array.from({ length: value.size - 1 }, () => uuid()),
+      keys: newKeys,
     });
 
-    onChange(value.remove(index), parsedMetadata);
-    clearFieldErrors();
+    // Clear the ref for the removed item
+    delete this.childRefs[removedKey];
+
+    const newValue = value.delete(index);
+
+    // Clear errors for the removed item and its children
+    if (fieldsErrors) {
+      Object.entries(fieldsErrors.toJS()).forEach(([fieldId, errors]) => {
+        if (errors.some(err => err.parentIds?.includes(removedKey))) {
+          clearFieldErrors(fieldId);
+        }
+      });
+    }
+
+    // If list is empty, mark it as valid
+    if (newValue.size === 0) {
+      clearFieldErrors(forID);
+      onValidateObject(forID, []);
+    }
+
+    // Update the value last to ensure all error states are cleared
+    onChange(newValue, parsedMetadata);
   };
 
   handleItemCollapseToggle = (index, event) => {
@@ -527,7 +570,7 @@ export default class ListControl extends React.Component {
   }
 
   onSortEnd = ({ oldIndex, newIndex }) => {
-    const { value, clearFieldErrors } = this.props;
+    const { value } = this.props;
     const { itemsCollapsed, keys } = this.state;
 
     // Update value
@@ -541,18 +584,13 @@ export default class ListControl extends React.Component {
     const updatedItemsCollapsed = [...itemsCollapsed];
     updatedItemsCollapsed.splice(newIndex, 0, collapsed);
 
-    // Reset item to ensure updated state
-    const updatedKeys = keys.map((key, keyIndex) => {
-      if (keyIndex === oldIndex || keyIndex === newIndex) {
-        return uuid();
-      }
-      return key;
-    });
-    this.setState({ itemsCollapsed: updatedItemsCollapsed, keys: updatedKeys });
+    // Move keys to maintain relationships
+    const movedKey = keys[oldIndex];
+    const updatedKeys = [...keys];
+    updatedKeys.splice(oldIndex, 1);
+    updatedKeys.splice(newIndex, 0, movedKey);
 
-    //clear error fields and remove old validations
-    clearFieldErrors();
-    this.validations = this.validations.filter(item => updatedKeys.includes(item.key));
+    this.setState({ itemsCollapsed: updatedItemsCollapsed, keys: updatedKeys });
   };
 
   hasError = index => {
@@ -564,6 +602,34 @@ export default class ListControl extends React.Component {
     }
   };
 
+  focus(path) {
+    const [index, ...remainingPath] = path.split('.');
+
+    if (this.state.listCollapsed || this.state.itemsCollapsed[index]) {
+      const newItemsCollapsed = [...this.state.itemsCollapsed];
+      newItemsCollapsed[index] = false;
+      this.setState(
+        {
+          listCollapsed: false,
+          itemsCollapsed: newItemsCollapsed,
+        },
+        () => {
+          const key = this.state.keys[index];
+          const control = this.childRefs[key];
+          if (control?.focus) {
+            control.focus(remainingPath.join('.'));
+          }
+        },
+      );
+    } else {
+      const key = this.state.keys[index];
+      const control = this.childRefs[key];
+      if (control?.focus) {
+        control.focus(remainingPath.join('.'));
+      }
+    }
+  }
+
   // eslint-disable-next-line react/display-name
   renderItem = (item, index) => {
     const {

package/src/__tests__/ListControl.spec.js

@@ -104,11 +104,11 @@ describe('ListControl', () => {
       />,
     );
 
-    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'true');
-    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'true');
+    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed');
+    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed');
 
-    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'true');
-    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'true');
+    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed');
+    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed');
 
     expect(asFragment()).toMatchSnapshot();
   });
@@ -133,11 +133,11 @@ describe('ListControl', () => {
       />,
     );
 
-    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'false');
-    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'false');
+    expect(getByTestId('styled-list-item-top-bar-0')).not.toHaveAttribute('collapsed');
+    expect(getByTestId('styled-list-item-top-bar-1')).not.toHaveAttribute('collapsed');
 
-    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'false');
-    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'false');
+    expect(getByTestId('object-control-0')).not.toHaveAttribute('collapsed');
+    expect(getByTestId('object-control-1')).not.toHaveAttribute('collapsed');
 
     expect(asFragment()).toMatchSnapshot();
   });
@@ -162,19 +162,19 @@ describe('ListControl', () => {
       />,
     );
 
-    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'false');
-    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'false');
+    expect(getByTestId('styled-list-item-top-bar-0')).not.toHaveAttribute('collapsed');
+    expect(getByTestId('styled-list-item-top-bar-1')).not.toHaveAttribute('collapsed');
 
-    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'false');
-    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'false');
+    expect(getByTestId('object-control-0')).not.toHaveAttribute('collapsed');
+    expect(getByTestId('object-control-1')).not.toHaveAttribute('collapsed');
 
     fireEvent.click(getByTestId('expand-button'));
 
-    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'true');
-    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'true');
+    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed');
+    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed');
 
-    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'true');
-    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'true');
+    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed');
+    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed');
   });
 
   it('should collapse a single item on collapse item click', () => {
@@ -197,19 +197,19 @@ describe('ListControl', () => {
       />,
     );
 
-    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'false');
-    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'false');
+    expect(getByTestId('styled-list-item-top-bar-0')).not.toHaveAttribute('collapsed');
+    expect(getByTestId('styled-list-item-top-bar-1')).not.toHaveAttribute('collapsed');
 
-    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'false');
-    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'false');
+    expect(getByTestId('object-control-0')).not.toHaveAttribute('collapsed');
+    expect(getByTestId('object-control-1')).not.toHaveAttribute('collapsed');
 
     fireEvent.click(getByTestId('styled-list-item-top-bar-0'));
 
-    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'true');
-    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'false');
+    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed');
+    expect(getByTestId('styled-list-item-top-bar-1')).not.toHaveAttribute('collapsed');
 
-    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'true');
-    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'false');
+    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed');
+    expect(getByTestId('object-control-1')).not.toHaveAttribute('collapsed');
   });
 
   it('should expand all items on top bar expand click', () => {
@@ -232,19 +232,19 @@ describe('ListControl', () => {
       />,
     );
 
-    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'true');
-    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'true');
+    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed');
+    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed');
 
-    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'true');
-    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'true');
+    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed');
+    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed');
 
     fireEvent.click(getByTestId('expand-button'));
 
-    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'false');
-    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'false');
+    expect(getByTestId('styled-list-item-top-bar-0')).not.toHaveAttribute('collapsed');
+    expect(getByTestId('styled-list-item-top-bar-1')).not.toHaveAttribute('collapsed');
 
-    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'false');
-    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'false');
+    expect(getByTestId('object-control-0')).not.toHaveAttribute('collapsed');
+    expect(getByTestId('object-control-1')).not.toHaveAttribute('collapsed');
   });
 
   it('should expand a single item on expand item click', () => {
@@ -267,19 +267,19 @@ describe('ListControl', () => {
       />,
     );
 
-    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'true');
-    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'true');
+    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed');
+    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed');
 
-    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'true');
-    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'true');
+    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed');
+    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed');
 
     fireEvent.click(getByTestId('styled-list-item-top-bar-0'));
 
-    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'false');
-    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'true');
+    expect(getByTestId('styled-list-item-top-bar-0')).not.toHaveAttribute('collapsed');
+    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed');
 
-    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'false');
-    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'true');
+    expect(getByTestId('object-control-0')).not.toHaveAttribute('collapsed');
+    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed');
   });
 
   it('should use widget name when no summary or label are configured for mixed types', () => {
@@ -477,11 +477,11 @@ describe('ListControl', () => {
       />,
     );
 
-    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'true');
-    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'true');
+    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed');
+    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed');
 
-    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'true');
-    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'true');
+    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed');
+    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed');
 
     expect(asFragment()).toMatchSnapshot();
   });
@@ -501,11 +501,11 @@ describe('ListControl', () => {
       />,
     );
 
-    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'false');
-    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'false');
+    expect(getByTestId('styled-list-item-top-bar-0')).not.toHaveAttribute('collapsed');
+    expect(getByTestId('styled-list-item-top-bar-1')).not.toHaveAttribute('collapsed');
 
-    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'false');
-    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'false');
+    expect(getByTestId('object-control-0')).not.toHaveAttribute('collapsed');
+    expect(getByTestId('object-control-1')).not.toHaveAttribute('collapsed');
 
     expect(asFragment()).toMatchSnapshot();
   });
@@ -535,11 +535,11 @@ describe('ListControl', () => {
 
     fireEvent.click(getByTestId('expand-button'));
 
-    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'true');
-    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'true');
+    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed');
+    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed');
 
-    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'true');
-    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'true');
+    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed');
+    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed');
   });
 
   it('should render list with fields with collapse = "false" and default minimize_collapsed = "true"', () => {
@@ -558,11 +558,11 @@ describe('ListControl', () => {
       />,
     );
 
-    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'false');
-    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'false');
+    expect(getByTestId('styled-list-item-top-bar-0')).not.toHaveAttribute('collapsed');
+    expect(getByTestId('styled-list-item-top-bar-1')).not.toHaveAttribute('collapsed');
 
-    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'false');
-    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'false');
+    expect(getByTestId('object-control-0')).not.toHaveAttribute('collapsed');
+    expect(getByTestId('object-control-1')).not.toHaveAttribute('collapsed');
 
     expect(asFragment()).toMatchSnapshot();
 
@@ -594,8 +594,8 @@ describe('ListControl', () => {
 
     rerender(<ListControl {...props} field={field} value={fromJS([{}])} />);
 
-    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'false');
-    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'false');
+    expect(getByTestId('styled-list-item-top-bar-0')).not.toHaveAttribute('collapsed');
+    expect(getByTestId('object-control-0')).not.toHaveAttribute('collapsed');
 
     expect(asFragment()).toMatchSnapshot();
   });