@payloadcms/plugin-multi-tenant 3.57.0-internal.f26caed → 3.58.0-canary.0

package/dist/components/AssignTenantFieldModal/index.client.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './index.scss';
+export declare const assignTenantModalSlug = "assign-tenant-field-modal";
+export declare const AssignTenantFieldTrigger: React.FC;
+export declare const AssignTenantFieldModal: React.FC<{
+    afterModalClose: () => void;
+    afterModalOpen: () => void;
+    children: React.ReactNode;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+}>;
+//# sourceMappingURL=index.client.d.ts.map

package/dist/components/AssignTenantFieldModal/index.client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../src/components/AssignTenantFieldModal/index.client.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,cAAc,CAAA;AAGrB,eAAO,MAAM,qBAAqB,8BAA8B,CAAA;AAGhE,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAgB5C,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC5C,eAAe,EAAE,MAAM,IAAI,CAAA;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB,CA8EA,CAAA"}

package/dist/components/AssignTenantFieldModal/index.client.js

@@ -0,0 +1,133 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Modal, Pill, PopupList, useConfig, useDocumentInfo, useDocumentTitle, useModal, useTranslation } from '@payloadcms/ui';
+import { drawerZBase, useDrawerDepth } from '@payloadcms/ui/elements/Drawer';
+import React from 'react';
+import './index.scss';
+import { useTenantSelection } from '../../providers/TenantSelectionProvider/index.client.js';
+export const assignTenantModalSlug = 'assign-tenant-field-modal';
+const baseClass = 'assign-tenant-field-modal';
+export const AssignTenantFieldTrigger = ()=>{
+    const { openModal } = useModal();
+    const { t } = useTranslation();
+    const { options } = useTenantSelection();
+    if (options.length <= 1) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: /*#__PURE__*/ _jsx(PopupList.Button, {
+            onClick: ()=>openModal(assignTenantModalSlug),
+            children: t('plugin-multi-tenant:assign-tenant-button-label')
+        })
+    });
+};
+export const AssignTenantFieldModal = ({ afterModalClose, afterModalOpen, children, onCancel, onConfirm })=>{
+    const editDepth = useDrawerDepth();
+    const { t } = useTranslation();
+    const { collectionSlug } = useDocumentInfo();
+    const { title } = useDocumentTitle();
+    const { getEntityConfig } = useConfig();
+    const collectionConfig = getEntityConfig({
+        collectionSlug
+    });
+    const { closeModal, isModalOpen: isModalOpenFn } = useModal();
+    const isModalOpen = isModalOpenFn(assignTenantModalSlug);
+    const wasModalOpenRef = React.useRef(isModalOpen);
+    const onModalConfirm = React.useCallback(()=>{
+        if (typeof onConfirm === 'function') {
+            onConfirm();
+        }
+        closeModal(assignTenantModalSlug);
+    }, [
+        onConfirm,
+        closeModal
+    ]);
+    const onModalCancel = React.useCallback(()=>{
+        if (typeof onCancel === 'function') {
+            onCancel();
+        }
+        closeModal(assignTenantModalSlug);
+    }, [
+        onCancel,
+        closeModal
+    ]);
+    React.useEffect(()=>{
+        if (wasModalOpenRef.current && !isModalOpen) {
+            // modal was open, and now is closed
+            if (typeof afterModalClose === 'function') {
+                afterModalClose();
+            }
+        }
+        if (!wasModalOpenRef.current && isModalOpen) {
+            // modal was closed, and now is open
+            if (typeof afterModalOpen === 'function') {
+                afterModalOpen();
+            }
+        }
+        wasModalOpenRef.current = isModalOpen;
+    }, [
+        isModalOpen,
+        onCancel,
+        afterModalClose,
+        afterModalOpen
+    ]);
+    if (!collectionConfig) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsxs(Modal, {
+        className: baseClass,
+        slug: assignTenantModalSlug,
+        style: {
+            zIndex: drawerZBase + editDepth
+        },
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: `${baseClass}__bg`
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__wrapper`,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: `${baseClass}__header`,
+                        children: [
+                            /*#__PURE__*/ _jsx("h3", {
+                                children: t('plugin-multi-tenant:assign-tenant-modal-title', {
+                                    title
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Pill, {
+                                className: `${baseClass}__collection-pill`,
+                                size: "small",
+                                children: /*#__PURE__*/ _jsx(_Fragment, {
+                                    children: collectionConfig.labels.singular
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: `${baseClass}__content`,
+                        children: children
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: `${baseClass}__actions`,
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                buttonStyle: "secondary",
+                                margin: false,
+                                onClick: onModalCancel,
+                                children: t('general:cancel')
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                margin: false,
+                                onClick: onModalConfirm,
+                                children: t('general:confirm')
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=index.client.js.map

package/dist/components/AssignTenantFieldModal/index.client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/AssignTenantFieldModal/index.client.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientCollectionConfig } from 'payload'\n\nimport {\n  Button,\n  Modal,\n  Pill,\n  PopupList,\n  useConfig,\n  useDocumentInfo,\n  useDocumentTitle,\n  useModal,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { drawerZBase, useDrawerDepth } from '@payloadcms/ui/elements/Drawer'\nimport React from 'react'\n\nimport type {\n  PluginMultiTenantTranslationKeys,\n  PluginMultiTenantTranslations,\n} from '../../translations/index.js'\n\nimport './index.scss'\nimport { useTenantSelection } from '../../providers/TenantSelectionProvider/index.client.js'\n\nexport const assignTenantModalSlug = 'assign-tenant-field-modal'\nconst baseClass = 'assign-tenant-field-modal'\n\nexport const AssignTenantFieldTrigger: React.FC = () => {\n  const { openModal } = useModal()\n  const { t } = useTranslation<PluginMultiTenantTranslations, PluginMultiTenantTranslationKeys>()\n  const { options } = useTenantSelection()\n\n  if (options.length <= 1) {\n    return null\n  }\n\n  return (\n    <>\n      <PopupList.Button onClick={() => openModal(assignTenantModalSlug)}>\n        {t('plugin-multi-tenant:assign-tenant-button-label')}\n      </PopupList.Button>\n    </>\n  )\n}\n\nexport const AssignTenantFieldModal: React.FC<{\n  afterModalClose: () => void\n  afterModalOpen: () => void\n  children: React.ReactNode\n  onCancel?: () => void\n  onConfirm?: () => void\n}> = ({ afterModalClose, afterModalOpen, children, onCancel, onConfirm }) => {\n  const editDepth = useDrawerDepth()\n  const { t } = useTranslation<PluginMultiTenantTranslations, PluginMultiTenantTranslationKeys>()\n  const { collectionSlug } = useDocumentInfo()\n  const { title } = useDocumentTitle()\n  const { getEntityConfig } = useConfig()\n  const collectionConfig = getEntityConfig({ collectionSlug }) as ClientCollectionConfig\n  const { closeModal, isModalOpen: isModalOpenFn } = useModal()\n  const isModalOpen = isModalOpenFn(assignTenantModalSlug)\n  const wasModalOpenRef = React.useRef<boolean>(isModalOpen)\n\n  const onModalConfirm = React.useCallback(() => {\n    if (typeof onConfirm === 'function') {\n      onConfirm()\n    }\n    closeModal(assignTenantModalSlug)\n  }, [onConfirm, closeModal])\n\n  const onModalCancel = React.useCallback(() => {\n    if (typeof onCancel === 'function') {\n      onCancel()\n    }\n    closeModal(assignTenantModalSlug)\n  }, [onCancel, closeModal])\n\n  React.useEffect(() => {\n    if (wasModalOpenRef.current && !isModalOpen) {\n      // modal was open, and now is closed\n      if (typeof afterModalClose === 'function') {\n        afterModalClose()\n      }\n    }\n\n    if (!wasModalOpenRef.current && isModalOpen) {\n      // modal was closed, and now is open\n      if (typeof afterModalOpen === 'function') {\n        afterModalOpen()\n      }\n    }\n    wasModalOpenRef.current = isModalOpen\n  }, [isModalOpen, onCancel, afterModalClose, afterModalOpen])\n\n  if (!collectionConfig) {\n    return null\n  }\n\n  return (\n    <Modal\n      className={baseClass}\n      slug={assignTenantModalSlug}\n      style={{\n        zIndex: drawerZBase + editDepth,\n      }}\n    >\n      <div className={`${baseClass}__bg`} />\n      <div className={`${baseClass}__wrapper`}>\n        <div className={`${baseClass}__header`}>\n          <h3>\n            {t('plugin-multi-tenant:assign-tenant-modal-title', {\n              title,\n            })}\n          </h3>\n          <Pill className={`${baseClass}__collection-pill`} size=\"small\">\n            <>{collectionConfig.labels.singular}</>\n          </Pill>\n        </div>\n        <div className={`${baseClass}__content`}>{children}</div>\n        <div className={`${baseClass}__actions`}>\n          <Button buttonStyle=\"secondary\" margin={false} onClick={onModalCancel}>\n            {t('general:cancel')}\n          </Button>\n          <Button margin={false} onClick={onModalConfirm}>\n            {t('general:confirm')}\n          </Button>\n        </div>\n      </div>\n    </Modal>\n  )\n}\n"],"names":["Button","Modal","Pill","PopupList","useConfig","useDocumentInfo","useDocumentTitle","useModal","useTranslation","drawerZBase","useDrawerDepth","React","useTenantSelection","assignTenantModalSlug","baseClass","AssignTenantFieldTrigger","openModal","t","options","length","onClick","AssignTenantFieldModal","afterModalClose","afterModalOpen","children","onCancel","onConfirm","editDepth","collectionSlug","title","getEntityConfig","collectionConfig","closeModal","isModalOpen","isModalOpenFn","wasModalOpenRef","useRef","onModalConfirm","useCallback","onModalCancel","useEffect","current","className","slug","style","zIndex","div","h3","size","labels","singular","buttonStyle","margin"],"mappings":"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"}

package/dist/components/AssignTenantFieldModal/index.scss

@@ -0,0 +1,78 @@
+@layer payload-default {
+  .assign-tenant-field-modal {
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+
+    &[open] {
+      pointer-events: auto;
+
+      .assign-tenant-field-modal__wrapper {
+        display: flex;
+      }
+    }
+
+    &__bg {
+      z-index: -1;
+
+      &:before {
+        content: ' ';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background: var(--theme-bg);
+        opacity: 0.8;
+      }
+    }
+
+    &__wrapper {
+      z-index: 1;
+      position: relative;
+      display: none;
+      flex-direction: column;
+      max-width: calc(var(--base) * 30);
+      min-width: min(500px, calc(100% - (var(--base) * 2)));
+      border-radius: var(--style-radius-m);
+      border: 1px solid var(--theme-elevation-100);
+      background-color: var(--theme-bg);
+      justify-content: center;
+    }
+
+    &__header {
+      padding: calc(var(--base) * 0.75) var(--base);
+      border-bottom: 1px solid var(--theme-elevation-100);
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      gap: calc(var(--base) * 2);
+    }
+
+    &__collection-pill {
+      align-self: flex-start;
+      flex-shrink: 0;
+    }
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--base) * 0.5);
+      padding: var(--base) var(--base) 0 var(--base);
+    }
+
+    &__controls {
+      display: flex;
+      gap: calc(var(--base) * 0.5);
+    }
+
+    &__actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: calc(var(--base) * 0.4);
+      padding: var(--base);
+    }
+  }
+}

package/dist/components/TenantField/index.client.d.ts

@@ -5,6 +5,6 @@ type Props = {
     debug?: boolean;
     unique?: boolean;
 } & RelationshipFieldClientProps;
-export declare const TenantField: (args: Props) => React.JSX.Element | null;
+export declare const TenantField: ({ debug, unique, ...fieldArgs }: Props) => React.JSX.Element | null;
 export {};
 //# sourceMappingURL=index.client.d.ts.map

package/dist/components/TenantField/index.client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../src/components/TenantField/index.client.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,4BAA4B,EAAe,MAAM,SAAS,CAAA;AAaxE,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,cAAc,CAAA;AAKrB,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,GAAG,4BAA4B,CAAA;AAEhC,eAAO,MAAM,WAAW,SAAU,KAAK,6BAgDtC,CAAA"}
+{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../src/components/TenantField/index.client.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAA;AAW3D,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,cAAc,CAAA;AAIrB,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,GAAG,4BAA4B,CAAA;AAEhC,eAAO,MAAM,WAAW,oCAAqC,KAAK,6BAwHjE,CAAA"}

package/dist/components/TenantField/index.client.js

@@ -1,21 +1,85 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { getTranslation } from '@payloadcms/translations';
-import { ConfirmationModal, RelationshipField, Translation, useField, useForm, useFormModified, useModal, useTranslation } from '@payloadcms/ui';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pill, RelationshipField, useDocumentInfo, useField, useForm, useFormModified, useModal } from '@payloadcms/ui';
 import React from 'react';
-import './index.scss';
 import { useTenantSelection } from '../../providers/TenantSelectionProvider/index.client.js';
+import { AssignTenantFieldModal, assignTenantModalSlug } from '../AssignTenantFieldModal/index.client.js';
+import './index.scss';
 const baseClass = 'tenantField';
-export const TenantField = (args)=>{
+export const TenantField = ({ debug, unique, ...fieldArgs })=>{
     const { entityType, options, selectedTenantID, setEntityType, setTenant } = useTenantSelection();
-    const { value } = useField();
+    const { setValue, showError, value } = useField();
+    const modified = useFormModified();
+    const { isValid: isFormValid, setModified } = useForm();
+    const { id: docID } = useDocumentInfo();
+    const { openModal } = useModal();
+    const isConfirmingRef = React.useRef(false);
+    const prevModified = React.useRef(modified);
+    const prevValue = React.useRef(value);
+    const showField = options.length > 1 && !fieldArgs.field.admin?.hidden && !fieldArgs.field.hidden || debug;
+    const onConfirm = React.useCallback(()=>{
+        isConfirmingRef.current = true;
+    }, []);
+    const afterModalOpen = React.useCallback(()=>{
+        prevModified.current = modified;
+        prevValue.current = value;
+    }, [
+        modified,
+        value
+    ]);
+    const afterModalClose = React.useCallback(()=>{
+        let didChange = true;
+        if (isConfirmingRef.current) {
+            // did the values actually change?
+            if (fieldArgs.field.hasMany) {
+                const prev = prevValue.current || [];
+                const newValue = value || [];
+                if (prev.length !== newValue.length) {
+                    didChange = true;
+                } else {
+                    const allMatch = newValue.every((val)=>prev.includes(val));
+                    if (allMatch) {
+                        didChange = false;
+                    }
+                }
+            } else if (value === prevValue.current) {
+                didChange = false;
+            }
+            if (didChange) {
+                prevModified.current = true;
+                prevValue.current = value;
+            }
+        }
+        setValue(prevValue.current, true);
+        setModified(prevModified.current);
+        isConfirmingRef.current = false;
+    }, [
+        setValue,
+        setModified,
+        value,
+        fieldArgs.field.hasMany
+    ]);
     React.useEffect(()=>{
         if (!entityType) {
-            setEntityType(args.unique ? 'global' : 'document');
+            setEntityType(unique ? 'global' : 'document');
         } else {
             // unique documents are controlled from the global TenantSelector
-            if (!args.unique && value) {
-                if (!selectedTenantID || value !== selectedTenantID) {
+            if (!unique && value) {
+                if (Array.isArray(value)) {
+                    if (value.length) {
+                        if (!selectedTenantID) {
+                            setTenant({
+                                id: value[0],
+                                refresh: false
+                            });
+                        } else if (!value.includes(selectedTenantID)) {
+                            setTenant({
+                                id: value[0],
+                                refresh: false
+                            });
+                        }
+                    }
+                } else if (selectedTenantID !== value) {
                     setTenant({
                         id: value,
                         refresh: false
@@ -29,7 +93,7 @@ export const TenantField = (args)=>{
             }
         };
     }, [
-        args.unique,
+        unique,
         options,
         selectedTenantID,
         setTenant,
@@ -37,113 +101,74 @@ export const TenantField = (args)=>{
         setEntityType,
         entityType
     ]);
-    if (options.length > 1 && !args.field.admin?.hidden && !args.field.hidden) {
-        return /*#__PURE__*/ _jsxs(_Fragment, {
-            children: [
-                /*#__PURE__*/ _jsx("div", {
-                    className: baseClass,
-                    children: /*#__PURE__*/ _jsx("div", {
-                        className: `${baseClass}__wrapper`,
-                        children: /*#__PURE__*/ _jsx(RelationshipField, {
-                            ...args,
-                            field: {
-                                ...args.field,
-                                required: true
-                            },
-                            readOnly: args.readOnly || args.field.admin?.readOnly || args.unique
-                        })
-                    })
-                }),
-                args.unique ? /*#__PURE__*/ _jsx(SyncFormModified, {}) : /*#__PURE__*/ _jsx(ConfirmTenantChange, {
-                    fieldLabel: args.field.label,
-                    fieldPath: args.path
-                })
-            ]
-        });
-    }
-    return null;
-};
-const confirmSwitchTenantSlug = 'confirm-switch-tenant';
-const ConfirmTenantChange = ({ fieldLabel, fieldPath })=>{
-    const { options, selectedTenantID, setTenant } = useTenantSelection();
-    const { setValue: setTenantFormValue, value: tenantFormValue } = useField({
-        path: fieldPath
-    });
-    const { setModified } = useForm();
-    const modified = useFormModified();
-    const { i18n, t } = useTranslation();
-    const { isModalOpen, openModal } = useModal();
-    const prevTenantValueRef = React.useRef(tenantFormValue || null);
-    const [tenantToConfirm, setTenantToConfirm] = React.useState(tenantFormValue || null);
-    const fromTenantOption = React.useMemo(()=>{
-        if (tenantFormValue) {
-            return options.find((option)=>option.value === tenantFormValue);
-        }
-        return undefined;
-    }, [
-        options,
-        tenantFormValue
-    ]);
-    const toTenantOption = React.useMemo(()=>{
-        if (tenantToConfirm) {
-            return options.find((option)=>option.value === tenantToConfirm);
-        }
-        return undefined;
-    }, [
-        options,
-        tenantToConfirm
-    ]);
-    const modalIsOpen = isModalOpen(confirmSwitchTenantSlug);
-    const testRef = React.useRef(false);
     React.useEffect(()=>{
-        // the form value changed
-        if (!modalIsOpen && tenantFormValue && prevTenantValueRef.current && tenantFormValue !== prevTenantValueRef.current) {
-            // revert the form value change temporarily
-            setTenantFormValue(prevTenantValueRef.current, true);
-            // save the tenant to confirm in modal
-            setTenantToConfirm(tenantFormValue);
-            // open confirmation modal
-            openModal(confirmSwitchTenantSlug);
+        if (unique) {
+            return;
+        }
+        if (!isFormValid && showError && showField || !value && !selectedTenantID) {
+            openModal(assignTenantModalSlug);
         }
     }, [
-        tenantFormValue,
-        setTenantFormValue,
+        isFormValid,
+        showError,
+        showField,
         openModal,
-        setTenant,
+        value,
+        docID,
         selectedTenantID,
-        modalIsOpen,
-        modified
+        unique
     ]);
-    return /*#__PURE__*/ _jsx(ConfirmationModal, {
-        body: /*#__PURE__*/ _jsx(Translation, {
-            elements: {
-                0: ({ children })=>{
-                    return /*#__PURE__*/ _jsx("b", {
-                        children: children
-                    });
-                }
-            },
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-expect-error
-            i18nKey: "plugin-multi-tenant:confirm-modal-tenant-switch--body",
-            t: t,
-            variables: {
-                fromTenant: fromTenantOption?.label,
-                toTenant: toTenantOption?.label
-            }
-        }),
-        heading: t('plugin-multi-tenant:confirm-modal-tenant-switch--heading', {
-            tenantLabel: fieldLabel ? getTranslation(fieldLabel, i18n) : t('plugin-multi-tenant:nav-tenantSelector-label')
-        }),
-        modalSlug: confirmSwitchTenantSlug,
-        onCancel: ()=>{
-            setModified(testRef.current);
-        },
-        onConfirm: ()=>{
-            // set the form value to the tenant to confirm
-            prevTenantValueRef.current = tenantToConfirm;
-            setTenantFormValue(tenantToConfirm);
+    if (showField) {
+        if (debug) {
+            return /*#__PURE__*/ _jsx(TenantFieldInModal, {
+                debug: debug,
+                fieldArgs: fieldArgs,
+                unique: unique
+            });
+        }
+        if (!unique) {
+            /** Editing a non-global tenant document */ return /*#__PURE__*/ _jsx(AssignTenantFieldModal, {
+                afterModalClose: afterModalClose,
+                afterModalOpen: afterModalOpen,
+                onConfirm: onConfirm,
+                children: /*#__PURE__*/ _jsx(TenantFieldInModal, {
+                    debug: debug,
+                    fieldArgs: {
+                        ...fieldArgs,
+                        field: {
+                            ...fieldArgs.field
+                        }
+                    },
+                    unique: unique
+                })
+            });
         }
+        return /*#__PURE__*/ _jsx(SyncFormModified, {});
+    }
+    return null;
+};
+const TenantFieldInModal = ({ debug, fieldArgs, unique })=>{
+    return /*#__PURE__*/ _jsx("div", {
+        className: baseClass,
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: `${baseClass}__wrapper`,
+            children: [
+                debug && /*#__PURE__*/ _jsx(Pill, {
+                    className: `${baseClass}__debug-pill`,
+                    pillStyle: "success",
+                    size: "small",
+                    children: "Multi-Tenant Debug Enabled"
+                }),
+                /*#__PURE__*/ _jsx(RelationshipField, {
+                    ...fieldArgs,
+                    field: {
+                        ...fieldArgs.field,
+                        required: true
+                    },
+                    readOnly: fieldArgs.readOnly || fieldArgs.field.admin?.readOnly || unique
+                })
+            ]
+        })
     });
 };
 /**

package/dist/components/TenantField/index.client.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TenantField/index.client.tsx"],"sourcesContent":["'use client'\n\nimport type { RelationshipFieldClientProps, StaticLabel } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  ConfirmationModal,\n  RelationshipField,\n  Translation,\n  useField,\n  useForm,\n  useFormModified,\n  useModal,\n  useTranslation,\n} from '@payloadcms/ui'\nimport React from 'react'\n\nimport type {\n  PluginMultiTenantTranslationKeys,\n  PluginMultiTenantTranslations,\n} from '../../translations/index.js'\n\nimport './index.scss'\nimport { useTenantSelection } from '../../providers/TenantSelectionProvider/index.client.js'\n\nconst baseClass = 'tenantField'\n\ntype Props = {\n  debug?: boolean\n  unique?: boolean\n} & RelationshipFieldClientProps\n\nexport const TenantField = (args: Props) => {\n  const { entityType, options, selectedTenantID, setEntityType, setTenant } = useTenantSelection()\n  const { value } = useField<number | string>()\n\n  React.useEffect(() => {\n    if (!entityType) {\n      setEntityType(args.unique ? 'global' : 'document')\n    } else {\n      // unique documents are controlled from the global TenantSelector\n      if (!args.unique && value) {\n        if (!selectedTenantID || value !== selectedTenantID) {\n          setTenant({ id: value, refresh: false })\n        }\n      }\n    }\n\n    return () => {\n      if (entityType) {\n        setEntityType(undefined)\n      }\n    }\n  }, [args.unique, options, selectedTenantID, setTenant, value, setEntityType, entityType])\n\n  if (options.length > 1 && !args.field.admin?.hidden && !args.field.hidden) {\n    return (\n      <>\n        <div className={baseClass}>\n          <div className={`${baseClass}__wrapper`}>\n            <RelationshipField\n              {...args}\n              field={{\n                ...args.field,\n                required: true,\n              }}\n              readOnly={args.readOnly || args.field.admin?.readOnly || args.unique}\n            />\n          </div>\n        </div>\n        {args.unique ? (\n          <SyncFormModified />\n        ) : (\n          <ConfirmTenantChange fieldLabel={args.field.label} fieldPath={args.path} />\n        )}\n      </>\n    )\n  }\n\n  return null\n}\n\nconst confirmSwitchTenantSlug = 'confirm-switch-tenant'\n\nconst ConfirmTenantChange = ({\n  fieldLabel,\n  fieldPath,\n}: {\n  fieldLabel?: StaticLabel\n  fieldPath: string\n}) => {\n  const { options, selectedTenantID, setTenant } = useTenantSelection()\n  const { setValue: setTenantFormValue, value: tenantFormValue } = useField<null | number | string>(\n    { path: fieldPath },\n  )\n  const { setModified } = useForm()\n  const modified = useFormModified()\n  const { i18n, t } = useTranslation<\n    PluginMultiTenantTranslations,\n    PluginMultiTenantTranslationKeys\n  >()\n  const { isModalOpen, openModal } = useModal()\n\n  const prevTenantValueRef = React.useRef<null | number | string>(tenantFormValue || null)\n  const [tenantToConfirm, setTenantToConfirm] = React.useState<null | number | string>(\n    tenantFormValue || null,\n  )\n\n  const fromTenantOption = React.useMemo(() => {\n    if (tenantFormValue) {\n      return options.find((option) => option.value === tenantFormValue)\n    }\n    return undefined\n  }, [options, tenantFormValue])\n\n  const toTenantOption = React.useMemo(() => {\n    if (tenantToConfirm) {\n      return options.find((option) => option.value === tenantToConfirm)\n    }\n    return undefined\n  }, [options, tenantToConfirm])\n\n  const modalIsOpen = isModalOpen(confirmSwitchTenantSlug)\n  const testRef = React.useRef<boolean>(false)\n\n  React.useEffect(() => {\n    // the form value changed\n    if (\n      !modalIsOpen &&\n      tenantFormValue &&\n      prevTenantValueRef.current &&\n      tenantFormValue !== prevTenantValueRef.current\n    ) {\n      // revert the form value change temporarily\n      setTenantFormValue(prevTenantValueRef.current, true)\n      // save the tenant to confirm in modal\n      setTenantToConfirm(tenantFormValue)\n      // open confirmation modal\n      openModal(confirmSwitchTenantSlug)\n    }\n  }, [\n    tenantFormValue,\n    setTenantFormValue,\n    openModal,\n    setTenant,\n    selectedTenantID,\n    modalIsOpen,\n    modified,\n  ])\n\n  return (\n    <ConfirmationModal\n      body={\n        <Translation\n          elements={{\n            0: ({ children }) => {\n              return <b>{children}</b>\n            },\n          }}\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-expect-error\n          i18nKey=\"plugin-multi-tenant:confirm-modal-tenant-switch--body\"\n          t={t}\n          variables={{\n            fromTenant: fromTenantOption?.label,\n            toTenant: toTenantOption?.label,\n          }}\n        />\n      }\n      heading={t('plugin-multi-tenant:confirm-modal-tenant-switch--heading', {\n        tenantLabel: fieldLabel\n          ? getTranslation(fieldLabel, i18n)\n          : t('plugin-multi-tenant:nav-tenantSelector-label'),\n      })}\n      modalSlug={confirmSwitchTenantSlug}\n      onCancel={() => {\n        setModified(testRef.current)\n      }}\n      onConfirm={() => {\n        // set the form value to the tenant to confirm\n        prevTenantValueRef.current = tenantToConfirm\n        setTenantFormValue(tenantToConfirm)\n      }}\n    />\n  )\n}\n\n/**\n * Tells the global selector when the form has been modified\n * so it can display the \"Leave without saving\" confirmation modal\n * if modified and attempting to change the tenant\n */\nconst SyncFormModified = () => {\n  const modified = useFormModified()\n  const { setModified } = useTenantSelection()\n\n  React.useEffect(() => {\n    setModified(modified)\n  }, [modified, setModified])\n\n  return null\n}\n"],"names":["getTranslation","ConfirmationModal","RelationshipField","Translation","useField","useForm","useFormModified","useModal","useTranslation","React","useTenantSelection","baseClass","TenantField","args","entityType","options","selectedTenantID","setEntityType","setTenant","value","useEffect","unique","id","refresh","undefined","length","field","admin","hidden","div","className","required","readOnly","SyncFormModified","ConfirmTenantChange","fieldLabel","label","fieldPath","path","confirmSwitchTenantSlug","setValue","setTenantFormValue","tenantFormValue","setModified","modified","i18n","t","isModalOpen","openModal","prevTenantValueRef","useRef","tenantToConfirm","setTenantToConfirm","useState","fromTenantOption","useMemo","find","option","toTenantOption","modalIsOpen","testRef","current","body","elements","children","b","i18nKey","variables","fromTenant","toTenant","heading","tenantLabel","modalSlug","onCancel","onConfirm"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/TenantField/index.client.tsx"],"sourcesContent":["'use client'\n\nimport type { RelationshipFieldClientProps } from 'payload'\n\nimport {\n  Pill,\n  RelationshipField,\n  useDocumentInfo,\n  useField,\n  useForm,\n  useFormModified,\n  useModal,\n} from '@payloadcms/ui'\nimport React from 'react'\n\nimport { useTenantSelection } from '../../providers/TenantSelectionProvider/index.client.js'\nimport {\n  AssignTenantFieldModal,\n  assignTenantModalSlug,\n} from '../AssignTenantFieldModal/index.client.js'\nimport './index.scss'\n\nconst baseClass = 'tenantField'\n\ntype Props = {\n  debug?: boolean\n  unique?: boolean\n} & RelationshipFieldClientProps\n\nexport const TenantField = ({ debug, unique, ...fieldArgs }: Props) => {\n  const { entityType, options, selectedTenantID, setEntityType, setTenant } = useTenantSelection()\n  const { setValue, showError, value } = useField<(number | string)[] | (number | string)>()\n  const modified = useFormModified()\n  const { isValid: isFormValid, setModified } = useForm()\n  const { id: docID } = useDocumentInfo()\n  const { openModal } = useModal()\n  const isConfirmingRef = React.useRef<boolean>(false)\n  const prevModified = React.useRef(modified)\n  const prevValue = React.useRef<typeof value>(value)\n  const showField =\n    (options.length > 1 && !fieldArgs.field.admin?.hidden && !fieldArgs.field.hidden) || debug\n\n  const onConfirm = React.useCallback(() => {\n    isConfirmingRef.current = true\n  }, [])\n\n  const afterModalOpen = React.useCallback(() => {\n    prevModified.current = modified\n    prevValue.current = value\n  }, [modified, value])\n\n  const afterModalClose = React.useCallback(() => {\n    let didChange = true\n    if (isConfirmingRef.current) {\n      // did the values actually change?\n      if (fieldArgs.field.hasMany) {\n        const prev = (prevValue.current || []) as (number | string)[]\n        const newValue = (value || []) as (number | string)[]\n        if (prev.length !== newValue.length) {\n          didChange = true\n        } else {\n          const allMatch = newValue.every((val) => prev.includes(val))\n          if (allMatch) {\n            didChange = false\n          }\n        }\n      } else if (value === prevValue.current) {\n        didChange = false\n      }\n\n      if (didChange) {\n        prevModified.current = true\n        prevValue.current = value\n      }\n    }\n\n    setValue(prevValue.current, true)\n    setModified(prevModified.current)\n\n    isConfirmingRef.current = false\n  }, [setValue, setModified, value, fieldArgs.field.hasMany])\n\n  React.useEffect(() => {\n    if (!entityType) {\n      setEntityType(unique ? 'global' : 'document')\n    } else {\n      // unique documents are controlled from the global TenantSelector\n      if (!unique && value) {\n        if (Array.isArray(value)) {\n          if (value.length) {\n            if (!selectedTenantID) {\n              setTenant({ id: value[0], refresh: false })\n            } else if (!value.includes(selectedTenantID)) {\n              setTenant({ id: value[0], refresh: false })\n            }\n          }\n        } else if (selectedTenantID !== value) {\n          setTenant({ id: value, refresh: false })\n        }\n      }\n    }\n\n    return () => {\n      if (entityType) {\n        setEntityType(undefined)\n      }\n    }\n  }, [unique, options, selectedTenantID, setTenant, value, setEntityType, entityType])\n\n  React.useEffect(() => {\n    if (unique) {\n      return\n    }\n    if ((!isFormValid && showError && showField) || (!value && !selectedTenantID)) {\n      openModal(assignTenantModalSlug)\n    }\n  }, [isFormValid, showError, showField, openModal, value, docID, selectedTenantID, unique])\n\n  if (showField) {\n    if (debug) {\n      return <TenantFieldInModal debug={debug} fieldArgs={fieldArgs} unique={unique} />\n    }\n\n    if (!unique) {\n      /** Editing a non-global tenant document */\n      return (\n        <AssignTenantFieldModal\n          afterModalClose={afterModalClose}\n          afterModalOpen={afterModalOpen}\n          onConfirm={onConfirm}\n        >\n          <TenantFieldInModal\n            debug={debug}\n            fieldArgs={{\n              ...fieldArgs,\n              field: {\n                ...fieldArgs.field,\n              },\n            }}\n            unique={unique}\n          />\n        </AssignTenantFieldModal>\n      )\n    }\n\n    return <SyncFormModified />\n  }\n\n  return null\n}\n\nconst TenantFieldInModal: React.FC<{\n  debug?: boolean\n  fieldArgs: RelationshipFieldClientProps\n  unique?: boolean\n}> = ({ debug, fieldArgs, unique }) => {\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__wrapper`}>\n        {debug && (\n          <Pill className={`${baseClass}__debug-pill`} pillStyle=\"success\" size=\"small\">\n            Multi-Tenant Debug Enabled\n          </Pill>\n        )}\n        <RelationshipField\n          {...fieldArgs}\n          field={{\n            ...fieldArgs.field,\n            required: true,\n          }}\n          readOnly={fieldArgs.readOnly || fieldArgs.field.admin?.readOnly || unique}\n        />\n      </div>\n    </div>\n  )\n}\n\n/**\n * Tells the global selector when the form has been modified\n * so it can display the \"Leave without saving\" confirmation modal\n * if modified and attempting to change the tenant\n */\nconst SyncFormModified = () => {\n  const modified = useFormModified()\n  const { setModified } = useTenantSelection()\n\n  React.useEffect(() => {\n    setModified(modified)\n  }, [modified, setModified])\n\n  return null\n}\n"],"names":["Pill","RelationshipField","useDocumentInfo","useField","useForm","useFormModified","useModal","React","useTenantSelection","AssignTenantFieldModal","assignTenantModalSlug","baseClass","TenantField","debug","unique","fieldArgs","entityType","options","selectedTenantID","setEntityType","setTenant","setValue","showError","value","modified","isValid","isFormValid","setModified","id","docID","openModal","isConfirmingRef","useRef","prevModified","prevValue","showField","length","field","admin","hidden","onConfirm","useCallback","current","afterModalOpen","afterModalClose","didChange","hasMany","prev","newValue","allMatch","every","val","includes","useEffect","Array","isArray","refresh","undefined","TenantFieldInModal","SyncFormModified","div","className","pillStyle","size","required","readOnly"],"mappings":"AAAA;;AAIA,SACEA,IAAI,EACJC,iBAAiB,EACjBC,eAAe,EACfC,QAAQ,EACRC,OAAO,EACPC,eAAe,EACfC,QAAQ,QACH,iBAAgB;AACvB,OAAOC,WAAW,QAAO;AAEzB,SAASC,kBAAkB,QAAQ,0DAAyD;AAC5F,SACEC,sBAAsB,EACtBC,qBAAqB,QAChB,4CAA2C;AAClD,OAAO,eAAc;AAErB,MAAMC,YAAY;AAOlB,OAAO,MAAMC,cAAc,CAAC,EAAEC,KAAK,EAAEC,MAAM,EAAE,GAAGC,WAAkB;IAChE,MAAM,EAAEC,UAAU,EAAEC,OAAO,EAAEC,gBAAgB,EAAEC,aAAa,EAAEC,SAAS,EAAE,GAAGZ;IAC5E,MAAM,EAAEa,QAAQ,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGpB;IACvC,MAAMqB,WAAWnB;IACjB,MAAM,EAAEoB,SAASC,WAAW,EAAEC,WAAW,EAAE,GAAGvB;IAC9C,MAAM,EAAEwB,IAAIC,KAAK,EAAE,GAAG3B;IACtB,MAAM,EAAE4B,SAAS,EAAE,GAAGxB;IACtB,MAAMyB,kBAAkBxB,MAAMyB,MAAM,CAAU;IAC9C,MAAMC,eAAe1B,MAAMyB,MAAM,CAACR;IAClC,MAAMU,YAAY3B,MAAMyB,MAAM,CAAeT;IAC7C,MAAMY,YACJ,AAAClB,QAAQmB,MAAM,GAAG,KAAK,CAACrB,UAAUsB,KAAK,CAACC,KAAK,EAAEC,UAAU,CAACxB,UAAUsB,KAAK,CAACE,MAAM,IAAK1B;IAEvF,MAAM2B,YAAYjC,MAAMkC,WAAW,CAAC;QAClCV,gBAAgBW,OAAO,GAAG;IAC5B,GAAG,EAAE;IAEL,MAAMC,iBAAiBpC,MAAMkC,WAAW,CAAC;QACvCR,aAAaS,OAAO,GAAGlB;QACvBU,UAAUQ,OAAO,GAAGnB;IACtB,GAAG;QAACC;QAAUD;KAAM;IAEpB,MAAMqB,kBAAkBrC,MAAMkC,WAAW,CAAC;QACxC,IAAII,YAAY;QAChB,IAAId,gBAAgBW,OAAO,EAAE;YAC3B,kCAAkC;YAClC,IAAI3B,UAAUsB,KAAK,CAACS,OAAO,EAAE;gBAC3B,MAAMC,OAAQb,UAAUQ,OAAO,IAAI,EAAE;gBACrC,MAAMM,WAAYzB,SAAS,EAAE;gBAC7B,IAAIwB,KAAKX,MAAM,KAAKY,SAASZ,MAAM,EAAE;oBACnCS,YAAY;gBACd,OAAO;oBACL,MAAMI,WAAWD,SAASE,KAAK,CAAC,CAACC,MAAQJ,KAAKK,QAAQ,CAACD;oBACvD,IAAIF,UAAU;wBACZJ,YAAY;oBACd;gBACF;YACF,OAAO,IAAItB,UAAUW,UAAUQ,OAAO,EAAE;gBACtCG,YAAY;YACd;YAEA,IAAIA,WAAW;gBACbZ,aAAaS,OAAO,GAAG;gBACvBR,UAAUQ,OAAO,GAAGnB;YACtB;QACF;QAEAF,SAASa,UAAUQ,OAAO,EAAE;QAC5Bf,YAAYM,aAAaS,OAAO;QAEhCX,gBAAgBW,OAAO,GAAG;IAC5B,GAAG;QAACrB;QAAUM;QAAaJ;QAAOR,UAAUsB,KAAK,CAACS,OAAO;KAAC;IAE1DvC,MAAM8C,SAAS,CAAC;QACd,IAAI,CAACrC,YAAY;YACfG,cAAcL,SAAS,WAAW;QACpC,OAAO;YACL,iEAAiE;YACjE,IAAI,CAACA,UAAUS,OAAO;gBACpB,IAAI+B,MAAMC,OAAO,CAAChC,QAAQ;oBACxB,IAAIA,MAAMa,MAAM,EAAE;wBAChB,IAAI,CAAClB,kBAAkB;4BACrBE,UAAU;gCAAEQ,IAAIL,KAAK,CAAC,EAAE;gCAAEiC,SAAS;4BAAM;wBAC3C,OAAO,IAAI,CAACjC,MAAM6B,QAAQ,CAAClC,mBAAmB;4BAC5CE,UAAU;gCAAEQ,IAAIL,KAAK,CAAC,EAAE;gCAAEiC,SAAS;4BAAM;wBAC3C;oBACF;gBACF,OAAO,IAAItC,qBAAqBK,OAAO;oBACrCH,UAAU;wBAAEQ,IAAIL;wBAAOiC,SAAS;oBAAM;gBACxC;YACF;QACF;QAEA,OAAO;YACL,IAAIxC,YAAY;gBACdG,cAAcsC;YAChB;QACF;IACF,GAAG;QAAC3C;QAAQG;QAASC;QAAkBE;QAAWG;QAAOJ;QAAeH;KAAW;IAEnFT,MAAM8C,SAAS,CAAC;QACd,IAAIvC,QAAQ;YACV;QACF;QACA,IAAI,AAAC,CAACY,eAAeJ,aAAaa,aAAe,CAACZ,SAAS,CAACL,kBAAmB;YAC7EY,UAAUpB;QACZ;IACF,GAAG;QAACgB;QAAaJ;QAAWa;QAAWL;QAAWP;QAAOM;QAAOX;QAAkBJ;KAAO;IAEzF,IAAIqB,WAAW;QACb,IAAItB,OAAO;YACT,qBAAO,KAAC6C;gBAAmB7C,OAAOA;gBAAOE,WAAWA;gBAAWD,QAAQA;;QACzE;QAEA,IAAI,CAACA,QAAQ;YACX,yCAAyC,GACzC,qBACE,KAACL;gBACCmC,iBAAiBA;gBACjBD,gBAAgBA;gBAChBH,WAAWA;0BAEX,cAAA,KAACkB;oBACC7C,OAAOA;oBACPE,WAAW;wBACT,GAAGA,SAAS;wBACZsB,OAAO;4BACL,GAAGtB,UAAUsB,KAAK;wBACpB;oBACF;oBACAvB,QAAQA;;;QAIhB;QAEA,qBAAO,KAAC6C;IACV;IAEA,OAAO;AACT,EAAC;AAED,MAAMD,qBAID,CAAC,EAAE7C,KAAK,EAAEE,SAAS,EAAED,MAAM,EAAE;IAChC,qBACE,KAAC8C;QAAIC,WAAWlD;kBACd,cAAA,MAACiD;YAAIC,WAAW,GAAGlD,UAAU,SAAS,CAAC;;gBACpCE,uBACC,KAACb;oBAAK6D,WAAW,GAAGlD,UAAU,YAAY,CAAC;oBAAEmD,WAAU;oBAAUC,MAAK;8BAAQ;;8BAIhF,KAAC9D;oBACE,GAAGc,SAAS;oBACbsB,OAAO;wBACL,GAAGtB,UAAUsB,KAAK;wBAClB2B,UAAU;oBACZ;oBACAC,UAAUlD,UAAUkD,QAAQ,IAAIlD,UAAUsB,KAAK,CAACC,KAAK,EAAE2B,YAAYnD;;;;;AAK7E;AAEA;;;;CAIC,GACD,MAAM6C,mBAAmB;IACvB,MAAMnC,WAAWnB;IACjB,MAAM,EAAEsB,WAAW,EAAE,GAAGnB;IAExBD,MAAM8C,SAAS,CAAC;QACd1B,YAAYH;IACd,GAAG;QAACA;QAAUG;KAAY;IAE1B,OAAO;AACT"}

package/dist/components/TenantField/index.scss

@@ -43,6 +43,10 @@
         margin-top: calc(var(--base) * -1.5);
         padding-top: calc(var(--base) * 1.5);
       }
+
+      &__debug-pill {
+        margin-bottom: calc(var(--base) * 0.5);
+      }
     }
   }
 }

package/dist/exports/client.d.ts

@@ -1,3 +1,4 @@
+export { AssignTenantFieldTrigger } from '../components/AssignTenantFieldModal/index.client.js';
 export { TenantField } from '../components/TenantField/index.client.js';
 export { WatchTenantCollection } from '../components/WatchTenantCollection/index.js';
 export { useTenantSelection } from '../providers/TenantSelectionProvider/index.client.js';

package/dist/exports/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/exports/client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAA;AACvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,8CAA8C,CAAA;AACpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,sDAAsD,CAAA"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/exports/client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,sDAAsD,CAAA;AAC/F,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAA;AACvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,8CAA8C,CAAA;AACpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,sDAAsD,CAAA"}