fix: various fixes and tweaks (#701)

packages/core/src/components/common/progress/CircularProgress.tsx

@@ -1,18 +1,43 @@
 import React from 'react';
 
+import classNames from '@staticcms/core/lib/util/classNames.util';
+
 import type { FC } from 'react';
 
 export interface CircularProgressProps {
   className?: string;
   'data-testid'?: string;
+  size?: 'small' | 'medium';
 }
 
-const CircularProgress: FC<CircularProgressProps> = ({ className, 'data-testid': dataTestId }) => {
+const CircularProgress: FC<CircularProgressProps> = ({
+  className,
+  'data-testid': dataTestId,
+  size = 'medium',
+}) => {
   return (
     <div role="status" className={className} data-testid={dataTestId}>
       <svg
         aria-hidden="true"
-        className="w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"
+        className={classNames(
+          `
+            mr-2
+            text-gray-200
+            animate-spin
+            dark:text-gray-600
+            fill-blue-600
+          `,
+          size === 'medium' &&
+            `
+              w-8
+              h-8
+            `,
+          size === 'small' &&
+            `
+              w-5
+              h-5
+            `,
+        )}
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"

packages/core/src/components/common/table/Table.tsx

@@ -13,7 +13,7 @@ const TableCell = ({ columns, children }: TableCellProps) => {
   return (
     <div className="relative overflow-x-auto shadow-md sm:rounded-lg border border-slate-200 dark:border-gray-700">
       <table className="w-full text-sm text-left text-gray-500 dark:text-gray-300 ">
-        <thead className="text-xs text-gray-700 bg-slate-50 dark:bg-slate-700 dark:text-gray-300">
+        <thead className="text-xs text-gray-700 bg-gray-100 dark:bg-slate-700 dark:text-gray-300">
           <tr>
             {columns.map((column, index) => (
               <TableHeaderCell key={index}>{column}</TableHeaderCell>

packages/core/src/components/entry-editor/editor-control-pane/EditorControl.tsx

@@ -82,7 +82,10 @@ const EditorControl = ({
 
   const [dirty, setDirty] = useState(!isEmpty(value));
 
-  const fieldErrorsSelector = useMemo(() => selectFieldErrors(path, i18n), [i18n, path]);
+  const fieldErrorsSelector = useMemo(
+    () => selectFieldErrors(path, i18n, isMeta),
+    [i18n, isMeta, path],
+  );
   const errors = useAppSelector(fieldErrorsSelector);
 
   const hasErrors = (submitted || dirty) && Boolean(errors.length);
@@ -103,11 +106,11 @@ const EditorControl = ({
 
     const validateValue = async () => {
       const errors = await validate(field, value, widget, t);
-      dispatch(changeDraftFieldValidation(path, errors, i18n));
+      dispatch(changeDraftFieldValidation(path, errors, i18n, isMeta));
     };
 
     validateValue();
-  }, [dirty, dispatch, field, i18n, hidden, path, submitted, t, value, widget, disabled]);
+  }, [dirty, dispatch, field, i18n, hidden, path, submitted, t, value, widget, disabled, isMeta]);
 
   const handleChangeDraftField = useCallback(
     (value: ValueOrNestedValue) => {

packages/core/src/components/entry-editor/editor-control-pane/EditorControlPane.tsx

@@ -117,7 +117,7 @@ const EditorControlPane = ({
         <EditorControl
           key="entry-path"
           field={pathField}
-          value={nestedFieldPath}
+          value={entry.meta?.path ?? nestedFieldPath}
           fieldsErrors={fieldsErrors}
           submitted={submitted}
           locale={locale}

packages/core/src/components/media-library/common/MediaLibraryCard.tsx

@@ -26,6 +26,7 @@ import type { FC, KeyboardEvent } from 'react';
 interface MediaLibraryCardProps<T extends MediaField, EF extends BaseField = UnknownField> {
   isSelected?: boolean;
   displayURL: MediaLibraryDisplayURL;
+  path: string;
   text: string;
   draftText: string;
   type?: string;
@@ -44,6 +45,7 @@ interface MediaLibraryCardProps<T extends MediaField, EF extends BaseField = Unk
 const MediaLibraryCard = <T extends MediaField, EF extends BaseField = UnknownField>({
   isSelected = false,
   displayURL,
+  path,
   text,
   draftText,
   type,
@@ -60,7 +62,7 @@ const MediaLibraryCard = <T extends MediaField, EF extends BaseField = UnknownFi
   t,
 }: TranslatedProps<MediaLibraryCardProps<T, EF>>) => {
   const entry = useAppSelector(selectEditingDraft);
-  const url = useMediaAsset(displayURL.url, collection, field, entry, currentFolder);
+  const url = useMediaAsset(path, collection, field, entry, currentFolder);
 
   const handleDownload = useCallback(() => {
     const url = displayURL.url;

packages/core/src/components/media-library/common/MediaLibraryCardGrid.tsx

@@ -126,6 +126,7 @@ const CardWrapper = ({
         isDraft={file.draft}
         draftText={cardDraftText}
         displayURL={displayURLs[file.id] ?? (file.url ? { url: file.url } : {})}
+        path={file.path}
         loadDisplayURL={() => loadDisplayURL(file)}
         type={file.type}
         isViewableImage={file.isViewableImage ?? false}