@telia-ace/knowledge-widget-components-search 1.0.1

package/lib/utils.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterItems = exports.match = void 0;
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var match = function (title, phrase) {
+    if (!phrase || !title) {
+        return true;
+    }
+    return !!(title.toLowerCase().indexOf(phrase.toLowerCase()) > -1);
+};
+exports.match = match;
+var filterItems = function (items, type, phrase) {
+    if (items === void 0) { items = []; }
+    if (!phrase) {
+        return items;
+    }
+    var cloned = (0, widget_utilities_1.deepClone)(items);
+    if (type === 'tag') {
+        return cloned.filter(function (i) { return (0, exports.match)(i.title, phrase); });
+    }
+    var matchTrail = buildMatchTrail(cloned, phrase);
+    var filtered = recursiveFilter(cloned, function (c) { return matchTrail.indexOf(c.id) > -1; });
+    return filtered;
+};
+exports.filterItems = filterItems;
+var recursiveFilter = function (items, fn) {
+    return items.filter(function (i) {
+        if (i.items && i.items.length) {
+            i.items = recursiveFilter(i.items, fn);
+        }
+        return fn(i);
+    });
+};
+var buildMatchTrail = function (categories, phrase) {
+    var flattened = flatten(categories);
+    var matching = flattened.filter(function (c) { return (0, exports.match)(c.title, phrase); }).map(function (c) { return c.id; });
+    var res = [];
+    matching.forEach(function (id) {
+        var trail = (0, widget_utilities_1.categoryTrail)(id, categories);
+        res = res.concat(trail);
+    });
+    return res;
+};
+var flatten = function (categories) {
+    var result = [];
+    categories.forEach(function (category) {
+        result.push(category);
+        if (Array.isArray(category.items)) {
+            result = result.concat(flatten(category.items));
+        }
+    });
+    return result;
+};

package/lib-esm/filter-badges.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare type Props = {
+    inputHasFocus: boolean;
+    searchContainerRef: HTMLElement | null;
+    showGuideCategory: boolean;
+    showTag: boolean;
+    position: 'inside' | 'below';
+};
+declare const FilterBadges: React.FC<Props>;
+export default FilterBadges;

package/lib-esm/filter-badges.js

