Merge branch 'master' of https://github.com/payloadcms/payload into feat/1695-nullable-localized-array-and-blocks

src/admin/components/elements/ListDrawer/DrawerContent.tsx

@@ -58,13 +58,16 @@ const shouldIncludeCollection = ({
   collectionSlugs,
 }) => (enableRichTextRelationship && ((uploads && Boolean(upload)) || collectionSlugs?.includes(slug)));
 
-export const ListDrawerContent: React.FC<ListDrawerProps> = ({
+const DrawerContent: React.FC<ListDrawerProps & {
+  enabledCollectionConfigs: SanitizedCollectionConfig[]
+}> = ({
   drawerSlug,
   onSelect,
   customHeader,
   collectionSlugs,
   uploads,
   selectedCollection,
+  enabledCollectionConfigs
 }) => {
   const { t, i18n } = useTranslation(['upload', 'general']);
   const { permissions } = useAuth();
@@ -75,7 +78,7 @@ export const ListDrawerContent: React.FC<ListDrawerProps> = ({
   const [page, setPage] = useState(1);
   const [where, setWhere] = useState(null);
   const { serverURL, routes: { api }, collections } = useConfig();
-  const [enabledCollectionConfigs] = useState(() => collections.filter((coll) => shouldIncludeCollection({ coll, uploads, collectionSlugs })));
+
   const [selectedCollectionConfig, setSelectedCollectionConfig] = useState<SanitizedCollectionConfig>(() => {
     let initialSelection: SanitizedCollectionConfig;
     if (selectedCollection) {
@@ -92,7 +95,9 @@ export const ListDrawerContent: React.FC<ListDrawerProps> = ({
   });
 
   const [selectedOption, setSelectedOption] = useState<{ label: string, value: string }>(() => (selectedCollectionConfig ? { label: getTranslation(selectedCollectionConfig.labels.singular, i18n), value: selectedCollectionConfig.slug } : undefined));
+
   const [fields, setFields] = useState<Field[]>(() => formatFields(selectedCollectionConfig, t));
+
   const [tableColumns, setTableColumns] = useState<Column[]>(() => {
     const initialColumns = getInitialColumnState(fields, selectedCollectionConfig.admin.useAsTitle, selectedCollectionConfig.admin.defaultColumns);
     return buildColumns({
@@ -308,3 +313,25 @@ export const ListDrawerContent: React.FC<ListDrawerProps> = ({
     </Fragment>
   );
 };
+
+export const ListDrawerContent: React.FC<ListDrawerProps> = (props) => {
+  const {
+    collectionSlugs,
+    uploads,
+  } = props;
+
+  const { collections } = useConfig();
+
+  const [enabledCollectionConfigs] = useState(() => collections.filter((coll) => shouldIncludeCollection({ coll, uploads, collectionSlugs })));
+
+  if (enabledCollectionConfigs.length === 0){
+    return null;
+  }
+
+  return (
+    <DrawerContent
+      {...props}
+      enabledCollectionConfigs={enabledCollectionConfigs}
+    />
+  )
+}

src/admin/components/forms/field-types/Group/index.scss

@@ -29,6 +29,12 @@
     border-bottom: 0;
   }
 
+  &--within-row {
+    margin: 0;
+    border-top: 0;
+    border-bottom: 0;
+  }
+
   &--within-tab:first-child {
     margin-top: 0;
     border-top: 0;
@@ -80,4 +86,8 @@
 
 .group-field--within-collapsible+.group-field--within-collapsible {
   margin-top: base(-1);
-}
+}
+
+.group-field--within-row+.group-field--within-row {
+  margin-top: 0;
+}

src/admin/components/forms/field-types/Group/index.tsx

@@ -6,6 +6,7 @@ import FieldDescription from '../../FieldDescription';
 import { Props } from './types';
 import { useCollapsible } from '../../../elements/Collapsible/provider';
 import { GroupProvider, useGroup } from './provider';
+import { useRow } from '../Row/provider';
 import { useTabs } from '../Tabs/provider';
 import { getTranslation } from '../../../../../utilities/getTranslation';
 import { createNestedFieldPath } from '../../Form/createNestedFieldPath';
@@ -35,6 +36,7 @@ const Group: React.FC<Props> = (props) => {
 
   const isWithinCollapsible = useCollapsible();
   const isWithinGroup = useGroup();
+  const isWithinRow = useRow();
   const isWithinTab = useTabs();
   const { i18n } = useTranslation();
 
@@ -48,6 +50,7 @@ const Group: React.FC<Props> = (props) => {
         baseClass,
         isWithinCollapsible && `${baseClass}--within-collapsible`,
         isWithinGroup && `${baseClass}--within-group`,
+        isWithinRow && `${baseClass}--within-row`,
         isWithinTab && `${baseClass}--within-tab`,
         (!hideGutter && isWithinGroup) && `${baseClass}--gutter`,
         className,

src/admin/components/forms/field-types/Row/index.tsx

@@ -3,6 +3,7 @@ import RenderFields from '../../RenderFields';
 import withCondition from '../../withCondition';
 import { Props } from './types';
 import { createNestedFieldPath } from '../../Form/createNestedFieldPath';
+import { RowProvider } from './provider';
 
 import './index.scss';
 
@@ -26,17 +27,19 @@ const Row: React.FC<Props> = (props) => {
   ].filter(Boolean).join(' ');
 
   return (
-    <RenderFields
-      readOnly={readOnly}
-      className={classes}
-      permissions={permissions}
-      fieldTypes={fieldTypes}
-      indexPath={indexPath}
-      fieldSchema={fields.map((field) => ({
-        ...field,
-        path: createNestedFieldPath(path, field),
-      }))}
-    />
+    <RowProvider>
+      <RenderFields
+        readOnly={readOnly}
+        className={classes}
+        permissions={permissions}
+        fieldTypes={fieldTypes}
+        indexPath={indexPath}
+        fieldSchema={fields.map((field) => ({
+          ...field,
+          path: createNestedFieldPath(path, field),
+        }))}
+      />
+    </RowProvider>
   );
 };
 export default withCondition(Row);

src/admin/components/forms/field-types/Row/provider.tsx

@@ -0,0 +1,17 @@
+import React, {
+  createContext, useContext,
+} from 'react';
+
+const Context = createContext(false);
+
+export const RowProvider: React.FC<{ children?: React.ReactNode, withinRow?: boolean }> = ({ children, withinRow = true }) => {
+  return (
+    <Context.Provider value={withinRow}>
+      {children}
+    </Context.Provider>
+  );
+};
+
+export const useRow = (): boolean => useContext(Context);
+
+export default Context;