@magicx-eng/ai-autocomplete-react 0.5.4 → 0.6.0
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/README.md +8 -2
- package/dist/index.js +41 -35
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +40 -34
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/dist/index.mjs
CHANGED
|
@@ -12,6 +12,7 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
12
12
|
border: 1px solid var(--aia-border, #b0b0b0);
|
|
13
13
|
border-radius: 20px;
|
|
14
14
|
background: var(--aia-surface, #ffffff);
|
|
15
|
+
box-shadow: var(--aia-shadow, none);
|
|
15
16
|
overflow: hidden;
|
|
16
17
|
display: flex;
|
|
17
18
|
align-items: center;
|
|
@@ -191,7 +192,11 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
191
192
|
:where(.magicx-aia),
|
|
192
193
|
:where(.magicx-aia[data-mode="light"]) {
|
|
193
194
|
--aia-surface: var(--aia-primitive-neutral-1000);
|
|
194
|
-
--aia-border:
|
|
195
|
+
--aia-border: rgba(17, 24, 39, 0.14); /* subtle slate hairline (off-palette) */
|
|
196
|
+
/* Elevation for the input container (.inputWrapper). */
|
|
197
|
+
--aia-shadow:
|
|
198
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(16, 24, 40, 0.1),
|
|
199
|
+
0 8px 24px rgba(16, 24, 40, 0.16);
|
|
195
200
|
--aia-dropdown-border: var(
|
|
196
201
|
--aia-primitive-neutral-900
|
|
197
202
|
); /* was #e5e7eb \u2014 snapped to palette (\u03942) */
|
|
@@ -219,7 +224,6 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
219
224
|
--aia-streak-rgb: 99, 102, 241; /* off shared palette (indigo effect) */
|
|
220
225
|
--aia-streak-glass-bg: rgba(99, 102, 241, 0.1);
|
|
221
226
|
|
|
222
|
-
--aia-footer-divider: var(--aia-primitive-neutral-700-a40);
|
|
223
227
|
--aia-footer-hint-color: var(--aia-primitive-neutral-500);
|
|
224
228
|
--aia-footer-brand-color: var(--aia-primitive-neutral-700);
|
|
225
229
|
--aia-footer-badge-border: var(--aia-primitive-neutral-750-a50);
|
|
@@ -229,6 +233,11 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
229
233
|
:where(.magicx-aia[data-mode="dark"]) {
|
|
230
234
|
--aia-surface: var(--aia-primitive-neutral-0);
|
|
231
235
|
--aia-border: var(--aia-primitive-neutral-500);
|
|
236
|
+
/* Elevation for the input container (.inputWrapper) \u2014 tuned for dark surfaces:
|
|
237
|
+
a faint top highlight + deeper ambient shadows. */
|
|
238
|
+
--aia-shadow:
|
|
239
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.4),
|
|
240
|
+
0 8px 24px rgba(0, 0, 0, 0.5);
|
|
232
241
|
--aia-dropdown-border: var(
|
|
233
242
|
--aia-primitive-neutral-400
|
|
234
243
|
); /* was #484848 \u2014 snapped to palette (\u03942) */
|
|
@@ -256,7 +265,6 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
256
265
|
--aia-streak-rgb: 255, 255, 255;
|
|
257
266
|
--aia-streak-glass-bg: rgba(255, 255, 255, 0.1);
|
|
258
267
|
|
|
259
|
-
--aia-footer-divider: rgba(255, 255, 255, 0.15); /* off shared palette (no .15 step) */
|
|
260
268
|
--aia-footer-hint-color: var(--aia-primitive-neutral-700);
|
|
261
269
|
--aia-footer-brand-color: var(--aia-primitive-neutral-500);
|
|
262
270
|
--aia-footer-badge-border: var(--aia-primitive-neutral-500);
|
|
@@ -277,7 +285,7 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
277
285
|
top: auto;
|
|
278
286
|
bottom: 100%;
|
|
279
287
|
margin-top: 0;
|
|
280
|
-
margin-bottom:
|
|
288
|
+
margin-bottom: var(--aia-dropdown-offset, 13px);
|
|
281
289
|
}
|
|
282
290
|
|
|
283
291
|
:where(.magicx-aia[data-options-position="above"]) [data-aia-dropdown] .aia-stack,
|
|
@@ -285,15 +293,6 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
285
293
|
flex-direction: column-reverse;
|
|
286
294
|
}
|
|
287
295
|
|
|
288
|
-
/* The footer sits at the top when the dropdown is above, so flip its own
|
|
289
|
-
internal stack too \u2014 the divider should sit BELOW the hint/branding row
|
|
290
|
-
(between the footer and the options beneath it), not above it. The footer's
|
|
291
|
-
own class is CSS-module-scoped, so target the stable data attribute. */
|
|
292
|
-
:where(.magicx-aia[data-options-position="above"]) [data-aia-dropdown] [data-aia-footer],
|
|
293
|
-
[data-aia-dropdown][data-options-position="above"] [data-aia-footer] {
|
|
294
|
-
flex-direction: column-reverse;
|
|
295
|
-
}
|
|
296
|
-
|
|
297
296
|
/* Disable all animations when data-animations="off" */
|
|
298
297
|
:where(.magicx-aia[data-animations="off"]) *,
|
|
299
298
|
:where(.magicx-aia[data-animations="off"]) *::before,
|
|
@@ -307,7 +306,8 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
307
306
|
right: 0;
|
|
308
307
|
top: 100%;
|
|
309
308
|
max-width: 544px;
|
|
310
|
-
|
|
309
|
+
/* Gap between the input box and the dropdown. Tunable via --aia-dropdown-offset. */
|
|
310
|
+
margin-top: var(--aia-dropdown-offset, 13px);
|
|
311
311
|
display: flex;
|
|
312
312
|
flex-direction: column;
|
|
313
313
|
box-sizing: border-box;
|
|
@@ -438,19 +438,15 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
438
438
|
justify-content: space-around;
|
|
439
439
|
}
|
|
440
440
|
}
|
|
441
|
-
`,document.head.appendChild(e)}import{jsx as He}from"react/jsx-runtime";function le({gap:e,align:d="center",justify:n="start",noWrap:
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
441
|
+
`,document.head.appendChild(e)}import{jsx as He}from"react/jsx-runtime";function le({gap:e,align:d="center",justify:n="start",noWrap:m=!1,inline:i=!1,className:a,children:s,...l}){let b=e?{"--aia-cluster-gap":e}:void 0,x={className:a?`aia-cluster ${a}`:"aia-cluster","data-align":d,"data-justify":n,"data-nowrap":m||void 0,"data-inline":i||void 0,style:b,...l};return i?He("span",{...x,children:s}):He("div",{...x,children:s})}if(typeof document<"u"&&!document.getElementById("ac-style-56b0c577")){let e=document.createElement("style");e.id="ac-style-56b0c577",e.textContent=`/* The footer adds its own 8px horizontal inset so it stays clear of the
|
|
442
|
+
dropdown's rounded edges. The top inset (--aia-footer-gap) adds breathing
|
|
443
|
+
room above the hint/branding row so the footer doesn't butt against the last
|
|
444
|
+
option row \u2014 additive to the dropdown's 8px section gap. */
|
|
445
445
|
.DropdownFooter-module_footer_qQQ7x {
|
|
446
446
|
display: flex;
|
|
447
447
|
flex-direction: column;
|
|
448
448
|
gap: 8px;
|
|
449
|
-
padding:
|
|
450
|
-
}
|
|
451
|
-
|
|
452
|
-
.DropdownFooter-module_divider_FlX4C {
|
|
453
|
-
border-top: 1px solid var(--aia-footer-divider, rgba(176, 176, 176, 0.4));
|
|
449
|
+
padding: var(--aia-footer-gap, 8px) 8px 0;
|
|
454
450
|
}
|
|
455
451
|
|
|
456
452
|
.DropdownFooter-module_hintGroup_ZzbPf {
|
|
@@ -513,10 +509,9 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
513
509
|
}
|
|
514
510
|
|
|
515
511
|
/* Mobile footer variant (Figma "Mobile"): on phone-width viewports drop the
|
|
516
|
-
keyboard hint ("tab to select" is meaningless on touch)
|
|
517
|
-
|
|
512
|
+
keyboard hint ("tab to select" is meaningless on touch), leaving only the
|
|
513
|
+
AI-Autocomplete brand pinned to the right. */
|
|
518
514
|
@media (max-width: 768px) {
|
|
519
|
-
.DropdownFooter-module_divider_FlX4C,
|
|
520
515
|
.DropdownFooter-module_hintGroup_ZzbPf {
|
|
521
516
|
display: none;
|
|
522
517
|
}
|
|
@@ -524,7 +519,7 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
524
519
|
justify-content: flex-end;
|
|
525
520
|
}
|
|
526
521
|
}
|
|
527
|
-
`,document.head.appendChild(e)}var
|
|
522
|
+
`,document.head.appendChild(e)}var U={footer:"DropdownFooter-module_footer_qQQ7x",hintGroup:"DropdownFooter-module_hintGroup_ZzbPf",brandLink:"DropdownFooter-module_brandLink_r4f3R",key:"DropdownFooter-module_key_Bz1H-",hint:"DropdownFooter-module_hint_GKEOH",brand:"DropdownFooter-module_brand_Al-lR",badge:"DropdownFooter-module_badge_Fk9vg",row:"DropdownFooter-module_row_BgZ6Q"};import{jsx as de,jsxs as Se}from"react/jsx-runtime";function Ne({isOptionHighlighted:e=!1,isInputEmpty:d=!1}){let{key:n,hint:m}=ut(e,d);return de("footer",{className:U.footer,"data-aia-footer":"",children:Se(le,{justify:"between",noWrap:!0,className:U.row,children:[Se(le,{gap:"5px",className:U.hintGroup,children:[de("kbd",{className:U.key,children:n}),de("span",{className:U.hint,children:m})]}),Se("a",{className:U.brandLink,href:"https://ai-autocomplete.com",target:"_blank",rel:"noopener noreferrer",children:[de("span",{className:U.brand,children:"AI"}),de("span",{className:U.badge,children:"Autocomplete"})]})]})})}if(typeof document<"u"&&!document.getElementById("ac-style-04fef8d6")){let e=document.createElement("style");e.id="ac-style-04fef8d6",e.textContent=`.Pill-module_pill_3Rkw- {
|
|
528
523
|
display: inline-flex;
|
|
529
524
|
align-items: center;
|
|
530
525
|
justify-content: center;
|
|
@@ -576,7 +571,7 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
576
571
|
opacity: 0;
|
|
577
572
|
}
|
|
578
573
|
}
|
|
579
|
-
`,document.head.appendChild(e)}var Q={pill:"Pill-module_pill_3Rkw-",fadeIn:"Pill-module_fadeIn_Bbqtz",rounded:"Pill-module_rounded_6WMps",skeleton:"Pill-module_skeleton_-u9-j",skeletonPulse:"Pill-module_skeletonPulse_xHh-7"};import{jsx as mt}from"react/jsx-runtime";var Ae={selected:1,first:.7,next:.4,last:.2};function
|
|
574
|
+
`,document.head.appendChild(e)}var Q={pill:"Pill-module_pill_3Rkw-",fadeIn:"Pill-module_fadeIn_Bbqtz",rounded:"Pill-module_rounded_6WMps",skeleton:"Pill-module_skeleton_-u9-j",skeletonPulse:"Pill-module_skeletonPulse_xHh-7"};import{jsx as mt}from"react/jsx-runtime";var Ae={selected:1,first:.7,next:.4,last:.2};function We({label:e,state:d,selected:n,rounded:m,loading:i,onClick:a}){let s=[Q.pill,m?Q.rounded:"",n&&!i?Q.active:"",i?Q.skeleton:""].filter(Boolean).join(" ");return mt("button",{type:"button","data-aia-pill":"","data-aia-loading":i?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:s,style:{opacity:Ae[d]},onMouseDown:l=>l.preventDefault(),onClick:i?void 0:a,disabled:i,children:e})}if(typeof document<"u"&&!document.getElementById("ac-style-0fcb7940")){let e=document.createElement("style");e.id="ac-style-0fcb7940",e.textContent=`.PillList-module_list_qvLqO {
|
|
580
575
|
position: relative;
|
|
581
576
|
z-index: 1;
|
|
582
577
|
pointer-events: auto;
|
|
@@ -586,7 +581,7 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
586
581
|
align-items: center;
|
|
587
582
|
vertical-align: middle;
|
|
588
583
|
}
|
|
589
|
-
`,document.head.appendChild(e)}var Pe={list:"PillList-module_list_qvLqO"};import{jsx as
|
|
584
|
+
`,document.head.appendChild(e)}var Pe={list:"PillList-module_list_qvLqO"};import{jsx as be}from"react/jsx-runtime";var gt=[125,69];function Ke(e){return e===0?"first":e===1?"next":"last"}function xe({pills:e,activePillIndex:d,onSelectPill:n,activeSelected:m,rounded:i,loading:a}){return a&&e.length===0?be("span",{className:Pe.list,"data-aia-pill-list-loading":"",children:gt.map((s,l)=>be("span",{"data-aia-pill-skeleton":"",className:`${Q.pill} ${i?Q.rounded:""} ${Q.skeleton}`,style:{width:s,opacity:Ae[Ke(l)]}},`skel-${s}`))}):be("span",{className:Pe.list,"data-aia-pill-list-loading":a?"":void 0,children:e.map((s,l)=>{let b=!!m&&l===d;return be(We,{label:s.text,state:b?"selected":Ke(l),selected:b,rounded:i,loading:a,onClick:()=>n(l)},`${s.type}-${s.text}`)})})}import{useEffect as ft,useLayoutEffect as ht,useRef as bt,useState as xt}from"react";if(typeof document<"u"&&!document.getElementById("ac-style-948e58da")){let e=document.createElement("style");e.id="ac-style-948e58da",e.textContent=`@layer layout {
|
|
590
585
|
.aia-grid {
|
|
591
586
|
display: grid;
|
|
592
587
|
grid-template-columns: repeat(
|
|
@@ -645,7 +640,7 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
645
640
|
display: none;
|
|
646
641
|
}
|
|
647
642
|
}
|
|
648
|
-
`,document.head.appendChild(e)}import{jsx as Ge}from"react/jsx-runtime";function je({min:e="16rem",max:d,gap:n,scroll:
|
|
643
|
+
`,document.head.appendChild(e)}import{jsx as Ge}from"react/jsx-runtime";function je({min:e="16rem",max:d,gap:n,scroll:m=!1,maxHeight:i,fade:a=!1,className:s,children:l,...b}){let x=bt(null),[R,I]=xt(!1);ft(()=>{if(!a)return;let w=x.current;if(!w)return;let C=()=>{I(w.scrollHeight-w.scrollTop-w.clientHeight>1)};w.addEventListener("scroll",C,{passive:!0});let z=new ResizeObserver(C);return z.observe(w),()=>{w.removeEventListener("scroll",C),z.disconnect()}},[a]),ht(()=>{let w=x.current;!a||!w||I(w.scrollHeight-w.scrollTop-w.clientHeight>1)},[a,l]);let k={"--aia-grid-min":e};d&&(k["--aia-grid-max"]=d),n&&(k["--aia-grid-gap"]=n),i&&(k["--aia-grid-max-height"]=i);let S=Ge("div",{ref:x,className:!a&&s?`aia-grid ${s}`:"aia-grid","data-scroll":m||void 0,style:k,...a?{}:b,children:l});return a?Ge("div",{className:s?`aia-grid-fade ${s}`:"aia-grid-fade","data-fade":R?"":void 0,...b,children:S}):S}import{useEffect as vt,useRef as wt,useState as yt}from"react";if(typeof document<"u"&&!document.getElementById("ac-style-82820da7")){let e=document.createElement("style");e.id="ac-style-82820da7",e.textContent=`.SuggestionItem-module_item_d4vpD {
|
|
649
644
|
position: relative;
|
|
650
645
|
overflow: visible;
|
|
651
646
|
display: flex;
|
|
@@ -995,7 +990,7 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
995
990
|
filter: brightness(0.55);
|
|
996
991
|
}
|
|
997
992
|
}
|
|
998
|
-
`,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
|
|
993
|
+
`,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 Ve}from"react/jsx-runtime";function qe({option:e,isHighlighted:d,onSelect:n,onHighlight:m,id:i,loading:a}){let[s,l]=yt(!1),b=wt(void 0);vt(()=>()=>clearTimeout(b.current),[]);let x=()=>{a||!e.is_tappable||s||(l(!0),n(e),clearTimeout(b.current),b.current=setTimeout(()=>l(!1),500))},R=[H.item,d&&!a?H.highlighted:"",e.is_tappable?H.tappable:H.nonTappable,s?H.pressed:""].filter(Boolean).join(" ");return Ve("div",{id:i,role:"option","data-aia-option":"","data-aia-loading":a?"":void 0,"aria-selected":d,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?m:void 0,children:[ve("div",{className:H.streaks}),ve("div",{className:H.streaksVert}),Ve("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 Ue({options:e,activeIndex:d,onSelect:n,onHighlight:m,listboxId:i,loading:a}){return $e(je,{min:"250px",max:"250px",gap:"0",scroll:!0,fade:!0,children:e.map((s,l)=>$e(qe,{option:s,isHighlighted:l===d,onSelect:n,onHighlight:()=>m(l),id:`${i}-option-${l}`,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 {
|
|
999
994
|
.aia-stack {
|
|
1000
995
|
display: flex;
|
|
1001
996
|
flex-direction: column;
|
|
@@ -1012,7 +1007,7 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
1012
1007
|
}
|
|
1013
1008
|
/* data-align="stretch" is the flex default \u2014 no rule needed. */
|
|
1014
1009
|
}
|
|
1015
|
-
`,document.head.appendChild(e)}import{jsx as _t}from"react/jsx-runtime";function Qe({space:e,align:d="stretch",className:n,children:
|
|
1010
|
+
`,document.head.appendChild(e)}import{jsx as _t}from"react/jsx-runtime";function Qe({space:e,align:d="stretch",className:n,children:m,...i}){let a=e?{"--aia-stack-space":e}:void 0;return _t("div",{className:n?`aia-stack ${n}`:"aia-stack","data-align":d,style:a,...i,children:m})}import{jsx as ae,jsxs as Ct}from"react/jsx-runtime";var At=[159,119,164];function Pt(e){let d=()=>typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches,[n,m]=St(d);if(kt(()=>{if(e!=="auto"||typeof window>"u"||typeof window.matchMedia!="function")return;let i=window.matchMedia("(prefers-color-scheme: dark)"),a=()=>m(i.matches);return i.addEventListener("change",a),()=>i.removeEventListener("change",a)},[e]),e!==void 0)return e==="auto"?n?"dark":"light":e}function Ce({suggestions:e,activeIndex:d,onSelect:n,onHighlight:m,isOpen:i,id:a,className:s,pills:l,onPillClick:b,showPills:x=!0,activeSelected:R=!1,isLoading:I=!1,isInputEmpty:k=!1,optionsPosition:S="below",mode:w}){let C=Pt(w),z=C!==void 0,V=e[0]?.options??[],r=!!(l&&l.length>0&&b),y=i&&(V.length>0||x&&r||I),T={suggestions:e,activeIndex:d,pills:l,showPills:x,activeSelected:R,isLoading:I,isInputEmpty:k},K=It(T);y&&(K.current=T);let f=y?T:K.current,B=f.suggestions[0]?.options??[],E=f.activeIndex>=0&&!!B[f.activeIndex]?.is_tappable,G=!!(f.pills&&f.pills.length>0&&b),L=f.showPills&&G,Z=f.showPills&&!G&&f.isLoading,q=L||Z,F=B.length>0,O=f.isLoading&&!F;return ae("div",{id:a,role:"listbox","data-aia-dropdown":"","data-options-position":S,"data-mode":C,"data-aia-loading":f.isLoading?"":void 0,className:`${z?"magicx-aia ":""}${ne.dropdown} ${y?ne.visible:""} ${s??""}`,onMouseDown:h=>h.preventDefault(),children:Ct(Qe,{space:"8px",children:[q&&ae(le,{noWrap:!0,className:ne.pillBar,"data-aia-pillbar":"",children:ae(xe,{pills:f.pills??[],activePillIndex:0,activeSelected:f.activeSelected,onSelectPill:b??(()=>{}),rounded:!0,loading:f.isLoading})}),F&&ae(Ue,{options:B,activeIndex:f.activeIndex,onSelect:n,onHighlight:m,listboxId:a,loading:f.isLoading}),O&&ae("div",{className:ne.skeletonBars,"data-aia-skeleton-bars":"",children:At.map(h=>ae("span",{className:ne.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 {
|
|
1016
1011
|
flex-shrink: 0;
|
|
1017
1012
|
width: 32px;
|
|
1018
1013
|
height: 32px;
|
|
@@ -1032,9 +1027,20 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
1032
1027
|
opacity: 0.85;
|
|
1033
1028
|
}
|
|
1034
1029
|
|
|
1030
|
+
/* Disabled (empty input) keeps the solid themed look by default \u2014 the disabled
|
|
1031
|
+
tokens fall back to the enabled ones, so a consumer's themed color is never
|
|
1032
|
+
washed out. Opt into a faded/dimmed rest state by setting
|
|
1033
|
+
--aia-submit-bg-disabled / --aia-submit-color-disabled. */
|
|
1035
1034
|
.SubmitButton-module_submitButton_otz7H:disabled {
|
|
1036
|
-
|
|
1035
|
+
background: var(
|
|
1036
|
+
--aia-submit-bg-disabled,
|
|
1037
|
+
var(--aia-submit-bg, var(--aia-color-text-default, #fff))
|
|
1038
|
+
);
|
|
1039
|
+
color: var(
|
|
1040
|
+
--aia-submit-color-disabled,
|
|
1041
|
+
var(--aia-submit-color, var(--aia-color-bg-default, #000))
|
|
1042
|
+
);
|
|
1037
1043
|
cursor: default;
|
|
1038
1044
|
}
|
|
1039
|
-
`,document.head.appendChild(e)}var Xe={submitButton:"SubmitButton-module_submitButton_otz7H"};import{jsx as Ee}from"react/jsx-runtime";function Ze({disabled:e,onClick:d}){return Ee("button",{type:"button","data-aia-submit":"",className:Xe.submitButton,disabled:e,onClick:n=>{n.stopPropagation(),d()},"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 ye,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:d,optionOverrides:n,maskCompletedText:c,apiConfig:i,columns:t=2,dropdownTrigger:s,optionsPosition:l,closeDropdownOnBlur:f,showNonTappableOptions:x,onFocus:R,onBlur:I,value:k,completedParams:S,onChange:v,onParamsChange:C,source:z,setCursor:q}){let r=N(null),[w,T]=Dt(null),W=N(e);W.current=e;let m=N(d);m.current=d;let X=N(v);X.current=v;let B=N(C);B.current=C;let E=N(R);E.current=R;let G=N(I);G.current=I;let L=N(q);L.current=q,ye(()=>{if(typeof document>"u")return;let o=new Et(document.createElement("div"),{renderMode:"headless",apiConfig:i,optionOverrides:n,maskCompletedText:c,columns:t,dropdownTrigger:s,optionsPosition:l,closeDropdownOnBlur:f,showNonTappableOptions:x,source:z,value:k,completedParams:S,onSubmit:(...A)=>W.current?.(...A),onError:(...A)=>m.current?.(...A),onChange:(...A)=>X.current?.(...A),onParamsChange:(...A)=>B.current?.(...A),onFocus:()=>E.current?.(),onBlur:()=>G.current?.(),setCursor:A=>L.current?.(A)});r.current=o,T(o.getState());let P=o.subscribe(A=>T(A));return()=>{P(),o.destroy(),r.current===o&&(r.current=null)}},[]),ye(()=>{k!==void 0&&r.current?.setValue(k)},[k]),ye(()=>{S!==void 0&&r.current?.setCompletedParams(S)},[S]);let Z=JSON.stringify(i??null),$=N(n),F=N(0);if(n!==$.current){let o=$.current,P=n,A=Object.keys(o??{}),oe=Object.keys(P??{});(A.length!==oe.length||oe.some(se=>!o?.[se]||P[se]!==o[se]))&&F.current++,$.current=n}ye(()=>{r.current?.update({apiConfig:i,optionOverrides:n,dropdownTrigger:s,optionsPosition:l,closeDropdownOnBlur:f,showNonTappableOptions:x})},[Z,F.current,s,l,f,x]);let O=N(null);O.current===null&&(O.current={handleTextChange:o=>r.current?.handleTextChange(o),handleKeyDown:o=>{let P="nativeEvent"in o?o.nativeEvent:o;r.current?.handleKeyDown(P)},setFocused:o=>r.current?.setFocused(o),startEditingParam:o=>r.current?.startEditingParam(o),exitEditMode:()=>r.current?.exitEditMode(),handleCaretAfterInput:o=>r.current?.handleCaretAfterInput(o),handleCaretMove:o=>r.current?.handleCaretMove(o),replaceEditingRange:o=>r.current?.replaceEditingRange(o)??!1,setActivePill:o=>r.current?.setActivePill(o),removeLastParam:()=>r.current?.removeLastParam(),clearNewParamId:()=>r.current?.clearNewParamId(),reset:()=>r.current?.reset(),selectOption:o=>r.current?.selectOption(o),setActiveDropdownIndex:o=>r.current?.setActiveDropdownIndex(o),handleFocus:()=>r.current?.setFocused(!0),handleBlur:()=>r.current?.setFocused(!1)});let g=O.current,Y=Je(o=>{let P=o.target.value,oe=P.length>0&&!o.nativeEvent?.isComposing&&P[0]!==P[0].toUpperCase()?P[0].toUpperCase()+P.slice(1):P;r.current?.handleTextChange(oe)},[]),ee=Je(o=>{r.current?.handleKeyDown(o.nativeEvent)},[]),J=r.current,p=w??Rt,a=k!==void 0?k:p.text,u=S!==void 0?S:p.completedParams,h=p.actionableSuggestions,_=h[0],b=J?.listboxId??"",D=p.activeDropdownIndex>=0&&J?`${b}-option-${p.activeDropdownIndex}`:void 0,M=p.editingParam,U=M?{type:M.suggestionType,text:M.suggestionPlaceholder,required:!0,options:M.options}:null,ce=U??_,ke=U?[U]:h,ue=!J||p.isLoading&&!p.editingParam&&!p.inSelectionAnimation;return{completedParams:u,suggestionPills:h,setActivePill:g.setActivePill,removeLastParam:g.removeLastParam,segments:p.segments,newParamId:p.newParamId,clearNewParamId:g.clearNewParamId,suggestions:p.suggestions,activeIndex:p.activeDropdownIndex,isReady:p.isReady,isLoading:ue,isFocused:p.isFocused,isDropdownOpen:p.isDropdownOpen,isActivePillSelected:p.isActivePillSelected,placeholderText:p.placeholderText,listboxId:b,error:p.error,handleTextChange:g.handleTextChange,handleKeyDown:g.handleKeyDown,setFocused:g.setFocused,editingParam:M,editingAnchor:p.editingAnchor,caretOffset:p.caretOffset,startEditingParam:g.startEditingParam,exitEditMode:g.exitEditMode,handleCaretAfterInput:g.handleCaretAfterInput,handleCaretMove:g.handleCaretMove,replaceEditingRange:g.replaceEditingRange,inputProps:{value:a,placeholder:p.placeholderText||void 0,onChange:Y,onKeyDown:ee,onFocus:g.handleFocus,onBlur:g.handleBlur,role:"combobox","aria-expanded":p.isDropdownOpen,"aria-activedescendant":D,"aria-autocomplete":"list","aria-controls":b},reset:g.reset,dropdownProps:{suggestions:ce?[{...ce,options:p.filteredOptions}]:[],activeIndex:p.activeDropdownIndex,onSelect:g.selectOption,onHighlight:g.setActiveDropdownIndex,isOpen:p.isDropdownOpen,id:b,pills:ke,activeSelected:p.isActivePillSelected,onPillClick:g.setActivePill,isLoading:ue,isInputEmpty:a.trim().length===0,optionsPosition:l??"below"}}}import{extractPlainText as Ye,getCursorOffset as et,plainTextLength as Lt,renderEditableContent as Tt,setCursorOffset as tt}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as K,useEffect as Re,useLayoutEffect as Le,useRef as ie}from"react";var _e;function Bt(){if(_e!==void 0)return _e;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),_e=e.contentEditable==="plaintext-only",_e}function at(e){let{segments:d,newParamId:n,editingParam:c,editingAnchor:i,caretOffset:t,placeholderText:s,isFocused:l,isDropdownOpen:f,listboxId:x,activeDescendantId:R,autoFocus:I,handleTextChange:k,handleKeyDown:S,handleCaretAfterInput:v,handleCaretMove:C,startEditingParam:z,replaceEditingRange:q,setFocused:r}=e,w=ie(null),T=ie(!1),W=ie(""),m=ie(""),X=ie(null),B=ie(0);X.current=t,Re(()=>{if(!I)return;let a=w.current;a&&(document.activeElement===a?r(!0):a.focus())},[I,r]),Re(()=>{let a=w.current;if(!a)return;let u=a.ownerDocument??document,h=()=>{let _=u.getSelection();if(!_||_.rangeCount===0||!_.anchorNode||!a.contains(_.anchorNode))return;let b=_.anchorNode,U=(b.nodeType===Node.ELEMENT_NODE?b:b.parentElement)?.closest('strong[data-seg="completed"][data-param-id]')?.dataset.paramId??null;if(U&&U!==c?.id){z(U);return}performance.now()-B.current<50||C(et(a))};return u.addEventListener("selectionchange",h),()=>u.removeEventListener("selectionchange",h)},[c,z,C]),Le(()=>{let a=w.current;a&&Tt({input:a,segments:d,newParamId:n,editingParamId:c?.id??null,placeholderText:s??"",isFocused:l})},[d,n,c,s,l]),Le(()=>{let a=W.current,u=n??"";if(W.current=u,!u||u===a)return;let h=w.current;if(!h)return;h.focus();let _=X.current??Lt(h);tt(h,_)},[n]),Le(()=>{let a=m.current,u=c?.id??"";if(m.current=u,!u||u===a||i==null)return;let h=w.current;h&&tt(h,i)},[c,i]);let E=K(()=>{if(T.current)return;let a=w.current;if(!a)return;let u=Ye(a),_=u.length>0&&u[0]!==u[0].toUpperCase()?u[0].toUpperCase()+u.slice(1):u;k(_)},[k]),G=K(()=>{B.current=performance.now(),E();let a=w.current;a&&v(et(a))},[E,v]);Re(()=>{let a=w.current;if(!a)return;let u=h=>{let _=h,b=_.inputType;if(b==="insertParagraph"||b==="insertLineBreak"||b==="insertFromDrop"){h.preventDefault();return}if(b.startsWith("insert")||b.startsWith("delete")){let D=b.startsWith("delete")?"":_.data??"";q(D)&&h.preventDefault()}};return a.addEventListener("beforeinput",u),()=>a.removeEventListener("beforeinput",u)},[q]);let L=K(()=>{T.current=!0},[]),Z=K(()=>{T.current=!1,E()},[E]),$=K(a=>{a.preventDefault();let u=w.current;if(!u)return;let h=(a.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!h)return;let _=u.ownerDocument??document,b=_.getSelection();if(!b||b.rangeCount===0)return;let D=b.getRangeAt(0);if(!u.contains(D.startContainer))return;D.deleteContents();let M=_.createTextNode(h);D.insertNode(M),D.setStartAfter(M),D.collapse(!0),b.removeAllRanges(),b.addRange(D),E()},[E]),F=K(a=>S(a),[S]),O=K(()=>r(!0),[r]),g=K(()=>r(!1),[r]),Y=K(()=>w.current?.focus(),[]),ee=K(()=>w.current?.blur(),[]),J=K(()=>{let a=w.current;return a?Ye(a):""},[]),p=Bt()?"plaintext-only":"true";return{inputRef:w,editorProps:{ref:w,contentEditable:p,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":x,"aria-expanded":f,"aria-activedescendant":R,spellCheck:!0,enterKeyHint:"send",onInput:G,onKeyDown:F,onCompositionStart:L,onCompositionEnd:Z,onPaste:$,onFocus:O,onBlur:g},getPlainText:J,focus:Y,blur:ee}}import{jsx as re,jsxs as Be}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=zt(function({onSubmit:d,onError:n,optionOverrides:c,maskCompletedText:i,className:t,apiConfig:s,columns:l,pillPlacement:f="dropdown",mode:x="auto",optionsPosition:R="below",animations:I=!0,dropdownTrigger:k,closeDropdownOnBlur:S,showNonTappableOptions:v,autoFocus:C=!0,onFocus:z,onBlur:q,value:r,completedParams:w,onChange:T,onParamsChange:W,submitButton:m},X){let B=pe(null),E=pe(null),G=pe(()=>{}),L=pe(null),Z=pe(null);ot(()=>{let y=B.current;if(y)return L.current?L.current.setMode(x):L.current=new Ht(y,x),()=>{L.current?.destroy(),L.current=null}},[x]);let $=Te(y=>{let j=Z.current?.current;j&&(j.focus(),Nt(j,y))},[]),{completedParams:F,suggestionPills:O,setActivePill:g,segments:Y,newParamId:ee,clearNewParamId:J,placeholderText:p,isFocused:a,isDropdownOpen:u,isActivePillSelected:h,isLoading:_,activeIndex:b,listboxId:D,handleTextChange:M,handleKeyDown:U,setFocused:ce,editingParam:ke,editingAnchor:ue,caretOffset:o,startEditingParam:P,handleCaretAfterInput:A,handleCaretMove:oe,replaceEditingRange:se,dropdownProps:nt,reset:me}=De({onSubmit:y=>G.current(y),onError:n,optionOverrides:c,maskCompletedText:i,apiConfig:s,columns:l,dropdownTrigger:k,optionsPosition:R,closeDropdownOnBlur:S,showNonTappableOptions:v,onFocus:z,onBlur:q,value:r,completedParams:w,onChange:T,onParamsChange:W,source:"full-sdk",setCursor:$});ot(()=>{if(!ee)return;let y=window.setTimeout(()=>J(),650);return()=>window.clearTimeout(y)},[ee,J]);let it=b>=0?`${D}-option-${b}`:void 0,{inputRef:Ie,editorProps:rt,focus:ge,blur:ze,getPlainText:Fe}=at({segments:Y,newParamId:ee,editingParam:ke,editingAnchor:ue,caretOffset:o,placeholderText:p,isFocused:a,isDropdownOpen:u,listboxId:D,activeDescendantId:it,autoFocus:C,handleTextChange:M,handleKeyDown:U,handleCaretAfterInput:A,handleCaretMove:oe,startEditingParam:P,replaceEditingRange:se,setFocused:ce});Z.current=Ie,Ot(()=>{let y=E.current,j=Ie.current;if(!y||!j)return;let he=()=>{let Me=y.firstElementChild;if(!Me)return;let pt=Me.getBoundingClientRect(),ct=j.getBoundingClientRect();pt.top>=ct.bottom-2?y.setAttribute("data-aia-pill-wrapped",""):y.removeAttribute("data-aia-pill-wrapped")};he();let Oe=new ResizeObserver(he);return Oe.observe(j),()=>Oe.disconnect()},[Y,O.length,_,Ie]),Ft(X,()=>({focus:ge,blur:ze,reset:me,setMode:y=>L.current?.setMode(y)}),[ge,ze,me]);let fe=!!Y.length||F.length>0,Se=Te(()=>{if(!fe)return;let y=Fe(),{rawQuery:j,completedParams:he}=Mt(y,F);d({query:y.trim(),raw_query:j,completed_params:he}),me()},[fe,F,d,me,Fe]);G.current=Se;let st=Te(y=>{y.target?.closest("[data-aia-pill]")||ge()},[ge]),lt=f==="inline",dt=f==="dropdown";return Be("div",{ref:B,className:`magicx-aia ${te.container} ${t??""}`,"data-pill-placement":f,"data-options-position":R,"data-animations":I?"on":"off","data-mode":Kt(x),children:[re(Ce,{...nt,showPills:dt}),Be("div",{className:te.inputWrapper,onClick:st,children:[Be("div",{className:te.editorArea,"data-aia-editor":"",children:[re("div",{...rt,className:te.input,"data-aia-input":""}),lt&&(_||O.length>0)&&re("span",{ref:E,className:te.pillListContainer,"data-aia-pill-list-container":"",children:re(ve,{pills:O,activePillIndex:0,activeSelected:h,onSelectPill:g,loading:_})})]}),m===null?null:m===void 0?re(Ze,{disabled:!fe,onClick:Se}):re("span",{"data-aia-submit":"",className:te.submitSlot,onClick:y=>{fe&&(y.stopPropagation(),Se())},children:m})]})]})});export{Wt as AIAutocomplete,Ce as AIAutocompleteDropdown,De as useAIAutocomplete};
|
|
1045
|
+
`,document.head.appendChild(e)}var Xe={submitButton:"SubmitButton-module_submitButton_otz7H"};import{jsx as Ee}from"react/jsx-runtime";function Ze({disabled:e,onClick:d}){return Ee("button",{type:"button","data-aia-submit":"",className:Xe.submitButton,disabled:e,onClick:n=>{n.stopPropagation(),d()},"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:d,optionOverrides:n,maskCompletedText:m,apiConfig:i,columns:a=2,dropdownTrigger:s,optionsPosition:l,closeDropdownOnBlur:b,showNonTappableOptions:x,onFocus:R,onBlur:I,value:k,completedParams:S,onChange:w,onParamsChange:C,source:z,setCursor:V}){let r=N(null),[y,T]=Dt(null),K=N(e);K.current=e;let f=N(d);f.current=d;let X=N(w);X.current=w;let B=N(C);B.current=C;let E=N(R);E.current=R;let G=N(I);G.current=I;let L=N(V);L.current=V,we(()=>{if(typeof document>"u")return;let o=new Et(document.createElement("div"),{renderMode:"headless",apiConfig:i,optionOverrides:n,maskCompletedText:m,columns:a,dropdownTrigger:s,optionsPosition:l,closeDropdownOnBlur:b,showNonTappableOptions:x,source:z,value:k,completedParams:S,onSubmit:(...A)=>K.current?.(...A),onError:(...A)=>f.current?.(...A),onChange:(...A)=>X.current?.(...A),onParamsChange:(...A)=>B.current?.(...A),onFocus:()=>E.current?.(),onBlur:()=>G.current?.(),setCursor:A=>L.current?.(A)});r.current=o,T(o.getState());let P=o.subscribe(A=>T(A));return()=>{P(),o.destroy(),r.current===o&&(r.current=null)}},[]),we(()=>{k!==void 0&&r.current?.setValue(k)},[k]),we(()=>{S!==void 0&&r.current?.setCompletedParams(S)},[S]);let Z=JSON.stringify(i??null),q=N(n),F=N(0);if(n!==q.current){let o=q.current,P=n,A=Object.keys(o??{}),oe=Object.keys(P??{});(A.length!==oe.length||oe.some(se=>!o?.[se]||P[se]!==o[se]))&&F.current++,q.current=n}we(()=>{r.current?.update({apiConfig:i,optionOverrides:n,dropdownTrigger:s,optionsPosition:l,closeDropdownOnBlur:b,showNonTappableOptions:x})},[Z,F.current,s,l,b,x]);let O=N(null);O.current===null&&(O.current={handleTextChange:o=>r.current?.handleTextChange(o),handleKeyDown:o=>{let P="nativeEvent"in o?o.nativeEvent:o;r.current?.handleKeyDown(P)},setFocused:o=>r.current?.setFocused(o),startEditingParam:o=>r.current?.startEditingParam(o),exitEditMode:()=>r.current?.exitEditMode(),handleCaretAfterInput:o=>r.current?.handleCaretAfterInput(o),handleCaretMove:o=>r.current?.handleCaretMove(o),replaceEditingRange:o=>r.current?.replaceEditingRange(o)??!1,setActivePill:o=>r.current?.setActivePill(o),removeLastParam:()=>r.current?.removeLastParam(),clearNewParamId:()=>r.current?.clearNewParamId(),reset:()=>r.current?.reset(),selectOption:o=>r.current?.selectOption(o),setActiveDropdownIndex:o=>r.current?.setActiveDropdownIndex(o),handleFocus:()=>r.current?.setFocused(!0),handleBlur:()=>r.current?.setFocused(!1)});let h=O.current,Y=Je(o=>{let P=o.target.value,oe=P.length>0&&!o.nativeEvent?.isComposing&&P[0]!==P[0].toUpperCase()?P[0].toUpperCase()+P.slice(1):P;r.current?.handleTextChange(oe)},[]),ee=Je(o=>{r.current?.handleKeyDown(o.nativeEvent)},[]),J=r.current,c=y??Rt,t=k!==void 0?k:c.text,p=S!==void 0?S:c.completedParams,u=c.actionableSuggestions,v=u[0],g=J?.listboxId??"",D=c.activeDropdownIndex>=0&&J?`${g}-option-${c.activeDropdownIndex}`:void 0,M=c.editingParam,$=M?{type:M.suggestionType,text:M.suggestionPlaceholder,required:!0,options:M.options}:null,ce=$??v,_e=$?[$]:u,ue=!J||c.isLoading&&!c.editingParam&&!c.inSelectionAnimation;return{completedParams:p,suggestionPills:u,setActivePill:h.setActivePill,removeLastParam:h.removeLastParam,segments:c.segments,newParamId:c.newParamId,clearNewParamId:h.clearNewParamId,suggestions:c.suggestions,activeIndex:c.activeDropdownIndex,isReady:c.isReady,isLoading:ue,isFocused:c.isFocused,isDropdownOpen:c.isDropdownOpen,isActivePillSelected:c.isActivePillSelected,placeholderText:c.placeholderText,listboxId:g,error:c.error,handleTextChange:h.handleTextChange,handleKeyDown:h.handleKeyDown,setFocused:h.setFocused,editingParam:M,editingAnchor:c.editingAnchor,caretOffset:c.caretOffset,startEditingParam:h.startEditingParam,exitEditMode:h.exitEditMode,handleCaretAfterInput:h.handleCaretAfterInput,handleCaretMove:h.handleCaretMove,replaceEditingRange:h.replaceEditingRange,inputProps:{value:t,placeholder:c.placeholderText||void 0,onChange:Y,onKeyDown:ee,onFocus:h.handleFocus,onBlur:h.handleBlur,role:"combobox","aria-expanded":c.isDropdownOpen,"aria-activedescendant":D,"aria-autocomplete":"list","aria-controls":g},reset:h.reset,dropdownProps:{suggestions:ce?[{...ce,options:c.filteredOptions}]:[],activeIndex:c.activeDropdownIndex,onSelect:h.selectOption,onHighlight:h.setActiveDropdownIndex,isOpen:c.isDropdownOpen,id:g,pills:_e,activeSelected:c.isActivePillSelected,onPillClick:h.setActivePill,isLoading:ue,isInputEmpty:t.trim().length===0,optionsPosition:l??"below"}}}import{extractPlainText as Ye,getCursorOffset as et,plainTextLength as Lt,renderEditableContent as Tt,setCursorOffset as tt}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as W,useEffect as Re,useLayoutEffect as Le,useRef as ie}from"react";var ye;function Bt(){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:d,newParamId:n,editingParam:m,editingAnchor:i,caretOffset:a,placeholderText:s,isFocused:l,isDropdownOpen:b,listboxId:x,activeDescendantId:R,autoFocus:I,handleTextChange:k,handleKeyDown:S,handleCaretAfterInput:w,handleCaretMove:C,startEditingParam:z,replaceEditingRange:V,setFocused:r}=e,y=ie(null),T=ie(!1),K=ie(""),f=ie(""),X=ie(null),B=ie(0);X.current=a,Re(()=>{if(!I)return;let t=y.current;if(!t)return;document.activeElement===t?r(!0):t.focus();let p=t.ownerDocument??document,u=p.getSelection(),v=u&&u.rangeCount>0&&t.contains(u.anchorNode);if(u&&!v){let g=p.createRange();g.selectNodeContents(t),g.collapse(!0),u.removeAllRanges(),u.addRange(g)}},[I,r]),Re(()=>{let t=y.current;if(!t)return;let p=t.ownerDocument??document,u=()=>{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($&&$!==m?.id){z($);return}performance.now()-B.current<50||C(et(t))};return p.addEventListener("selectionchange",u),()=>p.removeEventListener("selectionchange",u)},[m,z,C]),Le(()=>{let t=y.current;t&&Tt({input:t,segments:d,newParamId:n,editingParamId:m?.id??null,placeholderText:s??"",isFocused:l})},[d,n,m,s,l]),Le(()=>{let t=K.current,p=n??"";if(K.current=p,!p||p===t)return;let u=y.current;if(!u)return;u.focus();let v=X.current??Lt(u);tt(u,v)},[n]),Le(()=>{let t=f.current,p=m?.id??"";if(f.current=p,!p||p===t||i==null)return;let u=y.current;u&&tt(u,i)},[m,i]);let E=W(()=>{if(T.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=W(()=>{B.current=performance.now(),E();let t=y.current;t&&w(et(t))},[E,w]);Re(()=>{let t=y.current;if(!t)return;let p=u=>{let v=u,g=v.inputType;if(g==="insertParagraph"||g==="insertLineBreak"||g==="insertFromDrop"){u.preventDefault();return}if(g.startsWith("insert")||g.startsWith("delete")){let D=g.startsWith("delete")?"":v.data??"";V(D)&&u.preventDefault()}};return t.addEventListener("beforeinput",p),()=>t.removeEventListener("beforeinput",p)},[V]);let L=W(()=>{T.current=!0},[]),Z=W(()=>{T.current=!1,E()},[E]),q=W(t=>{t.preventDefault();let p=y.current;if(!p)return;let u=(t.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!u)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(u);D.insertNode(M),D.setStartAfter(M),D.collapse(!0),g.removeAllRanges(),g.addRange(D),E()},[E]),F=W(t=>S(t),[S]),O=W(()=>r(!0),[r]),h=W(()=>r(!1),[r]),Y=W(()=>y.current?.focus(),[]),ee=W(()=>y.current?.blur(),[]),J=W(()=>{let t=y.current;return t?Ye(t):""},[]),c=Bt()?"plaintext-only":"true";return{inputRef:y,editorProps:{ref:y,contentEditable:c,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:F,onCompositionStart:L,onCompositionEnd:Z,onPaste:q,onFocus:O,onBlur:h},getPlainText:J,focus:Y,blur:ee}}import{jsx as re,jsxs as Be}from"react/jsx-runtime";function Wt(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var Kt=zt(function({onSubmit:d,onError:n,optionOverrides:m,maskCompletedText:i,className:a,apiConfig:s,columns:l,pillPlacement:b="dropdown",mode:x="auto",optionsPosition:R="below",animations:I=!0,dropdownTrigger:k,closeDropdownOnBlur:S,showNonTappableOptions:w,autoFocus:C=!0,onFocus:z,onBlur:V,value:r,completedParams:y,onChange:T,onParamsChange:K,submitButton:f},X){let B=pe(null),E=pe(null),G=pe(()=>{}),L=pe(null),Z=pe(null);ot(()=>{let _=B.current;if(_)return L.current?L.current.setMode(x):L.current=new Ht(_,x),()=>{L.current?.destroy(),L.current=null}},[x]);let q=Te(_=>{let j=Z.current?.current;j&&(j.focus(),Nt(j,_))},[]),{completedParams:F,suggestionPills:O,setActivePill:h,segments:Y,newParamId:ee,clearNewParamId:J,placeholderText:c,isFocused:t,isDropdownOpen:p,isActivePillSelected:u,isLoading:v,activeIndex:g,listboxId:D,handleTextChange:M,handleKeyDown:$,setFocused:ce,editingParam:_e,editingAnchor:ue,caretOffset:o,startEditingParam:P,handleCaretAfterInput:A,handleCaretMove:oe,replaceEditingRange:se,dropdownProps:nt,reset:me}=De({onSubmit:_=>G.current(_),onError:n,optionOverrides:m,maskCompletedText:i,apiConfig:s,columns:l,dropdownTrigger:k,optionsPosition:R,closeDropdownOnBlur:S,showNonTappableOptions:w,onFocus:z,onBlur:V,value:r,completedParams:y,onChange:T,onParamsChange:K,source:"full-sdk",setCursor:q});ot(()=>{if(!ee)return;let _=window.setTimeout(()=>J(),650);return()=>window.clearTimeout(_)},[ee,J]);let it=g>=0?`${D}-option-${g}`:void 0,{inputRef:ke,editorProps:rt,focus:ge,blur:ze,getPlainText:Fe}=at({segments:Y,newParamId:ee,editingParam:_e,editingAnchor:ue,caretOffset:o,placeholderText:c,isFocused:t,isDropdownOpen:p,listboxId:D,activeDescendantId:it,autoFocus:C,handleTextChange:M,handleKeyDown:$,handleCaretAfterInput:A,handleCaretMove:oe,startEditingParam:P,replaceEditingRange:se,setFocused:ce});Z.current=ke,Ot(()=>{let _=E.current,j=ke.current;if(!_||!j)return;let he=()=>{let Me=_.firstElementChild;if(!Me)return;let pt=Me.getBoundingClientRect(),ct=j.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(j),()=>Oe.disconnect()},[Y,O.length,v,ke]),Ft(X,()=>({focus:ge,blur:ze,reset:me,setMode:_=>L.current?.setMode(_)}),[ge,ze,me]);let fe=!!Y.length||F.length>0,Ie=Te(()=>{if(!fe)return;let _=Fe(),{rawQuery:j,completedParams:he}=Mt(_,F);d({query:_.trim(),raw_query:j,completed_params:he}),me()},[fe,F,d,me,Fe]);G.current=Ie;let st=Te(_=>{_.target?.closest("[data-aia-pill]")||ge()},[ge]),lt=b==="inline",dt=b==="dropdown";return Be("div",{ref:B,className:`magicx-aia ${te.container} ${a??""}`,"data-pill-placement":b,"data-options-position":R,"data-animations":I?"on":"off","data-mode":Wt(x),children:[re(Ce,{...nt,showPills:dt}),Be("div",{className:te.inputWrapper,onClick:st,children:[Be("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:u,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{Kt as AIAutocomplete,Ce as AIAutocompleteDropdown,De as useAIAutocomplete};
|
|
1040
1046
|
//# sourceMappingURL=index.mjs.map
|