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

package/lib/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;

package/lib/search-component.js

@@ -0,0 +1,274 @@
+"use strict";
+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 });
+var knowledge_widget_core_1 = require("@telia-ace/knowledge-widget-core");
+var knowledge_widget_types_grid_1 = require("@telia-ace/knowledge-widget-types-grid");
+var knowledge_widget_ui_1 = require("@telia-ace/knowledge-widget-ui");
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var hasActiveFilterBadge = function (filters) {
+    return !!filters.guideCategory || !!filters.tag;
+};
+var getTooltip = function (categoryId, categories) {
+    var trailIds = (0, widget_utilities_1.categoryTrail)(categoryId, categories);
+    var categoryMap = (0, widget_utilities_1.getCategoryTrailAsObjects)(trailIds, categories);
+    var trail = trailIds.map(function (id) { var _a; return ((_a = categoryMap.get(id)) === null || _a === void 0 ? void 0 : _a.title) || ''; }).join(' / ');
+    return trail;
+};
+var sortRecursive = function (items) {
+    var clone = (0, widget_utilities_1.deepClone)(items);
+    clone.sort(function (a, b) {
+        if (a.title > b.title) {
+            return 1;
+        }
+        return -1;
+    });
+    clone.forEach(function (item) {
+        if (item.items) {
+            item.items = sortRecursive(item.items);
+        }
+    });
+    return clone;
+};
+var SearchComponent = function (container) {
+    return (0, knowledge_widget_ui_1.createReactComponent)(container, 'search', Promise.resolve().then(function () { return __importStar(require('./search')); }), function (component) {
+        var events = container.get('$widget').events;
+        var _a = __read((0, knowledge_widget_core_1.createEventSubscriber)(events), 2), subscribe = _a[0], unsubscribe = _a[1];
+        var load = function (params) {
+            var _a, _b;
+            var activeFilterBadges = component.properties().activeFilterBadges;
+            if (((_a = activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.guideCategory) === null || _a === void 0 ? void 0 : _a.id) !== params.guideCategory ||
+                ((_b = activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.tag) === null || _b === void 0 ? void 0 : _b.id) !== params.tag) {
+                component.actions.dispatch('quick-filter:add', {
+                    tag: params.tag,
+                    category: params.guideCategory,
+                    initial: true,
+                });
+            }
+        };
+        component.actions.create('search', function (data) {
+            var value = data.value, filters = data.filters, filtersChanged = data.filtersChanged;
+            var _a = component.properties(), _b = _a.route, route = _b === void 0 ? 'search' : _b, _c = _a.patchParams, patchParams = _c === void 0 ? false : _c;
+            if (value.length > 0 ||
+                ((hasActiveFilterBadge(filters) || filtersChanged) && !(filters === null || filters === void 0 ? void 0 : filters.initial))) {
+                container.getAsync('router').then(function (router) {
+                    var _a, _b;
+                    var params = router.getRouteData().params;
+                    var searchParams = {
+                        guide: undefined,
+                        id: undefined,
+                        accordion: undefined,
+                        contactMethod: undefined,
+                    };
+                    searchParams.phrase = value.length > 0 ? encodeURIComponent(value) : '';
+                    if (patchParams) {
+                        searchParams = __assign(__assign({}, params), searchParams);
+                    }
+                    if ((filters === null || filters === void 0 ? void 0 : filters.guideCategory) || filtersChanged) {
+                        searchParams.guideCategory = ((_a = filters.guideCategory) === null || _a === void 0 ? void 0 : _a.id) || undefined;
+                    }
+                    if ((filters === null || filters === void 0 ? void 0 : filters.tag) || filtersChanged) {
+                        searchParams.tag = ((_b = filters.tag) === null || _b === void 0 ? void 0 : _b.id) || undefined;
+                    }
+                    router.navigate(route, (0, widget_utilities_1.createParams)(searchParams));
+                });
+            }
+        });
+        component.actions.create('clear', function (data, options) {
+            if (data.navigateToHome) {
+                container.getAsync('router').then(function (router) {
+                    var name = router.getInitialRoute().name;
+                    router.navigate(name);
+                });
+            }
+        });
+        var getRouterParams = function () {
+            return container
+                .getAsync('router')
+                .then(function (router) { return router.getRouteData().params; });
+        };
+        component.actions.create('quick-filter:add', function (data) {
+            var category = data.category, tag = data.tag, initial = data.initial;
+            var previous = component.properties().activeFilterBadges;
+            var activeFilterBadges = previous || {
+                initial: initial,
+                guideCategory: null,
+                tag: null,
+                tooltip: null,
+            };
+            return Promise.resolve()
+                .then(function () {
+                if (category) {
+                    return fetchCategories({}).then(function (categories) {
+                        var categoryItem = (0, widget_utilities_1.findCategoryById)(category, categories) || null;
+                        return __assign(__assign({}, activeFilterBadges), { guideCategory: categoryItem, tooltip: getTooltip(category, categories) || null });
+                    });
+                }
+                return __assign(__assign({}, activeFilterBadges), { guideCategory: null, tooltip: null });
+            })
+                .then(function (next) {
+                if (tag) {
+                    return fetchTags({}).then(function (tags) {
+                        return __assign(__assign({}, next), { tag: tags.find(function (t) { return t.id === tag; }) || null });
+                    });
+                }
+                return __assign(__assign({}, next), { tag: null });
+            })
+                .then(function (next) {
+                return component.writeProperties({
+                    activeFilterBadges: __assign(__assign({}, next), { initial: !!initial }),
+                });
+            });
+        });
+        component.actions.create('quick-filter:remove', function (_a) {
+            var types = _a.types;
+            var activeFilterBadges = component.properties().activeFilterBadges;
+            component.writeProperties({
+                activeFilterBadges: __assign(__assign({}, activeFilterBadges), { initial: false, guideCategory: types.indexOf('guideCategory') > -1
+                        ? null
+                        : activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.guideCategory, tag: types.indexOf('tag') > -1 ? null : activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.tag }),
+            });
+        });
+        component.actions.create('quick-filter:close', function () {
+            return component.writeProperties({
+                quickFilter: {
+                    items: [],
+                    loading: false,
+                    open: false,
+                },
+            });
+        });
+        component.actions.create('quick-filter:open', function (_a) {
+            var symbol = _a.symbol, type = _a.type;
+            component.writeProperties({
+                quickFilter: {
+                    type: type,
+                    symbol: symbol,
+                    items: [],
+                    loading: true,
+                    open: true,
+                },
+            });
+            return getRouterParams().then(function (_a) {
+                var tag = _a.tag, guideCategory = _a.guideCategory, phrase = _a.phrase;
+                if (type === 'guideCategory') {
+                    return fetchCategories({
+                        tagId: tag,
+                        searchPhrase: phrase,
+                    }).then(function (items) {
+                        var clone = (0, widget_utilities_1.deepClone)(items);
+                        component.writeProperties({
+                            quickFilter: {
+                                items: sortRecursive(clone),
+                                loading: false,
+                            },
+                        });
+                    });
+                }
+                if (type === 'tag') {
+                    return fetchTags({
+                        categories: guideCategory,
+                        searchPhrase: phrase,
+                    }).then(function (items) {
+                        var clone = (0, widget_utilities_1.deepClone)(items);
+                        component.writeProperties({
+                            quickFilter: {
+                                items: sortRecursive(clone),
+                                loading: false,
+                            },
+                        });
+                    });
+                }
+            });
+        });
+        var fetchCategories = function (params) {
+            return container
+                .getAsync('dataClient')
+                .then(function (dataClient) {
+                return dataClient.fetch(knowledge_widget_types_grid_1.DataType.GuideCategories, params);
+            })
+                .then(function (categoriesResult) { return categoriesResult.categories || []; });
+        };
+        var fetchTags = function (params) {
+            return container
+                .getAsync('dataClient')
+                .then(function (dataClient) { return dataClient.fetch(knowledge_widget_types_grid_1.DataType.TagsOnGuides, params); })
+                .then(function (tags) {
+                if (tags === void 0) { tags = []; }
+                return tags;
+            });
+        };
+        getRouterParams().then(function (params) {
+            load(params);
+        });
+        subscribe('router:changed', function (_, _a) {
+            var current = _a.current;
+            var params = current.routeData.params;
+            load(params);
+        });
+        subscribe('data-client:fetched', function (event, data) {
+            var filterBadges = component.properties().filterBadges;
+            var showTag = typeof filterBadges === 'object' ? !!filterBadges.tag : !!filterBadges;
+            if (data.type === 'match' && showTag) {
+                getRouterParams().then(function (_a) {
+                    var tagId = _a.tag;
+                    var _b = data.response.tags, tags = _b === void 0 ? [] : _b;
+                    var tag = tags.find(function (t) { return t.id === tagId; }) || null;
+                    component.writeProperties({ filters: { tag: tag } });
+                });
+            }
+        });
+        return function () {
+            unsubscribe();
+        };
+    });
+};
+exports.default = SearchComponent;

