@valu/block-components 0.3.1 → 0.4.0

package/dist/components/document-picker/index.d.cts

@@ -23,6 +23,12 @@ interface DocumentItem {
     modified?: string;
     /** Raw REST record so consumer filters can reach beyond the normalized shape. */
     raw?: unknown;
+    /**
+     * Editor-authored display name that overrides `title` in consumer UIs.
+     * Never derived from the REST record — set only by the user via the
+     * per-item label field (see `enableItemLabels`).
+     */
+    label?: string;
 }
 /** A picked document resolved against the current entity store. */
 interface ResolvedDocumentItem extends DocumentItem {
@@ -47,6 +53,7 @@ interface DocumentPickerLabels {
     missing?: string;
     openLink?: string;
     extensionBadge?: string;
+    itemLabel?: string;
 }
 interface RequestContext {
     query: string;
@@ -100,6 +107,14 @@ interface DocumentPickerProps {
     uniqueItems?: boolean;
     /** Show the "Browse Media Library" button. @default true */
     enableMediaLibrary?: boolean;
+    /**
+     * Make each selected row's display name editable in place: the title is
+     * rendered as a text input prefilled with the effective name. Edits are
+     * stored on the item as `label` (the attachment itself is untouched);
+     * clearing the field — or typing the original title back — removes the
+     * override and falls back to the attachment title. @default false
+     */
+    enableItemLabels?: boolean;
     /** Show the uppercase extension badge on each row. @default true */
     showExtensionBadge?: boolean;
     /** Show file size on each row. @default true */
@@ -139,7 +154,7 @@ interface DocumentPickerProps {
  *     onChange={(items) => setAttributes({ documents: items })}
  * />
  */
-declare const DocumentPicker: ({ label, hideLabelFromVision, help, variant, value: controlledValue, defaultValue, onChange, maxItems, orderable, placeholder, allowedMimeTypes, allowedExtensions, perPage, inputDelayMs, fetchOnOpen, uniqueItems, enableMediaLibrary, showExtensionBadge, showFileSize, showModifiedDate, filter, request, renderSuggestion, renderSelected, labels, className, id, }: DocumentPickerProps) => react_jsx_runtime.JSX.Element;
+declare const DocumentPicker: ({ label, hideLabelFromVision, help, variant, value: controlledValue, defaultValue, onChange, maxItems, orderable, placeholder, allowedMimeTypes, allowedExtensions, perPage, inputDelayMs, fetchOnOpen, uniqueItems, enableMediaLibrary, enableItemLabels, showExtensionBadge, showFileSize, showModifiedDate, filter, request, renderSuggestion, renderSelected, labels, className, id, }: DocumentPickerProps) => react_jsx_runtime.JSX.Element;
 
 interface MediaLibraryButtonProps {
     allowedMimeTypes: string[];

package/dist/components/document-picker/index.d.ts

@@ -23,6 +23,12 @@ interface DocumentItem {
     modified?: string;
     /** Raw REST record so consumer filters can reach beyond the normalized shape. */
     raw?: unknown;
+    /**
+     * Editor-authored display name that overrides `title` in consumer UIs.
+     * Never derived from the REST record — set only by the user via the
+     * per-item label field (see `enableItemLabels`).
+     */
+    label?: string;
 }
 /** A picked document resolved against the current entity store. */
 interface ResolvedDocumentItem extends DocumentItem {
@@ -47,6 +53,7 @@ interface DocumentPickerLabels {
     missing?: string;
     openLink?: string;
     extensionBadge?: string;
+    itemLabel?: string;
 }
 interface RequestContext {
     query: string;
@@ -100,6 +107,14 @@ interface DocumentPickerProps {
     uniqueItems?: boolean;
     /** Show the "Browse Media Library" button. @default true */
     enableMediaLibrary?: boolean;
+    /**
+     * Make each selected row's display name editable in place: the title is
+     * rendered as a text input prefilled with the effective name. Edits are
+     * stored on the item as `label` (the attachment itself is untouched);
+     * clearing the field — or typing the original title back — removes the
+     * override and falls back to the attachment title. @default false
+     */
+    enableItemLabels?: boolean;
     /** Show the uppercase extension badge on each row. @default true */
     showExtensionBadge?: boolean;
     /** Show file size on each row. @default true */
@@ -139,7 +154,7 @@ interface DocumentPickerProps {
  *     onChange={(items) => setAttributes({ documents: items })}
  * />
  */
-declare const DocumentPicker: ({ label, hideLabelFromVision, help, variant, value: controlledValue, defaultValue, onChange, maxItems, orderable, placeholder, allowedMimeTypes, allowedExtensions, perPage, inputDelayMs, fetchOnOpen, uniqueItems, enableMediaLibrary, showExtensionBadge, showFileSize, showModifiedDate, filter, request, renderSuggestion, renderSelected, labels, className, id, }: DocumentPickerProps) => react_jsx_runtime.JSX.Element;
+declare const DocumentPicker: ({ label, hideLabelFromVision, help, variant, value: controlledValue, defaultValue, onChange, maxItems, orderable, placeholder, allowedMimeTypes, allowedExtensions, perPage, inputDelayMs, fetchOnOpen, uniqueItems, enableMediaLibrary, enableItemLabels, showExtensionBadge, showFileSize, showModifiedDate, filter, request, renderSuggestion, renderSelected, labels, className, id, }: DocumentPickerProps) => react_jsx_runtime.JSX.Element;
 
 interface MediaLibraryButtonProps {
     allowedMimeTypes: string[];

package/dist/components/document-picker/index.js

@@ -1,6 +1,6 @@
 import { forwardRef, useId, useState, useCallback, useRef, useMemo, useEffect } from 'react';
 import { QueryClientProvider, QueryClient, useInfiniteQuery, keepPreviousData } from '@tanstack/react-query';
-import { VisuallyHidden, Icon, Button, Popover, Spinner } from '@wordpress/components';
+import { VisuallyHidden, Icon, Button, Popover, Spinner, TextControl } from '@wordpress/components';
 import { __, sprintf, _n } from '@wordpress/i18n';
 import { search, closeSmall, upload, dragHandle, caution, chevronUp, chevronDown } from '@wordpress/icons';
 import styled from '@emotion/styled';
@@ -550,6 +550,54 @@ var DocMetaInline = styled.div`
 		white-space: nowrap;
 	}
 `;
+var ReorderButtons = styled.span`
+	display: none;
+
+	@container valu-dp-row (min-width: 340px) {
+		display: inline-flex;
+	}
+`;
+var LabelEditBody = styled.div`
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	padding: 4px 0;
+
+	.components-base-control,
+	.components-text-control__input {
+		width: 100%;
+		min-width: 0;
+	}
+
+	/* __nextHasNoMarginBottom is not honored by every bundled
+	   wp-components version — enforce the no-margin layout here. */
+	.components-base-control.components-base-control {
+		margin-bottom: 0;
+	}
+
+	/* Doubled class beats wp-components' own input rules regardless of
+	   stylesheet order (the emotion cache may be prepended). */
+	.components-text-control__input.components-text-control__input {
+		font-size: ${tokens.fontSizeBody};
+		height: 28px;
+		min-height: 28px;
+		padding: 2px 8px;
+	}
+
+	@container valu-dp-row (min-width: ${WIDE_ROW}) {
+		flex-direction: row;
+		align-items: center;
+		gap: ${tokens.spaceMd};
+
+		.components-base-control {
+			flex: 0 1 340px;
+			min-width: 180px;
+			width: auto;
+		}
+	}
+`;
 var Root2 = styled.div`
 	color: ${tokens.fg};
 	font-size: ${tokens.fontSizeBody};
@@ -710,6 +758,7 @@ var mapMediaToDocumentItem = (raw) => {
     raw
   };
 };
+var displayTitle = (item) => item.label?.trim() || item.title;
 var dedupeAgainst = (items, value, enabled) => {
   if (!enabled || value.length === 0) return items;
   const ids = new Set(value.map((v) => v.id));
@@ -1714,6 +1763,8 @@ var SelectedItem = ({
   onRemove,
   onMoveUp,
   onMoveDown,
+  enableLabelEdit = false,
+  onLabelChange,
   render
 }) => {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
@@ -1727,22 +1778,46 @@ var SelectedItem = ({
   };
   const isMissing = item.missing === "deleted";
   const missingLabel = labels.missing ?? __("This document is no longer available.", "valu-block-components");
+  const displayName = displayTitle(item);
   const removeLabel = labels.remove ? labels.remove : sprintf(
     /* translators: %s: document title */
     __("Remove %s", "valu-block-components"),
-    item.title
+    displayName
   );
   const moveUpLabel = labels.moveUp ? labels.moveUp : sprintf(
     /* translators: %s: document title */
     __("Move %s up", "valu-block-components"),
-    item.title
+    displayName
   );
   const moveDownLabel = labels.moveDown ? labels.moveDown : sprintf(
     /* translators: %s: document title */
     __("Move %s down", "valu-block-components"),
-    item.title
+    displayName
   );
   const modified = showModifiedDate ? formatModified(item.modified) : "";
+  const isLabelEdit = enableLabelEdit && !isMissing && Boolean(onLabelChange);
+  const [labelDraft, setLabelDraft] = useState(null);
+  const commitTimer = useRef(null);
+  useEffect(
+    () => () => {
+      if (commitTimer.current) {
+        clearTimeout(commitTimer.current);
+      }
+    },
+    []
+  );
+  const normalizeLabel = (value) => {
+    const trimmed = value.trim();
+    return trimmed === "" || trimmed === item.title ? "" : value;
+  };
+  const itemLabelText = labels.itemLabel ?? __("Display name", "valu-block-components");
+  const metaParts = [item.filename];
+  if (showFileSize && item.fileSize) {
+    metaParts.push(formatFileSize(item.fileSize));
+  }
+  if (modified) {
+    metaParts.push(modified);
+  }
   return /* @__PURE__ */ jsxs(
     SelectedRow2,
     {
@@ -1764,9 +1839,45 @@ var SelectedItem = ({
           }
         ) : null,
         isMissing ? /* @__PURE__ */ jsx(Icon, { icon: caution, size: 20 }) : showExtensionBadge ? /* @__PURE__ */ jsx(ExtensionBadge, { extension: item.extension }) : null,
-        render ? render(item) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        render ? render(item) : isLabelEdit ? /* @__PURE__ */ jsxs(LabelEditBody, { children: [
+          /* @__PURE__ */ jsx(
+            TextControl,
+            {
+              __nextHasNoMarginBottom: true,
+              __next40pxDefaultSize: false,
+              "aria-label": sprintf(
+                /* translators: 1: display-name field label, 2: filename */
+                "%1$s: %2$s",
+                itemLabelText,
+                item.filename
+              ),
+              value: labelDraft ?? item.label ?? item.title,
+              onChange: (value) => {
+                setLabelDraft(value);
+                if (commitTimer.current) {
+                  clearTimeout(commitTimer.current);
+                }
+                commitTimer.current = setTimeout(() => {
+                  commitTimer.current = null;
+                  onLabelChange?.(normalizeLabel(value));
+                }, 300);
+              },
+              onBlur: () => {
+                if (commitTimer.current) {
+                  clearTimeout(commitTimer.current);
+                  commitTimer.current = null;
+                  if (labelDraft !== null) {
+                    onLabelChange?.(normalizeLabel(labelDraft));
+                  }
+                }
+                setLabelDraft(null);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(FilenameText, { title: item.filename, children: metaParts.join(" \xB7 ") })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs(DocRowBody, { children: [
-            /* @__PURE__ */ jsx(PrimaryText, { muted: isMissing, title: item.title, children: isMissing ? missingLabel : item.title }),
+            /* @__PURE__ */ jsx(PrimaryText, { muted: isMissing, title: displayName, children: isMissing ? missingLabel : displayName }),
             !isMissing ? /* @__PURE__ */ jsx(FilenameText, { title: item.filename, children: item.filename }) : null
           ] }),
           !isMissing && (showFileSize || modified) ? /* @__PURE__ */ jsxs(DocMetaInline, { children: [
@@ -1775,7 +1886,7 @@ var SelectedItem = ({
           ] }) : null
         ] }),
         /* @__PURE__ */ jsxs(ActionColumn, { children: [
-          orderable ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          orderable ? /* @__PURE__ */ jsxs(ReorderButtons, { children: [
             /* @__PURE__ */ jsx(
               Button,
               {
@@ -1871,7 +1982,8 @@ var SelectedList = ({
   showHeader = true,
   showExtensionBadge,
   showFileSize,
-  showModifiedDate
+  showModifiedDate,
+  enableItemLabels = false
 }) => {
   const resolved = useResolvedDocuments(value);
   const [activeKey, setActiveKey] = useState(null);
@@ -1886,6 +1998,22 @@ var SelectedList = ({
     (key) => onChange(value.filter((i) => i.key !== key)),
     [value, onChange]
   );
+  const setLabel = useCallback(
+    (key, label) => onChange(
+      value.map((i) => {
+        if (i.key !== key) {
+          return i;
+        }
+        if (label === "") {
+          const rest = { ...i };
+          delete rest.label;
+          return rest;
+        }
+        return { ...i, label };
+      })
+    ),
+    [value, onChange]
+  );
   const reorder = useCallback(
     (from, to) => {
       if (from === to) return;
@@ -1934,6 +2062,10 @@ var SelectedList = ({
       onRemove: () => remove(item.key),
       ...index > 0 ? { onMoveUp: () => reorder(index, index - 1) } : {},
       ...index < resolved.length - 1 ? { onMoveDown: () => reorder(index, index + 1) } : {},
+      ...enableItemLabels ? {
+        enableLabelEdit: true,
+        onLabelChange: (label) => setLabel(item.key, label)
+      } : {},
       ...renderSelected ? { render: renderSelected } : {}
     },
     item.key
@@ -1956,7 +2088,7 @@ var SelectedList = ({
         onDragCancel: () => setActiveKey(null),
         children: [
           /* @__PURE__ */ jsx(SortableContext, { items: ids, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx(SelectedListEl, { role: "list", children: rows }) }),
-          /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: defaultDropAnimation, children: activeItem ? /* @__PURE__ */ jsx(DragChip, { title: activeItem.title }) : null })
+          /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: defaultDropAnimation, children: activeItem ? /* @__PURE__ */ jsx(DragChip, { title: displayTitle(activeItem) }) : null })
         ]
       }
     )
@@ -1987,6 +2119,7 @@ var DocumentPicker = ({
   fetchOnOpen = false,
   uniqueItems = true,
   enableMediaLibrary = true,
+  enableItemLabels = false,
   showExtensionBadge = true,
   showFileSize = true,
   showModifiedDate = false,
@@ -2078,7 +2211,14 @@ var DocumentPicker = ({
         ...allowedExtensions !== void 0 ? { allowedExtensions } : {},
         multiple: false,
         value,
-        onSelect: (items) => handleChange([items[items.length - 1]]),
+        onSelect: (items) => {
+          const next = items[items.length - 1];
+          const prev = value[0];
+          const keepLabel = prev?.id === next.id && prev.label !== void 0;
+          handleChange([
+            keepLabel ? { ...next, label: prev.label } : next
+          ]);
+        },
         labels,
         variant: "tertiary",
         label: labels.replace
@@ -2096,7 +2236,8 @@ var DocumentPicker = ({
         showHeader: value.length > 0,
         showExtensionBadge,
         showFileSize,
-        showModifiedDate
+        showModifiedDate,
+        enableItemLabels
       }
     )
   ] }) }) });