npm - @telia-ace/knowledge-widget-components-guide-category-dropdown - Versions diffs - 1.0.24-next.2 → 1.0.24-next.3 - Mend

@telia-ace/knowledge-widget-components-guide-category-dropdown 1.0.24-next.2 → 1.0.24-next.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/{guide-category-dropdown.a0feefa0.js → guide-category-dropdown.22199076.js} +105 -119
package/dist/guide-category-dropdown.22199076.js.map +1 -0
package/dist/index.js +1 -1
package/package.json +9 -8
package/dist/guide-category-dropdown.a0feefa0.js.map +0 -1

package/dist/{guide-category-dropdown.a0feefa0.js → guide-category-dropdown.22199076.js} RENAMED Viewed

@@ -1,40 +1,41 @@
 var W = Object.defineProperty, H = Object.defineProperties;
 var U = Object.getOwnPropertyDescriptors;
-var b = Object.getOwnPropertySymbols;
-var I = Object.prototype.hasOwnProperty, S = Object.prototype.propertyIsEnumerable;
-var L = (e, t, a) => t in e ? W(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a, i = (e, t) => {
+var E = Object.getOwnPropertySymbols;
+var L = Object.prototype.hasOwnProperty, S = Object.prototype.propertyIsEnumerable;
+var I = (e, t, a) => t in e ? W(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a, c = (e, t) => {
   for (var a in t || (t = {}))
-    I.call(t, a) && L(e, a, t[a]);
-  if (b)
-    for (var a of b(t))
-      S.call(t, a) && L(e, a, t[a]);
+    L.call(t, a) && I(e, a, t[a]);
+  if (E)
+    for (var a of E(t))
+      S.call(t, a) && I(e, a, t[a]);
   return e;
-}, w = (e, t) => H(e, U(t));
-var F = (e, t) => {
+}, x = (e, t) => H(e, U(t));
+var D = (e, t) => {
   var a = {};
   for (var n in e)
-    I.call(e, n) && t.indexOf(n) < 0 && (a[n] = e[n]);
-  if (e != null && b)
-    for (var n of b(e))
+    L.call(e, n) && t.indexOf(n) < 0 && (a[n] = e[n]);
+  if (e != null && E)
+    for (var n of E(e))
       t.indexOf(n) < 0 && S.call(e, n) && (a[n] = e[n]);
   return a;
 };
-import { loadingOpacity as q, contentBox as J, borderTabStyle as K, Link as Q, linkTabStyle as V, List as X, list as Y, Text as E, useProperties as T, useHover as Z, SymbolBadge as u, useRouteData as _, useContainer as ee, useIsTabbing as te, createEmptyComponent as oe } from "@telia-ace/knowledge-widget-ui";
-import { appendClassNames as D, createParams as ae, formatUrl as ne } from "@telia-ace/widget-utilities";
-import o, { useState as B, useEffect as re } from "react";
+import { loadingOpacity as q, contentBox as J, borderTabStyle as K, Link as Q, linkTabStyle as V, List as X, list as Y, Text as k, useProperties as T, useHover as Z, SymbolBadge as f, useRouteData as _, useContainer as ee, useIsTabbing as te, createEmptyComponent as oe } from "@telia-ace/knowledge-widget-ui";
+import { appendClassNames as F, createParams as ae, formatUrl as ne } from "@telia-ace/widget-utilities";
+import o, { useState as G, useEffect as re } from "react";
 import { initialRouteFallback as le } from "@telia-ace/knowledge-widget-component-utilities";
-import c, { css as $ } from "styled-components";
-const se = c.div`
+import { css as C } from "@emotion/react";
+import m from "@emotion/styled";
+const se = m.div`
     ${q}
     ${J}
   overflow: hidden;
     min-height: 50px;
-    ${(e) => e["data-toggler-in-focus"] && e.isTabbing && $`
+    ${(e) => e["data-toggler-in-focus"] && e.isTabbing && C`
             && {
-                ${K}
+                ${K(e)}
             }
         `};
-`, ie = c.button`
+`, ie = m.button`
     background: none;
     border: 0;
     outline: 0;
@@ -56,36 +57,26 @@ const se = c.div`
 }};
         }
     }
