@valu/block-components 0.3.0 → 0.4.0

package/dist/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, ToggleControl, Spinner, CheckboxControl } from '@wordpress/components';
+import { VisuallyHidden, Icon, Button, Popover, ToggleControl, Spinner, CheckboxControl, TextControl } from '@wordpress/components';
 import { __, sprintf, _n } from '@wordpress/i18n';
 import { search, closeSmall, upload, dragHandle, caution, chevronUp, chevronDown, people } from '@wordpress/icons';
 import styled from '@emotion/styled';
@@ -2081,7 +2081,14 @@ var Table = styled.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};
@@ -2837,6 +2844,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 Root3 = styled.div`
 	color: ${tokens.fg};
 	font-size: ${tokens.fontSizeBody};
@@ -2997,6 +3052,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));
@@ -3888,6 +3944,8 @@ var SelectedItem2 = ({
   onRemove,
   onMoveUp,
   onMoveDown,
+  enableLabelEdit = false,
+  onLabelChange,
   render
 }) => {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
@@ -3901,22 +3959,46 @@ var SelectedItem2 = ({
   };
   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,
     {
@@ -3938,9 +4020,45 @@ var SelectedItem2 = ({
           }
         ) : 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: [
@@ -3949,7 +4067,7 @@ var SelectedItem2 = ({
           ] }) : null
         ] }),
         /* @__PURE__ */ jsxs(ActionColumn, { children: [
-          orderable ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          orderable ? /* @__PURE__ */ jsxs(ReorderButtons, { children: [
             /* @__PURE__ */ jsx(
               Button,
               {
@@ -4041,7 +4159,8 @@ var SelectedList2 = ({
   showHeader = true,
   showExtensionBadge,
   showFileSize,
-  showModifiedDate
+  showModifiedDate,
+  enableItemLabels = false
 }) => {
   const resolved = useResolvedDocuments(value);
   const [activeKey, setActiveKey] = useState(null);
@@ -4056,6 +4175,22 @@ var SelectedList2 = ({
     (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;
@@ -4104,6 +4239,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
@@ -4126,7 +4265,7 @@ var SelectedList2 = ({
         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 })
         ]
       }
     )
@@ -4157,6 +4296,7 @@ var DocumentPicker = ({
   fetchOnOpen = false,
   uniqueItems = true,
   enableMediaLibrary = true,
+  enableItemLabels = false,
   showExtensionBadge = true,
   showFileSize = true,
   showModifiedDate = false,
@@ -4248,7 +4388,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
@@ -4266,7 +4413,8 @@ var DocumentPicker = ({
         showHeader: value.length > 0,
         showExtensionBadge,
         showFileSize,
-        showModifiedDate
+        showModifiedDate,
+        enableItemLabels
       }
     )
   ] }) }) });