@contentful/field-editor-reference 5.9.0 → 5.11.0

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

@@ -0,0 +1,206 @@
+import * as React from 'react';
+import '@testing-library/jest-dom';
+import { act, configure, fireEvent, render, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
+import noop from 'lodash/noop';
+import { CreateEntryLinkButton } from './CreateEntryLinkButton';
+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  } = render(React.createElement(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  } = render(React.createElement(CreateEntryLinkButton, props));
+        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  } = render(React.createElement(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  } = render(React.createElement(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  } = render(React.createElement(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  } = render(React.createElement(CreateEntryLinkButton, props));
+        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  } = render(React.createElement(CreateEntryLinkButton, {
+            ...props,
+            onSelect: selectSpy
+        }));
+        fireEvent.click(findButton(getByTestId));
+        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  } = render(React.createElement(CreateEntryLinkButton, {
+            ...props,
+            onSelect: onSelectStub
+        }));
+        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  } = render(React.createElement(CreateEntryLinkButton, {
+            contentTypes: [
+                CONTENT_TYPE_1
+            ],
+            onSelect: onSelect
+        }));
+        fireEvent.click(findButton(getByTestId));
+        expect(onSelect).toHaveBeenCalled();
+        const spinner = await 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  } = render(React.createElement(CreateEntryLinkButton, {
+            contentTypes: [
+                CONTENT_TYPE_1
+            ],
+            onSelect: onSelect
+        }));
+        fireEvent.click(findButton(getByTestId));
+        const getSpinner = ()=>getByTestId('cf-ui-spinner');
+        const spinner = await waitFor(getSpinner, {
+            container
+        });
+        expect(spinner).toBeDefined();
+        await 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  } = render(React.createElement(CreateEntryLinkButton, {
+            contentTypes: [
+                CONTENT_TYPE_1
+            ],
+            onSelect: onSelect
+        }));
+        fireEvent.click(findButton(getByTestId));
+        fireEvent.click(findButton(getByTestId));
+        fireEvent.click(findButton(getByTestId));
+        await waitFor(noop, {
+            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  } = render(React.createElement(CreateEntryLinkButton, {
+            contentTypes: [
+                CONTENT_TYPE_1
+            ],
+            onSelect: onSelect
+        }));
+        await act(async ()=>{
+            fireEvent.click(findButton(getByTestId));
+            await waitFor(noop, {
+                timeout: 100
+            });
+            fireEvent.click(findButton(getByTestId));
+        });
+        expect(onSelect).toHaveBeenCalledTimes(2);
+    });
+});

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

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

package/dist/esm/components/CreateEntryLinkButton/CreateEntryMenuTrigger.spec.js

