@contentful/field-editor-reference 5.8.6 → 5.10.0

package/dist/cjs/components/CreateEntryLinkButton/CreateEntryLinkButton.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CreateEntryLinkButton", {
+    enumerable: true,
+    get: function() {
+        return CreateEntryLinkButton;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36icons = require("@contentful/f36-icons");
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _emotion = require("emotion");
+const _get = _interop_require_default(require("lodash/get"));
+const _CreateEntryMenuTrigger = require("./CreateEntryMenuTrigger");
+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 standardStyles = {
+    spinnerMargin: (0, _emotion.css)({
+        marginRight: _f36tokens.default.spacingXs
+    }),
+    action: undefined
+};
+const redesignStyles = {
+    ...standardStyles,
+    action: (0, _emotion.css)({
+        textDecoration: 'none',
+        fontWeight: 'bold',
+        maxWidth: '300px'
+    })
+};
+const CreateEntryLinkButton = ({ contentTypes , onSelect , customDropdownItems , text , testId , hasPlusIcon =false , useExperimentalStyles , suggestedContentTypeId , dropdownSettings , disabled =false  })=>{
+    contentTypes = contentTypes.sort((a, b)=>a.name.localeCompare(b.name));
+    const suggestedContentType = contentTypes.find((ct)=>ct.sys.id === suggestedContentTypeId);
+    const buttonText = text || `Add ${(0, _get.default)(suggestedContentType || (contentTypes.length === 1 ? contentTypes[0] : {}), 'name', 'entry')}`;
+    const hasDropdown = contentTypes.length > 1 || customDropdownItems;
+    const plusIcon = hasPlusIcon ? _react.createElement(_f36icons.PlusIcon, null) : undefined;
+    const contentTypesLabel = useExperimentalStyles ? 'New content' : undefined;
+    const styles = useExperimentalStyles ? redesignStyles : standardStyles;
+    return _react.createElement(_CreateEntryMenuTrigger.CreateEntryMenuTrigger, {
+        contentTypes: contentTypes,
+        suggestedContentTypeId: suggestedContentTypeId,
+        contentTypesLabel: contentTypesLabel,
+        onSelect: onSelect,
+        testId: testId,
+        dropdownSettings: dropdownSettings,
+        customDropdownItems: customDropdownItems
+    }, ({ isSelecting  })=>_react.createElement(_f36components.Button, {
+            endIcon: hasDropdown ? _react.createElement(_f36icons.ChevronDownIcon, null) : undefined,
+            variant: "secondary",
+            className: styles.action,
+            isDisabled: disabled || isSelecting,
+            startIcon: isSelecting ? undefined : plusIcon,
+            size: "small",
+            testId: "create-entry-link-button",
+            isLoading: isSelecting
+        }, buttonText));
+};

package/dist/cjs/components/CreateEntryLinkButton/CreateEntryLinkButton.spec.js

@@ -0,0 +1,254 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _react = _interop_require_wildcard(require("react"));
+require("@testing-library/jest-dom");
+const _react1 = require("@testing-library/react");
+const _noop = _interop_require_default(require("lodash/noop"));
+const _CreateEntryLinkButton = require("./CreateEntryLinkButton");
+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;
+}
+(0, _react1.configure)({
+    testIdAttribute: 'data-test-id'
+});
+const CONTENT_TYPE_1 = {
+    name: 'name-1',
+    sys: {
+        id: 'ID_1'
+    }
+};
+const CONTENT_TYPE_2 = {
+    name: 'name-2',
+    sys: {
+        id: 'ID_2'
+    }
+};
+const CONTENT_TYPE_3 = {
+    name: 'name-3',
+    sys: {
+        id: 'ID_3'
+    }
+};
+const findButton = (getByTestId)=>getByTestId('create-entry-link-button');
+describe('CreateEntryLinkButton general', ()=>{
+    const props = {
+        contentTypes: [
+            CONTENT_TYPE_1,
+            CONTENT_TYPE_2,
+            CONTENT_TYPE_3
+        ],
+        onSelect: ()=>{
+            return Promise.resolve();
+        }
+    };
+    it('renders with multiple content types as list', ()=>{
+        const { getByTestId  } = (0, _react1.render)(_react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, props));
+        expect(getByTestId('create-entry-button-menu-trigger')).toBeDefined();
+        const link = findButton(getByTestId);
+        expect(link).toBeDefined();
+        expect(link.textContent).toBe('Add entry');
+    });
+    it('renders dropdown menu on click when with multiple content types', ()=>{
+        const { getByTestId  } = (0, _react1.render)(_react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, props));
+        _react1.fireEvent.click(findButton(getByTestId));
+        const menu = getByTestId('add-entry-menu');
+        expect(menu).toBeDefined();
+        const menuItems = menu.querySelectorAll('[data-test-id="contentType"]');
+        expect(menuItems).toHaveLength(props.contentTypes.length);
+        menuItems.forEach((item, index)=>expect(item.textContent).toBe(props.contentTypes[index].name));
+    });
+    it('renders suggestedContentType as text when given', ()=>{
+        const suggestedContentTypeId = 'ID_2';
+        const { getByTestId  } = (0, _react1.render)(_react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, {
+            ...props,
+            suggestedContentTypeId: suggestedContentTypeId
+        }));
+        expect(getByTestId('create-entry-button-menu-trigger')).toBeDefined();
+        const button = findButton(getByTestId);
+        expect(button).toBeDefined();
+        expect(button.textContent).toBe(`Add ${CONTENT_TYPE_2.name}`);
+    });
+    it('renders the name of the content type as part of the text if only 1 content type is given', ()=>{
+        const { getByTestId  } = (0, _react1.render)(_react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, {
+            onSelect: props.onSelect,
+            contentTypes: [
+                CONTENT_TYPE_1
+            ]
+        }));
+        expect(getByTestId('create-entry-button-menu-trigger')).toBeDefined();
+        const button = findButton(getByTestId);
+        expect(button).toBeDefined();
+        expect(button.textContent).toBe(`Add ${CONTENT_TYPE_1.name}`);
+    });
+    it('renders custom text, icon', ()=>{
+        const propsOverrides = {
+            text: 'CUSTOM_TEXT',
+            hasPlusIcon: true
+        };
+        const { getByTestId  } = (0, _react1.render)(_react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, {
+            ...props,
+            ...propsOverrides
+        }));
+        const link = findButton(getByTestId);
+        expect(link.textContent).toBe(propsOverrides.text);
+        expect(link.querySelectorAll('svg')).toHaveLength(2);
+    });
+});
+describe('CreateEntryLinkButton with multiple entries', ()=>{
+    const props = {
+        contentTypes: [
+            CONTENT_TYPE_1,
+            CONTENT_TYPE_2,
+            CONTENT_TYPE_3
+        ],
+        onSelect: ()=>{
+            return Promise.resolve();
+        }
+    };
+    it('should render dropdown items for each content type', ()=>{
+        const { getByTestId , getAllByTestId  } = (0, _react1.render)(_react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, props));
+        _react1.fireEvent.click(findButton(getByTestId));
+        expect(getAllByTestId('contentType')).toHaveLength(props.contentTypes.length);
+    });
+    it('calls onSelect after click on menu item', ()=>{
+        const selectSpy = jest.fn();
+        const { getByTestId , getAllByTestId  } = (0, _react1.render)(_react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, {
+            ...props,
+            onSelect: selectSpy
+        }));
+        _react1.fireEvent.click(findButton(getByTestId));
+        _react1.fireEvent.click(getAllByTestId('contentType')[1]);
+        expect(selectSpy).toHaveBeenCalledWith(CONTENT_TYPE_2.sys.id);
+    });
+});
+describe('CreateEntryLinkButton with a single entry', ()=>{
+    const props = {
+        contentTypes: [
+            CONTENT_TYPE_1
+        ],
+        onSelect: ()=>{
+            return Promise.resolve();
+        }
+    };
+    it('should fire the onSelect function when clicked', ()=>{
+        const onSelectStub = jest.fn();
+        const { getByTestId  } = (0, _react1.render)(_react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, {
+            ...props,
+            onSelect: onSelectStub
+        }));
+        _react1.fireEvent.click(findButton(getByTestId));
+        expect(onSelectStub).toHaveBeenCalledWith(props.contentTypes[0].sys.id);
+        expect(()=>getByTestId('cf-ui-spinner')).toThrow('Unable to find an element by: [data-test-id="cf-ui-spinner"]');
+    });
+});
+describe('CreateEntryLinkButton common', ()=>{
+    it('should render a spinner if onSelect returns a promise', async ()=>{
+        const onSelect = jest.fn(()=>new Promise((resolve)=>setTimeout(resolve, 1000)));
+        const { getByTestId , container  } = (0, _react1.render)(_react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, {
+            contentTypes: [
+                CONTENT_TYPE_1
+            ],
+            onSelect: onSelect
+        }));
+        _react1.fireEvent.click(findButton(getByTestId));
+        expect(onSelect).toHaveBeenCalled();
+        const spinner = await (0, _react1.waitFor)(()=>getByTestId('cf-ui-spinner'), {
+            container
+        });
+        expect(spinner).toBeDefined();
+        expect(spinner.textContent).toMatch(/Loading/g);
+    });
+    it('should hide a spinner after the promise from onSelect resolves', async ()=>{
+        const onSelect = jest.fn(()=>new Promise((resolve)=>setTimeout(resolve, 500)));
+        const { getByTestId , container  } = (0, _react1.render)(_react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, {
+            contentTypes: [
+                CONTENT_TYPE_1
+            ],
+            onSelect: onSelect
+        }));
+        _react1.fireEvent.click(findButton(getByTestId));
+        const getSpinner = ()=>getByTestId('cf-ui-spinner');
+        const spinner = await (0, _react1.waitFor)(getSpinner, {
+            container
+        });
+        expect(spinner).toBeDefined();
+        await (0, _react1.waitForElementToBeRemoved)(()=>document.querySelector('[data-test-id="cf-ui-spinner"]'));
+        expect(getSpinner).toThrow('Unable to find an element by: [data-test-id="cf-ui-spinner"]');
+    });
+    it('does not emit onSelect on subsequent click before the promise from onSelect resolves', async ()=>{
+        const onSelect = jest.fn(()=>new Promise((resolve)=>setTimeout(()=>resolve(undefined), 200)));
+        const { getByTestId  } = (0, _react1.render)(_react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, {
+            contentTypes: [
+                CONTENT_TYPE_1
+            ],
+            onSelect: onSelect
+        }));
+        _react1.fireEvent.click(findButton(getByTestId));
+        _react1.fireEvent.click(findButton(getByTestId));
+        _react1.fireEvent.click(findButton(getByTestId));
+        await (0, _react1.waitFor)(_noop.default, {
+            timeout: 1000
+        });
+        expect(onSelect).toHaveBeenCalledTimes(1);
+    });
+    it('emits onSelect on subsequent click after the promise from onSelect resolves', async ()=>{
+        const onSelect = jest.fn(()=>Promise.resolve());
+        const { getByTestId  } = (0, _react1.render)(_react.createElement(_CreateEntryLinkButton.CreateEntryLinkButton, {
+            contentTypes: [
+                CONTENT_TYPE_1
+            ],
+            onSelect: onSelect
+        }));
+        await (0, _react1.act)(async ()=>{
+            _react1.fireEvent.click(findButton(getByTestId));
+            await (0, _react1.waitFor)(_noop.default, {
+                timeout: 100
+            });
+            _react1.fireEvent.click(findButton(getByTestId));
+        });
+        expect(onSelect).toHaveBeenCalledTimes(2);
+    });
+});

