@magicx-eng/ai-autocomplete-react 0.6.2 → 0.6.4
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 +103 -69
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +103 -69
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{forwardRef as
|
|
1
|
+
import{forwardRef as Ft,useCallback as Le,useEffect as ot,useImperativeHandle as Bt,useLayoutEffect as Ot,useRef as pe}from"react";if(typeof document<"u"&&!document.getElementById("ac-style-67791514")){let e=document.createElement("style");e.id="ac-style-67791514",e.textContent=`.AIAutocomplete-module_container_KKjFU {
|
|
2
2
|
position: relative;
|
|
3
3
|
/* Inherits the host page's font by default. Consumers can pin a specific
|
|
4
4
|
font on the library via \`--aia-font-family: 'Custom Font'\` without
|
|
@@ -47,24 +47,52 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
47
47
|
vertical-align: middle;
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
-
/* Completed params render as inline
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
50
|
+
/* Completed params render as inline pills (Figma "RichTextPill") \u2014 a compact
|
|
51
|
+
~26px chip with regular-weight primary-color text on a faint-gray fill.
|
|
52
|
+
inline-block gives the padding/radius a box while the text stays part of the
|
|
53
|
+
editable plain text (the caret system counts characters inside this
|
|
54
|
+
<strong>). The completed class is stamped by the shared renderer as a global
|
|
55
|
+
string, so match it via [class~=] to bypass CSS Modules' hashing. */
|
|
56
|
+
:where(.AIAutocomplete-module_input_IW-P-) strong[class~="magicx-aia-segment--completed"] {
|
|
57
|
+
display: inline-block;
|
|
58
|
+
padding: 4px 6px;
|
|
59
|
+
border-radius: 999px;
|
|
60
|
+
background: var(--aia-completed-pill-bg, rgba(189, 189, 189, 0.15));
|
|
61
|
+
color: var(--aia-completed-pill-color, var(--aia-written-text-color, #fff));
|
|
62
|
+
font-size: var(--aia-pill-font-size, 14px);
|
|
63
|
+
font-weight: 400;
|
|
64
|
+
line-height: normal;
|
|
65
|
+
white-space: nowrap;
|
|
66
|
+
/* Small vertical breathing room so wrapped rows of pills don't touch. */
|
|
67
|
+
margin: 2px 0;
|
|
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;
|
|
74
|
+
cursor: pointer;
|
|
75
|
+
/* Smooth hover fade. Neutralized by the data-animations="off" block. */
|
|
76
|
+
transition: background-color 150ms ease;
|
|
55
77
|
}
|
|
56
78
|
|
|
57
|
-
/*
|
|
58
|
-
|
|
59
|
-
|
|
79
|
+
/* Hover highlight \u2014 a slightly stronger fill so a pointed-at pill reads as
|
|
80
|
+
tappable. Declared between the base and editing rules so editing wins. */
|
|
81
|
+
:where(.AIAutocomplete-module_input_IW-P-) strong[class~="magicx-aia-segment--completed"]:hover {
|
|
82
|
+
background: var(--aia-completed-pill-bg-active, rgba(189, 189, 189, 0.35));
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Re-edit highlight \u2014 applied to the completed pill being re-edited (after a
|
|
86
|
+
tap). Reuses the exact hover fill so the highlight persists from tap until an
|
|
87
|
+
option is selected. Hides the native caret; cursor switches to text since the
|
|
88
|
+
pill is in text-replacement mode. The editing class is written by the shared
|
|
89
|
+
renderer (a global string), so target it via an attribute selector to bypass
|
|
90
|
+
CSS Modules' hashing. Declared last so it wins on a strong carrying both
|
|
91
|
+
classes. */
|
|
60
92
|
:where(.AIAutocomplete-module_input_IW-P-) strong[class~="magicx-aia-segment--editing"] {
|
|
61
|
-
background
|
|
62
|
-
border-radius: 6px;
|
|
63
|
-
padding: 2px 3px;
|
|
64
|
-
/* Pull surrounding inline text back so the wider/taller fill doesn't shove
|
|
65
|
-
the rest of the line \u2014 only the visible background grows. */
|
|
66
|
-
margin: 0 -1.5px;
|
|
93
|
+
background: var(--aia-completed-pill-bg-active, rgba(189, 189, 189, 0.35));
|
|
67
94
|
caret-color: transparent;
|
|
95
|
+
cursor: text;
|
|
68
96
|
}
|
|
69
97
|
|
|
70
98
|
/* In re-edit mode the caret is parked just *before* the bold strong (see
|
|
@@ -114,39 +142,23 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
114
142
|
display: contents;
|
|
115
143
|
}
|
|
116
144
|
|
|
117
|
-
/*
|
|
118
|
-
(core/render/renderEditable.ts) stamps the global
|
|
119
|
-
|
|
120
|
-
hashing
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
120deg,
|
|
125
|
-
var(--aia-written-text-color, var(--aia-color-text-default, #fff)) 0%,
|
|
126
|
-
var(--aia-written-text-color, var(--aia-color-text-default, #fff)) 44%,
|
|
127
|
-
#b0b0b0 48%,
|
|
128
|
-
#b0b0b0 52%,
|
|
129
|
-
var(--aia-written-text-color, var(--aia-color-text-default, #fff)) 56%,
|
|
130
|
-
var(--aia-written-text-color, var(--aia-color-text-default, #fff)) 100%
|
|
131
|
-
);
|
|
132
|
-
background-size: 200% 100%;
|
|
133
|
-
-webkit-background-clip: text;
|
|
134
|
-
background-clip: text;
|
|
135
|
-
}
|
|
136
|
-
|
|
145
|
+
/* Promotion reveal on a newly promoted completed param. The shared renderer
|
|
146
|
+
(core/render/renderEditable.ts) stamps the global shimmer classes onto the
|
|
147
|
+
just-added <strong>; we match them via [class~=] to bypass CSS Modules'
|
|
148
|
+
hashing. Completed params are now pills with a solid background, so the old
|
|
149
|
+
text-clip gradient shimmer can't be used (background-clip: text would wipe
|
|
150
|
+
the pill background). The reveal is a simple fade-in of the whole pill,
|
|
151
|
+
riding on shimmer-sweep so it only plays on genuine promotions. */
|
|
137
152
|
:where(.AIAutocomplete-module_input_IW-P-) strong[class~="magicx-aia-shimmer-sweep"] {
|
|
138
|
-
animation: AIAutocomplete-
|
|
153
|
+
animation: AIAutocomplete-module_aiaPillReveal_wf05b 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
139
154
|
}
|
|
140
155
|
|
|
141
|
-
@keyframes AIAutocomplete-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
}
|
|
145
|
-
100% {
|
|
146
|
-
background-position: -50% 0;
|
|
156
|
+
@keyframes AIAutocomplete-module_aiaPillReveal_wf05b {
|
|
157
|
+
from {
|
|
158
|
+
opacity: 0;
|
|
147
159
|
}
|
|
148
160
|
}
|
|
149
|
-
`,document.head.appendChild(e)}var te={container:"AIAutocomplete-module_container_KKjFU",inputWrapper:"AIAutocomplete-module_inputWrapper_FLq1b",editorArea:"AIAutocomplete-module_editorArea_7rBWq",input:"AIAutocomplete-module_input_IW-P-",pillListContainer:"AIAutocomplete-module_pillListContainer_h92IA",submitSlot:"AIAutocomplete-module_submitSlot_GhuCM",
|
|
161
|
+
`,document.head.appendChild(e)}var te={container:"AIAutocomplete-module_container_KKjFU",inputWrapper:"AIAutocomplete-module_inputWrapper_FLq1b",editorArea:"AIAutocomplete-module_editorArea_7rBWq",input:"AIAutocomplete-module_input_IW-P-",pillListContainer:"AIAutocomplete-module_pillListContainer_h92IA",submitSlot:"AIAutocomplete-module_submitSlot_GhuCM",aiaPillReveal:"AIAutocomplete-module_aiaPillReveal_wf05b"};import{useEffect as kt,useRef as It,useState as Pt}from"react";if(typeof document<"u"&&!document.getElementById("ac-style-0ae03977")){let e=document.createElement("style");e.id="ac-style-0ae03977",e.textContent=`/*
|
|
150
162
|
* Built-in appearance defaults \u2014 zero specificity via :where().
|
|
151
163
|
* Consumer CSS always wins without !important.
|
|
152
164
|
*
|
|
@@ -185,6 +197,9 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
185
197
|
--aia-primitive-neutral-1000: #ffffff;
|
|
186
198
|
--aia-primitive-blue-50: #eef2ff;
|
|
187
199
|
--aia-primitive-neutral-750-a50: rgba(189, 189, 189, 0.51);
|
|
200
|
+
--aia-primitive-neutral-750-a35: rgba(189, 189, 189, 0.35);
|
|
201
|
+
--aia-primitive-neutral-750-a30: rgba(189, 189, 189, 0.3);
|
|
202
|
+
--aia-primitive-neutral-750-a15: rgba(189, 189, 189, 0.15);
|
|
188
203
|
--aia-primitive-neutral-700-a40: rgba(176, 176, 176, 0.4);
|
|
189
204
|
}
|
|
190
205
|
|
|
@@ -201,10 +216,21 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
201
216
|
--aia-primitive-neutral-900
|
|
202
217
|
); /* was #e5e7eb \u2014 snapped to palette (\u03942) */
|
|
203
218
|
--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
|
|
204
|
-
|
|
219
|
+
/* Suggestion pills (Figma "ParamPill"): transparent fill + dashed border;
|
|
220
|
+
per-pill opacity via getPillOpacity. */
|
|
221
|
+
--aia-pill-bg: var(--aia-primitive-neutral-750);
|
|
205
222
|
--aia-pill-color: var(--aia-primitive-neutral-300);
|
|
223
|
+
--aia-pill-border: var(--aia-primitive-neutral-750-a30);
|
|
206
224
|
--aia-pill-font-size: 14px;
|
|
207
225
|
|
|
226
|
+
/* Completed params (Figma "RichTextPill"): compact faint-gray chip with
|
|
227
|
+
primary-color regular-weight text. -active is the hover / tapped (re-edit)
|
|
228
|
+
highlight \u2014 an alpha over the input background, so one value works in both
|
|
229
|
+
themes. */
|
|
230
|
+
--aia-completed-pill-bg: var(--aia-primitive-neutral-750-a15);
|
|
231
|
+
--aia-completed-pill-bg-active: var(--aia-primitive-neutral-750-a35);
|
|
232
|
+
--aia-completed-pill-color: var(--aia-primitive-neutral-0);
|
|
233
|
+
|
|
208
234
|
--aia-option-bg: var(--aia-primitive-blue-50);
|
|
209
235
|
--aia-option-color: var(--aia-primitive-neutral-500);
|
|
210
236
|
--aia-option-color-selected: var(--aia-primitive-neutral-0);
|
|
@@ -242,10 +268,18 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
242
268
|
--aia-primitive-neutral-400
|
|
243
269
|
); /* was #484848 \u2014 snapped to palette (\u03942) */
|
|
244
270
|
--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
|
|
271
|
+
/* Suggestion pills (Figma "ParamPill"): transparent fill + dashed border. */
|
|
245
272
|
--aia-pill-bg: var(--aia-primitive-neutral-750);
|
|
246
273
|
--aia-pill-color: var(--aia-primitive-neutral-700);
|
|
274
|
+
--aia-pill-border: var(--aia-primitive-neutral-750-a30);
|
|
247
275
|
--aia-pill-font-size: 14px;
|
|
248
276
|
|
|
277
|
+
/* Completed params (Figma "RichTextPill") \u2014 dark theme (design source):
|
|
278
|
+
white text on a faint-gray chip. -active is the hover / tapped highlight. */
|
|
279
|
+
--aia-completed-pill-bg: var(--aia-primitive-neutral-750-a15);
|
|
280
|
+
--aia-completed-pill-bg-active: var(--aia-primitive-neutral-750-a35);
|
|
281
|
+
--aia-completed-pill-color: var(--aia-primitive-neutral-1000);
|
|
282
|
+
|
|
249
283
|
--aia-option-bg: var(--aia-primitive-neutral-250);
|
|
250
284
|
--aia-option-color: var(--aia-primitive-neutral-700);
|
|
251
285
|
--aia-option-color-selected: var(--aia-primitive-neutral-1000);
|
|
@@ -396,7 +430,7 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
396
430
|
opacity: 0.25;
|
|
397
431
|
}
|
|
398
432
|
}
|
|
399
|
-
`,document.head.appendChild(e)}var
|
|
433
|
+
`,document.head.appendChild(e)}var ie={dropdown:"AIAutocompleteDropdown-module_dropdown_yz2KC",visible:"AIAutocompleteDropdown-module_visible_QCoXj",pillBar:"AIAutocompleteDropdown-module_pillBar_pwTXe",skeletonBars:"AIAutocompleteDropdown-module_skeletonBars_HVr9C",skeletonBar:"AIAutocompleteDropdown-module_skeletonBar_O3xIx",aiaSkeletonPulse:"AIAutocompleteDropdown-module_aiaSkeletonPulse_G8W7q"};import{getFooterHint as ut}from"@magicx-eng/ai-autocomplete-vanilla";if(typeof document<"u"&&!document.getElementById("ac-style-5259a217")){let e=document.createElement("style");e.id="ac-style-5259a217",e.textContent=`@layer layout {
|
|
400
434
|
.aia-cluster {
|
|
401
435
|
display: flex;
|
|
402
436
|
flex-wrap: wrap;
|
|
@@ -438,7 +472,7 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
438
472
|
justify-content: space-around;
|
|
439
473
|
}
|
|
440
474
|
}
|
|
441
|
-
`,document.head.appendChild(e)}import{jsx as He}from"react/jsx-runtime";function le({gap:e,align:
|
|
475
|
+
`,document.head.appendChild(e)}import{jsx as He}from"react/jsx-runtime";function le({gap:e,align:l="center",justify:i="start",noWrap:r=!1,inline:d=!1,className:a,children:s,...c}){let b=e?{"--aia-cluster-gap":e}:void 0,x={className:a?`aia-cluster ${a}`:"aia-cluster","data-align":l,"data-justify":i,"data-nowrap":r||void 0,"data-inline":d||void 0,style:b,...c};return d?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
476
|
dropdown's rounded edges. The top inset (--aia-footer-gap) adds breathing
|
|
443
477
|
room above the hint/branding row so the footer doesn't butt against the last
|
|
444
478
|
option row \u2014 additive to the dropdown's 8px section gap. */
|
|
@@ -519,19 +553,17 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
519
553
|
justify-content: flex-end;
|
|
520
554
|
}
|
|
521
555
|
}
|
|
522
|
-
`,document.head.appendChild(e)}var
|
|
556
|
+
`,document.head.appendChild(e)}var q={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 Pe}from"react/jsx-runtime";function Ne({isOptionHighlighted:e=!1,isInputEmpty:l=!1}){let{key:i,hint:r}=ut(e,l);return de("footer",{className:q.footer,"data-aia-footer":"",children:Pe(le,{justify:"between",noWrap:!0,className:q.row,children:[Pe(le,{gap:"5px",className:q.hintGroup,children:[de("kbd",{className:q.key,children:i}),de("span",{className:q.hint,children:r})]}),Pe("a",{className:q.brandLink,href:"https://ai-autocomplete.com",target:"_blank",rel:"noopener noreferrer",children:[de("span",{className:q.brand,children:"AI"}),de("span",{className:q.badge,children:"Autocomplete"})]})]})})}if(typeof document<"u"&&!document.getElementById("ac-style-199d0432")){let e=document.createElement("style");e.id="ac-style-199d0432",e.textContent=`/* ParamPill (Figma "ParamPill") \u2014 unfilled suggestion pill: transparent fill
|
|
557
|
+
with a dashed border. ~28px via 6px padding + 14px text + the 1px border
|
|
558
|
+
(border-box). */
|
|
559
|
+
.ParamPill-module_pill_6Ga7S {
|
|
523
560
|
display: inline-flex;
|
|
524
561
|
align-items: center;
|
|
525
562
|
justify-content: center;
|
|
526
|
-
padding:
|
|
527
|
-
border:
|
|
563
|
+
padding: 6px;
|
|
564
|
+
border: 1px dashed var(--aia-pill-border, rgba(189, 189, 189, 0.3));
|
|
528
565
|
border-radius: 999px;
|
|
529
|
-
background:
|
|
530
|
-
background: color-mix(
|
|
531
|
-
in srgb,
|
|
532
|
-
var(--aia-pill-bg, var(--aia-color-background-supportive, #313255)) 30%,
|
|
533
|
-
transparent
|
|
534
|
-
);
|
|
566
|
+
background: transparent;
|
|
535
567
|
color: var(--aia-pill-color, var(--aia-color-text-muted, #c1c4cb));
|
|
536
568
|
font-family: inherit;
|
|
537
569
|
font-size: var(--aia-pill-font-size, 14px);
|
|
@@ -539,24 +571,26 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
539
571
|
line-height: normal;
|
|
540
572
|
cursor: pointer;
|
|
541
573
|
white-space: nowrap;
|
|
542
|
-
animation:
|
|
574
|
+
animation: ParamPill-module_fadeIn_Ux4eQ 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
543
575
|
}
|
|
544
576
|
|
|
545
|
-
.
|
|
577
|
+
.ParamPill-module_rounded_y7xA9 {
|
|
546
578
|
border-radius: 999px;
|
|
547
579
|
}
|
|
548
580
|
|
|
549
581
|
/* Loading skeleton \u2014 preserves the pill's exact box (same width and height)
|
|
550
|
-
and
|
|
551
|
-
|
|
552
|
-
.
|
|
582
|
+
and hides the text. The base pill is now transparent, so fill the interior
|
|
583
|
+
with the skeleton color (inside the dashed border) and pulse it so it still
|
|
584
|
+
reads as a loading chip. */
|
|
585
|
+
.ParamPill-module_skeleton_57P0T {
|
|
553
586
|
pointer-events: none;
|
|
554
587
|
cursor: default;
|
|
555
588
|
color: transparent;
|
|
556
|
-
|
|
589
|
+
background: var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, 0.51)));
|
|
590
|
+
animation: ParamPill-module_skeletonPulse_xGcUy 1.4s ease-in-out infinite;
|
|
557
591
|
}
|
|
558
592
|
|
|
559
|
-
@keyframes
|
|
593
|
+
@keyframes ParamPill-module_skeletonPulse_xGcUy {
|
|
560
594
|
0%,
|
|
561
595
|
100% {
|
|
562
596
|
filter: brightness(1);
|
|
@@ -566,12 +600,12 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
566
600
|
}
|
|
567
601
|
}
|
|
568
602
|
|
|
569
|
-
@keyframes
|
|
603
|
+
@keyframes ParamPill-module_fadeIn_Ux4eQ {
|
|
570
604
|
from {
|
|
571
605
|
opacity: 0;
|
|
572
606
|
}
|
|
573
607
|
}
|
|
574
|
-
`,document.head.appendChild(e)}var
|
|
608
|
+
`,document.head.appendChild(e)}var J={pill:"ParamPill-module_pill_6Ga7S",fadeIn:"ParamPill-module_fadeIn_Ux4eQ",rounded:"ParamPill-module_rounded_y7xA9",skeleton:"ParamPill-module_skeleton_57P0T",skeletonPulse:"ParamPill-module_skeletonPulse_xGcUy"};import{jsx as mt}from"react/jsx-runtime";var Se={selected:1,first:.7,next:.4,last:.2};function Ke({label:e,state:l,rounded:i,loading:r,onClick:d}){let a=[J.pill,i?J.rounded:"",r?J.skeleton:""].filter(Boolean).join(" ");return mt("button",{type:"button","data-aia-pill":"","data-aia-loading":r?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:a,style:{opacity:Se[l]},onMouseDown:s=>s.preventDefault(),onClick:r?void 0:d,disabled:r,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 {
|
|
575
609
|
position: relative;
|
|
576
610
|
z-index: 1;
|
|
577
611
|
pointer-events: auto;
|
|
@@ -581,7 +615,7 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
581
615
|
align-items: center;
|
|
582
616
|
vertical-align: middle;
|
|
583
617
|
}
|
|
584
|
-
`,document.head.appendChild(e)}var
|
|
618
|
+
`,document.head.appendChild(e)}var Ae={list:"PillList-module_list_qvLqO"};import{jsx as be}from"react/jsx-runtime";var gt=[125,69];function We(e){return e===0?"first":e===1?"next":"last"}function xe({pills:e,activePillIndex:l,onSelectPill:i,activeSelected:r,rounded:d,loading:a}){return a&&e.length===0?be("span",{className:Ae.list,"data-aia-pill-list-loading":"",children:gt.map((s,c)=>be("span",{"data-aia-pill-skeleton":"",className:`${J.pill} ${d?J.rounded:""} ${J.skeleton}`,style:{width:s,opacity:Se[We(c)]}},`skel-${s}`))}):be("span",{className:Ae.list,"data-aia-pill-list-loading":a?"":void 0,children:e.map((s,c)=>{let b=!!r&&c===l;return be(Ke,{label:s.text,state:b?"selected":We(c),selected:b,rounded:d,loading:a,onClick:()=>i(c)},`${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 {
|
|
585
619
|
.aia-grid {
|
|
586
620
|
display: grid;
|
|
587
621
|
grid-template-columns: repeat(
|
|
@@ -640,7 +674,7 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
640
674
|
display: none;
|
|
641
675
|
}
|
|
642
676
|
}
|
|
643
|
-
`,document.head.appendChild(e)}import{jsx as Ge}from"react/jsx-runtime";function
|
|
677
|
+
`,document.head.appendChild(e)}import{jsx as Ge}from"react/jsx-runtime";function Ue({min:e="16rem",max:l,gap:i,scroll:r=!1,maxHeight:d,fade:a=!1,className:s,children:c,...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 F=new ResizeObserver(C);return F.observe(w),()=>{w.removeEventListener("scroll",C),F.disconnect()}},[a]),ht(()=>{let w=x.current;!a||!w||I(w.scrollHeight-w.scrollTop-w.clientHeight>1)},[a,c]);let k={"--aia-grid-min":e};l&&(k["--aia-grid-max"]=l),i&&(k["--aia-grid-gap"]=i),d&&(k["--aia-grid-max-height"]=d);let P=Ge("div",{ref:x,className:!a&&s?`aia-grid ${s}`:"aia-grid","data-scroll":r||void 0,style:k,...a?{}:b,children:c});return a?Ge("div",{className:s?`aia-grid-fade ${s}`:"aia-grid-fade","data-fade":R?"":void 0,...b,children:P}):P}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 {
|
|
644
678
|
position: relative;
|
|
645
679
|
overflow: visible;
|
|
646
680
|
display: flex;
|
|
@@ -990,7 +1024,7 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
990
1024
|
filter: brightness(0.55);
|
|
991
1025
|
}
|
|
992
1026
|
}
|
|
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
|
|
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 {
|
|
994
1028
|
.aia-stack {
|
|
995
1029
|
display: flex;
|
|
996
1030
|
flex-direction: column;
|
|
@@ -1007,7 +1041,7 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
1007
1041
|
}
|
|
1008
1042
|
/* data-align="stretch" is the flex default \u2014 no rule needed. */
|
|
1009
1043
|
}
|
|
1010
|
-
`,document.head.appendChild(e)}import{jsx as _t}from"react/jsx-runtime";function Qe({space:e,align:
|
|
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 {
|
|
1011
1045
|
flex-shrink: 0;
|
|
1012
1046
|
width: 32px;
|
|
1013
1047
|
height: 32px;
|
|
@@ -1042,5 +1076,5 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
1042
1076
|
);
|
|
1043
1077
|
cursor: default;
|
|
1044
1078
|
}
|
|
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};
|
|
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};
|
|
1046
1080
|
//# sourceMappingURL=index.mjs.map
|