@@ -0,0 +1,210 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { borderTabStyle, Link, SymbolBadge, Text, Tooltip, useDispatch, useEventListener, useKeyPress, useProperties, useRouteData, } from '@telia-ace/knowledge-widget-ui';
+import { appendClassNames } from '@telia-ace/widget-utilities';
+import React, { useCallback, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+var FilterBadge = function (_a) {
+    var text = _a.text, className = _a.className, forceFocusStyle = _a.forceFocusStyle, filterType = _a.filterType, handleClick = _a.handleClick, _b = _a.deleteAriaLabel, deleteAriaLabel = _b === void 0 ? '' : _b, p = __rest(_a, ["text", "className", "forceFocusStyle", "filterType", "handleClick", "deleteAriaLabel"]);
+    var ref = useRef();
+    return (React.createElement(Text, { className: appendClassNames(className, 'humany-filter-badge'), onKeyDown: function (e) {
+            if (e.key === 'Enter') {
+                handleClick(e, filterType);
+            }
+        } },
+        text,
+        React.createElement(Link, __assign({}, p, { ref: ref, tabIndex: 0, role: "button", "aria-label": deleteAriaLabel.replace('{{item}}', text), onClick: function (e) { return handleClick(e, filterType); } }),
+            React.createElement(SymbolBadge, { size: 13, symbol: { type: 'Svg', content: 'close' } }))));
+};
+var FilterBadges = function (_a) {
+    var inputHasFocus = _a.inputHasFocus, searchContainerRef = _a.searchContainerRef, showTag = _a.showTag, showGuideCategory = _a.showGuideCategory, position = _a.position;
+    var _b = useProperties(), _c = _b.activeFilterBadges, activeFilterBadges = _c === void 0 ? {} : _c, _d = _b.deleteFilterBadgeAriaLabel, deleteFilterBadgeAriaLabel = _d === void 0 ? '' : _d;
+    var dispatch = useDispatch();
+    var _e = useRouteData(), name = _e.name, params = _e.params;
+    var _f = __read(useState(false), 2), isNavigatingWithKeyBoard = _f[0], setIsNavigatingWithKeyboard = _f[1];
+    var onKeyDown = useCallback(function (event) {
+        var key = event.key;
+        if (['ArrowLeft', 'ArrowRight'].indexOf(key) === -1) {
+            setIsNavigatingWithKeyboard(false);
+        }
+    }, []);
+    useEventListener('keydown', onKeyDown, window);
+    useEventListener('click', onKeyDown, window);
+    var guideCategory = activeFilterBadges.guideCategory, tag = activeFilterBadges.tag, tooltip = activeFilterBadges.tooltip;
+    var getFocusedFilterBadge = function (container) {
+        var badges = container.querySelectorAll('.humany-filter-badge');
+        return {
+            badges: badges,
+            index: Array.from(badges).findIndex(function (e) { return document.activeElement === e; }),
+        };
+    };
+    var handleFilterBadgeClick = function (event, filterType) {
+        event.preventDefault();
+        dispatch('quick-filter:remove', { types: [filterType] });
+    };
+    var keyboardNavigation = function (direction, inputElem) {
+        if (!searchContainerRef) {
+            return;
+        }
+        var _a = getFocusedFilterBadge(searchContainerRef), badges = _a.badges, currentFocusedIndex = _a.index;
+        if (badges.length) {
+            var toFocus = null;
+            if (direction === 'left') {
+                if (currentFocusedIndex === -1) {
+                    // if no badge is focused and direction is left
+                    // focus last badge
+                    toFocus = badges.item(badges.length - 1);
+                }
+                else if (currentFocusedIndex > 0) {
+                    // if there are more badges to the left, go one step back
+                    // do nothing if already focusing the most left badge
+                    toFocus = badges.item(currentFocusedIndex - 1);
+                }
+            }
+            else if (direction === 'right') {
+                if (currentFocusedIndex === badges.length - 1) {
+                    // if currently focusing the last badge, move focus to search input
+                    inputElem && inputElem.focus();
+                }
+                else if (badges.item(currentFocusedIndex + 1)) {
+                    toFocus = badges.item(currentFocusedIndex + 1);
+                }
+            }
+            if (toFocus) {
+                toFocus.focus();
+                setIsNavigatingWithKeyboard(true);
+            }
+        }
+    };
+    useKeyPress('ArrowLeft', useCallback(function () {
+        if (!searchContainerRef) {
+            return;
+        }
+        var focusedBadgeIndex = getFocusedFilterBadge(searchContainerRef).index;
+        if (inputHasFocus || focusedBadgeIndex > -1) {
+            var inputElem = searchContainerRef.querySelector('[data-type="search"]');
+            var isAtBeginningOfInput = inputElem && inputElem.selectionStart !== null && inputElem.selectionStart <= 0;
+            var isFocusingAFilterBadge = focusedBadgeIndex > -1;
+            if (isAtBeginningOfInput || isFocusingAFilterBadge) {
+                keyboardNavigation('left', inputElem);
+            }
+        }
+    }, [inputHasFocus, searchContainerRef]));
+    useKeyPress('ArrowRight', useCallback(function () {
+        if (!searchContainerRef) {
+            return;
+        }
+        var focusedBadgeIndex = getFocusedFilterBadge(searchContainerRef).index;
+        if (focusedBadgeIndex > -1) {
+            var inputElem = searchContainerRef.querySelector('[data-type="search"]');
+            var isFocusingAFilterBadge = focusedBadgeIndex > -1;
+            if (isFocusingAFilterBadge) {
+                keyboardNavigation('right', inputElem);
+            }
+        }
+    }, [searchContainerRef]));
+    useKeyPress('Backspace', useCallback(function (event) {
+        if (!searchContainerRef) {
+            return;
+        }
+        var filtersToRemove = [];
+        var focusedBadgeIndex = getFocusedFilterBadge(searchContainerRef).index;
+        var inputElem = searchContainerRef.querySelector('[data-type="search"]');
+        var isFocusingAFilterBadge = focusedBadgeIndex > -1;
+        if (isFocusingAFilterBadge) {
+            if (focusedBadgeIndex === 0) {
+                if (showGuideCategory) {
+                    filtersToRemove = ['guideCategory'];
+                }
+                else if (showTag) {
+                    filtersToRemove = ['tag'];
+                }
+            }
+            else if (focusedBadgeIndex === 1) {
+                filtersToRemove = ['tag'];
+            }
+        }
+        else {
+            var isAtBeginningOfInput = inputElem &&
+                inputElem.selectionStart !== null &&
+                inputElem.selectionStart <= 0;
+            if (isAtBeginningOfInput) {
+                if (activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.tag) {
+                    filtersToRemove = ['tag'];
+                }
+                else if (activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.guideCategory) {
+                    filtersToRemove = ['guideCategory'];
+                }
+            }
+        }
+        if (filtersToRemove.length > 0) {
+            event.preventDefault();
+            dispatch('quick-filter:remove', { types: filtersToRemove });
+        }
+    }, [searchContainerRef, activeFilterBadges, showTag, showGuideCategory]));
+    var renderBadge = useCallback(function (type) {
+        if (type === 'guideCategory' && guideCategory && showGuideCategory) {
+            return (React.createElement(StyledFilterBadge, { text: "@".concat(guideCategory.title), routeName: name, filterType: "guideCategory", handleClick: handleFilterBadgeClick, forceFocusStyle: isNavigatingWithKeyBoard, deleteAriaLabel: deleteFilterBadgeAriaLabel, params: __assign(__assign({}, params), { guideCategory: undefined }) }));
+        }
+        if (type === 'tag' && tag && showTag) {
+            return (React.createElement(StyledFilterBadge, { className: "humany-filter-badge", text: "#".concat(tag.title), routeName: name, filterType: "tag", handleClick: handleFilterBadgeClick, forceFocusStyle: isNavigatingWithKeyBoard, deleteAriaLabel: deleteFilterBadgeAriaLabel, params: __assign(__assign({}, params), { tag: undefined }) }));
+        }
+        return null;
+    }, [guideCategory, tag, name, params, showGuideCategory, showTag, isNavigatingWithKeyBoard]);
+    if (!guideCategory && !tag) {
+        return null;
+    }
+    return (React.createElement(Wrapper, { className: "humany-filter-badges", position: position },
+        guideCategory && tooltip ? (React.createElement(Tooltip, { content: React.createElement(React.Fragment, null, tooltip), sticky: false }, renderBadge('guideCategory'))) : (renderBadge('guideCategory')),
+        tag && renderBadge('tag')));
+};
+export default FilterBadges;
+var Wrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    ", "\n"], ["\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    ", "\n"])), function (p) {
+    return p.position === 'inside'
+        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                  &:not(:first-child) {\n                      margin: 0 0 0 ", ";\n                  }\n              "], ["\n                  &:not(:first-child) {\n                      margin: 0 0 0 ", ";\n                  }\n              "])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                  margin: ", " 0 0 0;\n                  span:first-child {\n                      margin-left: 0;\n                  }\n              "], ["\n                  margin: ", " 0 0 0;\n                  span:first-child {\n                      margin-left: 0;\n                  }\n              "])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
+});
+var StyledFilterBadge = styled(FilterBadge)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    padding: ", ";\n    background-color: ", ";\n    border-radius: ", ";\n    font-weight: 300;\n    font-size: ", ";\n    font-style: italic;\n    color: #ffffff;\n    text-decoration: none;\n    white-space: nowrap;\n\n    margin: calc(", " / 2);\n\n    &:focus-within {\n        ", ";\n        a {\n            outline: none;\n        }\n    }\n\n    svg {\n        width: 17px;\n        height: 11px;\n        margin: 1px 0 0 ", ";\n        path {\n            stroke: #ffffff;\n            stroke-width: 2px;\n        }\n        order: 1;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    padding: ", ";\n    background-color: ", ";\n    border-radius: ", ";\n    font-weight: 300;\n    font-size: ", ";\n    font-style: italic;\n    color: #ffffff;\n    text-decoration: none;\n    white-space: nowrap;\n\n    margin: calc(", " / 2);\n\n    &:focus-within {\n        ", ";\n        a {\n            outline: none;\n        }\n    }\n\n    svg {\n        width: 17px;\n        height: 11px;\n        margin: 1px 0 0 ", ";\n        path {\n            stroke: #ffffff;\n            stroke-width: 2px;\n        }\n        order: 1;\n    }\n"])), function (p) { var _a, _b; return "".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small, " calc(").concat((_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.normal, "/2) "); }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) { return p.theme.borderRadius; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) {
+    var _a;
+    return (((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) || p.forceFocusStyle) && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                ", "\n                background-color: transparent;\n\n                svg {\n                    path {\n                        stroke: ", ";\n                    }\n                }\n            "], ["\n                ", "\n                background-color: transparent;\n\n                svg {\n                    path {\n                        stroke: ", ";\n                    }\n                }\n            "])), borderTabStyle, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; });
+}, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/lib-esm/index.d.ts

