@telia-ace/knowledge-widget-components-guide-category-dropdown 1.0.20 → 1.0.21

package/LICENSE.txt

@@ -1,6 +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:
+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

@@ -1,3 +1,3 @@
-# `@telia-ace/knowledge-widget-components-guide-category-dropdown`
-
-Guide category dropdown component for ACE Knowledge Widgets.
+# `@telia-ace/knowledge-widget-components-guide-category-dropdown`
+
+Guide category dropdown component for ACE Knowledge Widgets.

package/dist/guide-category-dropdown-component.d.ts

@@ -1,16 +1,16 @@
-import { MatchFilterProperties } from '@telia-ace/knowledge-widget-component-utilities';
-import { Category } from '@telia-ace/knowledge-widget-core';
-import { Container } from '@webprovisions/platform';
-export declare type GuideCategoryDropdownComponentProps = {
-    matchFilters?: Partial<MatchFilterProperties>;
-    rootCategoryHeader: string;
-    route?: string;
-    categoryAriaLabel?: string;
-    activeCategoryAriaLabel?: string;
-    parent?: Category;
-    categories?: Category[];
-    showMatchCount?: boolean;
-    fallbackOnInitialRoute?: boolean;
-};
-declare const _default: (container: Container) => Promise<void>;
-export default _default;
+import { MatchFilterProperties } from '@telia-ace/knowledge-widget-component-utilities';
+import { Category } from '@telia-ace/knowledge-widget-core';
+import { Container } from '@webprovisions/platform';
+export declare type GuideCategoryDropdownComponentProps = {
+    matchFilters?: Partial<MatchFilterProperties>;
+    rootCategoryHeader: string;
+    route?: string;
+    categoryAriaLabel?: string;
+    activeCategoryAriaLabel?: string;
+    parent?: Category;
+    categories?: Category[];
+    showMatchCount?: boolean;
+    fallbackOnInitialRoute?: boolean;
+};
+declare const _default: (container: Container) => Promise<void>;
+export default _default;

package/dist/guide-category-dropdown-item.d.ts

@@ -1,8 +1,8 @@
-import { Category } from '@telia-ace/knowledge-widget-core';
-import React from 'react';
-declare type Props = {
-    item: Category;
-    guideCategory: string;
-};
-declare const GuideCategoryDropdownItem: React.FC<Props>;
-export default GuideCategoryDropdownItem;
+import { Category } from '@telia-ace/knowledge-widget-core';
+import React from 'react';
+declare type Props = {
+    item: Category;
+    guideCategory: string;
+};
+declare const GuideCategoryDropdownItem: React.FC<Props>;
+export default GuideCategoryDropdownItem;

package/dist/guide-category-dropdown-match-count.d.ts

@@ -1,4 +1,4 @@
-import { Category } from '@telia-ace/knowledge-widget-core';
-import React from 'react';
-declare const GuideCategoryDropdownMatchCount: React.FC<Category>;
-export default GuideCategoryDropdownMatchCount;
+import { Category } from '@telia-ace/knowledge-widget-core';
+import React from 'react';
+declare const GuideCategoryDropdownMatchCount: React.FC<Category>;
+export default GuideCategoryDropdownMatchCount;

package/dist/guide-category-dropdown.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-declare type Props = {
-    className: string;
-};
-declare const GuideCategoryDropdown: React.SFC<Props>;
-export default GuideCategoryDropdown;
+import React from 'react';
+declare type Props = {
+    className: string;
+};
+declare const GuideCategoryDropdown: React.SFC<Props>;
+export default GuideCategoryDropdown;

package/dist/guide-category-dropdown.e32ae53a.js.map

