@magicx-eng/ai-autocomplete-react 0.6.3 → 0.6.5
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/dist/index.js +11 -6
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +9 -4
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/dist/index.mjs
CHANGED
|
@@ -65,7 +65,12 @@ import{forwardRef as Ft,useCallback as Le,useEffect as ot,useImperativeHandle as
|
|
|
65
65
|
white-space: nowrap;
|
|
66
66
|
/* Small vertical breathing room so wrapped rows of pills don't touch. */
|
|
67
67
|
margin: 2px 0;
|
|
68
|
-
|
|
68
|
+
/* baseline (not middle) so the pill's text shares the surrounding text's
|
|
69
|
+
baseline exactly. middle aligns the chip box to the parent's x-height
|
|
70
|
+
midpoint, which font ascent/descent asymmetry turns into the pill text
|
|
71
|
+
sitting ~1-2px below the adjacent text. The symmetric 4px padding keeps
|
|
72
|
+
the capsule optically centered around the text on its own. */
|
|
73
|
+
vertical-align: baseline;
|
|
69
74
|
cursor: pointer;
|
|
70
75
|
/* Smooth hover fade. Neutralized by the data-animations="off" block. */
|
|
71
76
|
transition: background-color 150ms ease;
|
|
@@ -1019,7 +1024,7 @@ import{forwardRef as Ft,useCallback as Le,useEffect as ot,useImperativeHandle as
|
|
|
1019
1024
|
filter: brightness(0.55);
|
|
1020
1025
|
}
|
|
1021
1026
|
}
|
|
1022
|
-
`,document.head.appendChild(e)}var H={item:"SuggestionItem-module_item_d4vpD",fadeIn:"SuggestionItem-module_fadeIn_I8u35",content:"SuggestionItem-module_content_T-Qba",tappable:"SuggestionItem-module_tappable_70KcX",nonTappable:"SuggestionItem-module_nonTappable_xSZM-",highlighted:"SuggestionItem-module_highlighted_Hb0SU",tag:"SuggestionItem-module_tag_e3Fwe",pressed:"SuggestionItem-module_pressed_98o-r",glassFade:"SuggestionItem-module_glassFade_oyiSj",tapDown:"SuggestionItem-module_tapDown_G3WGz",streaks:"SuggestionItem-module_streaks_d9PEB",streaksVert:"SuggestionItem-module_streaksVert_ERlV1",streakHorizRight:"SuggestionItem-module_streakHorizRight_aboGz",streakHorizLeft:"SuggestionItem-module_streakHorizLeft_BreWJ",streakVertUp:"SuggestionItem-module_streakVertUp_to1GD",streakVertDown:"SuggestionItem-module_streakVertDown_OrcLh",skeletonPulse:"SuggestionItem-module_skeletonPulse_plvdD",text:"SuggestionItem-module_text_yqoh9"};import{jsx as ve,jsxs as
|
|
1027
|
+
`,document.head.appendChild(e)}var H={item:"SuggestionItem-module_item_d4vpD",fadeIn:"SuggestionItem-module_fadeIn_I8u35",content:"SuggestionItem-module_content_T-Qba",tappable:"SuggestionItem-module_tappable_70KcX",nonTappable:"SuggestionItem-module_nonTappable_xSZM-",highlighted:"SuggestionItem-module_highlighted_Hb0SU",tag:"SuggestionItem-module_tag_e3Fwe",pressed:"SuggestionItem-module_pressed_98o-r",glassFade:"SuggestionItem-module_glassFade_oyiSj",tapDown:"SuggestionItem-module_tapDown_G3WGz",streaks:"SuggestionItem-module_streaks_d9PEB",streaksVert:"SuggestionItem-module_streaksVert_ERlV1",streakHorizRight:"SuggestionItem-module_streakHorizRight_aboGz",streakHorizLeft:"SuggestionItem-module_streakHorizLeft_BreWJ",streakVertUp:"SuggestionItem-module_streakVertUp_to1GD",streakVertDown:"SuggestionItem-module_streakVertDown_OrcLh",skeletonPulse:"SuggestionItem-module_skeletonPulse_plvdD",text:"SuggestionItem-module_text_yqoh9"};import{jsx as ve,jsxs as je}from"react/jsx-runtime";function Ve({option:e,isHighlighted:l,onSelect:i,onHighlight:r,id:d,loading:a}){let[s,c]=yt(!1),b=wt(void 0);vt(()=>()=>clearTimeout(b.current),[]);let x=()=>{a||!e.is_tappable||s||(c(!0),i(e),clearTimeout(b.current),b.current=setTimeout(()=>c(!1),500))},R=[H.item,l&&!a?H.highlighted:"",e.is_tappable?H.tappable:H.nonTappable,s?H.pressed:""].filter(Boolean).join(" ");return je("div",{id:d,role:"option","data-aia-option":"","data-aia-loading":a?"":void 0,"aria-selected":l,className:R,tabIndex:a||!e.is_tappable?-1:0,onClick:x,onKeyDown:I=>{!a&&e.is_tappable&&(I.key==="Enter"||I.key===" ")&&(I.preventDefault(),x())},onMouseEnter:!a&&e.is_tappable?r:void 0,children:[ve("div",{className:H.streaks}),ve("div",{className:H.streaksVert}),je("span",{className:H.content,children:[ve("span",{className:H.text,children:e.icon?`${e.icon} ${e.text}`:e.text}),e.tag&&ve("span",{className:H.tag,children:e.tag})]})]})}import{jsx as $e}from"react/jsx-runtime";function qe({options:e,activeIndex:l,onSelect:i,onHighlight:r,listboxId:d,loading:a}){return $e(Ue,{min:"250px",max:"250px",gap:"0",scroll:!0,fade:!0,children:e.map((s,c)=>$e(Ve,{option:s,isHighlighted:c===l,onSelect:i,onHighlight:()=>r(c),id:`${d}-option-${c}`,loading:a},s.text))})}if(typeof document<"u"&&!document.getElementById("ac-style-8414cd5f")){let e=document.createElement("style");e.id="ac-style-8414cd5f",e.textContent=`@layer layout {
|
|
1023
1028
|
.aia-stack {
|
|
1024
1029
|
display: flex;
|
|
1025
1030
|
flex-direction: column;
|
|
@@ -1036,7 +1041,7 @@ import{forwardRef as Ft,useCallback as Le,useEffect as ot,useImperativeHandle as
|
|
|
1036
1041
|
}
|
|
1037
1042
|
/* data-align="stretch" is the flex default \u2014 no rule needed. */
|
|
1038
1043
|
}
|
|
1039
|
-
`,document.head.appendChild(e)}import{jsx as _t}from"react/jsx-runtime";function Qe({space:e,align:l="stretch",className:i,children:r,...d}){let a=e?{"--aia-stack-space":e}:void 0;return _t("div",{className:i?`aia-stack ${i}`:"aia-stack","data-align":l,style:a,...d,children:r})}import{jsx as ae,jsxs as Ct}from"react/jsx-runtime";var St=[159,119,164];function At(e){let l=()=>typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches,[i,r]=Pt(l);if(kt(()=>{if(e!=="auto"||typeof window>"u"||typeof window.matchMedia!="function")return;let d=window.matchMedia("(prefers-color-scheme: dark)"),a=()=>r(d.matches);return d.addEventListener("change",a),()=>d.removeEventListener("change",a)},[e]),e!==void 0)return e==="auto"?i?"dark":"light":e}function Ce({suggestions:e,activeIndex:l,onSelect:i,onHighlight:r,isOpen:d,id:a,className:s,pills:c,onPillClick:b,showPills:x=!0,activeSelected:R=!1,isLoading:I=!1,isInputEmpty:k=!1,optionsPosition:P="below",mode:w}){let C=At(w),F=C!==void 0,
|
|
1044
|
+
`,document.head.appendChild(e)}import{jsx as _t}from"react/jsx-runtime";function Qe({space:e,align:l="stretch",className:i,children:r,...d}){let a=e?{"--aia-stack-space":e}:void 0;return _t("div",{className:i?`aia-stack ${i}`:"aia-stack","data-align":l,style:a,...d,children:r})}import{jsx as ae,jsxs as Ct}from"react/jsx-runtime";var St=[159,119,164];function At(e){let l=()=>typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches,[i,r]=Pt(l);if(kt(()=>{if(e!=="auto"||typeof window>"u"||typeof window.matchMedia!="function")return;let d=window.matchMedia("(prefers-color-scheme: dark)"),a=()=>r(d.matches);return d.addEventListener("change",a),()=>d.removeEventListener("change",a)},[e]),e!==void 0)return e==="auto"?i?"dark":"light":e}function Ce({suggestions:e,activeIndex:l,onSelect:i,onHighlight:r,isOpen:d,id:a,className:s,pills:c,onPillClick:b,showPills:x=!0,activeSelected:R=!1,isLoading:I=!1,isInputEmpty:k=!1,optionsPosition:P="below",mode:w}){let C=At(w),F=C!==void 0,j=e[0]?.options??[],n=!!(c&&c.length>0&&b),y=d&&(j.length>0||x&&n||I),L={suggestions:e,activeIndex:l,pills:c,showPills:x,activeSelected:R,isLoading:I,isInputEmpty:k},W=It(L);y&&(W.current=L);let f=y?L:W.current,z=f.suggestions[0]?.options??[],E=f.activeIndex>=0&&!!z[f.activeIndex]?.is_tappable,G=!!(f.pills&&f.pills.length>0&&b),T=f.showPills&&G,X=f.showPills&&!G&&f.isLoading,V=T||X,B=z.length>0,O=f.isLoading&&!B;return ae("div",{id:a,role:"listbox","data-aia-dropdown":"","data-options-position":P,"data-mode":C,"data-aia-loading":f.isLoading?"":void 0,className:`${F?"magicx-aia ":""}${ie.dropdown} ${y?ie.visible:""} ${s??""}`,onMouseDown:h=>h.preventDefault(),children:Ct(Qe,{space:"8px",children:[V&&ae(le,{noWrap:!0,className:ie.pillBar,"data-aia-pillbar":"",children:ae(xe,{pills:f.pills??[],activePillIndex:0,activeSelected:f.activeSelected,onSelectPill:b??(()=>{}),rounded:!0,loading:f.isLoading})}),B&&ae(qe,{options:z,activeIndex:f.activeIndex,onSelect:i,onHighlight:r,listboxId:a,loading:f.isLoading}),O&&ae("div",{className:ie.skeletonBars,"data-aia-skeleton-bars":"",children:St.map(h=>ae("span",{className:ie.skeletonBar,style:{width:h}},`bar-${h}`))}),ae(Ne,{isOptionHighlighted:E,isInputEmpty:f.isInputEmpty})]})})}import{buildQuery as Mt,ModeController as Ht,setCursorOffset as Nt}from"@magicx-eng/ai-autocomplete-vanilla";if(typeof document<"u"&&!document.getElementById("ac-style-fdee06e6")){let e=document.createElement("style");e.id="ac-style-fdee06e6",e.textContent=`.SubmitButton-module_submitButton_otz7H {
|
|
1040
1045
|
flex-shrink: 0;
|
|
1041
1046
|
width: 32px;
|
|
1042
1047
|
height: 32px;
|
|
@@ -1071,5 +1076,5 @@ import{forwardRef as Ft,useCallback as Le,useEffect as ot,useImperativeHandle as
|
|
|
1071
1076
|
);
|
|
1072
1077
|
cursor: default;
|
|
1073
1078
|
}
|
|
1074
|
-
`,document.head.appendChild(e)}var Xe={submitButton:"SubmitButton-module_submitButton_otz7H"};import{jsx as Ee}from"react/jsx-runtime";function Ze({disabled:e,onClick:l}){return Ee("button",{type:"button","data-aia-submit":"",className:Xe.submitButton,disabled:e,onClick:i=>{i.stopPropagation(),l()},"aria-label":"Submit",children:Ee("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:Ee("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}import{AIAutocomplete as Et}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as Je,useEffect as we,useRef as N,useState as Dt}from"react";var Rt={text:"",completedParams:[],suggestions:[],activeDropdownIndex:-1,newParamId:null,isLoading:!0,isReady:!1,error:null,segments:[],actionableSuggestions:[],filteredOptions:[],placeholderText:"",isDropdownOpen:!1,isActivePillSelected:!1,filterBase:0,filterInProgress:!1,pillTapped:!1,skipNextFetch:!1,lastRawQuery:"",isFocused:!1,editingParam:null,editingAnchor:null,editingTail:null,caretOffset:null,inSelectionAnimation:!1};function De({onSubmit:e,onError:l,optionOverrides:i,maskCompletedText:r,apiConfig:d,columns:a=2,dropdownTrigger:s,optionsPosition:c,closeDropdownOnBlur:b,showNonTappableOptions:x,onFocus:R,onBlur:I,value:k,completedParams:P,onChange:w,onParamsChange:C,source:F,setCursor:V}){let n=N(null),[y,L]=Dt(null),W=N(e);W.current=e;let f=N(l);f.current=l;let Q=N(w);Q.current=w;let z=N(C);z.current=C;let E=N(R);E.current=R;let G=N(I);G.current=I;let T=N(V);T.current=V,we(()=>{if(typeof document>"u")return;let o=new Et(document.createElement("div"),{renderMode:"headless",apiConfig:d,optionOverrides:i,maskCompletedText:r,columns:a,dropdownTrigger:s,optionsPosition:c,closeDropdownOnBlur:b,showNonTappableOptions:x,source:F,value:k,completedParams:P,onSubmit:(...S)=>W.current?.(...S),onError:(...S)=>f.current?.(...S),onChange:(...S)=>Q.current?.(...S),onParamsChange:(...S)=>z.current?.(...S),onFocus:()=>E.current?.(),onBlur:()=>G.current?.(),setCursor:S=>T.current?.(S)});n.current=o,L(o.getState());let A=o.subscribe(S=>L(S));return()=>{A(),o.destroy(),n.current===o&&(n.current=null)}},[]),we(()=>{k!==void 0&&n.current?.setValue(k)},[k]),we(()=>{P!==void 0&&n.current?.setCompletedParams(P)},[P]);let X=JSON.stringify(d??null),j=N(i),B=N(0);if(i!==j.current){let o=j.current,A=i,S=Object.keys(o??{}),oe=Object.keys(A??{});(S.length!==oe.length||oe.some(se=>!o?.[se]||A[se]!==o[se]))&&B.current++,j.current=i}we(()=>{n.current?.update({apiConfig:d,optionOverrides:i,dropdownTrigger:s,optionsPosition:c,closeDropdownOnBlur:b,showNonTappableOptions:x})},[X,B.current,s,c,b,x]);let O=N(null);O.current===null&&(O.current={handleTextChange:o=>n.current?.handleTextChange(o),handleKeyDown:o=>{let A="nativeEvent"in o?o.nativeEvent:o;n.current?.handleKeyDown(A)},setFocused:o=>n.current?.setFocused(o),startEditingParam:o=>n.current?.startEditingParam(o),exitEditMode:()=>n.current?.exitEditMode(),handleCaretAfterInput:o=>n.current?.handleCaretAfterInput(o),handleCaretMove:o=>n.current?.handleCaretMove(o),replaceEditingRange:o=>n.current?.replaceEditingRange(o)??!1,setActivePill:o=>n.current?.setActivePill(o),removeLastParam:()=>n.current?.removeLastParam(),clearNewParamId:()=>n.current?.clearNewParamId(),reset:()=>n.current?.reset(),selectOption:o=>n.current?.selectOption(o),setActiveDropdownIndex:o=>n.current?.setActiveDropdownIndex(o),handleFocus:()=>n.current?.setFocused(!0),handleBlur:()=>n.current?.setFocused(!1)});let h=O.current,Y=Je(o=>{let A=o.target.value,oe=A.length>0&&!o.nativeEvent?.isComposing&&A[0]!==A[0].toUpperCase()?A[0].toUpperCase()+A.slice(1):A;n.current?.handleTextChange(oe)},[]),ee=Je(o=>{n.current?.handleKeyDown(o.nativeEvent)},[]),Z=n.current,u=y??Rt,t=k!==void 0?k:u.text,p=P!==void 0?P:u.completedParams,m=u.actionableSuggestions,v=m[0],g=Z?.listboxId??"",D=u.activeDropdownIndex>=0&&Z?`${g}-option-${u.activeDropdownIndex}`:void 0,M=u.editingParam,$=M?{type:M.suggestionType,text:M.suggestionPlaceholder,required:!0,options:M.options}:null,ce=$??v,_e=$?[$]:m,ue=!Z||u.isLoading&&!u.editingParam&&!u.inSelectionAnimation;return{completedParams:p,suggestionPills:m,setActivePill:h.setActivePill,removeLastParam:h.removeLastParam,segments:u.segments,newParamId:u.newParamId,clearNewParamId:h.clearNewParamId,suggestions:u.suggestions,activeIndex:u.activeDropdownIndex,isReady:u.isReady,isLoading:ue,isFocused:u.isFocused,isDropdownOpen:u.isDropdownOpen,isActivePillSelected:u.isActivePillSelected,placeholderText:u.placeholderText,listboxId:g,error:u.error,handleTextChange:h.handleTextChange,handleKeyDown:h.handleKeyDown,setFocused:h.setFocused,editingParam:M,editingAnchor:u.editingAnchor,caretOffset:u.caretOffset,startEditingParam:h.startEditingParam,exitEditMode:h.exitEditMode,handleCaretAfterInput:h.handleCaretAfterInput,handleCaretMove:h.handleCaretMove,replaceEditingRange:h.replaceEditingRange,inputProps:{value:t,placeholder:u.placeholderText||void 0,onChange:Y,onKeyDown:ee,onFocus:h.handleFocus,onBlur:h.handleBlur,role:"combobox","aria-expanded":u.isDropdownOpen,"aria-activedescendant":D,"aria-autocomplete":"list","aria-controls":g},reset:h.reset,dropdownProps:{suggestions:ce?[{...ce,options:u.filteredOptions}]:[],activeIndex:u.activeDropdownIndex,onSelect:h.selectOption,onHighlight:h.setActiveDropdownIndex,isOpen:u.isDropdownOpen,id:g,pills:_e,activeSelected:u.isActivePillSelected,onPillClick:h.setActivePill,isLoading:ue,isInputEmpty:t.trim().length===0,optionsPosition:c??"below"}}}import{extractPlainText as Ye,getCursorOffset as et,plainTextLength as Tt,renderEditableContent as Lt,setCursorOffset as tt}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as K,useEffect as Re,useLayoutEffect as Te,useRef as ne}from"react";var ye;function zt(){if(ye!==void 0)return ye;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),ye=e.contentEditable==="plaintext-only",ye}function at(e){let{segments:l,newParamId:i,editingParam:r,editingAnchor:d,caretOffset:a,placeholderText:s,isFocused:c,isDropdownOpen:b,listboxId:x,activeDescendantId:R,autoFocus:I,handleTextChange:k,handleKeyDown:P,handleCaretAfterInput:w,handleCaretMove:C,startEditingParam:F,replaceEditingRange:V,setFocused:n}=e,y=ne(null),L=ne(!1),W=ne(""),f=ne(""),Q=ne(null),z=ne(0);Q.current=a,Re(()=>{if(!I)return;let t=y.current;if(!t)return;document.activeElement===t?n(!0):t.focus();let p=t.ownerDocument??document,m=p.getSelection(),v=m&&m.rangeCount>0&&t.contains(m.anchorNode);if(m&&!v){let g=p.createRange();g.selectNodeContents(t),g.collapse(!0),m.removeAllRanges(),m.addRange(g)}},[I,n]),Re(()=>{let t=y.current;if(!t)return;let p=t.ownerDocument??document,m=()=>{let v=p.getSelection();if(!v||v.rangeCount===0||!v.anchorNode||!t.contains(v.anchorNode))return;let g=v.anchorNode,$=(g.nodeType===Node.ELEMENT_NODE?g:g.parentElement)?.closest('strong[data-seg="completed"][data-param-id]')?.dataset.paramId??null;if($&&$!==r?.id){F($);return}performance.now()-z.current<50||C(et(t))};return p.addEventListener("selectionchange",m),()=>p.removeEventListener("selectionchange",m)},[r,F,C]),Te(()=>{let t=y.current;t&&Lt({input:t,segments:l,newParamId:i,editingParamId:r?.id??null,placeholderText:s??"",isFocused:c})},[l,i,r,s,c]),Te(()=>{let t=W.current,p=i??"";if(W.current=p,!p||p===t)return;let m=y.current;if(!m)return;m.focus();let v=Q.current??Tt(m);tt(m,v)},[i]),Te(()=>{let t=f.current,p=r?.id??"";if(f.current=p,!p||p===t||d==null)return;let m=y.current;m&&tt(m,d)},[r,d]);let E=K(()=>{if(L.current)return;let t=y.current;if(!t)return;let p=Ye(t),v=p.length>0&&p[0]!==p[0].toUpperCase()?p[0].toUpperCase()+p.slice(1):p;k(v)},[k]),G=K(()=>{z.current=performance.now(),E();let t=y.current;t&&w(et(t))},[E,w]);Re(()=>{let t=y.current;if(!t)return;let p=m=>{let v=m,g=v.inputType;if(g==="insertParagraph"||g==="insertLineBreak"||g==="insertFromDrop"){m.preventDefault();return}if(g.startsWith("insert")||g.startsWith("delete")){let D=g.startsWith("delete")?"":v.data??"";V(D)&&m.preventDefault()}};return t.addEventListener("beforeinput",p),()=>t.removeEventListener("beforeinput",p)},[V]);let T=K(()=>{L.current=!0},[]),X=K(()=>{L.current=!1,E()},[E]),j=K(t=>{t.preventDefault();let p=y.current;if(!p)return;let m=(t.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!m)return;let v=p.ownerDocument??document,g=v.getSelection();if(!g||g.rangeCount===0)return;let D=g.getRangeAt(0);if(!p.contains(D.startContainer))return;D.deleteContents();let M=v.createTextNode(m);D.insertNode(M),D.setStartAfter(M),D.collapse(!0),g.removeAllRanges(),g.addRange(D),E()},[E]),B=K(t=>P(t),[P]),O=K(()=>n(!0),[n]),h=K(()=>n(!1),[n]),Y=K(()=>y.current?.focus(),[]),ee=K(()=>y.current?.blur(),[]),Z=K(()=>{let t=y.current;return t?Ye(t):""},[]),u=zt()?"plaintext-only":"true";return{inputRef:y,editorProps:{ref:y,contentEditable:u,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":x,"aria-expanded":b,"aria-activedescendant":R,spellCheck:!0,enterKeyHint:"send",onInput:G,onKeyDown:B,onCompositionStart:T,onCompositionEnd:X,onPaste:j,onFocus:O,onBlur:h},getPlainText:Z,focus:Y,blur:ee}}import{jsx as re,jsxs as ze}from"react/jsx-runtime";function Kt(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var Wt=Ft(function({onSubmit:l,onError:i,optionOverrides:r,maskCompletedText:d,className:a,apiConfig:s,columns:c,pillPlacement:b="dropdown",mode:x="auto",optionsPosition:R="below",animations:I=!0,dropdownTrigger:k,closeDropdownOnBlur:P,showNonTappableOptions:w,autoFocus:C=!0,onFocus:F,onBlur:V,value:n,completedParams:y,onChange:L,onParamsChange:W,submitButton:f},Q){let z=pe(null),E=pe(null),G=pe(()=>{}),T=pe(null),X=pe(null);ot(()=>{let _=z.current;if(_)return T.current?T.current.setMode(x):T.current=new Ht(_,x),()=>{T.current?.destroy(),T.current=null}},[x]);let j=Le(_=>{let U=X.current?.current;U&&(U.focus(),Nt(U,_))},[]),{completedParams:B,suggestionPills:O,setActivePill:h,segments:Y,newParamId:ee,clearNewParamId:Z,placeholderText:u,isFocused:t,isDropdownOpen:p,isActivePillSelected:m,isLoading:v,activeIndex:g,listboxId:D,handleTextChange:M,handleKeyDown:$,setFocused:ce,editingParam:_e,editingAnchor:ue,caretOffset:o,startEditingParam:A,handleCaretAfterInput:S,handleCaretMove:oe,replaceEditingRange:se,dropdownProps:it,reset:me}=De({onSubmit:_=>G.current(_),onError:i,optionOverrides:r,maskCompletedText:d,apiConfig:s,columns:c,dropdownTrigger:k,optionsPosition:R,closeDropdownOnBlur:P,showNonTappableOptions:w,onFocus:F,onBlur:V,value:n,completedParams:y,onChange:L,onParamsChange:W,source:"full-sdk",setCursor:j});ot(()=>{if(!ee)return;let _=window.setTimeout(()=>Z(),650);return()=>window.clearTimeout(_)},[ee,Z]);let nt=g>=0?`${D}-option-${g}`:void 0,{inputRef:ke,editorProps:rt,focus:ge,blur:Fe,getPlainText:Be}=at({segments:Y,newParamId:ee,editingParam:_e,editingAnchor:ue,caretOffset:o,placeholderText:u,isFocused:t,isDropdownOpen:p,listboxId:D,activeDescendantId:nt,autoFocus:C,handleTextChange:M,handleKeyDown:$,handleCaretAfterInput:S,handleCaretMove:oe,startEditingParam:A,replaceEditingRange:se,setFocused:ce});X.current=ke,Ot(()=>{let _=E.current,U=ke.current;if(!_||!U)return;let he=()=>{let Me=_.firstElementChild;if(!Me)return;let pt=Me.getBoundingClientRect(),ct=U.getBoundingClientRect();pt.top>=ct.bottom-2?_.setAttribute("data-aia-pill-wrapped",""):_.removeAttribute("data-aia-pill-wrapped")};he();let Oe=new ResizeObserver(he);return Oe.observe(U),()=>Oe.disconnect()},[Y,O.length,v,ke]),Bt(Q,()=>({focus:ge,blur:Fe,reset:me,setMode:_=>T.current?.setMode(_)}),[ge,Fe,me]);let fe=!!Y.length||B.length>0,Ie=Le(()=>{if(!fe)return;let _=Be(),{rawQuery:U,completedParams:he}=Mt(_,B);l({query:_.trim(),raw_query:U,completed_params:he}),me()},[fe,B,l,me,Be]);G.current=Ie;let st=Le(_=>{_.target?.closest("[data-aia-pill]")||ge()},[ge]),lt=b==="inline",dt=b==="dropdown";return ze("div",{ref:z,className:`magicx-aia ${te.container} ${a??""}`,"data-pill-placement":b,"data-options-position":R,"data-animations":I?"on":"off","data-mode":Kt(x),children:[re(Ce,{...it,showPills:dt}),ze("div",{className:te.inputWrapper,onClick:st,children:[ze("div",{className:te.editorArea,"data-aia-editor":"",children:[re("div",{...rt,className:te.input,"data-aia-input":""}),lt&&(v||O.length>0)&&re("span",{ref:E,className:te.pillListContainer,"data-aia-pill-list-container":"",children:re(xe,{pills:O,activePillIndex:0,activeSelected:m,onSelectPill:h,loading:v})})]}),f===null?null:f===void 0?re(Ze,{disabled:!fe,onClick:Ie}):re("span",{"data-aia-submit":"",className:te.submitSlot,onClick:_=>{fe&&(_.stopPropagation(),Ie())},children:f})]})]})});export{Wt as AIAutocomplete,Ce as AIAutocompleteDropdown,De as useAIAutocomplete};
|
|
1079
|
+
`,document.head.appendChild(e)}var Xe={submitButton:"SubmitButton-module_submitButton_otz7H"};import{jsx as Ee}from"react/jsx-runtime";function Ze({disabled:e,onClick:l}){return Ee("button",{type:"button","data-aia-submit":"",className:Xe.submitButton,disabled:e,onClick:i=>{i.stopPropagation(),l()},"aria-label":"Submit",children:Ee("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:Ee("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}import{AIAutocomplete as Et}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as Je,useEffect as we,useRef as N,useState as Dt}from"react";var Rt={text:"",completedParams:[],suggestions:[],activeDropdownIndex:-1,newParamId:null,isLoading:!0,isReady:!1,error:null,segments:[],actionableSuggestions:[],filteredOptions:[],placeholderText:"",isDropdownOpen:!1,isActivePillSelected:!1,filterBase:0,filterInProgress:!1,pillTapped:!1,skipNextFetch:!1,lastRawQuery:"",isFocused:!1,editingParam:null,editingAnchor:null,editingTail:null,caretOffset:null,inSelectionAnimation:!1};function De({onSubmit:e,onError:l,optionOverrides:i,maskCompletedText:r,apiConfig:d,columns:a=2,dropdownTrigger:s,optionsPosition:c,closeDropdownOnBlur:b,showNonTappableOptions:x,onFocus:R,onBlur:I,value:k,completedParams:P,onChange:w,onParamsChange:C,source:F,setCursor:j}){let n=N(null),[y,L]=Dt(null),W=N(e);W.current=e;let f=N(l);f.current=l;let Q=N(w);Q.current=w;let z=N(C);z.current=C;let E=N(R);E.current=R;let G=N(I);G.current=I;let T=N(j);T.current=j,we(()=>{if(typeof document>"u")return;let o=new Et(document.createElement("div"),{renderMode:"headless",apiConfig:d,optionOverrides:i,maskCompletedText:r,columns:a,dropdownTrigger:s,optionsPosition:c,closeDropdownOnBlur:b,showNonTappableOptions:x,source:F,value:k,completedParams:P,onSubmit:(...S)=>W.current?.(...S),onError:(...S)=>f.current?.(...S),onChange:(...S)=>Q.current?.(...S),onParamsChange:(...S)=>z.current?.(...S),onFocus:()=>E.current?.(),onBlur:()=>G.current?.(),setCursor:S=>T.current?.(S)});n.current=o,L(o.getState());let A=o.subscribe(S=>L(S));return()=>{A(),o.destroy(),n.current===o&&(n.current=null)}},[]),we(()=>{k!==void 0&&n.current?.setValue(k)},[k]),we(()=>{P!==void 0&&n.current?.setCompletedParams(P)},[P]);let X=JSON.stringify(d??null),V=N(i),B=N(0);if(i!==V.current){let o=V.current,A=i,S=Object.keys(o??{}),oe=Object.keys(A??{});(S.length!==oe.length||oe.some(se=>!o?.[se]||A[se]!==o[se]))&&B.current++,V.current=i}we(()=>{n.current?.update({apiConfig:d,optionOverrides:i,dropdownTrigger:s,optionsPosition:c,closeDropdownOnBlur:b,showNonTappableOptions:x})},[X,B.current,s,c,b,x]);let O=N(null);O.current===null&&(O.current={handleTextChange:o=>n.current?.handleTextChange(o),handleKeyDown:o=>{let A="nativeEvent"in o?o.nativeEvent:o;n.current?.handleKeyDown(A)},setFocused:o=>n.current?.setFocused(o),startEditingParam:o=>n.current?.startEditingParam(o),exitEditMode:()=>n.current?.exitEditMode(),handleCaretAfterInput:o=>n.current?.handleCaretAfterInput(o),handleCaretMove:o=>n.current?.handleCaretMove(o),replaceEditingRange:o=>n.current?.replaceEditingRange(o)??!1,setActivePill:o=>n.current?.setActivePill(o),removeLastParam:()=>n.current?.removeLastParam(),clearNewParamId:()=>n.current?.clearNewParamId(),reset:()=>n.current?.reset(),selectOption:o=>n.current?.selectOption(o),setActiveDropdownIndex:o=>n.current?.setActiveDropdownIndex(o),handleFocus:()=>n.current?.setFocused(!0),handleBlur:()=>n.current?.setFocused(!1)});let h=O.current,Y=Je(o=>{let A=o.target.value,oe=A.length>0&&!o.nativeEvent?.isComposing&&A[0]!==A[0].toUpperCase()?A[0].toUpperCase()+A.slice(1):A;n.current?.handleTextChange(oe)},[]),ee=Je(o=>{n.current?.handleKeyDown(o.nativeEvent)},[]),Z=n.current,u=y??Rt,t=k!==void 0?k:u.text,p=P!==void 0?P:u.completedParams,m=u.actionableSuggestions,v=m[0],g=Z?.listboxId??"",D=u.activeDropdownIndex>=0&&Z?`${g}-option-${u.activeDropdownIndex}`:void 0,M=u.editingParam,$=M?{type:M.suggestionType,text:M.suggestionPlaceholder,required:!0,options:M.options}:null,ce=$??v,_e=$?[$]:m,ue=!Z||u.isLoading&&!u.editingParam&&!u.inSelectionAnimation;return{completedParams:p,suggestionPills:m,setActivePill:h.setActivePill,removeLastParam:h.removeLastParam,segments:u.segments,newParamId:u.newParamId,clearNewParamId:h.clearNewParamId,suggestions:u.suggestions,activeIndex:u.activeDropdownIndex,isReady:u.isReady,isLoading:ue,isFocused:u.isFocused,isDropdownOpen:u.isDropdownOpen,isActivePillSelected:u.isActivePillSelected,placeholderText:u.placeholderText,listboxId:g,error:u.error,handleTextChange:h.handleTextChange,handleKeyDown:h.handleKeyDown,setFocused:h.setFocused,editingParam:M,editingAnchor:u.editingAnchor,caretOffset:u.caretOffset,startEditingParam:h.startEditingParam,exitEditMode:h.exitEditMode,handleCaretAfterInput:h.handleCaretAfterInput,handleCaretMove:h.handleCaretMove,replaceEditingRange:h.replaceEditingRange,inputProps:{value:t,placeholder:u.placeholderText||void 0,onChange:Y,onKeyDown:ee,onFocus:h.handleFocus,onBlur:h.handleBlur,role:"combobox","aria-expanded":u.isDropdownOpen,"aria-activedescendant":D,"aria-autocomplete":"list","aria-controls":g},reset:h.reset,dropdownProps:{suggestions:ce?[{...ce,options:u.filteredOptions}]:[],activeIndex:u.activeDropdownIndex,onSelect:h.selectOption,onHighlight:h.setActiveDropdownIndex,isOpen:u.isDropdownOpen,id:g,pills:_e,activeSelected:u.isActivePillSelected,onPillClick:h.setActivePill,isLoading:ue,isInputEmpty:t.trim().length===0,optionsPosition:c??"below"}}}import{extractPlainText as Ye,getCursorOffset as et,plainTextLength as Tt,renderEditableContent as Lt,setCursorOffset as tt}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as K,useEffect as Re,useLayoutEffect as Te,useRef as ne}from"react";var ye;function zt(){if(ye!==void 0)return ye;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),ye=e.contentEditable==="plaintext-only",ye}function at(e){let{segments:l,newParamId:i,editingParam:r,editingAnchor:d,caretOffset:a,placeholderText:s,isFocused:c,isDropdownOpen:b,listboxId:x,activeDescendantId:R,autoFocus:I,handleTextChange:k,handleKeyDown:P,handleCaretAfterInput:w,handleCaretMove:C,startEditingParam:F,replaceEditingRange:j,setFocused:n}=e,y=ne(null),L=ne(!1),W=ne(""),f=ne(""),Q=ne(null),z=ne(0);Q.current=a,Re(()=>{if(!I)return;let t=y.current;if(!t)return;document.activeElement===t?n(!0):t.focus();let p=t.ownerDocument??document,m=p.getSelection(),v=m&&m.rangeCount>0&&t.contains(m.anchorNode);if(m&&!v){let g=p.createRange();g.selectNodeContents(t),g.collapse(!0),m.removeAllRanges(),m.addRange(g)}},[I,n]),Re(()=>{let t=y.current;if(!t)return;let p=t.ownerDocument??document,m=()=>{let v=p.getSelection();if(!v||v.rangeCount===0||!v.anchorNode||!t.contains(v.anchorNode))return;let g=v.anchorNode,$=(g.nodeType===Node.ELEMENT_NODE?g:g.parentElement)?.closest('strong[data-seg="completed"][data-param-id]')?.dataset.paramId??null;if($&&$!==r?.id){F($);return}performance.now()-z.current<50||C(et(t))};return p.addEventListener("selectionchange",m),()=>p.removeEventListener("selectionchange",m)},[r,F,C]),Te(()=>{let t=y.current;t&&Lt({input:t,segments:l,newParamId:i,editingParamId:r?.id??null,placeholderText:s??"",isFocused:c})},[l,i,r,s,c]),Te(()=>{let t=W.current,p=i??"";if(W.current=p,!p||p===t)return;let m=y.current;if(!m)return;m.focus();let v=Q.current??Tt(m);tt(m,v)},[i]),Te(()=>{let t=f.current,p=r?.id??"";if(f.current=p,!p||p===t||d==null)return;let m=y.current;m&&tt(m,d)},[r,d]);let E=K(()=>{if(L.current)return;let t=y.current;if(!t)return;let p=Ye(t),v=p.length>0&&p[0]!==p[0].toUpperCase()?p[0].toUpperCase()+p.slice(1):p;k(v)},[k]),G=K(()=>{z.current=performance.now(),E();let t=y.current;t&&w(et(t))},[E,w]);Re(()=>{let t=y.current;if(!t)return;let p=m=>{let v=m,g=v.inputType;if(g==="insertParagraph"||g==="insertLineBreak"||g==="insertFromDrop"){m.preventDefault();return}if(g.startsWith("insert")||g.startsWith("delete")){let D=g.startsWith("delete")?"":v.data??"";j(D)&&m.preventDefault()}};return t.addEventListener("beforeinput",p),()=>t.removeEventListener("beforeinput",p)},[j]);let T=K(()=>{L.current=!0},[]),X=K(()=>{L.current=!1,E()},[E]),V=K(t=>{t.preventDefault();let p=y.current;if(!p)return;let m=(t.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!m)return;let v=p.ownerDocument??document,g=v.getSelection();if(!g||g.rangeCount===0)return;let D=g.getRangeAt(0);if(!p.contains(D.startContainer))return;D.deleteContents();let M=v.createTextNode(m);D.insertNode(M),D.setStartAfter(M),D.collapse(!0),g.removeAllRanges(),g.addRange(D),E()},[E]),B=K(t=>P(t),[P]),O=K(()=>n(!0),[n]),h=K(()=>n(!1),[n]),Y=K(()=>y.current?.focus(),[]),ee=K(()=>y.current?.blur(),[]),Z=K(()=>{let t=y.current;return t?Ye(t):""},[]),u=zt()?"plaintext-only":"true";return{inputRef:y,editorProps:{ref:y,contentEditable:u,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":x,"aria-expanded":b,"aria-activedescendant":R,spellCheck:!0,enterKeyHint:"send",onInput:G,onKeyDown:B,onCompositionStart:T,onCompositionEnd:X,onPaste:V,onFocus:O,onBlur:h},getPlainText:Z,focus:Y,blur:ee}}import{jsx as re,jsxs as ze}from"react/jsx-runtime";function Kt(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var Wt=Ft(function({onSubmit:l,onError:i,optionOverrides:r,maskCompletedText:d,className:a,apiConfig:s,columns:c,pillPlacement:b="dropdown",mode:x="auto",optionsPosition:R="below",animations:I=!0,dropdownTrigger:k,closeDropdownOnBlur:P,showNonTappableOptions:w,autoFocus:C=!0,onFocus:F,onBlur:j,value:n,completedParams:y,onChange:L,onParamsChange:W,submitButton:f},Q){let z=pe(null),E=pe(null),G=pe(()=>{}),T=pe(null),X=pe(null);ot(()=>{let _=z.current;if(_)return T.current?T.current.setMode(x):T.current=new Ht(_,x),()=>{T.current?.destroy(),T.current=null}},[x]);let V=Le(_=>{let U=X.current?.current;U&&(U.focus(),Nt(U,_))},[]),{completedParams:B,suggestionPills:O,setActivePill:h,segments:Y,newParamId:ee,clearNewParamId:Z,placeholderText:u,isFocused:t,isDropdownOpen:p,isActivePillSelected:m,isLoading:v,activeIndex:g,listboxId:D,handleTextChange:M,handleKeyDown:$,setFocused:ce,editingParam:_e,editingAnchor:ue,caretOffset:o,startEditingParam:A,handleCaretAfterInput:S,handleCaretMove:oe,replaceEditingRange:se,dropdownProps:it,reset:me}=De({onSubmit:_=>G.current(_),onError:i,optionOverrides:r,maskCompletedText:d,apiConfig:s,columns:c,dropdownTrigger:k,optionsPosition:R,closeDropdownOnBlur:P,showNonTappableOptions:w,onFocus:F,onBlur:j,value:n,completedParams:y,onChange:L,onParamsChange:W,source:"full-sdk",setCursor:V});ot(()=>{if(!ee)return;let _=window.setTimeout(()=>Z(),650);return()=>window.clearTimeout(_)},[ee,Z]);let nt=g>=0?`${D}-option-${g}`:void 0,{inputRef:ke,editorProps:rt,focus:ge,blur:Fe,getPlainText:Be}=at({segments:Y,newParamId:ee,editingParam:_e,editingAnchor:ue,caretOffset:o,placeholderText:u,isFocused:t,isDropdownOpen:p,listboxId:D,activeDescendantId:nt,autoFocus:C,handleTextChange:M,handleKeyDown:$,handleCaretAfterInput:S,handleCaretMove:oe,startEditingParam:A,replaceEditingRange:se,setFocused:ce});X.current=ke,Ot(()=>{let _=E.current,U=ke.current;if(!_||!U)return;let he=()=>{let Me=_.firstElementChild;if(!Me)return;let pt=Me.getBoundingClientRect(),ct=U.getBoundingClientRect();pt.top>=ct.bottom-2?_.setAttribute("data-aia-pill-wrapped",""):_.removeAttribute("data-aia-pill-wrapped")};he();let Oe=new ResizeObserver(he);return Oe.observe(U),()=>Oe.disconnect()},[Y,O.length,v,ke]),Bt(Q,()=>({focus:ge,blur:Fe,reset:me,setMode:_=>T.current?.setMode(_)}),[ge,Fe,me]);let fe=!!Y.length||B.length>0,Ie=Le(()=>{if(!fe)return;let _=Be(),{rawQuery:U,completedParams:he}=Mt(_,B);l({query:_.trim(),raw_query:U,completed_params:he}),me()},[fe,B,l,me,Be]);G.current=Ie;let st=Le(_=>{_.target?.closest("[data-aia-pill]")||ge()},[ge]),lt=b==="inline",dt=b==="dropdown";return ze("div",{ref:z,className:`magicx-aia ${te.container} ${a??""}`,"data-pill-placement":b,"data-options-position":R,"data-animations":I?"on":"off","data-mode":Kt(x),children:[re(Ce,{...it,showPills:dt}),ze("div",{className:te.inputWrapper,onClick:st,children:[ze("div",{className:te.editorArea,"data-aia-editor":"",children:[re("div",{...rt,className:te.input,"data-aia-input":""}),lt&&(v||O.length>0)&&re("span",{ref:E,className:te.pillListContainer,"data-aia-pill-list-container":"",children:re(xe,{pills:O,activePillIndex:0,activeSelected:m,onSelectPill:h,loading:v})})]}),f===null?null:f===void 0?re(Ze,{disabled:!fe,onClick:Ie}):re("span",{"data-aia-submit":"",className:te.submitSlot,onClick:_=>{fe&&(_.stopPropagation(),Ie())},children:f})]})]})});export{Wt as AIAutocomplete,Ce as AIAutocompleteDropdown,De as useAIAutocomplete};
|
|
1075
1080
|
//# sourceMappingURL=index.mjs.map
|