@telia-ace/knowledge-widget-components-search 0.0.1
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.
- package/filter-badges.d.ts +11 -0
- package/index.d.ts +3 -0
- package/index.js +1 -0
- package/index.mjs +163 -0
- package/package.json +26 -0
- package/quick-filter-item-list.d.ts +18 -0
- package/quick-filter.d.ts +7 -0
- package/search-9b2fdf13.mjs +987 -0
- package/search-9f532628.js +222 -0
- package/search-component.d.ts +45 -0
- package/search.d.ts +8 -0
- package/use-search.d.ts +9 -0
- package/utils.d.ts +4 -0
|
@@ -0,0 +1,222 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),N=require("@emotion/react"),z=require("@emotion/styled"),i=require("@telia-ace/knowledge-widget-ui"),oe=require("@telia-ace/widget-types-grid"),F=require("@telia-ace/widget-utilities"),h=require("react"),re=({text:e,className:t,filterType:s,handleClick:c,deleteAriaLabel:f="",...l})=>{const o=h.useRef(),[w,C]=h.useState(document.activeElement===o.current);return p.jsxs(i.Text,{className:F.appendClassNames(t,"humany-filter-badge",w?"humany-filter-badge-focused":""),onKeyDown:x=>{x.key==="Enter"&&c(x,s)},children:[e,p.jsx(i.Link,{...l,ref:o,tabIndex:0,onFocus:()=>{C(!0)},onBlur:()=>{C(!1)},role:"button","aria-label":f.replace("{{item}}",e),onClick:x=>c(x,s),children:p.jsx(i.SymbolBadge,{size:13,symbol:{type:"Svg",content:"close"}})})]})},ie=({inputHasFocus:e,searchContainerRef:t,showTag:s,showGuideCategory:c,position:f})=>{const{activeFilterBadges:l,deleteFilterBadgeAriaLabel:o=""}=i.useProperties(),w=i.useDispatch(),{name:C,params:x}=i.useRouteData(),[A,y]=h.useState(!1),E=h.useCallback(r=>{const{key:d}=r;["ArrowLeft","ArrowRight"].indexOf(d)===-1&&y(!1)},[]);i.useEventListener("keydown",E,window),i.useEventListener("click",E,window);const{guideCategory:j,tag:b,tooltip:I}=l||{},u=r=>{const d=r.querySelectorAll(".humany-filter-badge > a");return{badges:d,index:Array.from(d).findIndex(m=>document.activeElement===m)}},n=h.useCallback((r,d,m)=>{r.preventDefault(),w("quick-filter:remove",{types:[d],ids:[m]})},[w]),a=(r,d)=>{if(!t)return;const{badges:m,index:k}=u(t);if(m.length){let q=null;r==="left"?k===-1?q=m.item(m.length-1):k>0&&(q=m.item(k-1)):r==="right"&&(k===m.length-1?d&&d.focus():m.item(k+1)&&(q=m.item(k+1))),q&&(q.focus(),y(!0))}};i.useKeyPress("ArrowLeft",h.useCallback(()=>{if(!t)return;const{index:r}=u(t);if(e||r>-1){const d=t.querySelector('[data-type="search"]'),m=d&&d.selectionStart!==null&&d.selectionStart<=0,k=r>-1;(m||k)&&a("left",d)}},[e,t])),i.useKeyPress("ArrowRight",h.useCallback(()=>{if(!t)return;const{index:r}=u(t);if(r>-1){const d=t.querySelector('[data-type="search"]');r>-1&&a("right",d)}},[t])),i.useKeyPress("Backspace",h.useCallback(r=>{if(!t)return;let d=[];const{index:m}=u(t),k=t.querySelector('[data-type="search"]');if(m>-1)m===0?c?d=["guideCategory"]:s&&(d=["tag"]):m===1&&(d=["tag"]);else{const $=document.activeElement===k;k&&k.selectionStart!==null&&k.selectionStart<=0&&$&&(l!=null&&l.tag.length?d=["tag"]:l!=null&&l.guideCategory&&(d=["guideCategory"]))}if(d.length>0){r.preventDefault();let $;if(d.includes("tag")){const L=l==null?void 0:l.tag.at(-1);$=L==null?void 0:L.id}w("quick-filter:remove",{types:d,ids:[$]})}},[t,l,s,c,w]));const g=h.useCallback(r=>r==="guideCategory"&&j&&c?p.jsx(X,{text:`@${j.title}`,routeName:C,filterType:"guideCategory",handleClick:n,deleteAriaLabel:o,params:{...x,guideCategory:void 0}}):r==="tag"&&(b!=null&&b.length)&&s?b.map(d=>{const m=b.reduce((k,q)=>(q.id!==d.id&&k.push(q.id),k),[]);return p.jsx(X,{className:"humany-filter-badge",text:`#${d.title}`,routeName:C,filterType:"tag",handleClick:k=>n(k,"tag",d.id),deleteAriaLabel:o,params:{...x,tag:m}},d.id)}):null,[j,b,C,x,c,s,A,n]);return!j&&!b?null:p.jsxs(ae,{className:"humany-filter-badges",position:f,children:[j&&I?p.jsx(i.Tooltip,{content:p.jsx(p.Fragment,{children:I}),sticky:!1,children:g("guideCategory")}):g("guideCategory"),b&&g("tag")]})},ae=z.div`
|
|
2
|
+
display: flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
flex-wrap: wrap;
|
|
5
|
+
|
|
6
|
+
${e=>{var t,s;return e.position==="inside"?N.css`
|
|
7
|
+
&:not(:first-child) {
|
|
8
|
+
margin: 0 0 0 ${(t=e.theme.sizes)==null?void 0:t.normal};
|
|
9
|
+
}
|
|
10
|
+
`:N.css`
|
|
11
|
+
margin: ${(s=e.theme.sizes)==null?void 0:s.small} 0 0 0;
|
|
12
|
+
span:first-child {
|
|
13
|
+
margin-left: 0;
|
|
14
|
+
}
|
|
15
|
+
`}}
|
|
16
|
+
`,X=z(re)`
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
padding: ${e=>{var t,s;return`${(t=e.theme.sizes)==null?void 0:t.small} calc(${(s=e.theme.sizes)==null?void 0:s.normal}/2) `}};
|
|
20
|
+
background-color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.primary}};
|
|
21
|
+
border-radius: ${e=>e.theme.borderRadius};
|
|
22
|
+
font-weight: 300;
|
|
23
|
+
font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
|
|
24
|
+
font-style: italic;
|
|
25
|
+
color: #ffffff;
|
|
26
|
+
text-decoration: none;
|
|
27
|
+
white-space: nowrap;
|
|
28
|
+
|
|
29
|
+
margin: calc(${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}} / 2);
|
|
30
|
+
|
|
31
|
+
&.humany-filter-badge-focused:focus-within {
|
|
32
|
+
${i.borderTabStyle}
|
|
33
|
+
background-color: transparent;
|
|
34
|
+
|
|
35
|
+
svg {
|
|
36
|
+
path {
|
|
37
|
+
stroke: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.primary}};
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
a {
|
|
41
|
+
outline: none;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
svg {
|
|
46
|
+
width: 17px;
|
|
47
|
+
height: 11px;
|
|
48
|
+
margin: 1px 0 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}};
|
|
49
|
+
path {
|
|
50
|
+
stroke: #ffffff;
|
|
51
|
+
stroke-width: 2px;
|
|
52
|
+
}
|
|
53
|
+
order: 1;
|
|
54
|
+
}
|
|
55
|
+
`,T=(e,t)=>!t||!e?!0:e.toLowerCase().indexOf(t.toLowerCase())>-1,ce=(e=[],t,s)=>{if(!s)return e;const c=F.deepClone(e);if(t==="tag")return c.filter(o=>T(o.title,s));const f=le(c,s);return Y(c,o=>f.indexOf(o.id)>-1)},Y=(e,t)=>e.filter(s=>(s.items&&s.items.length&&(s.items=Y(s.items,t)),t(s))),le=(e,t)=>{const c=Z(e).filter(l=>T(l.title,t)).map(l=>l.id);let f=[];return c.forEach(l=>{const o=F.categoryTrail(l,e);f=f.concat(o)}),f},Z=e=>{let t=[];return e.forEach(s=>{t.push(s),Array.isArray(s.items)&&(t=t.concat(Z(s.items)))}),t},K=e=>{const t=Array.from((e==null?void 0:e.getElementsByTagName("A"))||[]).filter(s=>s.getAttribute("disabled")===null);return{anchors:t,focusedIndex:t.findIndex(s=>document.activeElement===s)}},ue=e=>e?e.querySelector('[data-type="search"], input[type="search"]'):null,W=e=>{if(!e)return;const t=ue(e);t&&t.focus()},de=({filterPhrase:e,items:t,filterType:s,filterContainer:c,searchContainer:f,inputHasFocus:l})=>{const[o,w]=h.useState(t||[]),[C,x]=h.useState(null),A=i.useDispatch(),{activeFilterBadges:y,quickFilters:E}=i.useProperties(),j=typeof E=="object"&&!!E.autoSelect||typeof E=="boolean"&&!!E;h.useEffect(()=>{w(ce(t,s,e))},[e,s,t]),h.useEffect(()=>{var u;if(c){const{anchors:n}=K(c),a=(u=n[0])==null?void 0:u.getAttribute("data-id");a&&x(a)}},[o,c]);const b=h.useCallback((u,n)=>{let a=((y==null?void 0:y.tag)||[]).map(r=>r.id);n==="tag"&&u.id&&(a=a.includes(u.id)?a.filter(r=>r!==u.id):[...a,u.id]);const g={category:y!=null&&y.guideCategory?y.guideCategory.id:void 0,tagIds:a};n==="guideCategory"&&(g.category=u.id),A("quick-filter:add",g)},[y,A]),I=u=>u==="guideCategory"?{renderItem:(n,a)=>p.jsx(J,{autoSelect:j&&l&&n.id===C,disabled:!T(n.title,e),tabIndex:T(n.title,e)?0:-1,onKeyDown:g=>{g.key==="Enter"&&b(n,u)},"data-level":a,onClick:()=>{b(n,u)},"data-id":n.id,children:p.jsx(G,{title:n.title,phrase:e,matches:T(n.title,e)})})}:{renderLi:!0,renderItem:n=>p.jsx(J,{autoSelect:j&&l&&n.id===C,onKeyDown:a=>{a.key==="Enter"&&b(n,u)},onClick:()=>{b(n,u)},"data-id":n.id,children:p.jsx(G,{symbol:"#",title:n.title,phrase:e,matches:T(n.title,e)})})};return i.useEventListener("keydown",u=>{var q;const{key:n}=u;if(!c||!(n==="ArrowDown"||n==="ArrowUp"||n==="Enter"))return;const{anchors:a,focusedIndex:g}=K(c);if(n==="Enter"){if(l&&j){const $=(q=a[0])==null?void 0:q.getAttribute("data-id");$&&b({id:$},s)}return}const r=()=>{var $;return($=a[0])==null?void 0:$.focus()},d=()=>{var $;return($=a[a.length-1])==null?void 0:$.focus()},m=()=>{var $;return($=a[g+1])==null?void 0:$.focus()},k=()=>{var $;return($=a[g-1])==null?void 0:$.focus()};l?(u.preventDefault(),n==="ArrowDown"?r():d()):g>-1&&(u.preventDefault(),n==="ArrowDown"?a.length>g+1?m():W(f):g-1<0?W(f):k())},window),p.jsx(i.ItemTree,{tree:o,renderEmpty:!1,ulProps:{role:"listbox"},liProps:{role:"option"},...I(s)})},G=({title:e,phrase:t,matches:s,symbol:c=""})=>{const f=()=>{if(!s||!t)return[e];const C=e.toLowerCase().indexOf(t.toLowerCase()),x=e.substr(0,C),A=e.slice(C,C+t.length),y=e.substr(C+t.length);return[x,A,y]},[l,o,w]=f();return p.jsxs(i.Text,{children:[c,l,o?p.jsx("strong",{children:o}):null,w||null]})},fe=N.css`
|
|
56
|
+
opacity: 0.5;
|
|
57
|
+
pointer-events: none;
|
|
58
|
+
`,H=e=>{var t,s;return N.css`
|
|
59
|
+
background-color: ${(t=e.theme.colors)==null?void 0:t.text};
|
|
60
|
+
color: #ffffff;
|
|
61
|
+
outline: none;
|
|
62
|
+
|
|
63
|
+
span:first-child {
|
|
64
|
+
border-color: ${(s=e.theme.colors)==null?void 0:s.text};
|
|
65
|
+
}
|
|
66
|
+
`},J=z(i.Link)`
|
|
67
|
+
display: block;
|
|
68
|
+
text-decoration: none;
|
|
69
|
+
font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
|
|
70
|
+
|
|
71
|
+
${e=>e.disabled&&fe}
|
|
72
|
+
color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
|
|
73
|
+
background-color: transparent;
|
|
74
|
+
|
|
75
|
+
span {
|
|
76
|
+
display: block;
|
|
77
|
+
${e=>{var t,s,c,f;return e["data-level"]?`padding: calc(${(t=e.theme.sizes)==null?void 0:t.normal} / 2) ${(s=e.theme.sizes)==null?void 0:s.normal};`:`padding: calc(${(c=e.theme.sizes)==null?void 0:c.normal} / 2) ${(f=e.theme.sizes)==null?void 0:f.medium}; `}}
|
|
78
|
+
${e=>e["data-level"]&&"border-left: 2px solid"}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
span:first-child {
|
|
82
|
+
border-color: #e7e7e7;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
${e=>{var t;return e["data-level"]&&`padding: 0 calc(${(t=e.theme.sizes)==null?void 0:t.medium} * ${e["data-level"]});`}}
|
|
86
|
+
|
|
87
|
+
${e=>e.autoSelect&&H}
|
|
88
|
+
|
|
89
|
+
&:hover,
|
|
90
|
+
&:focus {
|
|
91
|
+
${H}
|
|
92
|
+
}
|
|
93
|
+
`,ge=({phrase:e="",inputHasFocus:t,searchContainerRef:s})=>{const{quickFilter:c={open:!1,loading:!1,symbol:"",type:"",items:[]},activeFilterBadges:f,noMatchesLabel:l="No matching items"}=i.useProperties(),[o,w]=i.useScroll(!0),C=i.useContainer(),{events:x}=C.get("$widget"),A=h.useRef(),y=h.useCallback(g=>(g&&g.addEventListener("keydown",()=>{K(g).focusedIndex>-1&&x.subscribeOnce("router:changed",()=>{W(s)})},!0),A.current=g,g),[s]),{items:E=[],symbol:j,type:b,open:I,loading:u}=c,n=h.useMemo(()=>{const g=((f==null?void 0:f.tag)||[]).map(r=>r.id);return E.filter(r=>!g.includes(r.id))},[E,f]);if(!I||!j)return null;const a=e.slice(e.indexOf(j)+1);return p.jsxs(he,{ref:y,"data-loading":u,className:F.appendClassNames("humany-quick-filter-dropdown",[b==="guideCategory","humany-quick-filter-guide-categories"],[b==="tag","humany-quick-filter-tags"]),children:[p.jsx(me,{className:"humany-quick-filter-dropdown-inner",css:o,ref:w,children:n.length>0?p.jsx(de,{filterType:b,items:n,filterPhrase:a,filterContainer:w.current,searchContainer:s,inputHasFocus:t}):p.jsx(pe,{children:l})}),p.jsx(i.Loader,{loading:u})]})},he=z.div`
|
|
94
|
+
${e=>i.contentBox(e)};
|
|
95
|
+
position: absolute;
|
|
96
|
+
top: calc(100% + ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}});
|
|
97
|
+
left: 0;
|
|
98
|
+
right: 0;
|
|
99
|
+
z-index: 1;
|
|
100
|
+
overflow: hidden;
|
|
101
|
+
`,me=z.div`
|
|
102
|
+
max-height: 300px;
|
|
103
|
+
overflow: auto;
|
|
104
|
+
padding: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.medium}} 0;
|
|
105
|
+
${e=>e.css}
|
|
106
|
+
ul {
|
|
107
|
+
list-style: none;
|
|
108
|
+
padding: 0;
|
|
109
|
+
margin: 0;
|
|
110
|
+
}
|
|
111
|
+
li div {
|
|
112
|
+
${e=>{var t;return`margin: ${(t=e.theme.sizes)==null?void 0:t.normal} 0;`}}
|
|
113
|
+
}
|
|
114
|
+
`,pe=z.p`
|
|
115
|
+
margin: 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
|
|
116
|
+
color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
|
|
117
|
+
`,P=(e,t)=>{if(e&&!t||!e&&t)return!0;if(e&&t){if(!Array.isArray(e)&&!Array.isArray(t)){if(e.id!==t.id)return!0}else if(!((c,f)=>c.length===f.length?c.every((l,o)=>l===f[o]):!1)(e,t))return!0}return!1},ye=(e,t={},s=!0)=>{const c=i.useDispatch(),{quickFilters:f=!1,quickFilter:l={open:!1},activeFilterBadges:o,filterBadges:w=!1,incremental:C=600}=i.useProperties(),x=i.useDebounce(e,typeof C=="boolean"?600:C),A=i.usePrevious(x),y=i.usePrevious(o),E=h.useRef(null),j=h.useCallback((n="")=>{var a;if(w){const g=P(o==null?void 0:o.guideCategory,y==null?void 0:y.guideCategory)||P(o==null?void 0:o.tag,y==null?void 0:y.tag);return c("search",{value:n,filtersChanged:g,filters:{tagIds:((o==null?void 0:o.tag)||[]).map(r=>r.id),guideCategoryId:((a=o==null?void 0:o.guideCategory)==null?void 0:a.id)||null}})}return c("search",{value:n})},[c,o]),b=h.useCallback(n=>{c("clear",{navigateToHome:n})},[c]),I=n=>f?n.replace(/([@#].*)/g,""):n,u=h.useCallback(n=>{if(l.open&&n.preventDefault){n.preventDefault();return}const a=document.activeElement,g=E.current&&typeof E.current.contains=="function"?E.current.contains(a):!1,r=I(e);typeof n=="boolean"&&n||r.length&&g||o!=null&&o.guideCategory||o!=null&&o.tag.length&&g?j(r):b(g)},[E,e,l,b,o,j]);return h.useEffect(()=>{const n=P(o==null?void 0:o.guideCategory,y==null?void 0:y.guideCategory)||P(o==null?void 0:o.tag,y==null?void 0:y.tag),a=x&&I(x),g=A&&I(A);typeof g<"u"&&g!==a&&a!==t.phrase&&s&&!l.open&&u(n)},[x,l.open,o,u]),h.useEffect(()=>{if(e&&f){const n=typeof f=="boolean"&&!!f||typeof f=="object"&&!!f.guideCategory,a=typeof f=="boolean"&&!!f||typeof f=="object"&&!!f.tag;n&&e.indexOf("@")===e.length-1&&c("quick-filter:open",{type:"guideCategory",symbol:"@"}),a&&e.indexOf("#")===e.length-1&&c("quick-filter:open",{type:"tag",symbol:"#"})}l.open&&e.indexOf("@")===-1&&e.indexOf("#")===-1&&c("quick-filter:close")},[e]),[u,b,E]},be=({className:e,...t})=>{const{showSearchButton:s,showClearButton:c,role:f="search",autoFocus:l,placeholder:o,searchButtonLabel:w,searchButtonText:C,clearButtonLabel:x,ariaLabel:A,route:y="search",incremental:E=!0,showChildren:j=!1,quickFilter:b,quickFilters:I,filterBadges:u}=i.useProperties(),{params:n}=i.useRouteData(),[a,g]=h.useState(!1),[r,d]=h.useState(n.phrase||""),[m,k]=h.useState({guideCategory:!1,tag:!1}),q=i.useContainer(),$=i.useChildren(),L=i.useDispatch(),{position:_="inside"}=typeof u=="object"?u:{};h.useEffect(()=>{const{guideCategory:S,tag:v}=n,D=typeof u=="object"?!!u.guideCategory:!!u,ne=typeof u=="object"?!!u.tag:!!u;k({guideCategory:D&&!!S,tag:ne&&!!v})},[u,n]),i.useWidgetEvent("router:changed",()=>{if(b){const{open:S,symbol:v}=b;if(S){if(v){const D=r.replace(r.slice(r.indexOf(v)),"");d(D)}L("quick-filter:close")}}},[b,r,d,L]);const[M,O,B]=ye(r,n,!!E);h.useEffect(()=>{d(n.phrase||"")},[n.phrase]);const R=h.useCallback(S=>{d(S)},[d]),V=h.useCallback(()=>{L("quick-filter:close").then(()=>O(!0))},[L,O]),ee=h.useCallback(()=>{var S,v;l&&!a&&((v=(S=B.current)==null?void 0:S.getElementsByTagName("input")[0])==null||v.focus())},[l,a,B]),te=h.useCallback(()=>{q.getAsync("router").then(S=>{const v=S.getInitialRoute(),D=S.getRouteData();(v==null?void 0:v.name)===D.name&&(v==null?void 0:v.name)!==y?d(""):O(!0)})},[q,d,O]),U=S=>{if(S!==_)return null;if(m.guideCategory||m.tag)return p.jsx(ie,{position:S,inputHasFocus:a,showGuideCategory:m.guideCategory,showTag:m.tag,searchContainerRef:B.current})};i.useTransitionEnd(ee);const Q=c&&(m.guideCategory||m.tag||r),se=I?i.convertToStringAttributes({role:"combobox","aria-autocomplete":"list",autoComplete:"off","aria-haspopup":"listbox"}):{};return p.jsxs(xe,{...t,ref:B,role:f,className:F.appendClassNames(e,"humany-search"),"data-has-phrase":!!r,"data-has-focus":a,"data-has-search-symbol":s?"true":"false",children:[p.jsxs(ke,{action:".",onSubmit:S=>{var v,D;S.preventDefault(),(D=(v=B.current)==null?void 0:v.getElementsByTagName("input")[0])==null||D.blur()},"data-has-focus":a,children:[s&&p.jsxs(Ce,{"aria-label":w,type:"submit",title:w,disabled:!r,onClick:M,"data-has-phrase":!!r,"data-has-focus":a,children:[p.jsx(i.SymbolBadge,{size:32,symbol:{type:"Svg",content:"search"}}),C]}),U("inside"),p.jsx(i.Input,{crossOrigin:void 0,type:"search","aria-label":A,...se,placeholder:m.guideCategory||m.tag?"":o,onFocusChange:g,onEscape:V,onEnter:M,onChange:R,value:r}),Q&&p.jsx($e,{"aria-label":x,type:"reset",hasFocus:a,title:x,onClick:te,children:p.jsx(i.SymbolBadge,{size:27,symbol:{type:"Svg",content:"clear"}})}),j&&!Q&&$.map(S=>p.jsx(oe.Component,{id:S.id,branch:"default"},S.id)),p.jsx(ge,{inputHasFocus:a,phrase:r,searchContainerRef:B.current})]}),U("below")]})},xe=z.div`
|
|
118
|
+
${i.contentBox};
|
|
119
|
+
width: 100%;
|
|
120
|
+
padding: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.large}};
|
|
121
|
+
|
|
122
|
+
input {
|
|
123
|
+
background-color: transparent;
|
|
124
|
+
border: none;
|
|
125
|
+
outline: none;
|
|
126
|
+
min-width: 25%;
|
|
127
|
+
flex: 1;
|
|
128
|
+
font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
|
|
129
|
+
font-weight: 300;
|
|
130
|
+
font-style: italic;
|
|
131
|
+
padding: 1em 0;
|
|
132
|
+
color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
|
|
133
|
+
-webkit-appearance: none;
|
|
134
|
+
|
|
135
|
+
${e=>{var t;return e["data-has-search-symbol"]==="true"&&`text-indent: ${(t=e.theme.sizes)==null?void 0:t.normal};`}}
|
|
136
|
+
|
|
137
|
+
::placeholder {
|
|
138
|
+
color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
|
|
139
|
+
}
|
|
140
|
+
/* removes the 'X' from IE */
|
|
141
|
+
&[type='search']::-ms-clear {
|
|
142
|
+
display: none;
|
|
143
|
+
width: 0;
|
|
144
|
+
height: 0;
|
|
145
|
+
}
|
|
146
|
+
&[type='search']::-ms-reveal {
|
|
147
|
+
display: none;
|
|
148
|
+
width: 0;
|
|
149
|
+
height: 0;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/* removes the 'X' from Chrome */
|
|
153
|
+
&[type='search']::-webkit-search-decoration,
|
|
154
|
+
&[type='search']::-webkit-search-cancel-button,
|
|
155
|
+
&[type='search']::-webkit-search-results-button,
|
|
156
|
+
&[type='search']::-webkit-search-results-decoration {
|
|
157
|
+
display: none;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
&:focus {
|
|
161
|
+
outline: none;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
button {
|
|
166
|
+
background: transparent;
|
|
167
|
+
border: none;
|
|
168
|
+
padding: 0;
|
|
169
|
+
display: inline-flex;
|
|
170
|
+
align-items: center;
|
|
171
|
+
font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.large}};
|
|
172
|
+
transition: color 200ms ease-out;
|
|
173
|
+
color: ${e=>{var t;return e["data-has-focus"]||e["data-has-phrase"]?(t=e.theme.colors)==null?void 0:t.primary:"#000000"}};
|
|
174
|
+
cursor: pointer;
|
|
175
|
+
> svg {
|
|
176
|
+
height: 100%;
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
`,ke=z.form`
|
|
180
|
+
display: flex;
|
|
181
|
+
flex-wrap: nowrap;
|
|
182
|
+
align-items: center;
|
|
183
|
+
border: ${e=>e.theme.inputBorder};
|
|
184
|
+
border-radius: ${e=>e.theme.borderRadius};
|
|
185
|
+
background-color: #ffffff;
|
|
186
|
+
position: relative;
|
|
187
|
+
padding: 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
|
|
188
|
+
|
|
189
|
+
${e=>{var t,s;return e["data-has-focus"]&&N.css`
|
|
190
|
+
${(t=e.theme.accessibility)!=null&&t.isTabbing?i.borderTabStyle(e):`
|
|
191
|
+
border-color: ${(s=e.theme.colors)==null?void 0:s.primary};
|
|
192
|
+
outline: none;
|
|
193
|
+
input {
|
|
194
|
+
outline: none;
|
|
195
|
+
}
|
|
196
|
+
`}
|
|
197
|
+
`}};
|
|
198
|
+
`,Ce=z(i.Button)`
|
|
199
|
+
padding: 0;
|
|
200
|
+
height: 2em;
|
|
201
|
+
|
|
202
|
+
svg {
|
|
203
|
+
circle,
|
|
204
|
+
line {
|
|
205
|
+
stroke: ${e=>{var t;return e["data-has-focus"]?(t=e.theme.colors)==null?void 0:t.primary:"#000000"}};
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
`,$e=z(i.Button)`
|
|
209
|
+
&:focus-visible svg {
|
|
210
|
+
${i.borderTabStyle}
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
svg {
|
|
214
|
+
vertical-align: top;
|
|
215
|
+
|
|
216
|
+
circle,
|
|
217
|
+
line,
|
|
218
|
+
path {
|
|
219
|
+
stroke: ${e=>{var t,s;return e.hasFocus?(t=e.theme.colors)==null?void 0:t.primary:(s=e.theme.colors)==null?void 0:s.text}};
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
`;exports.default=be;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { Category, Tag } from '../../../knowledge/core/src/index.ts';
|
|
2
|
+
import { Container } from '@webprovisions/platform';
|
|
3
|
+
|
|
4
|
+
export type SearchComponentProps = {
|
|
5
|
+
route?: string;
|
|
6
|
+
role?: string;
|
|
7
|
+
showSearchButton: boolean;
|
|
8
|
+
showClearButton: boolean;
|
|
9
|
+
showChildren: boolean;
|
|
10
|
+
searchButtonLabel: string;
|
|
11
|
+
searchButtonText?: string;
|
|
12
|
+
clearButtonLabel: string;
|
|
13
|
+
ariaLabel?: string;
|
|
14
|
+
noMatchesLabel?: string;
|
|
15
|
+
placeholder: string;
|
|
16
|
+
autoFocus: boolean;
|
|
17
|
+
incremental?: boolean | number;
|
|
18
|
+
filterBadges?: FilterConfig | boolean;
|
|
19
|
+
activeFilterBadges?: ActiveFilterBadges;
|
|
20
|
+
deleteFilterBadgeAriaLabel?: string;
|
|
21
|
+
quickFilters?: FilterConfig | boolean;
|
|
22
|
+
quickFilter?: Filter;
|
|
23
|
+
patchParams?: boolean;
|
|
24
|
+
};
|
|
25
|
+
export type Filter = {
|
|
26
|
+
items?: Category[] | Tag[];
|
|
27
|
+
type?: 'guideCategory' | 'tag';
|
|
28
|
+
symbol?: string;
|
|
29
|
+
loading: boolean;
|
|
30
|
+
open: boolean;
|
|
31
|
+
};
|
|
32
|
+
export type ActiveFilterBadges = {
|
|
33
|
+
guideCategory?: Category | null;
|
|
34
|
+
tag: Tag[];
|
|
35
|
+
tooltip?: string | null;
|
|
36
|
+
initial?: boolean;
|
|
37
|
+
};
|
|
38
|
+
export type FilterConfig = {
|
|
39
|
+
autoSelect?: boolean;
|
|
40
|
+
guideCategory?: boolean;
|
|
41
|
+
tag?: boolean;
|
|
42
|
+
position?: 'inside' | 'below';
|
|
43
|
+
};
|
|
44
|
+
declare const SearchComponent: (container: Container) => Promise<void>;
|
|
45
|
+
export default SearchComponent;
|
package/search.d.ts
ADDED
package/use-search.d.ts
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
type ReturnType = [
|
|
2
|
+
(arg: React.KeyboardEvent | React.MouseEvent | boolean) => void,
|
|
3
|
+
(navigateToHome: boolean) => void,
|
|
4
|
+
React.MutableRefObject<HTMLElement | null>
|
|
5
|
+
];
|
|
6
|
+
declare const _default: (phrase: string, params?: {
|
|
7
|
+
[key: string]: any;
|
|
8
|
+
}, debounce?: boolean) => ReturnType;
|
|
9
|
+
export default _default;
|
package/utils.d.ts
ADDED
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { Category, Tag } from '../../../knowledge/core/src/index.ts';
|
|
2
|
+
|
|
3
|
+
export declare const match: (title: string, phrase: string) => boolean;
|
|
4
|
+
export declare const filterItems: (items: (Tag | Category)[] | undefined, type: 'tag' | 'guideCategory', phrase: string) => any[];
|