@magicx-eng/ai-autocomplete-react 0.5.1 → 0.5.3

package/README.md

@@ -232,7 +232,7 @@ function App() {
 | `maskCompletedText?` | `boolean` | `false` | When `true`, omits completed params' literal text from API requests (for masking PII/sensitive values from the server). |
 | `className?` | `string` | — | CSS class applied to the container. |
 | `columns?` | `number` | `2` | Number of columns in the dropdown grid. |
-| `pillPlacement?` | `"inline" \| "dropdown" \| "hidden"` | `"inline"` | Where to render unfilled pills. `"hidden"` hides pills entirely. |
+| `pillPlacement?` | `"inline" \| "dropdown" \| "hidden"` | `"dropdown"` | Where to render unfilled pills. `"hidden"` hides pills entirely. |
 | `mode?` | `"light" \| "dark" \| "auto"` | `"auto"` | Color mode. `"auto"` follows `prefers-color-scheme`. |
 | `optionsPosition?` | `"above" \| "below"` | `"below"` | Where the dropdown opens relative to the input. |
 | `animations?` | `boolean` | `true` | Enable/disable all SDK animations (streak + shimmer). |

package/dist/index.d.mts

@@ -18,7 +18,7 @@ interface AIAutocompleteProps {
     className?: string;
     apiConfig?: APIConfig;
     columns?: number;
-    /** Where to render unfilled pills. "inline" (default) renders them in the input; "dropdown" renders them above the options grid. */
+    /** Where to render unfilled pills. "dropdown" (default) renders them above the options grid; "inline" renders them in the input. */
     pillPlacement?: "inline" | "dropdown" | "hidden";
     /** Color mode. "auto" listens to prefers-color-scheme. Default: "auto" */
     mode?: AppearanceMode;

package/dist/index.d.ts

@@ -18,7 +18,7 @@ interface AIAutocompleteProps {
     className?: string;
     apiConfig?: APIConfig;
     columns?: number;
-    /** Where to render unfilled pills. "inline" (default) renders them in the input; "dropdown" renders them above the options grid. */
+    /** Where to render unfilled pills. "dropdown" (default) renders them above the options grid; "inline" renders them in the input. */
     pillPlacement?: "inline" | "dropdown" | "hidden";
     /** Color mode. "auto" listens to prefers-color-scheme. Default: "auto" */
     mode?: AppearanceMode;

package/dist/index.js

@@ -566,7 +566,7 @@
     align-content: start;
     justify-content: start;
     padding: var(--aia-grid-scroll-pad, 0);
-    max-height: var(--aia-grid-max-height, 200px);
+    max-height: var(--aia-grid-max-height, 120px);
     overflow-y: auto;
     scrollbar-width: thin;
     scrollbar-color: var(--aia-scrollbar-thumb, rgba(0, 0, 0, 0.3)) transparent;
@@ -592,7 +592,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    height: 50%;
+    height: 30%;
     pointer-events: none;
     opacity: 0;
     transition: opacity 150ms ease-out;
@@ -994,5 +994,5 @@
   opacity: 0.4;
   cursor: default;
 }
-`,document.head.appendChild(e)}var Je={submitButton:"SubmitButton-module_submitButton_otz7H"};var Se=require("react/jsx-runtime");function Ze({disabled:e,onClick:t}){return(0,Se.jsx)("button",{type:"button","data-aia-submit":"",className:Je.submitButton,disabled:e,onClick:o=>{o.stopPropagation(),t()},"aria-label":"Submit",children:(0,Se.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,Se.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var Ye=require("@magicx-eng/ai-autocomplete-vanilla"),k=require("react"),vt={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 Ae({onSubmit:e,onError:t,optionOverrides:o,maskCompletedText:l,apiConfig:a,columns:n=2,dropdownTrigger:d,optionsPosition:c,closeDropdownOnBlur:h,showNonTappableOptions:v,onFocus:B,onBlur:P,value:A,completedParams:C,onChange:w,onParamsChange:R,source:H,setCursor:X}){let s=(0,k.useRef)(null),[y,O]=(0,k.useState)(null),q=(0,k.useRef)(e);q.current=e;let g=(0,k.useRef)(t);g.current=t;let te=(0,k.useRef)(w);te.current=w;let M=(0,k.useRef)(R);M.current=R;let L=(0,k.useRef)(B);L.current=B;let $=(0,k.useRef)(P);$.current=P;let z=(0,k.useRef)(X);z.current=X,(0,k.useEffect)(()=>{if(typeof document>"u")return;let r=new Ye.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:a,optionOverrides:o,maskCompletedText:l,columns:n,dropdownTrigger:d,optionsPosition:c,closeDropdownOnBlur:h,showNonTappableOptions:v,source:H,value:A,completedParams:C,onSubmit:(...E)=>q.current?.(...E),onError:(...E)=>g.current?.(...E),onChange:(...E)=>te.current?.(...E),onParamsChange:(...E)=>M.current?.(...E),onFocus:()=>L.current?.(),onBlur:()=>$.current?.(),setCursor:E=>z.current?.(E)});s.current=r,O(r.getState());let D=r.subscribe(E=>O(E));return()=>{D(),r.destroy(),s.current===r&&(s.current=null)}},[]),(0,k.useEffect)(()=>{A!==void 0&&s.current?.setValue(A)},[A]),(0,k.useEffect)(()=>{C!==void 0&&s.current?.setCompletedParams(C)},[C]);let oe=JSON.stringify(a??null),J=(0,k.useRef)(o),N=(0,k.useRef)(0);if(o!==J.current){let r=J.current,D=o,E=Object.keys(r??{}),de=Object.keys(D??{});(E.length!==de.length||de.some(ge=>!r?.[ge]||D[ge]!==r[ge]))&&N.current++,J.current=o}(0,k.useEffect)(()=>{s.current?.update({apiConfig:a,optionOverrides:o,dropdownTrigger:d,optionsPosition:c,closeDropdownOnBlur:h,showNonTappableOptions:v})},[oe,N.current,d,c,h,v]);let K=(0,k.useRef)(null);K.current===null&&(K.current={handleTextChange:r=>s.current?.handleTextChange(r),handleKeyDown:r=>{let D="nativeEvent"in r?r.nativeEvent:r;s.current?.handleKeyDown(D)},setFocused:r=>s.current?.setFocused(r),startEditingParam:r=>s.current?.startEditingParam(r),exitEditMode:()=>s.current?.exitEditMode(),handleCaretAfterInput:r=>s.current?.handleCaretAfterInput(r),handleCaretMove:r=>s.current?.handleCaretMove(r),replaceEditingRange:r=>s.current?.replaceEditingRange(r)??!1,setActivePill:r=>s.current?.setActivePill(r),removeLastParam:()=>s.current?.removeLastParam(),clearNewParamId:()=>s.current?.clearNewParamId(),reset:()=>s.current?.reset(),selectOption:r=>s.current?.selectOption(r),setActiveDropdownIndex:r=>s.current?.setActiveDropdownIndex(r),handleFocus:()=>s.current?.setFocused(!0),handleBlur:()=>s.current?.setFocused(!1)});let f=K.current,re=(0,k.useCallback)(r=>{let D=r.target.value,de=D.length>0&&!r.nativeEvent?.isComposing&&D[0]!==D[0].toUpperCase()?D[0].toUpperCase()+D.slice(1):D;s.current?.handleTextChange(de)},[]),se=(0,k.useCallback)(r=>{s.current?.handleKeyDown(r.nativeEvent)},[]),ae=s.current,p=y??vt,i=A!==void 0?A:p.text,u=C!==void 0?C:p.completedParams,b=p.actionableSuggestions,I=b[0],x=ae?.listboxId??"",T=p.activeDropdownIndex>=0&&ae?`${x}-option-${p.activeDropdownIndex}`:void 0,W=p.editingParam,Z=W?{type:W.suggestionType,text:W.suggestionPlaceholder,required:!0,options:W.options}:null,be=Z??I,Ce=Z?[Z]:b,xe=!ae||p.isLoading&&!p.editingParam&&!p.inSelectionAnimation;return{completedParams:u,suggestionPills:b,setActivePill:f.setActivePill,removeLastParam:f.removeLastParam,segments:p.segments,newParamId:p.newParamId,clearNewParamId:f.clearNewParamId,suggestions:p.suggestions,activeIndex:p.activeDropdownIndex,isReady:p.isReady,isLoading:xe,isFocused:p.isFocused,isDropdownOpen:p.isDropdownOpen,isActivePillSelected:p.isActivePillSelected,placeholderText:p.placeholderText,listboxId:x,error:p.error,handleTextChange:f.handleTextChange,handleKeyDown:f.handleKeyDown,setFocused:f.setFocused,editingParam:W,editingAnchor:p.editingAnchor,caretOffset:p.caretOffset,startEditingParam:f.startEditingParam,exitEditMode:f.exitEditMode,handleCaretAfterInput:f.handleCaretAfterInput,handleCaretMove:f.handleCaretMove,replaceEditingRange:f.replaceEditingRange,inputProps:{value:i,placeholder:p.placeholderText||void 0,onChange:re,onKeyDown:se,onFocus:f.handleFocus,onBlur:f.handleBlur,role:"combobox","aria-expanded":p.isDropdownOpen,"aria-activedescendant":T,"aria-autocomplete":"list","aria-controls":x},reset:f.reset,dropdownProps:{suggestions:be?[{...be,options:p.filteredOptions}]:[],activeIndex:p.activeDropdownIndex,onSelect:f.selectOption,onHighlight:f.setActiveDropdownIndex,isOpen:p.isDropdownOpen,id:x,pills:Ce,activeSelected:p.isActivePillSelected,onPillClick:f.setActivePill,isLoading:xe,isInputEmpty:i.trim().length===0,optionsPosition:c??"below"}}}var F=require("@magicx-eng/ai-autocomplete-vanilla"),m=require("react"),Pe;function wt(){if(Pe!==void 0)return Pe;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Pe=e.contentEditable==="plaintext-only",Pe}function et(e){let{segments:t,newParamId:o,editingParam:l,editingAnchor:a,caretOffset:n,placeholderText:d,isFocused:c,isDropdownOpen:h,listboxId:v,activeDescendantId:B,autoFocus:P,handleTextChange:A,handleKeyDown:C,handleCaretAfterInput:w,handleCaretMove:R,startEditingParam:H,replaceEditingRange:X,setFocused:s}=e,y=(0,m.useRef)(null),O=(0,m.useRef)(!1),q=(0,m.useRef)(""),g=(0,m.useRef)(""),te=(0,m.useRef)(null),M=(0,m.useRef)(0);te.current=n,(0,m.useEffect)(()=>{if(!P)return;let i=y.current;i&&(document.activeElement===i?s(!0):i.focus())},[P,s]),(0,m.useEffect)(()=>{let i=y.current;if(!i)return;let u=i.ownerDocument??document,b=()=>{let I=u.getSelection();if(!I||I.rangeCount===0||!I.anchorNode||!i.contains(I.anchorNode))return;let x=I.anchorNode,Z=(x.nodeType===Node.ELEMENT_NODE?x:x.parentElement)?.closest('strong[data-seg="completed"][data-param-id]')?.dataset.paramId??null;if(Z&&Z!==l?.id){H(Z);return}performance.now()-M.current<50||R((0,F.getCursorOffset)(i))};return u.addEventListener("selectionchange",b),()=>u.removeEventListener("selectionchange",b)},[l,H,R]),(0,m.useLayoutEffect)(()=>{let i=y.current;i&&(0,F.renderEditableContent)({input:i,segments:t,newParamId:o,editingParamId:l?.id??null,placeholderText:d??"",isFocused:c})},[t,o,l,d,c]),(0,m.useLayoutEffect)(()=>{let i=q.current,u=o??"";if(q.current=u,!u||u===i)return;let b=y.current;if(!b)return;b.focus();let I=te.current??(0,F.plainTextLength)(b);(0,F.setCursorOffset)(b,I)},[o]),(0,m.useLayoutEffect)(()=>{let i=g.current,u=l?.id??"";if(g.current=u,!u||u===i||a==null)return;let b=y.current;b&&(0,F.setCursorOffset)(b,a)},[l,a]);let L=(0,m.useCallback)(()=>{if(O.current)return;let i=y.current;if(!i)return;let u=(0,F.extractPlainText)(i),I=u.length>0&&u[0]!==u[0].toUpperCase()?u[0].toUpperCase()+u.slice(1):u;A(I)},[A]),$=(0,m.useCallback)(()=>{M.current=performance.now(),L();let i=y.current;i&&w((0,F.getCursorOffset)(i))},[L,w]);(0,m.useEffect)(()=>{let i=y.current;if(!i)return;let u=b=>{let I=b,x=I.inputType;if(x==="insertParagraph"||x==="insertLineBreak"||x==="insertFromDrop"){b.preventDefault();return}if(x.startsWith("insert")||x.startsWith("delete")){let T=x.startsWith("delete")?"":I.data??"";X(T)&&b.preventDefault()}};return i.addEventListener("beforeinput",u),()=>i.removeEventListener("beforeinput",u)},[X]);let z=(0,m.useCallback)(()=>{O.current=!0},[]),oe=(0,m.useCallback)(()=>{O.current=!1,L()},[L]),J=(0,m.useCallback)(i=>{i.preventDefault();let u=y.current;if(!u)return;let b=(i.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!b)return;let I=u.ownerDocument??document,x=I.getSelection();if(!x||x.rangeCount===0)return;let T=x.getRangeAt(0);if(!u.contains(T.startContainer))return;T.deleteContents();let W=I.createTextNode(b);T.insertNode(W),T.setStartAfter(W),T.collapse(!0),x.removeAllRanges(),x.addRange(T),L()},[L]),N=(0,m.useCallback)(i=>C(i),[C]),K=(0,m.useCallback)(()=>s(!0),[s]),f=(0,m.useCallback)(()=>s(!1),[s]),re=(0,m.useCallback)(()=>y.current?.focus(),[]),se=(0,m.useCallback)(()=>y.current?.blur(),[]),ae=(0,m.useCallback)(()=>{let i=y.current;return i?(0,F.extractPlainText)(i):""},[]),p=wt()?"plaintext-only":"true";return{inputRef:y,editorProps:{ref:y,contentEditable:p,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":v,"aria-expanded":h,"aria-activedescendant":B,spellCheck:!0,enterKeyHint:"send",onInput:$,onKeyDown:N,onCompositionStart:z,onCompositionEnd:oe,onPaste:J,onFocus:K,onBlur:f},getPlainText:ae,focus:re,blur:se}}var V=require("react/jsx-runtime");function yt(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var tt=(0,S.forwardRef)(function({onSubmit:t,onError:o,optionOverrides:l,maskCompletedText:a,className:n,apiConfig:d,columns:c,pillPlacement:h="inline",mode:v="auto",optionsPosition:B="below",animations:P=!0,dropdownTrigger:A,closeDropdownOnBlur:C,showNonTappableOptions:w,autoFocus:R=!0,onFocus:H,onBlur:X,value:s,completedParams:y,onChange:O,onParamsChange:q,submitButton:g},te){let M=(0,S.useRef)(null),L=(0,S.useRef)(null),$=(0,S.useRef)(()=>{}),z=(0,S.useRef)(null),oe=(0,S.useRef)(null);(0,S.useEffect)(()=>{let _=M.current;if(_)return z.current?z.current.setMode(v):z.current=new me.ModeController(_,v),()=>{z.current?.destroy(),z.current=null}},[v]);let J=(0,S.useCallback)(_=>{let U=oe.current?.current;U&&(U.focus(),(0,me.setCursorOffset)(U,_))},[]),{completedParams:N,suggestionPills:K,setActivePill:f,segments:re,newParamId:se,clearNewParamId:ae,placeholderText:p,isFocused:i,isDropdownOpen:u,isActivePillSelected:b,isLoading:I,activeIndex:x,listboxId:T,handleTextChange:W,handleKeyDown:Z,setFocused:be,editingParam:Ce,editingAnchor:xe,caretOffset:r,startEditingParam:D,handleCaretAfterInput:E,handleCaretMove:de,replaceEditingRange:ge,dropdownProps:ot,reset:ve}=Ae({onSubmit:_=>$.current(_),onError:o,optionOverrides:l,maskCompletedText:a,apiConfig:d,columns:c,dropdownTrigger:A,optionsPosition:B,closeDropdownOnBlur:C,showNonTappableOptions:w,onFocus:H,onBlur:X,value:s,completedParams:y,onChange:O,onParamsChange:q,source:"full-sdk",setCursor:J});(0,S.useEffect)(()=>{if(!se)return;let _=window.setTimeout(()=>ae(),650);return()=>window.clearTimeout(_)},[se,ae]);let at=x>=0?`${T}-option-${x}`:void 0,{inputRef:Ee,editorProps:nt,focus:we,blur:Oe,getPlainText:Me}=et({segments:re,newParamId:se,editingParam:Ce,editingAnchor:xe,caretOffset:r,placeholderText:p,isFocused:i,isDropdownOpen:u,listboxId:T,activeDescendantId:at,autoFocus:R,handleTextChange:W,handleKeyDown:Z,handleCaretAfterInput:E,handleCaretMove:de,startEditingParam:D,replaceEditingRange:ge,setFocused:be});oe.current=Ee,(0,S.useLayoutEffect)(()=>{let _=L.current,U=Ee.current;if(!_||!U)return;let _e=()=>{let Ne=_.firstElementChild;if(!Ne)return;let lt=Ne.getBoundingClientRect(),dt=U.getBoundingClientRect();lt.top>=dt.bottom-2?_.setAttribute("data-aia-pill-wrapped",""):_.removeAttribute("data-aia-pill-wrapped")};_e();let He=new ResizeObserver(_e);return He.observe(U),()=>He.disconnect()},[re,K.length,I,Ee]),(0,S.useImperativeHandle)(te,()=>({focus:we,blur:Oe,reset:ve,setMode:_=>z.current?.setMode(_)}),[we,Oe,ve]);let ye=!!re.length||N.length>0,De=(0,S.useCallback)(()=>{if(!ye)return;let _=Me(),{rawQuery:U,completedParams:_e}=(0,me.buildQuery)(_,N);t({query:_.trim(),raw_query:U,completed_params:_e}),ve()},[ye,N,t,ve,Me]);$.current=De;let it=(0,S.useCallback)(_=>{_.target?.closest("[data-aia-pill]")||we()},[we]),rt=h==="inline",st=h==="dropdown";return(0,V.jsxs)("div",{ref:M,className:`magicx-aia ${le.container} ${n??""}`,"data-pill-placement":h,"data-options-position":B,"data-animations":P?"on":"off","data-mode":yt(v),children:[(0,V.jsx)(Ie,{...ot,showPills:st}),(0,V.jsxs)("div",{className:le.inputWrapper,onClick:it,children:[(0,V.jsxs)("div",{className:le.editorArea,"data-aia-editor":"",children:[(0,V.jsx)("div",{...nt,className:le.input,"data-aia-input":""}),rt&&(I||K.length>0)&&(0,V.jsx)("span",{ref:L,className:le.pillListContainer,"data-aia-pill-list-container":"",children:(0,V.jsx)(ke,{pills:K,activePillIndex:0,activeSelected:b,onSelectPill:f,loading:I})})]}),g===null?null:g===void 0?(0,V.jsx)(Ze,{disabled:!ye,onClick:De}):(0,V.jsx)("span",{"data-aia-submit":"",className:le.submitSlot,onClick:_=>{ye&&(_.stopPropagation(),De())},children:g})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,useAIAutocomplete});
+`,document.head.appendChild(e)}var Je={submitButton:"SubmitButton-module_submitButton_otz7H"};var Se=require("react/jsx-runtime");function Ze({disabled:e,onClick:t}){return(0,Se.jsx)("button",{type:"button","data-aia-submit":"",className:Je.submitButton,disabled:e,onClick:o=>{o.stopPropagation(),t()},"aria-label":"Submit",children:(0,Se.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,Se.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var Ye=require("@magicx-eng/ai-autocomplete-vanilla"),k=require("react"),vt={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 Ae({onSubmit:e,onError:t,optionOverrides:o,maskCompletedText:l,apiConfig:a,columns:n=2,dropdownTrigger:d,optionsPosition:c,closeDropdownOnBlur:h,showNonTappableOptions:v,onFocus:B,onBlur:P,value:A,completedParams:C,onChange:w,onParamsChange:R,source:H,setCursor:X}){let s=(0,k.useRef)(null),[y,O]=(0,k.useState)(null),q=(0,k.useRef)(e);q.current=e;let g=(0,k.useRef)(t);g.current=t;let te=(0,k.useRef)(w);te.current=w;let M=(0,k.useRef)(R);M.current=R;let L=(0,k.useRef)(B);L.current=B;let $=(0,k.useRef)(P);$.current=P;let z=(0,k.useRef)(X);z.current=X,(0,k.useEffect)(()=>{if(typeof document>"u")return;let r=new Ye.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:a,optionOverrides:o,maskCompletedText:l,columns:n,dropdownTrigger:d,optionsPosition:c,closeDropdownOnBlur:h,showNonTappableOptions:v,source:H,value:A,completedParams:C,onSubmit:(...E)=>q.current?.(...E),onError:(...E)=>g.current?.(...E),onChange:(...E)=>te.current?.(...E),onParamsChange:(...E)=>M.current?.(...E),onFocus:()=>L.current?.(),onBlur:()=>$.current?.(),setCursor:E=>z.current?.(E)});s.current=r,O(r.getState());let D=r.subscribe(E=>O(E));return()=>{D(),r.destroy(),s.current===r&&(s.current=null)}},[]),(0,k.useEffect)(()=>{A!==void 0&&s.current?.setValue(A)},[A]),(0,k.useEffect)(()=>{C!==void 0&&s.current?.setCompletedParams(C)},[C]);let oe=JSON.stringify(a??null),J=(0,k.useRef)(o),N=(0,k.useRef)(0);if(o!==J.current){let r=J.current,D=o,E=Object.keys(r??{}),de=Object.keys(D??{});(E.length!==de.length||de.some(ge=>!r?.[ge]||D[ge]!==r[ge]))&&N.current++,J.current=o}(0,k.useEffect)(()=>{s.current?.update({apiConfig:a,optionOverrides:o,dropdownTrigger:d,optionsPosition:c,closeDropdownOnBlur:h,showNonTappableOptions:v})},[oe,N.current,d,c,h,v]);let K=(0,k.useRef)(null);K.current===null&&(K.current={handleTextChange:r=>s.current?.handleTextChange(r),handleKeyDown:r=>{let D="nativeEvent"in r?r.nativeEvent:r;s.current?.handleKeyDown(D)},setFocused:r=>s.current?.setFocused(r),startEditingParam:r=>s.current?.startEditingParam(r),exitEditMode:()=>s.current?.exitEditMode(),handleCaretAfterInput:r=>s.current?.handleCaretAfterInput(r),handleCaretMove:r=>s.current?.handleCaretMove(r),replaceEditingRange:r=>s.current?.replaceEditingRange(r)??!1,setActivePill:r=>s.current?.setActivePill(r),removeLastParam:()=>s.current?.removeLastParam(),clearNewParamId:()=>s.current?.clearNewParamId(),reset:()=>s.current?.reset(),selectOption:r=>s.current?.selectOption(r),setActiveDropdownIndex:r=>s.current?.setActiveDropdownIndex(r),handleFocus:()=>s.current?.setFocused(!0),handleBlur:()=>s.current?.setFocused(!1)});let f=K.current,re=(0,k.useCallback)(r=>{let D=r.target.value,de=D.length>0&&!r.nativeEvent?.isComposing&&D[0]!==D[0].toUpperCase()?D[0].toUpperCase()+D.slice(1):D;s.current?.handleTextChange(de)},[]),se=(0,k.useCallback)(r=>{s.current?.handleKeyDown(r.nativeEvent)},[]),ae=s.current,p=y??vt,i=A!==void 0?A:p.text,u=C!==void 0?C:p.completedParams,b=p.actionableSuggestions,I=b[0],x=ae?.listboxId??"",T=p.activeDropdownIndex>=0&&ae?`${x}-option-${p.activeDropdownIndex}`:void 0,W=p.editingParam,Z=W?{type:W.suggestionType,text:W.suggestionPlaceholder,required:!0,options:W.options}:null,be=Z??I,Ce=Z?[Z]:b,xe=!ae||p.isLoading&&!p.editingParam&&!p.inSelectionAnimation;return{completedParams:u,suggestionPills:b,setActivePill:f.setActivePill,removeLastParam:f.removeLastParam,segments:p.segments,newParamId:p.newParamId,clearNewParamId:f.clearNewParamId,suggestions:p.suggestions,activeIndex:p.activeDropdownIndex,isReady:p.isReady,isLoading:xe,isFocused:p.isFocused,isDropdownOpen:p.isDropdownOpen,isActivePillSelected:p.isActivePillSelected,placeholderText:p.placeholderText,listboxId:x,error:p.error,handleTextChange:f.handleTextChange,handleKeyDown:f.handleKeyDown,setFocused:f.setFocused,editingParam:W,editingAnchor:p.editingAnchor,caretOffset:p.caretOffset,startEditingParam:f.startEditingParam,exitEditMode:f.exitEditMode,handleCaretAfterInput:f.handleCaretAfterInput,handleCaretMove:f.handleCaretMove,replaceEditingRange:f.replaceEditingRange,inputProps:{value:i,placeholder:p.placeholderText||void 0,onChange:re,onKeyDown:se,onFocus:f.handleFocus,onBlur:f.handleBlur,role:"combobox","aria-expanded":p.isDropdownOpen,"aria-activedescendant":T,"aria-autocomplete":"list","aria-controls":x},reset:f.reset,dropdownProps:{suggestions:be?[{...be,options:p.filteredOptions}]:[],activeIndex:p.activeDropdownIndex,onSelect:f.selectOption,onHighlight:f.setActiveDropdownIndex,isOpen:p.isDropdownOpen,id:x,pills:Ce,activeSelected:p.isActivePillSelected,onPillClick:f.setActivePill,isLoading:xe,isInputEmpty:i.trim().length===0,optionsPosition:c??"below"}}}var F=require("@magicx-eng/ai-autocomplete-vanilla"),m=require("react"),Pe;function wt(){if(Pe!==void 0)return Pe;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Pe=e.contentEditable==="plaintext-only",Pe}function et(e){let{segments:t,newParamId:o,editingParam:l,editingAnchor:a,caretOffset:n,placeholderText:d,isFocused:c,isDropdownOpen:h,listboxId:v,activeDescendantId:B,autoFocus:P,handleTextChange:A,handleKeyDown:C,handleCaretAfterInput:w,handleCaretMove:R,startEditingParam:H,replaceEditingRange:X,setFocused:s}=e,y=(0,m.useRef)(null),O=(0,m.useRef)(!1),q=(0,m.useRef)(""),g=(0,m.useRef)(""),te=(0,m.useRef)(null),M=(0,m.useRef)(0);te.current=n,(0,m.useEffect)(()=>{if(!P)return;let i=y.current;i&&(document.activeElement===i?s(!0):i.focus())},[P,s]),(0,m.useEffect)(()=>{let i=y.current;if(!i)return;let u=i.ownerDocument??document,b=()=>{let I=u.getSelection();if(!I||I.rangeCount===0||!I.anchorNode||!i.contains(I.anchorNode))return;let x=I.anchorNode,Z=(x.nodeType===Node.ELEMENT_NODE?x:x.parentElement)?.closest('strong[data-seg="completed"][data-param-id]')?.dataset.paramId??null;if(Z&&Z!==l?.id){H(Z);return}performance.now()-M.current<50||R((0,F.getCursorOffset)(i))};return u.addEventListener("selectionchange",b),()=>u.removeEventListener("selectionchange",b)},[l,H,R]),(0,m.useLayoutEffect)(()=>{let i=y.current;i&&(0,F.renderEditableContent)({input:i,segments:t,newParamId:o,editingParamId:l?.id??null,placeholderText:d??"",isFocused:c})},[t,o,l,d,c]),(0,m.useLayoutEffect)(()=>{let i=q.current,u=o??"";if(q.current=u,!u||u===i)return;let b=y.current;if(!b)return;b.focus();let I=te.current??(0,F.plainTextLength)(b);(0,F.setCursorOffset)(b,I)},[o]),(0,m.useLayoutEffect)(()=>{let i=g.current,u=l?.id??"";if(g.current=u,!u||u===i||a==null)return;let b=y.current;b&&(0,F.setCursorOffset)(b,a)},[l,a]);let L=(0,m.useCallback)(()=>{if(O.current)return;let i=y.current;if(!i)return;let u=(0,F.extractPlainText)(i),I=u.length>0&&u[0]!==u[0].toUpperCase()?u[0].toUpperCase()+u.slice(1):u;A(I)},[A]),$=(0,m.useCallback)(()=>{M.current=performance.now(),L();let i=y.current;i&&w((0,F.getCursorOffset)(i))},[L,w]);(0,m.useEffect)(()=>{let i=y.current;if(!i)return;let u=b=>{let I=b,x=I.inputType;if(x==="insertParagraph"||x==="insertLineBreak"||x==="insertFromDrop"){b.preventDefault();return}if(x.startsWith("insert")||x.startsWith("delete")){let T=x.startsWith("delete")?"":I.data??"";X(T)&&b.preventDefault()}};return i.addEventListener("beforeinput",u),()=>i.removeEventListener("beforeinput",u)},[X]);let z=(0,m.useCallback)(()=>{O.current=!0},[]),oe=(0,m.useCallback)(()=>{O.current=!1,L()},[L]),J=(0,m.useCallback)(i=>{i.preventDefault();let u=y.current;if(!u)return;let b=(i.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!b)return;let I=u.ownerDocument??document,x=I.getSelection();if(!x||x.rangeCount===0)return;let T=x.getRangeAt(0);if(!u.contains(T.startContainer))return;T.deleteContents();let W=I.createTextNode(b);T.insertNode(W),T.setStartAfter(W),T.collapse(!0),x.removeAllRanges(),x.addRange(T),L()},[L]),N=(0,m.useCallback)(i=>C(i),[C]),K=(0,m.useCallback)(()=>s(!0),[s]),f=(0,m.useCallback)(()=>s(!1),[s]),re=(0,m.useCallback)(()=>y.current?.focus(),[]),se=(0,m.useCallback)(()=>y.current?.blur(),[]),ae=(0,m.useCallback)(()=>{let i=y.current;return i?(0,F.extractPlainText)(i):""},[]),p=wt()?"plaintext-only":"true";return{inputRef:y,editorProps:{ref:y,contentEditable:p,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":v,"aria-expanded":h,"aria-activedescendant":B,spellCheck:!0,enterKeyHint:"send",onInput:$,onKeyDown:N,onCompositionStart:z,onCompositionEnd:oe,onPaste:J,onFocus:K,onBlur:f},getPlainText:ae,focus:re,blur:se}}var V=require("react/jsx-runtime");function yt(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var tt=(0,S.forwardRef)(function({onSubmit:t,onError:o,optionOverrides:l,maskCompletedText:a,className:n,apiConfig:d,columns:c,pillPlacement:h="dropdown",mode:v="auto",optionsPosition:B="below",animations:P=!0,dropdownTrigger:A,closeDropdownOnBlur:C,showNonTappableOptions:w,autoFocus:R=!0,onFocus:H,onBlur:X,value:s,completedParams:y,onChange:O,onParamsChange:q,submitButton:g},te){let M=(0,S.useRef)(null),L=(0,S.useRef)(null),$=(0,S.useRef)(()=>{}),z=(0,S.useRef)(null),oe=(0,S.useRef)(null);(0,S.useEffect)(()=>{let _=M.current;if(_)return z.current?z.current.setMode(v):z.current=new me.ModeController(_,v),()=>{z.current?.destroy(),z.current=null}},[v]);let J=(0,S.useCallback)(_=>{let U=oe.current?.current;U&&(U.focus(),(0,me.setCursorOffset)(U,_))},[]),{completedParams:N,suggestionPills:K,setActivePill:f,segments:re,newParamId:se,clearNewParamId:ae,placeholderText:p,isFocused:i,isDropdownOpen:u,isActivePillSelected:b,isLoading:I,activeIndex:x,listboxId:T,handleTextChange:W,handleKeyDown:Z,setFocused:be,editingParam:Ce,editingAnchor:xe,caretOffset:r,startEditingParam:D,handleCaretAfterInput:E,handleCaretMove:de,replaceEditingRange:ge,dropdownProps:ot,reset:ve}=Ae({onSubmit:_=>$.current(_),onError:o,optionOverrides:l,maskCompletedText:a,apiConfig:d,columns:c,dropdownTrigger:A,optionsPosition:B,closeDropdownOnBlur:C,showNonTappableOptions:w,onFocus:H,onBlur:X,value:s,completedParams:y,onChange:O,onParamsChange:q,source:"full-sdk",setCursor:J});(0,S.useEffect)(()=>{if(!se)return;let _=window.setTimeout(()=>ae(),650);return()=>window.clearTimeout(_)},[se,ae]);let at=x>=0?`${T}-option-${x}`:void 0,{inputRef:Ee,editorProps:nt,focus:we,blur:Oe,getPlainText:Me}=et({segments:re,newParamId:se,editingParam:Ce,editingAnchor:xe,caretOffset:r,placeholderText:p,isFocused:i,isDropdownOpen:u,listboxId:T,activeDescendantId:at,autoFocus:R,handleTextChange:W,handleKeyDown:Z,handleCaretAfterInput:E,handleCaretMove:de,startEditingParam:D,replaceEditingRange:ge,setFocused:be});oe.current=Ee,(0,S.useLayoutEffect)(()=>{let _=L.current,U=Ee.current;if(!_||!U)return;let _e=()=>{let Ne=_.firstElementChild;if(!Ne)return;let lt=Ne.getBoundingClientRect(),dt=U.getBoundingClientRect();lt.top>=dt.bottom-2?_.setAttribute("data-aia-pill-wrapped",""):_.removeAttribute("data-aia-pill-wrapped")};_e();let He=new ResizeObserver(_e);return He.observe(U),()=>He.disconnect()},[re,K.length,I,Ee]),(0,S.useImperativeHandle)(te,()=>({focus:we,blur:Oe,reset:ve,setMode:_=>z.current?.setMode(_)}),[we,Oe,ve]);let ye=!!re.length||N.length>0,De=(0,S.useCallback)(()=>{if(!ye)return;let _=Me(),{rawQuery:U,completedParams:_e}=(0,me.buildQuery)(_,N);t({query:_.trim(),raw_query:U,completed_params:_e}),ve()},[ye,N,t,ve,Me]);$.current=De;let it=(0,S.useCallback)(_=>{_.target?.closest("[data-aia-pill]")||we()},[we]),rt=h==="inline",st=h==="dropdown";return(0,V.jsxs)("div",{ref:M,className:`magicx-aia ${le.container} ${n??""}`,"data-pill-placement":h,"data-options-position":B,"data-animations":P?"on":"off","data-mode":yt(v),children:[(0,V.jsx)(Ie,{...ot,showPills:st}),(0,V.jsxs)("div",{className:le.inputWrapper,onClick:it,children:[(0,V.jsxs)("div",{className:le.editorArea,"data-aia-editor":"",children:[(0,V.jsx)("div",{...nt,className:le.input,"data-aia-input":""}),rt&&(I||K.length>0)&&(0,V.jsx)("span",{ref:L,className:le.pillListContainer,"data-aia-pill-list-container":"",children:(0,V.jsx)(ke,{pills:K,activePillIndex:0,activeSelected:b,onSelectPill:f,loading:I})})]}),g===null?null:g===void 0?(0,V.jsx)(Ze,{disabled:!ye,onClick:De}):(0,V.jsx)("span",{"data-aia-submit":"",className:le.submitSlot,onClick:_=>{ye&&(_.stopPropagation(),De())},children:g})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,useAIAutocomplete});
 //# sourceMappingURL=index.js.map