payload 1.3.0 → 1.3.1

package/dist/admin/components/elements/DocumentDrawer/index.js

@@ -0,0 +1,143 @@
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { useModal } from '@faceless-ui/modal';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import DefaultEdit from '../../views/collections/Edit/Default';
+import X from '../../icons/X';
+import buildStateFromSchema from '../../forms/Form/buildStateFromSchema';
+import { getTranslation } from '../../../../utilities/getTranslation';
+import { Drawer, DrawerToggler } from '../Drawer';
+import Button from '../Button';
+import { useConfig } from '../../utilities/Config';
+import { useLocale } from '../../utilities/Locale';
+import { useAuth } from '../../utilities/Auth';
+import { DocumentInfoProvider } from '../../utilities/DocumentInfo';
+import RenderCustomComponent from '../../utilities/RenderCustomComponent';
+import usePayloadAPI from '../../../hooks/usePayloadAPI';
+import formatFields from '../../views/collections/Edit/formatFields';
+import { useRelatedCollections } from '../../forms/field-types/Relationship/AddNew/useRelatedCollections';
+import IDLabel from '../IDLabel';
+import { useEditDepth } from '../../utilities/EditDepth';
+import './index.scss';
+const baseClass = 'doc-drawer';
+const formatDocumentDrawerSlug = ({ collectionSlug, id, depth, uuid, }) => `doc-drawer_${collectionSlug}_${depth}${id ? `_${id}` : ''}_${uuid}`;
+export const DocumentDrawerToggler = ({ children, className, drawerSlug, id, collectionSlug, ...rest }) => {
+    const { t, i18n } = useTranslation(['fields', 'general']);
+    const [collectionConfig] = useRelatedCollections(collectionSlug);
+    return (React.createElement(DrawerToggler, { slug: drawerSlug, formatSlug: false, className: className, "aria-label": t(!id ? 'fields:addNewLabel' : 'general:editLabel', { label: getTranslation(collectionConfig.labels.singular, i18n) }), ...rest }, children));
+};
+export const DocumentDrawer = ({ collectionSlug, id, drawerSlug, onSave, customHeader, }) => {
+    var _a, _b, _c;
+    const { serverURL, routes: { api } } = useConfig();
+    const { toggleModal, modalState, closeModal } = useModal();
+    const locale = useLocale();
+    const { permissions, user } = useAuth();
+    const [initialState, setInitialState] = useState();
+    const { t, i18n } = useTranslation(['fields', 'general']);
+    const hasInitializedState = useRef(false);
+    const [isOpen, setIsOpen] = useState(false);
+    const [collectionConfig] = useRelatedCollections(collectionSlug);
+    const [fields, setFields] = useState(() => formatFields(collectionConfig, true));
+    useEffect(() => {
+        setFields(formatFields(collectionConfig, true));
+    }, [collectionSlug, collectionConfig]);
+    const [{ data, isLoading: isLoadingDocument, isError }] = usePayloadAPI((id ? `${serverURL}${api}/${collectionSlug}/${id}` : null), { initialParams: { 'fallback-locale': 'null', depth: 0, draft: 'true' } });
+    useEffect(() => {
+        if (isLoadingDocument || hasInitializedState.current === true) {
+            return;
+        }
+        const awaitInitialState = async () => {
+            const state = await buildStateFromSchema({
+                fieldSchema: fields,
+                data,
+                user,
+                operation: id ? 'update' : 'create',
+                id,
+                locale,
+                t,
+            });
+            setInitialState(state);
+        };
+        awaitInitialState();
+        hasInitializedState.current = true;
+    }, [data, fields, id, user, locale, isLoadingDocument, t]);
+    useEffect(() => {
+        var _a;
+        setIsOpen(Boolean((_a = modalState[drawerSlug]) === null || _a === void 0 ? void 0 : _a.isOpen));
+    }, [modalState, drawerSlug]);
+    useEffect(() => {
+        var _a;
+        if (isOpen && !isLoadingDocument && isError) {
+            closeModal(drawerSlug);
+            toast.error(((_a = data.errors) === null || _a === void 0 ? void 0 : _a[0].message) || t('error:unspecific'));
+        }
+    }, [isError, t, isOpen, data, drawerSlug, closeModal, isLoadingDocument]);
+    if (isError)
+        return null;
+    if (isOpen) {
+        // IMPORTANT: we must ensure that modals are not recursively rendered
+        // to do this, do not render the drawer until it is open
+        return (React.createElement(Drawer, { slug: drawerSlug, formatSlug: false, className: baseClass },
+            React.createElement(DocumentInfoProvider, { collection: collectionConfig },
+                React.createElement(RenderCustomComponent, { DefaultComponent: DefaultEdit, CustomComponent: (_c = (_b = (_a = collectionConfig.admin) === null || _a === void 0 ? void 0 : _a.components) === null || _b === void 0 ? void 0 : _b.views) === null || _c === void 0 ? void 0 : _c.Edit, componentProps: {
+                        isLoading: !initialState,
+                        data,
+                        id,
+                        collection: collectionConfig,
+                        permissions: permissions.collections[collectionConfig.slug],
+                        isEditing: Boolean(id),
+                        apiURL: id ? `${serverURL}${api}/${collectionSlug}/${id}` : null,
+                        onSave,
+                        initialState,
+                        hasSavePermission: true,
+                        action: `${serverURL}${api}/${collectionSlug}${id ? `/${id}` : ''}?locale=${locale}&depth=0&fallback-locale=null`,
+                        disableEyebrow: true,
+                        disableActions: true,
+                        me: true,
+                        disableLeaveWithoutSaving: true,
+                        customHeader: (React.createElement("div", { className: `${baseClass}__header` },
+                            React.createElement("div", { className: `${baseClass}__header-content` },
+                                React.createElement("h2", null, !customHeader ? t(!id ? 'fields:addNewLabel' : 'general:editLabel', { label: getTranslation(collectionConfig.labels.singular, i18n) }) : customHeader),
+                                React.createElement(Button, { buttonStyle: "none", className: `${baseClass}__header-close`, onClick: () => toggleModal(drawerSlug), "aria-label": t('general:close') },
+                                    React.createElement(X, null))),
+                            id && (React.createElement(IDLabel, { id: id })))),
+                    } }))));
+    }
+    return null;
+};
+export const useDocumentDrawer = ({ id, collectionSlug }) => {
+    const drawerDepth = useEditDepth();
+    const uuid = useId();
+    const { modalState, toggleModal } = useModal();
+    const [isOpen, setIsOpen] = useState(false);
+    const drawerSlug = formatDocumentDrawerSlug({
+        collectionSlug,
+        id,
+        depth: drawerDepth,
+        uuid,
+    });
+    useEffect(() => {
+        var _a;
+        setIsOpen(Boolean((_a = modalState[drawerSlug]) === null || _a === void 0 ? void 0 : _a.isOpen));
+    }, [modalState, drawerSlug]);
+    const toggleDrawer = useCallback(() => {
+        toggleModal(drawerSlug);
+    }, [toggleModal, drawerSlug]);
+    const MemoizedDrawer = useMemo(() => {
+        return ((props) => (React.createElement(DocumentDrawer, { ...props, collectionSlug: collectionSlug, id: id, drawerSlug: drawerSlug, key: drawerSlug })));
+    }, [id, drawerSlug, collectionSlug]);
+    const MemoizedDrawerToggler = useMemo(() => {
+        return ((props) => (React.createElement(DocumentDrawerToggler, { ...props, id: id, collectionSlug: collectionSlug, drawerSlug: drawerSlug })));
+    }, [id, drawerSlug, collectionSlug]);
+    const MemoizedDrawerState = useMemo(() => ({
+        drawerSlug,
+        drawerDepth,
+        isDrawerOpen: isOpen,
+        toggleDrawer,
+    }), [drawerDepth, drawerSlug, isOpen, toggleDrawer]);
+    return [
+        MemoizedDrawer,
+        MemoizedDrawerToggler,
+        MemoizedDrawerState,
+    ];
+};

