@adecore/ui 0.35.4 → 0.36.0

package/dist/IconPicker.js

@@ -1,17 +1,19 @@
 import { c as _c } from "react/compiler-runtime";
 import { useId, useLayoutEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
-import { Ban, Search, X } from 'lucide-react';
+import { Ban, ChevronDown, Search, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import { Button } from "./Button.js";
 import { EmptyState } from "./EmptyState.js";
 import { formatNumber } from './format/number.js';
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
 import { cellForKey, escapeClearsSearch, filterSections, isGrouped, sectionsOf, tabStopOf } from './icon-picker.js';
+import { PopoverPopup, PopoverRoot, PopoverTrigger } from "./popover/parts.js";
 import { SectionLabel } from "./SectionLabel.js";
 import { Tooltip } from "./Tooltip.js";
 /* A row of cells is 28 high with a gap of 4. Under a heading of 28 the last row keeps 8 below it; without headings the grid has 6 above as well. */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ROW_HEIGHT = 32;
 const HEADED_EXTRA = 32;
 const BARE_EXTRA = 10;
@@ -25,12 +27,12 @@ const markStuckHeadings = area => {
   }
 };
 /*
- * The mark a thing wears, one of a set of Lucide icons, as a grid under a label. With a search or a
- * height in rows, the search and the grid share one frame. The grid is one tab stop: arrows move the
- * focus and only Enter, Space or a click chooses, since a caller may save every choice at once.
+ * The mark a thing wears, one of a set of Lucide icons, behind a trigger drawn like a field. The
+ * popover holds a search over the grid. The grid is one tab stop: arrows move the focus and only
+ * Enter, Space or a click chooses, since a caller may save every choice at once.
  */
 export function IconPicker(t0) {
-  const $ = _c(48);
+  const $ = _c(76);
   const {
     icons,
     value,
@@ -41,55 +43,358 @@ export function IconPicker(t0) {
     disabled: t2,
     onClear,
     label,
+    hideLabel: t3,
     className,
     ref
   } = t0;
-  let t3;
+  let t4;
   if ($[0] !== icons || $[1] !== t1) {
-    t3 = t1 === undefined ? isGrouped(icons) : t1;
+    t4 = t1 === undefined ? isGrouped(icons) : t1;
     $[0] = icons;
     $[1] = t1;
-    $[2] = t3;
+    $[2] = t4;
   } else {
-    t3 = $[2];
+    t4 = $[2];
   }
-  const searchable = t3;
+  const searchable = t4;
   const disabled = t2 === undefined ? false : t2;
+  const hideLabel = t3 === undefined ? false : t3;
   const {
     t
   } = useTranslation("ui");
   const id = useId();
-  const area = useRef(null);
-  const input = useRef(null);
-  const [query, setQuery] = useState("");
-  const [focused, setFocused] = useState(null);
-  let t4;
-  if ($[3] !== icons) {
-    t4 = isGrouped(icons);
+  const trigger = useRef(null);
+  const [open, setOpen] = useState(false);
+  let sections;
+  let t5;
+  if ($[3] !== icons || $[4] !== value) {
+    sections = sectionsOf(icons);
+    t5 = value === null ? undefined : sections.flatMap(_temp).find(t6 => {
+      const [icon] = t6;
+      return icon === value;
+    })?.[1];
     $[3] = icons;
-    $[4] = t4;
+    $[4] = value;
+    $[5] = sections;
+    $[6] = t5;
   } else {
-    t4 = $[4];
+    sections = $[5];
+    t5 = $[6];
   }
-  const headed = t4;
-  const framed = searchable || rows !== undefined;
-  const sections = sectionsOf(icons);
-  const shown = filterSections(sections, query, keywords);
-  const tabStop = tabStopOf(shown.flatMap(_temp2), focused, value);
-  let t5;
-  if ($[5] !== label || $[6] !== t) {
-    t5 = label ?? t("iconPicker.label");
-    $[5] = label;
-    $[6] = t;
-    $[7] = t5;
+  const glyph = t5;
+  let t6;
+  if ($[7] !== label || $[8] !== t) {
+    t6 = label ?? t("iconPicker.label");
+    $[7] = label;
+    $[8] = t;
+    $[9] = t6;
   } else {
-    t5 = $[7];
+    t6 = $[9];
   }
-  const name_0 = t5;
-  let t6;
+  const name = t6;
+  const clearable = onClear !== undefined && value !== null && !disabled;
   let t7;
-  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-    t6 = () => {
+  if ($[10] !== onValueChange) {
+    t7 = icon_0 => {
+      onValueChange(icon_0);
+      setOpen(false);
+    };
+    $[10] = onValueChange;
+    $[11] = t7;
+  } else {
+    t7 = $[11];
+  }
+  const choose = t7;
+  let t8;
+  if ($[12] !== onClear) {
+    t8 = () => {
+      onClear?.();
+      setOpen(false);
+    };
+    $[12] = onClear;
+    $[13] = t8;
+  } else {
+    t8 = $[13];
+  }
+  const clear = t8;
+  let t9;
+  if ($[14] !== className) {
+    t9 = clsx("flex flex-col gap-1.5", className);
+    $[14] = className;
+    $[15] = t9;
+  } else {
+    t9 = $[15];
+  }
+  const t10 = `${id}-label`;
+  let t11;
+  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+    t11 = /*#__PURE__*/_jsx("div", {});
+    $[16] = t11;
+  } else {
+    t11 = $[16];
+  }
+  const t12 = hideLabel && "sr-only";
+  let t13;
+  if ($[17] !== t12) {
+    t13 = clsx(t12);
+    $[17] = t12;
+    $[18] = t13;
+  } else {
+    t13 = $[18];
+  }
+  let t14;
+  if ($[19] !== name || $[20] !== t10 || $[21] !== t13) {
+    t14 = /*#__PURE__*/_jsx(SectionLabel, {
+      id: t10,
+      render: t11,
+      className: t13,
+      children: name
+    });
+    $[19] = name;
+    $[20] = t10;
+    $[21] = t13;
+    $[22] = t14;
+  } else {
+    t14 = $[22];
+  }
+  const t15 = `${id}-label ${id}-value`;
+  let t16;
+  if ($[23] !== glyph) {
+    t16 = glyph && /*#__PURE__*/_jsx(Icon, {
+      icon: glyph,
+      size: 16,
+      className: "shrink-0 text-text"
+    });
+    $[23] = glyph;
+    $[24] = t16;
+  } else {
+    t16 = $[24];
+  }
+  const t17 = `${id}-value`;
+  const t18 = glyph ? "sr-only" : "text-text-faint";
+  let t19;
+  if ($[25] !== t18) {
+    t19 = clsx("min-w-0 truncate", t18);
+    $[25] = t18;
+    $[26] = t19;
+  } else {
+    t19 = $[26];
+  }
+  let t20;
+  if ($[27] !== t || $[28] !== value) {
+    t20 = value ?? t("iconPicker.placeholder");
+    $[27] = t;
+    $[28] = value;
+    $[29] = t20;
+  } else {
+    t20 = $[29];
+  }
+  let t21;
+  if ($[30] !== t17 || $[31] !== t19 || $[32] !== t20) {
+    t21 = /*#__PURE__*/_jsx("span", {
+      id: t17,
+      className: t19,
+      children: t20
+    });
+    $[30] = t17;
+    $[31] = t19;
+    $[32] = t20;
+    $[33] = t21;
+  } else {
+    t21 = $[33];
+  }
+  let t22;
+  if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
+    t22 = /*#__PURE__*/_jsx(Icon, {
+      icon: ChevronDown,
+      size: 14,
+      className: "shrink-0 text-text-faint"
+    });
+    $[34] = t22;
+  } else {
+    t22 = $[34];
+  }
+  let t23;
+  if ($[35] !== disabled || $[36] !== t15 || $[37] !== t16 || $[38] !== t21) {
+    t23 = /*#__PURE__*/_jsxs(PopoverTrigger, {
+      ref: trigger,
+      disabled: disabled,
+      "aria-labelledby": t15,
+      className: "field flex w-auto min-w-0 items-center gap-2 text-left hover:bg-surface-hover data-disabled:cursor-default data-disabled:opacity-50 data-disabled:hover:bg-field data-[popup-open]:bg-surface-hover",
+      children: [t16, t21, t22]
+    });
+    $[35] = disabled;
+    $[36] = t15;
+    $[37] = t16;
+    $[38] = t21;
+    $[39] = t23;
+  } else {
+    t23 = $[39];
+  }
+  let t24;
+  if ($[40] !== clearable || $[41] !== onClear || $[42] !== t) {
+    t24 = clearable && /*#__PURE__*/_jsx(Tooltip, {
+      label: t("iconPicker.none"),
+      children: /*#__PURE__*/_jsx(Button, {
+        variant: "secondary",
+        className: "w-8 shrink-0 px-0!",
+        "aria-label": t("iconPicker.none"),
+        onClick: () => {
+          onClear();
+          trigger.current?.focus();
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: X,
+          size: 16
+        })
+      })
+    });
+    $[40] = clearable;
+    $[41] = onClear;
+    $[42] = t;
+    $[43] = t24;
+  } else {
+    t24 = $[43];
+  }
+  let t25;
+  if ($[44] !== t23 || $[45] !== t24) {
+    t25 = /*#__PURE__*/_jsxs("div", {
+      className: "flex gap-1.5",
+      children: [t23, t24]
+    });
+    $[44] = t23;
+    $[45] = t24;
+    $[46] = t25;
+  } else {
+    t25 = $[46];
+  }
+  let t26;
+  if ($[47] !== id) {
+    t26 = () => document.getElementById(`${id}-search`) ?? document.getElementById(`${id}-grid`)?.querySelector("[tabindex=\"0\"]") ?? false;
+    $[47] = id;
+    $[48] = t26;
+  } else {
+    t26 = $[48];
+  }
+  let t27;
+  if ($[49] !== icons) {
+    t27 = isGrouped(icons);
+    $[49] = icons;
+    $[50] = t27;
+  } else {
+    t27 = $[50];
+  }
+  const t28 = onClear && clear;
+  let t29;
+  if ($[51] !== choose || $[52] !== disabled || $[53] !== id || $[54] !== keywords || $[55] !== name || $[56] !== rows || $[57] !== searchable || $[58] !== sections || $[59] !== t27 || $[60] !== t28 || $[61] !== value) {
+    t29 = /*#__PURE__*/_jsx(IconPickerPanel, {
+      id: id,
+      name: name,
+      sections: sections,
+      headed: t27,
+      value: value,
+      keywords: keywords,
+      searchable: searchable,
+      rows: rows,
+      disabled: disabled,
+      onChoose: choose,
+      onClear: t28
+    });
+    $[51] = choose;
+    $[52] = disabled;
+    $[53] = id;
+    $[54] = keywords;
+    $[55] = name;
+    $[56] = rows;
+    $[57] = searchable;
+    $[58] = sections;
+    $[59] = t27;
+    $[60] = t28;
+    $[61] = value;
+    $[62] = t29;
+  } else {
+    t29 = $[62];
+  }
+  let t30;
+  if ($[63] !== name || $[64] !== t26 || $[65] !== t29) {
+    t30 = /*#__PURE__*/_jsx(PopoverPopup, {
+      variant: "picker",
+      "aria-label": name,
+      className: "w-90",
+      initialFocus: t26,
+      finalFocus: trigger,
+      children: t29
+    });
+    $[63] = name;
+    $[64] = t26;
+    $[65] = t29;
+    $[66] = t30;
+  } else {
+    t30 = $[66];
+  }
+  let t31;
+  if ($[67] !== open || $[68] !== t25 || $[69] !== t30) {
+    t31 = /*#__PURE__*/_jsxs(PopoverRoot, {
+      open: open,
+      onOpenChange: setOpen,
+      children: [t25, t30]
+    });
+    $[67] = open;
+    $[68] = t25;
+    $[69] = t30;
+    $[70] = t31;
+  } else {
+    t31 = $[70];
+  }
+  let t32;
+  if ($[71] !== ref || $[72] !== t14 || $[73] !== t31 || $[74] !== t9) {
+    t32 = /*#__PURE__*/_jsxs("div", {
+      ref: ref,
+      className: t9,
+      children: [t14, t31]
+    });
+    $[71] = ref;
+    $[72] = t14;
+    $[73] = t31;
+    $[74] = t9;
+    $[75] = t32;
+  } else {
+    t32 = $[75];
+  }
+  return t32;
+}
+/* What the popover holds. It mounts on every open, so a search and the focus start over each time. */
+function _temp(section) {
+  return section.icons;
+}
+function IconPickerPanel(t0) {
+  const $ = _c(34);
+  const {
+    id,
+    name,
+    sections,
+    headed,
+    value,
+    keywords,
+    searchable,
+    rows,
+    disabled,
+    onChoose,
+    onClear
+  } = t0;
+  const {
+    t
+  } = useTranslation("ui");
+  const input = useRef(null);
+  const area = useRef(null);
+  const [query, setQuery] = useState("");
+  const [focused, setFocused] = useState(null);
+  const shown = filterSections(sections, query, keywords);
+  const tabStop = tabStopOf(shown.flatMap(_temp3), focused, value);
+  let t1;
+  let t2;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
       const element = area.current;
       const chosen = element?.querySelector("[aria-checked=\"true\"]");
       if (!element || !chosen || element.scrollHeight <= element.clientHeight) {
@@ -98,81 +403,137 @@ export function IconPicker(t0) {
       const heading = element.querySelector("[data-icon-heading]")?.offsetHeight ?? 0;
       element.scrollTop = Math.round(chosen.offsetTop - heading - (element.clientHeight - heading - chosen.offsetHeight) / 2);
     };
-    t7 = [];
-    $[8] = t6;
-    $[9] = t7;
+    t2 = [];
+    $[0] = t1;
+    $[1] = t2;
   } else {
-    t6 = $[8];
-    t7 = $[9];
+    t1 = $[0];
+    t2 = $[1];
   }
-  useLayoutEffect(t6, t7);
-  let t8;
-  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-    t8 = next => {
+  useLayoutEffect(t1, t2);
+  let t3;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = next => {
       setQuery(next);
       if (area.current) {
         area.current.scrollTop = 0;
       }
     };
-    $[10] = t8;
+    $[2] = t3;
   } else {
-    t8 = $[10];
+    t3 = $[2];
   }
-  const search = t8;
-  const moveFocus = _temp4;
-  const t9 = `${id}-grid`;
-  const t10 = "radiogroup";
-  const t11 = framed && "relative overflow-y-auto overscroll-contain";
-  const t12 = framed && (headed ? "scroll-pt-7" : "px-1.5 pt-1.5 pb-2");
-  let t13;
-  if ($[11] !== t11 || $[12] !== t12) {
-    t13 = clsx(t11, t12);
-    $[11] = t11;
-    $[12] = t12;
-    $[13] = t13;
+  const search = t3;
+  let t4;
+  if ($[3] !== query) {
+    t4 = event => {
+      if (!escapeClearsSearch(event.key, query)) {
+        return;
+      }
+      event.stopPropagation();
+      event.preventDefault();
+      search("");
+      input.current?.focus();
+    };
+    $[3] = query;
+    $[4] = t4;
   } else {
-    t13 = $[13];
+    t4 = $[4];
   }
-  let t14;
-  if ($[14] !== headed || $[15] !== rows) {
-    t14 = rows === undefined ? undefined : {
+  const clearSearchFirst = t4;
+  const moveFocus = _temp5;
+  let t5;
+  if ($[5] !== disabled || $[6] !== id || $[7] !== query || $[8] !== searchable || $[9] !== t) {
+    t5 = searchable && /*#__PURE__*/_jsxs("div", {
+      className: "flex h-9 items-center gap-2 border-b border-border pr-1 pl-2.5",
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: Search,
+        size: 14,
+        className: "shrink-0 text-text-faint"
+      }), /*#__PURE__*/_jsx("input", {
+        ref: input,
+        id: `${id}-search`,
+        type: "text",
+        value: query,
+        placeholder: t("iconPicker.search"),
+        "aria-label": t("iconPicker.search"),
+        "aria-controls": `${id}-grid`,
+        spellCheck: false,
+        autoComplete: "off",
+        disabled: disabled,
+        className: "h-full min-w-0 flex-1 bg-transparent text-sm text-text outline-none placeholder:text-text-faint",
+        onChange: event_1 => search(event_1.target.value)
+      }), query && /*#__PURE__*/_jsx(IconButton, {
+        icon: X,
+        size: "sm",
+        label: t("iconPicker.clear"),
+        tooltip: false,
+        onClick: () => {
+          search("");
+          input.current?.focus();
+        }
+      })]
+    });
+    $[5] = disabled;
+    $[6] = id;
+    $[7] = query;
+    $[8] = searchable;
+    $[9] = t;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  const t6 = `${id}-grid`;
+  const t7 = "radiogroup";
+  const t8 = headed ? "scroll-pt-7" : "px-1.5 pt-1.5 pb-2";
+  let t9;
+  if ($[11] !== t8) {
+    t9 = clsx("relative overflow-y-auto overscroll-contain", t8);
+    $[11] = t8;
+    $[12] = t9;
+  } else {
+    t9 = $[12];
+  }
+  let t10;
+  if ($[13] !== headed || $[14] !== rows) {
+    t10 = rows === undefined ? undefined : {
       height: rows * ROW_HEIGHT + (headed ? HEADED_EXTRA : BARE_EXTRA)
     };
-    $[14] = headed;
-    $[15] = rows;
-    $[16] = t14;
+    $[13] = headed;
+    $[14] = rows;
+    $[15] = t10;
   } else {
-    t14 = $[16];
+    t10 = $[15];
   }
-  const t15 = _temp5;
-  const t16 = shown.length === 0 && query.trim() !== "" ? /*#__PURE__*/_jsx(EmptyState, {
+  const t11 = _temp6;
+  const t12 = shown.length === 0 && query.trim() !== "" ? /*#__PURE__*/_jsx(EmptyState, {
     className: "h-full",
     children: t("iconPicker.noMatch", {
       query: query.trim()
     })
   }) : shown.map((section_0, index) => {
     const cells_0 = /*#__PURE__*/_jsx("div", {
-      className: clsx("grid grid-cols-[repeat(auto-fill,minmax(28px,1fr))] gap-1", framed && section_0.label !== null && "px-1.5 pb-2"),
-      children: section_0.icons.map(t17 => {
-        const [icon, glyph] = t17;
+      className: clsx("grid grid-cols-[repeat(auto-fill,minmax(28px,1fr))] gap-1", section_0.label !== null && "px-1.5 pb-2"),
+      children: section_0.icons.map(t13 => {
+        const [icon_0, cellGlyph] = t13;
         return /*#__PURE__*/_jsx(Tooltip, {
-          label: icon,
+          label: icon_0,
           name: true,
           children: /*#__PURE__*/_jsx("button", {
             type: "button",
             role: "radio",
-            "aria-checked": value === icon,
-            tabIndex: icon === tabStop ? 0 : -1,
+            "aria-checked": value === icon_0,
+            tabIndex: icon_0 === tabStop ? 0 : -1,
             disabled: disabled,
-            className: clsx("flex h-7 items-center justify-center rounded-md hover:bg-surface-hover disabled:opacity-50", value === icon ? "bg-surface-active text-text" : "text-text-muted"),
-            onFocus: () => setFocused(icon),
-            onClick: () => onValueChange(icon),
+            className: clsx("flex h-7 items-center justify-center rounded-md hover:bg-surface-hover disabled:opacity-50", value === icon_0 ? "bg-surface-active text-text" : "text-text-muted"),
+            onFocus: () => setFocused(icon_0),
+            onClick: () => onChoose(icon_0),
             children: /*#__PURE__*/_jsx(Icon, {
-              icon: glyph,
+              icon: cellGlyph,
               size: 16
             })
           })
-        }, icon);
+        }, icon_0);
       })
     }, section_0.id);
     if (section_0.label === null) {
@@ -185,7 +546,7 @@ export function IconPicker(t0) {
       children: [/*#__PURE__*/_jsxs(SectionLabel, {
         render: /*#__PURE__*/_jsx("div", {}),
         "data-icon-heading": "",
-        className: clsx("flex h-7 items-center gap-2", framed ? "sticky top-0 z-10 bg-surface px-2.5 data-stuck:shadow-[0_1px_0_var(--border)]" : "mt-1"),
+        className: "sticky top-0 z-10 flex h-7 items-center gap-2 bg-surface px-2.5 data-stuck:shadow-[0_1px_0_var(--border)] dark:bg-surface-hover",
         children: [/*#__PURE__*/_jsx("span", {
           id: headingId,
           className: "truncate",
@@ -197,168 +558,94 @@ export function IconPicker(t0) {
       }), cells_0]
     }, section_0.id);
   });
-  let t18;
-  if ($[17] !== moveFocus || $[18] !== name_0 || $[19] !== t13 || $[20] !== t14 || $[21] !== t15 || $[22] !== t16 || $[23] !== t9) {
-    t18 = /*#__PURE__*/_jsx("div", {
+  let t14;
+  if ($[16] !== moveFocus || $[17] !== name || $[18] !== t10 || $[19] !== t11 || $[20] !== t12 || $[21] !== t6 || $[22] !== t9) {
+    t14 = /*#__PURE__*/_jsx("div", {
       ref: area,
-      id: t9,
-      role: t10,
-      "aria-label": name_0,
-      className: t13,
-      style: t14,
-      onScroll: t15,
+      id: t6,
+      role: t7,
+      "aria-label": name,
+      className: t9,
+      style: t10,
+      onScroll: t11,
       onKeyDown: moveFocus,
-      children: t16
+      children: t12
     });
-    $[17] = moveFocus;
-    $[18] = name_0;
-    $[19] = t13;
-    $[20] = t14;
-    $[21] = t15;
-    $[22] = t16;
-    $[23] = t9;
-    $[24] = t18;
-  } else {
-    t18 = $[24];
-  }
-  const grid = t18;
-  let t19;
-  if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
-    t19 = /*#__PURE__*/_jsx("div", {});
-    $[25] = t19;
+    $[16] = moveFocus;
+    $[17] = name;
+    $[18] = t10;
+    $[19] = t11;
+    $[20] = t12;
+    $[21] = t6;
+    $[22] = t9;
+    $[23] = t14;
   } else {
-    t19 = $[25];
+    t14 = $[23];
   }
-  let t20;
-  if ($[26] !== disabled || $[27] !== onClear || $[28] !== t || $[29] !== value) {
-    t20 = onClear && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx("span", {
-        className: "grow"
-      }), /*#__PURE__*/_jsx(IconButton, {
-        icon: Ban,
+  let t15;
+  if ($[24] !== disabled || $[25] !== onClear || $[26] !== t || $[27] !== value) {
+    t15 = onClear && /*#__PURE__*/_jsx("div", {
+      className: "flex border-t border-border p-1",
+      children: /*#__PURE__*/_jsxs(Button, {
         size: "sm",
-        label: t("iconPicker.none"),
-        className: "-my-1",
         disabled: disabled || value === null,
-        onClick: onClear
-      })]
-    });
-    $[26] = disabled;
-    $[27] = onClear;
-    $[28] = t;
-    $[29] = value;
-    $[30] = t20;
-  } else {
-    t20 = $[30];
-  }
-  let t21;
-  if ($[31] !== name_0 || $[32] !== t20) {
-    t21 = /*#__PURE__*/_jsxs(SectionLabel, {
-      render: t19,
-      className: "mb-1.5 flex items-center gap-2",
-      children: [name_0, t20]
+        onClick: onClear,
+        children: [/*#__PURE__*/_jsx(Icon, {
+          icon: Ban,
+          size: 12
+        }), t("iconPicker.none")]
+      })
     });
-    $[31] = name_0;
-    $[32] = t20;
-    $[33] = t21;
+    $[24] = disabled;
+    $[25] = onClear;
+    $[26] = t;
+    $[27] = value;
+    $[28] = t15;
   } else {
-    t21 = $[33];
+    t15 = $[28];
   }
-  let t22;
-  if ($[34] !== disabled || $[35] !== framed || $[36] !== grid || $[37] !== id || $[38] !== query || $[39] !== search || $[40] !== searchable || $[41] !== t) {
-    t22 = framed ? /*#__PURE__*/_jsxs("div", {
-      className: "field h-auto overflow-hidden p-0 has-[input:focus-visible]:outline-2 has-[input:focus-visible]:-outline-offset-1 has-[input:focus-visible]:outline-accent",
-      children: [searchable && /*#__PURE__*/_jsxs("div", {
-        className: "flex h-8 items-center gap-2 border-b border-border pr-1 pl-2.5",
-        children: [/*#__PURE__*/_jsx(Icon, {
-          icon: Search,
-          size: 14,
-          className: "shrink-0 text-text-faint"
-        }), /*#__PURE__*/_jsx("input", {
-          ref: input,
-          type: "text",
-          value: query,
-          placeholder: t("iconPicker.search"),
-          "aria-label": t("iconPicker.search"),
-          "aria-controls": `${id}-grid`,
-          spellCheck: false,
-          autoComplete: "off",
-          disabled: disabled,
-          className: "h-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-text-faint",
-          onChange: event_1 => search(event_1.target.value),
-          onKeyDown: event_2 => {
-            if (escapeClearsSearch(event_2.key, query)) {
-              event_2.stopPropagation();
-              search("");
-            }
-          }
-        }), query && /*#__PURE__*/_jsx(IconButton, {
-          icon: X,
-          size: "sm",
-          label: t("iconPicker.clear"),
-          tooltip: false,
-          onClick: () => {
-            search("");
-            input.current?.focus();
-          }
-        })]
-      }), grid]
-    }) : grid;
-    $[34] = disabled;
-    $[35] = framed;
-    $[36] = grid;
-    $[37] = id;
-    $[38] = query;
-    $[39] = search;
-    $[40] = searchable;
-    $[41] = t;
-    $[42] = t22;
-  } else {
-    t22 = $[42];
-  }
-  let t23;
-  if ($[43] !== className || $[44] !== ref || $[45] !== t21 || $[46] !== t22) {
-    t23 = /*#__PURE__*/_jsxs("div", {
-      ref: ref,
-      className: className,
-      children: [t21, t22]
+  let t16;
+  if ($[29] !== clearSearchFirst || $[30] !== t14 || $[31] !== t15 || $[32] !== t5) {
+    t16 = /*#__PURE__*/_jsxs("div", {
+      onKeyDown: clearSearchFirst,
+      children: [t5, t14, t15]
     });
-    $[43] = className;
-    $[44] = ref;
-    $[45] = t21;
-    $[46] = t22;
-    $[47] = t23;
+    $[29] = clearSearchFirst;
+    $[30] = t14;
+    $[31] = t15;
+    $[32] = t5;
+    $[33] = t16;
   } else {
-    t23 = $[47];
+    t16 = $[33];
   }
-  return t23;
+  return t16;
 }
-function _temp5(event_0) {
-  return markStuckHeadings(event_0.currentTarget);
+function _temp6(event_2) {
+  return markStuckHeadings(event_2.currentTarget);
 }
-function _temp4(event) {
-  if (event.metaKey || event.ctrlKey || event.altKey) {
+function _temp5(event_0) {
+  if (event_0.metaKey || event_0.ctrlKey || event_0.altKey) {
     return;
   }
-  const cells = [...event.currentTarget.querySelectorAll("[role=\"radio\"]")];
-  const from = cells.indexOf(event.target);
+  const cells = [...event_0.currentTarget.querySelectorAll("[role=\"radio\"]")];
+  const from = cells.indexOf(event_0.target);
   if (from === -1) {
     return;
   }
-  const to = cellForKey(event.key, cells.map(_temp3), from);
+  const to = cellForKey(event_0.key, cells.map(_temp4), from);
   if (to === null) {
     return;
   }
-  event.preventDefault();
+  event_0.preventDefault();
   cells[to]?.focus();
 }
-function _temp3(cell) {
+function _temp4(cell) {
   return cell.getBoundingClientRect();
 }
-function _temp2(section) {
-  return section.icons.map(_temp);
+function _temp3(section) {
+  return section.icons.map(_temp2);
 }
-function _temp(t0) {
-  const [name] = t0;
-  return name;
+function _temp2(t0) {
+  const [icon] = t0;
+  return icon;
 }