@valu/block-components 0.3.1 → 0.4.0

package/README.md

@@ -46,6 +46,10 @@ function Edit({ attributes, setAttributes }) {
 - [`ContentPicker`](components/content-picker/readme.md) — search and
   select posts, pages, users, or taxonomy terms with drag-to-reorder,
   thumbnails, status/type badges, and grouped results.
+- [`DocumentPicker`](components/document-picker/readme.md) — attach
+  document attachments (PDF, Word, Excel, PowerPoint by default) via
+  REST search-as-you-type combined with the native Media Library modal,
+  with optional in-place editable display names per item.
 - [`Matrix`](components/matrix/readme.md) — abstract row × column grid of
   selectable cells with optional collapsible column groups and a sticky
   master gate column. For permission matrices, feature-flag grids,

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

@@ -558,6 +558,54 @@ var DocMetaInline = styled__default.default.div`
 		white-space: nowrap;
 	}
 `;
+var ReorderButtons = styled__default.default.span`
+	display: none;
+
+	@container valu-dp-row (min-width: 340px) {
+		display: inline-flex;
+	}
+`;
+var LabelEditBody = styled__default.default.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__default.default.div`
 	color: ${tokens.fg};
 	font-size: ${tokens.fontSizeBody};
@@ -718,6 +766,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));
@@ -1722,6 +1771,8 @@ var SelectedItem = ({
   onRemove,
   onMoveUp,
   onMoveDown,
+  enableLabelEdit = false,
+  onLabelChange,
   render
 }) => {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = sortable.useSortable({
@@ -1735,22 +1786,46 @@ var SelectedItem = ({
   };
   const isMissing = item.missing === "deleted";
   const missingLabel = labels.missing ?? i18n.__("This document is no longer available.", "valu-block-components");
+  const displayName = displayTitle(item);
   const removeLabel = labels.remove ? labels.remove : i18n.sprintf(
     /* translators: %s: document title */
     i18n.__("Remove %s", "valu-block-components"),
-    item.title
+    displayName
   );
   const moveUpLabel = labels.moveUp ? labels.moveUp : i18n.sprintf(
     /* translators: %s: document title */
     i18n.__("Move %s up", "valu-block-components"),
-    item.title
+    displayName
   );
   const moveDownLabel = labels.moveDown ? labels.moveDown : i18n.sprintf(
     /* translators: %s: document title */
     i18n.__("Move %s down", "valu-block-components"),
-    item.title
+    displayName
   );
   const modified = showModifiedDate ? formatModified(item.modified) : "";
+  const isLabelEdit = enableLabelEdit && !isMissing && Boolean(onLabelChange);
+  const [labelDraft, setLabelDraft] = react$1.useState(null);
+  const commitTimer = react$1.useRef(null);
+  react$1.useEffect(
+    () => () => {
+      if (commitTimer.current) {
+        clearTimeout(commitTimer.current);
+      }
+    },
+    []
+  );
+  const normalizeLabel = (value) => {
+    const trimmed = value.trim();
+    return trimmed === "" || trimmed === item.title ? "" : value;
+  };
+  const itemLabelText = labels.itemLabel ?? i18n.__("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__ */ jsxRuntime.jsxs(
     SelectedRow2,
     {
@@ -1772,9 +1847,45 @@ var SelectedItem = ({
           }
         ) : null,
         isMissing ? /* @__PURE__ */ jsxRuntime.jsx(components.Icon, { icon: icons.caution, size: 20 }) : showExtensionBadge ? /* @__PURE__ */ jsxRuntime.jsx(ExtensionBadge, { extension: item.extension }) : null,
-        render ? render(item) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        render ? render(item) : isLabelEdit ? /* @__PURE__ */ jsxRuntime.jsxs(LabelEditBody, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            components.TextControl,
+            {
+              __nextHasNoMarginBottom: true,
+              __next40pxDefaultSize: false,
+              "aria-label": i18n.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__ */ jsxRuntime.jsx(FilenameText, { title: item.filename, children: metaParts.join(" \xB7 ") })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs(DocRowBody, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(PrimaryText, { muted: isMissing, title: item.title, children: isMissing ? missingLabel : item.title }),
+            /* @__PURE__ */ jsxRuntime.jsx(PrimaryText, { muted: isMissing, title: displayName, children: isMissing ? missingLabel : displayName }),
             !isMissing ? /* @__PURE__ */ jsxRuntime.jsx(FilenameText, { title: item.filename, children: item.filename }) : null
           ] }),
           !isMissing && (showFileSize || modified) ? /* @__PURE__ */ jsxRuntime.jsxs(DocMetaInline, { children: [
@@ -1783,7 +1894,7 @@ var SelectedItem = ({
           ] }) : null
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(ActionColumn, { children: [
-          orderable ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          orderable ? /* @__PURE__ */ jsxRuntime.jsxs(ReorderButtons, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               components.Button,
               {
@@ -1879,7 +1990,8 @@ var SelectedList = ({
   showHeader = true,
   showExtensionBadge,
   showFileSize,
-  showModifiedDate
+  showModifiedDate,
+  enableItemLabels = false
 }) => {
   const resolved = useResolvedDocuments(value);
   const [activeKey, setActiveKey] = react$1.useState(null);
@@ -1894,6 +2006,22 @@ var SelectedList = ({
     (key) => onChange(value.filter((i) => i.key !== key)),
     [value, onChange]
   );
+  const setLabel = react$1.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 = react$1.useCallback(
     (from, to) => {
       if (from === to) return;
@@ -1942,6 +2070,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
@@ -1964,7 +2096,7 @@ var SelectedList = ({
         onDragCancel: () => setActiveKey(null),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: ids, strategy: sortable.verticalListSortingStrategy, children: /* @__PURE__ */ jsxRuntime.jsx(SelectedListEl, { role: "list", children: rows }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, { dropAnimation: core.defaultDropAnimation, children: activeItem ? /* @__PURE__ */ jsxRuntime.jsx(DragChip, { title: activeItem.title }) : null })
+          /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, { dropAnimation: core.defaultDropAnimation, children: activeItem ? /* @__PURE__ */ jsxRuntime.jsx(DragChip, { title: displayTitle(activeItem) }) : null })
         ]
       }
     )
@@ -1995,6 +2127,7 @@ var DocumentPicker = ({
   fetchOnOpen = false,
   uniqueItems = true,
   enableMediaLibrary = true,
+  enableItemLabels = false,
   showExtensionBadge = true,
   showFileSize = true,
   showModifiedDate = false,
@@ -2086,7 +2219,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
@@ -2104,7 +2244,8 @@ var DocumentPicker = ({
         showHeader: value.length > 0,
         showExtensionBadge,
         showFileSize,
-        showModifiedDate
+        showModifiedDate,
+        enableItemLabels
       }
     )
   ] }) }) });