@@ -0,0 +1,142 @@
+import * as React from 'react';
+import { Button } from '@contentful/f36-components';
+import '@testing-library/jest-dom/extend-expect';
+import { act, configure, fireEvent, render } from '@testing-library/react';
+import noop from 'lodash/noop';
+import fill from 'lodash/fill';
+import { CreateEntryMenuTrigger } from './CreateEntryMenuTrigger';
+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'
+    }
+};
+describe('CreateEntryMenuTrigger general', ()=>{
+    const props = {
+        contentTypes: [
+            CONTENT_TYPE_1,
+            CONTENT_TYPE_2,
+            CONTENT_TYPE_3
+        ],
+        onSelect: ()=>{
+            return Promise.resolve();
+        }
+    };
+    let stub = jest.fn();
+    beforeEach(()=>{
+        stub = jest.fn().mockImplementation(()=>React.createElement(Button, {
+                testId: "menu-trigger"
+            }));
+    });
+    it('shares the state and functions for the menu', ()=>{
+        const stub = (api)=>{
+            expect(api.isOpen).toBe(false);
+            expect(api.isSelecting).toBe(false);
+            return React.createElement("span", null);
+        };
+        render(React.createElement(CreateEntryMenuTrigger, props, stub));
+    });
+    it('should set isSelecting to true in case onSelect returns a promise', async ()=>{
+        const selectStub = jest.fn(()=>new Promise((resolve)=>setTimeout(resolve, 1000)));
+        const { getAllByTestId , getByTestId  } = render(React.createElement(CreateEntryMenuTrigger, {
+            ...props,
+            onSelect: selectStub
+        }, stub));
+        act(()=>{
+            fireEvent.click(getByTestId('menu-trigger'));
+        });
+        act(()=>{
+            fireEvent.click(getAllByTestId('contentType')[0]);
+        });
+        expect(selectStub).toHaveBeenCalled();
+    });
+    it('should not set isSelecting to true in case onSelect is sync', async ()=>{
+        const selectStub = jest.fn();
+        const { getAllByTestId , getByTestId  } = render(React.createElement(CreateEntryMenuTrigger, {
+            ...props,
+            onSelect: selectStub
+        }, stub));
+        act(()=>{
+            fireEvent.click(getByTestId('menu-trigger'));
+        });
+        act(()=>{
+            fireEvent.click(getAllByTestId('contentType')[0]);
+        });
+        expect(stub).toHaveBeenLastCalledWith({
+            isOpen: false,
+            isSelecting: false
+        });
+        expect(selectStub).toHaveBeenCalled();
+    });
+    it('renders text input if contentTypes.length > 20', ()=>{
+        const { getByTestId  } = render(React.createElement(CreateEntryMenuTrigger, {
+            ...props,
+            contentTypes: fill(Array(21), CONTENT_TYPE_3)
+        }, stub));
+        act(()=>{
+            fireEvent.click(getByTestId('menu-trigger'));
+        });
+        expect(getByTestId('add-entry-menu-search')).toBeDefined();
+    });
+    it('shows the search results if typed in input', ()=>{
+        const contentTypes = fill(fill(fill(Array(21), CONTENT_TYPE_1, 0, 10), CONTENT_TYPE_2, 10, 20), CONTENT_TYPE_3, 20);
+        const { getByTestId , getAllByTestId  } = render(React.createElement(CreateEntryMenuTrigger, {
+            ...props,
+            contentTypes: contentTypes
+        }, stub));
+        act(()=>{
+            fireEvent.click(getByTestId('menu-trigger'));
+        });
+        const input = getByTestId('add-entry-menu-search');
+        fireEvent.change(input, {
+            target: {
+                value: '1'
+            },
+            preventDefault: noop
+        });
+        expect(getAllByTestId('contentType')).toHaveLength(10);
+        expect(getByTestId('add-entru-menu-search-results').textContent).toBe('10 results');
+        fireEvent.change(input, {
+            target: {
+                value: '3'
+            },
+            preventDefault: noop
+        });
+        expect(getAllByTestId('contentType')).toHaveLength(1);
+        expect(getByTestId('add-entru-menu-search-results').textContent).toBe('1 result');
+        fireEvent.change(input, {
+            target: {
+                value: '4'
+            },
+            preventDefault: noop
+        });
+        expect(getByTestId('add-entru-menu-search-results').textContent).toBe('No results found');
+    });
+    it('shows suggestedContentType in the list', ()=>{
+        const { getByTestId  } = render(React.createElement(CreateEntryMenuTrigger, {
+            ...props,
+            suggestedContentTypeId: props.contentTypes[0].sys.id
+        }, stub));
+        act(()=>{
+            fireEvent.click(getByTestId('menu-trigger'));
+        });
+        const suggestedContentType = getByTestId('suggested');
+        expect(suggestedContentType).toBeDefined();
+        expect(suggestedContentType.textContent).toBe(props.contentTypes[0].name);
+    });
+});

package/dist/esm/components/CreateEntryLinkButton/useGlobalMouseUp.js

