@contentful/field-editor-reference 5.9.0 → 5.10.0

package/dist/cjs/common/SingleReferenceEditor.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SingleReferenceEditor", {
+    enumerable: true,
+    get: function() {
+        return SingleReferenceEditor;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _components = require("../components");
+const _LinkEntityActions = require("../components/LinkActions/LinkEntityActions");
+const _ReferenceEditor = require("./ReferenceEditor");
+const _useEditorPermissions = require("./useEditorPermissions");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function Editor(props) {
+    const { setValue , entityType  } = props;
+    const editorPermissions = (0, _useEditorPermissions.useEditorPermissions)(props);
+    const onCreate = (0, _react.useCallback)((id)=>void setValue({
+            sys: {
+                type: 'Link',
+                linkType: entityType,
+                id
+            }
+        }), [
+        setValue,
+        entityType
+    ]);
+    const onLink = (0, _react.useCallback)((ids)=>{
+        const [id] = ids;
+        setValue({
+            sys: {
+                type: 'Link',
+                linkType: entityType,
+                id
+            }
+        });
+    }, [
+        setValue,
+        entityType
+    ]);
+    const linkActionsProps = (0, _LinkEntityActions.useLinkActionsProps)({
+        ...props,
+        canLinkMultiple: false,
+        editorPermissions,
+        onCreate,
+        onLink
+    });
+    const customCardRenderer = (0, _react.useCallback)((cardProps, _, renderDefaultCard)=>props.renderCustomCard ? props.renderCustomCard(cardProps, linkActionsProps, renderDefaultCard) : false, [
+        linkActionsProps
+    ]);
+    if (!props.entityId) {
+        return _react.createElement(_components.LinkEntityActions, {
+            renderCustomActions: props.renderCustomActions,
+            ...linkActionsProps
+        });
+    }
+    return props.children({
+        ...props,
+        renderCustomCard: props.renderCustomCard && customCardRenderer
+    });
+}
+function SingleReferenceEditor(props) {
+    const allContentTypes = props.sdk.space.getCachedContentTypes();
+    return _react.createElement(_ReferenceEditor.ReferenceEditor, props, ({ value , setValue , disabled , externalReset  })=>{
+        return _react.createElement(Editor, {
+            ...props,
+            key: `${externalReset}-reference`,
+            entityId: value ? value.sys.id : '',
+            isDisabled: disabled,
+            setValue: setValue,
+            allContentTypes: allContentTypes
+        });
+    });
+}
+SingleReferenceEditor.defaultProps = {
+    hasCardEditActions: true,
+    hasCardRemoveActions: true
+};

package/dist/cjs/common/SortableLinkList.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SortableLinkList", {
+    enumerable: true,
+    get: function() {
+        return SortableLinkList;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _reactsortablehoc = require("react-sortable-hoc");
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _emotion = require("emotion");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const styles = {
+    container: (0, _emotion.css)({
+        position: 'relative'
+    }),
+    item: (0, _emotion.css)({
+        marginBottom: _f36tokens.default.spacingM,
+        zIndex: _f36tokens.default.zIndexModal
+    })
+};
+const DragHandle = (props)=>{
+    const SortableDragHandle = (0, _reactsortablehoc.SortableHandle)(()=>props.drag);
+    return _react.createElement(SortableDragHandle, null);
+};
+const SortableLink = (0, _reactsortablehoc.SortableElement)((props)=>_react.createElement("div", {
+        className: styles.item
+    }, props.children));
+const SortableLinkListInternal = (0, _reactsortablehoc.SortableContainer)((props)=>{
+    return _react.createElement("div", {
+        className: (0, _emotion.cx)(styles.container, props.className)
+    }, props.items.map((item, index)=>_react.createElement(SortableLink, {
+            disabled: props.isDisabled,
+            key: `${item.sys.urn ?? item.sys.id}-${index}`,
+            index: index
+        }, props.children({
+            items: props.items,
+            isDisabled: props.isDisabled,
+            item,
+            index,
+            DragHandle: props.isDisabled ? undefined : DragHandle
+        }))));
+});
+function SortableLinkList(props) {
+    return _react.createElement(SortableLinkListInternal, {
+        distance: 1,
+        ...props
+    }, props.children);
+}

package/dist/cjs/common/customCardTypes.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _react = _interop_require_wildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}

package/dist/cjs/common/useAccessApi.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useAccessApi", {
+    enumerable: true,
+    get: function() {
+        return useAccessApi;
+    }
+});
+const AllowActionsOnContentType = ()=>Promise.resolve(true);
+function useAccessApi(accessApi) {
+    const canPerformAction = accessApi.can;
+    const canPerformActionOnEntryOfType = accessApi.canPerformActionOnEntryOfType ?? AllowActionsOnContentType;
+    return {
+        canPerformAction,
+        canPerformActionOnEntryOfType
+    };
+}