package/lib/search.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type Props = {
+    className: string;
+    role?: string;
+};
+declare const Search: React.SFC<Props>;
+export default Search;

package/lib/search.js

@@ -0,0 +1,194 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var knowledge_widget_types_grid_1 = require("@telia-ace/knowledge-widget-types-grid");
+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 filter_badges_1 = __importDefault(require("./filter-badges"));
+var quick_filter_1 = __importDefault(require("./quick-filter"));
+var use_search_1 = __importDefault(require("./use-search"));
+var Search = function (_a) {
+    var className = _a.className, other = __rest(_a, ["className"]);
+    var _b = (0, knowledge_widget_ui_1.useProperties)(), showSearchButton = _b.showSearchButton, showClearButton = _b.showClearButton, _c = _b.role, role = _c === void 0 ? 'search' : _c, autoFocus = _b.autoFocus, placeholder = _b.placeholder, searchButtonLabel = _b.searchButtonLabel, clearButtonLabel = _b.clearButtonLabel, ariaLabel = _b.ariaLabel, _d = _b.route, searchRoute = _d === void 0 ? 'search' : _d, _e = _b.incremental, incremental = _e === void 0 ? true : _e, _f = _b.showChildren, showChildren = _f === void 0 ? false : _f, quickFilter = _b.quickFilter, quickFiltersEnabled = _b.quickFilters, filterBadges = _b.filterBadges;
+    var params = (0, knowledge_widget_ui_1.useRouteData)().params;
+    var _g = __read((0, react_1.useState)(false), 2), hasFocus = _g[0], setHasFocus = _g[1];
+    var _h = __read((0, react_1.useState)(params.phrase || ''), 2), phrase = _h[0], setPhrase = _h[1];
+    var _j = __read((0, react_1.useState)({
+        guideCategory: false,
+        tag: false,
+    }), 2), showFilterBadges = _j[0], setShowFilterBadges = _j[1];
+    var container = (0, knowledge_widget_ui_1.useContainer)();
+    var children = (0, knowledge_widget_ui_1.useChildren)();
+    var dispatch = (0, knowledge_widget_ui_1.useDispatch)();
+    var _k = (typeof filterBadges === 'object' ? filterBadges : {}).position, filterBadgePosition = _k === void 0 ? 'inside' : _k;
+    (0, react_1.useEffect)(function () {
+        var guideCategory = params.guideCategory, tag = params.tag;
+        var showGuideCategory = typeof filterBadges === 'object' ? !!filterBadges.guideCategory : !!filterBadges;
+        var showTag = typeof filterBadges === 'object' ? !!filterBadges.tag : !!filterBadges;
+        setShowFilterBadges({
+            guideCategory: showGuideCategory && !!guideCategory,
+            tag: showTag && !!tag,
+        });
+    }, [filterBadges, params]);
+    // Remove quick-filter symbol, quick-filter phrase
+    // and close quick-filter when route changed
+    (0, knowledge_widget_ui_1.useWidgetEvent)('router:changed', function () {
+        if (quickFilter) {
+            var open_1 = quickFilter.open, symbol = quickFilter.symbol;
+            if (open_1) {
+                if (symbol) {
+                    var cleaned = phrase.replace(phrase.slice(phrase.indexOf(symbol)), '');
+                    setPhrase(cleaned);
+                }
+                dispatch('quick-filter:close');
+            }
+        }
+    }, [quickFilter, phrase, setPhrase, dispatch]);
+    var _l = __read((0, use_search_1.default)(phrase, params, !!incremental), 3), search = _l[0], clear = _l[1], elem = _l[2];
+    (0, react_1.useEffect)(function () {
+        setPhrase(params.phrase || '');
+    }, [params.phrase]);
+    var onChange = (0, react_1.useCallback)(function (value) {
+        setPhrase(value);
+    }, [setPhrase]);
+    var onEscape = (0, react_1.useCallback)(function () {
+        dispatch('quick-filter:close').then(function () { return clear(true); });
+    }, [dispatch, clear]);
+    var autoFocusHandler = (0, react_1.useCallback)(function () {
+        var _a, _b;
+        if (autoFocus && !hasFocus) {
+            (_b = (_a = elem.current) === null || _a === void 0 ? void 0 : _a.getElementsByTagName('input')[0]) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }, [autoFocus, hasFocus, elem]);
+    var onClearButtonClick = (0, react_1.useCallback)(function () {
+        container.getAsync('router').then(function (router) {
+            var initialRoute = router.getInitialRoute();
+            var currentRoute = router.getRouteData();
+            // if we already are on the initial route
+            // and it's not the search route, clear the search instead of navigate
+            if ((initialRoute === null || initialRoute === void 0 ? void 0 : initialRoute.name) === currentRoute.name && (initialRoute === null || initialRoute === void 0 ? void 0 : initialRoute.name) !== searchRoute) {
+                setPhrase('');
+            }
+            else {
+                clear(true);
+            }
+        });
+    }, [container, setPhrase, clear]);
+    var renderFilterBadges = function (position) {
+        if (position !== filterBadgePosition) {
+            return null;
+        }
+        if (!!showFilterBadges.guideCategory || !!showFilterBadges.tag) {
+            return (react_1.default.createElement(filter_badges_1.default, { position: position, inputHasFocus: hasFocus, showGuideCategory: showFilterBadges.guideCategory, showTag: showFilterBadges.tag, searchContainerRef: elem.current }));
+        }
+    };
+    (0, knowledge_widget_ui_1.useTransitionEnd)(autoFocusHandler);
+    var showClear = showClearButton && (showFilterBadges.guideCategory || showFilterBadges.tag || phrase);
+    var quickFilterAccessibilityProps = quickFiltersEnabled
+        ? (0, knowledge_widget_ui_1.convertToStringAttributes)({
+            role: 'combobox',
+            'aria-autocomplete': 'list',
+            autoComplete: 'off',
+            'aria-haspopup': 'listbox',
+        })
+        : {};
+    return (react_1.default.createElement(StyledSearchWrapper, __assign({}, other, { ref: elem, role: role, className: (0, widget_utilities_1.appendClassNames)(className, 'humany-search'), "data-has-phrase": !!phrase, "data-has-focus": hasFocus, "data-has-search-symbol": showSearchButton ? 'true' : 'false' }),
+        react_1.default.createElement(Inner, { action: ".", onSubmit: function (e) {
+                var _a, _b;
+                e.preventDefault();
+                (_b = (_a = elem.current) === null || _a === void 0 ? void 0 : _a.getElementsByTagName('input')[0]) === null || _b === void 0 ? void 0 : _b.blur();
+            }, "data-has-focus": hasFocus },
+            showSearchButton && (react_1.default.createElement(SearchButton, { "aria-label": searchButtonLabel, type: "submit", title: searchButtonLabel, disabled: !phrase, onClick: search, "data-has-phrase": !!phrase, "data-has-focus": hasFocus },
+                react_1.default.createElement(knowledge_widget_ui_1.SymbolBadge, { size: 32, symbol: { type: 'Svg', content: 'search' } }))),
+            renderFilterBadges('inside'),
+            react_1.default.createElement(knowledge_widget_ui_1.Input, __assign({ type: "search", "aria-label": ariaLabel }, quickFilterAccessibilityProps, { placeholder: showFilterBadges.guideCategory || showFilterBadges.tag ? '' : placeholder, onFocusChange: setHasFocus, onEscape: onEscape, onEnter: search, onChange: onChange, value: phrase })),
+            showClear && (react_1.default.createElement(ClearButton, { "aria-label": clearButtonLabel, type: "reset", hasFocus: hasFocus, title: clearButtonLabel, onClick: onClearButtonClick },
+                react_1.default.createElement(knowledge_widget_ui_1.SymbolBadge, { size: 27, symbol: { type: 'Svg', content: 'clear' } }))),
+            showChildren &&
+                !showClear &&
+                children.map(function (child) { return (react_1.default.createElement(knowledge_widget_types_grid_1.Component, { key: child.id, id: child.id, branch: "default" })); }),
+            react_1.default.createElement(quick_filter_1.default, { inputHasFocus: hasFocus, phrase: phrase, searchContainerRef: elem.current })),
+        renderFilterBadges('below')));
+};
+exports.default = Search;
+var StyledSearchWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", ";\n    width: 100%;\n    padding: ", ";\n\n    input {\n        background-color: transparent;\n        border: none;\n        outline: none;\n        min-width: 25%;\n        flex: 1;\n        font-size: ", ";\n        font-weight: 300;\n        font-style: italic;\n        padding: 1em 0;\n        color: ", ";\n        -webkit-appearance: none;\n\n        ", "\n\n        ::placeholder {\n            color: ", ";\n        }\n        /* removes the 'X' from IE */\n        &[type='search']::-ms-clear {\n            display: none;\n            width: 0;\n            height: 0;\n        }\n        &[type='search']::-ms-reveal {\n            display: none;\n            width: 0;\n            height: 0;\n        }\n\n        /* removes the 'X' from Chrome */\n        &[type='search']::-webkit-search-decoration,\n        &[type='search']::-webkit-search-cancel-button,\n        &[type='search']::-webkit-search-results-button,\n        &[type='search']::-webkit-search-results-decoration {\n            display: none;\n        }\n\n        &:focus {\n            outline: none;\n        }\n    }\n\n    button {\n        background: transparent;\n        border: none;\n        padding: 0;\n        font-size: ", ";\n        transition: color 200ms ease-out;\n        color: ", ";\n        cursor: pointer;\n        > svg {\n            height: 100%;\n        }\n    }\n"], ["\n    ", ";\n    width: 100%;\n    padding: ", ";\n\n    input {\n        background-color: transparent;\n        border: none;\n        outline: none;\n        min-width: 25%;\n        flex: 1;\n        font-size: ", ";\n        font-weight: 300;\n        font-style: italic;\n        padding: 1em 0;\n        color: ", ";\n        -webkit-appearance: none;\n\n        ", "\n\n        ::placeholder {\n            color: ", ";\n        }\n        /* removes the 'X' from IE */\n        &[type='search']::-ms-clear {\n            display: none;\n            width: 0;\n            height: 0;\n        }\n        &[type='search']::-ms-reveal {\n            display: none;\n            width: 0;\n            height: 0;\n        }\n\n        /* removes the 'X' from Chrome */\n        &[type='search']::-webkit-search-decoration,\n        &[type='search']::-webkit-search-cancel-button,\n        &[type='search']::-webkit-search-results-button,\n        &[type='search']::-webkit-search-results-decoration {\n            display: none;\n        }\n\n        &:focus {\n            outline: none;\n        }\n    }\n\n    button {\n        background: transparent;\n        border: none;\n        padding: 0;\n        font-size: ", ";\n        transition: color 200ms ease-out;\n        color: ", ";\n        cursor: pointer;\n        > svg {\n            height: 100%;\n        }\n    }\n"])), knowledge_widget_ui_1.contentBox, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large; }, 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.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { var _a; return p['data-has-search-symbol'] === 'true' && "text-indent: ".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal, ";"); }, 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.fonts) === null || _a === void 0 ? void 0 : _a.large; }, function (p) { var _a; return p['data-has-focus'] || p['data-has-phrase'] ? (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary : '#000000'; });
+var Inner = styled_components_1.default.form(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    flex-wrap: nowrap;\n    align-items: center;\n    border: ", ";\n    border-radius: ", ";\n    background-color: #ffffff;\n    position: relative;\n    padding: 0 ", ";\n\n    ", ";\n"], ["\n    display: flex;\n    flex-wrap: nowrap;\n    align-items: center;\n    border: ", ";\n    border-radius: ", ";\n    background-color: #ffffff;\n    position: relative;\n    padding: 0 ", ";\n\n    ", ";\n"])), function (p) { return p.theme.inputBorder; }, function (p) { return p.theme.borderRadius; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) {
+    return p['data-has-focus'] && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            ", "\n        "], ["\n            ", "\n        "])), function (p) {
+        var _a, _b;
+        return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing)
+            ? knowledge_widget_ui_1.borderTabStyle
+            : "\n        border-color: ".concat((_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.primary, ";\n        outline: none;\n        input {\n          outline: none;\n        }\n      ");
+    });
+});
+var SearchButton = (0, styled_components_1.default)(knowledge_widget_ui_1.Button)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    padding: 0;\n    height: 2em;\n\n    svg {\n        circle,\n        line {\n            stroke: ", ";\n        }\n    }\n"], ["\n    padding: 0;\n    height: 2em;\n\n    svg {\n        circle,\n        line {\n            stroke: ", ";\n        }\n    }\n"])), function (p) { var _a; return (p['data-has-focus'] ? (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary : '#000000'); });
+var ClearButton = (0, styled_components_1.default)(knowledge_widget_ui_1.Button)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    &:focus svg {\n        ", "\n    }\n\n    svg {\n        vertical-align: top;\n\n        circle,\n        line,\n        path {\n            stroke: ", ";\n        }\n    }\n"], ["\n    &:focus svg {\n        ", "\n    }\n\n    svg {\n        vertical-align: top;\n\n        circle,\n        line,\n        path {\n            stroke: ", ";\n        }\n    }\n"])), function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && knowledge_widget_ui_1.borderTabStyle; }, function (p) { var _a, _b; return (p.hasFocus ? (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary : (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.text); });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/lib/use-search.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare type ReturnType = [
+    (arg: React.KeyboardEvent | React.MouseEvent | boolean) => void,
+    (navigateToHome: boolean) => void,
+    React.MutableRefObject<HTMLElement | null>
+];
+declare const _default: (phrase: string, params?: {
+    [key: string]: any;
+}, debounce?: boolean) => ReturnType;
+export default _default;