package/dist/cjs/components/CreateEntryLinkButton/CreateEntryMenuTrigger.js

@@ -0,0 +1,199 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CreateEntryMenuTrigger", {
+    enumerable: true,
+    get: function() {
+        return CreateEntryMenuTrigger;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36icons = require("@contentful/f36-icons");
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _emotion = require("emotion");
+const _get = _interop_require_default(require("lodash/get"));
+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 MAX_ITEMS_WITHOUT_SEARCH = 5;
+const menuPlacementMap = {
+    'bottom-left': 'bottom-start',
+    'bottom-right': 'bottom-end'
+};
+const styles = {
+    wrapper: (0, _emotion.css)({
+        position: 'relative'
+    }),
+    inputWrapper: (0, _emotion.css)({
+        position: 'relative',
+        padding: `0 ${_f36tokens.default.spacing2Xs}`
+    }),
+    searchInput: (0, _emotion.css)({
+        paddingRight: _f36tokens.default.spacingXl,
+        textOverflow: 'ellipsis'
+    }),
+    searchIcon: (0, _emotion.css)({
+        position: 'absolute',
+        right: _f36tokens.default.spacingM,
+        top: _f36tokens.default.spacingS,
+        zIndex: Number(_f36tokens.default.zIndexDefault),
+        fill: _f36tokens.default.gray600
+    }),
+    separator: (0, _emotion.css)({
+        background: _f36tokens.default.gray200,
+        margin: '10px 0'
+    }),
+    dropdownList: (0, _emotion.css)({
+        borderColor: _f36tokens.default.gray200
+    })
+};
+const CreateEntryMenuTrigger = ({ contentTypes , suggestedContentTypeId , contentTypesLabel , onSelect , testId , dropdownSettings ={
+    position: 'bottom-left'
+} , customDropdownItems , children  })=>{
+    const [isOpen, setOpen] = (0, _react.useState)(false);
+    const [isSelecting, setSelecting] = (0, _react.useState)(false);
+    const [searchInput, setSearchInput] = (0, _react.useState)('');
+    const wrapper = (0, _react.useRef)(null);
+    const textField = (0, _react.useRef)(null);
+    const menuListRef = (0, _react.useRef)(null);
+    const [dropdownWidth, setDropdownWidth] = (0, _react.useState)();
+    const hasDropdown = contentTypes.length > 1 || !!customDropdownItems;
+    const closeMenu = ()=>setOpen(false);
+    (0, _react.useEffect)(()=>{
+        if (isOpen) {
+            setTimeout(()=>{
+                textField.current?.querySelector('input')?.focus({
+                    preventScroll: true
+                });
+            }, 200);
+        }
+    }, [
+        isOpen
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (isOpen && !dropdownWidth) {
+            setDropdownWidth(menuListRef.current?.clientWidth);
+        }
+    }, [
+        isOpen,
+        dropdownWidth
+    ]);
+    const handleSelect = (item)=>{
+        closeMenu();
+        const res = onSelect(item.sys.id);
+        if (res && typeof res.then === 'function') {
+            setSelecting(true);
+            res.then(()=>setSelecting(false), ()=>setSelecting(false));
+        }
+    };
+    const handleMenuOpen = ()=>{
+        if (hasDropdown) {
+            setOpen(true);
+        } else {
+            handleSelect(contentTypes[0]);
+        }
+    };
+    (0, _react.useEffect)(()=>{
+        if (!isOpen) {
+            setSearchInput('');
+        }
+    }, [
+        isOpen
+    ]);
+    const renderSearchResultsCount = (resultsLength)=>resultsLength ? _react.default.createElement(_f36components.Menu.SectionTitle, {
+            testId: "add-entru-menu-search-results"
+        }, resultsLength, " result", resultsLength > 1 ? 's' : '') : null;
+    const isSearchable = contentTypes.length > MAX_ITEMS_WITHOUT_SEARCH;
+    const maxDropdownHeight = suggestedContentTypeId ? 300 : 250;
+    const suggestedContentType = contentTypes.find((ct)=>ct.sys.id === suggestedContentTypeId);
+    const filteredContentTypes = contentTypes.filter((ct)=>!searchInput || (0, _get.default)(ct, 'name', 'Untitled').toLowerCase().includes(searchInput.toLowerCase()));
+    return _react.default.createElement("span", {
+        className: styles.wrapper,
+        ref: wrapper,
+        "data-test-id": testId
+    }, _react.default.createElement(_f36components.Menu, {
+        placement: menuPlacementMap[dropdownSettings.position],
+        isAutoalignmentEnabled: dropdownSettings.isAutoalignmentEnabled,
+        isOpen: isOpen,
+        onClose: closeMenu,
+        onOpen: handleMenuOpen
+    }, _react.default.createElement(_f36components.Menu.Trigger, null, children({
+        isOpen,
+        isSelecting
+    })), isOpen && _react.default.createElement(_f36components.Menu.List, {
+        className: styles.dropdownList,
+        style: {
+            width: dropdownWidth != undefined ? `${dropdownWidth}px` : undefined,
+            maxHeight: `${maxDropdownHeight}px`
+        },
+        ref: menuListRef,
+        testId: "add-entry-menu"
+    }, Boolean(customDropdownItems) && _react.default.createElement(_react.default.Fragment, null, customDropdownItems, _react.default.createElement(_f36components.Menu.Divider, null)), isSearchable && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("div", {
+        ref: textField,
+        className: styles.inputWrapper
+    }, _react.default.createElement(_f36components.TextInput, {
+        className: styles.searchInput,
+        placeholder: "Search all content types",
+        testId: "add-entry-menu-search",
+        value: searchInput,
+        onChange: (e)=>setSearchInput(e.target.value)
+    }), _react.default.createElement(_f36icons.SearchIcon, {
+        className: styles.searchIcon
+    })), _react.default.createElement(_f36components.Menu.Divider, null)), searchInput && renderSearchResultsCount(filteredContentTypes.length), suggestedContentType && !searchInput && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_f36components.Menu.SectionTitle, null, "Suggested Content Type"), _react.default.createElement(_f36components.Menu.Item, {
+        testId: "suggested",
+        onClick: ()=>handleSelect(suggestedContentType)
+    }, (0, _get.default)(suggestedContentType, 'name')), _react.default.createElement(_f36components.Menu.Divider, null)), !searchInput && _react.default.createElement(_f36components.Menu.SectionTitle, null, contentTypesLabel), filteredContentTypes.length ? filteredContentTypes.map((contentType, i)=>_react.default.createElement(_f36components.Menu.Item, {
+            testId: "contentType",
+            key: `${(0, _get.default)(contentType, 'name')}-${i}`,
+            onClick: ()=>handleSelect(contentType)
+        }, (0, _get.default)(contentType, 'name', 'Untitled'))) : _react.default.createElement(_f36components.Menu.Item, {
+        testId: "add-entru-menu-search-results"
+    }, "No results found"))));
+};
+CreateEntryMenuTrigger.defaultProps = {
+    testId: 'create-entry-button-menu-trigger',
+    contentTypesLabel: 'All Content Types'
+};