decap-cms-widget-list 3.5.0 → 3.6.1

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "decap-cms-widget-list",
   "description": "Widget for editing lists in Decap CMS.",
-  "version": "3.5.0",
+  "version": "3.6.1",
   "homepage": "https://www.decapcms.org/docs/widgets/#list",
-  "repository": "https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-list",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-widget-list"
+  },
   "bugs": "https://github.com/decaporg/decap-cms/issues",
   "module": "dist/esm/index.js",
   "main": "dist/decap-cms-widget-list.js",
@@ -15,27 +18,28 @@
     "object"
   ],
   "sideEffects": false,
-  "scripts": {
-    "develop": "npm run build:esm -- --watch",
-    "build": "cross-env NODE_ENV=production webpack",
-    "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward"
-  },
   "dependencies": {
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^6.0.1",
-    "@dnd-kit/sortable": "^7.0.2"
+    "@dnd-kit/sortable": "^7.0.2",
+    "@dnd-kit/utilities": "^3.2.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "decap-cms-lib-widgets": "^3.0.0",
-    "decap-cms-ui-default": "^3.0.0",
-    "decap-cms-widget-object": "^3.0.0",
-    "immutable": "^3.7.6",
+    "immutable": "^4.3.9",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
     "react": "^19.1.0",
-    "react-immutable-proptypes": "^2.1.0"
+    "react-immutable-proptypes": "^2.1.0",
+    "uuid": "^8.3.2",
+    "decap-cms-lib-widgets": "3.4.1",
+    "decap-cms-ui-default": "3.9.1",
+    "decap-cms-widget-object": "3.7.1"
   },
-  "gitHead": "13afe6686b32f7c03b4819d343d787c63f13664f"
-}
+  "scripts": {
+    "develop": "pnpm run build:esm --watch",
+    "build": "cross-env NODE_ENV=production webpack",
+    "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward"
+  }
+}