@@ -0,0 +1,2 @@
+import SearchComponent from './search-component';
+export default SearchComponent;

package/lib-esm/index.js

@@ -0,0 +1,2 @@
+import SearchComponent from './search-component';
+export default SearchComponent;

package/lib-esm/quick-filter-item-list.d.ts

@@ -0,0 +1,17 @@
+import { Category, Tag } from '@telia-ace/knowledge-widget-core';
+import React from 'react';
+declare type Props = {
+    filterPhrase: string;
+    items: Category[] | Tag[];
+    filterType: 'guideCategory' | 'tag';
+    searchContainer: HTMLElement | null;
+    filterContainer: HTMLElement | null;
+    inputHasFocus: boolean;
+};
+export declare const getFocusedIndex: (elem: HTMLElement) => {
+    anchors: HTMLAnchorElement[];
+    focusedIndex: number;
+};
+export declare const focusInput: (searchContainerRef: HTMLElement | null) => void;
+declare const QuickFilterItemList: React.FC<Props>;
+export default QuickFilterItemList;

package/lib-esm/quick-filter-item-list.js

@@ -0,0 +1,200 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { ItemTree, Link, Text, useDispatch, useEventListener, useProperties, } from '@telia-ace/knowledge-widget-ui';
+import React, { useCallback, useEffect, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { filterItems, match } from './utils';
+export var getFocusedIndex = function (elem) {
+    var anchors = Array.from((elem === null || elem === void 0 ? void 0 : elem.getElementsByTagName('A')) || []).filter(function (a) { return a.getAttribute('disabled') === null; });
+    return {
+        anchors: anchors,
+        focusedIndex: anchors.findIndex(function (e) { return document.activeElement === e; }),
+    };
+};
+var getInputElem = function (searchContainerRef) {
+    return searchContainerRef
+        ? searchContainerRef.querySelector('[data-type="search"], input[type="search"]')
+        : null;
+};
+export var focusInput = function (searchContainerRef) {
+    if (!searchContainerRef) {
+        return;
+    }
+    var inputElem = getInputElem(searchContainerRef);
+    if (inputElem) {
+        inputElem.focus();
+    }
+};
+var QuickFilterItemList = function (_a) {
+    var filterPhrase = _a.filterPhrase, rawItems = _a.items, filterType = _a.filterType, filterContainer = _a.filterContainer, searchContainer = _a.searchContainer, inputHasFocus = _a.inputHasFocus;
+    var _b = __read(useState(rawItems || []), 2), items = _b[0], setItems = _b[1];
+    var _c = __read(useState(null), 2), first = _c[0], setFirst = _c[1];
+    var dispatch = useDispatch();
+    var _d = useProperties(), activeFilterBadges = _d.activeFilterBadges, quickFilters = _d.quickFilters;
+    var autoSelect = (typeof quickFilters === 'object' && !!quickFilters.autoSelect) ||
+        (typeof quickFilters === 'boolean' && !!quickFilters);
+    useEffect(function () {
+        setItems(filterItems(rawItems, filterType, filterPhrase));
+    }, [filterPhrase, filterType, rawItems]);
+    useEffect(function () {
+        var _a;
+        if (filterContainer) {
+            var anchors = getFocusedIndex(filterContainer).anchors;
+            var id = (_a = anchors[0]) === null || _a === void 0 ? void 0 : _a.getAttribute('data-id');
+            if (id) {
+                setFirst(id);
+            }
+        }
+    }, [items, filterContainer]);
+    var handleItemClicked = useCallback(function (item, type) {
+        var data = {
+            category: (activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.guideCategory)
+                ? activeFilterBadges.guideCategory.id
+                : undefined,
+            tag: (activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.tag) ? activeFilterBadges.tag.id : undefined,
+        };
+        if (type === 'guideCategory') {
+            data.category = item.id;
+        }
+        else if (type === 'tag') {
+            data.tag = item.id;
+        }
+        dispatch('quick-filter:add', data);
+    }, [activeFilterBadges, dispatch]);
+    var buildListProps = function (type) {
+        if (type === 'guideCategory') {
+            return {
+                renderItem: function (item, level) { return (React.createElement(StyledLink, { autoSelect: autoSelect && inputHasFocus && item.id === first, disabled: !match(item.title, filterPhrase), tabIndex: !match(item.title, filterPhrase) ? -1 : 0, onKeyDown: function (e) {
+                        if (e.key === 'Enter') {
+                            handleItemClicked(item, type);
+                        }
+                    }, "data-level": level, onClick: function () {
+                        handleItemClicked(item, type);
+                    }, "data-id": item.id },
+                    React.createElement(Title, { title: item.title, phrase: filterPhrase, matches: match(item.title, filterPhrase) }))); },
+            };
+        }
+        return {
+            renderLi: true,
+            renderItem: function (item) { return (React.createElement(StyledLink, { autoSelect: autoSelect && inputHasFocus && item.id === first, onKeyDown: function (e) {
+                    if (e.key === 'Enter') {
+                        handleItemClicked(item, type);
+                    }
+                }, onClick: function () {
+                    handleItemClicked(item, type);
+                }, "data-id": item.id },
+                React.createElement(Title, { symbol: "#", title: item.title, phrase: filterPhrase, matches: match(item.title, filterPhrase) }))); },
+        };
+    };
+    useEventListener('keydown', function (e) {
+        var _a;
+        var key = e.key;
+        if (!filterContainer ||
+            !(key === 'ArrowDown' || key === 'ArrowUp' || key === 'Enter')) {
+            return;
+        }
+        var _b = getFocusedIndex(filterContainer), anchors = _b.anchors, focusedIndex = _b.focusedIndex;
+        if (key === 'Enter') {
+            if (inputHasFocus && autoSelect) {
+                var id = (_a = anchors[0]) === null || _a === void 0 ? void 0 : _a.getAttribute('data-id');
+                if (id) {
+                    handleItemClicked({ id: id }, filterType);
+                }
+            }
+            return;
+        }
+        var focusFirst = function () { var _a; return (_a = anchors[0]) === null || _a === void 0 ? void 0 : _a.focus(); };
+        var focusLast = function () { var _a; return (_a = anchors[anchors.length - 1]) === null || _a === void 0 ? void 0 : _a.focus(); };
+        var focusNext = function () { var _a; return (_a = anchors[focusedIndex + 1]) === null || _a === void 0 ? void 0 : _a.focus(); };
+        var focusPrev = function () { var _a; return (_a = anchors[focusedIndex - 1]) === null || _a === void 0 ? void 0 : _a.focus(); };
+        if (inputHasFocus) {
+            // Input is focused
+            e.preventDefault();
+            if (key === 'ArrowDown') {
+                focusFirst();
+            }
+            else {
+                focusLast();
+            }
+        }
+        else if (focusedIndex > -1) {
+            // A quick-filter-item is focused
+            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 (React.createElement(ItemTree, __assign({ tree: items, renderEmpty: false, ulProps: { role: 'listbox' }, liProps: { role: 'option' } }, buildListProps(filterType))));
+};
+export default QuickFilterItemList;
+var Title = function (_a) {
+    var title = _a.title, phrase = _a.phrase, matches = _a.matches, _b = _a.symbol, symbol = _b === void 0 ? '' : _b;
+    var createTitle = function () {
+        if (!matches || !phrase) {
+            return [title];
+        }
+        var index = title.toLowerCase().indexOf(phrase.toLowerCase());
+        var start = title.substr(0, index);
+        var bold = title.slice(index, index + phrase.length);
+        var end = title.substr(index + phrase.length);
+        return [start, bold, end];
+    };
+    var _c = __read(createTitle(), 3), start = _c[0], bold = _c[1], end = _c[2];
+    return (React.createElement(Text, null,
+        symbol,
+        start,
+        bold ? React.createElement("strong", null, bold) : null,
+        end ? end : null));
+};
+var disabledCss = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    opacity: 0.5;\n    pointer-events: none;\n"], ["\n    opacity: 0.5;\n    pointer-events: none;\n"])));
+var focused = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n    color: #ffffff;\n    outline: none;\n\n    span:first-child {\n        border-color: ", ";\n    }\n"], ["\n    background-color: ", ";\n    color: #ffffff;\n    outline: none;\n\n    span:first-child {\n        border-color: ", ";\n    }\n"])), function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
+var StyledLink = styled(Link)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: block;\n    text-decoration: none;\n    font-size: ", ";\n\n    ", "\n    color: ", ";\n    background-color: transparent;\n\n    span {\n        display: block;\n        ", "\n        ", "\n    }\n\n    span:first-child {\n        border-color: #e7e7e7;\n    }\n\n    ", "\n\n    ", "\n\n  &:hover,\n  &:focus {\n        ", "\n    }\n"], ["\n    display: block;\n    text-decoration: none;\n    font-size: ", ";\n\n    ", "\n    color: ", ";\n    background-color: transparent;\n\n    span {\n        display: block;\n        ", "\n        ", "\n    }\n\n    span:first-child {\n        border-color: #e7e7e7;\n    }\n\n    ", "\n\n    ", "\n\n  &:hover,\n  &:focus {\n        ", "\n    }\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { return p.disabled && disabledCss; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) {
+    var _a, _b, _c, _d;
+    return p['data-level']
+        ? "padding: calc(".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal, " / 2) ").concat((_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.normal, ";")
+        : "padding: calc(".concat((_c = p.theme.sizes) === null || _c === void 0 ? void 0 : _c.normal, " / 2) ").concat((_d = p.theme.sizes) === null || _d === void 0 ? void 0 : _d.medium, ";  ");
+}, function (p) { return p['data-level'] && 'border-left: 2px solid'; }, function (p) { var _a; return p['data-level'] && "padding: 0 calc(".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium, " * ").concat(p['data-level'], ");"); }, function (p) { return p.autoSelect && focused; }, focused);
+var templateObject_1, templateObject_2, templateObject_3;

package/lib-esm/quick-filter.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare type Props = {
+    phrase: string;
+    inputHasFocus: boolean;
+    searchContainerRef: HTMLElement | null;
+};
+declare const _default: ({ phrase, inputHasFocus, searchContainerRef }: Props) => JSX.Element | null;
+export default _default;

package/lib-esm/quick-filter.js

@@ -0,0 +1,65 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { contentBox, Loader, useContainer, useProperties, useScroll, } from '@telia-ace/knowledge-widget-ui';
+import { appendClassNames } from '@telia-ace/widget-utilities';
+import React, { useCallback, useRef } from 'react';
+import styled from 'styled-components';
+import QuickFilterItemList, { focusInput, getFocusedIndex } from './quick-filter-item-list';
+export default (function (_a) {
+    var _b = _a.phrase, phrase = _b === void 0 ? '' : _b, inputHasFocus = _a.inputHasFocus, searchContainerRef = _a.searchContainerRef;
+    var _c = useProperties().quickFilter, quickFilter = _c === void 0 ? {
+        open: false,
+        loading: false,
+        symbol: '',
+        type: '',
+        items: [],
+    } : _c;
+    var _d = __read(useScroll(true), 2), css = _d[0], ref = _d[1];
+    var container = useContainer();
+    var events = container.get('$widget').events;
+    var wrapperRef = useRef();
+    var setWrapperRef = useCallback(function (node) {
+        if (node) {
+            node.addEventListener('keydown', function () {
+                var listItemFocused = getFocusedIndex(node).focusedIndex > -1;
+                if (listItemFocused) {
+                    events.subscribeOnce('router:changed', function () {
+                        focusInput(searchContainerRef);
+                    });
+                }
+            }, true);
+        }
+        wrapperRef.current = node;
+        return node;
+    }, [searchContainerRef]);
+    var _e = quickFilter.items, items = _e === void 0 ? [] : _e, symbol = quickFilter.symbol, type = quickFilter.type, open = quickFilter.open, loading = quickFilter.loading;
+    if (!open || !symbol) {
+        return null;
+    }
+    var filterPhrase = phrase.slice(phrase.indexOf(symbol) + 1);
+    return (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']) },
+        React.createElement(Inner, { className: "humany-quick-filter-dropdown-inner", css: css, ref: ref },
+            React.createElement(QuickFilterItemList, { filterType: type, items: items, filterPhrase: filterPhrase, filterContainer: ref.current, searchContainer: searchContainerRef, inputHasFocus: inputHasFocus })),
+        React.createElement(Loader, { loading: loading })));
+});
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", ";\n    position: absolute;\n    top: calc(100% + ", ");\n    left: 0;\n    right: 0;\n    z-index: 1;\n    overflow: hidden;\n"], ["\n    ", ";\n    position: absolute;\n    top: calc(100% + ", ");\n    left: 0;\n    right: 0;\n    z-index: 1;\n    overflow: hidden;\n"])), contentBox, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
+var Inner = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    max-height: 300px;\n    overflow: auto;\n    padding: ", " 0;\n    ", "\n    ul {\n        list-style: none;\n        padding: 0;\n        margin: 0;\n    }\n    li div {\n        ", "\n    }\n"], ["\n    max-height: 300px;\n    overflow: auto;\n    padding: ", " 0;\n    ", "\n    ul {\n        list-style: none;\n        padding: 0;\n        margin: 0;\n    }\n    li div {\n        ", "\n    }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { return p.css; }, function (p) { var _a; return "margin: ".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal, " 0;"); });
+var templateObject_1, templateObject_2;