package/dist/cjs/common/useContentTypePermissions.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useContentTypePermissions", {
+    enumerable: true,
+    get: function() {
+        return useContentTypePermissions;
+    }
+});
+const _react = require("react");
+const _useAccessApi = require("./useAccessApi");
+async function filter(arr, predicate) {
+    const fail = Symbol();
+    const results = await Promise.all(arr.map(async (item)=>await predicate(item) ? item : fail));
+    return results.filter((x)=>x !== fail);
+}
+function useContentTypePermissions(props) {
+    const availableContentTypes = (0, _react.useMemo)(()=>{
+        if (props.entityType === 'Asset') {
+            return [];
+        }
+        if (props.validations.contentTypes) {
+            return props.allContentTypes.filter((ct)=>props.validations.contentTypes?.includes(ct.sys.id));
+        }
+        return props.allContentTypes;
+    }, [
+        props.allContentTypes,
+        props.validations.contentTypes,
+        props.entityType
+    ]);
+    const [creatableContentTypes, setCreatableContentTypes] = (0, _react.useState)(availableContentTypes);
+    const [readableContentTypes, setReadableContentTypes] = (0, _react.useState)(availableContentTypes);
+    const { canPerformActionOnEntryOfType  } = (0, _useAccessApi.useAccessApi)(props.sdk.access);
+    (0, _react.useEffect)(()=>{
+        function getContentTypes(action) {
+            return filter(availableContentTypes, (ct)=>canPerformActionOnEntryOfType(action, ct.sys.id));
+        }
+        async function checkContentTypeAccess() {
+            const creatable = await getContentTypes('create');
+            const readable = await getContentTypes('read');
+            setCreatableContentTypes(creatable);
+            setReadableContentTypes(readable);
+        }
+        void checkContentTypeAccess();
+    }, [
+        availableContentTypes
+    ]);
+    return {
+        creatableContentTypes,
+        readableContentTypes,
+        availableContentTypes
+    };
+}

package/dist/cjs/common/useEditorPermissions.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useEditorPermissions", {
+    enumerable: true,
+    get: function() {
+        return useEditorPermissions;
+    }
+});
+const _react = require("react");
+const _fromFieldValidations = require("../utils/fromFieldValidations");
+const _useAccessApi = require("./useAccessApi");
+const _useContentTypePermissions = require("./useContentTypePermissions");
+function useEditorPermissions(props) {
+    const { sdk , entityType , parameters  } = props;
+    const validations = (0, _react.useMemo)(()=>(0, _fromFieldValidations.fromFieldValidations)(props.sdk.field), [
+        props.sdk.field
+    ]);
+    const [canCreateEntity, setCanCreateEntity] = (0, _react.useState)(true);
+    const [canLinkEntity, setCanLinkEntity] = (0, _react.useState)(true);
+    const { creatableContentTypes , readableContentTypes , availableContentTypes  } = (0, _useContentTypePermissions.useContentTypePermissions)({
+        ...props,
+        validations
+    });
+    const { canPerformAction  } = (0, _useAccessApi.useAccessApi)(sdk.access);
+    (0, _react.useEffect)(()=>{
+        if (parameters.instance.showCreateEntityAction === false) {
+            setCanCreateEntity(false);
+            return;
+        }
+        async function checkCreateAccess() {
+            if (entityType === 'Asset') {
+                const canCreate = await canPerformAction('create', 'Asset') || true;
+                setCanCreateEntity(canCreate);
+            }
+            if (entityType === 'Entry') {
+                const canCreate = creatableContentTypes.length > 0 || true;
+                setCanCreateEntity(canCreate);
+            }
+        }
+        void checkCreateAccess();
+    }, [
+        entityType,
+        parameters.instance,
+        creatableContentTypes
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (parameters.instance.showLinkEntityAction === false) {
+            setCanLinkEntity(false);
+            return;
+        }
+        async function checkLinkAccess() {
+            if (entityType === 'Asset') {
+                const canRead = await canPerformAction('read', 'Asset') || true;
+                setCanLinkEntity(canRead);
+            }
+            if (entityType === 'Entry') {
+                const canRead = true;
+                setCanLinkEntity(canRead);
+            }
+        }
+        void checkLinkAccess();
+    }, [
+        entityType,
+        parameters.instance,
+        readableContentTypes
+    ]);
+    return {
+        canCreateEntity,
+        canLinkEntity,
+        creatableContentTypes,
+        readableContentTypes,
+        availableContentTypes,
+        validations
+    };
+}