package/lib/use-search.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var knowledge_widget_ui_1 = require("@telia-ace/knowledge-widget-ui");
+var react_1 = require("react");
+var filterChanged = function (newValue, oldValue) {
+    if (newValue && !oldValue) {
+        return true;
+    }
+    if (!newValue && oldValue) {
+        return true;
+    }
+    if (newValue && oldValue) {
+        if (newValue.id !== oldValue.id) {
+            return true;
+        }
+    }
+    return false;
+};
+exports.default = (function (phrase, params, debounce) {
+    if (params === void 0) { params = {}; }
+    if (debounce === void 0) { debounce = true; }
+    var dispatch = (0, knowledge_widget_ui_1.useDispatch)();
+    var _a = (0, knowledge_widget_ui_1.useProperties)(), _b = _a.quickFilters, quickFilters = _b === void 0 ? false : _b, _c = _a.quickFilter, quickFilter = _c === void 0 ? { open: false } : _c, activeFilterBadges = _a.activeFilterBadges, _d = _a.filterBadges, filterBadges = _d === void 0 ? false : _d, _e = _a.incremental, incremental = _e === void 0 ? 600 : _e;
+    var debouncedPhrase = (0, knowledge_widget_ui_1.useDebounce)(phrase, typeof incremental === 'boolean' ? 600 : incremental);
+    var previousDebouncedPhrase = (0, knowledge_widget_ui_1.usePrevious)(debouncedPhrase);
+    var previousFilters = (0, knowledge_widget_ui_1.usePrevious)(activeFilterBadges);
+    var ref = (0, react_1.useRef)(null);
+    var dispatchSearch = (0, react_1.useCallback)(function (value) {
+        if (value === void 0) { value = ''; }
+        if (filterBadges) {
+            var filtersChanged = filterChanged(activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.guideCategory, previousFilters === null || previousFilters === void 0 ? void 0 : previousFilters.guideCategory) || filterChanged(activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.tag, previousFilters === null || previousFilters === void 0 ? void 0 : previousFilters.tag);
+            return dispatch('search', { value: value, filtersChanged: filtersChanged, filters: activeFilterBadges });
+        }
+        return dispatch('search', { value: value });
+    }, [dispatch, activeFilterBadges]);
+    var dispatchClear = (0, react_1.useCallback)(function (navigateToHome) {
+        dispatch('clear', { navigateToHome: navigateToHome });
+    }, [dispatch]);
+    var removeFilterKeywords = function (input) {
+        if (quickFilters) {
+            return input.replace(/([@#].*)/g, '');
+        }
+        return input;
+    };
+    var submitSearch = (0, react_1.useCallback)(function (arg) {
+        if (quickFilter.open && arg.preventDefault) {
+            arg.preventDefault();
+            return;
+        }
+        var activeElement = document.activeElement;
+        var isSearching = ref.current && typeof ref.current.contains === 'function'
+            ? ref.current.contains(activeElement)
+            : false;
+        var cleanedPhrase = removeFilterKeywords(phrase);
+        if ((typeof arg === 'boolean' && arg) ||
+            (cleanedPhrase.length && isSearching) ||
+            (activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.guideCategory) ||
+            ((activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.tag) && isSearching)) {
+            dispatchSearch(cleanedPhrase);
+        }
+        else {
+            dispatchClear(isSearching);
+        }
+    }, [ref, phrase, quickFilter, dispatchClear, activeFilterBadges, dispatchSearch]);
+    (0, react_1.useEffect)(function () {
+        var filtersChanged = filterChanged(activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.guideCategory, previousFilters === null || previousFilters === void 0 ? void 0 : previousFilters.guideCategory) ||
+            filterChanged(activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.tag, previousFilters === null || previousFilters === void 0 ? void 0 : previousFilters.tag);
+        var phrase = debouncedPhrase ? removeFilterKeywords(debouncedPhrase) : debouncedPhrase;
+        var previousPhrase = previousDebouncedPhrase
+            ? removeFilterKeywords(previousDebouncedPhrase)
+            : previousDebouncedPhrase;
+        if ((typeof previousPhrase !== 'undefined' &&
+            previousPhrase !== phrase &&
+            phrase !== params.phrase &&
+            debounce &&
+            !quickFilter.open) ||
+            (filtersChanged && !(activeFilterBadges === null || activeFilterBadges === void 0 ? void 0 : activeFilterBadges.initial))) {
+            submitSearch(filtersChanged);
+        }
+    }, [debouncedPhrase, quickFilter.open, activeFilterBadges, submitSearch]);
+    (0, react_1.useEffect)(function () {
+        if (phrase && quickFilters) {
+            var quickFiltersGuideCategory = (typeof quickFilters === 'boolean' && !!quickFilters) ||
+                (typeof quickFilters === 'object' && !!quickFilters.guideCategory);
+            var 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];
+});

package/lib/utils.d.ts

@@ -0,0 +1,3 @@
+import { Category, Tag } from '@telia-ace/knowledge-widget-core';
+export declare const match: (title: string, phrase: string) => boolean;
+export declare const filterItems: (items: (Category | Tag)[] | undefined, type: 'tag' | 'guideCategory', phrase: string) => any[];