@@ -1 +1 @@
-{"version":3,"file":"guide-category-dropdown.e32ae53a.js","sources":["../src/guide-category-dropdown.styles.ts","../src/guide-category-dropdown-match-count.tsx","../src/guide-category-dropdown-item.tsx","../src/guide-category-dropdown.tsx"],"sourcesContent":["import {\r\n    borderTabStyle,\r\n    contentBox,\r\n    Link as BaseLink,\r\n    linkTabStyle,\r\n    List as BaseList,\r\n    list,\r\n    loadingOpacity,\r\n    Text,\r\n} from '@telia-ace/knowledge-widget-ui';\r\nimport styled, { css } from 'styled-components';\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst Wrapper: any = styled.div<any>`\r\n    ${loadingOpacity}\r\n    ${contentBox}\r\n  overflow: hidden;\r\n    min-height: 50px;\r\n    ${(p) =>\r\n        p['data-toggler-in-focus'] &&\r\n        p.theme.accessibility?.isTabbing &&\r\n        css`\r\n            && {\r\n                ${borderTabStyle}\r\n            }\r\n        `};\r\n`;\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst Toggler: any = styled.button`\r\n    background: none;\r\n    border: 0;\r\n    outline: 0;\r\n    display: block;\r\n    cursor: pointer;\r\n    padding: 0;\r\n    font-size: ${(p) => p.theme.fonts?.normal};\r\n    text-align: end;\r\n    flex: 1 0 auto;\r\n    svg {\r\n        path,\r\n        line {\r\n            stroke: ${(p) => p.theme.colors?.text};\r\n        }\r\n    }\r\n`;\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst styling = css<{ selected: boolean }>`\r\n    font-size: ${(p) => p.theme.fonts?.normal};\r\n    text-align: left;\r\n    text-align: left;\r\n    text-decoration: none;\r\n    font-weight: 300;\r\n    display: flex;\r\n    align-items: center;\r\n    padding: ${(p) => p.theme.sizes?.small};\r\n    padding-left: ${(p) => p.theme.sizes?.large};\r\n    cursor: pointer;\r\n    overflow: hidden;\r\n    ${(p) =>\r\n        p.selected\r\n            ? css`\r\n                  border-left: 2px solid ${p.theme.colors?.primary};\r\n                  color: ${p.theme.colors?.primary};\r\n              `\r\n            : css`\r\n                  color: ${p.theme.colors?.text};\r\n              `};\r\n\r\n    span {\r\n        overflow: hidden;\r\n        text-overflow: ellipsis;\r\n    }\r\n\r\n    i {\r\n        margin-right: ${(p) => p.theme.sizes?.normal};\r\n        font-size: ${(p) => p.theme.fonts?.medium};\r\n        min-height: 1em;\r\n        min-width: 1em;\r\n    }\r\n`;\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst Item: any = styled.div`\r\n    ${styling}\r\n`;\r\n\r\nconst Link: any = styled(BaseLink)<any>`\r\n    ${styling}\r\n    &:focus {\r\n        outline: none;\r\n        span {\r\n            ${(p) => p.theme.accessibility?.isTabbing && linkTabStyle};\r\n        }\r\n    }\r\n`;\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst TopItem: any = styled.div`\r\n    display: flex;\r\n    justify-content: space-between;\r\n    padding-right: ${(p) => p.theme.sizes?.large};\r\n    min-height: 52px;\r\n    white-space: nowrap;\r\n\r\n    && {\r\n        font-weight: normal;\r\n\r\n        a {\r\n            font-weight: normal;\r\n        }\r\n    }\r\n    ${Item} {\r\n        font-weight: normal;\r\n    }\r\n`;\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst List: any = styled(BaseList)<any>`\r\n    ${list}\r\n    display: flex;\r\n    justify-content: center;\r\n    flex-direction: column;\r\n    margin-right: ${(p) => p.theme.sizes?.medium};\r\n    margin-left: ${(p) => p.theme.sizes?.large};\r\n    margin-bottom: 22px;\r\n    border-left: ${(p) => p.theme.border};\r\n    li {\r\n        margin: 0 0 ${(p) => p.theme.sizes?.normal} -2px;\r\n    }\r\n    li:last-child {\r\n        margin: 0 0 0 -2px;\r\n    }\r\n    flex-basis: 100%;\r\n    border-width: 2px;\r\n`;\r\n\r\n// FUTURE TODO: Look into the typescript error when removing \": any\".\r\nconst MatchCount: any = styled(Text)`\r\n    margin: 0 0 0 ${(p) => p.theme.sizes?.small};\r\n`;\r\n\r\nexport default {\r\n    Wrapper,\r\n    Toggler,\r\n    List,\r\n    Item,\r\n    Link,\r\n    TopItem,\r\n    MatchCount,\r\n};\r\n","import { Category } from '@telia-ace/knowledge-widget-core';\r\nimport { useProperties } from '@telia-ace/knowledge-widget-ui';\r\nimport React from 'react';\r\nimport { GuideCategoryDropdownComponentProps } from './guide-category-dropdown-component';\r\nimport Styled from './guide-category-dropdown.styles';\r\n\r\nconst GuideCategoryDropdownMatchCount: React.FC<Category> = ({ matches }) => {\r\n    const { showMatchCount = false } = useProperties<GuideCategoryDropdownComponentProps>();\r\n\r\n    if (!showMatchCount || typeof matches === 'undefined') {\r\n        return null;\r\n    }\r\n\r\n    return <Styled.MatchCount>({matches})</Styled.MatchCount>;\r\n};\r\n\r\nexport default GuideCategoryDropdownMatchCount;\r\n","import { initialRouteFallback } from '@telia-ace/knowledge-widget-component-utilities';\r\nimport { Category } from '@telia-ace/knowledge-widget-core';\r\nimport { SymbolBadge, Text, useHover, useProperties } from '@telia-ace/knowledge-widget-ui';\r\nimport React from 'react';\r\nimport { GuideCategoryDropdownComponentProps } from './guide-category-dropdown-component';\r\nimport GuideCategoryDropdownMatchCount from './guide-category-dropdown-match-count';\r\nimport Styled from './guide-category-dropdown.styles';\r\n\r\ntype Props = {\r\n    item: Category;\r\n    guideCategory: string;\r\n};\r\n\r\nconst GuideCategoryDropdownItem: React.FC<Props> = ({ item, guideCategory }) => {\r\n    const {\r\n        route = 'browse',\r\n        categoryAriaLabel = '',\r\n        activeCategoryAriaLabel = '',\r\n        fallbackOnInitialRoute = false,\r\n    } = useProperties<GuideCategoryDropdownComponentProps>();\r\n    const [hovering, elem] = useHover();\r\n    const { id, title, symbol, activeSymbol } = item;\r\n\r\n    const selected = guideCategory === id;\r\n    return (\r\n        <li ref={elem as any}>\r\n            <Styled.Link\r\n                {...initialRouteFallback(item, route, fallbackOnInitialRoute, 'category')}\r\n                aria-pressed={selected}\r\n                aria-label={(selected ? activeCategoryAriaLabel : categoryAriaLabel).replace(\r\n                    '{{category}}',\r\n                    title\r\n                )}\r\n                className=\"humany-guide-category-dropdown-link\"\r\n                aria-current={selected}\r\n                selected={selected}\r\n            >\r\n                {(selected || hovering) && activeSymbol ? (\r\n                    <SymbolBadge symbol={activeSymbol} />\r\n                ) : (\r\n                    symbol && <SymbolBadge symbol={symbol} />\r\n                )}\r\n                <Text>{title}</Text>\r\n                <GuideCategoryDropdownMatchCount {...item} />\r\n            </Styled.Link>\r\n        </li>\r\n    );\r\n};\r\n\r\nexport default GuideCategoryDropdownItem;\r\n","import { Category } from '@telia-ace/knowledge-widget-core';\r\nimport {\r\n    createEmptyComponent,\r\n    SymbolBadge,\r\n    Text,\r\n    useContainer,\r\n    useProperties,\r\n    useRouteData,\r\n} from '@telia-ace/knowledge-widget-ui';\r\nimport { appendClassNames, createParams, formatUrl } from '@telia-ace/widget-utilities';\r\nimport React, { useEffect, useState } from 'react';\r\nimport { GuideCategoryDropdownComponentProps } from './guide-category-dropdown-component';\r\nimport GuideCategoryDropdownItem from './guide-category-dropdown-item';\r\nimport GuideCategoryDropdownMatchCount from './guide-category-dropdown-match-count';\r\nimport Styled from './guide-category-dropdown.styles';\r\n\r\ntype Props = {\r\n    className: string;\r\n};\r\n\r\nconst GuideCategoryDropdown: React.SFC<Props> = ({ className, ...other }) => {\r\n    const routeData = useRouteData();\r\n    const [togglerFocus, setTogglerFocus] = useState(false);\r\n    const {\r\n        parent,\r\n        route = 'browse',\r\n        categories = [],\r\n        loading = false,\r\n    } = useProperties<GuideCategoryDropdownComponentProps>();\r\n    const container = useContainer();\r\n    const [isOpen, setIsOpen] = useState(false);\r\n    const { params } = routeData;\r\n    const { guideCategory, tag, phrase, sorting } = params;\r\n\r\n    useEffect(() => {\r\n        if (isOpen) {\r\n            setIsOpen(false);\r\n        }\r\n    }, [guideCategory]);\r\n\r\n    if (loading || !parent || !categories.length) {\r\n        return createEmptyComponent(container, {\r\n            ...other,\r\n            className: appendClassNames(className, 'humany-guide-category-dropdown'),\r\n        });\r\n    }\r\n\r\n    const selected = categories.find((category) => category.id === guideCategory) || parent;\r\n    const selectedSymbol = selected.activeSymbol || selected.symbol;\r\n\r\n    return (\r\n        <Styled.Wrapper\r\n            {...other}\r\n            data-loading={false}\r\n            data-toggler-in-focus={togglerFocus}\r\n            aria-expanded={isOpen}\r\n            className={appendClassNames(className, 'humany-guide-category-dropdown')}\r\n        >\r\n            {isOpen ? (\r\n                <>\r\n                    <Styled.TopItem className=\"humany-guide-category-dropdown-top-item\">\r\n                        <Styled.Link\r\n                            className=\"humany-guide-category-dropdown-link\"\r\n                            routeName={route}\r\n                            params={createParams({\r\n                                tag,\r\n                                phrase,\r\n                                sorting,\r\n                                guideCategory: parent.id,\r\n                                uriName: formatUrl(parent.title),\r\n                            })}\r\n                            selected={false}\r\n                        >\r\n                            {parent.symbol ? <SymbolBadge symbol={parent.symbol} /> : null}\r\n                            <Text>{parent.title}</Text>\r\n                            <GuideCategoryDropdownMatchCount {...parent} />\r\n                        </Styled.Link>\r\n                        <Styled.Toggler\r\n                            onBlur={() => setTogglerFocus(false)}\r\n                            onFocus={() => setTogglerFocus(true)}\r\n                            className=\"humany-guide-category-dropdown-toggler\"\r\n                            onClick={() => {\r\n                                setIsOpen(!isOpen);\r\n                            }}\r\n                            aria-expanded=\"true\"\r\n                            aria-label={selected.title}\r\n                        >\r\n                            <SymbolBadge size={18} symbol={{ type: 'Svg', content: 'caret-up' }} />\r\n                        </Styled.Toggler>\r\n                    </Styled.TopItem>\r\n                    <Styled.List\r\n                        className=\"humany-guide-category-dropdown-open\"\r\n                        items={categories}\r\n                        renderItem={(item: Category) => (\r\n                            <GuideCategoryDropdownItem\r\n                                key={item.id}\r\n                                item={item}\r\n                                guideCategory={guideCategory}\r\n                            />\r\n                        )}\r\n                    />\r\n                </>\r\n            ) : (\r\n                <Styled.TopItem className=\"humany-guide-category-dropdown-top-item\">\r\n                    <Styled.Item\r\n                        className=\"humany-guide-category-dropdown-item\"\r\n                        onClick={() => {\r\n                            setIsOpen(!isOpen);\r\n                        }}\r\n                        selected={false}\r\n                    >\r\n                        {selectedSymbol ? <SymbolBadge symbol={selectedSymbol} /> : null}\r\n                        <Text>{selected.title}</Text>\r\n                        <GuideCategoryDropdownMatchCount {...selected} />\r\n                    </Styled.Item>\r\n                    <Styled.Toggler\r\n                        onBlur={() => setTogglerFocus(false)}\r\n                        onFocus={() => setTogglerFocus(true)}\r\n                        className=\"humany-guide-category-dropdown-toggler\"\r\n                        onClick={() => {\r\n                            setIsOpen(!isOpen);\r\n                        }}\r\n                        aria-expanded=\"false\"\r\n                        aria-label={selected.title}\r\n                    >\r\n                        <SymbolBadge size={18} symbol={{ type: 'Svg', content: 'caret-down' }} />\r\n                    </Styled.Toggler>\r\n                </Styled.TopItem>\r\n            )}\r\n        </Styled.Wrapper>\r\n    );\r\n};\r\n\r\nexport default GuideCategoryDropdown;\r\n"],"names":["BaseLink","BaseList"],"mappings":"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"}
+{"version":3,"file":"guide-category-dropdown.e32ae53a.js","sources":["../src/guide-category-dropdown.styles.ts","../src/guide-category-dropdown-match-count.tsx","../src/guide-category-dropdown-item.tsx","../src/guide-category-dropdown.tsx"],"sourcesContent":["import {\n    borderTabStyle,\n    contentBox,\n    Link as BaseLink,\n    linkTabStyle,\n    List as BaseList,\n    list,\n    loadingOpacity,\n    Text,\n} from '@telia-ace/knowledge-widget-ui';\nimport styled, { css } from 'styled-components';\n\n// FUTURE TODO: Look into the typescript error when removing \": any\".\nconst Wrapper: any = styled.div<any>`\n    ${loadingOpacity}\n    ${contentBox}\n  overflow: hidden;\n    min-height: 50px;\n    ${(p) =>\n        p['data-toggler-in-focus'] &&\n        p.theme.accessibility?.isTabbing &&\n        css`\n            && {\n                ${borderTabStyle}\n            }\n        `};\n`;\n\n// FUTURE TODO: Look into the typescript error when removing \": any\".\nconst Toggler: any = styled.button`\n    background: none;\n    border: 0;\n    outline: 0;\n    display: block;\n    cursor: pointer;\n    padding: 0;\n    font-size: ${(p) => p.theme.fonts?.normal};\n    text-align: end;\n    flex: 1 0 auto;\n    svg {\n        path,\n        line {\n            stroke: ${(p) => p.theme.colors?.text};\n        }\n    }\n`;\n\n// FUTURE TODO: Look into the typescript error when removing \": any\".\nconst styling = css<{ selected: boolean }>`\n    font-size: ${(p) => p.theme.fonts?.normal};\n    text-align: left;\n    text-align: left;\n    text-decoration: none;\n    font-weight: 300;\n    display: flex;\n    align-items: center;\n    padding: ${(p) => p.theme.sizes?.small};\n    padding-left: ${(p) => p.theme.sizes?.large};\n    cursor: pointer;\n    overflow: hidden;\n    ${(p) =>\n        p.selected\n            ? css`\n                  border-left: 2px solid ${p.theme.colors?.primary};\n                  color: ${p.theme.colors?.primary};\n              `\n            : css`\n                  color: ${p.theme.colors?.text};\n              `};\n\n    span {\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    i {\n        margin-right: ${(p) => p.theme.sizes?.normal};\n        font-size: ${(p) => p.theme.fonts?.medium};\n        min-height: 1em;\n        min-width: 1em;\n    }\n`;\n\n// FUTURE TODO: Look into the typescript error when removing \": any\".\nconst Item: any = styled.div`\n    ${styling}\n`;\n\nconst Link: any = styled(BaseLink)<any>`\n    ${styling}\n    &:focus {\n        outline: none;\n        span {\n            ${(p) => p.theme.accessibility?.isTabbing && linkTabStyle};\n        }\n    }\n`;\n\n// FUTURE TODO: Look into the typescript error when removing \": any\".\nconst TopItem: any = styled.div`\n    display: flex;\n    justify-content: space-between;\n    padding-right: ${(p) => p.theme.sizes?.large};\n    min-height: 52px;\n    white-space: nowrap;\n\n    && {\n        font-weight: normal;\n\n        a {\n            font-weight: normal;\n        }\n    }\n    ${Item} {\n        font-weight: normal;\n    }\n`;\n\n// FUTURE TODO: Look into the typescript error when removing \": any\".\nconst List: any = styled(BaseList)<any>`\n    ${list}\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    margin-right: ${(p) => p.theme.sizes?.medium};\n    margin-left: ${(p) => p.theme.sizes?.large};\n    margin-bottom: 22px;\n    border-left: ${(p) => p.theme.border};\n    li {\n        margin: 0 0 ${(p) => p.theme.sizes?.normal} -2px;\n    }\n    li:last-child {\n        margin: 0 0 0 -2px;\n    }\n    flex-basis: 100%;\n    border-width: 2px;\n`;\n\n// FUTURE TODO: Look into the typescript error when removing \": any\".\nconst MatchCount: any = styled(Text)`\n    margin: 0 0 0 ${(p) => p.theme.sizes?.small};\n`;\n\nexport default {\n    Wrapper,\n    Toggler,\n    List,\n    Item,\n    Link,\n    TopItem,\n    MatchCount,\n};\n","import { Category } from '@telia-ace/knowledge-widget-core';\nimport { useProperties } from '@telia-ace/knowledge-widget-ui';\nimport React from 'react';\nimport { GuideCategoryDropdownComponentProps } from './guide-category-dropdown-component';\nimport Styled from './guide-category-dropdown.styles';\n\nconst GuideCategoryDropdownMatchCount: React.FC<Category> = ({ matches }) => {\n    const { showMatchCount = false } = useProperties<GuideCategoryDropdownComponentProps>();\n\n    if (!showMatchCount || typeof matches === 'undefined') {\n        return null;\n    }\n\n    return <Styled.MatchCount>({matches})</Styled.MatchCount>;\n};\n\nexport default GuideCategoryDropdownMatchCount;\n","import { initialRouteFallback } from '@telia-ace/knowledge-widget-component-utilities';\nimport { Category } from '@telia-ace/knowledge-widget-core';\nimport { SymbolBadge, Text, useHover, useProperties } from '@telia-ace/knowledge-widget-ui';\nimport React from 'react';\nimport { GuideCategoryDropdownComponentProps } from './guide-category-dropdown-component';\nimport GuideCategoryDropdownMatchCount from './guide-category-dropdown-match-count';\nimport Styled from './guide-category-dropdown.styles';\n\ntype Props = {\n    item: Category;\n    guideCategory: string;\n};\n\nconst GuideCategoryDropdownItem: React.FC<Props> = ({ item, guideCategory }) => {\n    const {\n        route = 'browse',\n        categoryAriaLabel = '',\n        activeCategoryAriaLabel = '',\n        fallbackOnInitialRoute = false,\n    } = useProperties<GuideCategoryDropdownComponentProps>();\n    const [hovering, elem] = useHover();\n    const { id, title, symbol, activeSymbol } = item;\n\n    const selected = guideCategory === id;\n    return (\n        <li ref={elem as any}>\n            <Styled.Link\n                {...initialRouteFallback(item, route, fallbackOnInitialRoute, 'category')}\n                aria-pressed={selected}\n                aria-label={(selected ? activeCategoryAriaLabel : categoryAriaLabel).replace(\n                    '{{category}}',\n                    title\n                )}\n                className=\"humany-guide-category-dropdown-link\"\n                aria-current={selected}\n                selected={selected}\n            >\n                {(selected || hovering) && activeSymbol ? (\n                    <SymbolBadge symbol={activeSymbol} />\n                ) : (\n                    symbol && <SymbolBadge symbol={symbol} />\n                )}\n                <Text>{title}</Text>\n                <GuideCategoryDropdownMatchCount {...item} />\n            </Styled.Link>\n        </li>\n    );\n};\n\nexport default GuideCategoryDropdownItem;\n","import { Category } from '@telia-ace/knowledge-widget-core';\nimport {\n    createEmptyComponent,\n    SymbolBadge,\n    Text,\n    useContainer,\n    useProperties,\n    useRouteData,\n} from '@telia-ace/knowledge-widget-ui';\nimport { appendClassNames, createParams, formatUrl } from '@telia-ace/widget-utilities';\nimport React, { useEffect, useState } from 'react';\nimport { GuideCategoryDropdownComponentProps } from './guide-category-dropdown-component';\nimport GuideCategoryDropdownItem from './guide-category-dropdown-item';\nimport GuideCategoryDropdownMatchCount from './guide-category-dropdown-match-count';\nimport Styled from './guide-category-dropdown.styles';\n\ntype Props = {\n    className: string;\n};\n\nconst GuideCategoryDropdown: React.SFC<Props> = ({ className, ...other }) => {\n    const routeData = useRouteData();\n    const [togglerFocus, setTogglerFocus] = useState(false);\n    const {\n        parent,\n        route = 'browse',\n        categories = [],\n        loading = false,\n    } = useProperties<GuideCategoryDropdownComponentProps>();\n    const container = useContainer();\n    const [isOpen, setIsOpen] = useState(false);\n    const { params } = routeData;\n    const { guideCategory, tag, phrase, sorting } = params;\n\n    useEffect(() => {\n        if (isOpen) {\n            setIsOpen(false);\n        }\n    }, [guideCategory]);\n\n    if (loading || !parent || !categories.length) {\n        return createEmptyComponent(container, {\n            ...other,\n            className: appendClassNames(className, 'humany-guide-category-dropdown'),\n        });\n    }\n\n    const selected = categories.find((category) => category.id === guideCategory) || parent;\n    const selectedSymbol = selected.activeSymbol || selected.symbol;\n\n    return (\n        <Styled.Wrapper\n            {...other}\n            data-loading={false}\n            data-toggler-in-focus={togglerFocus}\n            aria-expanded={isOpen}\n            className={appendClassNames(className, 'humany-guide-category-dropdown')}\n        >\n            {isOpen ? (\n                <>\n                    <Styled.TopItem className=\"humany-guide-category-dropdown-top-item\">\n                        <Styled.Link\n                            className=\"humany-guide-category-dropdown-link\"\n                            routeName={route}\n                            params={createParams({\n                                tag,\n                                phrase,\n                                sorting,\n                                guideCategory: parent.id,\n                                uriName: formatUrl(parent.title),\n                            })}\n                            selected={false}\n                        >\n                            {parent.symbol ? <SymbolBadge symbol={parent.symbol} /> : null}\n                            <Text>{parent.title}</Text>\n                            <GuideCategoryDropdownMatchCount {...parent} />\n                        </Styled.Link>\n                        <Styled.Toggler\n                            onBlur={() => setTogglerFocus(false)}\n                            onFocus={() => setTogglerFocus(true)}\n                            className=\"humany-guide-category-dropdown-toggler\"\n                            onClick={() => {\n                                setIsOpen(!isOpen);\n                            }}\n                            aria-expanded=\"true\"\n                            aria-label={selected.title}\n                        >\n                            <SymbolBadge size={18} symbol={{ type: 'Svg', content: 'caret-up' }} />\n                        </Styled.Toggler>\n                    </Styled.TopItem>\n                    <Styled.List\n                        className=\"humany-guide-category-dropdown-open\"\n                        items={categories}\n                        renderItem={(item: Category) => (\n                            <GuideCategoryDropdownItem\n                                key={item.id}\n                                item={item}\n                                guideCategory={guideCategory}\n                            />\n                        )}\n                    />\n                </>\n            ) : (\n                <Styled.TopItem className=\"humany-guide-category-dropdown-top-item\">\n                    <Styled.Item\n                        className=\"humany-guide-category-dropdown-item\"\n                        onClick={() => {\n                            setIsOpen(!isOpen);\n                        }}\n                        selected={false}\n                    >\n                        {selectedSymbol ? <SymbolBadge symbol={selectedSymbol} /> : null}\n                        <Text>{selected.title}</Text>\n                        <GuideCategoryDropdownMatchCount {...selected} />\n                    </Styled.Item>\n                    <Styled.Toggler\n                        onBlur={() => setTogglerFocus(false)}\n                        onFocus={() => setTogglerFocus(true)}\n                        className=\"humany-guide-category-dropdown-toggler\"\n                        onClick={() => {\n                            setIsOpen(!isOpen);\n                        }}\n                        aria-expanded=\"false\"\n                        aria-label={selected.title}\n                    >\n                        <SymbolBadge size={18} symbol={{ type: 'Svg', content: 'caret-down' }} />\n                    </Styled.Toggler>\n                </Styled.TopItem>\n            )}\n        </Styled.Wrapper>\n    );\n};\n\nexport default GuideCategoryDropdown;\n"],"names":["BaseLink","BaseList"],"mappings":"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"}