package/dist/cjs/common/useEditorPermissions.spec.js

@@ -0,0 +1,205 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _fieldeditortestutils = require("@contentful/field-editor-test-utils");
+const _reacthooks = require("@testing-library/react-hooks");
+const _useEditorPermissions = require("./useEditorPermissions");
+describe('useEditorPermissions', ()=>{
+    const makeFieldExtensionSDK = (customizeMock)=>({
+            field: (0, _fieldeditortestutils.createFakeFieldAPI)(customizeMock)[0],
+            access: {
+                can: jest.fn().mockResolvedValue(true),
+                canPerformActionOnEntryOfType: jest.fn().mockResolvedValue(true)
+            }
+        });
+    const makeContentType = (id)=>({
+            sys: {
+                id
+            }
+        });
+    const renderEditorPermissions = async ({ entityType , params ={} , allContentTypes =[] , customizeMock , customizeSdk  })=>{
+        const sdk = makeFieldExtensionSDK(customizeMock);
+        customizeSdk?.(sdk);
+        const renderResult = (0, _reacthooks.renderHook)(()=>(0, _useEditorPermissions.useEditorPermissions)({
+                sdk,
+                allContentTypes,
+                entityType,
+                parameters: {
+                    instance: params
+                }
+            }));
+        await renderResult.waitForNextUpdate();
+        return {
+            ...renderResult,
+            sdk
+        };
+    };
+    describe(`behaviour on Asset`, ()=>{
+        it(`wont check access when turned off via instance params`, async ()=>{
+            const { result , sdk  } = await renderEditorPermissions({
+                entityType: 'Asset',
+                params: {
+                    showCreateEntityAction: false,
+                    showLinkEntityAction: false
+                }
+            });
+            expect(result.current.canCreateEntity).toBe(false);
+            expect(result.current.canLinkEntity).toBe(false);
+            expect(sdk.access.can).not.toHaveBeenCalledWith();
+        });
+        it(`checks basic access`, async ()=>{
+            const { sdk  } = await renderEditorPermissions({
+                entityType: 'Asset'
+            });
+            expect(sdk.access.can).toHaveBeenCalledWith('create', 'Asset');
+            expect(sdk.access.can).toHaveBeenCalledWith('read', 'Asset');
+        });
+        it(`defaults link asset action visibility to true`, async ()=>{
+            const { result  } = await renderEditorPermissions({
+                entityType: 'Asset'
+            });
+            expect(result.current.canLinkEntity).toBeTruthy();
+        });
+        it(`returns empty contentTypes`, async ()=>{
+            const { result  } = await renderEditorPermissions({
+                entityType: 'Asset',
+                allContentTypes: [
+                    makeContentType('one')
+                ]
+            });
+            expect(result.current.creatableContentTypes).toEqual([]);
+            expect(result.current.readableContentTypes).toEqual([]);
+        });
+    });
+    describe(`behaviour on Entry`, ()=>{
+        const allowContentTypes = (sdk, allowedAction, ...allowed)=>{
+            sdk.access.canPerformActionOnEntryOfType.mockImplementation(async (action, contentTypeId)=>{
+                if (allowedAction === action && allowed.includes(contentTypeId)) {
+                    return true;
+                }
+                return false;
+            });
+        };
+        it(`wont check access when turned off via instance params`, async ()=>{
+            const { result , sdk  } = await renderEditorPermissions({
+                entityType: 'Entry',
+                params: {
+                    showCreateEntityAction: false,
+                    showLinkEntityAction: false
+                }
+            });
+            expect(result.current.canCreateEntity).toBe(false);
+            expect(result.current.canLinkEntity).toBe(false);
+            expect(sdk.access.can).not.toHaveBeenCalledWith();
+        });
+        it(`only allows creation when one content-type can be created`, async ()=>{
+            const allContentTypes = [
+                makeContentType('one'),
+                makeContentType('two')
+            ];
+            const { result  } = await renderEditorPermissions({
+                entityType: 'Entry',
+                allContentTypes,
+                customizeSdk: (sdk)=>{
+                    allowContentTypes(sdk, 'create', 'one');
+                }
+            });
+            expect(result.current.canCreateEntity).toBe(true);
+        });
+        it.skip(`denies creation when no content-type can be created`, async ()=>{
+            const allContentTypes = [
+                makeContentType('one'),
+                makeContentType('two')
+            ];
+            const { result  } = await renderEditorPermissions({
+                entityType: 'Entry',
+                allContentTypes,
+                customizeSdk: (sdk)=>{
+                    allowContentTypes(sdk, 'create');
+                }
+            });
+            expect(result.current.canCreateEntity).toBe(false);
+        });
+        it(`only allows linking when one content-type can be read`, async ()=>{
+            const allContentTypes = [
+                makeContentType('one'),
+                makeContentType('two')
+            ];
+            const { result  } = await renderEditorPermissions({
+                entityType: 'Entry',
+                allContentTypes,
+                customizeSdk: (sdk)=>{
+                    allowContentTypes(sdk, 'read', 'one');
+                }
+            });
+            expect(result.current.canLinkEntity).toBe(true);
+        });
+        it.skip(`denies creation when no content-type can be read`, async ()=>{
+            const allContentTypes = [
+                makeContentType('one'),
+                makeContentType('two')
+            ];
+            const { result  } = await renderEditorPermissions({
+                entityType: 'Entry',
+                allContentTypes,
+                customizeSdk: (sdk)=>{
+                    allowContentTypes(sdk, 'read');
+                }
+            });
+            expect(result.current.canLinkEntity).toBe(false);
+        });
+        it(`returns creatableContentTypes from validations that can be created`, async ()=>{
+            const allContentTypes = [
+                makeContentType('one'),
+                makeContentType('two')
+            ];
+            const { result  } = await renderEditorPermissions({
+                entityType: 'Entry',
+                allContentTypes,
+                customizeMock: (field)=>{
+                    field.validations = [
+                        {
+                            linkContentType: [
+                                'two'
+                            ]
+                        }
+                    ];
+                    return field;
+                },
+                customizeSdk: (sdk)=>{
+                    allowContentTypes(sdk, 'create', 'two');
+                }
+            });
+            expect(result.current.creatableContentTypes).toEqual([
+                allContentTypes[1]
+            ]);
+        });
+        it(`returns readableContentTypes from validations that can be read`, async ()=>{
+            const allContentTypes = [
+                makeContentType('one'),
+                makeContentType('two')
+            ];
+            const { result  } = await renderEditorPermissions({
+                entityType: 'Entry',
+                allContentTypes,
+                customizeMock: (field)=>{
+                    field.validations = [
+                        {
+                            linkContentType: [
+                                'two'
+                            ]
+                        }
+                    ];
+                    return field;
+                },
+                customizeSdk: (sdk)=>{
+                    allowContentTypes(sdk, 'read', 'two');
+                }
+            });
+            expect(result.current.readableContentTypes).toEqual([
+                allContentTypes[1]
+            ]);
+        });
+    });
+});

package/dist/cjs/components/AssetThumbnail/AssetThumbnail.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "AssetThumbnail", {
+    enumerable: true,
+    get: function() {
+        return AssetThumbnail;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const dimensions = {
+    width: 70,
+    height: 70
+};
+function AssetThumbnail(props) {
+    return _react.createElement("img", {
+        alt: props.file.fileName,
+        src: `${props.file.url}?w=${dimensions.width}&h=${dimensions.height}&fit=thumb`,
+        height: dimensions.height,
+        width: dimensions.width
+    });
+}