decap-cms-widget-list 3.2.2 → 3.3.0

package/dist/esm/index.js

@@ -1,30 +1,23 @@
-"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({
     name: 'list',
-    controlComponent: _ListControl.default,
+    controlComponent,
     previewComponent,
-    schema: _schema.default
+    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.2",
+  "version": "3.3.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",
@@ -37,5 +37,5 @@
     "react": "^18.2.0",
     "react-immutable-proptypes": "^2.1.0"
   },
-  "gitHead": "64d91b8bb3d0a93dd36c53800cdac4ba2e435000"
+  "gitHead": "e2165450e5963b2a8d76d4cf331319bf91f05d45"
 }

package/src/ListControl.js

@@ -171,7 +171,7 @@ function LabelComponent({ field, isActive, hasErrors, uniqueFieldId, isFieldOpti
 }
 
 export default class ListControl extends React.Component {
-  validations = [];
+  childRefs = {};
 
   static propTypes = {
     metadata: ImmutablePropTypes.map,
@@ -365,16 +365,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 +433,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 +453,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 +563,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 +577,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 +595,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__/__snapshots__/ListControl.spec.js.snap

@@ -724,13 +724,12 @@ exports[`ListControl should remove from list when remove button is clicked 2`] =
     <div>
       <div
         class="emotion-15 emotion-16"
-        style="transition: transform 0ms linear;"
       >
         <mock-list-item-top-bar
           classname="css-1e1b0lr-StyledListItemTopBar e11zrb3c1"
           collapsed="true"
-          data-testid="styled-list-item-top-bar-2"
-          id="2"
+          data-testid="styled-list-item-top-bar-1"
+          id="1"
         >
           <button>
             Remove
@@ -744,12 +743,12 @@ exports[`ListControl should remove from list when remove button is clicked 2`] =
         <mock-object-control
           classnamewrapper="classNameWrapper css-1pznrxi"
           collapsed="true"
-          data-testid="object-control-2"
+          data-testid="object-control-1"
           field="Map { \\"name\\": \\"list\\", \\"label\\": \\"List\\", \\"collapsed\\": false, \\"minimize_collapsed\\": true, \\"fields\\": List [ Map { \\"label\\": \\"String\\", \\"name\\": \\"string\\", \\"widget\\": \\"string\\" } ] }"
           fieldserrors="Map {}"
           forlist="true"
-          parentids="forID,2"
-          validationkey="2"
+          parentids="forID,1"
+          validationkey="1"
           value="Map { \\"string\\": \\"item 2\\" }"
         />
       </div>