@web-portfolio/icons-sanity 3.0.3 → 3.0.4

package/README.md

@@ -231,6 +231,21 @@ schema.
 
 ## Changelog
 
+**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,5 +1,5 @@
 import { definePlugin, defineType, set, unset } from "sanity";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, 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 { styled } from "styled-components";
@@ -5194,22 +5194,22 @@ const metadata = {
 	}
 }, PreviewFrame = styled(Card).withConfig({
 	displayName: "PreviewFrame",
-	componentId: "sc-0esdoi-0"
+	componentId: "sc-s8zqt7-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"
+	componentId: "sc-s8zqt7-1"
 })`max-height:${rem(400)};overflow-y:auto;overscroll-behavior:contain;`, IconTile = styled(Card).withConfig({
 	displayName: "IconTile",
-	componentId: "sc-0esdoi-2"
+	componentId: "sc-s8zqt7-2"
 })`&&[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-s8zqt7-3"
 })`height:${rem(37)};`, LabelRow = styled(Box).withConfig({
 	displayName: "LabelRow",
-	componentId: "sc-0esdoi-4"
+	componentId: "sc-s8zqt7-4"
 })`min-height:${rem(20)};`, CategorySelectBox = styled(Box).withConfig({
 	displayName: "CategorySelectBox",
-	componentId: "sc-0esdoi-5"
+	componentId: "sc-s8zqt7-5"
 })`width:${rem(180)};`;
 function matchesQuery(name, entry, query) {
 	if (!query.trim()) return !0;
@@ -5242,7 +5242,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 +5262,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) => {
@@ -5395,6 +5397,7 @@ function IconPickerInput(props) {
 							children: [/* @__PURE__ */ jsx(Box, {
 								flex: 1,
 								children: /* @__PURE__ */ jsx(TextInput, {
+									ref: searchInputRef,
 									icon: SearchIcon,
 									placeholder: "Search by name, label, or tag…",
 									value: query,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web-portfolio/icons-sanity",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "Sanity Studio icon picker input, backed by the same bundled registry as @web-portfolio/icons.",
   "license": "MIT",
   "keywords": [