@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+export const useGlobalMouseUp = (handler)=>{
+    useEffect(()=>{
+        document.addEventListener('mouseup', handler);
+        return ()=>document.removeEventListener('mouseup', handler);
+    }, [
+        handler
+    ]);
+};

package/dist/esm/components/LinkActions/CombinedLinkActions.js

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import { Button, Menu } from '@contentful/f36-components';
+import { LinkIcon, PlusIcon, ChevronDownIcon } from '@contentful/f36-icons';
+import { CreateEntryLinkButton } from '../CreateEntryLinkButton/CreateEntryLinkButton';
+import { testIds as sharedTextIds } from './LinkActions';
+import { NoLinkPermissionsInfo } from './NoLinkPermissionsInfo';
+import * as styles from './redesignStyles';
+const testIds = {
+    ...sharedTextIds,
+    actionsWrapper: 'link-actions-menu-trigger'
+};
+export function CombinedLinkActions(props) {
+    if (props.isFull) {
+        return null;
+    }
+    const hideEmptyCard = props.entityType === 'Asset' && !props.isEmpty;
+    return React.createElement("div", {
+        className: hideEmptyCard ? '' : styles.container
+    }, !props.canCreateEntity && !props.canLinkEntity && React.createElement(NoLinkPermissionsInfo, null), props.entityType === 'Entry' && React.createElement(CombinedEntryLinkActions, props), props.entityType === 'Asset' && React.createElement(CombinedAssetLinkActions, props));
+}
+function CombinedEntryLinkActions(props) {
+    if (props.canCreateEntity) {
+        return React.createElement(CreateEntryLinkButton, {
+            testId: testIds.actionsWrapper,
+            disabled: props.isDisabled,
+            text: props.combinedActionsLabel || 'Add content',
+            contentTypes: props.contentTypes,
+            hasPlusIcon: true,
+            useExperimentalStyles: true,
+            dropdownSettings: {
+                position: 'bottom-left'
+            },
+            onSelect: (contentTypeId)=>{
+                return contentTypeId ? props.onCreate(contentTypeId) : Promise.resolve();
+            },
+            customDropdownItems: props.canLinkEntity ? React.createElement(Menu.Item, {
+                testId: testIds.linkExisting,
+                onClick: ()=>{
+                    props.onLinkExisting();
+                }
+            }, "Add existing content") : undefined
+        });
+    } else if (props.canLinkEntity) {
+        return React.createElement(Button, {
+            isDisabled: props.isDisabled,
+            testId: testIds.linkExisting,
+            className: styles.action,
+            onClick: ()=>{
+                props.onLinkExisting();
+            },
+            variant: "secondary",
+            startIcon: React.createElement(LinkIcon, null),
+            size: "small"
+        }, "Add existing content");
+    }
+    return null;
+}
+function CombinedAssetLinkActions(props) {
+    const [isOpen, setOpen] = React.useState(false);
+    if (!props.canLinkEntity || !props.canCreateEntity) {
+        if (props.canLinkEntity) {
+            return React.createElement(Button, {
+                isDisabled: props.isDisabled,
+                testId: testIds.linkExisting,
+                className: styles.action,
+                onClick: ()=>{
+                    props.onLinkExisting();
+                },
+                variant: "secondary",
+                startIcon: React.createElement(PlusIcon, null),
+                size: "small"
+            }, "Add existing media");
+        }
+        if (props.canCreateEntity) {
+            return React.createElement(Button, {
+                isDisabled: props.isDisabled,
+                testId: testIds.createAndLink,
+                className: styles.action,
+                onClick: ()=>{
+                    props.onCreate();
+                },
+                variant: "secondary",
+                startIcon: React.createElement(PlusIcon, null),
+                size: "small"
+            }, "Add media");
+        }
+        return null;
+    }
+    return React.createElement(Menu, {
+        isOpen: isOpen,
+        onClose: ()=>{
+            setOpen(false);
+        },
+        onOpen: ()=>{
+            setOpen(true);
+        }
+    }, React.createElement(Menu.Trigger, null, React.createElement(Button, {
+        endIcon: React.createElement(ChevronDownIcon, null),
+        isDisabled: props.isDisabled,
+        testId: testIds.actionsWrapper,
+        className: styles.action,
+        variant: "secondary",
+        startIcon: React.createElement(PlusIcon, null),
+        size: "small"
+    }, "Add media")), isOpen && React.createElement(Menu.List, {
+        testId: testIds.dropdown
+    }, React.createElement(Menu.Item, {
+        testId: testIds.linkExisting,
+        onClick: ()=>{
+            props.onLinkExisting();
+        }
+    }, "Add existing media"), React.createElement(Menu.Item, {
+        testId: testIds.createAndLink,
+        onClick: ()=>{
+            props.onCreate();
+        }
+    }, "Add new media")));
+}

