@telia-ace/knowledge-widget-components-search 1.0.21 → 1.0.23

package/dist/{search.ffb2e6c2.js → search.ca38a836.js}

@@ -10,7 +10,7 @@ var ne = (e, t, o) => t in e ? Ae(e, t, { enumerable: !0, configurable: !0, writ
       se.call(t, o) && ne(e, o, t[o]);
   return e;
 }, D = (e, t) => Ie(e, qe(t));
-var U = (e, t) => {
+var G = (e, t) => {
   var o = {};
   for (var r in e)
     re.call(e, r) && t.indexOf(r) < 0 && (o[r] = e[r]);
@@ -20,9 +20,9 @@ var U = (e, t) => {
   return o;
 };
 import { Component as ze } from "@telia-ace/knowledge-widget-types-grid";
-import { borderTabStyle as _, Text as de, Link as fe, SymbolBadge as H, useProperties as P, useDispatch as M, useRouteData as ge, useEventListener as J, useKeyPress as G, Tooltip as Fe, ItemTree as Be, contentBox as me, useScroll as Le, useContainer as he, Loader as De, useDebounce as Te, usePrevious as ae, useChildren as Ne, useWidgetEvent as Oe, useTransitionEnd as Ke, convertToStringAttributes as Pe, Input as We, Button as pe } from "@telia-ace/knowledge-widget-ui";
+import { borderTabStyle as M, Text as de, Link as fe, SymbolBadge as J, useProperties as P, useDispatch as U, useRouteData as ge, useEventListener as Y, useKeyPress as H, Tooltip as Fe, ItemTree as Be, contentBox as me, useScroll as Le, useContainer as he, Loader as De, useDebounce as Ne, usePrevious as ae, useChildren as Te, useWidgetEvent as Oe, useTransitionEnd as Ke, convertToStringAttributes as Pe, Input as We, Button as pe } from "@telia-ace/knowledge-widget-ui";
 import { appendClassNames as R, deepClone as je, categoryTrail as Qe } from "@telia-ace/widget-utilities";
-import f, { useRef as V, useState as N, useCallback as I, useEffect as O } from "react";
+import f, { useRef as V, useState as T, useCallback as I, useEffect as O } from "react";
 import z, { css as K } from "styled-components";
 const Xe = (v) => {
   var b = v, {
@@ -32,7 +32,7 @@ const Xe = (v) => {
     filterType: r,
     handleClick: l,
     deleteAriaLabel: c = ""
-  } = b, s = U(b, [
+  } = b, s = G(b, [
     "text",
     "className",
     "forceFocusStyle",
@@ -52,7 +52,7 @@ const Xe = (v) => {
     role: "button",
     "aria-label": c.replace("{{item}}", e),
     onClick: (y) => l(y, r)
-  }), /* @__PURE__ */ f.createElement(H, {
+  }), /* @__PURE__ */ f.createElement(J, {
     size: 13,
     symbol: { type: "Svg", content: "close" }
   })));
@@ -63,13 +63,15 @@ const Xe = (v) => {
   showGuideCategory: r,
   position: l
 }) => {
-  const { activeFilterBadges: c = {}, deleteFilterBadgeAriaLabel: s = "" } = P(), v = M(), { name: b, params: k } = ge(), [y, u] = N(!1), $ = I((m) => {
+  const { activeFilterBadges: c = {}, deleteFilterBadgeAriaLabel: s = "" } = P(), v = U(), { name: b, params: k } = ge(), [y, u] = T(!1), x = I((m) => {
     const { key: a } = m;
     ["ArrowLeft", "ArrowRight"].indexOf(a) === -1 && u(!1);
   }, []);
-  J("keydown", $, window), J("click", $, window);
-  const { guideCategory: S, tag: x, tooltip: A } = c, d = (m) => {
-    const a = m.querySelectorAll(".humany-filter-badge");
+  Y("keydown", x, window), Y("click", x, window);
+  const { guideCategory: S, tag: $, tooltip: A } = c, d = (m) => {
+    const a = m.querySelectorAll(
+      ".humany-filter-badge"
+    );
     return {
       badges: a,
       index: Array.from(a).findIndex((h) => document.activeElement === h)
@@ -85,58 +87,73 @@ const Xe = (v) => {
       m === "left" ? p === -1 ? q = h.item(h.length - 1) : p > 0 && (q = h.item(p - 1)) : m === "right" && (p === h.length - 1 ? a && a.focus() : h.item(p + 1) && (q = h.item(p + 1))), q && (q.focus(), u(!0));
     }
   };
-  G("ArrowLeft", I(() => {
-    if (!t)
-      return;
-    const { index: m } = d(t);
-    if (e || m > -1) {
-      const a = t.querySelector('[data-type="search"]'), h = a && a.selectionStart !== null && a.selectionStart <= 0, p = m > -1;
-      (h || p) && i("left", a);
-    }
-  }, [e, t])), G("ArrowRight", I(() => {
-    if (!t)
-      return;
-    const { index: m } = d(t);
-    if (m > -1) {
-      const a = t.querySelector('[data-type="search"]');
-      m > -1 && i("right", a);
-    }
-  }, [t])), G("Backspace", I((m) => {
-    if (!t)
-      return;
-    let a = [];
-    const { index: h } = d(t), p = t.querySelector('[data-type="search"]');
-    h > -1 ? h === 0 ? r ? a = ["guideCategory"] : o && (a = ["tag"]) : h === 1 && (a = ["tag"]) : p && p.selectionStart !== null && p.selectionStart <= 0 && (c != null && c.tag ? a = ["tag"] : c != null && c.guideCategory && (a = ["guideCategory"])), a.length > 0 && (m.preventDefault(), v("quick-filter:remove", { types: a }));
-  }, [t, c, o, r]));
-  const g = I((m) => m === "guideCategory" && S && r ? /* @__PURE__ */ f.createElement(ie, {
-    text: `@${S.title}`,
-    routeName: b,
-    filterType: "guideCategory",
-    handleClick: n,
-    forceFocusStyle: y,
-    deleteAriaLabel: s,
-    params: D(B({}, k), {
-      guideCategory: void 0
-    })
-  }) : m === "tag" && x && o ? /* @__PURE__ */ f.createElement(ie, {
-    className: "humany-filter-badge",
-    text: `#${x.title}`,
-    routeName: b,
-    filterType: "tag",
-    handleClick: n,
-    forceFocusStyle: y,
-    deleteAriaLabel: s,
-    params: D(B({}, k), {
-      tag: void 0
-    })
-  }) : null, [S, x, b, k, r, o, y]);
-  return !S && !x ? null : /* @__PURE__ */ f.createElement(Ue, {
+  H(
+    "ArrowLeft",
+    I(() => {
+      if (!t)
+        return;
+      const { index: m } = d(t);
+      if (e || m > -1) {
+        const a = t.querySelector('[data-type="search"]'), h = a && a.selectionStart !== null && a.selectionStart <= 0, p = m > -1;
+        (h || p) && i("left", a);
+      }
+    }, [e, t])
+  ), H(
+    "ArrowRight",
+    I(() => {
+      if (!t)
+        return;
+      const { index: m } = d(t);
+      if (m > -1) {
+        const a = t.querySelector('[data-type="search"]');
+        m > -1 && i("right", a);
+      }
+    }, [t])
+  ), H(
+    "Backspace",
+    I(
+      (m) => {
+        if (!t)
+          return;
+        let a = [];
+        const { index: h } = d(t), p = t.querySelector('[data-type="search"]');
+        h > -1 ? h === 0 ? r ? a = ["guideCategory"] : o && (a = ["tag"]) : h === 1 && (a = ["tag"]) : p && p.selectionStart !== null && p.selectionStart <= 0 && (c != null && c.tag ? a = ["tag"] : c != null && c.guideCategory && (a = ["guideCategory"])), a.length > 0 && (m.preventDefault(), v("quick-filter:remove", { types: a }));
+      },
+      [t, c, o, r]
+    )
+  );
+  const g = I(
+    (m) => m === "guideCategory" && S && r ? /* @__PURE__ */ f.createElement(ie, {
+      text: `@${S.title}`,
+      routeName: b,
+      filterType: "guideCategory",
+      handleClick: n,
+      forceFocusStyle: y,
+      deleteAriaLabel: s,
+      params: D(B({}, k), {
+        guideCategory: void 0
+      })
+    }) : m === "tag" && $ && o ? /* @__PURE__ */ f.createElement(ie, {
+      className: "humany-filter-badge",
+      text: `#${$.title}`,
+      routeName: b,
+      filterType: "tag",
+      handleClick: n,
+      forceFocusStyle: y,
+      deleteAriaLabel: s,
+      params: D(B({}, k), {
+        tag: void 0
+      })
+    }) : null,
+    [S, $, b, k, r, o, y]
+  );
+  return !S && !$ ? null : /* @__PURE__ */ f.createElement(Ue, {
     className: "humany-filter-badges",
     position: l
   }, S && A ? /* @__PURE__ */ f.createElement(Fe, {
     content: /* @__PURE__ */ f.createElement(f.Fragment, null, A),
     sticky: !1
-  }, g("guideCategory")) : g("guideCategory"), x && g("tag"));
+  }, g("guideCategory")) : g("guideCategory"), $ && g("tag"));
 }, Ue = z.div`
     display: flex;
     align-items: center;
@@ -186,27 +203,36 @@ const Xe = (v) => {
 }} / 2);
 
     &:focus-within {
-        ${(e) => {
-  var t;
-  return (((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) || e.forceFocusStyle) && K`
-                ${_}
-                background-color: transparent;
+        ${M}
+        background-color: transparent;
 
-                svg {
-                    path {
-                        stroke: ${(o) => {
-    var r;
-    return (r = o.theme.colors) == null ? void 0 : r.primary;
-  }};
-                    }
-                }
-            `;
+        svg {
+            path {
+                stroke: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
 }};
+            }
+        }
         a {
             outline: none;
         }
     }
 
+    ${(e) => e.forceFocusStyle && K`
+            ${M}
+            background-color: transparent;
+
+            svg {
+                path {
+                    stroke: ${(t) => {
+  var o;
+  return (o = t.theme.colors) == null ? void 0 : o.primary;
+}};
+                }
+            }
+        `}
+
     svg {
         width: 17px;
         height: 11px;
@@ -220,16 +246,16 @@ const Xe = (v) => {
         }
         order: 1;
     }
-`, T = (e, t) => !t || !e ? !0 : e.toLowerCase().indexOf(t.toLowerCase()) > -1, Ge = (e = [], t, o) => {
+`, N = (e, t) => !t || !e ? !0 : e.toLowerCase().indexOf(t.toLowerCase()) > -1, Ge = (e = [], t, o) => {
   if (!o)
     return e;
   const r = je(e);
   if (t === "tag")
-    return r.filter((s) => T(s.title, o));
+    return r.filter((s) => N(s.title, o));
   const l = He(r, o);
   return ye(r, (s) => l.indexOf(s.id) > -1);
 }, ye = (e, t) => e.filter((o) => (o.items && o.items.length && (o.items = ye(o.items, t)), t(o))), He = (e, t) => {
-  const r = be(e).filter((c) => T(c.title, t)).map((c) => c.id);
+  const r = be(e).filter((c) => N(c.title, t)).map((c) => c.id);
   let l = [];
   return r.forEach((c) => {
     const s = Qe(c, e);
@@ -240,13 +266,17 @@ const Xe = (v) => {
   return e.forEach((o) => {
     t.push(o), Array.isArray(o.items) && (t = t.concat(be(o.items)));
   }), t;
-}, Y = (e) => {
-  const t = Array.from((e == null ? void 0 : e.getElementsByTagName("A")) || []).filter((o) => o.getAttribute("disabled") === null);
+}, Z = (e) => {
+  const t = Array.from((e == null ? void 0 : e.getElementsByTagName("A")) || []).filter(
+    (o) => o.getAttribute("disabled") === null
+  );
   return {
     anchors: t,
     focusedIndex: t.findIndex((o) => document.activeElement === o)
   };
-}, Je = (e) => e ? e.querySelector('[data-type="search"], input[type="search"]') : null, Z = (e) => {
+}, Je = (e) => e ? e.querySelector(
+  '[data-type="search"], input[type="search"]'
+) : null, _ = (e) => {
   if (!e)
     return;
   const t = Je(e);
@@ -259,86 +289,93 @@ const Xe = (v) => {
   searchContainer: l,
   inputHasFocus: c
 }) => {
-  const [s, v] = N(t || []), [b, k] = N(null), y = M(), { activeFilterBadges: u, quickFilters: $ } = P(), S = typeof $ == "object" && !!$.autoSelect || typeof $ == "boolean" && !!$;
+  const [s, v] = T(t || []), [b, k] = T(null), y = U(), { activeFilterBadges: u, quickFilters: x } = P(), S = typeof x == "object" && !!x.autoSelect || typeof x == "boolean" && !!x;
   O(() => {
     v(Ge(t, o, e));
   }, [e, o, t]), O(() => {
     var d;
     if (r) {
-      const { anchors: n } = Y(r), i = (d = n[0]) == null ? void 0 : d.getAttribute("data-id");
+      const { anchors: n } = Z(r), i = (d = n[0]) == null ? void 0 : d.getAttribute("data-id");
       i && k(i);
     }
   }, [s, r]);
-  const x = I((d, n) => {
-    const i = {
-      category: u != null && u.guideCategory ? u.guideCategory.id : void 0,
-      tag: u != null && u.tag ? u.tag.id : void 0
-    };
-    n === "guideCategory" ? i.category = d.id : n === "tag" && (i.tag = d.id), y("quick-filter:add", i);
-  }, [u, y]), A = (d) => d === "guideCategory" ? {
+  const $ = I(
+    (d, n) => {
+      const i = {
+        category: u != null && u.guideCategory ? u.guideCategory.id : void 0,
+        tag: u != null && u.tag ? u.tag.id : void 0
+      };
+      n === "guideCategory" ? i.category = d.id : n === "tag" && (i.tag = d.id), y("quick-filter:add", i);
+    },
+    [u, y]
+  ), A = (d) => d === "guideCategory" ? {
     renderItem: (n, i) => /* @__PURE__ */ f.createElement(ue, {
       autoSelect: S && c && n.id === b,
-      disabled: !T(n.title, e),
-      tabIndex: T(n.title, e) ? 0 : -1,
+      disabled: !N(n.title, e),
+      tabIndex: N(n.title, e) ? 0 : -1,
       onKeyDown: (g) => {
-        g.key === "Enter" && x(n, d);
+        g.key === "Enter" && $(n, d);
       },
       "data-level": i,
       onClick: () => {
-        x(n, d);
+        $(n, d);
       },
       "data-id": n.id
     }, /* @__PURE__ */ f.createElement(ce, {
       title: n.title,
       phrase: e,
-      matches: T(n.title, e)
+      matches: N(n.title, e)
     }))
   } : {
     renderLi: !0,
     renderItem: (n) => /* @__PURE__ */ f.createElement(ue, {
       autoSelect: S && c && n.id === b,
       onKeyDown: (i) => {
-        i.key === "Enter" && x(n, d);
+        i.key === "Enter" && $(n, d);
       },
       onClick: () => {
-        x(n, d);
+        $(n, d);
       },
       "data-id": n.id
     }, /* @__PURE__ */ f.createElement(ce, {
       symbol: "#",
       title: n.title,
       phrase: e,
-      matches: T(n.title, e)
+      matches: N(n.title, e)
     }))
   };
-  return J("keydown", (d) => {
-    var q;
-    const { key: n } = d;
-    if (!r || !(n === "ArrowDown" || n === "ArrowUp" || n === "Enter"))
-      return;
-    const { anchors: i, focusedIndex: g } = Y(r);
-    if (n === "Enter") {
-      if (c && S) {
-        const w = (q = i[0]) == null ? void 0 : q.getAttribute("data-id");
-        w && x({ id: w }, o);
+  return Y(
+    "keydown",
+    (d) => {
+      var q;
+      const { key: n } = d;
+      if (!r || !(n === "ArrowDown" || n === "ArrowUp" || n === "Enter"))
+        return;
+      const { anchors: i, focusedIndex: g } = Z(r);
+      if (n === "Enter") {
+        if (c && S) {
+          const w = (q = i[0]) == null ? void 0 : q.getAttribute("data-id");
+          w && $({ id: w }, o);
+        }
+        return;
       }
-      return;
-    }
-    const m = () => {
-      var w;
-      return (w = i[0]) == null ? void 0 : w.focus();
-    }, a = () => {
-      var w;
-      return (w = i[i.length - 1]) == null ? void 0 : w.focus();
-    }, h = () => {
-      var w;
-      return (w = i[g + 1]) == null ? void 0 : w.focus();
-    }, p = () => {
-      var w;
-      return (w = i[g - 1]) == null ? void 0 : w.focus();
-    };
-    c ? (d.preventDefault(), n === "ArrowDown" ? m() : a()) : g > -1 && (d.preventDefault(), n === "ArrowDown" ? i.length > g + 1 ? h() : Z(l) : g - 1 < 0 ? Z(l) : p());
-  }, window), /* @__PURE__ */ f.createElement(Be, B({
+      const m = () => {
+        var w;
+        return (w = i[0]) == null ? void 0 : w.focus();
+      }, a = () => {
+        var w;
+        return (w = i[i.length - 1]) == null ? void 0 : w.focus();
+      }, h = () => {
+        var w;
+        return (w = i[g + 1]) == null ? void 0 : w.focus();
+      }, p = () => {
+        var w;
+        return (w = i[g - 1]) == null ? void 0 : w.focus();
+      };
+      c ? (d.preventDefault(), n === "ArrowDown" ? m() : a()) : g > -1 && (d.preventDefault(), n === "ArrowDown" ? i.length > g + 1 ? h() : _(l) : g - 1 < 0 ? _(l) : p());
+    },
+    window
+  ), /* @__PURE__ */ f.createElement(Be, B({
     tree: s,
     renderEmpty: !1,
     ulProps: { role: "listbox" },
@@ -417,31 +454,42 @@ const Xe = (v) => {
       type: "",
       items: []
     }
-  } = P(), [l, c] = Le(!0), s = he(), { events: v } = s.get("$widget"), b = V(), k = I((d) => (d && d.addEventListener("keydown", () => {
-    Y(d).focusedIndex > -1 && v.subscribeOnce("router:changed", () => {
-      Z(o);
-    });
-  }, !0), b.current = d, d), [o]), { items: y = [], symbol: u, type: $, open: S, loading: x } = r;
+  } = P(), [l, c] = Le(!0), s = he(), { events: v } = s.get("$widget"), b = V(), k = I(
+    (d) => (d && d.addEventListener(
+      "keydown",
+      () => {
+        Z(d).focusedIndex > -1 && v.subscribeOnce("router:changed", () => {
+          _(o);
+        });
+      },
+      !0
+    ), b.current = d, d),
+    [o]
+  ), { items: y = [], symbol: u, type: x, open: S, loading: $ } = r;
   if (!S || !u)
     return null;
   const A = e.slice(e.indexOf(u) + 1);
   return /* @__PURE__ */ f.createElement(Re, {
     ref: k,
-    "data-loading": x,
-    className: R("humany-quick-filter-dropdown", [$ === "guideCategory", "humany-quick-filter-guide-categories"], [$ === "tag", "humany-quick-filter-tags"])
+    "data-loading": $,
+    className: R(
+      "humany-quick-filter-dropdown",
+      [x === "guideCategory", "humany-quick-filter-guide-categories"],
+      [x === "tag", "humany-quick-filter-tags"]
+    )
   }, /* @__PURE__ */ f.createElement(Ve, {
     className: "humany-quick-filter-dropdown-inner",
     css: l,
     ref: c
   }, /* @__PURE__ */ f.createElement(Ye, {
-    filterType: $,
+    filterType: x,
     items: y,
     filterPhrase: A,
     filterContainer: c.current,
     searchContainer: o,
     inputHasFocus: t
   })), /* @__PURE__ */ f.createElement(De, {
-    loading: x
+    loading: $
   }));
 }, Re = z.div`
     ${me};
@@ -474,28 +522,43 @@ const Xe = (v) => {
 }}
     }
 `, X = (e, t) => !!(e && !t || !e && t || e && t && e.id !== t.id), et = (e, t = {}, o = !0) => {
-  const r = M(), {
+  const r = U(), {
     quickFilters: l = !1,
     quickFilter: c = { open: !1 },
     activeFilterBadges: s,
     filterBadges: v = !1,
     incremental: b = 600
-  } = P(), k = Te(e, typeof b == "boolean" ? 600 : b), y = ae(k), u = ae(s), $ = V(null), S = I((n = "") => {
-    if (v) {
-      const i = X(s == null ? void 0 : s.guideCategory, u == null ? void 0 : u.guideCategory) || X(s == null ? void 0 : s.tag, u == null ? void 0 : u.tag);
-      return r("search", { value: n, filtersChanged: i, filters: s });
-    }
-    return r("search", { value: n });
-  }, [r, s]), x = I((n) => {
-    r("clear", { navigateToHome: n });
-  }, [r]), A = (n) => l ? n.replace(/([@#].*)/g, "") : n, d = I((n) => {
-    if (c.open && n.preventDefault) {
-      n.preventDefault();
-      return;
-    }
-    const i = document.activeElement, g = $.current && typeof $.current.contains == "function" ? $.current.contains(i) : !1, m = A(e);
-    typeof n == "boolean" && n || m.length && g || (s == null ? void 0 : s.guideCategory) || (s == null ? void 0 : s.tag) && g ? S(m) : x(g);
-  }, [$, e, c, x, s, S]);
+  } = P(), k = Ne(
+    e,
+    typeof b == "boolean" ? 600 : b
+  ), y = ae(k), u = ae(s), x = V(null), S = I(
+    (n = "") => {
+      if (v) {
+        const i = X(
+          s == null ? void 0 : s.guideCategory,
+          u == null ? void 0 : u.guideCategory
+        ) || X(s == null ? void 0 : s.tag, u == null ? void 0 : u.tag);
+        return r("search", { value: n, filtersChanged: i, filters: s });
+      }
+      return r("search", { value: n });
+    },
+    [r, s]
+  ), $ = I(
+    (n) => {
+      r("clear", { navigateToHome: n });
+    },
+    [r]
+  ), A = (n) => l ? n.replace(/([@#].*)/g, "") : n, d = I(
+    (n) => {
+      if (c.open && n.preventDefault) {
+        n.preventDefault();
+        return;
+      }
+      const i = document.activeElement, g = x.current && typeof x.current.contains == "function" ? x.current.contains(i) : !1, m = A(e);
+      typeof n == "boolean" && n || m.length && g || (s == null ? void 0 : s.guideCategory) || (s == null ? void 0 : s.tag) && g ? S(m) : $(g);
+    },
+    [x, e, c, $, s, S]
+  );
   return O(() => {
     const n = X(s == null ? void 0 : s.guideCategory, u == null ? void 0 : u.guideCategory) || X(s == null ? void 0 : s.tag, u == null ? void 0 : u.tag), i = k && A(k), g = y && A(y);
     (typeof g != "undefined" && g !== i && i !== t.phrase && o && !c.open || n && !(s != null && s.initial)) && d(n);
@@ -505,9 +568,9 @@ const Xe = (v) => {
       n && e.indexOf("@") === e.length - 1 && r("quick-filter:open", { type: "guideCategory", symbol: "@" }), i && e.indexOf("#") === e.length - 1 && r("quick-filter:open", { type: "tag", symbol: "#" });
     }
     c.open && e.indexOf("@") === -1 && e.indexOf("#") === -1 && r("quick-filter:close");
-  }, [e]), [d, x, $];
+  }, [e]), [d, $, x];
 }, dt = (o) => {
-  var r = o, { className: e } = r, t = U(r, ["className"]);
+  var r = o, { className: e } = r, t = G(r, ["className"]);
   const {
     showSearchButton: l,
     showClearButton: c,
@@ -517,41 +580,48 @@ const Xe = (v) => {
     searchButtonLabel: k,
     clearButtonLabel: y,
     ariaLabel: u,
-    route: $ = "search",
+    route: x = "search",
     incremental: S = !0,
-    showChildren: x = !1,
+    showChildren: $ = !1,
     quickFilter: A,
     quickFilters: d,
     filterBadges: n
-  } = P(), { params: i } = ge(), [g, m] = N(!1), [a, h] = N(i.phrase || ""), [p, q] = N({
+  } = P(), { params: i } = ge(), [g, m] = T(!1), [a, h] = T(i.phrase || ""), [p, q] = T({
     guideCategory: !1,
     tag: !1
-  }), w = he(), ke = Ne(), W = M(), { position: xe = "inside" } = typeof n == "object" ? n : {};
+  }), w = he(), ke = Te(), W = U(), { position: $e = "inside" } = typeof n == "object" ? n : {};
   O(() => {
     const { guideCategory: E, tag: C } = i, F = typeof n == "object" ? !!n.guideCategory : !!n, ve = typeof n == "object" ? !!n.tag : !!n;
     q({
       guideCategory: F && !!E,
       tag: ve && !!C
     });
-  }, [n, i]), Oe("router:changed", () => {
-    if (A) {
-      const { open: E, symbol: C } = A;
-      if (E) {
-        if (C) {
-          const F = a.replace(a.slice(a.indexOf(C)), "");
-          h(F);
+  }, [n, i]), Oe(
+    "router:changed",
+    () => {
+      if (A) {
+        const { open: E, symbol: C } = A;
+        if (E) {
+          if (C) {
+            const F = a.replace(a.slice(a.indexOf(C)), "");
+            h(F);
+          }
+          W("quick-filter:close");
         }
-        W("quick-filter:close");
       }
-    }
-  }, [A, a, h, W]);
+    },
+    [A, a, h, W]
+  );
   const [ee, j, L] = et(a, i, !!S);
   O(() => {
     h(i.phrase || "");
   }, [i.phrase]);
-  const $e = I((E) => {
-    h(E);
-  }, [h]), Ee = I(() => {
+  const xe = I(
+    (E) => {
+      h(E);
+    },
+    [h]
+  ), Ee = I(() => {
     W("quick-filter:close").then(() => j(!0));
   }, [W, j]), we = I(() => {
     var E, C;
@@ -559,10 +629,10 @@ const Xe = (v) => {
   }, [v, g, L]), Ce = I(() => {
     w.getAsync("router").then((E) => {
       const C = E.getInitialRoute(), F = E.getRouteData();
-      (C == null ? void 0 : C.name) === F.name && (C == null ? void 0 : C.name) !== $ ? h("") : j(!0);
+      (C == null ? void 0 : C.name) === F.name && (C == null ? void 0 : C.name) !== x ? h("") : j(!0);
     });
   }, [w, h, j]), te = (E) => {
-    if (E !== xe)
+    if (E !== $e)
       return null;
     if (!!p.guideCategory || !!p.tag)
       return /* @__PURE__ */ f.createElement(Me, {
@@ -602,7 +672,7 @@ const Xe = (v) => {
     onClick: ee,
     "data-has-phrase": !!a,
     "data-has-focus": g
-  }, /* @__PURE__ */ f.createElement(H, {
+  }, /* @__PURE__ */ f.createElement(J, {
     size: 32,
     symbol: { type: "Svg", content: "search" }
   })), te("inside"), /* @__PURE__ */ f.createElement(We, D(B({
@@ -613,7 +683,7 @@ const Xe = (v) => {
     onFocusChange: m,
     onEscape: Ee,
     onEnter: ee,
-    onChange: $e,
+    onChange: xe,
     value: a
   })), oe && /* @__PURE__ */ f.createElement(rt, {
     "aria-label": y,
@@ -621,10 +691,10 @@ const Xe = (v) => {
     hasFocus: g,
     title: y,
     onClick: Ce
-  }, /* @__PURE__ */ f.createElement(H, {
+  }, /* @__PURE__ */ f.createElement(J, {
     size: 27,
     symbol: { type: "Svg", content: "clear" }
-  })), x && !oe && ke.map((E) => /* @__PURE__ */ f.createElement(ze, {
+  })), $ && !oe && ke.map((E) => /* @__PURE__ */ f.createElement(ze, {
     key: E.id,
     id: E.id,
     branch: "default"
@@ -730,7 +800,7 @@ const Xe = (v) => {
     ${(e) => e["data-has-focus"] && K`
             ${(t) => {
   var o, r;
-  return (o = t.theme.accessibility) != null && o.isTabbing ? _ : `
+  return (o = t.theme.accessibility) != null && o.isTabbing ? M : `
         border-color: ${(r = t.theme.colors) == null ? void 0 : r.primary};
         outline: none;
         input {
@@ -753,11 +823,8 @@ const Xe = (v) => {
         }
     }
 `, rt = z(pe)`
-    &:focus svg {
-        ${(e) => {
-  var t;
-  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && _;
-}}
+    &:focus-visible svg {
+        ${M}
     }
 
     svg {
@@ -776,4 +843,4 @@ const Xe = (v) => {
 export {
   dt as default
 };
-//# sourceMappingURL=search.ffb2e6c2.js.map
+//# sourceMappingURL=search.ca38a836.js.map