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

package/lib-esm/search.js

@@ -1,166 +0,0 @@
-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 { Component } from '@telia-ace/knowledge-widget-types-grid';
-import { borderTabStyle, Button, contentBox, convertToStringAttributes, Input, SymbolBadge, useChildren, useContainer, useDispatch, useProperties, useRouteData, useTransitionEnd, useWidgetEvent, } from '@telia-ace/knowledge-widget-ui';
-import { appendClassNames } from '@telia-ace/widget-utilities';
-import React, { useCallback, useEffect, useState } from 'react';
-import styled, { css } from 'styled-components';
-import FilterBadges from './filter-badges';
-import QuickFilter from './quick-filter';
-import useSearch from './use-search';
-var Search = function (_a) {
-    var className = _a.className, other = __rest(_a, ["className"]);
-    var _b = 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 = useRouteData().params;
-    var _g = __read(useState(false), 2), hasFocus = _g[0], setHasFocus = _g[1];
-    var _h = __read(useState(params.phrase || ''), 2), phrase = _h[0], setPhrase = _h[1];
-    var _j = __read(useState({
-        guideCategory: false,
-        tag: false,
-    }), 2), showFilterBadges = _j[0], setShowFilterBadges = _j[1];
-    var container = useContainer();
-    var children = useChildren();
-    var dispatch = useDispatch();
-    var _k = (typeof filterBadges === 'object' ? filterBadges : {}).position, filterBadgePosition = _k === void 0 ? 'inside' : _k;
-    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
-    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(useSearch(phrase, params, !!incremental), 3), search = _l[0], clear = _l[1], elem = _l[2];
-    useEffect(function () {
-        setPhrase(params.phrase || '');
-    }, [params.phrase]);
-    var onChange = useCallback(function (value) {
-        setPhrase(value);
-    }, [setPhrase]);
-    var onEscape = useCallback(function () {
-        dispatch('quick-filter:close').then(function () { return clear(true); });
-    }, [dispatch, clear]);
-    var autoFocusHandler = 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 = 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.createElement(FilterBadges, { position: position, inputHasFocus: hasFocus, showGuideCategory: showFilterBadges.guideCategory, showTag: showFilterBadges.tag, searchContainerRef: elem.current }));
-        }
-    };
-    useTransitionEnd(autoFocusHandler);
-    var showClear = showClearButton && (showFilterBadges.guideCategory || showFilterBadges.tag || phrase);
-    var quickFilterAccessibilityProps = quickFiltersEnabled
-        ? convertToStringAttributes({
-            role: 'combobox',
-            'aria-autocomplete': 'list',
-            autoComplete: 'off',
-            'aria-haspopup': 'listbox',
-        })
-        : {};
-    return (React.createElement(StyledSearchWrapper, __assign({}, other, { ref: elem, role: role, className: appendClassNames(className, 'humany-search'), "data-has-phrase": !!phrase, "data-has-focus": hasFocus, "data-has-search-symbol": showSearchButton ? 'true' : 'false' }),
-        React.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.createElement(SearchButton, { "aria-label": searchButtonLabel, type: "submit", title: searchButtonLabel, disabled: !phrase, onClick: search, "data-has-phrase": !!phrase, "data-has-focus": hasFocus },
-                React.createElement(SymbolBadge, { size: 32, symbol: { type: 'Svg', content: 'search' } }))),
-            renderFilterBadges('inside'),
-            React.createElement(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.createElement(ClearButton, { "aria-label": clearButtonLabel, type: "reset", hasFocus: hasFocus, title: clearButtonLabel, onClick: onClearButtonClick },
-                React.createElement(SymbolBadge, { size: 27, symbol: { type: 'Svg', content: 'clear' } }))),
-            showChildren &&
-                !showClear &&
-                children.map(function (child) { return (React.createElement(Component, { key: child.id, id: child.id, branch: "default" })); }),
-            React.createElement(QuickFilter, { inputHasFocus: hasFocus, phrase: phrase, searchContainerRef: elem.current })),
-        renderFilterBadges('below')));
-};
-export default Search;
-var StyledSearchWrapper = styled.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"])), 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.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'] && 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)
-            ? 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 = styled(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 = styled(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) && 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-esm/use-search.js

@@ -1,97 +0,0 @@
-import { useDebounce, useDispatch, usePrevious, useProperties, } from '@telia-ace/knowledge-widget-ui';
-import { useCallback, useEffect, useRef } from '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;
-};
-export default (function (phrase, params, debounce) {
-    if (params === void 0) { params = {}; }
-    if (debounce === void 0) { debounce = true; }
-    var dispatch = useDispatch();
-    var _a = 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 = useDebounce(phrase, typeof incremental === 'boolean' ? 600 : incremental);
-    var previousDebouncedPhrase = usePrevious(debouncedPhrase);
-    var previousFilters = usePrevious(activeFilterBadges);
-    var ref = useRef(null);
-    var dispatchSearch = 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 = useCallback(function (navigateToHome) {
-        dispatch('clear', { navigateToHome: navigateToHome });
-    }, [dispatch]);
-    var removeFilterKeywords = function (input) {
-        if (quickFilters) {
-            return input.replace(/([@#].*)/g, '');
-        }
-        return input;
-    };
-    var submitSearch = 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]);
-    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]);
-    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-esm/utils.js

@@ -1,48 +0,0 @@
-import { categoryTrail, deepClone } from '@telia-ace/widget-utilities';
-export var match = function (title, phrase) {
-    if (!phrase || !title) {
-        return true;
-    }
-    return !!(title.toLowerCase().indexOf(phrase.toLowerCase()) > -1);
-};
-export var filterItems = function (items, type, phrase) {
-    if (items === void 0) { items = []; }
-    if (!phrase) {
-        return items;
-    }
-    var cloned = deepClone(items);
-    if (type === 'tag') {
-        return cloned.filter(function (i) { return match(i.title, phrase); });
-    }
-    var matchTrail = buildMatchTrail(cloned, phrase);
-    var filtered = recursiveFilter(cloned, function (c) { return matchTrail.indexOf(c.id) > -1; });
-    return filtered;
-};
-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 match(c.title, phrase); }).map(function (c) { return c.id; });
-    var res = [];
-    matching.forEach(function (id) {
-        var trail = 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;
-};