package/dist/guide-category-dropdown.styles.d.ts

@@ -1,10 +1,10 @@
-declare const _default: {
-    Wrapper: any;
-    Toggler: any;
-    List: any;
-    Item: any;
-    Link: any;
-    TopItem: any;
-    MatchCount: any;
-};
-export default _default;
+declare const _default: {
+    Wrapper: any;
+    Toggler: any;
+    List: any;
+    Item: any;
+    Link: any;
+    TopItem: any;
+    MatchCount: any;
+};
+export default _default;

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-import GuideCategoryDropdownComponent from './guide-category-dropdown-component';
-export default GuideCategoryDropdownComponent;
+import GuideCategoryDropdownComponent from './guide-category-dropdown-component';
+export default GuideCategoryDropdownComponent;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/guide-category-dropdown-component.ts"],"sourcesContent":["import { MatchFilterProperties } from '@telia-ace/knowledge-widget-component-utilities';\r\nimport { Category, createEventSubscriber, extendComponent } from '@telia-ace/knowledge-widget-core';\r\nimport { CategoriesResult, DataType } from '@telia-ace/knowledge-widget-types-grid';\r\nimport { createReactComponent } from '@telia-ace/knowledge-widget-ui';\r\nimport { Container } from '@webprovisions/platform';\r\n\r\nconst findParentAndSiblings = (\r\n    categories: Category[],\r\n    root: Category,\r\n    currentCategoryId: string\r\n): Category | undefined => {\r\n    if (!currentCategoryId || currentCategoryId.length < 1) {\r\n        return root;\r\n    }\r\n    return findRecursive(categories, root, null, currentCategoryId);\r\n};\r\n\r\nconst findRecursive = (\r\n    categories: Category[],\r\n    root: Category,\r\n    previous: Category | null,\r\n    currentCategoryId: string\r\n): Category | undefined => {\r\n    const filtered = categories.find((c) => c.id === currentCategoryId);\r\n    if (filtered || !currentCategoryId) {\r\n        if (!previous) {\r\n            return root;\r\n        }\r\n        return previous;\r\n    }\r\n\r\n    for (let i = 0; i < categories.length; i += 1) {\r\n        const cat = categories[i];\r\n        if (cat.items) {\r\n            const result = findRecursive(cat.items, root, cat, currentCategoryId);\r\n            if (result) {\r\n                return result;\r\n            }\r\n        }\r\n    }\r\n};\r\n\r\nconst filterEmptyCategories = (category: Category) => category.matches && category.matches > 0;\r\n\r\nexport type GuideCategoryDropdownComponentProps = {\r\n    matchFilters?: Partial<MatchFilterProperties>;\r\n    rootCategoryHeader: string;\r\n    route?: string;\r\n    categoryAriaLabel?: string;\r\n    activeCategoryAriaLabel?: string;\r\n    parent?: Category; // internal\r\n    categories?: Category[]; // internal\r\n    showMatchCount?: boolean;\r\n    fallbackOnInitialRoute?: boolean;\r\n};\r\n\r\nexport default (container: Container) => {\r\n    const { events } = container.get('$widget');\r\n    const [subscribe, unsubscribe] = createEventSubscriber(events);\r\n\r\n    return createReactComponent(\r\n        container,\r\n        'guide-category-dropdown',\r\n        import('./guide-category-dropdown'),\r\n        (component) => {\r\n            const fetch = (params: { [key: string]: any }) => {\r\n                component.writeProperties({ loading: true });\r\n                component.actions.dispatch('fetch', { params }).then(() => {\r\n                    component.writeProperties({ loading: false });\r\n                });\r\n            };\r\n\r\n            component.actions.create('fetch', ({ parent, categories }) => {\r\n                component.writeProperties({\r\n                    parent,\r\n                    categories,\r\n                    loading: false,\r\n                });\r\n            });\r\n\r\n            container.getAsync('router').then((router) => {\r\n                const { params } = router.getRouteData();\r\n                fetch(params);\r\n            });\r\n\r\n            subscribe('router:changed', (event: any, { current }: any) => {\r\n                fetch(current.routeData.params);\r\n            });\r\n        }\r\n    )\r\n        .then(() => {\r\n            return extendComponent(container, 'guide-category-dropdown', (component) => {\r\n                component.actions.watch('guide-category-dropdown.fetch', (input, next) => {\r\n                    const {\r\n                        matchFilters = {\r\n                            search: false,\r\n                            tag: false,\r\n                        },\r\n                        rootCategoryHeader,\r\n                    } = component.properties<GuideCategoryDropdownComponentProps>();\r\n                    const {\r\n                        params: { phrase, guideCategory, tag },\r\n                    } = input;\r\n                    return container.getAsync('dataClient').then((dataClient) => {\r\n                        return dataClient\r\n                            .fetch(DataType.GuideCategories, {\r\n                                searchPhrase: matchFilters.search ? phrase : undefined,\r\n                                tagId: matchFilters.tag ? tag : undefined,\r\n                            })\r\n                            .then(({ categories, matches }: CategoriesResult) => {\r\n                                const parent = findParentAndSiblings(\r\n                                    categories,\r\n                                    {\r\n                                        matches,\r\n                                        id: '0',\r\n                                        title: rootCategoryHeader,\r\n                                        items: categories,\r\n                                    },\r\n                                    guideCategory\r\n                                );\r\n\r\n                                return next({\r\n                                    parent,\r\n                                    categories: parent?.items?.filter(filterEmptyCategories),\r\n                                });\r\n                            });\r\n                    });\r\n                });\r\n            });\r\n        })\r\n        .then(() => {\r\n            unsubscribe();\r\n        });\r\n};\r\n"],"names":[],"mappings":";;;AAMA,MAAM,IAAwB,CAC1B,GACA,GACA,MAEI,CAAC,KAAqB,EAAkB,SAAS,IAC1C,IAEJ,EAAc,GAAY,GAAM,MAAM,CAAiB,GAG5D,IAAgB,CAClB,GACA,GACA,GACA,MACuB;AAEnB,MAAA,AADa,EAAW,KAAK,CAAC,MAAM,EAAE,OAAO,CAAiB,KAClD,CAAC;AACb,WAAK,KACM;AAKf,WAAS,IAAI,GAAG,IAAI,EAAW,QAAQ,KAAK,GAAG;AAC3C,UAAM,IAAM,EAAW;AACvB,QAAI,EAAI,OAAO;AACX,YAAM,IAAS,EAAc,EAAI,OAAO,GAAM,GAAK,CAAiB;AACpE,UAAI;AACO,eAAA;AAAA,IAEf;AAAA,EACJ;AACJ,GAEM,IAAwB,CAAC,MAAuB,EAAS,WAAW,EAAS,UAAU,GAc9E,IAAA,CAAC,MAAyB;AACrC,QAAM,EAAE,cAAW,EAAU,IAAI,SAAS,GACpC,CAAC,GAAW,KAAe,EAAsB,CAAM;AAE7D,SAAO,EACH,GACA,2BACA,OAAO,0CACP,CAAC,MAAc;AACL,UAAA,IAAQ,CAAC,MAAmC;AAC9C,QAAU,gBAAgB,EAAE,SAAS,GAAM,CAAA,GACjC,EAAA,QAAQ,SAAS,SAAS,EAAE,UAAQ,CAAA,EAAE,KAAK,MAAM;AACvD,UAAU,gBAAgB,EAAE,SAAS,GAAO,CAAA;AAAA,MAAA,CAC/C;AAAA,IAAA;AAGL,MAAU,QAAQ,OAAO,SAAS,CAAC,EAAE,WAAQ,oBAAiB;AAC1D,QAAU,gBAAgB;AAAA,QACtB;AAAA,QACA;AAAA,QACA,SAAS;AAAA,MAAA,CACZ;AAAA,IAAA,CACJ,GAED,EAAU,SAAS,QAAQ,EAAE,KAAK,CAAC,MAAW;AACpC,YAAA,EAAE,cAAW,EAAO,aAAa;AACvC,QAAM,CAAM;AAAA,IAAA,CACf,GAED,EAAU,kBAAkB,CAAC,GAAY,EAAE,iBAAmB;AACpD,QAAA,EAAQ,UAAU,MAAM;AAAA,IAAA,CACjC;AAAA,EAAA,CAET,EACK,KAAK,MACK,EAAgB,GAAW,2BAA2B,CAAC,MAAc;AACxE,MAAU,QAAQ,MAAM,iCAAiC,CAAC,GAAO,MAAS;AAChE,YAAA;AAAA,QACF,kBAAe;AAAA,UACX,QAAQ;AAAA,UACR,KAAK;AAAA,QACT;AAAA,QACA;AAAA,UACA,EAAU,cACR;AAAA,QACF,QAAQ,EAAE,WAAQ,kBAAe;AAAA,UACjC;AACJ,aAAO,EAAU,SAAS,YAAY,EAAE,KAAK,CAAC,MACnC,EACF,MAAM,EAAS,iBAAiB;AAAA,QAC7B,cAAc,EAAa,SAAS,IAAS;AAAA,QAC7C,OAAO,EAAa,MAAM,IAAM;AAAA,MACnC,CAAA,EACA,KAAK,CAAC,EAAE,eAAY,iBAAgC;;AAC3C,cAAA,IAAS,EACX,GACA;AAAA,UACI;AAAA,UACA,IAAI;AAAA,UACJ,OAAO;AAAA,UACP,OAAO;AAAA,WAEX,CACJ;AAEA,eAAO,EAAK;AAAA,UACR;AAAA,UACA,YAAY,4BAAQ,UAAR,kBAAe,OAAO;AAAA,QAAqB,CAC1D;AAAA,MAAA,CACJ,CACR;AAAA,IAAA,CACJ;AAAA,EAAA,CACJ,CACJ,EACA,KAAK,MAAM;AACI;EAAA,CACf;AACT;"}
+{"version":3,"file":"index.js","sources":["../src/guide-category-dropdown-component.ts"],"sourcesContent":["import { MatchFilterProperties } from '@telia-ace/knowledge-widget-component-utilities';\nimport { Category, createEventSubscriber, extendComponent } from '@telia-ace/knowledge-widget-core';\nimport { CategoriesResult, DataType } from '@telia-ace/knowledge-widget-types-grid';\nimport { createReactComponent } from '@telia-ace/knowledge-widget-ui';\nimport { Container } from '@webprovisions/platform';\n\nconst findParentAndSiblings = (\n    categories: Category[],\n    root: Category,\n    currentCategoryId: string\n): Category | undefined => {\n    if (!currentCategoryId || currentCategoryId.length < 1) {\n        return root;\n    }\n    return findRecursive(categories, root, null, currentCategoryId);\n};\n\nconst findRecursive = (\n    categories: Category[],\n    root: Category,\n    previous: Category | null,\n    currentCategoryId: string\n): Category | undefined => {\n    const filtered = categories.find((c) => c.id === currentCategoryId);\n    if (filtered || !currentCategoryId) {\n        if (!previous) {\n            return root;\n        }\n        return previous;\n    }\n\n    for (let i = 0; i < categories.length; i += 1) {\n        const cat = categories[i];\n        if (cat.items) {\n            const result = findRecursive(cat.items, root, cat, currentCategoryId);\n            if (result) {\n                return result;\n            }\n        }\n    }\n};\n\nconst filterEmptyCategories = (category: Category) => category.matches && category.matches > 0;\n\nexport type GuideCategoryDropdownComponentProps = {\n    matchFilters?: Partial<MatchFilterProperties>;\n    rootCategoryHeader: string;\n    route?: string;\n    categoryAriaLabel?: string;\n    activeCategoryAriaLabel?: string;\n    parent?: Category; // internal\n    categories?: Category[]; // internal\n    showMatchCount?: boolean;\n    fallbackOnInitialRoute?: boolean;\n};\n\nexport default (container: Container) => {\n    const { events } = container.get('$widget');\n    const [subscribe, unsubscribe] = createEventSubscriber(events);\n\n    return createReactComponent(\n        container,\n        'guide-category-dropdown',\n        import('./guide-category-dropdown'),\n        (component) => {\n            const fetch = (params: { [key: string]: any }) => {\n                component.writeProperties({ loading: true });\n                component.actions.dispatch('fetch', { params }).then(() => {\n                    component.writeProperties({ loading: false });\n                });\n            };\n\n            component.actions.create('fetch', ({ parent, categories }) => {\n                component.writeProperties({\n                    parent,\n                    categories,\n                    loading: false,\n                });\n            });\n\n            container.getAsync('router').then((router) => {\n                const { params } = router.getRouteData();\n                fetch(params);\n            });\n\n            subscribe('router:changed', (event: any, { current }: any) => {\n                fetch(current.routeData.params);\n            });\n        }\n    )\n        .then(() => {\n            return extendComponent(container, 'guide-category-dropdown', (component) => {\n                component.actions.watch('guide-category-dropdown.fetch', (input, next) => {\n                    const {\n                        matchFilters = {\n                            search: false,\n                            tag: false,\n                        },\n                        rootCategoryHeader,\n                    } = component.properties<GuideCategoryDropdownComponentProps>();\n                    const {\n                        params: { phrase, guideCategory, tag },\n                    } = input;\n                    return container.getAsync('dataClient').then((dataClient) => {\n                        return dataClient\n                            .fetch(DataType.GuideCategories, {\n                                searchPhrase: matchFilters.search ? phrase : undefined,\n                                tagId: matchFilters.tag ? tag : undefined,\n                            })\n                            .then(({ categories, matches }: CategoriesResult) => {\n                                const parent = findParentAndSiblings(\n                                    categories,\n                                    {\n                                        matches,\n                                        id: '0',\n                                        title: rootCategoryHeader,\n                                        items: categories,\n                                    },\n                                    guideCategory\n                                );\n\n                                return next({\n                                    parent,\n                                    categories: parent?.items?.filter(filterEmptyCategories),\n                                });\n                            });\n                    });\n                });\n            });\n        })\n        .then(() => {\n            unsubscribe();\n        });\n};\n"],"names":[],"mappings":";;;AAMA,MAAM,IAAwB,CAC1B,GACA,GACA,MAEI,CAAC,KAAqB,EAAkB,SAAS,IAC1C,IAEJ,EAAc,GAAY,GAAM,MAAM,CAAiB,GAG5D,IAAgB,CAClB,GACA,GACA,GACA,MACuB;AAEnB,MAAA,AADa,EAAW,KAAK,CAAC,MAAM,EAAE,OAAO,CAAiB,KAClD,CAAC;AACb,WAAK,KACM;AAKf,WAAS,IAAI,GAAG,IAAI,EAAW,QAAQ,KAAK,GAAG;AAC3C,UAAM,IAAM,EAAW;AACvB,QAAI,EAAI,OAAO;AACX,YAAM,IAAS,EAAc,EAAI,OAAO,GAAM,GAAK,CAAiB;AACpE,UAAI;AACO,eAAA;AAAA,IAEf;AAAA,EACJ;AACJ,GAEM,IAAwB,CAAC,MAAuB,EAAS,WAAW,EAAS,UAAU,GAc9E,IAAA,CAAC,MAAyB;AACrC,QAAM,EAAE,cAAW,EAAU,IAAI,SAAS,GACpC,CAAC,GAAW,KAAe,EAAsB,CAAM;AAE7D,SAAO,EACH,GACA,2BACA,OAAO,0CACP,CAAC,MAAc;AACL,UAAA,IAAQ,CAAC,MAAmC;AAC9C,QAAU,gBAAgB,EAAE,SAAS,GAAM,CAAA,GACjC,EAAA,QAAQ,SAAS,SAAS,EAAE,UAAQ,CAAA,EAAE,KAAK,MAAM;AACvD,UAAU,gBAAgB,EAAE,SAAS,GAAO,CAAA;AAAA,MAAA,CAC/C;AAAA,IAAA;AAGL,MAAU,QAAQ,OAAO,SAAS,CAAC,EAAE,WAAQ,oBAAiB;AAC1D,QAAU,gBAAgB;AAAA,QACtB;AAAA,QACA;AAAA,QACA,SAAS;AAAA,MAAA,CACZ;AAAA,IAAA,CACJ,GAED,EAAU,SAAS,QAAQ,EAAE,KAAK,CAAC,MAAW;AACpC,YAAA,EAAE,cAAW,EAAO,aAAa;AACvC,QAAM,CAAM;AAAA,IAAA,CACf,GAED,EAAU,kBAAkB,CAAC,GAAY,EAAE,iBAAmB;AACpD,QAAA,EAAQ,UAAU,MAAM;AAAA,IAAA,CACjC;AAAA,EAAA,CAET,EACK,KAAK,MACK,EAAgB,GAAW,2BAA2B,CAAC,MAAc;AACxE,MAAU,QAAQ,MAAM,iCAAiC,CAAC,GAAO,MAAS;AAChE,YAAA;AAAA,QACF,kBAAe;AAAA,UACX,QAAQ;AAAA,UACR,KAAK;AAAA,QACT;AAAA,QACA;AAAA,UACA,EAAU,cACR;AAAA,QACF,QAAQ,EAAE,WAAQ,kBAAe;AAAA,UACjC;AACJ,aAAO,EAAU,SAAS,YAAY,EAAE,KAAK,CAAC,MACnC,EACF,MAAM,EAAS,iBAAiB;AAAA,QAC7B,cAAc,EAAa,SAAS,IAAS;AAAA,QAC7C,OAAO,EAAa,MAAM,IAAM;AAAA,MACnC,CAAA,EACA,KAAK,CAAC,EAAE,eAAY,iBAAgC;;AAC3C,cAAA,IAAS,EACX,GACA;AAAA,UACI;AAAA,UACA,IAAI;AAAA,UACJ,OAAO;AAAA,UACP,OAAO;AAAA,WAEX,CACJ;AAEA,eAAO,EAAK;AAAA,UACR;AAAA,UACA,YAAY,4BAAQ,UAAR,kBAAe,OAAO;AAAA,QAAqB,CAC1D;AAAA,MAAA,CACJ,CACR;AAAA,IAAA,CACJ;AAAA,EAAA,CACJ,CACJ,EACA,KAAK,MAAM;AACI;EAAA,CACf;AACT;"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telia-ace/knowledge-widget-components-guide-category-dropdown",
-    "version": "1.0.20",
+    "version": "1.0.21",
     "description": "Guide category dropdown component for ACE Knowledge Widgets.",
     "license": "SEE LICENSE IN LICENSE.txt",
     "author": "Telia Company AB",
@@ -25,9 +25,9 @@
     },
     "sideEffects": false,
     "dependencies": {
-        "@telia-ace/knowledge-widget-component-utilities": "^1.0.20",
+        "@telia-ace/knowledge-widget-component-utilities": "^1.0.21",
         "@telia-ace/knowledge-widget-core": "^1.0.17",
-        "@telia-ace/knowledge-widget-types-grid": "^1.0.27",
+        "@telia-ace/knowledge-widget-types-grid": "^1.0.28",
         "@telia-ace/knowledge-widget-ui": "^1.0.23",
         "@telia-ace/widget-utilities": "^1.0.2",
         "@webprovisions/platform": "^1.1.2"
@@ -42,5 +42,5 @@
         "@types/react-dom": "^16.8.0",
         "@types/styled-components": "^5.1.7"
     },
-    "gitHead": "438c6508c4df3f8ec161e2246fe0888e7f4c5fe0"
+    "gitHead": "038c3d0914f7298d2bb74a80c7a679c7450633f9"
 }