package/dist/admin/components/elements/DocumentDrawer/index.scss

@@ -0,0 +1,36 @@
+@import '../../../scss/styles.scss';
+
+.doc-drawer {
+  &__header {
+    margin-bottom: base(1);
+  }
+
+  &__header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-top: base(2.5);
+  }
+
+  &__header-close {
+    svg {
+      width: base(2.5);
+      height: base(2.5);
+      position: relative;
+      top: base(-.5);
+      right: base(-.75);
+
+      .stroke {
+        stroke-width: .5px;
+      }
+    }
+  }
+
+  @include mid-break {
+    &__header-close {
+      svg {
+        top: base(-.75);
+      }
+    }
+  }
+}

package/dist/admin/components/elements/DocumentDrawer/types.d.ts

@@ -0,0 +1,28 @@
+import React, { HTMLAttributes } from 'react';
+export type DocumentDrawerProps = {
+    collectionSlug: string;
+    id?: string;
+    onSave?: (json: Record<string, unknown>) => void;
+    customHeader?: React.ReactNode;
+    drawerSlug?: string;
+};
+export type DocumentTogglerProps = HTMLAttributes<HTMLButtonElement> & {
+    children?: React.ReactNode;
+    className?: string;
+    drawerSlug?: string;
+    id?: string;
+    collectionSlug: string;
+};
+export type UseDocumentDrawer = (args: {
+    id?: string;
+    collectionSlug: string;
+}) => [
+    React.FC<Omit<DocumentDrawerProps, 'collectionSlug' | 'id'>>,
+    React.FC<Omit<DocumentTogglerProps, 'collectionSlug' | 'id'>>,
+    {
+        drawerSlug: string;
+        drawerDepth: number;
+        isDrawerOpen: boolean;
+        toggleDrawer: () => void;
+    }
+];

