@nice2dev/icons 1.3.7 → 1.3.9

package/dist/esm/NiceIconPicker.js

@@ -1,19 +1,45 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useRovingFocus, useNiceTranslation, useOverlayFocus } from '@nice2dev/ui-core';
-import { forwardRef, useRef, useState, useMemo, useCallback, useImperativeHandle, useEffect } from 'react';
+import { useRovingFocus, useNiceTranslation, useControllableState, useOverlayFocus } from '@nice2dev/ui-core';
+import { forwardRef, useRef, useState, useId, useMemo, useCallback, useImperativeHandle, useEffect, useLayoutEffect } from 'react';
+import { parseIconHtml, scopeIconHtmlIds, iconHtmlAttributes } from './iconHtml.js';
 import { NtdSearch, NtdCheck } from './icons/actions.js';
 import { NtdGrid } from './icons/files.js';
 import { NtdInbox } from './icons/media.js';
-import { NtdChevronDown } from './icons/navigation.js';
+import { NtdArrowLeft, NtdChevronDown } from './icons/navigation.js';
 import { NtdStar, NtdClock } from './icons/ui.js';
+import { iconDisplayName, renderIconStack } from './iconStack.js';
+import { NiceIconStacker } from './NiceIconStacker.js';
 
 const MAX_HISTORY_ITEMS = 20;
+/** `useLayoutEffect` in the browser, `useEffect` on the server (no warning there). */
+const useIsoLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 /* ─── Small icons: the package's own (until 1.2.0 these were pasted SVGs) ─── */
 const Chevron = () => jsx(NtdChevronDown, { size: 12, variant: "outline" });
 const SearchIcon = () => jsx(NtdSearch, { size: 14, variant: "outline" });
 const StarIcon = ({ filled }) => (jsx(NtdStar, { size: 12, variant: filled ? 'solid' : 'outline' }));
 const ClockIcon = () => jsx(NtdClock, { size: 12, variant: "outline" });
 const CheckIcon = () => jsx(NtdCheck, { size: 10, variant: "outline" });