-`, M = $`
-    font-size: ${(e) => {
-  var t;
-  return (t = e.theme.fonts) == null ? void 0 : t.normal;
-}};
+`, M = (e) => {
+  var t, a, n, d, g, i, r, u;
+  return C`
+    font-size: ${(t = e.theme.fonts) == null ? void 0 : t.normal};
     text-align: left;
     text-align: left;
     text-decoration: none;
     font-weight: 300;
     display: flex;
     align-items: center;
-    padding: ${(e) => {
-  var t;
-  return (t = e.theme.sizes) == null ? void 0 : t.small;
-}};
-    padding-left: ${(e) => {
-  var t;
-  return (t = e.theme.sizes) == null ? void 0 : t.large;
-}};
+    padding: ${(a = e.theme.sizes) == null ? void 0 : a.small};
+    padding-left: ${(n = e.theme.sizes) == null ? void 0 : n.large};
     cursor: pointer;
     overflow: hidden;
-    ${(e) => {
-  var t, a, n;
-  return e.selected ? $`
-                  border-left: 2px solid ${(t = e.theme.colors) == null ? void 0 : t.primary};
-                  color: ${(a = e.theme.colors) == null ? void 0 : a.primary};
-              ` : $`
-                  color: ${(n = e.theme.colors) == null ? void 0 : n.text};
-              `;
-}};
+    ${e.selected ? C`
+              border-left: 2px solid ${(d = e.theme.colors) == null ? void 0 : d.primary};
+              color: ${(g = e.theme.colors) == null ? void 0 : g.primary};
+          ` : C`
+              color: ${(i = e.theme.colors) == null ? void 0 : i.text};
+          `};
     span {
         overflow: hidden;
@@ -93,20 +84,15 @@ const se = c.div`
     }
     i {
-        margin-right: ${(e) => {
-  var t;
-  return (t = e.theme.sizes) == null ? void 0 : t.normal;
-}};
-        font-size: ${(e) => {
-  var t;
-  return (t = e.theme.fonts) == null ? void 0 : t.medium;
-}};
+        margin-right: ${(r = e.theme.sizes) == null ? void 0 : r.normal};
+        font-size: ${(u = e.theme.fonts) == null ? void 0 : u.medium};
         min-height: 1em;
         min-width: 1em;
     }
-`, O = c.div`
+`;
+}, B = m.div`
     ${M}
-`, ce = c(Q)`
+`, ce = m(Q)`
     ${M}
     &:focus {
         outline: none;
@@ -116,7 +102,7 @@ const se = c.div`
             ${V};
         }
     }
