@telia-ace/knowledge-widget-components-search 1.0.4 → 1.0.9

package/dist/search.js

@@ -0,0 +1,1063 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Component } from "@telia-ace/knowledge-widget-types-grid";
+import { borderTabStyle, Text, Link, SymbolBadge, useProperties, useDispatch, useRouteData, useEventListener, useKeyPress, Tooltip, ItemTree, contentBox, useScroll, useContainer, Loader, useDebounce, usePrevious, useChildren, useWidgetEvent, useTransitionEnd, convertToStringAttributes, Input, Button } from "@telia-ace/knowledge-widget-ui";
+import { appendClassNames, deepClone, categoryTrail } from "@telia-ace/widget-utilities";
+import React, { useRef, useState, useCallback, useEffect } from "react";
+import styled, { css } from "styled-components";
+const FilterBadge = (_a) => {
+  var _b = _a, {
+    text,
+    className,
+    forceFocusStyle,
+    filterType,
+    handleClick,
+    deleteAriaLabel = ""
+  } = _b, p = __objRest(_b, [
+    "text",
+    "className",
+    "forceFocusStyle",
+    "filterType",
+    "handleClick",
+    "deleteAriaLabel"
+  ]);
+  const ref = useRef();
+  return /* @__PURE__ */ React.createElement(Text, {
+    className: appendClassNames(className, "humany-filter-badge"),
+    onKeyDown: (e) => {
+      if (e.key === "Enter") {
+        handleClick(e, filterType);
+      }
+    }
+  }, text, /* @__PURE__ */ React.createElement(Link, __spreadProps(__spreadValues({}, p), {
+    ref,
+    tabIndex: 0,
+    role: "button",
+    "aria-label": deleteAriaLabel.replace("{{item}}", text),
+    onClick: (e) => handleClick(e, filterType)
+  }), /* @__PURE__ */ React.createElement(SymbolBadge, {
+    size: 13,
+    symbol: { type: "Svg", content: "close" }
+  })));
+};
+const FilterBadges = ({
+  inputHasFocus,
+  searchContainerRef,
+  showTag,
+  showGuideCategory,
+  position
+}) => {
+  const { activeFilterBadges = {}, deleteFilterBadgeAriaLabel = "" } = useProperties();
+  const dispatch = useDispatch();
+  const { name, params } = useRouteData();
+  const [isNavigatingWithKeyBoard, setIsNavigatingWithKeyboard] = useState(false);
+  const onKeyDown = useCallback((event) => {
+    const { key } = event;
+    if (["ArrowLeft", "ArrowRight"].indexOf(key) === -1) {
+      setIsNavigatingWithKeyboard(false);
+    }
+  }, []);
+  useEventListener("keydown", onKeyDown, window);
+  useEventListener("click", onKeyDown, window);
+  const { guideCategory, tag, tooltip } = activeFilterBadges;
+  const getFocusedFilterBadge = (container) => {
+    const badges = container.querySelectorAll(".humany-filter-badge");
+    return {
+      badges,
+      index: Array.from(badges).findIndex((e) => document.activeElement === e)
+    };
+  };
+  const handleFilterBadgeClick = (event, filterType) => {
+    event.preventDefault();
+    dispatch("quick-filter:remove", { types: [filterType] });
+  };
+  const keyboardNavigation = (direction, inputElem) => {
+    if (!searchContainerRef) {
+      return;
+    }
+    const { badges, index: currentFocusedIndex } = getFocusedFilterBadge(searchContainerRef);
+    if (badges.length) {
+      let toFocus = null;
+      if (direction === "left") {
+        if (currentFocusedIndex === -1) {
+          toFocus = badges.item(badges.length - 1);
+        } else if (currentFocusedIndex > 0) {
+          toFocus = badges.item(currentFocusedIndex - 1);
+        }
+      } else if (direction === "right") {
+        if (currentFocusedIndex === badges.length - 1) {
+          inputElem && inputElem.focus();
+        } else if (badges.item(currentFocusedIndex + 1)) {
+          toFocus = badges.item(currentFocusedIndex + 1);
+        }
+      }
+      if (toFocus) {
+        toFocus.focus();
+        setIsNavigatingWithKeyboard(true);
+      }
+    }
+  };
+  useKeyPress("ArrowLeft", useCallback(() => {
+    if (!searchContainerRef) {
+      return;
+    }
+    const { index: focusedBadgeIndex } = getFocusedFilterBadge(searchContainerRef);
+    if (inputHasFocus || focusedBadgeIndex > -1) {
+      const inputElem = searchContainerRef.querySelector('[data-type="search"]');
+      const isAtBeginningOfInput = inputElem && inputElem.selectionStart !== null && inputElem.selectionStart <= 0;
+      const isFocusingAFilterBadge = focusedBadgeIndex > -1;
+      if (isAtBeginningOfInput || isFocusingAFilterBadge) {
+        keyboardNavigation("left", inputElem);
+      }
+    }
+  }, [inputHasFocus, searchContainerRef]));
+  useKeyPress("ArrowRight", useCallback(() => {
+    if (!searchContainerRef) {
+      return;
+    }
+    const { index: focusedBadgeIndex } = getFocusedFilterBadge(searchContainerRef);
+    if (focusedBadgeIndex > -1) {
+      const inputElem = searchContainerRef.querySelector('[data-type="search"]');
+      const isFocusingAFilterBadge = focusedBadgeIndex > -1;
+      if (isFocusingAFilterBadge) {
+        keyboardNavigation("right", inputElem);
+      }
+    }
+  }, [searchContainerRef]));
+  useKeyPress("Backspace", useCallback((event) => {
+    if (!searchContainerRef) {
+      return;
+    }
+    let filtersToRemove = [];
+    const { index: focusedBadgeIndex } = getFocusedFilterBadge(searchContainerRef);
+    const inputElem = searchContainerRef.querySelector('[data-type="search"]');
+    const isFocusingAFilterBadge = focusedBadgeIndex > -1;
+    if (isFocusingAFilterBadge) {
+      if (focusedBadgeIndex === 0) {
+        if (showGuideCategory) {
+          filtersToRemove = ["guideCategory"];
+        } else if (showTag) {
+          filtersToRemove = ["tag"];
+        }
+      } else if (focusedBadgeIndex === 1) {
+        filtersToRemove = ["tag"];
+      }
+    } else {
+      const isAtBeginningOfInput = inputElem && inputElem.selectionStart !== null && inputElem.selectionStart <= 0;
+      if (isAtBeginningOfInput) {
+        if (activeFilterBadges == null ? void 0 : activeFilterBadges.tag) {
+          filtersToRemove = ["tag"];
+        } else if (activeFilterBadges == null ? void 0 : activeFilterBadges.guideCategory) {
+          filtersToRemove = ["guideCategory"];
+        }
+      }
+    }
+    if (filtersToRemove.length > 0) {
+      event.preventDefault();
+      dispatch("quick-filter:remove", { types: filtersToRemove });
+    }
+  }, [searchContainerRef, activeFilterBadges, showTag, showGuideCategory]));
+  const renderBadge = useCallback((type) => {
+    if (type === "guideCategory" && guideCategory && showGuideCategory) {
+      return /* @__PURE__ */ React.createElement(StyledFilterBadge, {
+        text: `@${guideCategory.title}`,
+        routeName: name,
+        filterType: "guideCategory",
+        handleClick: handleFilterBadgeClick,
+        forceFocusStyle: isNavigatingWithKeyBoard,
+        deleteAriaLabel: deleteFilterBadgeAriaLabel,
+        params: __spreadProps(__spreadValues({}, params), {
+          guideCategory: void 0
+        })
+      });
+    }
+    if (type === "tag" && tag && showTag) {
+      return /* @__PURE__ */ React.createElement(StyledFilterBadge, {
+        className: "humany-filter-badge",
+        text: `#${tag.title}`,
+        routeName: name,
+        filterType: "tag",
+        handleClick: handleFilterBadgeClick,
+        forceFocusStyle: isNavigatingWithKeyBoard,
+        deleteAriaLabel: deleteFilterBadgeAriaLabel,
+        params: __spreadProps(__spreadValues({}, params), {
+          tag: void 0
+        })
+      });
+    }
+    return null;
+  }, [guideCategory, tag, name, params, showGuideCategory, showTag, isNavigatingWithKeyBoard]);
+  if (!guideCategory && !tag) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Wrapper$1, {
+    className: "humany-filter-badges",
+    position
+  }, guideCategory && tooltip ? /* @__PURE__ */ React.createElement(Tooltip, {
+    content: /* @__PURE__ */ React.createElement(React.Fragment, null, tooltip),
+    sticky: false
+  }, renderBadge("guideCategory")) : renderBadge("guideCategory"), tag && renderBadge("tag"));
+};
+const Wrapper$1 = styled.div`
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    ${(p) => p.position === "inside" ? css`
+                  &:not(:first-child) {
+                      margin: 0 0 0 ${(p2) => {
+  var _a;
+  return (_a = p2.theme.sizes) == null ? void 0 : _a.normal;
+}};
+                  }
+              ` : css`
+                  margin: ${(p2) => {
+  var _a;
+  return (_a = p2.theme.sizes) == null ? void 0 : _a.small;
+}} 0 0 0;
+                  span:first-child {
+                      margin-left: 0;
+                  }
+              `}
+`;
+const StyledFilterBadge = styled(FilterBadge)`
+    display: flex;
+    align-items: center;
+    padding: ${(p) => {
+  var _a, _b;
+  return `${(_a = p.theme.sizes) == null ? void 0 : _a.small} calc(${(_b = p.theme.sizes) == null ? void 0 : _b.normal}/2) `;
+}};
+    background-color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
+}};
+    border-radius: ${(p) => p.theme.borderRadius};
+    font-weight: 300;
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+    font-style: italic;
+    color: #ffffff;
+    text-decoration: none;
+    white-space: nowrap;
+
+    margin: calc(${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}} / 2);
+
+    &:focus-within {
+        ${(p) => {
+  var _a;
+  return (((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) || p.forceFocusStyle) && css`
+                ${borderTabStyle}
+                background-color: transparent;
+
+                svg {
+                    path {
+                        stroke: ${(p2) => {
+    var _a2;
+    return (_a2 = p2.theme.colors) == null ? void 0 : _a2.primary;
+  }};
+                    }
+                }
+            `;
+}};
+        a {
+            outline: none;
+        }
+    }
+
+    svg {
+        width: 17px;
+        height: 11px;
+        margin: 1px 0 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}};
+        path {
+            stroke: #ffffff;
+            stroke-width: 2px;
+        }
+        order: 1;
+    }
+`;
+const match = (title, phrase) => {
+  if (!phrase || !title) {
+    return true;
+  }
+  return !!(title.toLowerCase().indexOf(phrase.toLowerCase()) > -1);
+};
+const filterItems = (items = [], type, phrase) => {
+  if (!phrase) {
+    return items;
+  }
+  const cloned = deepClone(items);
+  if (type === "tag") {
+    return cloned.filter((i) => match(i.title, phrase));
+  }
+  const matchTrail = buildMatchTrail(cloned, phrase);
+  const filtered = recursiveFilter(cloned, (c) => matchTrail.indexOf(c.id) > -1);
+  return filtered;
+};
+const recursiveFilter = (items, fn) => {
+  return items.filter((i) => {
+    if (i.items && i.items.length) {
+      i.items = recursiveFilter(i.items, fn);
+    }
+    return fn(i);
+  });
+};
+const buildMatchTrail = (categories, phrase) => {
+  const flattened = flatten(categories);
+  const matching = flattened.filter((c) => match(c.title, phrase)).map((c) => c.id);
+  let res = [];
+  matching.forEach((id) => {
+    const trail = categoryTrail(id, categories);
+    res = res.concat(trail);
+  });
+  return res;
+};
+const flatten = (categories) => {
+  let result = [];
+  categories.forEach((category) => {
+    result.push(category);
+    if (Array.isArray(category.items)) {
+      result = result.concat(flatten(category.items));
+    }
+  });
+  return result;
+};
+const getFocusedIndex = (elem) => {
+  const anchors = Array.from((elem == null ? void 0 : elem.getElementsByTagName("A")) || []).filter((a) => a.getAttribute("disabled") === null);
+  return {
+    anchors,
+    focusedIndex: anchors.findIndex((e) => document.activeElement === e)
+  };
+};
+const getInputElem = (searchContainerRef) => {
+  return searchContainerRef ? searchContainerRef.querySelector('[data-type="search"], input[type="search"]') : null;
+};
+const focusInput = (searchContainerRef) => {
+  if (!searchContainerRef) {
+    return;
+  }
+  const inputElem = getInputElem(searchContainerRef);
+  if (inputElem) {
+    inputElem.focus();
+  }
+};
+const QuickFilterItemList = ({
+  filterPhrase,
+  items: rawItems,
+  filterType,
+  filterContainer,
+  searchContainer,
+  inputHasFocus
+}) => {
+  const [items, setItems] = useState(rawItems || []);
+  const [first, setFirst] = useState(null);
+  const dispatch = useDispatch();
+  const { activeFilterBadges, quickFilters } = useProperties();
+  const autoSelect = typeof quickFilters === "object" && !!quickFilters.autoSelect || typeof quickFilters === "boolean" && !!quickFilters;
+  useEffect(() => {
+    setItems(filterItems(rawItems, filterType, filterPhrase));
+  }, [filterPhrase, filterType, rawItems]);
+  useEffect(() => {
+    var _a;
+    if (filterContainer) {
+      const { anchors } = getFocusedIndex(filterContainer);
+      const id = (_a = anchors[0]) == null ? void 0 : _a.getAttribute("data-id");
+      if (id) {
+        setFirst(id);
+      }
+    }
+  }, [items, filterContainer]);
+  const handleItemClicked = useCallback((item, type) => {
+    const data = {
+      category: (activeFilterBadges == null ? void 0 : activeFilterBadges.guideCategory) ? activeFilterBadges.guideCategory.id : void 0,
+      tag: (activeFilterBadges == null ? void 0 : activeFilterBadges.tag) ? activeFilterBadges.tag.id : void 0
+    };
+    if (type === "guideCategory") {
+      data.category = item.id;
+    } else if (type === "tag") {
+      data.tag = item.id;
+    }
+    dispatch("quick-filter:add", data);
+  }, [activeFilterBadges, dispatch]);
+  const buildListProps = (type) => {
+    if (type === "guideCategory") {
+      return {
+        renderItem: (item, level) => /* @__PURE__ */ React.createElement(StyledLink, {
+          autoSelect: autoSelect && inputHasFocus && item.id === first,
+          disabled: !match(item.title, filterPhrase),
+          tabIndex: !match(item.title, filterPhrase) ? -1 : 0,
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              handleItemClicked(item, type);
+            }
+          },
+          "data-level": level,
+          onClick: () => {
+            handleItemClicked(item, type);
+          },
+          "data-id": item.id
+        }, /* @__PURE__ */ React.createElement(Title, {
+          title: item.title,
+          phrase: filterPhrase,
+          matches: match(item.title, filterPhrase)
+        }))
+      };
+    }
+    return {
+      renderLi: true,
+      renderItem: (item) => /* @__PURE__ */ React.createElement(StyledLink, {
+        autoSelect: autoSelect && inputHasFocus && item.id === first,
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            handleItemClicked(item, type);
+          }
+        },
+        onClick: () => {
+          handleItemClicked(item, type);
+        },
+        "data-id": item.id
+      }, /* @__PURE__ */ React.createElement(Title, {
+        symbol: "#",
+        title: item.title,
+        phrase: filterPhrase,
+        matches: match(item.title, filterPhrase)
+      }))
+    };
+  };
+  useEventListener("keydown", (e) => {
+    var _a;
+    const { key } = e;
+    if (!filterContainer || !(key === "ArrowDown" || key === "ArrowUp" || key === "Enter")) {
+      return;
+    }
+    const { anchors, focusedIndex } = getFocusedIndex(filterContainer);
+    if (key === "Enter") {
+      if (inputHasFocus && autoSelect) {
+        const id = (_a = anchors[0]) == null ? void 0 : _a.getAttribute("data-id");
+        if (id) {
+          handleItemClicked({ id }, filterType);
+        }
+      }
+      return;
+    }
+    const focusFirst = () => {
+      var _a2;
+      return (_a2 = anchors[0]) == null ? void 0 : _a2.focus();
+    };
+    const focusLast = () => {
+      var _a2;
+      return (_a2 = anchors[anchors.length - 1]) == null ? void 0 : _a2.focus();
+    };
+    const focusNext = () => {
+      var _a2;
+      return (_a2 = anchors[focusedIndex + 1]) == null ? void 0 : _a2.focus();
+    };
+    const focusPrev = () => {
+      var _a2;
+      return (_a2 = anchors[focusedIndex - 1]) == null ? void 0 : _a2.focus();
+    };
+    if (inputHasFocus) {
+      e.preventDefault();
+      if (key === "ArrowDown") {
+        focusFirst();
+      } else {
+        focusLast();
+      }
+    } else if (focusedIndex > -1) {
+      e.preventDefault();
+      if (key === "ArrowDown") {
+        if (anchors.length > focusedIndex + 1) {
+          focusNext();
+        } else {
+          focusInput(searchContainer);
+        }
+      } else {
+        if (focusedIndex - 1 < 0) {
+          focusInput(searchContainer);
+        } else {
+          focusPrev();
+        }
+      }
+    }
+  }, window);
+  return /* @__PURE__ */ React.createElement(ItemTree, __spreadValues({
+    tree: items,
+    renderEmpty: false,
+    ulProps: { role: "listbox" },
+    liProps: { role: "option" }
+  }, buildListProps(filterType)));
+};
+const Title = ({ title, phrase, matches, symbol = "" }) => {
+  const createTitle = () => {
+    if (!matches || !phrase) {
+      return [title];
+    }
+    const index = title.toLowerCase().indexOf(phrase.toLowerCase());
+    const start2 = title.substr(0, index);
+    const bold2 = title.slice(index, index + phrase.length);
+    const end2 = title.substr(index + phrase.length);
+    return [start2, bold2, end2];
+  };
+  const [start, bold, end] = createTitle();
+  return /* @__PURE__ */ React.createElement(Text, null, symbol, start, bold ? /* @__PURE__ */ React.createElement("strong", null, bold) : null, end ? end : null);
+};
+const disabledCss = css`
+    opacity: 0.5;
+    pointer-events: none;
+`;
+const focused = css`
+    background-color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+    color: #ffffff;
+    outline: none;
+
+    span:first-child {
+        border-color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+    }
+`;
+const StyledLink = styled(Link)`
+    display: block;
+    text-decoration: none;
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+
+    ${(p) => p.disabled && disabledCss}
+    color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+    background-color: transparent;
+
+    span {
+        display: block;
+        ${(p) => {
+  var _a, _b, _c, _d;
+  return p["data-level"] ? `padding: calc(${(_a = p.theme.sizes) == null ? void 0 : _a.normal} / 2) ${(_b = p.theme.sizes) == null ? void 0 : _b.normal};` : `padding: calc(${(_c = p.theme.sizes) == null ? void 0 : _c.normal} / 2) ${(_d = p.theme.sizes) == null ? void 0 : _d.medium};  `;
+}}
+        ${(p) => p["data-level"] && "border-left: 2px solid"}
+    }
+
+    span:first-child {
+        border-color: #e7e7e7;
+    }
+
+    ${(p) => {
+  var _a;
+  return p["data-level"] && `padding: 0 calc(${(_a = p.theme.sizes) == null ? void 0 : _a.medium} * ${p["data-level"]});`;
+}}
+
+    ${(p) => p.autoSelect && focused}
+
+  &:hover,
+  &:focus {
+        ${focused}
+    }
+`;
+var QuickFilter = ({ phrase = "", inputHasFocus, searchContainerRef }) => {
+  const {
+    quickFilter = {
+      open: false,
+      loading: false,
+      symbol: "",
+      type: "",
+      items: []
+    }
+  } = useProperties();
+  const [css2, ref] = useScroll(true);
+  const container = useContainer();
+  const { events } = container.get("$widget");
+  const wrapperRef = useRef();
+  const setWrapperRef = useCallback((node) => {
+    if (node) {
+      node.addEventListener("keydown", () => {
+        const listItemFocused = getFocusedIndex(node).focusedIndex > -1;
+        if (listItemFocused) {
+          events.subscribeOnce("router:changed", () => {
+            focusInput(searchContainerRef);
+          });
+        }
+      }, true);
+    }
+    wrapperRef.current = node;
+    return node;
+  }, [searchContainerRef]);
+  const { items = [], symbol, type, open, loading } = quickFilter;
+  if (!open || !symbol) {
+    return null;
+  }
+  const filterPhrase = phrase.slice(phrase.indexOf(symbol) + 1);
+  return /* @__PURE__ */ React.createElement(Wrapper, {
+    ref: setWrapperRef,
+    "data-loading": loading,
+    className: appendClassNames("humany-quick-filter-dropdown", [type === "guideCategory", "humany-quick-filter-guide-categories"], [type === "tag", "humany-quick-filter-tags"])
+  }, /* @__PURE__ */ React.createElement(Inner$1, {
+    className: "humany-quick-filter-dropdown-inner",
+    css: css2,
+    ref
+  }, /* @__PURE__ */ React.createElement(QuickFilterItemList, {
+    filterType: type,
+    items,
+    filterPhrase,
+    filterContainer: ref.current,
+    searchContainer: searchContainerRef,
+    inputHasFocus
+  })), /* @__PURE__ */ React.createElement(Loader, {
+    loading
+  }));
+};
+const Wrapper = styled.div`
+    ${contentBox};
+    position: absolute;
+    top: calc(100% + ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}});
+    left: 0;
+    right: 0;
+    z-index: 1;
+    overflow: hidden;
+`;
+const Inner$1 = styled.div`
+    max-height: 300px;
+    overflow: auto;
+    padding: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
+}} 0;
+    ${(p) => p.css}
+    ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+    li div {
+        ${(p) => {
+  var _a;
+  return `margin: ${(_a = p.theme.sizes) == null ? void 0 : _a.normal} 0;`;
+}}
+    }
+`;
+const filterChanged = (newValue, oldValue) => {
+  if (newValue && !oldValue) {
+    return true;
+  }
+  if (!newValue && oldValue) {
+    return true;
+  }
+  if (newValue && oldValue) {
+    if (newValue.id !== oldValue.id) {
+      return true;
+    }
+  }
+  return false;
+};
+var useSearch = (phrase, params = {}, debounce = true) => {
+  const dispatch = useDispatch();
+  const {
+    quickFilters = false,
+    quickFilter = { open: false },
+    activeFilterBadges,
+    filterBadges = false,
+    incremental = 600
+  } = useProperties();
+  const debouncedPhrase = useDebounce(phrase, typeof incremental === "boolean" ? 600 : incremental);
+  const previousDebouncedPhrase = usePrevious(debouncedPhrase);
+  const previousFilters = usePrevious(activeFilterBadges);
+  const ref = useRef(null);
+  const dispatchSearch = useCallback((value = "") => {
+    if (filterBadges) {
+      const filtersChanged = filterChanged(activeFilterBadges == null ? void 0 : activeFilterBadges.guideCategory, previousFilters == null ? void 0 : previousFilters.guideCategory) || filterChanged(activeFilterBadges == null ? void 0 : activeFilterBadges.tag, previousFilters == null ? void 0 : previousFilters.tag);
+      return dispatch("search", { value, filtersChanged, filters: activeFilterBadges });
+    }
+    return dispatch("search", { value });
+  }, [dispatch, activeFilterBadges]);
+  const dispatchClear = useCallback((navigateToHome) => {
+    dispatch("clear", { navigateToHome });
+  }, [dispatch]);
+  const removeFilterKeywords = (input) => {
+    if (quickFilters) {
+      return input.replace(/([@#].*)/g, "");
+    }
+    return input;
+  };
+  const submitSearch = useCallback((arg) => {
+    if (quickFilter.open && arg.preventDefault) {
+      arg.preventDefault();
+      return;
+    }
+    const activeElement = document.activeElement;
+    const isSearching = ref.current && typeof ref.current.contains === "function" ? ref.current.contains(activeElement) : false;
+    const cleanedPhrase = removeFilterKeywords(phrase);
+    if (typeof arg === "boolean" && arg || cleanedPhrase.length && isSearching || (activeFilterBadges == null ? void 0 : activeFilterBadges.guideCategory) || (activeFilterBadges == null ? void 0 : activeFilterBadges.tag) && isSearching) {
+      dispatchSearch(cleanedPhrase);
+    } else {
+      dispatchClear(isSearching);
+    }
+  }, [ref, phrase, quickFilter, dispatchClear, activeFilterBadges, dispatchSearch]);
+  useEffect(() => {
+    const filtersChanged = filterChanged(activeFilterBadges == null ? void 0 : activeFilterBadges.guideCategory, previousFilters == null ? void 0 : previousFilters.guideCategory) || filterChanged(activeFilterBadges == null ? void 0 : activeFilterBadges.tag, previousFilters == null ? void 0 : previousFilters.tag);
+    const phrase2 = debouncedPhrase ? removeFilterKeywords(debouncedPhrase) : debouncedPhrase;
+    const previousPhrase = previousDebouncedPhrase ? removeFilterKeywords(previousDebouncedPhrase) : previousDebouncedPhrase;
+    if (typeof previousPhrase !== "undefined" && previousPhrase !== phrase2 && phrase2 !== params.phrase && debounce && !quickFilter.open || filtersChanged && !(activeFilterBadges == null ? void 0 : activeFilterBadges.initial)) {
+      submitSearch(filtersChanged);
+    }
+  }, [debouncedPhrase, quickFilter.open, activeFilterBadges, submitSearch]);
+  useEffect(() => {
+    if (phrase && quickFilters) {
+      const quickFiltersGuideCategory = typeof quickFilters === "boolean" && !!quickFilters || typeof quickFilters === "object" && !!quickFilters.guideCategory;
+      const quickFiltersTag = typeof quickFilters === "boolean" && !!quickFilters || typeof quickFilters === "object" && !!quickFilters.tag;
+      if (quickFiltersGuideCategory && phrase.indexOf("@") === phrase.length - 1) {
+        dispatch("quick-filter:open", { type: "guideCategory", symbol: "@" });
+      }
+      if (quickFiltersTag && phrase.indexOf("#") === phrase.length - 1) {
+        dispatch("quick-filter:open", { type: "tag", symbol: "#" });
+      }
+    }
+    if (quickFilter.open && phrase.indexOf("@") === -1 && phrase.indexOf("#") === -1) {
+      dispatch("quick-filter:close");
+    }
+  }, [phrase]);
+  return [submitSearch, dispatchClear, ref];
+};
+const Search = (_c) => {
+  var _d = _c, { className } = _d, other = __objRest(_d, ["className"]);
+  const {
+    showSearchButton,
+    showClearButton,
+    role = "search",
+    autoFocus,
+    placeholder,
+    searchButtonLabel,
+    clearButtonLabel,
+    ariaLabel,
+    route: searchRoute = "search",
+    incremental = true,
+    showChildren = false,
+    quickFilter,
+    quickFilters: quickFiltersEnabled,
+    filterBadges
+  } = useProperties();
+  const { params } = useRouteData();
+  const [hasFocus, setHasFocus] = useState(false);
+  const [phrase, setPhrase] = useState(params.phrase || "");
+  const [showFilterBadges, setShowFilterBadges] = useState({
+    guideCategory: false,
+    tag: false
+  });
+  const container = useContainer();
+  const children = useChildren();
+  const dispatch = useDispatch();
+  const { position: filterBadgePosition = "inside" } = typeof filterBadges === "object" ? filterBadges : {};
+  useEffect(() => {
+    const { guideCategory, tag } = params;
+    const showGuideCategory = typeof filterBadges === "object" ? !!filterBadges.guideCategory : !!filterBadges;
+    const showTag = typeof filterBadges === "object" ? !!filterBadges.tag : !!filterBadges;
+    setShowFilterBadges({
+      guideCategory: showGuideCategory && !!guideCategory,
+      tag: showTag && !!tag
+    });
+  }, [filterBadges, params]);
+  useWidgetEvent("router:changed", () => {
+    if (quickFilter) {
+      const { open, symbol } = quickFilter;
+      if (open) {
+        if (symbol) {
+          const cleaned = phrase.replace(phrase.slice(phrase.indexOf(symbol)), "");
+          setPhrase(cleaned);
+        }
+        dispatch("quick-filter:close");
+      }
+    }
+  }, [quickFilter, phrase, setPhrase, dispatch]);
+  const [search, clear, elem] = useSearch(phrase, params, !!incremental);
+  useEffect(() => {
+    setPhrase(params.phrase || "");
+  }, [params.phrase]);
+  const onChange = useCallback((value) => {
+    setPhrase(value);
+  }, [setPhrase]);
+  const onEscape = useCallback(() => {
+    dispatch("quick-filter:close").then(() => clear(true));
+  }, [dispatch, clear]);
+  const autoFocusHandler = useCallback(() => {
+    var _a, _b;
+    if (autoFocus && !hasFocus) {
+      (_b = (_a = elem.current) == null ? void 0 : _a.getElementsByTagName("input")[0]) == null ? void 0 : _b.focus();
+    }
+  }, [autoFocus, hasFocus, elem]);
+  const onClearButtonClick = useCallback(() => {
+    container.getAsync("router").then((router) => {
+      const initialRoute = router.getInitialRoute();
+      const currentRoute = router.getRouteData();
+      if ((initialRoute == null ? void 0 : initialRoute.name) === currentRoute.name && (initialRoute == null ? void 0 : initialRoute.name) !== searchRoute) {
+        setPhrase("");
+      } else {
+        clear(true);
+      }
+    });
+  }, [container, setPhrase, clear]);
+  const renderFilterBadges = (position) => {
+    if (position !== filterBadgePosition) {
+      return null;
+    }
+    if (!!showFilterBadges.guideCategory || !!showFilterBadges.tag) {
+      return /* @__PURE__ */ React.createElement(FilterBadges, {
+        position,
+        inputHasFocus: hasFocus,
+        showGuideCategory: showFilterBadges.guideCategory,
+        showTag: showFilterBadges.tag,
+        searchContainerRef: elem.current
+      });
+    }
+  };
+  useTransitionEnd(autoFocusHandler);
+  const showClear = showClearButton && (showFilterBadges.guideCategory || showFilterBadges.tag || phrase);
+  const quickFilterAccessibilityProps = quickFiltersEnabled ? convertToStringAttributes({
+    role: "combobox",
+    "aria-autocomplete": "list",
+    autoComplete: "off",
+    "aria-haspopup": "listbox"
+  }) : {};
+  return /* @__PURE__ */ React.createElement(StyledSearchWrapper, __spreadProps(__spreadValues({}, other), {
+    ref: elem,
+    role,
+    className: appendClassNames(className, "humany-search"),
+    "data-has-phrase": !!phrase,
+    "data-has-focus": hasFocus,
+    "data-has-search-symbol": showSearchButton ? "true" : "false"
+  }), /* @__PURE__ */ React.createElement(Inner, {
+    action: ".",
+    onSubmit: (e) => {
+      var _a, _b;
+      e.preventDefault();
+      (_b = (_a = elem.current) == null ? void 0 : _a.getElementsByTagName("input")[0]) == null ? void 0 : _b.blur();
+    },
+    "data-has-focus": hasFocus
+  }, showSearchButton && /* @__PURE__ */ React.createElement(SearchButton, {
+    "aria-label": searchButtonLabel,
+    type: "submit",
+    title: searchButtonLabel,
+    disabled: !phrase,
+    onClick: search,
+    "data-has-phrase": !!phrase,
+    "data-has-focus": hasFocus
+  }, /* @__PURE__ */ React.createElement(SymbolBadge, {
+    size: 32,
+    symbol: { type: "Svg", content: "search" }
+  })), renderFilterBadges("inside"), /* @__PURE__ */ React.createElement(Input, __spreadProps(__spreadValues({
+    type: "search",
+    "aria-label": ariaLabel
+  }, quickFilterAccessibilityProps), {
+    placeholder: showFilterBadges.guideCategory || showFilterBadges.tag ? "" : placeholder,
+    onFocusChange: setHasFocus,
+    onEscape,
+    onEnter: search,
+    onChange,
+    value: phrase
+  })), showClear && /* @__PURE__ */ React.createElement(ClearButton, {
+    "aria-label": clearButtonLabel,
+    type: "reset",
+    hasFocus,
+    title: clearButtonLabel,
+    onClick: onClearButtonClick
+  }, /* @__PURE__ */ React.createElement(SymbolBadge, {
+    size: 27,
+    symbol: { type: "Svg", content: "clear" }
+  })), showChildren && !showClear && children.map((child) => /* @__PURE__ */ React.createElement(Component, {
+    key: child.id,
+    id: child.id,
+    branch: "default"
+  })), /* @__PURE__ */ React.createElement(QuickFilter, {
+    inputHasFocus: hasFocus,
+    phrase,
+    searchContainerRef: elem.current
+  })), renderFilterBadges("below"));
+};
+const StyledSearchWrapper = styled.div`
+    ${contentBox};
+    width: 100%;
+    padding: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.large;
+}};
+
+    input {
+        background-color: transparent;
+        border: none;
+        outline: none;
+        min-width: 25%;
+        flex: 1;
+        font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+        font-weight: 300;
+        font-style: italic;
+        padding: 1em 0;
+        color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+        -webkit-appearance: none;
+
+        ${(p) => {
+  var _a;
+  return p["data-has-search-symbol"] === "true" && `text-indent: ${(_a = p.theme.sizes) == null ? void 0 : _a.normal};`;
+}}
+
+        ::placeholder {
+            color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+        }
+        /* removes the 'X' from IE */
+        &[type='search']::-ms-clear {
+            display: none;
+            width: 0;
+            height: 0;
+        }
+        &[type='search']::-ms-reveal {
+            display: none;
+            width: 0;
+            height: 0;
+        }
+
+        /* removes the 'X' from Chrome */
+        &[type='search']::-webkit-search-decoration,
+        &[type='search']::-webkit-search-cancel-button,
+        &[type='search']::-webkit-search-results-button,
+        &[type='search']::-webkit-search-results-decoration {
+            display: none;
+        }
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    button {
+        background: transparent;
+        border: none;
+        padding: 0;
+        font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.large;
+}};
+        transition: color 200ms ease-out;
+        color: ${(p) => {
+  var _a;
+  return p["data-has-focus"] || p["data-has-phrase"] ? (_a = p.theme.colors) == null ? void 0 : _a.primary : "#000000";
+}};
+        cursor: pointer;
+        > svg {
+            height: 100%;
+        }
+    }
+`;
+const Inner = styled.form`
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    border: ${(p) => p.theme.inputBorder};
+    border-radius: ${(p) => p.theme.borderRadius};
+    background-color: #ffffff;
+    position: relative;
+    padding: 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+
+    ${(p) => p["data-has-focus"] && css`
+            ${(p2) => {
+  var _a, _b;
+  return ((_a = p2.theme.accessibility) == null ? void 0 : _a.isTabbing) ? borderTabStyle : `
+        border-color: ${(_b = p2.theme.colors) == null ? void 0 : _b.primary};
+        outline: none;
+        input {
+          outline: none;
+        }
+      `;
+}}
+        `};
+`;
+const SearchButton = styled(Button)`
+    padding: 0;
+    height: 2em;
+
+    svg {
+        circle,
+        line {
+            stroke: ${(p) => {
+  var _a;
+  return p["data-has-focus"] ? (_a = p.theme.colors) == null ? void 0 : _a.primary : "#000000";
+}};
+        }
+    }
+`;
+const ClearButton = styled(Button)`
+    &:focus svg {
+        ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && borderTabStyle;
+}}
+    }
+
+    svg {
+        vertical-align: top;
+
+        circle,
+        line,
+        path {
+            stroke: ${(p) => {
+  var _a, _b;
+  return p.hasFocus ? (_a = p.theme.colors) == null ? void 0 : _a.primary : (_b = p.theme.colors) == null ? void 0 : _b.text;
+}};
+        }
+    }
+`;
+export { Search as default };
+//# sourceMappingURL=search.js.map