+const NO_NAMES = [];
+const NO_LAYERS = [];
+/** The accent the picker draws with: the page's background, white without a theme. */
+const PAGE_ACCENT = 'var(--nice-bg-primary, white)';
+/** An entry's name as shown: its label, else the export name without `Ntd`. */
+const entryLabel = (entry) => { var _a; return (_a = entry.label) !== null && _a !== void 0 ? _a : iconDisplayName(entry.name); };
+/** The part of the window an element's popup can show in: the window, cut by every ancestor that clips or scrolls. */
+function visibleBounds(el) {
+    const bounds = { top: 0, bottom: window.innerHeight, left: 0, right: window.innerWidth };
+    for (let p = el.parentElement; p && p !== document.body; p = p.parentElement) {
+        const style = window.getComputedStyle(p);
+        if (style.overflowX !== 'visible' || style.overflowY !== 'visible') {
+            const r = p.getBoundingClientRect();
+            bounds.top = Math.max(bounds.top, r.top);
+            bounds.bottom = Math.min(bounds.bottom, r.bottom);
+            bounds.left = Math.max(bounds.left, r.left);
+            bounds.right = Math.min(bounds.right, r.right);
+        }
+    }
+    return bounds;
+}
 /* ─── localStorage helpers ─── */
 function loadFromStorage(key, fallback) {
     if (typeof window === 'undefined') {
@@ -44,40 +70,43 @@ function saveToStorage(key, value) {
 /**
  * A fully-featured icon picker dropdown component.
  *
- * Provides a trigger button that opens a searchable, categorized icon grid.
- * Supports controlled selection, keyboard navigation (Escape to close),
- * click-outside dismissal, and an imperative handle for programmatic control.
+ * Provides a trigger button that opens a searchable, categorized icon grid. The value binds both
+ * ways — `value` / `defaultValue` + `onChange` (1.3.9) — as the icon's export name or, with
+ * `valueFormat="html"`, as the icon drawn in HTML, ready to store. With `stackable` the panel gets
+ * an "Overlays" tab where icons are stacked on the chosen one. Names show without `Ntd`; the
+ * trigger shows the icon alone or the icon and its name (`displayMode`). Keyboard: arrows in the
+ * grid, Escape to close.
  *
  * **Styling:** Uses CSS variables for theming (see `NiceIconPicker.css`).
  * Override `--ntd-picker-bg`, `--ntd-picker-accent`, etc. on a parent element.
  *
  * @example
  * ```tsx
- * import { NiceIconPicker } from '@nicetodev/icons';
- *
- * function IconSelectField({ icons }) {
- *   const [selected, setSelected] = useState<string | null>(null);
+ * import { NiceIconPicker } from '@nice2dev/icons';
  *
- *   return (
- *     <NiceIconPicker
- *       icons={icons}
- *       value={selected}
- *       onChange={(name) => setSelected(name)}
- *       variant="solid"
- *       placeholder="Pick icon..."
- *     />
- *   );
+ * function IconField({ icons, value, onChange }) {
+ *   // stores `<svg data-ntd-icon="NtdStar" …>…</svg>`, a stack included
+ *   return <NiceIconPicker icons={icons} value={value} onChange={onChange} stackable />;
  * }
  * ```
  */
-const NiceIconPicker = /* @__PURE__ */ forwardRef(function NiceIconPicker({ icons, value = null, values = [], onChange, onChangeMulti, multiSelect = false, maxSelections, placeholder, variant = 'solid', gridIconSize = 'md', triggerIconSize = 'sm', categories: categoriesProp, className, disabled = false, clearable = true, virtualized = false, virtualizedItemCount = 100, showHistory = false, showFavorites = false, storageKeyPrefix = 'ntd-icon-picker', enableDragAndDrop = false, onDragStart, onDragEnd, }, ref) {
+const NiceIconPicker = /* @__PURE__ */ forwardRef(function NiceIconPicker({ icons, value: valueProp, defaultValue, values: valuesProp, defaultValues, onChange, onChangeMulti, valueFormat: valueFormatProp, stackable = false, displayMode = 'icon-name', optionDisplayMode = 'icon', name, 'aria-label': ariaLabel, id, testId, 'data-testid': dataTestId, multiSelect = false, maxSelections, placeholder, variant = 'solid', iconProps, gridIconSize = 'md', triggerIconSize = 'sm', categories: categoriesProp, className, disabled = false, clearable = true, virtualized = false, virtualizedItemCount = 100, showHistory = false, showFavorites = false, storageKeyPrefix = 'ntd-icon-picker', enableDragAndDrop = false, onDragStart, onDragEnd, }, ref) {
     var _a;
     const tablistRef = useRef(null);
     useRovingFocus(tablistRef, { orientation: 'horizontal', wrap: true, activateOnMove: true });
+    const viewsRef = useRef(null);
+    useRovingFocus(viewsRef, { orientation: 'horizontal', activateOnMove: true });
     const { t } = useNiceTranslation();
     const [isOpen, setIsOpen] = useState(false);
     const [search, setSearch] = useState('');
     const [activeCategory, setActiveCategory] = useState(null);
+    // the panel's view: the icon grid or the stack; `picking` = the grid chooses an icon to stack
+    const [view, setView] = useState('icons');
+    const [picking, setPicking] = useState(null);
+    const panelId = useId();
+    const valueFormat = valueFormatProp !== null && valueFormatProp !== void 0 ? valueFormatProp : (stackable ? 'html' : 'name');
+    const canStack = stackable && !multiSelect && valueFormat === 'html';
+    const drawProps = useMemo(() => ({ accentColor: PAGE_ACCENT, ...iconProps, variant }), [iconProps, variant]);
     // Virtualization state
     const [visibleRange, setVisibleRange] = useState({ start: 0, end: virtualizedItemCount });
     const gridWrapRef = useRef(null);
@@ -86,35 +115,105 @@ const NiceIconPicker = /* @__PURE__ */ forwardRef(function NiceIconPicker({ icon
     const historyKey = `${storageKeyPrefix}-history`;
     const [favorites, setFavorites] = useState(() => loadFromStorage(favoritesKey, []));
     const [history, setHistory] = useState(() => loadFromStorage(historyKey, []));
-    // Multi-select state (internal when uncontrolled)
-    const [internalValues, setInternalValues] = useState([]);
-    const selectedValues = useMemo(() => (multiSelect ? (values.length > 0 ? values : internalValues) : value ? [value] : []), [multiSelect, values, internalValues, value]);
+    // The value binds both ways (1.3.9): controlled by `value`, or kept here from `defaultValue`.
+    const [value, setValue] = useControllableState({
+        value: valueProp,
+        defaultValue,
+        fallbackValue: null,
+        componentName: 'NiceIconPicker',
+    });
+    const [values, setValues] = useControllableState({
+        value: valuesProp,
+        defaultValue: defaultValues,
+        fallbackValue: NO_NAMES,
+        componentName: 'NiceIconPicker',
+    });
     const rootRef = useRef(null);
     const searchInputRef = useRef(null);
+    const stackerRef = useRef(null);
+    const serializerRef = useRef(null);
+    /* ─── Icons by name: exact, or without the Ntd a stored value may lack ─── */
+    const byName = useMemo(() => new Map(icons.map((e) => [e.name, e])), [icons]);
+    const entryOf = useCallback((n) => { var _a; return (n ? ((_a = byName.get(n)) !== null && _a !== void 0 ? _a : byName.get(`Ntd${n}`)) : undefined); }, [byName]);
+    const labelOf = useCallback((n) => {
+        const entry = entryOf(n);
+        return entry ? entryLabel(entry) : iconDisplayName(n);
+    }, [entryOf]);
+    const resolve = useCallback((n) => { var _a; return (_a = entryOf(n)) === null || _a === void 0 ? void 0 : _a.Component; }, [entryOf]);
+    /* ─── The single value as a stack — a plain icon is a stack of one ─── */
+    const model = useMemo(() => {
+        if (!value) {
+            return NO_LAYERS;
+        }
+        const source = parseIconHtml(value);
+        if (source) {
+            return source.layers;
+        }
+        const entry = value.includes('<') ? undefined : entryOf(value);
+        return entry ? [{ id: '1', icon: entry.name }] : NO_LAYERS;
+    }, [value, entryOf]);
+    // A stack waiting to be drawn into HTML: shown at once, emitted once drawn (below).
+    const [pending, setPending] = useState(null);
+    const shown = pending !== null && pending !== void 0 ? pending : model;
+    const base = shown[0];
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const emit = useCallback((next, baseName) => {
+        var _a, _b;
+        setValue(next);
+        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, next, (_b = entryOf(baseName)) !== null && _b !== void 0 ? _b : null);
+    }, [setValue, entryOf]);
+    /** Sets the single value to a stack: its base's name, or the stack drawn as HTML. */
+    const commit = useCallback((layers) => {
+        if (layers.length === 0) {
+            setPending(null);
+            emit(null);
+        }
+        else if (valueFormat === 'name') {
+            emit(layers[0].icon, layers[0].icon);
+        }
+        else {
+            setPending(layers);
+        }
+    }, [valueFormat, emit]);
+    // The HTML is the icon as drawn: the hidden copy below renders the pending stack, and its
+    // markup — ids renamed after the drawing — is the new value, emitted before the paint.
+    useIsoLayoutEffect(() => {
+        var _a;
+        if (!pending) {
+            return;
+        }
+        const svg = (_a = serializerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('svg');
+        setPending(null);
+        if (svg) {
+            emit(scopeIconHtmlIds(svg.outerHTML), pending[0].icon);
+        }
+    }, [pending, emit]);
+    const selectedValues = useMemo(() => (multiSelect ? values : base ? [base.icon] : NO_NAMES), [multiSelect, values, base]);
     /* ─── Favorites helpers ─── */
-    const addFavorite = useCallback((name) => {
+    const addFavorite = useCallback((favorite) => {
         setFavorites((prev) => {
-            if (prev.includes(name)) {
+            if (prev.includes(favorite)) {
                 return prev;
             }
-            const next = [...prev, name];
+            const next = [...prev, favorite];
             saveToStorage(favoritesKey, next);
             return next;
         });
     }, [favoritesKey]);
-    const removeFavorite = useCallback((name) => {
+    const removeFavorite = useCallback((favorite) => {
         setFavorites((prev) => {
-            const next = prev.filter((n) => n !== name);
+            const next = prev.filter((n) => n !== favorite);
             saveToStorage(favoritesKey, next);
             return next;
         });
     }, [favoritesKey]);
-    const toggleFavorite = useCallback((name) => {
-        if (favorites.includes(name)) {
-            removeFavorite(name);
+    const toggleFavorite = useCallback((favorite) => {
+        if (favorites.includes(favorite)) {
+            removeFavorite(favorite);
         }
         else {
-            addFavorite(name);
+            addFavorite(favorite);
         }
     }, [favorites, addFavorite, removeFavorite]);
     const clearFavorites = useCallback(() => {
@@ -122,10 +221,10 @@ const NiceIconPicker = /* @__PURE__ */ forwardRef(function NiceIconPicker({ icon
         saveToStorage(favoritesKey, []);
     }, [favoritesKey]);
     /* ─── History helpers ─── */
-    const addToHistory = useCallback((name) => {
+    const addToHistory = useCallback((used) => {
         setHistory((prev) => {
-            const filtered = prev.filter((n) => n !== name);
-            const next = [name, ...filtered].slice(0, MAX_HISTORY_ITEMS);
+            const filtered = prev.filter((n) => n !== used);
+            const next = [used, ...filtered].slice(0, MAX_HISTORY_ITEMS);
             saveToStorage(historyKey, next);
             return next;
         });
@@ -162,12 +261,14 @@ const NiceIconPicker = /* @__PURE__ */ forwardRef(function NiceIconPicker({ icon
         }
         return result;
     }, [icons, categoriesProp]);
-    /* ─── Filter icons ─── */
+    /* ─── Filter icons: by the name shown, the export name or the category ─── */
     const filtered = useMemo(() => {
         let items = icons;
-        if (search.trim()) {
-            const q = search.toLowerCase();
-            items = items.filter((i) => i.name.toLowerCase().includes(q) || i.category.toLowerCase().includes(q));
+        const q = search.trim().toLowerCase();
+        if (q) {
+            items = items.filter((i) => entryLabel(i).toLowerCase().includes(q) ||
+                i.name.toLowerCase().includes(q) ||
+                i.category.toLowerCase().includes(q));
         }
         if (activeCategory === '__favorites__') {
             items = items.filter((i) => favorites.includes(i.name));
@@ -205,13 +306,8 @@ const NiceIconPicker = /* @__PURE__ */ forwardRef(function NiceIconPicker({ icon
         }
         return map;
     }, [filtered, virtualized, virtualizedFiltered]);
-    /* ─── Selected entries ─── */
-    const selectedEntries = useMemo(() => {
-        return selectedValues
-            .map((v) => icons.find((i) => i.name === v))
-            .filter((e) => e !== undefined);
-    }, [icons, selectedValues]);
-    const selectedEntry = (_a = selectedEntries[0]) !== null && _a !== void 0 ? _a : null;
+    /* ─── Selected entries (multi-select) ─── */
+    const selectedEntries = useMemo(() => values.map((v) => entryOf(v)).filter((e) => e !== undefined), [values, entryOf]);
     /* ─── Click outside ─── */
     useEffect(() => {
         if (!isOpen) {
@@ -230,6 +326,8 @@ const NiceIconPicker = /* @__PURE__ */ forwardRef(function NiceIconPicker({ icon
         if (!isOpen) {
             setSearch('');
             setActiveCategory(null);
+            setView('icons');
+            setPicking(null);
             setVisibleRange({ start: 0, end: virtualizedItemCount });
         }
     }, [isOpen, virtualizedItemCount]);
@@ -237,14 +335,27 @@ const NiceIconPicker = /* @__PURE__ */ forwardRef(function NiceIconPicker({ icon
     // The panel is a dialog on the overlay stack: focus on the search field when it opens, Escape
     // / B close only it (a document listener before) and focus returns to the trigger. The icon
     // grid is an APG listbox moving in two dimensions — the cells were reachable by Tab only.
+    // While the grid picks an icon to stack, Escape goes back to the stack instead (1.3.9).
     const dropdownRef = useRef(null);
     useOverlayFocus(dropdownRef, {
         open: isOpen,
         modal: false,
         initialFocus: searchInputRef,
-        onClose: () => setIsOpen(false),
+        onClose: () => (picking ? setPicking(null) : setIsOpen(false)),
     });
     useRovingFocus(gridWrapRef, { orientation: 'grid', itemSelector: '.ntd-picker-cell' });
+    // into the grid to pick an icon to stack: focus the search; back: the layer it went into
+    const wasPicking = useRef(false);
+    useEffect(() => {
+        var _a, _b, _c;
+        if (picking) {
+            (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else if (wasPicking.current) {
+            (_c = (_b = dropdownRef.current) === null || _b === void 0 ? void 0 : _b.querySelector('.nice-icon-stacker__layer--selected .nice-icon-stacker__layer-select')) === null || _c === void 0 ? void 0 : _c.focus();
+        }
+        wasPicking.current = !!picking;
+    }, [picking]);
     /* ─── Virtualization scroll handler ─── */
     useEffect(() => {
         if (!virtualized || !isOpen || !gridWrapRef.current) {
@@ -272,63 +383,83 @@ const NiceIconPicker = /* @__PURE__ */ forwardRef(function NiceIconPicker({ icon
     }, [virtualized, isOpen, filtered.length]);
     /* ─── Handlers ─── */
     const handleSelect = useCallback((entry) => {
+        var _a;
+        // an icon to stack: into the layer the stacker has selected, then back to the stack
+        if (picking) {
+            (_a = stackerRef.current) === null || _a === void 0 ? void 0 : _a.add({ icon: entry.name });
+            setPicking(null);
+            setSearch('');
+            return;
+        }
         // Add to history
         if (showHistory) {
             addToHistory(entry.name);
         }
         if (multiSelect) {
-            const isSelected = selectedValues.includes(entry.name);
+            const isSelected = values.includes(entry.name);
             let newValues;
             if (isSelected) {
-                newValues = selectedValues.filter((v) => v !== entry.name);
+                newValues = values.filter((v) => v !== entry.name);
             }
             else {
-                if (maxSelections && selectedValues.length >= maxSelections) {
+                if (maxSelections && values.length >= maxSelections) {
                     return; // Max selections reached
                 }
-                newValues = [...selectedValues, entry.name];
+                newValues = [...values, entry.name];
             }
+            setValues(newValues);
             if (onChangeMulti) {
                 const entries = newValues
-                    .map((v) => icons.find((i) => i.name === v))
+                    .map((v) => entryOf(v))
                     .filter((e) => e !== undefined);
                 onChangeMulti(newValues, entries);
             }
-            setInternalValues(newValues);
             // Don't close in multi-select mode
         }
         else {
-            onChange === null || onChange === void 0 ? void 0 : onChange(entry.name, entry);
+            // the HTML records the variant it was drawn in; swapping the icon keeps its stack
+            const own = valueFormat === 'html' ? { variant } : {};
+            commit(canStack && base
+                ? [{ ...base, icon: entry.name, ...own }, ...shown.slice(1)]
+                : [{ id: '1', icon: entry.name, ...own }]);
             setIsOpen(false);
         }
     }, [
+        picking,
+        variant,
         multiSelect,
-        selectedValues,
+        values,
+        setValues,
         maxSelections,
-        icons,
-        onChange,
+        entryOf,
         onChangeMulti,
         showHistory,
         addToHistory,
+        valueFormat,
+        canStack,
+        base,
+        shown,
+        commit,
     ]);
     const handleClear = useCallback((e) => {
         e.stopPropagation();
         if (multiSelect) {
+            setValues(NO_NAMES);
             onChangeMulti === null || onChangeMulti === void 0 ? void 0 : onChangeMulti([], []);
-            setInternalValues([]);
         }
         else {
-            onChange === null || onChange === void 0 ? void 0 : onChange(null, null);
+            commit(NO_LAYERS);
+            setView('icons');
         }
-    }, [multiSelect, onChange, onChangeMulti]);
+    }, [multiSelect, setValues, onChangeMulti, commit]);
     const handleToggle = useCallback(() => {
         if (!disabled) {
             setIsOpen((o) => !o);
         }
     }, [disabled]);
-    const handleFavoriteClick = useCallback((e, name) => {
+    const handleFavoriteClick = useCallback((e, favorite) => {
         e.stopPropagation();
-        toggleFavorite(name);
+        toggleFavorite(favorite);
     }, [toggleFavorite]);
     /* ─── Drag & Drop handlers ─── */
     const handleDragStart = useCallback((entry, e) => {
@@ -336,8 +467,7 @@ const NiceIconPicker = /* @__PURE__ */ forwardRef(function NiceIconPicker({ icon
             return;
         }
         // Set various data formats for maximum compatibility
-        const name = entry.name;
-        const readName = readableName(name);
+        const readName = entryLabel(entry);
         // Plain text - icon name
         e.dataTransfer.setData('text/plain', readName);
         // JSON data with full icon info
@@ -349,14 +479,9 @@ const NiceIconPicker = /* @__PURE__ */ forwardRef(function NiceIconPicker({ icon
         };
         e.dataTransfer.setData('application/json', JSON.stringify(iconData));
         e.dataTransfer.setData('text/x-ntd-icon', JSON.stringify(iconData));
-        // Try to render SVG to data URL for image dragging
+        // The cell's own drawing as an image
         try {
-            const tempContainer = document.createElement('div');
-            tempContainer.style.position = 'absolute';
-            tempContainer.style.left = '-9999px';
-            document.body.appendChild(tempContainer);
-            // Use dynamic import workaround - render to string
-            const svgElement = document.querySelector(`[data-name="${readName}"] svg`);
+            const svgElement = e.currentTarget.querySelector('svg');
             if (svgElement) {
                 const svgClone = svgElement.cloneNode(true);
                 svgClone.setAttribute('width', '64');
@@ -369,7 +494,6 @@ const NiceIconPicker = /* @__PURE__ */ forwardRef(function NiceIconPicker({ icon
                 img.src = URL.createObjectURL(svgBlob);
                 e.dataTransfer.setDragImage(img, 32, 32);
             }
-            document.body.removeChild(tempContainer);
         }
         catch (_a) {
             // Fallback - use default drag image
@@ -380,33 +504,106 @@ const NiceIconPicker = /* @__PURE__ */ forwardRef(function NiceIconPicker({ icon
     const handleDragEnd = useCallback((entry, e) => {
         onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(entry, e);
     }, [onDragEnd]);
-    const readableName = (name) => name.replace(/^Ntd/, '');
     const triggerLabel = useMemo(() => {
-        if (multiSelect && selectedEntries.length > 0) {
+        if (multiSelect) {
             if (selectedEntries.length === 1) {
-                return readableName(selectedEntries[0].name);
+                return entryLabel(selectedEntries[0]);
             }
-            return t('iconPicker.iconsSelected', '{count} icons selected').replace('{count}', String(selectedEntries.length));
-        }
-        return selectedEntry
-            ? readableName(selectedEntry.name)
-            : (placeholder !== null && placeholder !== void 0 ? placeholder : t('iconPicker.selectIcon', 'Select icon…'));
-    }, [multiSelect, selectedEntries, selectedEntry, placeholder, t]);
-    return (jsxs("div", { ref: rootRef, className: `ntd-picker${isOpen ? ' ntd-picker--open' : ''}${disabled ? ' ntd-picker--disabled' : ''}${multiSelect ? ' ntd-picker--multi' : ''}${className ? ` ${className}` : ''}`, children: [jsxs("button", { type: "button", className: "ntd-picker-trigger", onClick: handleToggle, disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": isOpen, children: [jsx("span", { className: "ntd-picker-trigger-icon", children: selectedEntry ? (jsx(selectedEntry.Component, { size: triggerIconSize, variant: variant })) : multiSelect && selectedEntries.length > 1 ? (jsx("span", { className: "ntd-picker-multi-badge", children: selectedEntries.length })) : (jsx(NtdGrid, { size: 16, variant: "outline" })) }), jsx("span", { className: `ntd-picker-trigger-label${!selectedEntry && selectedEntries.length === 0 ? ' ntd-picker-trigger-placeholder' : ''}`, children: triggerLabel }), jsx("span", { className: "ntd-picker-trigger-chevron", children: jsx(Chevron, {}) })] }), isOpen && (jsxs("div", { ref: dropdownRef, className: "ntd-picker-dropdown", role: "dialog", "aria-label": t('iconPicker.selectIcon', 'Select icon…'), children: [jsxs("div", { className: "ntd-picker-search", children: [jsx("span", { className: "ntd-picker-search-icon", children: jsx(SearchIcon, {}) }), jsx("input", { ref: searchInputRef, type: "text", placeholder: t('iconPicker.searchIcons', 'Search icons…'), value: search, onChange: (e) => setSearch(e.target.value), "aria-label": t('iconPicker.searchIcons2', 'Search icons') })] }), (allCategories.length > 1 || showFavorites || showHistory) && (jsxs("div", { className: "ntd-picker-tabs", ref: tablistRef, role: "tablist", children: [jsx("button", { type: "button", className: `ntd-picker-tab${activeCategory === null ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory(null), role: "tab", "aria-selected": activeCategory === null, children: t('iconPicker.all', 'All') }), showFavorites && (jsxs("button", { type: "button", className: `ntd-picker-tab ntd-picker-tab-special${activeCategory === '__favorites__' ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory('__favorites__'), role: "tab", "aria-selected": activeCategory === '__favorites__', title: t('iconPicker.favorites', 'Favorites'), children: [jsx(StarIcon, { filled: true }), " ", t('iconPicker.favorites', 'Favorites'), favorites.length > 0 && (jsx("span", { className: "ntd-picker-tab-count", children: favorites.length }))] })), showHistory && history.length > 0 && (jsxs("button", { type: "button", className: `ntd-picker-tab ntd-picker-tab-special${activeCategory === '__history__' ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory('__history__'), role: "tab", "aria-selected": activeCategory === '__history__', title: t('iconPicker.recentlyUsed', 'Recently used'), children: [jsx(ClockIcon, {}), " ", t('iconPicker.recent', 'Recent')] })), allCategories.map((cat) => (jsx("button", { type: "button", className: `ntd-picker-tab${activeCategory === cat ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory(cat), role: "tab", "aria-selected": activeCategory === cat, children: cat }, cat)))] })), jsx("div", { className: "ntd-picker-grid-wrap", ref: gridWrapRef, role: "listbox", "aria-label": t('iconPicker.icons', 'Icons'), "aria-multiselectable": multiSelect || undefined, children: filtered.length === 0 ? (jsxs("div", { className: "ntd-picker-empty", children: [jsx("div", { className: "ntd-picker-empty-icon", children: jsx(NtdInbox, { size: 28, variant: "outline" }) }), activeCategory === '__favorites__'
-                                    ? t('iconPicker.noFavoritesYetClickThe', 'No favorites yet. Click the star icon to add.')
-                                    : activeCategory === '__history__'
-                                        ? t('iconPicker.noRecentIcons', 'No recent icons.')
-                                        : t('iconPicker.noIconsFound', 'No icons found')] })) : (jsxs(Fragment, { children: [virtualized && visibleRange.start > 0 && (jsx("div", { style: { height: Math.floor(visibleRange.start / 6) * 48 } })), Array.from(grouped.entries()).map(([category, entries]) => (jsxs("div", { children: [!activeCategory && !(activeCategory === null || activeCategory === void 0 ? void 0 : activeCategory.startsWith('__')) && (jsx("div", { className: "ntd-picker-category-label", children: category })), jsx("div", { className: "ntd-picker-grid", children: entries.map((entry) => {
-                                                const isSelected = selectedValues.includes(entry.name);
-                                                const isFavorite = favorites.includes(entry.name);
-                                                return (jsxs("button", { type: "button", className: `ntd-picker-cell${isSelected ? ' ntd-picker-cell--selected' : ''}${multiSelect ? ' ntd-picker-cell--multi-select' : ''}${enableDragAndDrop ? ' ntd-picker-cell--draggable' : ''}`, onClick: () => handleSelect(entry), "data-name": readableName(entry.name), role: "option", "aria-selected": isSelected, title: readableName(entry.name), draggable: enableDragAndDrop, onDragStart: enableDragAndDrop ? (e) => handleDragStart(entry, e) : undefined, onDragEnd: enableDragAndDrop ? (e) => handleDragEnd(entry, e) : undefined, children: [jsx(entry.Component, { size: gridIconSize, variant: variant }), multiSelect && isSelected && (jsx("span", { className: "ntd-picker-cell-check", children: jsx(CheckIcon, {}) })), showFavorites && (jsx("button", { type: "button", className: `ntd-picker-cell-fav${isFavorite ? ' ntd-picker-cell-fav--active' : ''}`, onClick: (e) => handleFavoriteClick(e, entry.name), title: isFavorite
-                                                                ? t('iconPicker.removeFromFavorites', 'Remove from favorites')
-                                                                : t('iconPicker.addToFavorites', 'Add to favorites'), children: jsx(StarIcon, { filled: isFavorite }) }))] }, entry.name));
-                                            }) })] }, category))), virtualized && visibleRange.end < filtered.length && (jsx("div", { style: { height: Math.ceil((filtered.length - visibleRange.end) / 6) * 48 } }))] })) }), jsxs("div", { className: "ntd-picker-footer", children: [jsxs("span", { className: "ntd-picker-count", children: [(filtered.length === 1
-                                        ? t('iconPicker.iconCountOne', '{count} icon')
-                                        : t('iconPicker.iconCountMany', '{count} icons')).replace('{count}', String(filtered.length)), multiSelect && selectedValues.length > 0 && (jsxs(Fragment, { children: [' ', t('iconPicker.selected', '• {selectedValues} selected').replace('{selectedValues}', String(selectedValues.length))] })), maxSelections && multiSelect && (jsxs(Fragment, { children: [' ', t('iconPicker.max', '(max {maxSelections})').replace('{maxSelections}', String(maxSelections))] }))] }), clearable && selectedValues.length > 0 && (jsx("button", { type: "button", className: "ntd-picker-clear", onClick: handleClear, children: multiSelect
+            if (selectedEntries.length > 1) {
+                return t('iconPicker.iconsSelected', '{count} icons selected').replace('{count}', String(selectedEntries.length));
+            }
+        }
+        else if (base) {
+            return labelOf(base.icon);
+        }
+        return placeholder !== null && placeholder !== void 0 ? placeholder : t('iconPicker.selectIcon', 'Select icon…');
+    }, [multiSelect, selectedEntries, base, labelOf, placeholder, t]);
+    const hasSelection = multiSelect ? selectedEntries.length > 0 : !!base;
+    const iconOnly = displayMode === 'icon';
+    // the field's label first, then what is chosen — the icon-only trigger has no text of its own
+    const triggerName = ariaLabel
+        ? `${ariaLabel}: ${triggerLabel}`
+        : iconOnly
+            ? triggerLabel
+            : undefined;
+    const overlays = Math.max(0, shown.length - 1);
+    const showGrid = view === 'icons' || !!picking;
+    // Where the panel opens (1.3.9): above the trigger when there is more room there, against its
+    // right edge near the window's, never taller than the room it has — the stack view is tall.
+    // The room is what the window and every clipping or scrolling ancestor leave visible.
+    const [placement, setPlacement] = useState({
+        up: false,
+        end: false,
+    });
+    useIsoLayoutEffect(() => {
+        const root = rootRef.current;
+        if (!isOpen || !root || typeof window === 'undefined') {
+            return;
+        }
+        const r = root.getBoundingClientRect();
+        const bounds = visibleBounds(root);
+        const want = showGrid ? 460 : 620;
+        const below = bounds.bottom - r.bottom - 12;
+        const above = r.top - bounds.top - 12;
+        const up = below < want && above > below;
+        const room = up ? above : below;
+        setPlacement({
+            up,
+            end: r.left + 380 > bounds.right - 8 && r.right - bounds.left >= 380,
+            maxHeight: room < want ? Math.max(240, Math.floor(room)) : undefined,
+        });
+    }, [isOpen, showGrid]);
+    const pickingInto = picking ? shown.find((l) => l.id === picking.target) : undefined;
+    const SingleMulti = (_a = selectedEntries[0]) === null || _a === void 0 ? void 0 : _a.Component;
+    return (jsxs("div", { ref: rootRef, id: id, "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : testId, className: `ntd-picker${isOpen ? ' ntd-picker--open' : ''}${disabled ? ' ntd-picker--disabled' : ''}${multiSelect ? ' ntd-picker--multi' : ''}${iconOnly ? ' ntd-picker--icon-only' : ''}${className ? ` ${className}` : ''}`, children: [jsxs("button", { type: "button", className: "ntd-picker-trigger", onClick: handleToggle, disabled: disabled, "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-label": triggerName, title: iconOnly ? triggerLabel : undefined, children: [jsx("span", { className: "ntd-picker-trigger-icon", children: !multiSelect && base ? (renderIconStack(shown, resolve, {
+                            baseProps: { ...drawProps, size: triggerIconSize },
+                        })) : multiSelect && selectedEntries.length > 1 ? (jsx("span", { className: "ntd-picker-multi-badge", children: selectedEntries.length })) : SingleMulti ? (jsx(SingleMulti, { ...drawProps, size: triggerIconSize })) : (jsx(NtdGrid, { size: 16, variant: "outline" })) }), !iconOnly && (jsxs(Fragment, { children: [jsx("span", { className: `ntd-picker-trigger-label${hasSelection ? '' : ' ntd-picker-trigger-placeholder'}`, children: triggerLabel }), jsx("span", { className: "ntd-picker-trigger-chevron", children: jsx(Chevron, {}) })] }))] }), name &&
+                (multiSelect ? (values.map((v) => jsx("input", { type: "hidden", name: name, value: v }, v))) : (jsx("input", { type: "hidden", name: name, value: value !== null && value !== void 0 ? value : '' }))), pending && (jsx("span", { ref: serializerRef, className: "ntd-picker-serializer", hidden: true, children: renderIconStack(pending, resolve, {
+                    baseProps: {
+                        ...drawProps,
+                        width: '1em',
+                        height: '1em',
+                        title: labelOf(pending[0].icon),
+                        ...iconHtmlAttributes(pending),
+                    },
+                }) })), isOpen && (jsxs("div", { ref: dropdownRef, className: `ntd-picker-dropdown${showGrid ? '' : ' ntd-picker-dropdown--stack'}${placement.up ? ' ntd-picker-dropdown--up' : ''}${placement.end ? ' ntd-picker-dropdown--end' : ''}`, style: placement.maxHeight ? { maxHeight: placement.maxHeight } : undefined, role: "dialog", "aria-label": t('iconPicker.selectIcon', 'Select icon…'), children: [canStack &&
+                        (picking ? (jsxs("div", { className: "ntd-picker-banner", children: [jsx("button", { type: "button", className: "ntd-picker-back", onClick: () => setPicking(null), "aria-label": t('iconPicker.back', 'Back'), title: t('iconPicker.back', 'Back'), children: jsx(NtdArrowLeft, { size: 14, variant: "outline" }) }), jsx("span", { children: t('iconPicker.pickOverlay', 'Pick an icon to put on {icon}').replace('{icon}', pickingInto ? labelOf(pickingInto.icon) : base ? labelOf(base.icon) : '') })] })) : (jsxs("div", { className: "ntd-picker-views", ref: viewsRef, role: "tablist", "aria-label": t('iconPicker.selectIcon', 'Select icon…'), children: [jsx("button", { type: "button", role: "tab", id: `${panelId}-icons`, "aria-selected": view === 'icons', "aria-controls": `${panelId}-panel`, className: `ntd-picker-view${view === 'icons' ? ' ntd-picker-view--active' : ''}`, onClick: () => setView('icons'), children: t('iconPicker.tabIcon', 'Icon') }), jsxs("button", { type: "button", role: "tab", id: `${panelId}-stack`, "aria-selected": view === 'stack', "aria-controls": `${panelId}-panel`, className: `ntd-picker-view${view === 'stack' ? ' ntd-picker-view--active' : ''}`, onClick: () => setView('stack'), disabled: !base, title: base ? undefined : t('iconPicker.stackNeedsIcon', 'Pick an icon first'), children: [t('iconPicker.tabStack', 'Overlays'), overlays > 0 && jsx("span", { className: "ntd-picker-tab-count", children: overlays })] })] }))), jsxs("div", { className: "ntd-picker-panel", id: `${panelId}-panel`, ...(canStack && !picking
+                            ? {
+                                role: 'tabpanel',
+                                'aria-labelledby': `${panelId}-${view}`,
+                            }
+                            : {}), children: [showGrid && (jsxs(Fragment, { children: [jsxs("div", { className: "ntd-picker-search", children: [jsx("span", { className: "ntd-picker-search-icon", children: jsx(SearchIcon, {}) }), jsx("input", { ref: searchInputRef, type: "text", placeholder: t('iconPicker.searchIcons', 'Search icons…'), value: search, onChange: (e) => setSearch(e.target.value), "aria-label": t('iconPicker.searchIcons2', 'Search icons') })] }), (allCategories.length > 1 || showFavorites || showHistory) && (jsxs("div", { className: "ntd-picker-tabs", ref: tablistRef, role: "tablist", children: [jsx("button", { type: "button", className: `ntd-picker-tab${activeCategory === null ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory(null), role: "tab", "aria-selected": activeCategory === null, children: t('iconPicker.all', 'All') }), showFavorites && (jsxs("button", { type: "button", className: `ntd-picker-tab ntd-picker-tab-special${activeCategory === '__favorites__' ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory('__favorites__'), role: "tab", "aria-selected": activeCategory === '__favorites__', title: t('iconPicker.favorites', 'Favorites'), children: [jsx(StarIcon, { filled: true }), " ", t('iconPicker.favorites', 'Favorites'), favorites.length > 0 && (jsx("span", { className: "ntd-picker-tab-count", children: favorites.length }))] })), showHistory && history.length > 0 && (jsxs("button", { type: "button", className: `ntd-picker-tab ntd-picker-tab-special${activeCategory === '__history__' ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory('__history__'), role: "tab", "aria-selected": activeCategory === '__history__', title: t('iconPicker.recentlyUsed', 'Recently used'), children: [jsx(ClockIcon, {}), " ", t('iconPicker.recent', 'Recent')] })), allCategories.map((cat) => (jsx("button", { type: "button", className: `ntd-picker-tab${activeCategory === cat ? ' ntd-picker-tab--active' : ''}`, onClick: () => setActiveCategory(cat), role: "tab", "aria-selected": activeCategory === cat, children: cat }, cat)))] })), jsx("div", { className: "ntd-picker-grid-wrap", ref: gridWrapRef, role: "listbox", "aria-label": t('iconPicker.icons', 'Icons'), "aria-multiselectable": multiSelect || undefined, children: filtered.length === 0 ? (jsxs("div", { className: "ntd-picker-empty", children: [jsx("div", { className: "ntd-picker-empty-icon", children: jsx(NtdInbox, { size: 28, variant: "outline" }) }), activeCategory === '__favorites__'
+                                                    ? t('iconPicker.noFavoritesYetClickThe', 'No favorites yet. Click the star icon to add.')
+                                                    : activeCategory === '__history__'
+                                                        ? t('iconPicker.noRecentIcons', 'No recent icons.')
+                                                        : t('iconPicker.noIconsFound', 'No icons found')] })) : (jsxs(Fragment, { children: [virtualized && visibleRange.start > 0 && (jsx("div", { style: { height: Math.floor(visibleRange.start / 6) * 48 } })), Array.from(grouped.entries()).map(([category, entries]) => (jsxs("div", { children: [!activeCategory && (jsx("div", { className: "ntd-picker-category-label", children: category })), jsx("div", { className: `ntd-picker-grid${optionDisplayMode === 'icon-name' ? ' ntd-picker-grid--names' : ''}`, children: entries.map((entry) => {
+                                                                const isSelected = !picking && selectedValues.includes(entry.name);
+                                                                const isFavorite = favorites.includes(entry.name);
+                                                                const label = entryLabel(entry);
+                                                                const cell = (jsxs("button", { type: "button", className: `ntd-picker-cell${isSelected ? ' ntd-picker-cell--selected' : ''}${multiSelect ? ' ntd-picker-cell--multi-select' : ''}${enableDragAndDrop ? ' ntd-picker-cell--draggable' : ''}`, onClick: () => handleSelect(entry), "data-name": label, role: "option", "aria-selected": isSelected, "aria-label": label, title: label, draggable: enableDragAndDrop, onDragStart: enableDragAndDrop
+                                                                        ? (e) => handleDragStart(entry, e)
+                                                                        : undefined, onDragEnd: enableDragAndDrop ? (e) => handleDragEnd(entry, e) : undefined, children: [jsx(entry.Component, { ...drawProps, size: gridIconSize }), optionDisplayMode === 'icon-name' && (jsx("span", { className: "ntd-picker-cell-name", children: label })), multiSelect && isSelected && (jsx("span", { className: "ntd-picker-cell-check", children: jsx(CheckIcon, {}) }))] }, entry.name));
+                                                                if (!showFavorites) {
+                                                                    return cell;
+                                                                }
+                                                                // the star beside the cell, not in it — a button in a button is
+                                                                // invalid HTML (1.3.9)
+                                                                const favLabel = isFavorite
+                                                                    ? t('iconPicker.removeFromFavorites', 'Remove from favorites')
+                                                                    : t('iconPicker.addToFavorites', 'Add to favorites');
+                                                                return (jsxs("div", { className: "ntd-picker-cell-wrap", children: [cell, jsx("button", { type: "button", tabIndex: -1, className: `ntd-picker-cell-fav${isFavorite ? ' ntd-picker-cell-fav--active' : ''}`, onClick: (e) => handleFavoriteClick(e, entry.name), "aria-label": `${favLabel}: ${label}`, title: favLabel, children: jsx(StarIcon, { filled: isFavorite }) })] }, entry.name));
+                                                            }) })] }, category))), virtualized && visibleRange.end < filtered.length && (jsx("div", { style: {
+                                                        height: Math.ceil((filtered.length - visibleRange.end) / 6) * 48,
+                                                    } }))] })) })] })), canStack && view === 'stack' && base && (jsx("div", { className: "ntd-picker-stack", hidden: !!picking, children: jsx(NiceIconStacker, { ref: stackerRef, icons: resolve, layers: shown, onLayersChange: commit, onAddClick: (target) => {
+                                        var _a;
+                                        setSearch('');
+                                        setActiveCategory(null);
+                                        setPicking({ target: (_a = target === null || target === void 0 ? void 0 : target.id) !== null && _a !== void 0 ? _a : base.id });
+                                    }, previewProps: drawProps, iconLabel: labelOf, showCode: false, keepBase: true }) }))] }), !picking && (jsxs("div", { className: "ntd-picker-footer", children: [jsx("span", { className: "ntd-picker-count", children: showGrid && (jsxs(Fragment, { children: [(filtered.length === 1
+                                            ? t('iconPicker.iconCountOne', '{count} icon')
+                                            : t('iconPicker.iconCountMany', '{count} icons')).replace('{count}', String(filtered.length)), multiSelect && selectedValues.length > 0 && (jsxs(Fragment, { children: [' ', t('iconPicker.selected', '• {selectedValues} selected').replace('{selectedValues}', String(selectedValues.length))] })), maxSelections && multiSelect && (jsxs(Fragment, { children: [' ', t('iconPicker.max', '(max {maxSelections})').replace('{maxSelections}', String(maxSelections))] }))] })) }), clearable && hasSelection && (jsx("button", { type: "button", className: "ntd-picker-clear", onClick: handleClear, children: multiSelect
                                     ? t('iconPicker.clearAll', 'Clear all')
-                                    : t('iconPicker.clearSelection', 'Clear selection') })), multiSelect && (jsx("button", { type: "button", className: "ntd-picker-done", onClick: () => setIsOpen(false), children: t('iconPicker.done', 'Done') }))] })] }))] }));
+                                    : t('iconPicker.clearSelection', 'Clear selection') })), (multiSelect || view === 'stack') && (jsx("button", { type: "button", className: "ntd-picker-done", onClick: () => setIsOpen(false), children: t('iconPicker.done', 'Done') }))] }))] }))] }));
 });
 
 export { NiceIconPicker };