@magicx-eng/ai-autocomplete-react 0.1.7 → 0.1.8

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 (4) hide show
  1. package/README.md +8 -0
  2. package/dist/index.js +1 -1
  3. package/dist/index.mjs +1 -1
  4. package/package.json +3 -2
package/README.md CHANGED
@@ -29,6 +29,14 @@ React 17 or later:
29
29
  pnpm add react react-dom
30
30
  ```
31
31
 
32
+ ## Styles
33
+
34
+ Import the stylesheet once in your app entry point:
35
+
36
+ ```ts
37
+ import "@magicx-eng/ai-autocomplete-react/styles.css";
38
+ ```
39
+
32
40
  ## Usage
33
41
 
34
42
  ### Tier 1: Full Component
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var ye=Object.defineProperty;var Ze=Object.getOwnPropertyDescriptor;var et=Object.getOwnPropertyNames;var tt=Object.prototype.hasOwnProperty;var ot=(e,o)=>{for(var t in o)ye(e,t,{get:o[t],enumerable:!0})},rt=(e,o,t,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of et(o))!tt.call(e,r)&&r!==t&&ye(e,r,{get:()=>o[r],enumerable:!(n=Ze(o,r))||n.enumerable});return e};var nt=e=>rt(ye({},"__esModule",{value:!0}),e);var vt={};ot(vt,{AIAutocomplete:()=>qe,AIAutocompleteDropdown:()=>ne,useAIAutocomplete:()=>ce});module.exports=nt(vt);var D=require("react");var K={};var Se={};var _e={};var Y={};var re=require("react/jsx-runtime");function Te({option:e,isHighlighted:o,onSelect:t,onHighlight:n,id:r}){let a=[Y.item,o?Y.highlighted:"",e.is_tappable?Y.tappable:Y.nonTappable].filter(Boolean).join(" ");return(0,re.jsxs)("div",{id:r,role:"option","aria-selected":o,className:a,tabIndex:e.is_tappable?0:-1,onClick:()=>e.is_tappable&&t(e),onKeyDown:i=>{e.is_tappable&&(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),t(e))},onMouseEnter:n,children:[e.icon?`${e.icon} ${e.text}`:e.text,e.tag&&(0,re.jsx)("span",{className:Y.tag,children:e.tag})]})}var xe=require("react/jsx-runtime");function Ee({options:e,activeIndex:o,onSelect:t,onHighlight:n,listboxId:r}){return(0,xe.jsx)("div",{className:_e.grid,children:e.map((a,i)=>(0,xe.jsx)(Te,{option:a,isHighlighted:i===o,onSelect:t,onHighlight:()=>n(i),id:`${r}-option-${i}`},a.text))})}var Pe=require("react/jsx-runtime");function ne({suggestions:e,activeIndex:o,onSelect:t,onHighlight:n,isOpen:r,id:a,className:i}){let m=e[0],g=r&&m&&m.options.length>0;return(0,Pe.jsx)("div",{id:a,role:"listbox",className:`${Se.dropdown} ${g?Se.visible:""} ${i??""}`,onMouseDown:h=>h.preventDefault(),children:m&&m.options.length>0&&(0,Pe.jsx)(Ee,{options:m.options,activeIndex:o,onSelect:t,onHighlight:n,listboxId:a})})}var ae={};var ve=require("react/jsx-runtime");function ut(e){return e===0?.4:e===1?.3:.15}function Me({pills:e,activePillIndex:o,onSelectPill:t}){return(0,ve.jsx)("span",{className:ae.list,children:e.map((n,r)=>(0,ve.jsx)("button",{type:"button",className:`${ae.pill} ${r===o?ae.active:""}`,style:{opacity:ut(r)},onClick:()=>t(r),children:n.text},`${n.type}-${n.text}`))})}var p=require("react");function se(e,o){let t=o.trimStart();if(!t)return e;let n=t.toLowerCase();return e.filter(r=>!r.is_tappable||r.text.toLowerCase().includes(n))}function Z(e,o){let t=o.trim();if(!t)return null;let n=t.toLowerCase();return e.find(r=>r.is_tappable&&r.text.toLowerCase()===n)??null}function Ue(e,o){let t=[],n=0;for(let a of o){let i=e.indexOf(a.text,n);i!==-1&&(i>n&&t.push({type:"text",value:e.slice(n,i)}),t.push({type:"completed",value:a.text,param:a}),n=i+a.text.length)}let r=e.slice(n);return r&&t.push({type:"text",value:r}),t}function Le(e,o){let t=[],n=[],r=0;for(let a of o){let i=e.indexOf(a.text,r);i===-1?n.push(a):(t.push(a),r=i+a.text.length)}return{valid:t,invalid:n}}var E=require("react");var pt="0.1.7",mt="/ac/suggest",Ne=!1;function dt(e){let o=e?.apiKey||""||"";return!o&&!Ne&&(Ne=!0,console.warn("[AIAutocomplete] No API key set (MAGICX_AI_AUTOCOMPLETE_API_KEY). Requests will be sent without an Authorization header.")),o}function ft(e){return e?.authScheme?e.authScheme:""==="Basic"?"Basic":"Bearer"}function gt(){return crypto.randomUUID()}function ht(e,o){return{placeholder:e.placeholder,type:e.type,...o&&{text:e.text},kind:e.kind}}async function De(e,o,t){let n=t?.apiConfig,r=dt(n),a=ft(n),i=!t?.maskCompletedText,m=o.find(c=>c.type==="contact"&&c.metadata?.contact_account_count)?.metadata?.contact_account_count,g=typeof m=="number"?m:void 0,h={data:{raw_query:e,completed_params:o.map(c=>ht(c,i)),...g!=null&&{contact_account_count:g}},meta:{request_id:gt(),request_at:new Date().toISOString(),language:typeof navigator<"u"?navigator.language:"en-US",client_version:pt}},d={"Content-Type":"application/json","X-App-Identifier":"active-campaign-demo",...n?.headers};r&&(d.Authorization=a==="Basic"?`Basic ${btoa(r)}`:`Bearer ${r}`);let b=await fetch(n?.endpoint||mt,{method:"POST",headers:d,body:JSON.stringify(h),signal:t?.signal});if(!b.ok)throw new Error(`API error: ${b.status} ${b.statusText}`);return b.json()}function J(e,o){let t=e,n={},r=[];for(let a of o){let i=(n[a.type]??0)+1;n[a.type]=i;let g=`{{${a.type.toUpperCase().replace(/\s+/g,"_")}_${i}}}`,h=t.indexOf(a.text);h!==-1&&(t=t.slice(0,h)+g+t.slice(h+a.text.length)),r.push({...a,placeholder:g})}return{rawQuery:t,completedParams:r}}function Fe(e,o){return o?e.map(t=>{let n=o[t.type];if(!n)return t;let r=n("");if(r.length===0)return t;let a=new Set(r.map(m=>m.text)),i=(t.options??[]).filter(m=>!a.has(m.text));return{...t,options:[...r,...i]}}):e}var bt=100,yt=300,St=2;function $e({textRef:e,suggestionsRef:o,filterBaseRef:t,maskCompletedTextRef:n,apiConfigRef:r,optionOverridesRef:a,onErrorRef:i,setCompletedParams:m,setSuggestions:g,setActiveDropdownIndex:h}){let[d,b]=(0,E.useState)(!1),[c,S]=(0,E.useState)(null),[O,y]=(0,E.useState)(!1),C=(0,E.useRef)(0),L=(0,E.useRef)(null),f=(0,E.useRef)(""),l=(0,E.useCallback)(async(s,u)=>{L.current?.abort();let P=new AbortController;L.current=P;let I=++C.current,R=e.current.length;o.current.some(k=>k.type!=="placeholder")||b(!0),S(null);try{let k=await De(s,u,{maskCompletedText:n.current,signal:P.signal,apiConfig:r.current});if(I!==C.current)return;let F=Fe(k.data.suggestions??[],a.current);y(k.data.is_ready??!1),f.current=s;let B=k.data.input??[],M=B[B.length-1],U=e.current;if(M?.state==="in_progress"){let j=U.toLowerCase().lastIndexOf(M.text.toLowerCase());j!==-1?t.current=j:t.current=R}else t.current=R;let $=F.filter(j=>j.type!=="placeholder")[0];if($){let j=U.slice(t.current),_=Z($.options,j);_&&(m(z=>[...z,{id:crypto.randomUUID(),placeholder:"",type:$.type,text:_.text,kind:_.kind,suggestionType:$.type,suggestionPlaceholder:$.text,options:$.options,metadata:_.metadata}]),F=F.filter(z=>z!==$))}g(F),b(!1),h(-1)}catch(k){if(I===C.current){let F=k instanceof Error?k:new Error(String(k));S(F),b(!1),i.current?.(F)}}},[e,o,t,n,r,a,i,m,g,h]);return(0,E.useEffect)(()=>(l("",[]),()=>{L.current?.abort()}),[l]),{doFetch:l,isLoading:d,error:c,isReady:O,lastRawQueryRef:f}}function Ke({text:e,completedParams:o,doFetch:t,filterBaseRef:n,skipNextFetchRef:r,suggestionsRef:a,lastRawQueryRef:i}){let m=(0,E.useRef)(null),g=(0,E.useRef)(null),h=(0,E.useRef)(!0);(0,E.useEffect)(()=>{m.current&&clearTimeout(m.current),g.current&&clearTimeout(g.current);let d=b=>{if(r.current)return r.current=!1,!1;if(!e&&o.length===0)return h.current?(t("",[]),!0):(h.current=!0,!1);let c=e.slice(n.current),y=a.current.filter(R=>R.type!=="placeholder")[0],L=(y?se(y.options,c):[]).filter(R=>R.is_tappable),f=y?Z(y.options,c)!==null:!1,l=c.trim().length>0;if(L.length>0&&!f&&l)return!1;let{rawQuery:s,completedParams:u}=J(e,o),P=s.length<i.current.length,I=Math.abs(s.length-i.current.length);return P||I>=b?(t(s,u),!0):!1};return m.current=setTimeout(()=>{d(St)&&g.current&&clearTimeout(g.current)},bt),g.current=setTimeout(()=>d(1),yt),()=>{m.current&&clearTimeout(m.current),g.current&&clearTimeout(g.current)}},[e,o,t,n,r,a,i])}var Ae=require("react");function je({activeDropdownIndex:e,setActiveDropdownIndex:o,filteredOptions:t,selectOption:n,onSubmitRef:r,text:a,completedParams:i,isDropdownOpen:m,hasPlaceholder:g,placeholderText:h,suggestions:d,filterBaseRef:b,columns:c,setText:S,setCompletedParams:O,setSuggestions:y}){let C=(0,Ae.useCallback)(()=>{let f=t.map((s,u)=>s.is_tappable?u:-1).filter(s=>s!==-1),l=Array.from({length:c},()=>[]);for(let s of f)l[s%c].push(s);return l.flat()},[t,c]);return{handleKeyDown:(0,Ae.useCallback)(f=>{let l=C();switch(f.key){case"ArrowDown":{if(f.preventDefault(),l.length===0)return;let s=l.indexOf(e),u=s<l.length-1?s+1:0;o(l[u]);break}case"ArrowUp":{if(f.preventDefault(),l.length===0)return;let s=l.indexOf(e),u=s>0?s-1:l.length-1;o(l[u]);break}case"ArrowRight":{if(e<0)break;if(e%c<c-1){let u=e+1;u<t.length&&t[u]?.is_tappable&&(f.preventDefault(),o(u))}break}case"ArrowLeft":{if(e<0)break;if(e%c>0){let s=e-1;s>=0&&t[s]?.is_tappable&&(f.preventDefault(),o(s))}break}case"Enter":{if(f.preventDefault(),e>=0&&t[e]?.is_tappable)n(t[e]);else if(r.current){let{rawQuery:s,completedParams:u}=J(a,i),P={query:a.trim(),raw_query:s,completed_params:u};r.current(P)}break}case"Tab":{if(e>=0&&t[e]?.is_tappable)f.preventDefault(),n(t[e]);else if(m){let s=t.find(u=>u.is_tappable);s&&(f.preventDefault(),n(s))}else if(!a&&g){f.preventDefault();let s=d.find(u=>u.type==="placeholder");s?(S(h),b.current=h.length,O(u=>[...u,{id:crypto.randomUUID(),placeholder:"",type:s.type,text:h,kind:null,suggestionType:s.type,suggestionPlaceholder:s.text,options:s.options}]),y(u=>u.filter(P=>P!==s))):(S(h),b.current=h.length)}break}case"Escape":o(-1);break}},[e,c,i,t,b,C,g,m,r,h,n,o,O,y,S,d,a]),getTappableIndices:C}}var ie=require("react");function ze({completedParams:e,suggestions:o,setCompletedParams:t,setSuggestions:n,setActiveDropdownIndex:r,filterBaseRef:a,pillTappedRef:i}){let m=(0,ie.useCallback)(d=>{let b=o.filter(y=>y.type!=="placeholder");if(d<0||d>=b.length)return;let c=b[d],S=b.filter((y,C)=>C!==d),O=o.filter(y=>y.type==="placeholder");n([...O,c,...S]),i.current=!0,r(-1)},[o,n,r,i]),g=(0,ie.useCallback)(()=>{if(e.length===0)return;let d=e[e.length-1],b={type:d.suggestionType,text:d.suggestionPlaceholder,required:!0,options:d.options};t(c=>c.slice(0,-1)),n(c=>[b,...c]),r(-1)},[e,t,n,r]),h=(0,ie.useCallback)(d=>{let b={type:d.suggestionType,text:d.suggestionPlaceholder,required:!0,options:d.options};return{apply:c=>{c(S=>{let O=0;for(let y of e){let C=S.indexOf(y.text,O);if(C!==-1){if(y.id===d.id){let L=S.slice(0,C),f=S.slice(C+d.text.length),l=(L+f).replace(/ {2,}/g," ");return a.current=Math.min(a.current,l.length),l}O=C+y.text.length}}return S}),t(S=>S.filter(O=>O.id!==d.id)),n(S=>[b,...S]),r(-1),i.current=!0}}},[e,t,n,r,a,i]);return{setActivePill:m,removeLastParam:g,reEditParam:h}}var xt=0;function Pt(){let e=(0,p.useRef)(null);return e.current===null&&(e.current=`:ac-${++xt}:`),e.current}function ce({onSubmit:e,onError:o,optionOverrides:t,maskCompletedText:n,placeholder:r,apiConfig:a,columns:i=2,eagerSuggestions:m=!0,value:g,completedParams:h,onChange:d,onParamsChange:b}){let c=g!==void 0,S=h!==void 0,[O,y]=(0,p.useState)(""),[C,L]=(0,p.useState)([]),[f,l]=(0,p.useState)([]),[s,u]=(0,p.useState)(-1),P=c?g:O,I=S?h:C,R=(0,p.useRef)(e);R.current=e;let H=(0,p.useRef)(d);H.current=d;let k=(0,p.useRef)(b);k.current=b;let F=(0,p.useRef)(g);F.current=g;let B=(0,p.useRef)(h);B.current=h;let M=(0,p.useCallback)(x=>{if(typeof x=="function")if(c){let A=x(F.current??"");H.current?.(A)}else y(A=>{let Q=x(A);return H.current?.(Q),Q});else c||y(x),H.current?.(x)},[c]),U=(0,p.useCallback)(x=>{if(typeof x=="function")if(S){let A=x(B.current??[]);k.current?.(A)}else L(A=>{let Q=x(A);return k.current?.(Q),Q});else S||L(x),k.current?.(x)},[S]),W=(0,p.useRef)(o);W.current=o;let $=(0,p.useRef)(t);$.current=t;let j=(0,p.useRef)(n);j.current=n;let _=(0,p.useRef)(a);_.current=a;let z=(0,p.useRef)(P);z.current=P;let le=(0,p.useRef)(f);le.current=f;let q=(0,p.useRef)(0),ee=(0,p.useRef)(!1),Ce=(0,p.useRef)(!1),ue=Pt(),{doFetch:pe,isLoading:ke,error:Be,isReady:Qe,lastRawQueryRef:me}=$e({textRef:z,suggestionsRef:le,filterBaseRef:q,maskCompletedTextRef:j,apiConfigRef:_,optionOverridesRef:$,onErrorRef:W,setCompletedParams:U,setSuggestions:l,setActiveDropdownIndex:u});Ke({text:P,completedParams:I,doFetch:pe,filterBaseRef:q,skipNextFetchRef:Ce,suggestionsRef:le,lastRawQueryRef:me});let He=(0,p.useMemo)(()=>Ue(P,I),[P,I]);q.current=Math.min(q.current,P.length);let de=P.slice(q.current),fe=(0,p.useMemo)(()=>f.filter(A=>A.type==="placeholder").map(A=>A.text).join(" ")||r||"",[f,r]),te=(0,p.useMemo)(()=>f.filter(x=>x.type!=="placeholder"),[f]),v=te[0],we=v?t?.[v.type]:void 0,Oe=v?we?we(de.trim()):v.options??[]:[],ge=(0,p.useMemo)(()=>se(Oe,de),[Oe,de]),Ie=fe.length>0,he=!ke&&ge.length>0&&(!!P||ee.current||!Ie),Re=(0,p.useCallback)(x=>{if(!v)return;let A={id:crypto.randomUUID(),placeholder:"",type:v.type,text:x.text,kind:x.kind,suggestionType:v.type,suggestionPlaceholder:v.text,options:v.options,metadata:x.metadata},Q=q.current,N=z.current.slice(0,Q);if(N.length>0&&!N.endsWith(" ")){let T=N.split(/\s+/).pop()??"";T&&x.text.toLowerCase().startsWith(T.toLowerCase())&&(N=N.slice(0,N.length-T.length))}let be=N.length>0&&N[N.length-1]!==" ",G=N+(be?" ":"")+x.text+" ";M(G),q.current=G.length,U(T=>[...T,A]),ee.current=!1,u(-1);let V=te.length-1;m&&V>0?(l(T=>T.filter(X=>X!==v)),Ce.current=!0):l(T=>T.filter(X=>X.type==="placeholder"))},[v,te,m,M,U]),Ve=(0,p.useCallback)(x=>{let A=x.target.value,N=A.length>0&&!x.nativeEvent?.isComposing&&A[0]!==A[0].toUpperCase()?A[0].toUpperCase()+A.slice(1):A;M(N),ee.current=!1,u(-1);let{valid:be,invalid:G}=Le(N,I);if(G.length>0){U(()=>be);for(let V of G)l(T=>[{type:V.suggestionType,text:V.suggestionPlaceholder,required:!0,options:V.options},...T])}if(v&&G.length===0){let V=N.slice(q.current),T=Z(v.options,V);T&&(U(X=>[...X,{id:crypto.randomUUID(),placeholder:"",type:v.type,text:T.text,kind:T.kind,suggestionType:v.type,suggestionPlaceholder:v.text,options:v.options,metadata:T.metadata}]),l(X=>X.filter(Je=>Je!==v)))}},[I,v,M,U]),{handleKeyDown:Xe}=je({activeDropdownIndex:s,setActiveDropdownIndex:u,filteredOptions:ge,selectOption:Re,onSubmitRef:R,text:P,completedParams:I,isDropdownOpen:he,hasPlaceholder:Ie,placeholderText:fe,suggestions:f,filterBaseRef:q,columns:i,setText:M,setCompletedParams:U,setSuggestions:l}),oe=ze({completedParams:I,suggestions:f,setCompletedParams:U,setSuggestions:l,setActiveDropdownIndex:u,filterBaseRef:q,pillTappedRef:ee}),We=(0,p.useCallback)(x=>{oe.reEditParam(x).apply(M)},[oe,M]),Ge=(0,p.useCallback)(()=>{M(""),U(()=>[]),l([]),u(-1),q.current=0,me.current="",pe("",[])},[pe,M,U,me]),Ye=s>=0?`${ue}-option-${s}`:void 0;return{completedParams:I,suggestionPills:te,setActivePill:oe.setActivePill,removeLastParam:oe.removeLastParam,reEditParam:We,segments:He,suggestions:f,activeIndex:s,isReady:Qe,isLoading:ke,error:Be,inputProps:{value:P,placeholder:fe||void 0,onChange:Ve,onKeyDown:Xe,role:"combobox","aria-expanded":he,"aria-activedescendant":Ye,"aria-autocomplete":"list","aria-controls":ue},reset:Ge,dropdownProps:{suggestions:v?[{...v,options:ge}]:[],activeIndex:s,onSelect:Re,onHighlight:u,isOpen:he,id:ue}}}var w=require("react/jsx-runtime"),qe=(0,D.forwardRef)(function({onSubmit:o,onError:t,optionOverrides:n,maskCompletedText:r,placeholder:a,className:i,apiConfig:m,columns:g,eagerSuggestions:h,value:d,completedParams:b,onChange:c,onParamsChange:S},O){let y=(0,D.useRef)(null),[C,L]=(0,D.useState)(!1),f=(0,D.useRef)(()=>{}),l=(0,D.useRef)(void 0);(0,D.useEffect)(()=>(y.current?.focus(),()=>clearTimeout(l.current)),[]);let{completedParams:s,suggestionPills:u,setActivePill:P,segments:I,inputProps:R,dropdownProps:H,reset:k}=ce({onSubmit:_=>f.current(_),onError:t,optionOverrides:n,maskCompletedText:r,placeholder:a,apiConfig:m,columns:g,eagerSuggestions:h,value:d,completedParams:b,onChange:c,onParamsChange:S});(0,D.useImperativeHandle)(O,()=>({focus:()=>y.current?.focus(),reset:k}),[k]);let F=()=>{y.current?.focus()},B=!!R.value||s.length>0,M=(0,D.useCallback)(()=>{if(!B)return;let{rawQuery:_,completedParams:z}=J(R.value,s);o({query:R.value.trim(),raw_query:_,completed_params:z}),k(),L(!0),clearTimeout(l.current),l.current=setTimeout(()=>L(!1),3e3)},[B,R.value,s,o,k]);f.current=M;let{onChange:U,placeholder:W,...$}=R,j=!R.value;return(0,w.jsxs)("div",{className:`${K.container} ${i??""}`,children:[(0,w.jsx)("div",{className:`${K.checkmark} ${C?K.checkmarkVisible:""}`,children:(0,w.jsxs)("svg",{width:"72",height:"72",viewBox:"0 0 24 24",fill:"none",role:"img","aria-label":"Success",children:[(0,w.jsx)("circle",{cx:"12",cy:"12",r:"12",fill:"#34C759"}),(0,w.jsx)("path",{d:"M7 12.5l3.5 3.5L17 9",stroke:"#000",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",className:K.checkmarkPath})]})}),(0,w.jsx)(ne,{...H}),(0,w.jsxs)("div",{className:K.inputWrapper,onClick:F,children:[(0,w.jsxs)("div",{className:K.editorArea,children:[(0,w.jsxs)("div",{className:K.sizerContent,"aria-hidden":"true",children:[j&&W?(0,w.jsxs)("span",{className:K.placeholderText,children:[W," "]}):(0,w.jsxs)("span",{className:K.sizerText,children:[I.map((_,z)=>(0,w.jsx)("span",{children:_.value},`${z}-${_.type}`)),I.length===0&&"\xA0"]})," ",(0,w.jsx)(Me,{pills:u,activePillIndex:0,onSelectPill:P})]}),(0,w.jsx)("textarea",{ref:y,className:K.textarea,rows:1,onChange:U,...$})]}),(0,w.jsx)("button",{type:"button",className:K.submitButton,disabled:!B,onClick:_=>{_.stopPropagation(),M()},"aria-label":"Submit",children:(0,w.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,w.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,useAIAutocomplete});
1
+ "use strict";var ye=Object.defineProperty;var Ze=Object.getOwnPropertyDescriptor;var et=Object.getOwnPropertyNames;var tt=Object.prototype.hasOwnProperty;var ot=(e,o)=>{for(var t in o)ye(e,t,{get:o[t],enumerable:!0})},rt=(e,o,t,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of et(o))!tt.call(e,r)&&r!==t&&ye(e,r,{get:()=>o[r],enumerable:!(n=Ze(o,r))||n.enumerable});return e};var nt=e=>rt(ye({},"__esModule",{value:!0}),e);var vt={};ot(vt,{AIAutocomplete:()=>qe,AIAutocompleteDropdown:()=>ne,useAIAutocomplete:()=>ce});module.exports=nt(vt);var D=require("react");var K={};var Se={};var _e={};var Y={};var re=require("react/jsx-runtime");function Te({option:e,isHighlighted:o,onSelect:t,onHighlight:n,id:r}){let a=[Y.item,o?Y.highlighted:"",e.is_tappable?Y.tappable:Y.nonTappable].filter(Boolean).join(" ");return(0,re.jsxs)("div",{id:r,role:"option","aria-selected":o,className:a,tabIndex:e.is_tappable?0:-1,onClick:()=>e.is_tappable&&t(e),onKeyDown:i=>{e.is_tappable&&(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),t(e))},onMouseEnter:n,children:[e.icon?`${e.icon} ${e.text}`:e.text,e.tag&&(0,re.jsx)("span",{className:Y.tag,children:e.tag})]})}var xe=require("react/jsx-runtime");function Ee({options:e,activeIndex:o,onSelect:t,onHighlight:n,listboxId:r}){return(0,xe.jsx)("div",{className:_e.grid,children:e.map((a,i)=>(0,xe.jsx)(Te,{option:a,isHighlighted:i===o,onSelect:t,onHighlight:()=>n(i),id:`${r}-option-${i}`},a.text))})}var Pe=require("react/jsx-runtime");function ne({suggestions:e,activeIndex:o,onSelect:t,onHighlight:n,isOpen:r,id:a,className:i}){let m=e[0],g=r&&m&&m.options.length>0;return(0,Pe.jsx)("div",{id:a,role:"listbox",className:`${Se.dropdown} ${g?Se.visible:""} ${i??""}`,onMouseDown:h=>h.preventDefault(),children:m&&m.options.length>0&&(0,Pe.jsx)(Ee,{options:m.options,activeIndex:o,onSelect:t,onHighlight:n,listboxId:a})})}var ae={};var ve=require("react/jsx-runtime");function ut(e){return e===0?.4:e===1?.3:.15}function Me({pills:e,activePillIndex:o,onSelectPill:t}){return(0,ve.jsx)("span",{className:ae.list,children:e.map((n,r)=>(0,ve.jsx)("button",{type:"button",className:`${ae.pill} ${r===o?ae.active:""}`,style:{opacity:ut(r)},onClick:()=>t(r),children:n.text},`${n.type}-${n.text}`))})}var p=require("react");function se(e,o){let t=o.trimStart();if(!t)return e;let n=t.toLowerCase();return e.filter(r=>!r.is_tappable||r.text.toLowerCase().includes(n))}function Z(e,o){let t=o.trim();if(!t)return null;let n=t.toLowerCase();return e.find(r=>r.is_tappable&&r.text.toLowerCase()===n)??null}function Ue(e,o){let t=[],n=0;for(let a of o){let i=e.indexOf(a.text,n);i!==-1&&(i>n&&t.push({type:"text",value:e.slice(n,i)}),t.push({type:"completed",value:a.text,param:a}),n=i+a.text.length)}let r=e.slice(n);return r&&t.push({type:"text",value:r}),t}function Le(e,o){let t=[],n=[],r=0;for(let a of o){let i=e.indexOf(a.text,r);i===-1?n.push(a):(t.push(a),r=i+a.text.length)}return{valid:t,invalid:n}}var E=require("react");var pt="0.1.8",mt="/ac/suggest",Ne=!1;function dt(e){let o=e?.apiKey||""||"";return!o&&!Ne&&(Ne=!0,console.warn("[AIAutocomplete] No API key set (MAGICX_AI_AUTOCOMPLETE_API_KEY). Requests will be sent without an Authorization header.")),o}function ft(e){return e?.authScheme?e.authScheme:""==="Basic"?"Basic":"Bearer"}function gt(){return crypto.randomUUID()}function ht(e,o){return{placeholder:e.placeholder,type:e.type,...o&&{text:e.text},kind:e.kind}}async function De(e,o,t){let n=t?.apiConfig,r=dt(n),a=ft(n),i=!t?.maskCompletedText,m=o.find(c=>c.type==="contact"&&c.metadata?.contact_account_count)?.metadata?.contact_account_count,g=typeof m=="number"?m:void 0,h={data:{raw_query:e,completed_params:o.map(c=>ht(c,i)),...g!=null&&{contact_account_count:g}},meta:{request_id:gt(),request_at:new Date().toISOString(),language:typeof navigator<"u"?navigator.language:"en-US",client_version:pt}},d={"Content-Type":"application/json","X-App-Identifier":"active-campaign-demo",...n?.headers};r&&(d.Authorization=a==="Basic"?`Basic ${btoa(r)}`:`Bearer ${r}`);let b=await fetch(n?.endpoint||mt,{method:"POST",headers:d,body:JSON.stringify(h),signal:t?.signal});if(!b.ok)throw new Error(`API error: ${b.status} ${b.statusText}`);return b.json()}function J(e,o){let t=e,n={},r=[];for(let a of o){let i=(n[a.type]??0)+1;n[a.type]=i;let g=`{{${a.type.toUpperCase().replace(/\s+/g,"_")}_${i}}}`,h=t.indexOf(a.text);h!==-1&&(t=t.slice(0,h)+g+t.slice(h+a.text.length)),r.push({...a,placeholder:g})}return{rawQuery:t,completedParams:r}}function Fe(e,o){return o?e.map(t=>{let n=o[t.type];if(!n)return t;let r=n("");if(r.length===0)return t;let a=new Set(r.map(m=>m.text)),i=(t.options??[]).filter(m=>!a.has(m.text));return{...t,options:[...r,...i]}}):e}var bt=100,yt=300,St=2;function $e({textRef:e,suggestionsRef:o,filterBaseRef:t,maskCompletedTextRef:n,apiConfigRef:r,optionOverridesRef:a,onErrorRef:i,setCompletedParams:m,setSuggestions:g,setActiveDropdownIndex:h}){let[d,b]=(0,E.useState)(!1),[c,S]=(0,E.useState)(null),[O,y]=(0,E.useState)(!1),C=(0,E.useRef)(0),L=(0,E.useRef)(null),f=(0,E.useRef)(""),l=(0,E.useCallback)(async(s,u)=>{L.current?.abort();let P=new AbortController;L.current=P;let I=++C.current,R=e.current.length;o.current.some(k=>k.type!=="placeholder")||b(!0),S(null);try{let k=await De(s,u,{maskCompletedText:n.current,signal:P.signal,apiConfig:r.current});if(I!==C.current)return;let F=Fe(k.data.suggestions??[],a.current);y(k.data.is_ready??!1),f.current=s;let B=k.data.input??[],M=B[B.length-1],U=e.current;if(M?.state==="in_progress"){let j=U.toLowerCase().lastIndexOf(M.text.toLowerCase());j!==-1?t.current=j:t.current=R}else t.current=R;let $=F.filter(j=>j.type!=="placeholder")[0];if($){let j=U.slice(t.current),_=Z($.options,j);_&&(m(z=>[...z,{id:crypto.randomUUID(),placeholder:"",type:$.type,text:_.text,kind:_.kind,suggestionType:$.type,suggestionPlaceholder:$.text,options:$.options,metadata:_.metadata}]),F=F.filter(z=>z!==$))}g(F),b(!1),h(-1)}catch(k){if(I===C.current){let F=k instanceof Error?k:new Error(String(k));S(F),b(!1),i.current?.(F)}}},[e,o,t,n,r,a,i,m,g,h]);return(0,E.useEffect)(()=>(l("",[]),()=>{L.current?.abort()}),[l]),{doFetch:l,isLoading:d,error:c,isReady:O,lastRawQueryRef:f}}function Ke({text:e,completedParams:o,doFetch:t,filterBaseRef:n,skipNextFetchRef:r,suggestionsRef:a,lastRawQueryRef:i}){let m=(0,E.useRef)(null),g=(0,E.useRef)(null),h=(0,E.useRef)(!0);(0,E.useEffect)(()=>{m.current&&clearTimeout(m.current),g.current&&clearTimeout(g.current);let d=b=>{if(r.current)return r.current=!1,!1;if(!e&&o.length===0)return h.current?(t("",[]),!0):(h.current=!0,!1);let c=e.slice(n.current),y=a.current.filter(R=>R.type!=="placeholder")[0],L=(y?se(y.options,c):[]).filter(R=>R.is_tappable),f=y?Z(y.options,c)!==null:!1,l=c.trim().length>0;if(L.length>0&&!f&&l)return!1;let{rawQuery:s,completedParams:u}=J(e,o),P=s.length<i.current.length,I=Math.abs(s.length-i.current.length);return P||I>=b?(t(s,u),!0):!1};return m.current=setTimeout(()=>{d(St)&&g.current&&clearTimeout(g.current)},bt),g.current=setTimeout(()=>d(1),yt),()=>{m.current&&clearTimeout(m.current),g.current&&clearTimeout(g.current)}},[e,o,t,n,r,a,i])}var Ae=require("react");function je({activeDropdownIndex:e,setActiveDropdownIndex:o,filteredOptions:t,selectOption:n,onSubmitRef:r,text:a,completedParams:i,isDropdownOpen:m,hasPlaceholder:g,placeholderText:h,suggestions:d,filterBaseRef:b,columns:c,setText:S,setCompletedParams:O,setSuggestions:y}){let C=(0,Ae.useCallback)(()=>{let f=t.map((s,u)=>s.is_tappable?u:-1).filter(s=>s!==-1),l=Array.from({length:c},()=>[]);for(let s of f)l[s%c].push(s);return l.flat()},[t,c]);return{handleKeyDown:(0,Ae.useCallback)(f=>{let l=C();switch(f.key){case"ArrowDown":{if(f.preventDefault(),l.length===0)return;let s=l.indexOf(e),u=s<l.length-1?s+1:0;o(l[u]);break}case"ArrowUp":{if(f.preventDefault(),l.length===0)return;let s=l.indexOf(e),u=s>0?s-1:l.length-1;o(l[u]);break}case"ArrowRight":{if(e<0)break;if(e%c<c-1){let u=e+1;u<t.length&&t[u]?.is_tappable&&(f.preventDefault(),o(u))}break}case"ArrowLeft":{if(e<0)break;if(e%c>0){let s=e-1;s>=0&&t[s]?.is_tappable&&(f.preventDefault(),o(s))}break}case"Enter":{if(f.preventDefault(),e>=0&&t[e]?.is_tappable)n(t[e]);else if(r.current){let{rawQuery:s,completedParams:u}=J(a,i),P={query:a.trim(),raw_query:s,completed_params:u};r.current(P)}break}case"Tab":{if(e>=0&&t[e]?.is_tappable)f.preventDefault(),n(t[e]);else if(m){let s=t.find(u=>u.is_tappable);s&&(f.preventDefault(),n(s))}else if(!a&&g){f.preventDefault();let s=d.find(u=>u.type==="placeholder");s?(S(h),b.current=h.length,O(u=>[...u,{id:crypto.randomUUID(),placeholder:"",type:s.type,text:h,kind:null,suggestionType:s.type,suggestionPlaceholder:s.text,options:s.options}]),y(u=>u.filter(P=>P!==s))):(S(h),b.current=h.length)}break}case"Escape":o(-1);break}},[e,c,i,t,b,C,g,m,r,h,n,o,O,y,S,d,a]),getTappableIndices:C}}var ie=require("react");function ze({completedParams:e,suggestions:o,setCompletedParams:t,setSuggestions:n,setActiveDropdownIndex:r,filterBaseRef:a,pillTappedRef:i}){let m=(0,ie.useCallback)(d=>{let b=o.filter(y=>y.type!=="placeholder");if(d<0||d>=b.length)return;let c=b[d],S=b.filter((y,C)=>C!==d),O=o.filter(y=>y.type==="placeholder");n([...O,c,...S]),i.current=!0,r(-1)},[o,n,r,i]),g=(0,ie.useCallback)(()=>{if(e.length===0)return;let d=e[e.length-1],b={type:d.suggestionType,text:d.suggestionPlaceholder,required:!0,options:d.options};t(c=>c.slice(0,-1)),n(c=>[b,...c]),r(-1)},[e,t,n,r]),h=(0,ie.useCallback)(d=>{let b={type:d.suggestionType,text:d.suggestionPlaceholder,required:!0,options:d.options};return{apply:c=>{c(S=>{let O=0;for(let y of e){let C=S.indexOf(y.text,O);if(C!==-1){if(y.id===d.id){let L=S.slice(0,C),f=S.slice(C+d.text.length),l=(L+f).replace(/ {2,}/g," ");return a.current=Math.min(a.current,l.length),l}O=C+y.text.length}}return S}),t(S=>S.filter(O=>O.id!==d.id)),n(S=>[b,...S]),r(-1),i.current=!0}}},[e,t,n,r,a,i]);return{setActivePill:m,removeLastParam:g,reEditParam:h}}var xt=0;function Pt(){let e=(0,p.useRef)(null);return e.current===null&&(e.current=`:ac-${++xt}:`),e.current}function ce({onSubmit:e,onError:o,optionOverrides:t,maskCompletedText:n,placeholder:r,apiConfig:a,columns:i=2,eagerSuggestions:m=!0,value:g,completedParams:h,onChange:d,onParamsChange:b}){let c=g!==void 0,S=h!==void 0,[O,y]=(0,p.useState)(""),[C,L]=(0,p.useState)([]),[f,l]=(0,p.useState)([]),[s,u]=(0,p.useState)(-1),P=c?g:O,I=S?h:C,R=(0,p.useRef)(e);R.current=e;let H=(0,p.useRef)(d);H.current=d;let k=(0,p.useRef)(b);k.current=b;let F=(0,p.useRef)(g);F.current=g;let B=(0,p.useRef)(h);B.current=h;let M=(0,p.useCallback)(x=>{if(typeof x=="function")if(c){let A=x(F.current??"");H.current?.(A)}else y(A=>{let Q=x(A);return H.current?.(Q),Q});else c||y(x),H.current?.(x)},[c]),U=(0,p.useCallback)(x=>{if(typeof x=="function")if(S){let A=x(B.current??[]);k.current?.(A)}else L(A=>{let Q=x(A);return k.current?.(Q),Q});else S||L(x),k.current?.(x)},[S]),W=(0,p.useRef)(o);W.current=o;let $=(0,p.useRef)(t);$.current=t;let j=(0,p.useRef)(n);j.current=n;let _=(0,p.useRef)(a);_.current=a;let z=(0,p.useRef)(P);z.current=P;let le=(0,p.useRef)(f);le.current=f;let q=(0,p.useRef)(0),ee=(0,p.useRef)(!1),Ce=(0,p.useRef)(!1),ue=Pt(),{doFetch:pe,isLoading:ke,error:Be,isReady:Qe,lastRawQueryRef:me}=$e({textRef:z,suggestionsRef:le,filterBaseRef:q,maskCompletedTextRef:j,apiConfigRef:_,optionOverridesRef:$,onErrorRef:W,setCompletedParams:U,setSuggestions:l,setActiveDropdownIndex:u});Ke({text:P,completedParams:I,doFetch:pe,filterBaseRef:q,skipNextFetchRef:Ce,suggestionsRef:le,lastRawQueryRef:me});let He=(0,p.useMemo)(()=>Ue(P,I),[P,I]);q.current=Math.min(q.current,P.length);let de=P.slice(q.current),fe=(0,p.useMemo)(()=>f.filter(A=>A.type==="placeholder").map(A=>A.text).join(" ")||r||"",[f,r]),te=(0,p.useMemo)(()=>f.filter(x=>x.type!=="placeholder"),[f]),v=te[0],we=v?t?.[v.type]:void 0,Oe=v?we?we(de.trim()):v.options??[]:[],ge=(0,p.useMemo)(()=>se(Oe,de),[Oe,de]),Ie=fe.length>0,he=!ke&&ge.length>0&&(!!P||ee.current||!Ie),Re=(0,p.useCallback)(x=>{if(!v)return;let A={id:crypto.randomUUID(),placeholder:"",type:v.type,text:x.text,kind:x.kind,suggestionType:v.type,suggestionPlaceholder:v.text,options:v.options,metadata:x.metadata},Q=q.current,N=z.current.slice(0,Q);if(N.length>0&&!N.endsWith(" ")){let T=N.split(/\s+/).pop()??"";T&&x.text.toLowerCase().startsWith(T.toLowerCase())&&(N=N.slice(0,N.length-T.length))}let be=N.length>0&&N[N.length-1]!==" ",G=N+(be?" ":"")+x.text+" ";M(G),q.current=G.length,U(T=>[...T,A]),ee.current=!1,u(-1);let V=te.length-1;m&&V>0?(l(T=>T.filter(X=>X!==v)),Ce.current=!0):l(T=>T.filter(X=>X.type==="placeholder"))},[v,te,m,M,U]),Ve=(0,p.useCallback)(x=>{let A=x.target.value,N=A.length>0&&!x.nativeEvent?.isComposing&&A[0]!==A[0].toUpperCase()?A[0].toUpperCase()+A.slice(1):A;M(N),ee.current=!1,u(-1);let{valid:be,invalid:G}=Le(N,I);if(G.length>0){U(()=>be);for(let V of G)l(T=>[{type:V.suggestionType,text:V.suggestionPlaceholder,required:!0,options:V.options},...T])}if(v&&G.length===0){let V=N.slice(q.current),T=Z(v.options,V);T&&(U(X=>[...X,{id:crypto.randomUUID(),placeholder:"",type:v.type,text:T.text,kind:T.kind,suggestionType:v.type,suggestionPlaceholder:v.text,options:v.options,metadata:T.metadata}]),l(X=>X.filter(Je=>Je!==v)))}},[I,v,M,U]),{handleKeyDown:Xe}=je({activeDropdownIndex:s,setActiveDropdownIndex:u,filteredOptions:ge,selectOption:Re,onSubmitRef:R,text:P,completedParams:I,isDropdownOpen:he,hasPlaceholder:Ie,placeholderText:fe,suggestions:f,filterBaseRef:q,columns:i,setText:M,setCompletedParams:U,setSuggestions:l}),oe=ze({completedParams:I,suggestions:f,setCompletedParams:U,setSuggestions:l,setActiveDropdownIndex:u,filterBaseRef:q,pillTappedRef:ee}),We=(0,p.useCallback)(x=>{oe.reEditParam(x).apply(M)},[oe,M]),Ge=(0,p.useCallback)(()=>{M(""),U(()=>[]),l([]),u(-1),q.current=0,me.current="",pe("",[])},[pe,M,U,me]),Ye=s>=0?`${ue}-option-${s}`:void 0;return{completedParams:I,suggestionPills:te,setActivePill:oe.setActivePill,removeLastParam:oe.removeLastParam,reEditParam:We,segments:He,suggestions:f,activeIndex:s,isReady:Qe,isLoading:ke,error:Be,inputProps:{value:P,placeholder:fe||void 0,onChange:Ve,onKeyDown:Xe,role:"combobox","aria-expanded":he,"aria-activedescendant":Ye,"aria-autocomplete":"list","aria-controls":ue},reset:Ge,dropdownProps:{suggestions:v?[{...v,options:ge}]:[],activeIndex:s,onSelect:Re,onHighlight:u,isOpen:he,id:ue}}}var w=require("react/jsx-runtime"),qe=(0,D.forwardRef)(function({onSubmit:o,onError:t,optionOverrides:n,maskCompletedText:r,placeholder:a,className:i,apiConfig:m,columns:g,eagerSuggestions:h,value:d,completedParams:b,onChange:c,onParamsChange:S},O){let y=(0,D.useRef)(null),[C,L]=(0,D.useState)(!1),f=(0,D.useRef)(()=>{}),l=(0,D.useRef)(void 0);(0,D.useEffect)(()=>(y.current?.focus(),()=>clearTimeout(l.current)),[]);let{completedParams:s,suggestionPills:u,setActivePill:P,segments:I,inputProps:R,dropdownProps:H,reset:k}=ce({onSubmit:_=>f.current(_),onError:t,optionOverrides:n,maskCompletedText:r,placeholder:a,apiConfig:m,columns:g,eagerSuggestions:h,value:d,completedParams:b,onChange:c,onParamsChange:S});(0,D.useImperativeHandle)(O,()=>({focus:()=>y.current?.focus(),reset:k}),[k]);let F=()=>{y.current?.focus()},B=!!R.value||s.length>0,M=(0,D.useCallback)(()=>{if(!B)return;let{rawQuery:_,completedParams:z}=J(R.value,s);o({query:R.value.trim(),raw_query:_,completed_params:z}),k(),L(!0),clearTimeout(l.current),l.current=setTimeout(()=>L(!1),3e3)},[B,R.value,s,o,k]);f.current=M;let{onChange:U,placeholder:W,...$}=R,j=!R.value;return(0,w.jsxs)("div",{className:`${K.container} ${i??""}`,children:[(0,w.jsx)("div",{className:`${K.checkmark} ${C?K.checkmarkVisible:""}`,children:(0,w.jsxs)("svg",{width:"72",height:"72",viewBox:"0 0 24 24",fill:"none",role:"img","aria-label":"Success",children:[(0,w.jsx)("circle",{cx:"12",cy:"12",r:"12",fill:"#34C759"}),(0,w.jsx)("path",{d:"M7 12.5l3.5 3.5L17 9",stroke:"#000",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",className:K.checkmarkPath})]})}),(0,w.jsx)(ne,{...H}),(0,w.jsxs)("div",{className:K.inputWrapper,onClick:F,children:[(0,w.jsxs)("div",{className:K.editorArea,children:[(0,w.jsxs)("div",{className:K.sizerContent,"aria-hidden":"true",children:[j&&W?(0,w.jsxs)("span",{className:K.placeholderText,children:[W," "]}):(0,w.jsxs)("span",{className:K.sizerText,children:[I.map((_,z)=>(0,w.jsx)("span",{children:_.value},`${z}-${_.type}`)),I.length===0&&"\xA0"]})," ",(0,w.jsx)(Me,{pills:u,activePillIndex:0,onSelectPill:P})]}),(0,w.jsx)("textarea",{ref:y,className:K.textarea,rows:1,onChange:U,...$})]}),(0,w.jsx)("button",{type:"button",className:K.submitButton,disabled:!B,onClick:_=>{_.stopPropagation(),M()},"aria-label":"Submit",children:(0,w.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,w.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,useAIAutocomplete});
2
2
  //# sourceMappingURL=index.js.map
package/dist/index.mjs CHANGED
@@ -1,2 +1,2 @@
1
- import{forwardRef as vt,useCallback as At,useEffect as Ct,useImperativeHandle as kt,useRef as ve,useState as wt}from"react";var D={};var be={};var Re={};var G={};import{jsx as st,jsxs as it}from"react/jsx-runtime";function _e({option:e,isHighlighted:n,onSelect:t,onHighlight:o,id:r}){let a=[G.item,n?G.highlighted:"",e.is_tappable?G.tappable:G.nonTappable].filter(Boolean).join(" ");return it("div",{id:r,role:"option","aria-selected":n,className:a,tabIndex:e.is_tappable?0:-1,onClick:()=>e.is_tappable&&t(e),onKeyDown:i=>{e.is_tappable&&(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),t(e))},onMouseEnter:o,children:[e.icon?`${e.icon} ${e.text}`:e.text,e.tag&&st("span",{className:G.tag,children:e.tag})]})}import{jsx as Te}from"react/jsx-runtime";function Ee({options:e,activeIndex:n,onSelect:t,onHighlight:o,listboxId:r}){return Te("div",{className:Re.grid,children:e.map((a,i)=>Te(_e,{option:a,isHighlighted:i===n,onSelect:t,onHighlight:()=>o(i),id:`${r}-option-${i}`},a.text))})}import{jsx as Me}from"react/jsx-runtime";function ye({suggestions:e,activeIndex:n,onSelect:t,onHighlight:o,isOpen:r,id:a,className:i}){let p=e[0],f=r&&p&&p.options.length>0;return Me("div",{id:a,role:"listbox",className:`${be.dropdown} ${f?be.visible:""} ${i??""}`,onMouseDown:g=>g.preventDefault(),children:p&&p.options.length>0&&Me(Ee,{options:p.options,activeIndex:n,onSelect:t,onHighlight:o,listboxId:a})})}var ne={};import{jsx as Ue}from"react/jsx-runtime";function lt(e){return e===0?.4:e===1?.3:.15}function Le({pills:e,activePillIndex:n,onSelectPill:t}){return Ue("span",{className:ne.list,children:e.map((o,r)=>Ue("button",{type:"button",className:`${ne.pill} ${r===n?ne.active:""}`,style:{opacity:lt(r)},onClick:()=>t(r),children:o.text},`${o.type}-${o.text}`))})}import{useCallback as Z,useMemo as se,useRef as E,useState as ie}from"react";function ae(e,n){let t=n.trimStart();if(!t)return e;let o=t.toLowerCase();return e.filter(r=>!r.is_tappable||r.text.toLowerCase().includes(o))}function ee(e,n){let t=n.trim();if(!t)return null;let o=t.toLowerCase();return e.find(r=>r.is_tappable&&r.text.toLowerCase()===o)??null}function Ne(e,n){let t=[],o=0;for(let a of n){let i=e.indexOf(a.text,o);i!==-1&&(i>o&&t.push({type:"text",value:e.slice(o,i)}),t.push({type:"completed",value:a.text,param:a}),o=i+a.text.length)}let r=e.slice(o);return r&&t.push({type:"text",value:r}),t}function De(e,n){let t=[],o=[],r=0;for(let a of n){let i=e.indexOf(a.text,r);i===-1?o.push(a):(t.push(a),r=i+a.text.length)}return{valid:t,invalid:o}}import{useCallback as ht,useEffect as je,useRef as J,useState as Se}from"react";var ut="0.1.7",pt="/ac/suggest",Fe=!1;function mt(e){let n=e?.apiKey||""||"";return!n&&!Fe&&(Fe=!0,console.warn("[AIAutocomplete] No API key set (MAGICX_AI_AUTOCOMPLETE_API_KEY). Requests will be sent without an Authorization header.")),n}function dt(e){return e?.authScheme?e.authScheme:""==="Basic"?"Basic":"Bearer"}function ft(){return crypto.randomUUID()}function gt(e,n){return{placeholder:e.placeholder,type:e.type,...n&&{text:e.text},kind:e.kind}}async function $e(e,n,t){let o=t?.apiConfig,r=mt(o),a=dt(o),i=!t?.maskCompletedText,p=n.find(c=>c.type==="contact"&&c.metadata?.contact_account_count)?.metadata?.contact_account_count,f=typeof p=="number"?p:void 0,g={data:{raw_query:e,completed_params:n.map(c=>gt(c,i)),...f!=null&&{contact_account_count:f}},meta:{request_id:ft(),request_at:new Date().toISOString(),language:typeof navigator<"u"?navigator.language:"en-US",client_version:ut}},m={"Content-Type":"application/json","X-App-Identifier":"active-campaign-demo",...o?.headers};r&&(m.Authorization=a==="Basic"?`Basic ${btoa(r)}`:`Bearer ${r}`);let h=await fetch(o?.endpoint||pt,{method:"POST",headers:m,body:JSON.stringify(g),signal:t?.signal});if(!h.ok)throw new Error(`API error: ${h.status} ${h.statusText}`);return h.json()}function Y(e,n){let t=e,o={},r=[];for(let a of n){let i=(o[a.type]??0)+1;o[a.type]=i;let f=`{{${a.type.toUpperCase().replace(/\s+/g,"_")}_${i}}}`,g=t.indexOf(a.text);g!==-1&&(t=t.slice(0,g)+f+t.slice(g+a.text.length)),r.push({...a,placeholder:f})}return{rawQuery:t,completedParams:r}}function Ke(e,n){return n?e.map(t=>{let o=n[t.type];if(!o)return t;let r=o("");if(r.length===0)return t;let a=new Set(r.map(p=>p.text)),i=(t.options??[]).filter(p=>!a.has(p.text));return{...t,options:[...r,...i]}}):e}var bt=100,yt=300,St=2;function ze({textRef:e,suggestionsRef:n,filterBaseRef:t,maskCompletedTextRef:o,apiConfigRef:r,optionOverridesRef:a,onErrorRef:i,setCompletedParams:p,setSuggestions:f,setActiveDropdownIndex:g}){let[m,h]=Se(!1),[c,y]=Se(null),[k,b]=Se(!1),A=J(0),M=J(null),d=J(""),l=ht(async(s,u)=>{M.current?.abort();let x=new AbortController;M.current=x;let w=++A.current,O=e.current.length;n.current.some(C=>C.type!=="placeholder")||h(!0),y(null);try{let C=await $e(s,u,{maskCompletedText:o.current,signal:x.signal,apiConfig:r.current});if(w!==A.current)return;let L=Ke(C.data.suggestions??[],a.current);b(C.data.is_ready??!1),d.current=s;let z=C.data.input??[],_=z[z.length-1],T=e.current;if(_?.state==="in_progress"){let F=T.toLowerCase().lastIndexOf(_.text.toLowerCase());F!==-1?t.current=F:t.current=O}else t.current=O;let N=L.filter(F=>F.type!=="placeholder")[0];if(N){let F=T.slice(t.current),I=ee(N.options,F);I&&(p($=>[...$,{id:crypto.randomUUID(),placeholder:"",type:N.type,text:I.text,kind:I.kind,suggestionType:N.type,suggestionPlaceholder:N.text,options:N.options,metadata:I.metadata}]),L=L.filter($=>$!==N))}f(L),h(!1),g(-1)}catch(C){if(w===A.current){let L=C instanceof Error?C:new Error(String(C));y(L),h(!1),i.current?.(L)}}},[e,n,t,o,r,a,i,p,f,g]);return je(()=>(l("",[]),()=>{M.current?.abort()}),[l]),{doFetch:l,isLoading:m,error:c,isReady:k,lastRawQueryRef:d}}function qe({text:e,completedParams:n,doFetch:t,filterBaseRef:o,skipNextFetchRef:r,suggestionsRef:a,lastRawQueryRef:i}){let p=J(null),f=J(null),g=J(!0);je(()=>{p.current&&clearTimeout(p.current),f.current&&clearTimeout(f.current);let m=h=>{if(r.current)return r.current=!1,!1;if(!e&&n.length===0)return g.current?(t("",[]),!0):(g.current=!0,!1);let c=e.slice(o.current),b=a.current.filter(O=>O.type!=="placeholder")[0],M=(b?ae(b.options,c):[]).filter(O=>O.is_tappable),d=b?ee(b.options,c)!==null:!1,l=c.trim().length>0;if(M.length>0&&!d&&l)return!1;let{rawQuery:s,completedParams:u}=Y(e,n),x=s.length<i.current.length,w=Math.abs(s.length-i.current.length);return x||w>=h?(t(s,u),!0):!1};return p.current=setTimeout(()=>{m(St)&&f.current&&clearTimeout(f.current)},bt),f.current=setTimeout(()=>m(1),yt),()=>{p.current&&clearTimeout(p.current),f.current&&clearTimeout(f.current)}},[e,n,t,o,r,a,i])}import{useCallback as Be}from"react";function Qe({activeDropdownIndex:e,setActiveDropdownIndex:n,filteredOptions:t,selectOption:o,onSubmitRef:r,text:a,completedParams:i,isDropdownOpen:p,hasPlaceholder:f,placeholderText:g,suggestions:m,filterBaseRef:h,columns:c,setText:y,setCompletedParams:k,setSuggestions:b}){let A=Be(()=>{let d=t.map((s,u)=>s.is_tappable?u:-1).filter(s=>s!==-1),l=Array.from({length:c},()=>[]);for(let s of d)l[s%c].push(s);return l.flat()},[t,c]);return{handleKeyDown:Be(d=>{let l=A();switch(d.key){case"ArrowDown":{if(d.preventDefault(),l.length===0)return;let s=l.indexOf(e),u=s<l.length-1?s+1:0;n(l[u]);break}case"ArrowUp":{if(d.preventDefault(),l.length===0)return;let s=l.indexOf(e),u=s>0?s-1:l.length-1;n(l[u]);break}case"ArrowRight":{if(e<0)break;if(e%c<c-1){let u=e+1;u<t.length&&t[u]?.is_tappable&&(d.preventDefault(),n(u))}break}case"ArrowLeft":{if(e<0)break;if(e%c>0){let s=e-1;s>=0&&t[s]?.is_tappable&&(d.preventDefault(),n(s))}break}case"Enter":{if(d.preventDefault(),e>=0&&t[e]?.is_tappable)o(t[e]);else if(r.current){let{rawQuery:s,completedParams:u}=Y(a,i),x={query:a.trim(),raw_query:s,completed_params:u};r.current(x)}break}case"Tab":{if(e>=0&&t[e]?.is_tappable)d.preventDefault(),o(t[e]);else if(p){let s=t.find(u=>u.is_tappable);s&&(d.preventDefault(),o(s))}else if(!a&&f){d.preventDefault();let s=m.find(u=>u.type==="placeholder");s?(y(g),h.current=g.length,k(u=>[...u,{id:crypto.randomUUID(),placeholder:"",type:s.type,text:g,kind:null,suggestionType:s.type,suggestionPlaceholder:s.text,options:s.options}]),b(u=>u.filter(x=>x!==s))):(y(g),h.current=g.length)}break}case"Escape":n(-1);break}},[e,c,i,t,h,A,f,p,r,g,o,n,k,b,y,m,a]),getTappableIndices:A}}import{useCallback as xe}from"react";function He({completedParams:e,suggestions:n,setCompletedParams:t,setSuggestions:o,setActiveDropdownIndex:r,filterBaseRef:a,pillTappedRef:i}){let p=xe(m=>{let h=n.filter(b=>b.type!=="placeholder");if(m<0||m>=h.length)return;let c=h[m],y=h.filter((b,A)=>A!==m),k=n.filter(b=>b.type==="placeholder");o([...k,c,...y]),i.current=!0,r(-1)},[n,o,r,i]),f=xe(()=>{if(e.length===0)return;let m=e[e.length-1],h={type:m.suggestionType,text:m.suggestionPlaceholder,required:!0,options:m.options};t(c=>c.slice(0,-1)),o(c=>[h,...c]),r(-1)},[e,t,o,r]),g=xe(m=>{let h={type:m.suggestionType,text:m.suggestionPlaceholder,required:!0,options:m.options};return{apply:c=>{c(y=>{let k=0;for(let b of e){let A=y.indexOf(b.text,k);if(A!==-1){if(b.id===m.id){let M=y.slice(0,A),d=y.slice(A+m.text.length),l=(M+d).replace(/ {2,}/g," ");return a.current=Math.min(a.current,l.length),l}k=A+b.text.length}}return y}),t(y=>y.filter(k=>k.id!==m.id)),o(y=>[h,...y]),r(-1),i.current=!0}}},[e,t,o,r,a,i]);return{setActivePill:p,removeLastParam:f,reEditParam:g}}var xt=0;function Pt(){let e=E(null);return e.current===null&&(e.current=`:ac-${++xt}:`),e.current}function Pe({onSubmit:e,onError:n,optionOverrides:t,maskCompletedText:o,placeholder:r,apiConfig:a,columns:i=2,eagerSuggestions:p=!0,value:f,completedParams:g,onChange:m,onParamsChange:h}){let c=f!==void 0,y=g!==void 0,[k,b]=ie(""),[A,M]=ie([]),[d,l]=ie([]),[s,u]=ie(-1),x=c?f:k,w=y?g:A,O=E(e);O.current=e;let B=E(m);B.current=m;let C=E(h);C.current=h;let L=E(f);L.current=f;let z=E(g);z.current=g;let _=Z(S=>{if(typeof S=="function")if(c){let v=S(L.current??"");B.current?.(v)}else b(v=>{let q=S(v);return B.current?.(q),q});else c||b(S),B.current?.(S)},[c]),T=Z(S=>{if(typeof S=="function")if(y){let v=S(z.current??[]);C.current?.(v)}else M(v=>{let q=S(v);return C.current?.(q),q});else y||M(S),C.current?.(S)},[y]),X=E(n);X.current=n;let N=E(t);N.current=t;let F=E(o);F.current=o;let I=E(a);I.current=a;let $=E(x);$.current=x;let ce=E(d);ce.current=d;let K=E(0),te=E(!1),Ae=E(!1),le=Pt(),{doFetch:ue,isLoading:Ce,error:Ve,isReady:Xe,lastRawQueryRef:pe}=ze({textRef:$,suggestionsRef:ce,filterBaseRef:K,maskCompletedTextRef:F,apiConfigRef:I,optionOverridesRef:N,onErrorRef:X,setCompletedParams:T,setSuggestions:l,setActiveDropdownIndex:u});qe({text:x,completedParams:w,doFetch:ue,filterBaseRef:K,skipNextFetchRef:Ae,suggestionsRef:ce,lastRawQueryRef:pe});let We=se(()=>Ne(x,w),[x,w]);K.current=Math.min(K.current,x.length);let me=x.slice(K.current),de=se(()=>d.filter(v=>v.type==="placeholder").map(v=>v.text).join(" ")||r||"",[d,r]),oe=se(()=>d.filter(S=>S.type!=="placeholder"),[d]),P=oe[0],ke=P?t?.[P.type]:void 0,we=P?ke?ke(me.trim()):P.options??[]:[],fe=se(()=>ae(we,me),[we,me]),Oe=de.length>0,ge=!Ce&&fe.length>0&&(!!x||te.current||!Oe),Ie=Z(S=>{if(!P)return;let v={id:crypto.randomUUID(),placeholder:"",type:P.type,text:S.text,kind:S.kind,suggestionType:P.type,suggestionPlaceholder:P.text,options:P.options,metadata:S.metadata},q=K.current,U=$.current.slice(0,q);if(U.length>0&&!U.endsWith(" ")){let R=U.split(/\s+/).pop()??"";R&&S.text.toLowerCase().startsWith(R.toLowerCase())&&(U=U.slice(0,U.length-R.length))}let he=U.length>0&&U[U.length-1]!==" ",W=U+(he?" ":"")+S.text+" ";_(W),K.current=W.length,T(R=>[...R,v]),te.current=!1,u(-1);let Q=oe.length-1;p&&Q>0?(l(R=>R.filter(H=>H!==P)),Ae.current=!0):l(R=>R.filter(H=>H.type==="placeholder"))},[P,oe,p,_,T]),Ge=Z(S=>{let v=S.target.value,U=v.length>0&&!S.nativeEvent?.isComposing&&v[0]!==v[0].toUpperCase()?v[0].toUpperCase()+v.slice(1):v;_(U),te.current=!1,u(-1);let{valid:he,invalid:W}=De(U,w);if(W.length>0){T(()=>he);for(let Q of W)l(R=>[{type:Q.suggestionType,text:Q.suggestionPlaceholder,required:!0,options:Q.options},...R])}if(P&&W.length===0){let Q=U.slice(K.current),R=ee(P.options,Q);R&&(T(H=>[...H,{id:crypto.randomUUID(),placeholder:"",type:P.type,text:R.text,kind:R.kind,suggestionType:P.type,suggestionPlaceholder:P.text,options:P.options,metadata:R.metadata}]),l(H=>H.filter(tt=>tt!==P)))}},[w,P,_,T]),{handleKeyDown:Ye}=Qe({activeDropdownIndex:s,setActiveDropdownIndex:u,filteredOptions:fe,selectOption:Ie,onSubmitRef:O,text:x,completedParams:w,isDropdownOpen:ge,hasPlaceholder:Oe,placeholderText:de,suggestions:d,filterBaseRef:K,columns:i,setText:_,setCompletedParams:T,setSuggestions:l}),re=He({completedParams:w,suggestions:d,setCompletedParams:T,setSuggestions:l,setActiveDropdownIndex:u,filterBaseRef:K,pillTappedRef:te}),Je=Z(S=>{re.reEditParam(S).apply(_)},[re,_]),Ze=Z(()=>{_(""),T(()=>[]),l([]),u(-1),K.current=0,pe.current="",ue("",[])},[ue,_,T,pe]),et=s>=0?`${le}-option-${s}`:void 0;return{completedParams:w,suggestionPills:oe,setActivePill:re.setActivePill,removeLastParam:re.removeLastParam,reEditParam:Je,segments:We,suggestions:d,activeIndex:s,isReady:Xe,isLoading:Ce,error:Ve,inputProps:{value:x,placeholder:de||void 0,onChange:Ge,onKeyDown:Ye,role:"combobox","aria-expanded":ge,"aria-activedescendant":et,"aria-autocomplete":"list","aria-controls":le},reset:Ze,dropdownProps:{suggestions:P?[{...P,options:fe}]:[],activeIndex:s,onSelect:Ie,onHighlight:u,isOpen:ge,id:le}}}import{jsx as j,jsxs as V}from"react/jsx-runtime";var Ot=vt(function({onSubmit:n,onError:t,optionOverrides:o,maskCompletedText:r,placeholder:a,className:i,apiConfig:p,columns:f,eagerSuggestions:g,value:m,completedParams:h,onChange:c,onParamsChange:y},k){let b=ve(null),[A,M]=wt(!1),d=ve(()=>{}),l=ve(void 0);Ct(()=>(b.current?.focus(),()=>clearTimeout(l.current)),[]);let{completedParams:s,suggestionPills:u,setActivePill:x,segments:w,inputProps:O,dropdownProps:B,reset:C}=Pe({onSubmit:I=>d.current(I),onError:t,optionOverrides:o,maskCompletedText:r,placeholder:a,apiConfig:p,columns:f,eagerSuggestions:g,value:m,completedParams:h,onChange:c,onParamsChange:y});kt(k,()=>({focus:()=>b.current?.focus(),reset:C}),[C]);let L=()=>{b.current?.focus()},z=!!O.value||s.length>0,_=At(()=>{if(!z)return;let{rawQuery:I,completedParams:$}=Y(O.value,s);n({query:O.value.trim(),raw_query:I,completed_params:$}),C(),M(!0),clearTimeout(l.current),l.current=setTimeout(()=>M(!1),3e3)},[z,O.value,s,n,C]);d.current=_;let{onChange:T,placeholder:X,...N}=O,F=!O.value;return V("div",{className:`${D.container} ${i??""}`,children:[j("div",{className:`${D.checkmark} ${A?D.checkmarkVisible:""}`,children:V("svg",{width:"72",height:"72",viewBox:"0 0 24 24",fill:"none",role:"img","aria-label":"Success",children:[j("circle",{cx:"12",cy:"12",r:"12",fill:"#34C759"}),j("path",{d:"M7 12.5l3.5 3.5L17 9",stroke:"#000",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",className:D.checkmarkPath})]})}),j(ye,{...B}),V("div",{className:D.inputWrapper,onClick:L,children:[V("div",{className:D.editorArea,children:[V("div",{className:D.sizerContent,"aria-hidden":"true",children:[F&&X?V("span",{className:D.placeholderText,children:[X," "]}):V("span",{className:D.sizerText,children:[w.map((I,$)=>j("span",{children:I.value},`${$}-${I.type}`)),w.length===0&&"\xA0"]})," ",j(Le,{pills:u,activePillIndex:0,onSelectPill:x})]}),j("textarea",{ref:b,className:D.textarea,rows:1,onChange:T,...N})]}),j("button",{type:"button",className:D.submitButton,disabled:!z,onClick:I=>{I.stopPropagation(),_()},"aria-label":"Submit",children:j("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:j("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]})]})});export{Ot as AIAutocomplete,ye as AIAutocompleteDropdown,Pe as useAIAutocomplete};
1
+ import{forwardRef as vt,useCallback as At,useEffect as Ct,useImperativeHandle as kt,useRef as ve,useState as wt}from"react";var D={};var be={};var Re={};var G={};import{jsx as st,jsxs as it}from"react/jsx-runtime";function _e({option:e,isHighlighted:n,onSelect:t,onHighlight:o,id:r}){let a=[G.item,n?G.highlighted:"",e.is_tappable?G.tappable:G.nonTappable].filter(Boolean).join(" ");return it("div",{id:r,role:"option","aria-selected":n,className:a,tabIndex:e.is_tappable?0:-1,onClick:()=>e.is_tappable&&t(e),onKeyDown:i=>{e.is_tappable&&(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),t(e))},onMouseEnter:o,children:[e.icon?`${e.icon} ${e.text}`:e.text,e.tag&&st("span",{className:G.tag,children:e.tag})]})}import{jsx as Te}from"react/jsx-runtime";function Ee({options:e,activeIndex:n,onSelect:t,onHighlight:o,listboxId:r}){return Te("div",{className:Re.grid,children:e.map((a,i)=>Te(_e,{option:a,isHighlighted:i===n,onSelect:t,onHighlight:()=>o(i),id:`${r}-option-${i}`},a.text))})}import{jsx as Me}from"react/jsx-runtime";function ye({suggestions:e,activeIndex:n,onSelect:t,onHighlight:o,isOpen:r,id:a,className:i}){let p=e[0],f=r&&p&&p.options.length>0;return Me("div",{id:a,role:"listbox",className:`${be.dropdown} ${f?be.visible:""} ${i??""}`,onMouseDown:g=>g.preventDefault(),children:p&&p.options.length>0&&Me(Ee,{options:p.options,activeIndex:n,onSelect:t,onHighlight:o,listboxId:a})})}var ne={};import{jsx as Ue}from"react/jsx-runtime";function lt(e){return e===0?.4:e===1?.3:.15}function Le({pills:e,activePillIndex:n,onSelectPill:t}){return Ue("span",{className:ne.list,children:e.map((o,r)=>Ue("button",{type:"button",className:`${ne.pill} ${r===n?ne.active:""}`,style:{opacity:lt(r)},onClick:()=>t(r),children:o.text},`${o.type}-${o.text}`))})}import{useCallback as Z,useMemo as se,useRef as E,useState as ie}from"react";function ae(e,n){let t=n.trimStart();if(!t)return e;let o=t.toLowerCase();return e.filter(r=>!r.is_tappable||r.text.toLowerCase().includes(o))}function ee(e,n){let t=n.trim();if(!t)return null;let o=t.toLowerCase();return e.find(r=>r.is_tappable&&r.text.toLowerCase()===o)??null}function Ne(e,n){let t=[],o=0;for(let a of n){let i=e.indexOf(a.text,o);i!==-1&&(i>o&&t.push({type:"text",value:e.slice(o,i)}),t.push({type:"completed",value:a.text,param:a}),o=i+a.text.length)}let r=e.slice(o);return r&&t.push({type:"text",value:r}),t}function De(e,n){let t=[],o=[],r=0;for(let a of n){let i=e.indexOf(a.text,r);i===-1?o.push(a):(t.push(a),r=i+a.text.length)}return{valid:t,invalid:o}}import{useCallback as ht,useEffect as je,useRef as J,useState as Se}from"react";var ut="0.1.8",pt="/ac/suggest",Fe=!1;function mt(e){let n=e?.apiKey||""||"";return!n&&!Fe&&(Fe=!0,console.warn("[AIAutocomplete] No API key set (MAGICX_AI_AUTOCOMPLETE_API_KEY). Requests will be sent without an Authorization header.")),n}function dt(e){return e?.authScheme?e.authScheme:""==="Basic"?"Basic":"Bearer"}function ft(){return crypto.randomUUID()}function gt(e,n){return{placeholder:e.placeholder,type:e.type,...n&&{text:e.text},kind:e.kind}}async function $e(e,n,t){let o=t?.apiConfig,r=mt(o),a=dt(o),i=!t?.maskCompletedText,p=n.find(c=>c.type==="contact"&&c.metadata?.contact_account_count)?.metadata?.contact_account_count,f=typeof p=="number"?p:void 0,g={data:{raw_query:e,completed_params:n.map(c=>gt(c,i)),...f!=null&&{contact_account_count:f}},meta:{request_id:ft(),request_at:new Date().toISOString(),language:typeof navigator<"u"?navigator.language:"en-US",client_version:ut}},m={"Content-Type":"application/json","X-App-Identifier":"active-campaign-demo",...o?.headers};r&&(m.Authorization=a==="Basic"?`Basic ${btoa(r)}`:`Bearer ${r}`);let h=await fetch(o?.endpoint||pt,{method:"POST",headers:m,body:JSON.stringify(g),signal:t?.signal});if(!h.ok)throw new Error(`API error: ${h.status} ${h.statusText}`);return h.json()}function Y(e,n){let t=e,o={},r=[];for(let a of n){let i=(o[a.type]??0)+1;o[a.type]=i;let f=`{{${a.type.toUpperCase().replace(/\s+/g,"_")}_${i}}}`,g=t.indexOf(a.text);g!==-1&&(t=t.slice(0,g)+f+t.slice(g+a.text.length)),r.push({...a,placeholder:f})}return{rawQuery:t,completedParams:r}}function Ke(e,n){return n?e.map(t=>{let o=n[t.type];if(!o)return t;let r=o("");if(r.length===0)return t;let a=new Set(r.map(p=>p.text)),i=(t.options??[]).filter(p=>!a.has(p.text));return{...t,options:[...r,...i]}}):e}var bt=100,yt=300,St=2;function ze({textRef:e,suggestionsRef:n,filterBaseRef:t,maskCompletedTextRef:o,apiConfigRef:r,optionOverridesRef:a,onErrorRef:i,setCompletedParams:p,setSuggestions:f,setActiveDropdownIndex:g}){let[m,h]=Se(!1),[c,y]=Se(null),[k,b]=Se(!1),A=J(0),M=J(null),d=J(""),l=ht(async(s,u)=>{M.current?.abort();let x=new AbortController;M.current=x;let w=++A.current,O=e.current.length;n.current.some(C=>C.type!=="placeholder")||h(!0),y(null);try{let C=await $e(s,u,{maskCompletedText:o.current,signal:x.signal,apiConfig:r.current});if(w!==A.current)return;let L=Ke(C.data.suggestions??[],a.current);b(C.data.is_ready??!1),d.current=s;let z=C.data.input??[],_=z[z.length-1],T=e.current;if(_?.state==="in_progress"){let F=T.toLowerCase().lastIndexOf(_.text.toLowerCase());F!==-1?t.current=F:t.current=O}else t.current=O;let N=L.filter(F=>F.type!=="placeholder")[0];if(N){let F=T.slice(t.current),I=ee(N.options,F);I&&(p($=>[...$,{id:crypto.randomUUID(),placeholder:"",type:N.type,text:I.text,kind:I.kind,suggestionType:N.type,suggestionPlaceholder:N.text,options:N.options,metadata:I.metadata}]),L=L.filter($=>$!==N))}f(L),h(!1),g(-1)}catch(C){if(w===A.current){let L=C instanceof Error?C:new Error(String(C));y(L),h(!1),i.current?.(L)}}},[e,n,t,o,r,a,i,p,f,g]);return je(()=>(l("",[]),()=>{M.current?.abort()}),[l]),{doFetch:l,isLoading:m,error:c,isReady:k,lastRawQueryRef:d}}function qe({text:e,completedParams:n,doFetch:t,filterBaseRef:o,skipNextFetchRef:r,suggestionsRef:a,lastRawQueryRef:i}){let p=J(null),f=J(null),g=J(!0);je(()=>{p.current&&clearTimeout(p.current),f.current&&clearTimeout(f.current);let m=h=>{if(r.current)return r.current=!1,!1;if(!e&&n.length===0)return g.current?(t("",[]),!0):(g.current=!0,!1);let c=e.slice(o.current),b=a.current.filter(O=>O.type!=="placeholder")[0],M=(b?ae(b.options,c):[]).filter(O=>O.is_tappable),d=b?ee(b.options,c)!==null:!1,l=c.trim().length>0;if(M.length>0&&!d&&l)return!1;let{rawQuery:s,completedParams:u}=Y(e,n),x=s.length<i.current.length,w=Math.abs(s.length-i.current.length);return x||w>=h?(t(s,u),!0):!1};return p.current=setTimeout(()=>{m(St)&&f.current&&clearTimeout(f.current)},bt),f.current=setTimeout(()=>m(1),yt),()=>{p.current&&clearTimeout(p.current),f.current&&clearTimeout(f.current)}},[e,n,t,o,r,a,i])}import{useCallback as Be}from"react";function Qe({activeDropdownIndex:e,setActiveDropdownIndex:n,filteredOptions:t,selectOption:o,onSubmitRef:r,text:a,completedParams:i,isDropdownOpen:p,hasPlaceholder:f,placeholderText:g,suggestions:m,filterBaseRef:h,columns:c,setText:y,setCompletedParams:k,setSuggestions:b}){let A=Be(()=>{let d=t.map((s,u)=>s.is_tappable?u:-1).filter(s=>s!==-1),l=Array.from({length:c},()=>[]);for(let s of d)l[s%c].push(s);return l.flat()},[t,c]);return{handleKeyDown:Be(d=>{let l=A();switch(d.key){case"ArrowDown":{if(d.preventDefault(),l.length===0)return;let s=l.indexOf(e),u=s<l.length-1?s+1:0;n(l[u]);break}case"ArrowUp":{if(d.preventDefault(),l.length===0)return;let s=l.indexOf(e),u=s>0?s-1:l.length-1;n(l[u]);break}case"ArrowRight":{if(e<0)break;if(e%c<c-1){let u=e+1;u<t.length&&t[u]?.is_tappable&&(d.preventDefault(),n(u))}break}case"ArrowLeft":{if(e<0)break;if(e%c>0){let s=e-1;s>=0&&t[s]?.is_tappable&&(d.preventDefault(),n(s))}break}case"Enter":{if(d.preventDefault(),e>=0&&t[e]?.is_tappable)o(t[e]);else if(r.current){let{rawQuery:s,completedParams:u}=Y(a,i),x={query:a.trim(),raw_query:s,completed_params:u};r.current(x)}break}case"Tab":{if(e>=0&&t[e]?.is_tappable)d.preventDefault(),o(t[e]);else if(p){let s=t.find(u=>u.is_tappable);s&&(d.preventDefault(),o(s))}else if(!a&&f){d.preventDefault();let s=m.find(u=>u.type==="placeholder");s?(y(g),h.current=g.length,k(u=>[...u,{id:crypto.randomUUID(),placeholder:"",type:s.type,text:g,kind:null,suggestionType:s.type,suggestionPlaceholder:s.text,options:s.options}]),b(u=>u.filter(x=>x!==s))):(y(g),h.current=g.length)}break}case"Escape":n(-1);break}},[e,c,i,t,h,A,f,p,r,g,o,n,k,b,y,m,a]),getTappableIndices:A}}import{useCallback as xe}from"react";function He({completedParams:e,suggestions:n,setCompletedParams:t,setSuggestions:o,setActiveDropdownIndex:r,filterBaseRef:a,pillTappedRef:i}){let p=xe(m=>{let h=n.filter(b=>b.type!=="placeholder");if(m<0||m>=h.length)return;let c=h[m],y=h.filter((b,A)=>A!==m),k=n.filter(b=>b.type==="placeholder");o([...k,c,...y]),i.current=!0,r(-1)},[n,o,r,i]),f=xe(()=>{if(e.length===0)return;let m=e[e.length-1],h={type:m.suggestionType,text:m.suggestionPlaceholder,required:!0,options:m.options};t(c=>c.slice(0,-1)),o(c=>[h,...c]),r(-1)},[e,t,o,r]),g=xe(m=>{let h={type:m.suggestionType,text:m.suggestionPlaceholder,required:!0,options:m.options};return{apply:c=>{c(y=>{let k=0;for(let b of e){let A=y.indexOf(b.text,k);if(A!==-1){if(b.id===m.id){let M=y.slice(0,A),d=y.slice(A+m.text.length),l=(M+d).replace(/ {2,}/g," ");return a.current=Math.min(a.current,l.length),l}k=A+b.text.length}}return y}),t(y=>y.filter(k=>k.id!==m.id)),o(y=>[h,...y]),r(-1),i.current=!0}}},[e,t,o,r,a,i]);return{setActivePill:p,removeLastParam:f,reEditParam:g}}var xt=0;function Pt(){let e=E(null);return e.current===null&&(e.current=`:ac-${++xt}:`),e.current}function Pe({onSubmit:e,onError:n,optionOverrides:t,maskCompletedText:o,placeholder:r,apiConfig:a,columns:i=2,eagerSuggestions:p=!0,value:f,completedParams:g,onChange:m,onParamsChange:h}){let c=f!==void 0,y=g!==void 0,[k,b]=ie(""),[A,M]=ie([]),[d,l]=ie([]),[s,u]=ie(-1),x=c?f:k,w=y?g:A,O=E(e);O.current=e;let B=E(m);B.current=m;let C=E(h);C.current=h;let L=E(f);L.current=f;let z=E(g);z.current=g;let _=Z(S=>{if(typeof S=="function")if(c){let v=S(L.current??"");B.current?.(v)}else b(v=>{let q=S(v);return B.current?.(q),q});else c||b(S),B.current?.(S)},[c]),T=Z(S=>{if(typeof S=="function")if(y){let v=S(z.current??[]);C.current?.(v)}else M(v=>{let q=S(v);return C.current?.(q),q});else y||M(S),C.current?.(S)},[y]),X=E(n);X.current=n;let N=E(t);N.current=t;let F=E(o);F.current=o;let I=E(a);I.current=a;let $=E(x);$.current=x;let ce=E(d);ce.current=d;let K=E(0),te=E(!1),Ae=E(!1),le=Pt(),{doFetch:ue,isLoading:Ce,error:Ve,isReady:Xe,lastRawQueryRef:pe}=ze({textRef:$,suggestionsRef:ce,filterBaseRef:K,maskCompletedTextRef:F,apiConfigRef:I,optionOverridesRef:N,onErrorRef:X,setCompletedParams:T,setSuggestions:l,setActiveDropdownIndex:u});qe({text:x,completedParams:w,doFetch:ue,filterBaseRef:K,skipNextFetchRef:Ae,suggestionsRef:ce,lastRawQueryRef:pe});let We=se(()=>Ne(x,w),[x,w]);K.current=Math.min(K.current,x.length);let me=x.slice(K.current),de=se(()=>d.filter(v=>v.type==="placeholder").map(v=>v.text).join(" ")||r||"",[d,r]),oe=se(()=>d.filter(S=>S.type!=="placeholder"),[d]),P=oe[0],ke=P?t?.[P.type]:void 0,we=P?ke?ke(me.trim()):P.options??[]:[],fe=se(()=>ae(we,me),[we,me]),Oe=de.length>0,ge=!Ce&&fe.length>0&&(!!x||te.current||!Oe),Ie=Z(S=>{if(!P)return;let v={id:crypto.randomUUID(),placeholder:"",type:P.type,text:S.text,kind:S.kind,suggestionType:P.type,suggestionPlaceholder:P.text,options:P.options,metadata:S.metadata},q=K.current,U=$.current.slice(0,q);if(U.length>0&&!U.endsWith(" ")){let R=U.split(/\s+/).pop()??"";R&&S.text.toLowerCase().startsWith(R.toLowerCase())&&(U=U.slice(0,U.length-R.length))}let he=U.length>0&&U[U.length-1]!==" ",W=U+(he?" ":"")+S.text+" ";_(W),K.current=W.length,T(R=>[...R,v]),te.current=!1,u(-1);let Q=oe.length-1;p&&Q>0?(l(R=>R.filter(H=>H!==P)),Ae.current=!0):l(R=>R.filter(H=>H.type==="placeholder"))},[P,oe,p,_,T]),Ge=Z(S=>{let v=S.target.value,U=v.length>0&&!S.nativeEvent?.isComposing&&v[0]!==v[0].toUpperCase()?v[0].toUpperCase()+v.slice(1):v;_(U),te.current=!1,u(-1);let{valid:he,invalid:W}=De(U,w);if(W.length>0){T(()=>he);for(let Q of W)l(R=>[{type:Q.suggestionType,text:Q.suggestionPlaceholder,required:!0,options:Q.options},...R])}if(P&&W.length===0){let Q=U.slice(K.current),R=ee(P.options,Q);R&&(T(H=>[...H,{id:crypto.randomUUID(),placeholder:"",type:P.type,text:R.text,kind:R.kind,suggestionType:P.type,suggestionPlaceholder:P.text,options:P.options,metadata:R.metadata}]),l(H=>H.filter(tt=>tt!==P)))}},[w,P,_,T]),{handleKeyDown:Ye}=Qe({activeDropdownIndex:s,setActiveDropdownIndex:u,filteredOptions:fe,selectOption:Ie,onSubmitRef:O,text:x,completedParams:w,isDropdownOpen:ge,hasPlaceholder:Oe,placeholderText:de,suggestions:d,filterBaseRef:K,columns:i,setText:_,setCompletedParams:T,setSuggestions:l}),re=He({completedParams:w,suggestions:d,setCompletedParams:T,setSuggestions:l,setActiveDropdownIndex:u,filterBaseRef:K,pillTappedRef:te}),Je=Z(S=>{re.reEditParam(S).apply(_)},[re,_]),Ze=Z(()=>{_(""),T(()=>[]),l([]),u(-1),K.current=0,pe.current="",ue("",[])},[ue,_,T,pe]),et=s>=0?`${le}-option-${s}`:void 0;return{completedParams:w,suggestionPills:oe,setActivePill:re.setActivePill,removeLastParam:re.removeLastParam,reEditParam:Je,segments:We,suggestions:d,activeIndex:s,isReady:Xe,isLoading:Ce,error:Ve,inputProps:{value:x,placeholder:de||void 0,onChange:Ge,onKeyDown:Ye,role:"combobox","aria-expanded":ge,"aria-activedescendant":et,"aria-autocomplete":"list","aria-controls":le},reset:Ze,dropdownProps:{suggestions:P?[{...P,options:fe}]:[],activeIndex:s,onSelect:Ie,onHighlight:u,isOpen:ge,id:le}}}import{jsx as j,jsxs as V}from"react/jsx-runtime";var Ot=vt(function({onSubmit:n,onError:t,optionOverrides:o,maskCompletedText:r,placeholder:a,className:i,apiConfig:p,columns:f,eagerSuggestions:g,value:m,completedParams:h,onChange:c,onParamsChange:y},k){let b=ve(null),[A,M]=wt(!1),d=ve(()=>{}),l=ve(void 0);Ct(()=>(b.current?.focus(),()=>clearTimeout(l.current)),[]);let{completedParams:s,suggestionPills:u,setActivePill:x,segments:w,inputProps:O,dropdownProps:B,reset:C}=Pe({onSubmit:I=>d.current(I),onError:t,optionOverrides:o,maskCompletedText:r,placeholder:a,apiConfig:p,columns:f,eagerSuggestions:g,value:m,completedParams:h,onChange:c,onParamsChange:y});kt(k,()=>({focus:()=>b.current?.focus(),reset:C}),[C]);let L=()=>{b.current?.focus()},z=!!O.value||s.length>0,_=At(()=>{if(!z)return;let{rawQuery:I,completedParams:$}=Y(O.value,s);n({query:O.value.trim(),raw_query:I,completed_params:$}),C(),M(!0),clearTimeout(l.current),l.current=setTimeout(()=>M(!1),3e3)},[z,O.value,s,n,C]);d.current=_;let{onChange:T,placeholder:X,...N}=O,F=!O.value;return V("div",{className:`${D.container} ${i??""}`,children:[j("div",{className:`${D.checkmark} ${A?D.checkmarkVisible:""}`,children:V("svg",{width:"72",height:"72",viewBox:"0 0 24 24",fill:"none",role:"img","aria-label":"Success",children:[j("circle",{cx:"12",cy:"12",r:"12",fill:"#34C759"}),j("path",{d:"M7 12.5l3.5 3.5L17 9",stroke:"#000",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",className:D.checkmarkPath})]})}),j(ye,{...B}),V("div",{className:D.inputWrapper,onClick:L,children:[V("div",{className:D.editorArea,children:[V("div",{className:D.sizerContent,"aria-hidden":"true",children:[F&&X?V("span",{className:D.placeholderText,children:[X," "]}):V("span",{className:D.sizerText,children:[w.map((I,$)=>j("span",{children:I.value},`${$}-${I.type}`)),w.length===0&&"\xA0"]})," ",j(Le,{pills:u,activePillIndex:0,onSelectPill:x})]}),j("textarea",{ref:b,className:D.textarea,rows:1,onChange:T,...N})]}),j("button",{type:"button",className:D.submitButton,disabled:!z,onClick:I=>{I.stopPropagation(),_()},"aria-label":"Submit",children:j("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:j("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]})]})});export{Ot as AIAutocomplete,ye as AIAutocompleteDropdown,Pe as useAIAutocomplete};
2
2
  //# sourceMappingURL=index.mjs.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@magicx-eng/ai-autocomplete-react",
3
- "version": "0.1.7",
3
+ "version": "0.1.8",
4
4
  "description": "AI Autocomplete React SDK — guided autocomplete with pill-based input and dropdown suggestions",
5
5
  "main": "./dist/index.cjs",
6
6
  "module": "./dist/index.js",
@@ -10,7 +10,8 @@
10
10
  "types": "./dist/index.d.ts",
11
11
  "import": "./dist/index.js",
12
12
  "require": "./dist/index.cjs"
13
- }
13
+ },
14
+ "./styles.css": "./dist/index.css"
14
15
  },
15
16
  "files": [
16
17
  "dist"