package/lib-esm/search-component.d.ts

@@ -0,0 +1,42 @@
+import { Category, Tag } from '@telia-ace/knowledge-widget-core';
+import { Container } from '@webprovisions/platform';
+export declare type SearchComponentProps = {
+    route?: string;
+    role?: string;
+    showSearchButton: boolean;
+    showClearButton: boolean;
+    showChildren: boolean;
+    searchButtonLabel: string;
+    clearButtonLabel: string;
+    ariaLabel?: string;
+    placeholder: string;
+    autoFocus: boolean;
+    incremental?: boolean | number;
+    filterBadges?: FilterConfig | boolean;
+    activeFilterBadges?: ActiveFilterBadges;
+    deleteFilterBadgeAriaLabel?: string;
+    quickFilters?: FilterConfig | boolean;
+    quickFilter?: Filter;
+    patchParams?: boolean;
+};
+export declare type Filter = {
+    items?: Category[] | Tag[];
+    type?: 'guideCategory' | 'tag';
+    symbol?: string;
+    loading: boolean;
+    open: boolean;
+};
+export declare type ActiveFilterBadges = {
+    guideCategory?: Category | null;
+    tag?: Tag | null;
+    tooltip?: string | null;
+    initial?: boolean;
+};
+export declare type FilterConfig = {
+    autoSelect?: boolean;
+    guideCategory?: boolean;
+    tag?: boolean;
+    position?: 'inside' | 'below';
+};
+declare const SearchComponent: (container: Container) => Promise<void>;
+export default SearchComponent;