@contentful/field-editor-list 1.5.4 → 1.5.6

package/dist/cjs/ListEditor.js

@@ -62,6 +62,19 @@ function _interop_require_wildcard(obj, nodeInterop) {
 function isEmptyListValue(value) {
     return value === null || value.length === 0;
 }
+const useExternalChanges = (cb, externalValue)=>{
+    const lastExternalValue = _react.useRef(externalValue);
+    _react.useEffect(()=>{
+        if ((0, _isEqual.default)(lastExternalValue.current, externalValue)) {
+            return;
+        }
+        lastExternalValue.current = externalValue;
+        cb((externalValue ?? []).join(', '));
+    }, [
+        cb,
+        externalValue
+    ]);
+};
 function ListEditor(props) {
     const { field, locales, id } = props;
     const direction = locales.direction[field.locale] || 'ltr';
@@ -86,6 +99,7 @@ function ListEditorInternal({ setValue, value, errors, disabled, direction, isRe
         const valueAsString = valueAsArray.join(', ');
         setValueState(changed ? valueAsString : e.target.value);
     };
+    useExternalChanges(setValueState, value);
     return _react.createElement(_f36components.TextInput, {
         id: id,
         testId: "list-editor-input",

package/dist/cjs/ListEditor.spec.js

@@ -148,4 +148,28 @@ describe('ListEditor', ()=>{
         ]);
         expectInputValue(renderResult, 'test1,');
     });
+    it('listens to external changes', async ()=>{
+        const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)((field)=>{
+            jest.spyOn(field, 'setValue');
+            return {
+                ...field,
+                validations: []
+            };
+        }, [
+            'test1'
+        ]);
+        const renderResult = (0, _react1.render)(_react.createElement(_ListEditor.ListEditor, {
+            field: field,
+            locales: (0, _fieldeditortestutils.createFakeLocalesAPI)(),
+            isInitiallyDisabled: false
+        }));
+        expectInputValue(renderResult, 'test1');
+        field.setValue([
+            'test1',
+            'test2'
+        ]);
+        await (0, _react1.waitFor)(()=>{
+            expectInputValue(renderResult, 'test1, test2');
+        });
+    });
 });

package/dist/esm/ListEditor.js

@@ -6,6 +6,19 @@ import * as styles from './styles';
 function isEmptyListValue(value) {
     return value === null || value.length === 0;
 }
+const useExternalChanges = (cb, externalValue)=>{
+    const lastExternalValue = React.useRef(externalValue);
+    React.useEffect(()=>{
+        if (isEqual(lastExternalValue.current, externalValue)) {
+            return;
+        }
+        lastExternalValue.current = externalValue;
+        cb((externalValue ?? []).join(', '));
+    }, [
+        cb,
+        externalValue
+    ]);
+};
 export function ListEditor(props) {
     const { field, locales, id } = props;
     const direction = locales.direction[field.locale] || 'ltr';
@@ -30,6 +43,7 @@ function ListEditorInternal({ setValue, value, errors, disabled, direction, isRe
         const valueAsString = valueAsArray.join(', ');
         setValueState(changed ? valueAsString : e.target.value);
     };
+    useExternalChanges(setValueState, value);
     return React.createElement(TextInput, {
         id: id,
         testId: "list-editor-input",

package/dist/esm/ListEditor.spec.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createFakeFieldAPI, createFakeLocalesAPI } from '@contentful/field-editor-test-utils';
 import '@testing-library/jest-dom/extend-expect';
-import { cleanup, configure, fireEvent, render } from '@testing-library/react';
+import { cleanup, configure, fireEvent, render, waitFor } from '@testing-library/react';
 import { ListEditor } from './ListEditor';
 configure({
     testIdAttribute: 'data-test-id'
@@ -103,4 +103,28 @@ describe('ListEditor', ()=>{
         ]);
         expectInputValue(renderResult, 'test1,');
     });
+    it('listens to external changes', async ()=>{
+        const [field] = createFakeFieldAPI((field)=>{
+            jest.spyOn(field, 'setValue');
+            return {
+                ...field,
+                validations: []
+            };
+        }, [
+            'test1'
+        ]);
+        const renderResult = render(React.createElement(ListEditor, {
+            field: field,
+            locales: createFakeLocalesAPI(),
+            isInitiallyDisabled: false
+        }));
+        expectInputValue(renderResult, 'test1');
+        field.setValue([
+            'test1',
+            'test2'
+        ]);
+        await waitFor(()=>{
+            expectInputValue(renderResult, 'test1, test2');
+        });
+    });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-list",
-  "version": "1.5.4",
+  "version": "1.5.6",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -37,7 +37,7 @@
   "dependencies": {
     "@contentful/f36-components": "^4.70.0",
     "@contentful/f36-tokens": "^4.0.5",
-    "@contentful/field-editor-shared": "^2.6.0",
+    "@contentful/field-editor-shared": "^2.7.0",
     "emotion": "^10.0.17",
     "lodash": "^4.17.15"
   },
@@ -50,5 +50,5 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
-  "gitHead": "07bbbf610db4000897fa8e6f38e3ab6ace7e02cf"
+  "gitHead": "b8392c70e8a794498df27ffe3d4b0c3131ddf172"
 }