package/dist/admin/components/elements/Drawer/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Props, TogglerProps } from './types';
+import './index.scss';
+export declare const DrawerToggler: React.FC<TogglerProps>;
+export declare const Drawer: React.FC<Props>;

package/dist/admin/components/elements/Drawer/index.js

@@ -0,0 +1,44 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Modal, useModal } from '@faceless-ui/modal';
+import { useWindowInfo } from '@faceless-ui/window-info';
+import { useTranslation } from 'react-i18next';
+import { EditDepthContext, useEditDepth } from '../../utilities/EditDepth';
+import './index.scss';
+const baseClass = 'drawer';
+const zBase = 100;
+const formatDrawerSlug = ({ slug, depth, }) => `drawer_${depth}_${slug}`;
+export const DrawerToggler = ({ slug, formatSlug, children, className, onClick, ...rest }) => {
+    const { openModal } = useModal();
+    const drawerDepth = useEditDepth();
+    const handleClick = useCallback((e) => {
+        openModal(formatSlug !== false ? formatDrawerSlug({ slug, depth: drawerDepth }) : slug);
+        if (typeof onClick === 'function')
+            onClick(e);
+    }, [openModal, drawerDepth, slug, onClick, formatSlug]);
+    return (React.createElement("button", { onClick: handleClick, type: "button", className: className, ...rest }, children));
+};
+export const Drawer = ({ slug, formatSlug, children, className, }) => {
+    const { t } = useTranslation('general');
+    const { closeModal, modalState } = useModal();
+    const { breakpoints: { m: midBreak } } = useWindowInfo();
+    const drawerDepth = useEditDepth();
+    const [isOpen, setIsOpen] = useState(false);
+    const [modalSlug] = useState(() => (formatSlug !== false ? formatDrawerSlug({ slug, depth: drawerDepth }) : slug));
+    useEffect(() => {
+        setIsOpen(modalState[modalSlug].isOpen);
+    }, [modalSlug, modalState]);
+    return (React.createElement(Modal, { slug: modalSlug, className: [
+            className,
+            baseClass,
+            isOpen && `${baseClass}--is-open`,
+        ].filter(Boolean).join(' '), style: {
+            zIndex: zBase + drawerDepth,
+        } },
+        drawerDepth === 1 && (React.createElement("div", { className: `${baseClass}__blur-bg` })),
+        React.createElement("button", { className: `${baseClass}__close`, id: `close-drawer__${modalSlug}`, type: "button", onClick: () => closeModal(modalSlug), style: {
+                width: `calc(${midBreak ? 'var(--gutter-h)' : 'var(--nav-width)'} + ${drawerDepth - 1} * 25px)`,
+            }, "aria-label": t('close') }),
+        React.createElement("div", { className: `${baseClass}__content` },
+            React.createElement("div", { className: `${baseClass}__content-children` },
+                React.createElement(EditDepthContext.Provider, { value: drawerDepth + 1 }, children)))));
+};

