summary

frontend/src/documents/DocumentSummarySection.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState, type ReactNode, type FormEvent } from 'react';
+import React, { useCallback, useEffect, useMemo, useState, type FormEvent } from 'react';
 import { EditIcon, IconX, CheckIcon, PlusIcon } from '../ui/icons';
 import SelectionAssignmentMenu, {
   SelectionAssignmentMenuItem,
@@ -240,10 +240,17 @@ export const TagSection: React.FC<TagSectionProps> = ({
       if (!item) {
         return;
       }
+      if (item.state === 'all' && onRemove) {
+        const payload = isPlainObject(item.payload)
+          ? (item.payload as TagEntry)
+          : tags.find((tag) => (tag.id ?? tag.label) === item.id) ?? { id: item.id, label: item.label };
+        onRemove(payload);
+        return;
+      }
       const payload = item.payload ?? { label: item.label };
       handleSelect(payload);
     },
-    [handleSelect],
+    [handleSelect, onRemove, tags],
   );
 
   return (
@@ -280,7 +287,9 @@ export const TagSection: React.FC<TagSectionProps> = ({
           showCounts={false}
           positionStrategy="fixed"
           triggerClassName="quick-add__chip quick-add__trigger"
-      triggerContent={<PlusIcon className="icon-inline" aria-hidden="true" />}
+          triggerContent={<PlusIcon className="icon-inline" aria-hidden="true" />}
+          closeOnSelection={false}
+          freezeSortOnOpen
         />
       ) : null}
       {!tags.length && !showQuickAdd ? <span className="tag-list__empty meta">{emptyMessage}</span> : null}
@@ -362,7 +371,17 @@ export const CorrespondentSection: React.FC<CorrespondentSectionProps> = ({
 
   const handleAssignmentSelect = useCallback(
     (item: NormalizedSelectionAssignmentItem) => {
-      if (!onAdd || !item) {
+      if (!item) {
+        return;
+      }
+      if (item.state === 'all' && onRemove) {
+        const payload = isPlainObject(item.payload)
+          ? (item.payload as CorrespondentEntry)
+          : entries.find((entry) => (entry.id ?? entry.name) === item.id) ?? { id: item.id, name: item.label };
+        onRemove(payload);
+        return;
+      }
+      if (!onAdd) {
         return;
       }
       const source = (item.payload ?? item) as QuickAddOption | string | null;
@@ -375,7 +394,7 @@ export const CorrespondentSection: React.FC<CorrespondentSectionProps> = ({
         : { id: null, name: resolvedName };
       onAdd({ name: resolvedName, option: payload, input: null });
     },
-    [onAdd],
+    [entries, onAdd, onRemove],
   );
 
   return (
@@ -416,7 +435,9 @@ export const CorrespondentSection: React.FC<CorrespondentSectionProps> = ({
           showCounts={false}
           positionStrategy="fixed"
           triggerClassName="quick-add__chip quick-add__trigger"
-      triggerContent={<PlusIcon className="icon-inline" aria-hidden="true" />}
+          triggerContent={<PlusIcon className="icon-inline" aria-hidden="true" />}
+          closeOnSelection={false}
+          freezeSortOnOpen
         />
       ) : null}
     </div>
@@ -720,29 +741,23 @@ const DocumentSummarySection: React.FC<DocumentSummarySectionProps> = ({
     />
   );
 
-  const summaryRowOverrides = useMemo(
-    () => ({
-      title: { valueContent: titleMetaDisplay, error: titleError },
-      issued: { valueContent: issuedDisplay, error: issuedError },
-      tags: { valueContent: tagsValueContent },
-      correspondents: { valueContent: correspondentsValueContent },
-    }),
-    [titleMetaDisplay, titleError, issuedDisplay, issuedError, tagsValueContent, correspondentsValueContent],
-  );
+  const summaryRowOverrides = {
+    title: { valueContent: titleMetaDisplay, error: titleError },
+    issued: { valueContent: issuedDisplay, error: issuedError },
+    tags: { valueContent: tagsValueContent },
+    correspondents: { valueContent: correspondentsValueContent },
+  } as Record<string, { valueContent?: React.ReactNode | null; error?: string | null }>;
 
-  const baseRows: MetaItem[] = useMemo(
-    () => [...summaryRows, ...extraSummaryRows].map((row) => {
-      const overrides = summaryRowOverrides[row.key] || {};
-      return {
-        key: row.key,
-        label: row.label,
-        valueContent: overrides.valueContent ?? null,
-        fallbackValue: overrides.valueContent ? row.value : row.value,
-        error: overrides.error ?? null,
-      };
-    }),
-    [summaryRows, extraSummaryRows, summaryRowOverrides],
-  );
+  const baseRows: MetaItem[] = [...summaryRows, ...extraSummaryRows].map((row) => {
+    const overrides = summaryRowOverrides[row.key] || {};
+    return {
+      key: row.key,
+      label: row.label,
+      valueContent: overrides.valueContent ?? null,
+      fallbackValue: overrides.valueContent ? row.value : row.value,
+      error: overrides.error ?? null,
+    };
+  });
 
   const allRows = baseRows;
   const summaryClass = `document-summary${isCompactLayout ? ' document-summary--compact' : ''}`;