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

package/LICENSE.txt

@@ -0,0 +1,6 @@
+Copyright © 2021, Telia Company AB. All rights reserved.
+
+THIS PACKAGE AND CONTAINING SOFTWARE IS PART OF
+THE HUMANY SERVICE. BY USING THIS SOFTWARE YOU
+AGREE TO THE FOLLOWING TERMS AND CONDITIONS:
+http://www.humany.com/legal

package/README.md

@@ -0,0 +1,3 @@
+# `@telia-ace/widget-services`
+
+Services for ACE Widgets.

package/lib/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/filter-badges.js

@@ -0,0 +1,235 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var knowledge_widget_ui_1 = require("@telia-ace/knowledge-widget-ui");
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importStar(require("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 = (0, react_1.useRef)();
+    return (react_1.default.createElement(knowledge_widget_ui_1.Text, { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-filter-badge'), onKeyDown: function (e) {
+            if (e.key === 'Enter') {
+                handleClick(e, filterType);
+            }
+        } },
+        text,
+        react_1.default.createElement(knowledge_widget_ui_1.Link, __assign({}, p, { ref: ref, tabIndex: 0, role: "button", "aria-label": deleteAriaLabel.replace('{{item}}', text), onClick: function (e) { return handleClick(e, filterType); } }),
+            react_1.default.createElement(knowledge_widget_ui_1.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 = (0, knowledge_widget_ui_1.useProperties)(), _c = _b.activeFilterBadges, activeFilterBadges = _c === void 0 ? {} : _c, _d = _b.deleteFilterBadgeAriaLabel, deleteFilterBadgeAriaLabel = _d === void 0 ? '' : _d;
+    var dispatch = (0, knowledge_widget_ui_1.useDispatch)();
+    var _e = (0, knowledge_widget_ui_1.useRouteData)(), name = _e.name, params = _e.params;
+    var _f = __read((0, react_1.useState)(false), 2), isNavigatingWithKeyBoard = _f[0], setIsNavigatingWithKeyboard = _f[1];
+    var onKeyDown = (0, react_1.useCallback)(function (event) {
+        var key = event.key;
+        if (['ArrowLeft', 'ArrowRight'].indexOf(key) === -1) {
+            setIsNavigatingWithKeyboard(false);
+        }
+    }, []);
+    (0, knowledge_widget_ui_1.useEventListener)('keydown', onKeyDown, window);
+    (0, knowledge_widget_ui_1.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);
+            }
+        }
+    };
+    (0, knowledge_widget_ui_1.useKeyPress)('ArrowLeft', (0, react_1.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]));
+    (0, knowledge_widget_ui_1.useKeyPress)('ArrowRight', (0, react_1.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]));
+    (0, knowledge_widget_ui_1.useKeyPress)('Backspace', (0, react_1.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 = (0, react_1.useCallback)(function (type) {
+        if (type === 'guideCategory' && guideCategory && showGuideCategory) {
+            return (react_1.default.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_1.default.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_1.default.createElement(Wrapper, { className: "humany-filter-badges", position: position },
+        guideCategory && tooltip ? (react_1.default.createElement(knowledge_widget_ui_1.Tooltip, { content: react_1.default.createElement(react_1.default.Fragment, null, tooltip), sticky: false }, renderBadge('guideCategory'))) : (renderBadge('guideCategory')),
+        tag && renderBadge('tag')));
+};
+exports.default = FilterBadges;
+var Wrapper = styled_components_1.default.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'
+        ? (0, styled_components_1.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; }) : (0, styled_components_1.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 = (0, styled_components_1.default)(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) && (0, styled_components_1.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            "])), knowledge_widget_ui_1.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/index.d.ts

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

package/lib/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var search_component_1 = __importDefault(require("./search-component"));
+exports.default = search_component_1.default;

package/lib/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/quick-filter-item-list.js

@@ -0,0 +1,228 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.focusInput = exports.getFocusedIndex = void 0;
+var knowledge_widget_ui_1 = require("@telia-ace/knowledge-widget-ui");
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var utils_1 = require("./utils");
+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; }),
+    };
+};
+exports.getFocusedIndex = getFocusedIndex;
+var getInputElem = function (searchContainerRef) {
+    return searchContainerRef
+        ? searchContainerRef.querySelector('[data-type="search"], input[type="search"]')
+        : null;
+};
+var focusInput = function (searchContainerRef) {
+    if (!searchContainerRef) {
+        return;
+    }
+    var inputElem = getInputElem(searchContainerRef);
+    if (inputElem) {
+        inputElem.focus();
+    }
+};
+exports.focusInput = focusInput;
+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((0, react_1.useState)(rawItems || []), 2), items = _b[0], setItems = _b[1];
+    var _c = __read((0, react_1.useState)(null), 2), first = _c[0], setFirst = _c[1];
+    var dispatch = (0, knowledge_widget_ui_1.useDispatch)();
+    var _d = (0, knowledge_widget_ui_1.useProperties)(), activeFilterBadges = _d.activeFilterBadges, quickFilters = _d.quickFilters;
+    var autoSelect = (typeof quickFilters === 'object' && !!quickFilters.autoSelect) ||
+        (typeof quickFilters === 'boolean' && !!quickFilters);
+    (0, react_1.useEffect)(function () {
+        setItems((0, utils_1.filterItems)(rawItems, filterType, filterPhrase));
+    }, [filterPhrase, filterType, rawItems]);
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (filterContainer) {
+            var anchors = (0, exports.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 = (0, react_1.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_1.default.createElement(StyledLink, { autoSelect: autoSelect && inputHasFocus && item.id === first, disabled: !(0, utils_1.match)(item.title, filterPhrase), tabIndex: !(0, utils_1.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_1.default.createElement(Title, { title: item.title, phrase: filterPhrase, matches: (0, utils_1.match)(item.title, filterPhrase) }))); },
+            };
+        }
+        return {
+            renderLi: true,
+            renderItem: function (item) { return (react_1.default.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_1.default.createElement(Title, { symbol: "#", title: item.title, phrase: filterPhrase, matches: (0, utils_1.match)(item.title, filterPhrase) }))); },
+        };
+    };
+    (0, knowledge_widget_ui_1.useEventListener)('keydown', function (e) {
+        var _a;
+        var key = e.key;
+        if (!filterContainer ||
+            !(key === 'ArrowDown' || key === 'ArrowUp' || key === 'Enter')) {
+            return;
+        }
+        var _b = (0, exports.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 {
+                    (0, exports.focusInput)(searchContainer);
+                }
+            }
+            else {
+                if (focusedIndex - 1 < 0) {
+                    (0, exports.focusInput)(searchContainer);
+                }
+                else {
+                    focusPrev();
+                }
+            }
+        }
+    }, window);
+    return (react_1.default.createElement(knowledge_widget_ui_1.ItemTree, __assign({ tree: items, renderEmpty: false, ulProps: { role: 'listbox' }, liProps: { role: 'option' } }, buildListProps(filterType))));
+};
+exports.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_1.default.createElement(knowledge_widget_ui_1.Text, null,
+        symbol,
+        start,
+        bold ? react_1.default.createElement("strong", null, bold) : null,
+        end ? end : null));
+};
+var disabledCss = (0, styled_components_1.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 = (0, styled_components_1.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 = (0, styled_components_1.default)(knowledge_widget_ui_1.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/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/quick-filter.js

@@ -0,0 +1,93 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var knowledge_widget_ui_1 = require("@telia-ace/knowledge-widget-ui");
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var quick_filter_item_list_1 = __importStar(require("./quick-filter-item-list"));
+exports.default = (function (_a) {
+    var _b = _a.phrase, phrase = _b === void 0 ? '' : _b, inputHasFocus = _a.inputHasFocus, searchContainerRef = _a.searchContainerRef;
+    var _c = (0, knowledge_widget_ui_1.useProperties)().quickFilter, quickFilter = _c === void 0 ? {
+        open: false,
+        loading: false,
+        symbol: '',
+        type: '',
+        items: [],
+    } : _c;
+    var _d = __read((0, knowledge_widget_ui_1.useScroll)(true), 2), css = _d[0], ref = _d[1];
+    var container = (0, knowledge_widget_ui_1.useContainer)();
+    var events = container.get('$widget').events;
+    var wrapperRef = (0, react_1.useRef)();
+    var setWrapperRef = (0, react_1.useCallback)(function (node) {
+        if (node) {
+            node.addEventListener('keydown', function () {
+                var listItemFocused = (0, quick_filter_item_list_1.getFocusedIndex)(node).focusedIndex > -1;
+                if (listItemFocused) {
+                    events.subscribeOnce('router:changed', function () {
+                        (0, quick_filter_item_list_1.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_1.default.createElement(Wrapper, { ref: setWrapperRef, "data-loading": loading, className: (0, widget_utilities_1.appendClassNames)('humany-quick-filter-dropdown', [type === 'guideCategory', 'humany-quick-filter-guide-categories'], [type === 'tag', 'humany-quick-filter-tags']) },
+        react_1.default.createElement(Inner, { className: "humany-quick-filter-dropdown-inner", css: css, ref: ref },
+            react_1.default.createElement(quick_filter_item_list_1.default, { filterType: type, items: items, filterPhrase: filterPhrase, filterContainer: ref.current, searchContainer: searchContainerRef, inputHasFocus: inputHasFocus })),
+        react_1.default.createElement(knowledge_widget_ui_1.Loader, { loading: loading })));
+});
+var Wrapper = styled_components_1.default.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"])), knowledge_widget_ui_1.contentBox, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
+var Inner = styled_components_1.default.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;