Merge pull request #1241 from jacobsfletch/master

feat: bumps @faceless-ui/modal to v2.0.1

src/admin/components/forms/field-types/Relationship/AddNew/index.tsx

@@ -16,7 +16,7 @@ const baseClass = 'relationship-add-new';
 
 export const AddNewRelation: React.FC<Props> = ({ path, hasMany, relationTo, value, setValue, dispatchOptions }) => {
   const relatedCollections = useRelatedCollections(relationTo);
-  const { toggleModal, modalState } = useModal();
+  const { toggleModal, isModalOpen } = useModal();
   const { permissions } = useAuth();
   const [hasPermission, setHasPermission] = useState(false);
   const [modalCollection, setModalCollection] = useState<SanitizedCollectionConfig>();
@@ -71,10 +71,10 @@ export const AddNewRelation: React.FC<Props> = ({ path, hasMany, relationTo, val
   }, [permissions, relatedCollections]);
 
   useEffect(() => {
-    if (!modalState[modalSlug]?.isOpen) {
+    if (!isModalOpen(modalSlug)) {
       setModalCollection(undefined);
     }
-  }, [modalState, modalSlug]);
+  }, [isModalOpen, modalSlug]);
 
   return hasPermission ? (
     <div

src/admin/components/forms/field-types/RichText/elements/upload/Button/index.tsx

@@ -42,7 +42,7 @@ const insertUpload = (editor, { value, relationTo }) => {
 };
 
 const UploadButton: React.FC<{ path: string }> = ({ path }) => {
-  const { toggleModal, modalState } = useModal();
+  const { toggleModal, isModalOpen } = useModal();
   const editor = useSlate();
   const { serverURL, routes: { api }, collections } = useConfig();
   const [availableCollections] = useState(() => collections.filter(({ admin: { enableRichTextRelationship }, upload }) => (Boolean(upload) && enableRichTextRelationship)));
@@ -65,7 +65,7 @@ const UploadButton: React.FC<{ path: string }> = ({ path }) => {
 
   const modalSlug = `${path}-add-upload`;
   const moreThanOneAvailableCollection = availableCollections.length > 1;
-  const isOpen = modalState[modalSlug]?.isOpen;
+  const isOpen = isModalOpen(modalSlug);
 
   // If modal is open, get active page of upload gallery
   const apiURL = isOpen ? `${serverURL}${api}/${modalCollection.slug}` : null;

src/admin/components/forms/field-types/Upload/SelectExisting/index.tsx

@@ -44,7 +44,7 @@ const SelectExistingUploadModal: React.FC<Props> = (props) => {
   const { id } = useDocumentInfo();
   const { user } = useAuth();
   const { getData, getSiblingData } = useForm();
-  const { toggleModal, modalState } = useModal();
+  const { toggleModal, isModalOpen } = useModal();
   const [fields] = useState(() => formatFields(collection));
   const [limit, setLimit] = useState(defaultLimit);
   const [sort, setSort] = useState(null);
@@ -56,7 +56,7 @@ const SelectExistingUploadModal: React.FC<Props> = (props) => {
     baseClass,
   ].filter(Boolean).join(' ');
 
-  const isOpen = modalState[modalSlug]?.isOpen;
+  const isOpen = isModalOpen(modalSlug);
 
   const apiURL = isOpen ? `${serverURL}${api}/${collectionSlug}` : null;
 

src/admin/index.tsx

@@ -34,7 +34,7 @@ const Index = () => (
           <Router>
             <ModalProvider
               classPrefix="payload"
-              zIndex={'var(--z-modal)' as unknown as number}
+              zIndex="var(--z-modal)"
               transTime={0}
             >
               <AuthProvider>