@valu/block-components 0.4.0 → 0.5.1

package/README.md

@@ -16,9 +16,23 @@ accessible by default.
 npm ci
 ```
 
-Peer dependencies: `react ^18.3`, `react-dom ^18.3`, and the
-`@wordpress/*` packages listed in `package.json` (available in any
-modern Gutenberg/WP 6.4+ environment).
+### Requirements
+
+- **WordPress 7.0 or newer.** The components use the `@wordpress/*` packages
+  that WordPress ships at runtime.
+- **A build that externalizes WordPress packages**, such as `@wordpress/scripts`
+  or `@wordpress/dependency-extraction-webpack-plugin`. The `@wordpress/*`
+  imports are left bare in `dist/` and must resolve to the `wp.*` globals, so
+  every plugin on the page shares the editor's copy.
+- **Peer dependencies:** `react ^18.3` and `react-dom ^18.3`.
+
+The `@wordpress/*` packages are intentionally not declared as peer
+dependencies: npm would check them against your `node_modules`, while the
+version that actually runs is the one WordPress provides. `@wordpress/icons`
+is a regular dependency because WordPress doesn't provide it at runtime.
+
+If you use TypeScript or run unit tests that import this package, install the
+`@wordpress/*` packages you use as your own `devDependencies`.
 
 ## Quickstart
 

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

@@ -60,6 +60,7 @@ var tokens = {
   transitionFast: "120ms ease-out",
   fontSizeBody: "13px",
   fontSizeSmall: "11px",
+  fontWeightRegular: 400,
   fontWeightMedium: 500,
   fontWeightBold: 600
 };
@@ -78,6 +79,8 @@ react.css`
 	white-space: nowrap;
 `;
 var Root = styled__default.default.div`
+	width: 100%;
+	min-width: 0;
 	color: ${tokens.fg};
 	font-size: ${tokens.fontSizeBody};
 
@@ -200,6 +203,11 @@ var PrimaryText = styled__default.default.span`
 	line-height: 1.3;
 	transition: color ${tokens.transitionFast};
 `;
+var SelectedTitle = styled__default.default(PrimaryText)`
+	font-weight: ${tokens.fontWeightRegular};
+	white-space: normal;
+	overflow-wrap: anywhere;
+`;
 var Option = styled__default.default.li`
 	display: flex;
 	align-items: center;
@@ -309,6 +317,10 @@ var ActionColumn = styled__default.default.div`
 	gap: ${tokens.spaceXs};
 	margin-left: auto;
 `;
+var ReorderStack = styled__default.default.span`
+	display: flex;
+	flex-direction: column;
+`;
 var SelectedListEl = styled__default.default.ul`
 	list-style: none;
 	margin: ${tokens.spaceSm} 0 0;
@@ -320,8 +332,8 @@ var SelectedListEl = styled__default.default.ul`
 var SelectedRow = styled__default.default.li`
 	display: flex;
 	align-items: center;
-	gap: ${tokens.spaceSm};
-	padding: 2px ${tokens.spaceSm};
+	gap: ${tokens.spaceXs};
+	padding: 6px ${tokens.spaceXs};
 	background: ${({ missing }) => missing ? tokens.dangerSoft : tokens.bg};
 	border: 1px solid ${({ missing }) => missing ? tokens.dangerLine : tokens.gray300};
 	border-radius: ${tokens.radiusMd};
@@ -1679,11 +1691,11 @@ var SelectedItem = ({
             children: isMissing || isTrash ? /* @__PURE__ */ jsxRuntime.jsx(components.Icon, { icon: icons.caution, size: 22 }) : hasThumbImage ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.thumbnailUrl, alt: "", loading: "lazy" }) : resolvedIcon ? /* @__PURE__ */ jsxRuntime.jsx(components.Icon, { icon: resolvedIcon, size: 22 }) : null
           }
         ) : null,
-        render ? render(item) : /* @__PURE__ */ jsxRuntime.jsx(ItemBody, { children: /* @__PURE__ */ jsxRuntime.jsx(PrimaryText, { muted: isMissing || isTrash, title: item.title, children: isMissing ? missingLabel : isTrash ? trashLabel : item.title }) }),
+        render ? render(item) : /* @__PURE__ */ jsxRuntime.jsx(ItemBody, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectedTitle, { muted: isMissing || isTrash, title: item.title, children: isMissing ? missingLabel : isTrash ? trashLabel : item.title }) }),
         !isMissing && showTypeBadge ? /* @__PURE__ */ jsxRuntime.jsx(TypeBadge, { type: item.type, kind: item.kind }) : null,
         !isMissing && hasAbnormalStatus ? /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: item.status }) : null,
         /* @__PURE__ */ jsxRuntime.jsxs(ActionColumn, { children: [
-          orderable ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          orderable ? /* @__PURE__ */ jsxRuntime.jsxs(ReorderStack, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               components.Button,
               {
@@ -1760,10 +1772,7 @@ var useResolvedItems = (value) => {
           nameKey,
           item.id
         ]);
-        out[`${item.kind}:${item.type}:${item.id}`] = {
-          record: record ?? null,
-          resolved
-        };
+        out[`${item.kind}:${item.type}:${item.id}`] = resolved ? record ?? null : void 0;
       }
       return out;
     },
@@ -1771,10 +1780,8 @@ var useResolvedItems = (value) => {
   );
   return react$1.useMemo(
     () => value.map((item) => {
-      const resolvedEntry = records[`${item.kind}:${item.type}:${item.id}`];
-      if (!resolvedEntry) return item;
-      const { record, resolved } = resolvedEntry;
-      if (!resolved) {
+      const record = records[`${item.kind}:${item.type}:${item.id}`];
+      if (record === void 0) {
         return item;
       }
       if (!record) {