package/dist/admin/components/elements/Drawer/index.scss

@@ -0,0 +1,86 @@
+@import '../../../scss/styles.scss';
+
+.drawer {
+  display: flex;
+  overflow: hidden;
+  position: fixed;
+  height: 100vh;
+
+  &__blur-bg {
+    @include blur-bg();
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    transition: all 300ms ease-out;
+  }
+
+  &__content {
+    @include blur-bg();
+    opacity: 0;
+    transform: translateX(#{base(4)});
+    position: relative;
+    z-index: 2;
+    width: 100%;
+    transition: all 300ms ease-out;
+  }
+
+  &__content-children {
+    position: relative;
+    z-index: 1;
+    overflow: auto;
+    height: 100%;
+  }
+
+  &--is-open {
+    .drawer__content,
+    .drawer__blur-bg,
+    .drawer__close {
+      opacity: 1;
+    }
+
+    .drawer__close {
+      transition: opacity 300ms ease-in-out;
+      transition-delay: 100ms;
+    }
+
+    .drawer__content {
+      transform: translateX(0);
+    }
+  }
+
+  &__close {
+    @extend %btn-reset;
+    position: relative;
+    z-index: 2;
+    flex-shrink: 0;
+    text-indent: -9999px;
+    background: rgba(0, 0, 0, 0.08);
+    cursor: pointer;
+    opacity: 0;
+    will-change: opacity;
+    transition: none;
+    transition-delay: 0ms;
+
+    &:active,
+    &:focus {
+      outline: 0;
+    }
+  }
+
+
+  @include mid-break {
+    &__close {
+      width: base(1);
+    }
+  }
+}
+
+html[data-theme=dark] {
+  .drawer__close {
+    background: rgba(0, 0, 0, 0.2);
+  }
+}

package/dist/admin/components/elements/Drawer/types.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from 'react';
+export type Props = {
+    slug: string;
+    formatSlug?: boolean;
+    children: React.ReactNode;
+    className?: string;
+};
+export type TogglerProps = HTMLAttributes<HTMLButtonElement> & {
+    slug: string;
+    formatSlug?: boolean;
+    children: React.ReactNode;
+    className?: string;
+};

package/dist/admin/components/elements/Drawer/types.js

@@ -0,0 +1 @@
+export {};

package/dist/admin/components/elements/DuplicateDocument/types.d.ts

@@ -1,5 +1,5 @@
 import { SanitizedCollectionConfig } from '../../../../collections/config/types';
-export declare type Props = {
+export type Props = {
     slug: string;
     collection: SanitizedCollectionConfig;
     id: string;

package/dist/admin/components/elements/Eyebrow/types.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-export declare type Props = {
+export type Props = {
     actions?: React.ReactNode;
 };

package/dist/admin/components/elements/FileDetails/Meta/types.d.ts

@@ -1,4 +1,4 @@
-export declare type Props = {
+export type Props = {
     filename: string;
     mimeType: string;
     filesize: number;

package/dist/admin/components/elements/FileDetails/types.d.ts

@@ -1,5 +1,5 @@
 import { SanitizedCollectionConfig } from '../../../../collections/config/types';
-export declare type Props = {
+export type Props = {
     collection: SanitizedCollectionConfig;
     doc: Record<string, unknown>;
     handleRemove?: () => void;

package/dist/admin/components/elements/GenerateConfirmation/types.d.ts

@@ -1,4 +1,4 @@
-export declare type Props = {
+export type Props = {
     setKey: () => void;
     highlightField: (Boolean: any) => void;
 };

package/dist/admin/components/elements/Gutter/index.d.ts

@@ -1,6 +1,6 @@
 import React, { Ref } from 'react';
 import './index.scss';
-declare type Props = {
+type Props = {
     left?: boolean;
     right?: boolean;
     negativeLeft?: boolean;

package/dist/admin/components/elements/ListControls/types.d.ts

@@ -1,6 +1,6 @@
 import { Where } from '../../../../types';
 import { SanitizedCollectionConfig } from '../../../../collections/config/types';
-export declare type Props = {
+export type Props = {
     enableColumns?: boolean;
     enableSort?: boolean;
     modifySearchQuery?: boolean;
@@ -10,7 +10,7 @@ export declare type Props = {
     setColumns?: (columns: string[]) => void;
     collection: SanitizedCollectionConfig;
 };
-export declare type ListControls = {
+export type ListControls = {
     where?: unknown;
     columns?: string[];
 };

package/dist/admin/components/elements/Localizer/types.d.ts

@@ -1 +1 @@
-export declare type Props = {};
+export type Props = {};

package/dist/admin/components/elements/NavGroup/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import './index.scss';
-declare type Props = {
+type Props = {
     children: React.ReactNode;
     label: string;
 };

package/dist/admin/components/elements/Paginator/ClickableArrow/types.d.ts

@@ -1,4 +1,4 @@
-export declare type Props = {
+export type Props = {
     updatePage?: () => void;
     isDisabled?: boolean;
     direction?: 'right' | 'left';

package/dist/admin/components/elements/Paginator/Page/types.d.ts

@@ -1,4 +1,4 @@
-export declare type Props = {
+export type Props = {
     page?: number;
     isCurrent?: boolean;
     updatePage?: (page: any) => void;

package/dist/admin/components/elements/Paginator/types.d.ts

@@ -1,4 +1,4 @@
-export declare type Props = {
+export type Props = {
     limit?: number;
     totalPages?: number;
     page?: number;
@@ -10,7 +10,7 @@ export declare type Props = {
     disableHistoryChange?: boolean;
     onChange?: (page: number) => void;
 };
-export declare type Node = {
+export type Node = {
     type: 'Page' | 'Separator' | 'ClickableArrow';
     props?: {
         page?: number;

package/dist/admin/components/elements/PerPage/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import './index.scss';
-declare type Props = {
+type Props = {
     limits: number[];
     limit: number;
     handleChange?: (limit: number) => void;

package/dist/admin/components/elements/Pill/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type Props = {
+export type Props = {
     children?: React.ReactNode;
     className?: string;
     to?: string;
@@ -8,7 +8,7 @@ export declare type Props = {
     onClick?: () => void;
     pillStyle?: 'white' | 'light' | 'dark' | 'light-gray' | 'warning' | 'success';
 };
-export declare type RenderedTypeProps = {
+export type RenderedTypeProps = {
     children: React.ReactNode;
     className?: string;
     to: string;

package/dist/admin/components/elements/Popup/PopupButton/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type Props = {
+export type Props = {
     className?: string;
     buttonType: 'custom' | 'default' | 'none';
     button: React.ReactNode;

package/dist/admin/components/elements/Popup/types.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-export declare type Props = {
+export type Props = {
     className?: string;
     buttonClassName?: string;
     render?: (any: any) => React.ReactNode;

package/dist/admin/components/elements/PreviewButton/types.d.ts

@@ -1,6 +1,6 @@
 import { Data } from '../../forms/Form/types';
 import { GeneratePreviewURL } from '../../../../config/types';
-export declare type Props = {
+export type Props = {
     generatePreviewURL?: GeneratePreviewURL;
     data?: Data;
 };

package/dist/admin/components/elements/Publish/types.d.ts

@@ -1 +1 @@
-export declare type Props = {};
+export type Props = {};

package/dist/admin/components/elements/ReactSelect/ClearIndicator/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { IndicatorProps } from 'react-select';
+import { Option as OptionType } from '../types';
+import './index.scss';
+export declare const ClearIndicator: React.FC<IndicatorProps<OptionType, true>>;

package/dist/admin/components/elements/ReactSelect/ClearIndicator/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import X from '../../../icons/X';
+import './index.scss';
+const baseClass = 'clear-indicator';
+export const ClearIndicator = (props) => {
+    const { innerProps: { ref, ...restInnerProps }, } = props;
+    return (React.createElement("div", { className: baseClass, ref: ref, ...restInnerProps },
+        React.createElement(X, { className: `${baseClass}__icon` })));
+};

package/dist/admin/components/elements/ReactSelect/ClearIndicator/index.scss

@@ -0,0 +1,5 @@
+@import '../../../../scss/styles.scss';
+
+.clear-indicator {
+  cursor: pointer;
+}

package/dist/admin/components/elements/ReactSelect/Control/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ControlProps } from 'react-select';
+import { Option } from '../../../forms/field-types/Relationship/types';
+export declare const Control: React.FC<ControlProps<Option, any>>;

package/dist/admin/components/elements/ReactSelect/Control/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { components as SelectComponents } from 'react-select';
+export const Control = (props) => {
+    const { children, innerProps, selectProps: { selectProps: { disableMouseDown, disableKeyDown, }, }, } = props;
+    return (React.createElement(SelectComponents.Control, { ...props, innerProps: {
+            ...innerProps,
+            onMouseDown: (e) => {
+                // we need to prevent react-select from hijacking the 'onMouseDown' event while modals are open (i.e. the 'Relationship' field component)
+                if (!disableMouseDown) {
+                    innerProps.onMouseDown(e);
+                }
+            },
+            // react-select has this typed incorrectly so we disable the linting rule
+            // we need to prevent react-select from hijacking the 'onKeyDown' event while modals are open (i.e. the 'Relationship' field component)
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            onKeyDown: (e) => {
+                if (disableKeyDown) {
+                    e.stopPropagation();
+                }
+            },
+        } }, children));
+};

package/dist/admin/components/elements/ReactSelect/MultiValue/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { MultiValueProps } from 'react-select';
+import { Option as OptionType } from '../types';
+import './index.scss';
+export declare const MultiValue: React.FC<MultiValueProps<OptionType>>;

package/dist/admin/components/elements/ReactSelect/MultiValue/index.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { components as SelectComponents, } from 'react-select';
+import { useSortable } from '@dnd-kit/sortable';
+import './index.scss';
+const baseClass = 'multi-value';
+export const MultiValue = (props) => {
+    const { className, isDisabled, innerProps, data: { value, }, selectProps: { selectProps, selectProps: { disableMouseDown, }, }, } = props;
+    const { attributes, listeners, setNodeRef, transform } = useSortable({
+        id: value,
+    });
+    const classes = [
+        baseClass,
+        className,
+        !isDisabled && 'draggable',
+    ].filter(Boolean).join(' ');
+    return (React.createElement(SelectComponents.MultiValue, { ...props, className: classes, innerProps: {
+            ...innerProps,
+            ref: setNodeRef,
+            onMouseDown: (e) => {
+                if (!disableMouseDown) {
+                    // we need to prevent the dropdown from opening when clicking on the drag handle, but not when a modal is open (i.e. the 'Relationship' field component)
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+            },
+            style: {
+                ...transform ? {
+                    transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+                } : {},
+            },
+        }, selectProps: {
+            ...selectProps,
+            // pass the draggable props through to the label so it alone acts as the draggable handle
+            draggableProps: {
+                ...attributes,
+                ...listeners,
+            },
+        } }));
+};

package/dist/admin/components/elements/ReactSelect/MultiValue/index.scss

@@ -0,0 +1,15 @@
+@import '../../../../scss/styles.scss';
+
+.multi-value {
+  &.rs__multi-value {
+    padding: 0;
+    background: transparent;
+    border: $style-stroke-width-s solid var(--theme-elevation-800);
+    line-height: calc(#{$baseline} - #{$style-stroke-width-s * 2});
+    margin: base(.25) base(.5) base(.25) 0;
+
+    &.draggable {
+      cursor: grab;
+    }
+  }
+}

package/dist/admin/components/elements/ReactSelect/MultiValueLabel/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { MultiValueProps } from 'react-select';
+import { Option } from '../../../forms/field-types/Relationship/types';
+import './index.scss';
+export declare const MultiValueLabel: React.FC<MultiValueProps<Option>>;