package/dist/esm/components/LinkActions/LinkActions.js

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { Button } from '@contentful/f36-components';
+import { PlusIcon, LinkIcon } from '@contentful/f36-icons';
+import { CreateEntryLinkButton } from '../CreateEntryLinkButton/CreateEntryLinkButton';
+import { NoLinkPermissionsInfo } from './NoLinkPermissionsInfo';
+import * as styles from './styles';
+const defaultEntryLabels = {
+    createNew: (props)=>props?.contentType ? `Create new ${props.contentType} and link` : 'Create new entry and link',
+    linkExisting: (props)=>props?.canLinkMultiple ? 'Link existing entries' : 'Link existing entry'
+};
+const defaultAssetLabels = {
+    createNew: ()=>`Create new asset and link`,
+    linkExisting: (props)=>props?.canLinkMultiple ? 'Link existing assets' : 'Link existing asset'
+};
+export const testIds = {
+    dropdown: 'linkEditor.dropdown',
+    createAndLink: 'linkEditor.createAndLink',
+    createAndLinkWrapper: 'create-entry-button-menu-trigger',
+    linkExisting: 'linkEditor.linkExisting'
+};
+export function LinkActions(props) {
+    if (props.isFull) {
+        return null;
+    }
+    const defaultLabels = props.entityType === 'Entry' ? defaultEntryLabels : defaultAssetLabels;
+    const labels = {
+        ...defaultLabels,
+        ...props.actionLabels
+    };
+    return React.createElement("div", {
+        className: styles.container
+    }, props.canCreateEntity && React.createElement(React.Fragment, null, props.entityType === 'Entry' && React.createElement(CreateEntryLinkButton, {
+        testId: testIds.createAndLink,
+        disabled: props.isDisabled,
+        text: labels.createNew({
+            contentType: props.contentTypes.length === 1 ? props.contentTypes[0].name : undefined
+        }),
+        contentTypes: props.contentTypes,
+        hasPlusIcon: true,
+        onSelect: (contentTypeId)=>{
+            return contentTypeId ? props.onCreate(contentTypeId, props.itemsLength) : Promise.resolve();
+        }
+    }), props.entityType === 'Asset' && React.createElement(Button, {
+        isDisabled: props.isDisabled,
+        testId: testIds.createAndLink,
+        onClick: ()=>{
+            props.onCreate(undefined, props.itemsLength);
+        },
+        variant: "secondary",
+        startIcon: React.createElement(PlusIcon, null),
+        size: "small"
+    }, labels.createNew()), React.createElement("span", {
+        className: styles.separator
+    })), props.canLinkEntity && React.createElement(Button, {
+        isDisabled: props.isDisabled,
+        testId: testIds.linkExisting,
+        onClick: ()=>{
+            props.onLinkExisting();
+        },
+        variant: "secondary",
+        startIcon: React.createElement(LinkIcon, null),
+        size: "small"
+    }, labels.linkExisting({
+        canLinkMultiple: props.canLinkMultiple
+    })), !props.canCreateEntity && !props.canLinkEntity && React.createElement(NoLinkPermissionsInfo, null));
+}