-`, me = c.div`
+`, me = m.div`
     display: flex;
     justify-content: space-between;
     padding-right: ${(e) => {
@@ -133,10 +119,10 @@ const se = c.div`
             font-weight: normal;
         }
     }
-    ${O} {
+    ${B} {
         font-weight: normal;
     }
-`, de = c(X)`
+`, de = m(X)`
     ${Y}
     display: flex;
     justify-content: center;
@@ -162,7 +148,7 @@ const se = c.div`
     }
     flex-basis: 100%;
     border-width: 2px;
-`, ge = c(E)`
+`, ge = m(k)`
     margin: 0 0 0 ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.small;
@@ -171,117 +157,117 @@ const se = c.div`
   Wrapper: se,
   Toggler: ie,
   List: de,
-  Item: O,
+  Item: B,
   Link: ce,
   TopItem: me,
   MatchCount: ge
-}, z = ({ matches: e }) => {
+}, ue = ({ matches: e }) => {
   const { showMatchCount: t = !1 } = T();
   return !t || typeof e == "undefined" ? null : /* @__PURE__ */ o.createElement(s.MatchCount, null, "(", e, ")");
-}, ue = ({ item: e, guideCategory: t }) => {
+}, z = ue, pe = ({ item: e, guideCategory: t }) => {
   const {
     route: a = "browse",
     categoryAriaLabel: n = "",
-    activeCategoryAriaLabel: x = "",
-    fallbackOnInitialRoute: k = !1
-  } = T(), [m, l] = Z(), { id: v, title: d, symbol: p, activeSymbol: f } = e, r = t === v;
+    activeCategoryAriaLabel: d = "",
+    fallbackOnInitialRoute: g = !1
+  } = T(), [i, r] = Z(), { id: u, title: p, symbol: h, activeSymbol: b } = e, l = t === u;
   return /* @__PURE__ */ o.createElement("li", {
-    ref: l
-  }, /* @__PURE__ */ o.createElement(s.Link, w(i({}, le(e, a, k, "category")), {
-    "aria-pressed": r,
-    "aria-label": (r ? x : n).replace(
+    ref: r
+  }, /* @__PURE__ */ o.createElement(s.Link, x(c({}, le(e, a, g, "category")), {
+    "aria-pressed": l,
+    "aria-label": (l ? d : n).replace(
       "{{category}}",
-      d
+      p
     ),
     className: "humany-guide-category-dropdown-link",
-    "aria-current": r,
-    selected: r
-  }), (r || m) && f ? /* @__PURE__ */ o.createElement(u, {
-    symbol: f
-  }) : p && /* @__PURE__ */ o.createElement(u, {
-    symbol: p
-  }), /* @__PURE__ */ o.createElement(E, null, d), /* @__PURE__ */ o.createElement(z, i({}, e))));
-}, $e = (a) => {
-  var n = a, { className: e } = n, t = F(n, ["className"]);
-  const x = _(), [k, m] = B(!1), {
-    parent: l,
-    route: v = "browse",
-    categories: d = [],
-    loading: p = !1
-  } = T(), f = ee(), [r, y] = B(!1), { params: R } = x, G = te(), { guideCategory: C, tag: j, phrase: A, sorting: P } = R;
+    "aria-current": l,
+    selected: l
+  }), (l || i) && b ? /* @__PURE__ */ o.createElement(f, {
+    symbol: b
+  }) : h && /* @__PURE__ */ o.createElement(f, {
+    symbol: h
+  }), /* @__PURE__ */ o.createElement(k, null, p), /* @__PURE__ */ o.createElement(z, c({}, e))));
+}, ye = pe, Ce = (a) => {
+  var n = a, { className: e } = n, t = D(n, ["className"]);
+  const d = _(), [g, i] = G(!1), {
+    parent: r,
+    route: u = "browse",
+    categories: p = [],
+    loading: h = !1
+  } = T(), b = ee(), [l, w] = G(!1), { params: O } = d, R = te(), { guideCategory: v, tag: j, phrase: A, sorting: P } = O;
   if (re(() => {
-    r && y(!1);
-  }, [C]), p || !l || !d.length)
-    return oe(f, w(i({}, t), {
-      className: D(e, "humany-guide-category-dropdown")
+    l && w(!1);
+  }, [v]), h || !r || !p.length)
+    return oe(b, x(c({}, t), {
+      className: F(e, "humany-guide-category-dropdown")
     }));
-  const g = d.find((h) => h.id === C) || l, N = g.activeSymbol || g.symbol;
-  return /* @__PURE__ */ o.createElement(s.Wrapper, w(i({}, t), {
+  const y = p.find(($) => $.id === v) || r, N = y.activeSymbol || y.symbol;
+  return /* @__PURE__ */ o.createElement(s.Wrapper, x(c({}, t), {
     "data-loading": !1,
-    "data-toggler-in-focus": k,
-    "aria-expanded": r,
-    isTabbing: G,
-    className: D(e, "humany-guide-category-dropdown")
-  }), r ? /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(s.TopItem, {
+    "data-toggler-in-focus": g,
+    "aria-expanded": l,
+    isTabbing: R,
+    className: F(e, "humany-guide-category-dropdown")
+  }), l ? /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(s.TopItem, {
     className: "humany-guide-category-dropdown-top-item"
   }, /* @__PURE__ */ o.createElement(s.Link, {
     className: "humany-guide-category-dropdown-link",
-    routeName: v,
+    routeName: u,
     params: ae({
       tag: j,
       phrase: A,
       sorting: P,
-      guideCategory: l.id,
-      uriName: ne(l.title)
+      guideCategory: r.id,
+      uriName: ne(r.title)
     }),
     selected: !1
-  }, l.symbol ? /* @__PURE__ */ o.createElement(u, {
-    symbol: l.symbol
-  }) : null, /* @__PURE__ */ o.createElement(E, null, l.title), /* @__PURE__ */ o.createElement(z, i({}, l))), /* @__PURE__ */ o.createElement(s.Toggler, {
-    onBlur: () => m(!1),
-    onFocus: () => m(!0),
+  }, r.symbol ? /* @__PURE__ */ o.createElement(f, {
+    symbol: r.symbol
+  }) : null, /* @__PURE__ */ o.createElement(k, null, r.title), /* @__PURE__ */ o.createElement(z, c({}, r))), /* @__PURE__ */ o.createElement(s.Toggler, {
+    onBlur: () => i(!1),
+    onFocus: () => i(!0),
     className: "humany-guide-category-dropdown-toggler",
     onClick: () => {
-      y(!r);
+      w(!l);
     },
     "aria-expanded": "true",
-    "aria-label": g.title
-  }, /* @__PURE__ */ o.createElement(u, {
+    "aria-label": y.title
+  }, /* @__PURE__ */ o.createElement(f, {
     size: 18,
     symbol: { type: "Svg", content: "caret-up" }
   }))), /* @__PURE__ */ o.createElement(s.List, {
     className: "humany-guide-category-dropdown-open",
-    items: d,
-    renderItem: (h) => /* @__PURE__ */ o.createElement(ue, {
-      key: h.id,
-      item: h,
-      guideCategory: C
+    items: p,
+    renderItem: ($) => /* @__PURE__ */ o.createElement(ye, {
+      key: $.id,
+      item: $,
+      guideCategory: v
     })
   })) : /* @__PURE__ */ o.createElement(s.TopItem, {
     className: "humany-guide-category-dropdown-top-item"
   }, /* @__PURE__ */ o.createElement(s.Item, {
     className: "humany-guide-category-dropdown-item",
     onClick: () => {
-      y(!r);
+      w(!l);
     },
     selected: !1
-  }, N ? /* @__PURE__ */ o.createElement(u, {
+  }, N ? /* @__PURE__ */ o.createElement(f, {
     symbol: N
-  }) : null, /* @__PURE__ */ o.createElement(E, null, g.title), /* @__PURE__ */ o.createElement(z, i({}, g))), /* @__PURE__ */ o.createElement(s.Toggler, {
-    onBlur: () => m(!1),
-    onFocus: () => m(!0),
+  }) : null, /* @__PURE__ */ o.createElement(k, null, y.title), /* @__PURE__ */ o.createElement(z, c({}, y))), /* @__PURE__ */ o.createElement(s.Toggler, {
+    onBlur: () => i(!1),
+    onFocus: () => i(!0),
     className: "humany-guide-category-dropdown-toggler",
     onClick: () => {
-      y(!r);
+      w(!l);
     },
     "aria-expanded": "false",
-    "aria-label": g.title
-  }, /* @__PURE__ */ o.createElement(u, {
+    "aria-label": y.title
+  }, /* @__PURE__ */ o.createElement(f, {
     size: 18,
     symbol: { type: "Svg", content: "caret-down" }
   }))));
 };
 export {
-  $e as default
+  Ce as default
 };
-//# sourceMappingURL=guide-category-dropdown.a0feefa0.js.map
+//# sourceMappingURL=guide-category-dropdown.22199076.js.map

package/dist/guide-category-dropdown.22199076.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"guide-category-dropdown.22199076.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 { css, Theme } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport {\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';\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.isTabbing &&\n css`\n && {\n ${borderTabStyle(p)}\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\nconst styling = (p: { theme: Theme; selected: boolean }) => css`\n font-size: ${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.theme.sizes?.small};\n padding-left: ${p.theme.sizes?.large};\n cursor: pointer;\n overflow: hidden;\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.theme.sizes?.normal};\n font-size: ${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 }\n &:focus-visible {\n span {\n ${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 useIsTabbing,\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.FC<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 isTabbing = useIsTabbing();\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 isTabbing={isTabbing}\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":["Wrapper","styled","loadingOpacity","contentBox","p","css","borderTabStyle","Toggler","_a","styling","_b","_c","_d","_e","_f","_g","_h","Item","Link","BaseLink","linkTabStyle","TopItem","List","BaseList","list","MatchCount","Text","Styled","GuideCategoryDropdownMatchCount","matches","showMatchCount","useProperties","GuideCategoryDropdownMatchCount$1","GuideCategoryDropdownItem","item","guideCategory","route","categoryAriaLabel","activeCategoryAriaLabel","fallbackOnInitialRoute","hovering","elem","useHover","id","title","symbol","activeSymbol","selected","React","__spreadProps","__spreadValues","initialRouteFallback","SymbolBadge","GuideCategoryDropdownItem$1","GuideCategoryDropdown","className","other","__objRest","routeData","useRouteData","togglerFocus","setTogglerFocus","useState","parent","categories","loading","container","useContainer","isOpen","setIsOpen","params","isTabbing","useIsTabbing","tag","phrase","sorting","useEffect","createEmptyComponent","appendClassNames","category","selectedSymbol","createParams","formatUrl"],"mappings":"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"}

package/dist/index.js CHANGED Viewed

@@ -17,7 +17,7 @@ const P = (e, n, a) => !a || a.length < 1 ? n : h(e, n, null, a), h = (e, n, a,
   return C(
     e,
     "guide-category-dropdown",
-    import("./guide-category-dropdown.a0feefa0.js"),
+    import("./guide-category-dropdown.22199076.js"),
     (i) => {
       const s = (t) => {
         i.writeProperties({ loading: !0 }), i.actions.dispatch("fetch", { params: t }).then(() => {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@telia-ace/knowledge-widget-components-guide-category-dropdown",
-    "version": "1.0.24-next.2",
+    "version": "1.0.24-next.3",
     "description": "Guide category dropdown component for ACE Knowledge Widgets.",
     "license": "SEE LICENSE IN LICENSE.txt",
     "author": "Telia Company AB",
@@ -26,7 +26,7 @@
     },
     "sideEffects": false,
     "dependencies": {
-        "@telia-ace/knowledge-widget-component-utilities": "^1.0.24-next.2",
+        "@telia-ace/knowledge-widget-component-utilities": "^1.0.24-next.3",
         "@telia-ace/knowledge-widget-core": "next",
         "@telia-ace/knowledge-widget-types-grid": "next",
         "@telia-ace/knowledge-widget-ui": "next",
@@ -34,17 +34,18 @@
         "@webprovisions/platform": "^1.1.2"
     },
     "peerDependencies": {
+        "@emotion/react": "^11.10.4",
+        "@emotion/styled": "^11.10.4",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "styled-components": "^5.3.6"
+        "react-dom": "^18.2.0"
     },
     "devDependencies": {
+        "@emotion/react": "^11.10.4",
+        "@emotion/styled": "^11.10.4",
         "@types/react": "^18.0.21",
         "@types/react-dom": "^18.0.6",
-        "@types/styled-components": "^5.1.26",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "styled-components": "^5.3.6"
+        "react-dom": "^18.2.0"
     },
-    "gitHead": "3040596277958342d31410cb8766141e15b985cf"
+    "gitHead": "035b7b89fbf7c736993d70e6dc4e420b8218a3a4"
 }

package/dist/guide-category-dropdown.a0feefa0.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"guide-category-dropdown.a0feefa0.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.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 }\n &:focus-visible {\n span {\n ${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 useIsTabbing,\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.FC<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 isTabbing = useIsTabbing();\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 isTabbing={isTabbing}\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":["Wrapper","styled","loadingOpacity","contentBox","p","css","borderTabStyle","Toggler","_a","styling","_b","_c","Item","Link","BaseLink","linkTabStyle","TopItem","List","BaseList","list","MatchCount","Text","Styled","GuideCategoryDropdownMatchCount","matches","showMatchCount","useProperties","GuideCategoryDropdownItem","item","guideCategory","route","categoryAriaLabel","activeCategoryAriaLabel","fallbackOnInitialRoute","hovering","elem","useHover","id","title","symbol","activeSymbol","selected","React","__spreadProps","__spreadValues","initialRouteFallback","SymbolBadge","GuideCategoryDropdown","className","other","__objRest","routeData","useRouteData","togglerFocus","setTogglerFocus","useState","parent","categories","loading","container","useContainer","isOpen","setIsOpen","params","isTabbing","useIsTabbing","tag","phrase","sorting","useEffect","createEmptyComponent","appendClassNames","category","selectedSymbol","createParams","formatUrl"],"mappings":"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"}