package/src/ListControl.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from '@emotion/styled';
@@ -7,7 +7,6 @@ import { List, Map, fromJS } from 'immutable';
 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 {
   DndContext,
@@ -172,7 +171,7 @@ function LabelComponent({ field, isActive, hasErrors, uniqueFieldId, isFieldOpti
   );
 }
 
-export default class ListControl extends React.Component {
+export default class ListControl extends Component {
   childRefs = {};
 
   static propTypes = {
@@ -211,7 +210,7 @@ export default class ListControl extends React.Component {
     const { field, value } = props;
     const listCollapsed = field.get('collapsed', true);
     const itemsCollapsed = (value && Array(value.size).fill(listCollapsed)) || [];
-    const keys = (value && Array.from({ length: value.size }, () => uuid())) || [];
+    const keys = (value && Array.from({ length: value.size }, () => crypto.randomUUID())) || [];
 
     this.state = {
       listCollapsed,
@@ -353,7 +352,7 @@ export default class ListControl extends React.Component {
     const { value, onChange, field } = this.props;
     const addToTop = field.get('add_to_top', false);
 
-    const itemKey = uuid();
+    const itemKey = crypto.randomUUID();
     this.setState({
       itemsCollapsed: addToTop
         ? [false, ...this.state.itemsCollapsed]
@@ -420,20 +419,32 @@ export default class ListControl extends React.Component {
   getObjectValue = idx => this.props.value.get(idx) || Map();
 
   handleChangeFor(index) {
+    const key = this.state.keys[index];
+
     return (f, newValue, newMetadata) => {
       const { value, metadata, onChange, field } = this.props;
+
+      // Resolve the item's position when the change fires rather than when this
+      // handler was created. If an item has been removed or moved in between,
+      // `index` now points at a different item, or past the end of the list.
+      const currentIndex = this.state.keys.indexOf(key);
+
+      if (currentIndex === -1) {
+        return;
+      }
+
       const collectionName = field.get('name');
       const listFieldObjectWidget = field.getIn(['field', 'widget']) === 'object';
       const withNameKey =
         this.getValueType() !== valueTypes.SINGLE ||
         (this.getValueType() === valueTypes.SINGLE && listFieldObjectWidget);
       const newObjectValue = withNameKey
-        ? this.getObjectValue(index).set(f.get('name'), newValue)
+        ? this.getObjectValue(currentIndex).set(f.get('name'), newValue)
         : newValue;
       const parsedMetadata = {
         [collectionName]: Object.assign(metadata ? metadata.toJS() : {}, newMetadata || {}),
       };
-      onChange(value.set(index, newObjectValue), parsedMetadata);
+      onChange(value.set(currentIndex, newObjectValue), parsedMetadata);
     };
   }
 

package/src/__tests__/ListControl.spec.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import { fromJS } from 'immutable';
 
@@ -34,7 +33,6 @@ jest.mock('decap-cms-ui-default', () => {
     ListItemTopBar,
   };
 });
-jest.mock('uuid');
 
 describe('ListControl', () => {
   const props = {
@@ -63,9 +61,8 @@ describe('ListControl', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
-    const uuid = require('uuid');
     let id = 0;
-    uuid.v4.mockImplementation(() => {
+    global.crypto.randomUUID = jest.fn(() => {
       return id++;
     });
   });
@@ -789,4 +786,77 @@ describe('ListControl', () => {
     listControl.validate();
     expect(props.onValidateObject).toHaveBeenCalledWith('forID', []);
   });
+
+  const typedField = fromJS({
+    name: 'list',
+    label: 'List',
+    types: [
+      {
+        name: 'type_one',
+        widget: 'object',
+        fields: [{ name: 'text', widget: 'markdown', label: 'Text' }],
+      },
+    ],
+  });
+
+  it('should apply a change to the item it was made on after an earlier item is removed', () => {
+    const value = fromJS([
+      { type: 'type_one', text: 'one' },
+      { type: 'type_one', text: 'two' },
+      { type: 'type_one', text: 'three' },
+    ]);
+
+    let control;
+    const { getAllByText, rerender } = render(
+      <ListControl ref={ref => (control = ref)} {...props} field={typedField} value={value} />,
+    );
+
+    const changeThirdItem = control.handleChangeFor(2);
+
+    fireEvent.click(getAllByText('Remove')[0]);
+    const afterRemoval = props.onChange.mock.calls[0][0];
+    rerender(
+      <ListControl
+        ref={ref => (control = ref)}
+        {...props}
+        field={typedField}
+        value={afterRemoval}
+      />,
+    );
+
+    changeThirdItem(fromJS({ name: 'text' }), 'three edited');
+
+    const written = props.onChange.mock.calls[1][0].toJS();
+    expect(written).toHaveLength(2);
+    expect(written[1]).toEqual({ type: 'type_one', text: 'three edited' });
+  });
+
+  it('should discard a change made on an item that has since been removed', () => {
+    const value = fromJS([
+      { type: 'type_one', text: 'one' },
+      { type: 'type_one', text: 'two' },
+    ]);
+
+    let control;
+    const { getAllByText, rerender } = render(
+      <ListControl ref={ref => (control = ref)} {...props} field={typedField} value={value} />,
+    );
+
+    const changeSecondItem = control.handleChangeFor(1);
+
+    fireEvent.click(getAllByText('Remove')[1]);
+    const afterRemoval = props.onChange.mock.calls[0][0];
+    rerender(
+      <ListControl
+        ref={ref => (control = ref)}
+        {...props}
+        field={typedField}
+        value={afterRemoval}
+      />,
+    );
+
+    changeSecondItem(fromJS({ name: 'text' }), 'text for a removed item');
+
+    expect(props.onChange).toHaveBeenCalledTimes(1);
+  });
 });

package/src/__tests__/__snapshots__/ListControl.spec.js.snap

@@ -162,6 +162,7 @@ exports[`ListControl should add to list when add button is clicked 1`] = `
         class="emotion-3 emotion-4"
       >
         <button
+          aria-label="editor.editorWidgets.object.collapse"
           class="emotion-5 emotion-6"
           data-testid="expand-button"
         >
@@ -414,6 +415,7 @@ exports[`ListControl should remove from list when remove button is clicked 1`] =
         class="emotion-3 emotion-4"
       >
         <button
+          aria-label="editor.editorWidgets.object.collapse"
           class="emotion-5 emotion-6"
           data-testid="expand-button"
         >
@@ -696,6 +698,7 @@ exports[`ListControl should remove from list when remove button is clicked 2`] =
         class="emotion-3 emotion-4"
       >
         <button
+          aria-label="editor.editorWidgets.object.collapse"
           class="emotion-5 emotion-6"
           data-testid="expand-button"
         >
@@ -961,6 +964,7 @@ exports[`ListControl should render list with fields with collapse = "false" and
         class="emotion-3 emotion-4"
       >
         <button
+          aria-label="editor.editorWidgets.object.collapse"
           class="emotion-5 emotion-6"
           data-testid="expand-button"
         >
@@ -1243,6 +1247,7 @@ exports[`ListControl should render list with fields with collapse = "false" and
         class="emotion-3 emotion-4"
       >
         <button
+          aria-label="editor.editorWidgets.object.collapse"
           class="emotion-5 emotion-6"
           data-testid="expand-button"
         >
@@ -1525,6 +1530,7 @@ exports[`ListControl should render list with fields with default collapse ("true
         class="emotion-3 emotion-4"
       >
         <button
+          aria-label="editor.editorWidgets.object.expand"
           class="emotion-5 emotion-6"
           data-testid="expand-button"
         >
@@ -1790,6 +1796,7 @@ exports[`ListControl should render list with fields with default collapse ("true
         class="emotion-3 emotion-4"
       >
         <button
+          aria-label="editor.editorWidgets.object.expand"
           class="emotion-5 emotion-6"
           data-testid="expand-button"
         >
@@ -1993,6 +2000,7 @@ exports[`ListControl should render list with nested object 1`] = `
         class="emotion-3 emotion-4"
       >
         <button
+          aria-label="editor.editorWidgets.object.expand"
           class="emotion-5 emotion-6"
           data-testid="expand-button"
         >
@@ -2279,6 +2287,7 @@ exports[`ListControl should render list with nested object with collapse = false
         class="emotion-3 emotion-4"
       >
         <button
+          aria-label="editor.editorWidgets.object.collapse"
           class="emotion-5 emotion-6"
           data-testid="expand-button"
         >

package/LICENSE

@@ -1,22 +0,0 @@
-Copyright (c) 2016 Netlify <decap@p-m.si>
-
-MIT License
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.