@nmorph/nmorph-ui-kit 2.2.44 → 2.2.45

package/dist/components/data/nmorph-emoji-picker/NmorphEmojiPicker.vue.js

@@ -1,23 +1,28 @@
 import './NmorphEmojiPicker.css';
-import { defineComponent as Le, ref as C, computed as i, watch as Q, openBlock as c, createElementBlock as u, normalizeStyle as xe, normalizeClass as ae, createElementVNode as y, Fragment as z, renderList as B, toDisplayString as E, createVNode as _, unref as k, withCtx as q, withDirectives as Ce, vModelText as Ee, createCommentVNode as J, nextTick as we } from "vue";
-import { useModifiers as Se } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as Ae } from "../../../utils/common.js";
-import D from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import { defineComponent as we, ref as S, computed as s, watch as Q, openBlock as c, createElementBlock as d, normalizeStyle as Se, normalizeClass as J, createBlock as le, unref as f, withModifiers as Ce, withCtx as v, createVNode as k, createElementVNode as L, toDisplayString as E, createCommentVNode as W, Fragment as O, renderList as $, nextTick as Ae } from "vue";
+import { useModifiers as Ke } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as Me } from "../../../utils/common.js";
+import Ne from "../../form/nmorph-checkbox/NmorphCheckbox.vue.js";
+/* empty css                                             */
+import X from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 /* empty css                                      */
-import Ke from "../../../assets/icons/search.svg.js";
-import Ne from "../../../assets/icons/chevron-up.svg.js";
-import Me from "../../../assets/icons/smile.svg.js";
-import Ie from "../../../assets/icons/chevron-down.svg.js";
-const Oe = ["lang"], ze = ["aria-label"], Be = { class: "nmorph-emoji-picker__quick-list" }, qe = ["aria-label", "title", "disabled", "onClick"], De = ["aria-label", "title", "disabled"], Ve = {
-  key: 1,
+import ze from "../../../assets/icons/burger.svg.js";
+import Y from "../../basic/nmorph-scroll/NmorphScroll.vue.js";
+/* empty css                                          */
+import Be from "../../form/nmorph-text-input/NmorphTextInput.vue.js";
+/* empty css                                                */
+import Ie from "../../../assets/icons/search.svg.js";
+import Oe from "../../../assets/icons/smile.svg.js";
+const $e = ["lang"], Ve = { class: "nmorph-emoji-picker__button-label" }, qe = ["aria-label"], De = ["aria-label", "title", "disabled", "onClick"], Te = {
+  key: 2,
   class: "nmorph-emoji-picker__panel"
-}, Te = { class: "nmorph-emoji-picker__toolbar" }, $e = ["aria-label"], Fe = ["placeholder", "aria-label", "disabled"], Re = ["aria-label", "title", "disabled"], He = ["aria-label"], Pe = ["aria-selected", "disabled", "onClick"], Ue = ["aria-label"], Qe = {
+}, Fe = { class: "nmorph-emoji-picker__toolbar" }, Re = ["aria-selected", "disabled", "onClick"], He = ["aria-label"], Pe = {
   key: 0,
   class: "nmorph-emoji-picker__section-title"
-}, Je = { class: "nmorph-emoji-picker__grid" }, We = ["aria-label", "title", "disabled", "onFocus", "onClick"], Xe = { class: "nmorph-emoji-picker__emoji-symbol" }, Ye = {
+}, Ue = { class: "nmorph-emoji-picker__grid" }, Qe = ["aria-label", "title", "disabled", "onFocus", "onClick"], Je = { class: "nmorph-emoji-picker__emoji-symbol" }, We = {
   key: 1,
   class: "nmorph-emoji-picker__empty"
-}, st = /* @__PURE__ */ Le({
+}, uo = /* @__PURE__ */ we({
   __name: "NmorphEmojiPicker",
   props: {
     language: { default: "en" },
@@ -31,8 +36,8 @@ const Oe = ["lang"], ze = ["aria-label"], Be = { class: "nmorph-emoji-picker__qu
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["select", "expand", "collapse"],
-  setup(ne, { emit: le }) {
-    const l = ne, V = le, T = C(""), L = C(l.initialExpanded), h = C(""), w = C(0), W = C(null), se = {
+  setup(ie, { emit: se }) {
+    const l = ie, V = se, q = S(""), b = S(l.initialExpanded), y = S(""), C = S(0), Z = S(null), ce = {
       searchPlaceholder: "Search emoji",
       searchLabel: "Search emoji",
       quickLabel: "Frequent emoji",
@@ -41,331 +46,360 @@ const Oe = ["lang"], ze = ["aria-label"], Be = { class: "nmorph-emoji-picker__qu
       noResults: "No emoji found",
       categoryLabel: "Emoji categories",
       resultsLabel: "Emoji results"
-    }, g = (e) => !!e && typeof e == "object" && !Array.isArray(e), X = (e) => e.trim().toLocaleLowerCase(l.language || void 0), f = (e, t) => {
-      for (const o of t) {
-        const r = e[o];
-        if (typeof r == "string" && r.trim()) return r.trim();
-        if (typeof r == "number") return String(r);
+    }, _ = (e) => !!e && typeof e == "object" && !Array.isArray(e), G = (e) => e.trim().toLocaleLowerCase(l.language || void 0), g = (e, o) => {
+      for (const r of o) {
+        const t = e[r];
+        if (typeof t == "string" && t.trim()) return t.trim();
+        if (typeof t == "number") return String(t);
       }
       return "";
-    }, S = (e) => Array.isArray(e) ? e.flatMap(S) : typeof e == "string" ? e.trim() ? [e.trim()] : [] : typeof e == "number" ? [String(e)] : g(e) ? Object.values(e).flatMap(S) : [], A = (e, t, o) => {
-      for (const r of t) {
-        const n = e[r], a = typeof n == "number" ? n : Number(n);
+    }, A = (e) => Array.isArray(e) ? e.flatMap(A) : typeof e == "string" ? e.trim() ? [e.trim()] : [] : typeof e == "number" ? [String(e)] : _(e) ? Object.values(e).flatMap(A) : [], K = (e, o, r) => {
+      for (const t of o) {
+        const n = e[t], a = typeof n == "number" ? n : Number(n);
         if (Number.isFinite(a)) return a;
       }
-      return o;
-    }, Y = (e, t) => {
-      for (const o of t) {
-        const r = e[o];
-        if (Array.isArray(r)) return r;
+      return r;
+    }, ee = (e, o) => {
+      for (const r of o) {
+        const t = e[r];
+        if (Array.isArray(t)) return t;
       }
-    }, K = (e) => {
+    }, M = (e) => {
       if (typeof e == "string") return e.trim();
-      if (!g(e)) return "";
-      const t = f(e, ["emoji", "native", "char", "unicode", "value"]);
-      if (t) return t;
-      const o = Y(e, ["skinToneVariants", "skins", "variants"])?.[0];
-      return K(o);
-    }, ie = (e) => !!K(e), ce = (e) => Array.isArray(e) ? e.map((t) => {
-      const o = K(t);
-      if (!o) return null;
-      if (typeof t == "string") return { emoji: o };
-      const r = g(t) ? t : {};
+      if (!_(e)) return "";
+      const o = g(e, ["emoji", "native", "char", "unicode", "value"]);
+      if (o) return o;
+      const r = ee(e, ["skinToneVariants", "skins", "variants"])?.[0];
+      return M(r);
+    }, ue = (e) => !!M(e), pe = (e) => Array.isArray(e) ? e.map((o) => {
+      const r = M(o);
+      if (!r) return null;
+      if (typeof o == "string") return { emoji: r };
+      const t = _(o) ? o : {};
       return {
-        emoji: o,
-        annotation: f(r, ["annotation", "label", "name", "description"]),
-        tags: S(r.tags || r.keywords || r.aliases || r.shortcodes),
-        tone: f(r, ["tone", "skinTone", "skin_tone"])
+        emoji: r,
+        annotation: g(t, ["annotation", "label", "name", "description"]),
+        tags: A(t.tags || t.keywords || t.aliases || t.shortcodes),
+        tone: g(t, ["tone", "skinTone", "skin_tone"])
       };
-    }).filter((t) => !!t) : [], ue = (e, t, o) => {
-      if (!g(e))
+    }).filter((o) => !!o) : [], de = (e, o, r) => {
+      if (!_(e))
         return {
-          key: t,
-          label: t,
-          sort: o
+          key: o,
+          label: o,
+          sort: r
         };
-      const r = f(e, ["group", "category", "groupName", "categoryName"]) || t, n = f(e, ["groupLabel", "categoryLabel"]) || r, a = A(e, ["groupOrder", "categoryOrder"], Number(r));
+      const t = g(e, ["group", "category", "groupName", "categoryName"]) || o, n = g(e, ["groupLabel", "categoryLabel"]) || t, a = K(e, ["groupOrder", "categoryOrder"], Number(t));
       return {
-        key: r,
+        key: t,
         label: n,
-        sort: Number.isFinite(a) ? a : o
+        sort: Number.isFinite(a) ? a : r
       };
-    }, de = (e, t, o, r, n) => {
-      const a = K(e);
+    }, me = (e, o, r, t, n) => {
+      const a = M(e);
       if (!a) return null;
-      const s = g(e) ? e : {}, d = ue(s, t, r), m = f(s, ["annotation", "label", "name", "description"]) || a, b = S(s.tags || s.keywords || s.aliases || s.shortcodes), M = A(s, ["order", "sortOrder", "sort_order", "index"], n), U = s.skinToneVariants || s.skins || s.variants, I = ce(U).filter((O) => O.emoji !== a), x = d.key || t, re = d.label || o || x, je = X(
-        [a, m, re, ...b, ...I.map((O) => O.annotation || O.emoji)].filter(Boolean).join(" ")
+      const i = _(e) ? e : {}, p = de(i, o, t), m = g(i, ["annotation", "label", "name", "description"]) || a, h = A(i.tags || i.keywords || i.aliases || i.shortcodes), z = K(i, ["order", "sortOrder", "sort_order", "index"], n), U = i.skinToneVariants || i.skins || i.variants, B = pe(U).filter((I) => I.emoji !== a), w = p.key || o, ne = p.label || r || w, Ee = G(
+        [a, m, ne, ...h, ...B.map((I) => I.annotation || I.emoji)].filter(Boolean).join(" ")
       );
       return {
-        key: `${x}-${M}-${a}`,
+        key: `${w}-${z}-${a}`,
         emoji: a,
         annotation: m,
-        tags: b,
-        groupKey: x,
-        groupLabel: re,
-        groupSort: d.sort,
-        order: M,
-        skinToneVariants: I,
-        searchText: je
+        tags: h,
+        groupKey: w,
+        groupLabel: ne,
+        groupSort: p.sort,
+        order: z,
+        skinToneVariants: B,
+        searchText: Ee
       };
-    }, $ = (e) => {
-      if (!(!g(e) || ie(e)))
-        return Y(e, ["emojis", "items", "children", "data"]);
-    }, pe = (e) => {
-      const t = [], o = (n, a = "emoji", s = a, d = 0, m = t.length) => {
-        const b = de(
+    }, D = (e) => {
+      if (!(!_(e) || ue(e)))
+        return ee(e, ["emojis", "items", "children", "data"]);
+    }, he = (e) => {
+      const o = [], r = (n, a = "emoji", i = a, p = 0, m = o.length) => {
+        const h = me(
           n,
           a,
-          s,
-          d,
+          i,
+          p,
           m
         );
-        b && t.push(b);
-      }, r = (n, a, s) => {
-        const d = $(n);
-        if (!d) {
-          o(n, "emoji", "emoji", 0, s);
+        h && o.push(h);
+      }, t = (n, a, i) => {
+        const p = D(n);
+        if (!p) {
+          r(n, "emoji", "emoji", 0, i);
           return;
         }
-        const m = g(n) ? n : {}, b = f(m, ["group", "category", "name", "label"]) || a, M = f(m, ["label", "name", "title", "groupLabel", "categoryLabel"]) || b, U = A(m, ["order", "groupOrder", "categoryOrder"], s);
-        d.forEach((I, x) => o(I, b, M, U, x));
+        const m = _(n) ? n : {}, h = g(m, ["group", "category", "name", "label"]) || a, z = g(m, ["label", "name", "title", "groupLabel", "categoryLabel"]) || h, U = K(m, ["order", "groupOrder", "categoryOrder"], i);
+        p.forEach((B, w) => r(B, h, z, U, w));
       };
       if (Array.isArray(e))
         e.forEach((n, a) => {
-          $(n) ? r(n, `group-${a + 1}`, a) : o(n, "emoji", "emoji", 0, a);
+          D(n) ? t(n, `group-${a + 1}`, a) : r(n, "emoji", "emoji", 0, a);
         });
-      else if (g(e)) {
-        const n = $(e);
+      else if (_(e)) {
+        const n = D(e);
         if (n) {
-          const a = f(e, ["group", "category", "name", "label"]) || "emoji", s = f(e, ["label", "name", "title", "groupLabel", "categoryLabel"]) || a, d = A(e, ["order", "groupOrder", "categoryOrder"], 0);
-          n.forEach((m, b) => o(m, a, s, d, b));
+          const a = g(e, ["group", "category", "name", "label"]) || "emoji", i = g(e, ["label", "name", "title", "groupLabel", "categoryLabel"]) || a, p = K(e, ["order", "groupOrder", "categoryOrder"], 0);
+          n.forEach((m, h) => r(m, a, i, p, h));
         } else
-          Object.entries(e).forEach(([a, s], d) => {
-            Array.isArray(s) ? s.forEach((m, b) => o(m, a, a, d, b)) : r(s, a, d);
+          Object.entries(e).forEach(([a, i], p) => {
+            Array.isArray(i) ? i.forEach((m, h) => r(m, a, a, p, h)) : t(i, a, p);
           });
       }
-      return t.sort((n, a) => n.groupSort !== a.groupSort ? n.groupSort - a.groupSort : n.order - a.order);
-    }, p = i(() => ({
-      ...se,
+      return o.sort((n, a) => n.groupSort !== a.groupSort ? n.groupSort - a.groupSort : n.order - a.order);
+    }, u = s(() => ({
+      ...ce,
       ...l.i18n
-    })), Z = i(() => ({
+    })), oe = s(() => ({
       ...l.i18n?.categories || {},
       ...l.i18n?.categoryLabels || {}
-    })), v = i(() => pe(l.dataSource)), me = i(() => {
+    })), j = s(() => he(l.dataSource)), be = s(() => {
       const e = /* @__PURE__ */ new Map();
-      return v.value.forEach((t) => e.set(t.emoji, t.annotation || t.emoji)), e;
-    }), F = i(() => Array.from(new Set(l.quickList.map((e) => e.trim()).filter(Boolean)))), G = i(() => !L.value && F.value.length > 0), j = i(() => X(T.value)), N = i(() => {
+      return j.value.forEach((o) => e.set(o.emoji, o.annotation || o.emoji)), e;
+    }), T = s(() => Array.from(new Set(l.quickList.map((e) => e.trim()).filter(Boolean)))), re = s(() => !b.value && T.value.length > 0), x = s(() => G(q.value)), N = s(() => {
       const e = /* @__PURE__ */ new Map();
-      return v.value.forEach((t) => {
-        e.has(t.groupKey) || e.set(t.groupKey, {
-          key: t.groupKey,
-          label: Z.value[t.groupKey] || t.groupLabel,
-          sort: t.groupSort
+      return j.value.forEach((o) => {
+        e.has(o.groupKey) || e.set(o.groupKey, {
+          key: o.groupKey,
+          label: oe.value[o.groupKey] || o.groupLabel,
+          sort: o.groupSort
         });
-      }), Array.from(e.values()).sort((t, o) => t.sort - o.sort);
+      }), Array.from(e.values()).sort((o, r) => o.sort - r.sort);
     });
     Q(
       N,
       (e) => {
         if (!e.length) {
-          h.value = "";
+          y.value = "";
           return;
         }
-        e.some((t) => t.key === h.value) || (h.value = e[0].key);
+        e.some((o) => o.key === y.value) || (y.value = e[0].key);
       },
       { immediate: !0 }
     ), Q(
       () => l.initialExpanded,
       (e) => {
-        L.value = e;
+        b.value = e;
       }
-    ), Q([j, h], () => {
-      w.value = 0;
+    ), Q([x, y], () => {
+      C.value = 0;
     });
-    const be = i(() => j.value ? v.value.filter((e) => e.searchText.includes(j.value)) : h.value ? v.value.filter((e) => e.groupKey === h.value) : v.value), R = i(() => {
+    const fe = s(() => x.value ? j.value.filter((e) => e.searchText.includes(x.value)) : y.value ? j.value.filter((e) => e.groupKey === y.value) : j.value), F = s(() => {
       const e = /* @__PURE__ */ new Map();
-      return be.value.forEach((t) => {
-        const o = Z.value[t.groupKey] || t.groupLabel, r = e.get(t.groupKey) || {
-          key: t.groupKey,
-          label: o,
+      return fe.value.forEach((o) => {
+        const r = oe.value[o.groupKey] || o.groupLabel, t = e.get(o.groupKey) || {
+          key: o.groupKey,
+          label: r,
           items: []
         };
-        r.items.push(t), e.set(t.groupKey, r);
+        t.items.push(o), e.set(o.groupKey, t);
       }), Array.from(e.values());
-    }), H = i(() => R.value.flatMap((e) => e.items)), he = i(
-      () => N.value.find((e) => e.key === h.value)?.label || p.value.resultsLabel
-    ), fe = i(() => j.value ? p.value.resultsLabel : he.value), ee = i(() => !l.initialExpanded && F.value.length > 0), ye = i(
-      () => Se({
+    }), R = s(() => F.value.flatMap((e) => e.items)), ye = s(
+      () => N.value.find((e) => e.key === y.value)?.label || u.value.resultsLabel
+    ), ge = s(() => x.value ? u.value.resultsLabel : ye.value), H = s(() => !l.initialExpanded && T.value.length > 0), ke = s(
+      () => Ke({
         "nmorph-emoji-picker": [
-          G.value && "compact",
-          L.value && "expanded",
+          re.value && "compact",
+          b.value && "expanded",
+          H.value && "collapsible",
           l.disabled && "disabled",
-          !v.value.length && "empty"
+          !j.value.length && "empty"
         ]
       })
-    ), ge = i(() => ({
-      ...Ae({
+    ), _e = s(() => ({
+      ...Me({
         "--nmorph-emoji-picker-width": l.width,
         "--nmorph-emoji-picker-height": l.height
       }),
       "--nmorph-emoji-picker-columns": Math.max(1, Math.floor(l.columns))
-    })), te = (e) => me.value.get(e) || e, oe = (e) => {
+    })), te = (e) => be.value.get(e) || e, ae = (e) => {
       l.disabled || V("select", e);
-    }, _e = () => {
-      l.disabled || (L.value = !0, V("expand"));
-    }, ke = () => {
-      l.disabled || !ee.value || (L.value = !1, V("collapse"));
+    }, ve = () => {
+      l.disabled || (b.value = !0, V("expand"));
+    }, je = () => {
+      l.disabled || !H.value || (b.value = !1, V("collapse"));
+    }, xe = (e) => {
+      if (e) {
+        ve();
+        return;
+      }
+      je();
     }, P = async (e) => {
-      const t = W.value?.querySelectorAll(".nmorph-emoji-picker__emoji");
-      if (!t?.length) return;
-      const o = Math.min(Math.max(e, 0), t.length - 1);
-      w.value = o, await we(), t[o]?.focus();
-    }, ve = (e) => {
-      if (l.disabled || !H.value.length || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
-      const t = Math.max(1, Math.floor(l.columns)), o = H.value.length - 1, r = {
+      const o = Z.value?.querySelectorAll(".nmorph-emoji-picker__emoji");
+      if (!o?.length) return;
+      const r = Math.min(Math.max(e, 0), o.length - 1);
+      C.value = r, await Ae(), o[r]?.focus();
+    }, Le = (e) => {
+      if (l.disabled || !R.value.length || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+      const o = Math.max(1, Math.floor(l.columns)), r = R.value.length - 1, t = {
         ArrowRight: 1,
         ArrowLeft: -1,
-        ArrowDown: t,
-        ArrowUp: -t
+        ArrowDown: o,
+        ArrowUp: -o
       };
-      e.key in r && (e.preventDefault(), P(w.value + r[e.key])), e.key === "Home" && (e.preventDefault(), P(0)), e.key === "End" && (e.preventDefault(), P(o));
+      e.key in t && (e.preventDefault(), P(C.value + t[e.key])), e.key === "Home" && (e.preventDefault(), P(0)), e.key === "End" && (e.preventDefault(), P(r));
     };
-    return (e, t) => (c(), u("div", {
-      class: ae(ye.value),
-      style: xe(ge.value),
+    return (e, o) => (c(), d("div", {
+      class: J(ke.value),
+      style: Se(_e.value),
       lang: l.language
     }, [
-      G.value ? (c(), u("div", {
+      H.value ? (c(), le(f(Ne), {
         key: 0,
+        class: J(["nmorph-emoji-picker__toggle-button nmorph-emoji-picker__expand-button", { "nmorph-emoji-picker__collapse-button": b.value }]),
+        design: "button",
+        "model-value": b.value,
+        "aria-label": b.value ? u.value.collapseLabel : u.value.expandLabel,
+        title: b.value ? u.value.collapseLabel : u.value.expandLabel,
+        disabled: l.disabled,
+        onClick: o[0] || (o[0] = Ce((r) => xe(!b.value), ["prevent"]))
+      }, {
+        label: v(() => [
+          k(f(X), { size: "small" }, {
+            default: v(() => [
+              k(f(ze))
+            ]),
+            _: 1
+          }),
+          L("span", Ve, E(b.value ? u.value.collapseLabel : u.value.expandLabel), 1)
+        ]),
+        _: 1
+      }, 8, ["class", "model-value", "aria-label", "title", "disabled"])) : W("", !0),
+      re.value ? (c(), d("div", {
+        key: 1,
         class: "nmorph-emoji-picker__compact",
         role: "group",
-        "aria-label": p.value.quickLabel
+        "aria-label": u.value.quickLabel
       }, [
-        y("div", Be, [
-          (c(!0), u(z, null, B(F.value, (o) => (c(), u("button", {
-            key: o,
-            type: "button",
-            class: "nmorph-emoji-picker__quick-button",
-            "aria-label": te(o),
-            title: te(o),
+        k(f(Y), {
+          class: "nmorph-emoji-picker__quick-list",
+          height: "calc(var(--nmorph-emoji-picker-cell-size) + var(--nmorph-emoji-picker-scrollbar-size))",
+          "max-height": "calc(var(--nmorph-emoji-picker-cell-size) + var(--nmorph-emoji-picker-scrollbar-size))",
+          "scroll-y-prop": "hidden",
+          "scroll-x-prop": "auto",
+          "css-scroll-behavior": "auto",
+          "x-bar-width-in-px": 6
+        }, {
+          default: v(() => [
+            (c(!0), d(O, null, $(T.value, (r) => (c(), d("button", {
+              key: r,
+              type: "button",
+              class: "nmorph-emoji-picker__quick-button",
+              "aria-label": te(r),
+              title: te(r),
+              disabled: l.disabled,
+              onClick: (t) => ae(r)
+            }, E(r), 9, De))), 128))
+          ]),
+          _: 1
+        })
+      ], 8, qe)) : (c(), d("div", Te, [
+        L("div", Fe, [
+          k(f(Be), {
+            modelValue: q.value,
+            "onUpdate:modelValue": o[1] || (o[1] = (r) => q.value = r),
+            class: "nmorph-emoji-picker__search",
+            placeholder: u.value.searchPlaceholder,
             disabled: l.disabled,
-            onClick: (r) => oe(o)
-          }, E(o), 9, qe))), 128))
-        ]),
-        y("button", {
-          type: "button",
-          class: "nmorph-emoji-picker__expand-button",
-          "aria-label": p.value.expandLabel,
-          title: p.value.expandLabel,
-          disabled: l.disabled,
-          onClick: _e
-        }, [
-          _(k(D), { size: "small" }, {
-            default: q(() => [
-              _(k(Ie))
+            "input-attrs": {
+              class: "nmorph-emoji-picker__search-input",
+              role: "searchbox",
+              "aria-label": u.value.searchLabel
+            }
+          }, {
+            "prepend-icon": v(() => [
+              k(f(X), { size: "small" }, {
+                default: v(() => [
+                  k(f(Ie))
+                ]),
+                _: 1
+              })
             ]),
             _: 1
-          })
-        ], 8, De)
-      ], 8, ze)) : (c(), u("div", Ve, [
-        y("div", Te, [
-          y("label", {
-            class: "nmorph-emoji-picker__search",
-            "aria-label": p.value.searchLabel
-          }, [
-            _(k(D), {
-              size: "small",
-              class: "nmorph-emoji-picker__search-icon"
-            }, {
-              default: q(() => [
-                _(k(Ke))
-              ]),
-              _: 1
-            }),
-            Ce(y("input", {
-              "onUpdate:modelValue": t[0] || (t[0] = (o) => T.value = o),
-              class: "nmorph-emoji-picker__search-input",
-              type: "search",
-              placeholder: p.value.searchPlaceholder,
-              "aria-label": p.value.searchLabel,
-              disabled: l.disabled
-            }, null, 8, Fe), [
-              [Ee, T.value]
-            ])
-          ], 8, $e),
-          ee.value ? (c(), u("button", {
-            key: 0,
-            type: "button",
-            class: "nmorph-emoji-picker__collapse-button",
-            "aria-label": p.value.collapseLabel,
-            title: p.value.collapseLabel,
-            disabled: l.disabled,
-            onClick: ke
-          }, [
-            _(k(D), { size: "small" }, {
-              default: q(() => [
-                _(k(Ne))
-              ]),
-              _: 1
-            })
-          ], 8, Re)) : J("", !0)
+          }, 8, ["modelValue", "placeholder", "disabled", "input-attrs"])
         ]),
-        N.value.length && !j.value ? (c(), u("div", {
+        N.value.length && !x.value ? (c(), le(f(Y), {
           key: 0,
           class: "nmorph-emoji-picker__categories",
+          height: "40px",
+          "max-height": "40px",
+          "scroll-y-prop": "hidden",
+          "scroll-x-prop": "auto",
+          "css-scroll-behavior": "auto",
+          "x-bar-width-in-px": 6,
+          "x-gap-in-px": 6,
           role: "tablist",
-          "aria-label": p.value.categoryLabel
-        }, [
-          (c(!0), u(z, null, B(N.value, (o) => (c(), u("button", {
-            key: o.key,
-            type: "button",
-            class: ae(["nmorph-emoji-picker__category", { "nmorph-emoji-picker__category--active": o.key === h.value }]),
-            role: "tab",
-            "aria-selected": o.key === h.value,
-            disabled: l.disabled,
-            onClick: (r) => h.value = o.key
-          }, E(o.label), 11, Pe))), 128))
-        ], 8, He)) : J("", !0),
-        y("div", {
-          ref_key: "gridRef",
-          ref: W,
+          "aria-label": u.value.categoryLabel
+        }, {
+          default: v(() => [
+            (c(!0), d(O, null, $(N.value, (r) => (c(), d("button", {
+              key: r.key,
+              type: "button",
+              class: J(["nmorph-emoji-picker__category", { "nmorph-emoji-picker__category--active": r.key === y.value }]),
+              role: "tab",
+              "aria-selected": r.key === y.value,
+              disabled: l.disabled,
+              onClick: (t) => y.value = r.key
+            }, E(r.label), 11, Re))), 128))
+          ]),
+          _: 1
+        }, 8, ["aria-label"])) : W("", !0),
+        k(f(Y), {
           class: "nmorph-emoji-picker__body",
-          "aria-label": fe.value,
-          onKeydown: ve
-        }, [
-          R.value.length ? (c(!0), u(z, { key: 0 }, B(R.value, (o) => (c(), u("section", {
-            key: o.key,
-            class: "nmorph-emoji-picker__section"
-          }, [
-            j.value ? (c(), u("div", Qe, E(o.label), 1)) : J("", !0),
-            y("div", Je, [
-              (c(!0), u(z, null, B(o.items, (r) => (c(), u("button", {
+          height: "100%",
+          "max-height": "100%",
+          "scroll-x-prop": "hidden",
+          "scroll-y-prop": "auto",
+          "css-scroll-behavior": "auto",
+          "y-bar-width-in-px": 8
+        }, {
+          default: v(() => [
+            L("div", {
+              ref_key: "gridRef",
+              ref: Z,
+              class: "nmorph-emoji-picker__body-content",
+              "aria-label": ge.value,
+              onKeydown: Le
+            }, [
+              F.value.length ? (c(!0), d(O, { key: 0 }, $(F.value, (r) => (c(), d("section", {
                 key: r.key,
-                type: "button",
-                class: "nmorph-emoji-picker__emoji",
-                "aria-label": r.annotation,
-                title: r.annotation,
-                disabled: l.disabled,
-                onFocus: (n) => w.value = H.value.findIndex((a) => a.key === r.key),
-                onClick: (n) => oe(r.emoji)
+                class: "nmorph-emoji-picker__section"
               }, [
-                y("span", Xe, E(r.emoji), 1)
-              ], 40, We))), 128))
-            ])
-          ]))), 128)) : (c(), u("div", Ye, [
-            _(k(D), null, {
-              default: q(() => [
-                _(k(Me))
-              ]),
-              _: 1
-            }),
-            y("span", null, E(p.value.noResults), 1)
-          ]))
-        ], 40, Ue)
+                x.value ? (c(), d("div", Pe, E(r.label), 1)) : W("", !0),
+                L("div", Ue, [
+                  (c(!0), d(O, null, $(r.items, (t) => (c(), d("button", {
+                    key: t.key,
+                    type: "button",
+                    class: "nmorph-emoji-picker__emoji",
+                    "aria-label": t.annotation,
+                    title: t.annotation,
+                    disabled: l.disabled,
+                    onFocus: (n) => C.value = R.value.findIndex((a) => a.key === t.key),
+                    onClick: (n) => ae(t.emoji)
+                  }, [
+                    L("span", Je, E(t.emoji), 1)
+                  ], 40, Qe))), 128))
+                ])
+              ]))), 128)) : (c(), d("div", We, [
+                k(f(X), null, {
+                  default: v(() => [
+                    k(f(Oe))
+                  ]),
+                  _: 1
+                }),
+                L("span", null, E(u.value.noResults), 1)
+              ]))
+            ], 40, He)
+          ]),
+          _: 1
+        })
       ]))
-    ], 14, Oe));
+    ], 14, $e));
   }
 });
 export {
-  st as default
+  uo as default
 };