@web-portfolio/icons-sanity 3.0.3 → 3.1.0

package/README.md

@@ -56,10 +56,9 @@ you from doing that again:
   alongside its label, category, and the exact string that got stored — so
   editors can confirm at a glance they picked the right one.
 - **Built entirely from Sanity UI.** `Card`, `Dialog`, `Badge`, `Select`,
-  `TextInput`, `Tooltip` and `@sanity/icons`, sized off the Sanity UI space
-  scale. It inherits your Studio's theme and light/dark scheme instead of
-  fighting it, and respects `readOnly` fields and Studio's focus/presence
-  tracking like a built-in input.
+  `TextInput`, sized off the Sanity UI space scale. It inherits your Studio's
+  theme and light/dark scheme instead of fighting it, and respects `readOnly`
+  fields and Studio's focus/presence tracking like a built-in input.
 
 ## Installation
 
@@ -72,10 +71,11 @@ pnpm add @web-portfolio/icons-sanity
 ```
 
 Peer dependencies:
-`sanity >=3`, `@sanity/ui >=2`, `@sanity/icons >=3`, `react >=18`,
-`styled-components >=6` (already present in any standard Sanity Studio v3
-project), plus `@web-portfolio/icons >=1.0.1`, which renders the icons this
-plugin picks — install it if your Studio doesn't already have it.
+`sanity >=3`, `@sanity/ui >=2`, `react >=18`, `styled-components >=6`
+(already present in any standard Sanity Studio project — this plugin is
+tested against every Studio major from v3 through the current v6), plus
+`@web-portfolio/icons >=1.0.1`, which renders the icons this plugin picks —
+install it if your Studio doesn't already have it.
 
 ## Setup
 
@@ -231,6 +231,49 @@ schema.
 
 ## Changelog
 
+**v3.1.0 — Sanity Studio v6 compatibility**
+- **`@sanity/icons` is no longer a dependency.** It dropped its root barrel
+  export in v5.0.0 — `import {ImageIcon} from '@sanity/icons'` stopped
+  resolving — and Sanity Studio v6 (the current major) already installs
+  `@sanity/icons` ^5.2 for itself, so this plugin would fail to load in any
+  new v6 Studio. Its four UI-chrome icons (search, trash, warning, the "no
+  icon" placeholder) are now inlined instead — visually identical, zero
+  version dependency.
+- **Fixed layout on `@sanity/ui` v4.** `Stack`'s `space` prop and `Grid`'s
+  `columns` prop were both removed there (in favor of `gap` and
+  `gridTemplateColumns`) — silently, with no error, just missing spacing and
+  a non-responsive icon grid. Both are replaced with plain CSS (`gap` via a
+  specificity override, a `minmax()`-based grid) that doesn't depend on which
+  major is installed.
+- **`Tooltip` is no longer imported from `@sanity/ui`.** It moved to the
+  `@sanity/ui/tooltip` subpath in v4 — a subpath that doesn't exist in v2/v3
+  — so importing it from the root, as this plugin used to, resolves to
+  `undefined` on v4 and crashes the results grid the moment it renders. The
+  per-tile tooltip (showing an icon's raw registry name on hover) is now a
+  native `title` attribute instead; `aria-label` already carried the same
+  information for assistive tech.
+- Verified against real installs of every Studio major still actively
+  maintained — v3, v4, v5, and v6 — not just against the changelogs above.
+  v6 in particular installs `@sanity/ui` 4.0.7 and `sanity` itself pulls in
+  React 19.2 and `@sanity/icons` 5.2, the exact combination the fixes above
+  target; the full test suite passes against that real combination, not just
+  this package's own (older) pinned dev dependencies.
+
+**Icon picker: grid fixes + reliable auto-focus**
+- **Fixed overlap:** grid tiles' icon row was sized off an unrelated Sanity UI
+  theme token, which was shorter than the icon itself — the glyph visually
+  spilled down over its own label. The row now sizes off the actual icon
+  dimension, so this can't happen regardless of icon or theme.
+- **Icons are 20% bigger** in the grid (24px → 29px) for better legibility.
+- **Fewer icons per page** (96 → 48), matching the larger tiles so a page
+  still renders as a comfortable handful of rows.
+- **Search field now reliably auto-focuses** when the dialog opens. Sanity
+  UI's `Dialog` unconditionally focuses its own header close button on mount
+  (it's the first focusable element in the DOM), which was winning a race
+  against the search field's `autoFocus` — the field now explicitly reclaims
+  focus after Dialog's own mount behavior runs, so opening the picker always
+  drops you straight into search.
+
 **v3.0.0 — ESM-only, built with `@sanity/plugin-kit`**
 - The build now uses [`@sanity/plugin-kit`](https://github.com/sanity-io/plugins/tree/main/packages/@sanity/plugin-kit)
   and [`@sanity/pkg-utils`](https://github.com/sanity-io/pkg-utils) instead

package/dist/index.js

@@ -1,11 +1,38 @@
 import { definePlugin, defineType, set, unset } from "sanity";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { Badge, Box, Button, Card, Dialog, Flex, Grid, Select, Stack, Text, TextInput, Tooltip, rem } from "@sanity/ui";
-import { ImageIcon, SearchIcon, TrashIcon, WarningOutlineIcon } from "@sanity/icons";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Badge, Box, Button, Card, Dialog, Flex, Grid, Select, Stack, Text, TextInput, rem } from "@sanity/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { styled } from "styled-components";
 import { Icon } from "@web-portfolio/icons";
-import { jsx, jsxs } from "react/jsx-runtime";
-const metadata = {
+/**
+* Inlined rather than imported from `@sanity/icons`. That package dropped its
+* root barrel export in v5 — `import {ImageIcon} from '@sanity/icons'` stops
+* resolving entirely — and Sanity Studio v6 already pulls `@sanity/icons`
+* ^5.2 as its own dependency, so any Studio on the current major would fail
+* to load this plugin. These four are visually identical to their
+* `@sanity/icons` counterparts (same viewBox, path data and stroke), just
+* copied in so this plugin has no dependency on which major is installed.
+*/
+function iconPath(d) {
+	return forwardRef(function IconSvg(props, ref) {
+		return /* @__PURE__ */ jsx("svg", {
+			width: "1em",
+			height: "1em",
+			viewBox: "0 0 25 25",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			...props,
+			ref,
+			children: /* @__PURE__ */ jsx("path", {
+				d,
+				stroke: "currentColor",
+				strokeWidth: 1.2,
+				strokeLinejoin: "round"
+			})
+		});
+	});
+}
+const ImageIcon = iconPath("M5.5 15.5L8.79289 12.2071C9.18342 11.8166 9.81658 11.8166 10.2071 12.2071L12.8867 14.8867C13.2386 15.2386 13.7957 15.2782 14.1938 14.9796L15.1192 14.2856C15.3601 14.1049 15.6696 14.0424 15.9618 14.1154L19.5 15M5.5 6.5H19.5V18.5H5.5V6.5ZM15.5 10.5C15.5 11.0523 15.0523 11.5 14.5 11.5C13.9477 11.5 13.5 11.0523 13.5 10.5C13.5 9.94772 13.9477 9.5 14.5 9.5C15.0523 9.5 15.5 9.94772 15.5 10.5Z"), SearchIcon = iconPath("M15.0355 15.0355L20 20M16.5 11.5C16.5 14.2614 14.2614 16.5 11.5 16.5C8.73858 16.5 6.5 14.2614 6.5 11.5C6.5 8.73858 8.73858 6.5 11.5 6.5C14.2614 6.5 16.5 8.73858 16.5 11.5Z"), TrashIcon = iconPath("M5 6.5H20M10 6.5V4.5C10 3.94772 10.4477 3.5 11 3.5H14C14.5523 3.5 15 3.94772 15 4.5V6.5M12.5 9V17M15.5 9L15 17M9.5 9L10 17M18.5 6.5L17.571 18.5767C17.5309 19.0977 17.0965 19.5 16.574 19.5H8.42603C7.90349 19.5 7.46905 19.0977 7.42898 18.5767L6.5 6.5H18.5Z"), WarningOutlineIcon = iconPath("M12.5 9V13M12.5 16V14.5M14.2239 5.43058L20.727 16.486C21.5113 17.8192 20.55 19.5 19.0032 19.5H5.99683C4.45 19.5 3.48869 17.8192 4.27297 16.486L10.7761 5.43058C11.5494 4.11596 13.4506 4.11596 14.2239 5.43058Z"), metadata = {
 	aarch64: {
 		label: "Aarch64",
 		tags: [
@@ -4822,6 +4849,30 @@ const metadata = {
 		],
 		category: "original"
 	},
+	"verdict-check": {
+		label: "Verdict Check",
+		tags: [
+			"check",
+			"checkmark",
+			"yes",
+			"verdict",
+			"tick",
+			"comparison"
+		],
+		category: "original"
+	},
+	"verdict-cross": {
+		label: "Verdict Cross",
+		tags: [
+			"cross",
+			"close",
+			"no",
+			"verdict",
+			"x",
+			"comparison"
+		],
+		category: "original"
+	},
 	vertx: {
 		label: "Vertx",
 		tags: [
@@ -5194,22 +5245,28 @@ const metadata = {
 	}
 }, PreviewFrame = styled(Card).withConfig({
 	displayName: "PreviewFrame",
-	componentId: "sc-0esdoi-0"
+	componentId: "sc-7yumqh-0"
 })`flex-shrink:0;width:${({ theme }) => rem(28 + theme.sanity.space[3] * 2)};height:${({ theme }) => rem(28 + theme.sanity.space[3] * 2)};`, ResultsScroller = styled(Box).withConfig({
 	displayName: "ResultsScroller",
-	componentId: "sc-0esdoi-1"
-})`max-height:${rem(400)};overflow-y:auto;overscroll-behavior:contain;`, IconTile = styled(Card).withConfig({
+	componentId: "sc-7yumqh-1"
+})`max-height:${rem(400)};overflow-y:auto;overscroll-behavior:contain;`, VStack = styled(Stack).withConfig({
+	displayName: "VStack",
+	componentId: "sc-7yumqh-2"
+})`&&{gap:${({ theme, $space }) => rem(theme.sanity.space[$space])};}`, ResultsGrid = styled(Grid).withConfig({
+	displayName: "ResultsGrid",
+	componentId: "sc-7yumqh-3"
+})`grid-template-columns:repeat(auto-fill,minmax(${rem(88)},1fr));`, IconTile = styled(Card).withConfig({
 	displayName: "IconTile",
-	componentId: "sc-0esdoi-2"
+	componentId: "sc-7yumqh-4"
 })`&&[data-as='button']{cursor:pointer;border:1px solid var(--card-border-color);min-width:0;overflow:hidden;}`, GlyphRow = styled(Flex).withConfig({
 	displayName: "GlyphRow",
-	componentId: "sc-0esdoi-3"
+	componentId: "sc-7yumqh-5"
 })`height:${rem(37)};`, LabelRow = styled(Box).withConfig({
 	displayName: "LabelRow",
-	componentId: "sc-0esdoi-4"
+	componentId: "sc-7yumqh-6"
 })`min-height:${rem(20)};`, CategorySelectBox = styled(Box).withConfig({
 	displayName: "CategorySelectBox",
-	componentId: "sc-0esdoi-5"
+	componentId: "sc-7yumqh-7"
 })`width:${rem(180)};`;
 function matchesQuery(name, entry, query) {
 	if (!query.trim()) return !0;
@@ -5242,7 +5299,7 @@ function formatCategoryLabel(category) {
 	return CATEGORY_LABEL_OVERRIDES[category] ? CATEGORY_LABEL_OVERRIDES[category] : category.split(/[-_]/).filter(Boolean).map((word) => word[0].toUpperCase() + word.slice(1)).join(" ");
 }
 function IconPickerInput(props) {
-	let { value, onChange, readOnly, elementProps } = props, [open, setOpen] = useState(!1), [query, setQuery] = useState(""), [category, setCategory] = useState(""), [visibleCount, setVisibleCount] = useState(48), names = useMemo(() => Object.keys(metadata).sort(), []), categories = useMemo(() => {
+	let { value, onChange, readOnly, elementProps } = props, [open, setOpen] = useState(!1), [query, setQuery] = useState(""), [category, setCategory] = useState(""), [visibleCount, setVisibleCount] = useState(48), searchInputRef = useRef(null), names = useMemo(() => Object.keys(metadata).sort(), []), categories = useMemo(() => {
 		let found = /* @__PURE__ */ new Set();
 		for (let name of names) {
 			let entry = metadata[name];
@@ -5262,7 +5319,9 @@ function IconPickerInput(props) {
 	]);
 	useEffect(() => {
 		setVisibleCount(48);
-	}, [query, category]);
+	}, [query, category]), useEffect(() => {
+		open && searchInputRef.current?.focus();
+	}, [open]);
 	let visible = filtered.slice(0, visibleCount), remaining = filtered.length - visible.length, selectedEntry = value ? metadata[value] : void 0, hasUnknownValue = !!(value && !selectedEntry), closeDialog = useCallback(() => {
 		setOpen(!1), setQuery(""), setCategory("");
 	}, []), handleSelect = useCallback((name) => {
@@ -5280,8 +5339,8 @@ function IconPickerInput(props) {
 		ref: elementProps?.ref,
 		"aria-describedby": elementProps?.["aria-describedby"]
 	};
-	return /* @__PURE__ */ jsxs(Stack, {
-		space: 3,
+	return /* @__PURE__ */ jsxs(VStack, {
+		$space: 3,
 		children: [
 			/* @__PURE__ */ jsxs(Flex, {
 				align: "center",
@@ -5307,11 +5366,11 @@ function IconPickerInput(props) {
 							children: jsx(hasUnknownValue ? WarningOutlineIcon : ImageIcon, {})
 						})
 					})
-				}), /* @__PURE__ */ jsxs(Stack, {
-					space: 3,
+				}), /* @__PURE__ */ jsxs(VStack, {
+					$space: 3,
 					flex: 1,
-					children: [/* @__PURE__ */ jsxs(Stack, {
-						space: 2,
+					children: [/* @__PURE__ */ jsxs(VStack, {
+						$space: 2,
 						children: [/* @__PURE__ */ jsxs(Flex, {
 							align: "center",
 							gap: 2,
@@ -5388,13 +5447,14 @@ function IconPickerInput(props) {
 				}),
 				children: /* @__PURE__ */ jsx(Box, {
 					padding: 4,
-					children: /* @__PURE__ */ jsxs(Stack, {
-						space: 4,
+					children: /* @__PURE__ */ jsxs(VStack, {
+						$space: 4,
 						children: [/* @__PURE__ */ jsxs(Flex, {
 							gap: 2,
 							children: [/* @__PURE__ */ jsx(Box, {
 								flex: 1,
 								children: /* @__PURE__ */ jsx(TextInput, {
+									ref: searchInputRef,
 									icon: SearchIcon,
 									placeholder: "Search by name, label, or tag…",
 									value: query,
@@ -5421,8 +5481,8 @@ function IconPickerInput(props) {
 							padding: 5,
 							radius: 2,
 							tone: "transparent",
-							children: /* @__PURE__ */ jsxs(Stack, {
-								space: 3,
+							children: /* @__PURE__ */ jsxs(VStack, {
+								$space: 3,
 								children: [/* @__PURE__ */ jsx(Text, {
 									align: "center",
 									size: 1,
@@ -5435,57 +5495,41 @@ function IconPickerInput(props) {
 									children: "Try a shorter term, or reset the category filter."
 								})]
 							})
-						}) : /* @__PURE__ */ jsx(ResultsScroller, { children: /* @__PURE__ */ jsxs(Stack, {
-							space: 3,
-							children: [/* @__PURE__ */ jsx(Grid, {
-								columns: [
-									3,
-									4,
-									6
-								],
+						}) : /* @__PURE__ */ jsx(ResultsScroller, { children: /* @__PURE__ */ jsxs(VStack, {
+							$space: 3,
+							children: [/* @__PURE__ */ jsx(ResultsGrid, {
 								gap: 2,
 								children: visible.map((name) => {
 									let entry = metadata[name], isSelected = name === value;
-									return /* @__PURE__ */ jsx(Tooltip, {
-										content: /* @__PURE__ */ jsx(Box, {
-											padding: 2,
-											children: /* @__PURE__ */ jsx(Text, {
-												size: 1,
-												children: name
-											})
-										}),
-										placement: "top",
-										delay: { open: 400 },
-										portal: !0,
-										children: /* @__PURE__ */ jsx(IconTile, {
-											forwardedAs: "button",
-											type: "button",
-											padding: 3,
-											radius: 2,
-											border: !0,
-											tone: isSelected ? "primary" : "default",
-											pressed: isSelected,
-											__unstable_focusRing: !0,
-											"aria-pressed": isSelected,
-											"aria-label": `${entry.label} (${name})`,
-											onClick: () => handleSelect(name),
-											children: /* @__PURE__ */ jsxs(Stack, {
-												space: 2,
-												children: [/* @__PURE__ */ jsx(GlyphRow, {
-													align: "center",
-													justify: "center",
-													children: /* @__PURE__ */ jsx(Icon, {
-														name,
-														size: 29
-													})
-												}), /* @__PURE__ */ jsx(LabelRow, { children: /* @__PURE__ */ jsx(Text, {
-													size: 0,
-													align: "center",
-													muted: !0,
-													textOverflow: "ellipsis",
-													children: entry.label
-												}) })]
-											})
+									return /* @__PURE__ */ jsx(IconTile, {
+										forwardedAs: "button",
+										type: "button",
+										padding: 3,
+										radius: 2,
+										border: !0,
+										tone: isSelected ? "primary" : "default",
+										pressed: isSelected,
+										__unstable_focusRing: !0,
+										title: name,
+										"aria-pressed": isSelected,
+										"aria-label": `${entry.label} (${name})`,
+										onClick: () => handleSelect(name),
+										children: /* @__PURE__ */ jsxs(VStack, {
+											$space: 2,
+											children: [/* @__PURE__ */ jsx(GlyphRow, {
+												align: "center",
+												justify: "center",
+												children: /* @__PURE__ */ jsx(Icon, {
+													name,
+													size: 29
+												})
+											}), /* @__PURE__ */ jsx(LabelRow, { children: /* @__PURE__ */ jsx(Text, {
+												size: 0,
+												align: "center",
+												muted: !0,
+												textOverflow: "ellipsis",
+												children: entry.label
+											}) })]
 										})
 									}, name);
 								})

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@web-portfolio/icons-sanity",
-  "version": "3.0.3",
-  "description": "Sanity Studio icon picker input, backed by the same bundled registry as @web-portfolio/icons.",
+  "version": "3.1.0",
+  "description": "Sanity Studio icon picker field with 633 bundled SVG icons — search by name, label, or tag, no SVG markup required.",
   "license": "MIT",
   "keywords": [
     "sanity",
@@ -11,7 +11,10 @@
     "icons",
     "cms",
     "custom input",
-    "sanity field"
+    "sanity field",
+    "sanity-studio",
+    "svg-icons",
+    "schema-type"
   ],
   "homepage": "https://github.com/jatinrao/icons#readme",
   "bugs": {
@@ -52,7 +55,6 @@
     "link-watch": "plugin-kit link-watch"
   },
   "peerDependencies": {
-    "@sanity/icons": ">=3",
     "@sanity/ui": ">=2",
     "@web-portfolio/icons": ">=1.0.1",
     "react": ">=18",
@@ -61,7 +63,6 @@
   },
   "devDependencies": {
     "@sanity/browserslist-config": "^1.0.5",
-    "@sanity/icons": "^3.8.0",
     "@sanity/pkg-utils": "^12.3.2",
     "@sanity/plugin-kit": "^10.0.8",
     "@sanity/ui": "^2.10.0",