@valu/block-components 0.3.0 → 0.4.0

package/dist/index.cjs

@@ -2089,7 +2089,14 @@ var Table = styled__default.default.table`
 	border-collapse: separate;
 	border-spacing: 0;
 	width: 100%;
-	min-width: max-content;
+	/*
+	 * Do NOT set \`min-width: max-content\` here. Combined with the
+	 * trailing FillerCell's \`width: 100%\`, Chrome's auto table layout
+	 * enters a feedback loop and blows the table up to ~1,000,000px,
+	 * producing a phantom horizontal scrollbar even when all content
+	 * fits. The per-cell min-widths (row header, master, leaf) already
+	 * prevent content from squishing, so this rule is unnecessary.
+	 */
 
 	caption {
 		${visuallyHiddenCss2};
@@ -2845,6 +2852,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 Root3 = styled__default.default.div`
 	color: ${tokens.fg};
 	font-size: ${tokens.fontSizeBody};
@@ -3005,6 +3060,7 @@ var mapMediaToDocumentItem = (raw) => {
     raw
   };
 };
+var displayTitle = (item) => item.label?.trim() || item.title;
 var dedupeAgainst2 = (items, value, enabled) => {
   if (!enabled || value.length === 0) return items;
   const ids = new Set(value.map((v) => v.id));
@@ -3896,6 +3952,8 @@ var SelectedItem2 = ({
   onRemove,
   onMoveUp,
   onMoveDown,
+  enableLabelEdit = false,
+  onLabelChange,
   render
 }) => {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = sortable.useSortable({
@@ -3909,22 +3967,46 @@ var SelectedItem2 = ({
   };
   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,
     {
@@ -3946,9 +4028,45 @@ var SelectedItem2 = ({
           }
         ) : 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: [
@@ -3957,7 +4075,7 @@ var SelectedItem2 = ({
           ] }) : null
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(ActionColumn, { children: [
-          orderable ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          orderable ? /* @__PURE__ */ jsxRuntime.jsxs(ReorderButtons, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               components.Button,
               {
@@ -4049,7 +4167,8 @@ var SelectedList2 = ({
   showHeader = true,
   showExtensionBadge,
   showFileSize,
-  showModifiedDate
+  showModifiedDate,
+  enableItemLabels = false
 }) => {
   const resolved = useResolvedDocuments(value);
   const [activeKey, setActiveKey] = react$1.useState(null);
@@ -4064,6 +4183,22 @@ var SelectedList2 = ({
     (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;
@@ -4112,6 +4247,10 @@ var SelectedList2 = ({
       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
@@ -4134,7 +4273,7 @@ var SelectedList2 = ({
         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 })
         ]
       }
     )
@@ -4165,6 +4304,7 @@ var DocumentPicker = ({
   fetchOnOpen = false,
   uniqueItems = true,
   enableMediaLibrary = true,
+  enableItemLabels = false,
   showExtensionBadge = true,
   showFileSize = true,
   showModifiedDate = false,
@@ -4256,7 +4396,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
@@ -4274,7 +4421,8 @@ var DocumentPicker = ({
         showHeader: value.length > 0,
         showExtensionBadge,
         showFileSize,
-        showModifiedDate
+        showModifiedDate,
+        enableItemLabels
       }
     )
   ] }) }) });