@magicx-eng/ai-autocomplete-react 0.2.1 → 0.3.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/dist/index.d.mts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +281 -129
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +281 -129
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -3
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{forwardRef as
|
|
1
|
+
import{forwardRef as Dt,useCallback as Le,useEffect as at,useImperativeHandle as Rt,useLayoutEffect as Tt,useRef as ce}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
|
|
@@ -8,10 +8,10 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.AIAutocomplete-module_inputWrapper_FLq1b {
|
|
11
|
-
padding: 20px;
|
|
12
|
-
border: 1px solid var(--aia-
|
|
13
|
-
border-radius:
|
|
14
|
-
background:
|
|
11
|
+
padding: 19px 15px 20px 25px;
|
|
12
|
+
border: 1px solid var(--aia-border, #b0b0b0);
|
|
13
|
+
border-radius: 30px;
|
|
14
|
+
background: var(--aia-surface, #ffffff);
|
|
15
15
|
overflow: hidden;
|
|
16
16
|
display: flex;
|
|
17
17
|
align-items: center;
|
|
@@ -109,26 +109,6 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
|
|
|
109
109
|
margin-left: 0;
|
|
110
110
|
}
|
|
111
111
|
|
|
112
|
-
.AIAutocomplete-module_submitButton_sl1Mi {
|
|
113
|
-
flex-shrink: 0;
|
|
114
|
-
width: 36px;
|
|
115
|
-
height: 36px;
|
|
116
|
-
border-radius: 50%;
|
|
117
|
-
border: none;
|
|
118
|
-
background: var(--aia-submit-bg, var(--aia-color-text-default, #fff));
|
|
119
|
-
color: var(--aia-submit-color, var(--aia-color-bg-default, #000));
|
|
120
|
-
cursor: pointer;
|
|
121
|
-
display: flex;
|
|
122
|
-
align-items: center;
|
|
123
|
-
justify-content: center;
|
|
124
|
-
padding: 0;
|
|
125
|
-
transition: opacity 0.2s ease;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.AIAutocomplete-module_submitButton_sl1Mi:hover {
|
|
129
|
-
opacity: 0.85;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
112
|
.AIAutocomplete-module_submitSlot_GhuCM {
|
|
133
113
|
display: contents;
|
|
134
114
|
}
|
|
@@ -165,7 +145,7 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
|
|
|
165
145
|
background-position: -50% 0;
|
|
166
146
|
}
|
|
167
147
|
}
|
|
168
|
-
`,document.head.appendChild(e)}var
|
|
148
|
+
`,document.head.appendChild(e)}var ee={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",textShimmer:"AIAutocomplete-module_textShimmer_eCLdq"};if(typeof document<"u"&&!document.getElementById("ac-style-3819c762")){let e=document.createElement("style");e.id="ac-style-3819c762",e.textContent=`.AIAutocompleteDropdown-module_dropdown_yz2KC {
|
|
169
149
|
position: absolute;
|
|
170
150
|
left: 0;
|
|
171
151
|
right: 0;
|
|
@@ -174,12 +154,24 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
|
|
|
174
154
|
margin-top: 6px;
|
|
175
155
|
display: flex;
|
|
176
156
|
flex-direction: column;
|
|
157
|
+
box-sizing: border-box;
|
|
158
|
+
padding: 15px 0;
|
|
177
159
|
overflow: hidden;
|
|
178
160
|
container-type: inline-size;
|
|
179
161
|
z-index: 10;
|
|
180
162
|
opacity: 0;
|
|
181
163
|
pointer-events: none;
|
|
182
164
|
transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
165
|
+
/* Solid surface is the default (matches the Figma components). Opt into the
|
|
166
|
+
frosted-glass look with data-aia-surface="glass". */
|
|
167
|
+
background: var(--aia-surface, #ffffff);
|
|
168
|
+
border: 1px solid var(--aia-border, #b0b0b0);
|
|
169
|
+
border-radius: 25px;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.AIAutocompleteDropdown-module_dropdown_yz2KC[data-aia-surface="glass"] {
|
|
173
|
+
background: transparent;
|
|
174
|
+
border-color: transparent;
|
|
183
175
|
box-shadow:
|
|
184
176
|
hsla(0, 0%, 100%, 1) -3.2px -3.2px 3.2px -3.2px inset,
|
|
185
177
|
hsla(0, 0%, 100%, 1) 6.4px 6.4px 1.6px -8px inset,
|
|
@@ -192,7 +184,6 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
|
|
|
192
184
|
inset 0 0 30px 5px hsla(0, 0%, 0%, 0.05),
|
|
193
185
|
hsla(0, 0%, 0%, 0.08) 0px 0px 30px 2px;
|
|
194
186
|
backdrop-filter: blur(30px);
|
|
195
|
-
border-radius: 28px;
|
|
196
187
|
}
|
|
197
188
|
|
|
198
189
|
.AIAutocompleteDropdown-module_visible_QCoXj {
|
|
@@ -200,8 +191,10 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
|
|
|
200
191
|
pointer-events: auto;
|
|
201
192
|
}
|
|
202
193
|
|
|
194
|
+
/* The dropdown owns only vertical (15px) padding; each child insets its own
|
|
195
|
+
15px horizontally so option highlights can span the full dropdown width. */
|
|
203
196
|
.AIAutocompleteDropdown-module_pillBar_pwTXe {
|
|
204
|
-
padding:
|
|
197
|
+
padding: 0 15px;
|
|
205
198
|
overflow-x: auto;
|
|
206
199
|
overflow-y: hidden;
|
|
207
200
|
scrollbar-width: none;
|
|
@@ -218,7 +211,7 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
|
|
|
218
211
|
display: flex;
|
|
219
212
|
flex-direction: column;
|
|
220
213
|
gap: 20px;
|
|
221
|
-
padding:
|
|
214
|
+
padding: 10px 15px;
|
|
222
215
|
}
|
|
223
216
|
|
|
224
217
|
.AIAutocompleteDropdown-module_skeletonBar_O3xIx {
|
|
@@ -247,28 +240,132 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
|
|
|
247
240
|
opacity: 0.25;
|
|
248
241
|
}
|
|
249
242
|
}
|
|
250
|
-
`,document.head.appendChild(e)}var
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
243
|
+
`,document.head.appendChild(e)}var ne={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 pt}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 {
|
|
244
|
+
.aia-cluster {
|
|
245
|
+
display: flex;
|
|
246
|
+
flex-wrap: wrap;
|
|
247
|
+
gap: var(--aia-cluster-gap, 0.5rem);
|
|
248
|
+
}
|
|
249
|
+
/* Inline-level variant \u2014 used when the cluster must sit inline (e.g. inside
|
|
250
|
+
a contentEditable). Rendered on a <span> so it's valid inline content. */
|
|
251
|
+
.aia-cluster[data-inline] {
|
|
252
|
+
display: inline-flex;
|
|
253
|
+
}
|
|
254
|
+
.aia-cluster[data-nowrap] {
|
|
255
|
+
flex-wrap: nowrap;
|
|
256
|
+
}
|
|
257
|
+
.aia-cluster[data-align="start"] {
|
|
258
|
+
align-items: start;
|
|
259
|
+
}
|
|
260
|
+
.aia-cluster[data-align="center"] {
|
|
261
|
+
align-items: center;
|
|
262
|
+
}
|
|
263
|
+
.aia-cluster[data-align="end"] {
|
|
264
|
+
align-items: end;
|
|
265
|
+
}
|
|
266
|
+
.aia-cluster[data-align="baseline"] {
|
|
267
|
+
align-items: baseline;
|
|
268
|
+
}
|
|
269
|
+
.aia-cluster[data-justify="start"] {
|
|
270
|
+
justify-content: start;
|
|
271
|
+
}
|
|
272
|
+
.aia-cluster[data-justify="center"] {
|
|
273
|
+
justify-content: center;
|
|
274
|
+
}
|
|
275
|
+
.aia-cluster[data-justify="end"] {
|
|
276
|
+
justify-content: end;
|
|
277
|
+
}
|
|
278
|
+
.aia-cluster[data-justify="between"] {
|
|
279
|
+
justify-content: space-between;
|
|
280
|
+
}
|
|
281
|
+
.aia-cluster[data-justify="around"] {
|
|
282
|
+
justify-content: space-around;
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
`,document.head.appendChild(e)}import{jsx as Me}from"react/jsx-runtime";function le({gap:e,align:s="center",justify:r="start",noWrap:c=!1,inline:i=!1,className:t,children:l,...u}){let v=e?{"--aia-cluster-gap":e}:void 0,f={className:t?`aia-cluster ${t}`:"aia-cluster","data-align":s,"data-justify":r,"data-nowrap":c||void 0,"data-inline":i||void 0,style:v,...u};return i?Me("span",{...f,children:l}):Me("div",{...f,children:l})}if(typeof document<"u"&&!document.getElementById("ac-style-56b0c577")){let e=document.createElement("style");e.id="ac-style-56b0c577",e.textContent=`/* The footer insets its own 15px horizontally (the dropdown only pads
|
|
286
|
+
vertically), so the divider spans the full footer width yet still stays clear
|
|
287
|
+
of the dropdown's rounded edges. */
|
|
288
|
+
.DropdownFooter-module_footer_qQQ7x {
|
|
289
|
+
display: flex;
|
|
290
|
+
flex-direction: column;
|
|
291
|
+
gap: 12px;
|
|
292
|
+
padding: 0 15px;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
.DropdownFooter-module_divider_FlX4C {
|
|
296
|
+
border-top: 0.5px solid var(--aia-footer-divider, rgba(176, 176, 176, 0.4));
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.DropdownFooter-module_hintGroup_ZzbPf {
|
|
300
|
+
min-width: 0;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.DropdownFooter-module_brandLink_r4f3R {
|
|
254
304
|
display: inline-flex;
|
|
255
|
-
gap: 5px;
|
|
256
305
|
align-items: center;
|
|
257
|
-
|
|
306
|
+
gap: 2px;
|
|
307
|
+
text-decoration: none;
|
|
308
|
+
cursor: pointer;
|
|
309
|
+
transition: opacity 150ms ease-out;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
.DropdownFooter-module_brandLink_r4f3R:hover {
|
|
313
|
+
opacity: 0.7;
|
|
258
314
|
}
|
|
259
315
|
|
|
260
|
-
.
|
|
316
|
+
.DropdownFooter-module_key_Bz1H- {
|
|
261
317
|
display: inline-flex;
|
|
262
318
|
align-items: center;
|
|
263
319
|
justify-content: center;
|
|
264
|
-
|
|
265
|
-
|
|
320
|
+
min-width: 30px;
|
|
321
|
+
height: 22px;
|
|
322
|
+
padding: 2px 6px;
|
|
323
|
+
border: 0.5px solid var(--aia-footer-hint-color, #505050);
|
|
324
|
+
border-radius: 5px;
|
|
325
|
+
font-family: inherit;
|
|
326
|
+
font-size: 12px;
|
|
327
|
+
line-height: 18px;
|
|
328
|
+
color: var(--aia-footer-hint-color, #505050);
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.DropdownFooter-module_hint_GKEOH {
|
|
332
|
+
font-family: inherit;
|
|
333
|
+
font-size: 12px;
|
|
334
|
+
line-height: 18px;
|
|
335
|
+
color: var(--aia-footer-hint-color, #505050);
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
.DropdownFooter-module_brand_Al-lR {
|
|
339
|
+
font-family: inherit;
|
|
340
|
+
font-size: 10px;
|
|
341
|
+
line-height: 18px;
|
|
342
|
+
color: var(--aia-footer-brand-color, #b0b0b0);
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.DropdownFooter-module_badge_Fk9vg {
|
|
346
|
+
display: inline-flex;
|
|
347
|
+
align-items: center;
|
|
348
|
+
height: 23px;
|
|
349
|
+
padding: 2.5px 5.5px;
|
|
350
|
+
border: 0.36px solid var(--aia-footer-badge-border, rgba(189, 189, 189, 0.51));
|
|
351
|
+
border-radius: 999px;
|
|
352
|
+
font-family: inherit;
|
|
353
|
+
font-size: 10px;
|
|
354
|
+
line-height: 18px;
|
|
355
|
+
color: var(--aia-footer-brand-color, #b0b0b0);
|
|
356
|
+
}
|
|
357
|
+
`,document.head.appendChild(e)}var G={footer:"DropdownFooter-module_footer_qQQ7x",divider:"DropdownFooter-module_divider_FlX4C",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"};import{jsx as de,jsxs as be}from"react/jsx-runtime";function Ne({hasTabbedToHighlight:e=!1,isOptionHighlighted:s=!1}){let{key:r,hint:c}=pt(e,s);return be("footer",{className:G.footer,"data-aia-footer":"",children:[de("div",{className:G.divider}),be(le,{justify:"between",noWrap:!0,children:[be(le,{gap:"5px",className:G.hintGroup,children:[de("kbd",{className:G.key,children:r}),de("span",{className:G.hint,children:c})]}),be("a",{className:G.brandLink,href:"https://ai-autocomplete.com",target:"_blank",rel:"noopener noreferrer",children:[de("span",{className:G.brand,children:"AI"}),de("span",{className:G.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- {
|
|
358
|
+
display: inline-flex;
|
|
359
|
+
align-items: center;
|
|
360
|
+
justify-content: center;
|
|
361
|
+
height: 38px;
|
|
362
|
+
padding: 10px 12px;
|
|
266
363
|
border: none;
|
|
267
364
|
border-radius: 999px;
|
|
268
365
|
background: rgba(49, 50, 85, 0.25);
|
|
269
366
|
background: color-mix(
|
|
270
367
|
in srgb,
|
|
271
|
-
var(--aia-pill-bg, var(--aia-color-background-supportive, #313255))
|
|
368
|
+
var(--aia-pill-bg, var(--aia-color-background-supportive, #313255)) 30%,
|
|
272
369
|
transparent
|
|
273
370
|
);
|
|
274
371
|
color: var(--aia-pill-color, var(--aia-color-text-muted, #c1c4cb));
|
|
@@ -277,36 +374,24 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
|
|
|
277
374
|
line-height: 30px;
|
|
278
375
|
cursor: pointer;
|
|
279
376
|
white-space: nowrap;
|
|
280
|
-
animation:
|
|
281
|
-
box-shadow:
|
|
282
|
-
hsla(0, 0%, 100%, 1) -3.2px -3.2px 3.2px -3.2px inset,
|
|
283
|
-
hsla(0, 0%, 100%, 1) 6.4px 6.4px 1.6px -8px inset,
|
|
284
|
-
var(--aia-dropdown-bg, transparent) -6.4px 6.4px 1.6px -8px inset,
|
|
285
|
-
var(--aia-dropdown-bg, transparent) 6.4px -6.4px 1.6px -8px inset,
|
|
286
|
-
hsla(0, 0%, 100%, 0.15) -1.6px 0px 0px -1.6px inset,
|
|
287
|
-
hsla(0, 0%, 100%, 0.15) 0px -1.6px 0px -1.6px inset,
|
|
288
|
-
hsla(0, 0%, 100%, 0.3) 0px 1.6px 0px 0px inset,
|
|
289
|
-
hsla(0, 0%, 100%, 0.3) 1.6px 0px 0px 0px inset,
|
|
290
|
-
inset 0 0 30px 5px hsla(0, 0%, 0%, 0.05),
|
|
291
|
-
hsla(0, 0%, 0%, 0.08) 0px 0px 30px 2px;
|
|
292
|
-
backdrop-filter: blur(30px);
|
|
377
|
+
animation: Pill-module_fadeIn_Bbqtz 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
293
378
|
}
|
|
294
379
|
|
|
295
|
-
.
|
|
380
|
+
.Pill-module_rounded_6WMps {
|
|
296
381
|
border-radius: 999px;
|
|
297
382
|
}
|
|
298
383
|
|
|
299
384
|
/* Loading skeleton \u2014 preserves the pill's exact box (same width and height)
|
|
300
385
|
and just hides the text. The pill's native background acts as the visible
|
|
301
386
|
shape; the pulse provides the shimmer. */
|
|
302
|
-
.
|
|
387
|
+
.Pill-module_skeleton_-u9-j {
|
|
303
388
|
pointer-events: none;
|
|
304
389
|
cursor: default;
|
|
305
390
|
color: transparent;
|
|
306
|
-
animation:
|
|
391
|
+
animation: Pill-module_skeletonPulse_xHh-7 1.4s ease-in-out infinite;
|
|
307
392
|
}
|
|
308
393
|
|
|
309
|
-
@keyframes
|
|
394
|
+
@keyframes Pill-module_skeletonPulse_xHh-7 {
|
|
310
395
|
0%,
|
|
311
396
|
100% {
|
|
312
397
|
filter: brightness(1);
|
|
@@ -316,75 +401,75 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
|
|
|
316
401
|
}
|
|
317
402
|
}
|
|
318
403
|
|
|
319
|
-
|
|
320
|
-
filter: brightness(1.2);
|
|
321
|
-
}
|
|
322
|
-
|
|
323
|
-
.PillList-module_active_Oll-- {
|
|
324
|
-
outline: 1px solid #5a5b8a;
|
|
325
|
-
}
|
|
326
|
-
|
|
327
|
-
@keyframes PillList-module_fadeIn_Aezob {
|
|
404
|
+
@keyframes Pill-module_fadeIn_Bbqtz {
|
|
328
405
|
from {
|
|
329
406
|
opacity: 0;
|
|
330
407
|
}
|
|
331
408
|
}
|
|
332
|
-
`,document.head.appendChild(e)}var
|
|
409
|
+
`,document.head.appendChild(e)}var j={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 ut}from"react/jsx-runtime";var Ae={active:1,upcoming:.4,disabled:.2};function Ke({label:e,state:s,selected:r,rounded:c,loading:i,onClick:t}){let l=[j.pill,c?j.rounded:"",r&&!i?j.active:"",i?j.skeleton:""].filter(Boolean).join(" ");return ut("button",{type:"button","data-aia-pill":"","data-aia-loading":i?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:l,style:{opacity:Ae[s]},onMouseDown:u=>u.preventDefault(),onClick:i?void 0:t,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 {
|
|
333
410
|
position: relative;
|
|
411
|
+
z-index: 1;
|
|
412
|
+
pointer-events: auto;
|
|
413
|
+
display: inline-flex;
|
|
414
|
+
gap: 7px;
|
|
415
|
+
align-items: center;
|
|
416
|
+
vertical-align: middle;
|
|
334
417
|
}
|
|
418
|
+
`,document.head.appendChild(e)}var Ce={list:"PillList-module_list_qvLqO"};import{jsx as xe}from"react/jsx-runtime";var mt=[125,69];function We(e){return e===0?"active":e===1?"upcoming":"disabled"}function ve({pills:e,activePillIndex:s,onSelectPill:r,rounded:c,loading:i}){return i&&e.length===0?xe("span",{className:Ce.list,"data-aia-pill-list-loading":"",children:mt.map((t,l)=>xe("span",{"data-aia-pill-skeleton":"",className:`${j.pill} ${c?j.rounded:""} ${j.skeleton}`,style:{width:t,opacity:Ae[We(l)]}},`skel-${t}`))}):xe("span",{className:Ce.list,"data-aia-pill-list-loading":i?"":void 0,children:e.map((t,l)=>xe(Ke,{label:t.text,state:We(l),selected:l===s,rounded:c,loading:i,onClick:()=>r(l)},`${t.type}-${t.text}`))})}import{useEffect as gt,useLayoutEffect as ft,useRef as ht,useState as bt}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 {
|
|
419
|
+
.aia-grid {
|
|
420
|
+
display: grid;
|
|
421
|
+
grid-template-columns: repeat(
|
|
422
|
+
auto-fit,
|
|
423
|
+
minmax(min(var(--aia-grid-min), 100%), var(--aia-grid-max, 1fr))
|
|
424
|
+
);
|
|
425
|
+
gap: var(--aia-grid-gap, 0);
|
|
426
|
+
}
|
|
335
427
|
|
|
336
|
-
.
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
bottom: 0;
|
|
342
|
-
height: 50%;
|
|
343
|
-
pointer-events: none;
|
|
344
|
-
opacity: 0;
|
|
345
|
-
transition: opacity 150ms ease-out;
|
|
346
|
-
backdrop-filter: blur(12px);
|
|
347
|
-
mask-image: linear-gradient(to bottom, transparent, white);
|
|
348
|
-
}
|
|
349
|
-
|
|
350
|
-
.SuggestionGrid-module_scrollWrapper_MOqfw[data-fade]::after {
|
|
351
|
-
opacity: 1;
|
|
352
|
-
}
|
|
353
|
-
|
|
354
|
-
.SuggestionGrid-module_grid_jvaPb {
|
|
355
|
-
display: grid;
|
|
356
|
-
grid-template-columns: minmax(0, 250px);
|
|
357
|
-
/* Pack rows from the top instead of stretching to fill the grid container. */
|
|
358
|
-
grid-auto-rows: min-content;
|
|
359
|
-
align-content: start;
|
|
360
|
-
max-width: 100cqi;
|
|
361
|
-
padding: 8px 8px;
|
|
362
|
-
max-height: 200px;
|
|
363
|
-
overflow-y: auto;
|
|
364
|
-
scrollbar-width: thin;
|
|
365
|
-
scrollbar-color: var(--aia-scrollbar-thumb, rgba(0, 0, 0, 0.3)) transparent;
|
|
366
|
-
}
|
|
367
|
-
|
|
368
|
-
@container (min-width: 516px) {
|
|
369
|
-
.SuggestionGrid-module_grid_jvaPb {
|
|
370
|
-
grid-template-columns: repeat(2, minmax(0, 250px));
|
|
428
|
+
/* Scrollable variant \u2014 capped height with a styled thin scrollbar. Rows pack
|
|
429
|
+
from the top instead of stretching to fill the container. */
|
|
430
|
+
.aia-grid[data-scroll] {
|
|
431
|
+
grid-auto-rows: min-content;
|
|
432
|
+
align-content: start;
|
|
371
433
|
justify-content: start;
|
|
434
|
+
padding: var(--aia-grid-scroll-pad, 0);
|
|
435
|
+
max-height: var(--aia-grid-max-height, 200px);
|
|
436
|
+
overflow-y: auto;
|
|
437
|
+
scrollbar-width: thin;
|
|
438
|
+
scrollbar-color: var(--aia-scrollbar-thumb, rgba(0, 0, 0, 0.3)) transparent;
|
|
439
|
+
}
|
|
440
|
+
.aia-grid[data-scroll]::-webkit-scrollbar {
|
|
441
|
+
width: 6px;
|
|
442
|
+
}
|
|
443
|
+
.aia-grid[data-scroll]::-webkit-scrollbar-track {
|
|
444
|
+
background: transparent;
|
|
445
|
+
}
|
|
446
|
+
.aia-grid[data-scroll]::-webkit-scrollbar-thumb {
|
|
447
|
+
background: var(--aia-scrollbar-thumb, rgba(0, 0, 0, 0.3));
|
|
448
|
+
border-radius: 3px;
|
|
372
449
|
}
|
|
373
|
-
}
|
|
374
|
-
|
|
375
|
-
.SuggestionGrid-module_grid_jvaPb::-webkit-scrollbar {
|
|
376
|
-
width: 6px;
|
|
377
|
-
}
|
|
378
|
-
|
|
379
|
-
.SuggestionGrid-module_grid_jvaPb::-webkit-scrollbar-track {
|
|
380
|
-
background: transparent;
|
|
381
|
-
}
|
|
382
450
|
|
|
383
|
-
.
|
|
384
|
-
|
|
385
|
-
|
|
451
|
+
/* Fade wrapper \u2014 bottom blur overlay shown while the grid overflows below. */
|
|
452
|
+
.aia-grid-fade {
|
|
453
|
+
position: relative;
|
|
454
|
+
}
|
|
455
|
+
.aia-grid-fade::after {
|
|
456
|
+
content: "";
|
|
457
|
+
position: absolute;
|
|
458
|
+
left: 0;
|
|
459
|
+
right: 0;
|
|
460
|
+
bottom: 0;
|
|
461
|
+
height: 50%;
|
|
462
|
+
pointer-events: none;
|
|
463
|
+
opacity: 0;
|
|
464
|
+
transition: opacity 150ms ease-out;
|
|
465
|
+
backdrop-filter: blur(12px);
|
|
466
|
+
mask-image: linear-gradient(to bottom, transparent, white);
|
|
467
|
+
}
|
|
468
|
+
.aia-grid-fade[data-fade]::after {
|
|
469
|
+
opacity: 1;
|
|
470
|
+
}
|
|
386
471
|
}
|
|
387
|
-
`,document.head.appendChild(e)}
|
|
472
|
+
`,document.head.appendChild(e)}import{jsx as Ge}from"react/jsx-runtime";function je({min:e="16rem",max:s,gap:r,scroll:c=!1,maxHeight:i,fade:t=!1,className:l,children:u,...v}){let f=ht(null),[_,S]=bt(!1);gt(()=>{if(!t)return;let h=f.current;if(!h)return;let P=()=>{S(h.scrollHeight-h.scrollTop-h.clientHeight>1)};h.addEventListener("scroll",P,{passive:!0});let R=new ResizeObserver(P);return R.observe(h),()=>{h.removeEventListener("scroll",P),R.disconnect()}},[t]),ft(()=>{let h=f.current;!t||!h||S(h.scrollHeight-h.scrollTop-h.clientHeight>1)},[t,u]);let I={"--aia-grid-min":e};s&&(I["--aia-grid-max"]=s),r&&(I["--aia-grid-gap"]=r),i&&(I["--aia-grid-max-height"]=i);let k=Ge("div",{ref:f,className:!t&&l?`aia-grid ${l}`:"aia-grid","data-scroll":c||void 0,style:I,...t?{}:v,children:u});return t?Ge("div",{className:l?`aia-grid-fade ${l}`:"aia-grid-fade","data-fade":_?"":void 0,...v,children:k}):k}import{useEffect as xt,useRef as vt,useState as wt}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 {
|
|
388
473
|
position: relative;
|
|
389
474
|
overflow: visible;
|
|
390
475
|
display: flex;
|
|
@@ -399,7 +484,10 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
|
|
|
399
484
|
white-space: normal;
|
|
400
485
|
word-break: break-word;
|
|
401
486
|
border-radius: 12px;
|
|
402
|
-
|
|
487
|
+
/* Symmetric 15px inset (matches Figma). The dropdown pads only vertically, so
|
|
488
|
+
the option fills the full cell width \u2014 its highlight/border-streak animation
|
|
489
|
+
reaches the dropdown edges while the text stays inset 15px. */
|
|
490
|
+
padding: 10px 15px;
|
|
403
491
|
animation: SuggestionItem-module_fadeIn_I8u35 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
404
492
|
}
|
|
405
493
|
|
|
@@ -731,7 +819,24 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
|
|
|
731
819
|
filter: brightness(0.55);
|
|
732
820
|
}
|
|
733
821
|
}
|
|
734
|
-
`,document.head.appendChild(e)}var
|
|
822
|
+
`,document.head.appendChild(e)}var B={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 we,jsxs as Ve}from"react/jsx-runtime";function qe({option:e,isHighlighted:s,onSelect:r,onHighlight:c,id:i,loading:t}){let[l,u]=wt(!1),v=vt(void 0);xt(()=>()=>clearTimeout(v.current),[]);let f=()=>{t||!e.is_tappable||l||(u(!0),r(e),clearTimeout(v.current),v.current=setTimeout(()=>u(!1),500))},_=[B.item,s&&!t?B.highlighted:"",e.is_tappable?B.tappable:B.nonTappable,l?B.pressed:""].filter(Boolean).join(" ");return Ve("div",{id:i,role:"option","data-aia-option":"","data-aia-loading":t?"":void 0,"aria-selected":s,className:_,tabIndex:t||!e.is_tappable?-1:0,onClick:f,onKeyDown:S=>{!t&&e.is_tappable&&(S.key==="Enter"||S.key===" ")&&(S.preventDefault(),f())},onMouseEnter:!t&&e.is_tappable?c:void 0,children:[we("div",{className:B.streaks}),we("div",{className:B.streaksVert}),Ve("span",{className:B.content,children:[we("span",{className:B.text,children:e.icon?`${e.icon} ${e.text}`:e.text}),e.tag&&we("span",{className:B.tag,children:e.tag})]})]})}import{jsx as $e}from"react/jsx-runtime";function Ue({options:e,activeIndex:s,onSelect:r,onHighlight:c,listboxId:i,loading:t}){return $e(je,{min:"250px",max:"250px",gap:"0",scroll:!0,fade:!0,children:e.map((l,u)=>$e(qe,{option:l,isHighlighted:u===s,onSelect:r,onHighlight:()=>c(u),id:`${i}-option-${u}`,loading:t},l.text))})}if(typeof document<"u"&&!document.getElementById("ac-style-8414cd5f")){let e=document.createElement("style");e.id="ac-style-8414cd5f",e.textContent=`@layer layout {
|
|
823
|
+
.aia-stack {
|
|
824
|
+
display: flex;
|
|
825
|
+
flex-direction: column;
|
|
826
|
+
gap: var(--aia-stack-space, 0.5rem);
|
|
827
|
+
}
|
|
828
|
+
.aia-stack[data-align="start"] {
|
|
829
|
+
align-items: start;
|
|
830
|
+
}
|
|
831
|
+
.aia-stack[data-align="center"] {
|
|
832
|
+
align-items: center;
|
|
833
|
+
}
|
|
834
|
+
.aia-stack[data-align="end"] {
|
|
835
|
+
align-items: end;
|
|
836
|
+
}
|
|
837
|
+
/* data-align="stretch" is the flex default \u2014 no rule needed. */
|
|
838
|
+
}
|
|
839
|
+
`,document.head.appendChild(e)}import{jsx as yt}from"react/jsx-runtime";function Qe({space:e,align:s="stretch",className:r,children:c,...i}){let t=e?{"--aia-stack-space":e}:void 0;return yt("div",{className:r?`aia-stack ${r}`:"aia-stack","data-align":s,style:t,...i,children:c})}import{jsx as te,jsxs as kt}from"react/jsx-runtime";var _t=[159,119,164];function Pe({suggestions:e,activeIndex:s,onSelect:r,onHighlight:c,isOpen:i,id:t,className:l,pills:u,onPillClick:v,showPills:f=!0,isLoading:_=!1,hasTabbedToHighlight:S=!1}){let k=e[0]?.options??[],h=s>=0&&!!k[s]?.is_tappable,P=!!(u&&u.length>0&&v),R=f&&P,n=R||f&&!P&&_,b=k.length>0,O=_&&!b,N=i&&(b||R||_);return te("div",{id:t,role:"listbox","data-aia-dropdown":"","data-aia-loading":_?"":void 0,className:`${ne.dropdown} ${N?ne.visible:""} ${l??""}`,onMouseDown:E=>E.preventDefault(),children:kt(Qe,{space:"14px",children:[n&&te(le,{noWrap:!0,className:ne.pillBar,"data-aia-pillbar":"",children:te(ve,{pills:u??[],activePillIndex:0,onSelectPill:v??(()=>{}),rounded:!0,loading:_})}),b&&te(Ue,{options:k,activeIndex:s,onSelect:r,onHighlight:c,listboxId:t,loading:_}),O&&te("div",{className:ne.skeletonBars,"data-aia-skeleton-bars":"",children:_t.map(E=>te("span",{className:ne.skeletonBar,style:{width:E}},`bar-${E}`))}),te(Ne,{hasTabbedToHighlight:S,isOptionHighlighted:h})]})})}if(typeof document<"u"&&!document.getElementById("ac-style-0ae03977")){let e=document.createElement("style");e.id="ac-style-0ae03977",e.textContent=`/*
|
|
735
840
|
* Built-in appearance defaults \u2014 zero specificity via :where().
|
|
736
841
|
* Consumer CSS always wins without !important.
|
|
737
842
|
*
|
|
@@ -756,17 +861,19 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
|
|
|
756
861
|
/* Light mode defaults (base) */
|
|
757
862
|
:where(.magicx-aia),
|
|
758
863
|
:where(.magicx-aia[data-mode="light"]) {
|
|
864
|
+
--aia-surface: #ffffff;
|
|
865
|
+
--aia-border: #b0b0b0;
|
|
759
866
|
--aia-pill-bg: #bdbdbd;
|
|
760
|
-
--aia-pill-color: #
|
|
761
|
-
--aia-pill-font-size:
|
|
867
|
+
--aia-pill-color: #333539;
|
|
868
|
+
--aia-pill-font-size: 18px;
|
|
762
869
|
|
|
763
870
|
--aia-option-bg: transparent;
|
|
764
|
-
--aia-option-color: #
|
|
871
|
+
--aia-option-color: #505050;
|
|
765
872
|
--aia-option-color-selected: #000000;
|
|
766
|
-
--aia-option-font-size:
|
|
873
|
+
--aia-option-font-size: 18px;
|
|
767
874
|
|
|
768
875
|
--aia-written-text-color: #000000;
|
|
769
|
-
--aia-written-text-font-size:
|
|
876
|
+
--aia-written-text-font-size: 20px;
|
|
770
877
|
--aia-caret-color: var(--aia-written-text-color, #000000);
|
|
771
878
|
|
|
772
879
|
--aia-submit-bg: #000000;
|
|
@@ -778,21 +885,28 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
|
|
|
778
885
|
|
|
779
886
|
--aia-streak-rgb: 99, 102, 241;
|
|
780
887
|
--aia-streak-glass-bg: rgba(99, 102, 241, 0.1);
|
|
888
|
+
|
|
889
|
+
--aia-footer-divider: rgba(176, 176, 176, 0.4);
|
|
890
|
+
--aia-footer-hint-color: #505050;
|
|
891
|
+
--aia-footer-brand-color: #b0b0b0;
|
|
892
|
+
--aia-footer-badge-border: rgba(189, 189, 189, 0.51);
|
|
781
893
|
}
|
|
782
894
|
|
|
783
895
|
/* Dark mode defaults */
|
|
784
896
|
:where(.magicx-aia[data-mode="dark"]) {
|
|
897
|
+
--aia-surface: #000000;
|
|
898
|
+
--aia-border: #505050;
|
|
785
899
|
--aia-pill-bg: #bdbdbd;
|
|
786
|
-
--aia-pill-color: #
|
|
787
|
-
--aia-pill-font-size:
|
|
900
|
+
--aia-pill-color: #b0b0b0;
|
|
901
|
+
--aia-pill-font-size: 18px;
|
|
788
902
|
|
|
789
903
|
--aia-option-bg: transparent;
|
|
790
904
|
--aia-option-color: #b0b0b0;
|
|
791
905
|
--aia-option-color-selected: #ffffff;
|
|
792
|
-
--aia-option-font-size:
|
|
906
|
+
--aia-option-font-size: 18px;
|
|
793
907
|
|
|
794
908
|
--aia-written-text-color: #ffffff;
|
|
795
|
-
--aia-written-text-font-size:
|
|
909
|
+
--aia-written-text-font-size: 20px;
|
|
796
910
|
--aia-caret-color: var(--aia-written-text-color, #ffffff);
|
|
797
911
|
|
|
798
912
|
--aia-submit-bg: #ffffff;
|
|
@@ -804,19 +918,33 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
|
|
|
804
918
|
|
|
805
919
|
--aia-streak-rgb: 255, 255, 255;
|
|
806
920
|
--aia-streak-glass-bg: rgba(255, 255, 255, 0.1);
|
|
921
|
+
|
|
922
|
+
--aia-footer-divider: rgba(255, 255, 255, 0.15);
|
|
923
|
+
--aia-footer-hint-color: #b0b0b0;
|
|
924
|
+
--aia-footer-brand-color: #505050;
|
|
925
|
+
--aia-footer-badge-border: #505050;
|
|
807
926
|
}
|
|
808
927
|
|
|
809
|
-
/* optionsPosition: dropdown above the input
|
|
928
|
+
/* optionsPosition: dropdown above the input. The sections live inside the
|
|
929
|
+
dropdown's .aia-stack, so the reversal targets the stack (not the dropdown,
|
|
930
|
+
whose only child is the stack). */
|
|
810
931
|
:where(.magicx-aia[data-options-position="above"]) [data-aia-dropdown] {
|
|
811
932
|
top: auto;
|
|
812
933
|
bottom: 100%;
|
|
813
934
|
margin-top: 0;
|
|
814
935
|
margin-bottom: 6px;
|
|
936
|
+
}
|
|
937
|
+
|
|
938
|
+
:where(.magicx-aia[data-options-position="above"]) [data-aia-dropdown] .aia-stack {
|
|
815
939
|
flex-direction: column-reverse;
|
|
816
940
|
}
|
|
817
941
|
|
|
818
|
-
|
|
819
|
-
|
|
942
|
+
/* The footer sits at the top when the dropdown is above, so flip its own
|
|
943
|
+
internal stack too \u2014 the divider should sit BELOW the hint/branding row
|
|
944
|
+
(between the footer and the options beneath it), not above it. The footer's
|
|
945
|
+
own class is CSS-module-scoped, so target the stable data attribute. */
|
|
946
|
+
:where(.magicx-aia[data-options-position="above"]) [data-aia-dropdown] [data-aia-footer] {
|
|
947
|
+
flex-direction: column-reverse;
|
|
820
948
|
}
|
|
821
949
|
|
|
822
950
|
/* Disable all animations when data-animations="off" */
|
|
@@ -826,5 +954,29 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
|
|
|
826
954
|
animation-duration: 0s !important;
|
|
827
955
|
transition-duration: 0s !important;
|
|
828
956
|
}
|
|
829
|
-
`,document.head.appendChild(e)}import{buildQuery as bt,ModeController as ht,setCursorOffset as xt}from"@magicx-eng/ai-autocomplete-vanilla";import{AIAutocomplete as st}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as He,useEffect as he,useRef as z,useState as lt}from"react";var dt={text:"",completedParams:[],suggestions:[],activeDropdownIndex:-1,newParamId:null,isLoading:!0,isReady:!1,error:null,segments:[],actionableSuggestions:[],filteredOptions:[],placeholderText:"",isDropdownOpen:!1,filterBase:0,filterInProgress:!1,pillTapped:!1,skipNextFetch:!1,lastRawQuery:"",isFocused:!1,editingParam:null,editingAnchor:null,editingTail:null,caretOffset:null,inSelectionAnimation:!1};function Ae({onSubmit:e,onError:_,optionOverrides:f,maskCompletedText:v,apiConfig:c,columns:l=2,dropdownTrigger:m,optionsPosition:g,closeDropdownOnBlur:h,showNonTappableOptions:n,onFocus:d,onBlur:I,value:A,completedParams:S,onChange:D,onParamsChange:H,source:N,setCursor:E}){let a=z(null),[w,G]=lt(null),X=z(e);X.current=e;let K=z(_);K.current=_;let Q=z(D);Q.current=D;let V=z(H);V.current=H;let C=z(d);C.current=d;let J=z(I);J.current=I;let L=z(E);L.current=E,he(()=>{if(typeof document>"u")return;let t=new st(document.createElement("div"),{renderMode:"headless",apiConfig:c,optionOverrides:f,maskCompletedText:v,columns:l,dropdownTrigger:m,optionsPosition:g,closeDropdownOnBlur:h,showNonTappableOptions:n,source:N,value:A,completedParams:S,onSubmit:(...y)=>X.current?.(...y),onError:(...y)=>K.current?.(...y),onChange:(...y)=>Q.current?.(...y),onParamsChange:(...y)=>V.current?.(...y),onFocus:()=>C.current?.(),onBlur:()=>J.current?.(),setCursor:y=>L.current?.(y)});a.current=t,G(t.getState());let k=t.subscribe(y=>G(y));return()=>{k(),t.destroy(),a.current===t&&(a.current=null)}},[]),he(()=>{A!==void 0&&a.current?.setValue(A)},[A]),he(()=>{S!==void 0&&a.current?.setCompletedParams(S)},[S]);let ae=JSON.stringify(c??null),Z=z(f),q=z(0);if(f!==Z.current){let t=Z.current,k=f,y=Object.keys(t??{}),ne=Object.keys(k??{});(y.length!==ne.length||ne.some(ie=>!t?.[ie]||k[ie]!==t[ie]))&&q.current++,Z.current=f}he(()=>{a.current?.update({apiConfig:c,optionOverrides:f,dropdownTrigger:m,optionsPosition:g,closeDropdownOnBlur:h,showNonTappableOptions:n})},[ae,q.current,m,g,h,n]);let F=z(null);F.current===null&&(F.current={handleTextChange:t=>a.current?.handleTextChange(t),handleKeyDown:t=>{let k="nativeEvent"in t?t.nativeEvent:t;a.current?.handleKeyDown(k)},setFocused:t=>a.current?.setFocused(t),startEditingParam:t=>a.current?.startEditingParam(t),exitEditMode:()=>a.current?.exitEditMode(),handleCaretAfterInput:t=>a.current?.handleCaretAfterInput(t),handleCaretMove:t=>a.current?.handleCaretMove(t),replaceEditingRange:t=>a.current?.replaceEditingRange(t)??!1,setActivePill:t=>a.current?.setActivePill(t),removeLastParam:()=>a.current?.removeLastParam(),clearNewParamId:()=>a.current?.clearNewParamId(),reset:()=>a.current?.reset(),selectOption:t=>a.current?.selectOption(t),setActiveDropdownIndex:t=>a.current?.setActiveDropdownIndex(t),handleFocus:()=>a.current?.setFocused(!0),handleBlur:()=>a.current?.setFocused(!1)});let b=F.current,Y=He(t=>{let k=t.target.value,ne=k.length>0&&!t.nativeEvent?.isComposing&&k[0]!==k[0].toUpperCase()?k[0].toUpperCase()+k.slice(1):k;a.current?.handleTextChange(ne)},[]),ee=He(t=>{a.current?.handleKeyDown(t.nativeEvent)},[]),$=a.current,r=w??dt,o=A!==void 0?A:r.text,i=S!==void 0?S:r.completedParams,s=r.actionableSuggestions,x=s[0],p=$?.listboxId??"",P=r.activeDropdownIndex>=0&&$?`${p}-option-${r.activeDropdownIndex}`:void 0,R=r.editingParam,W=R?{type:R.suggestionType,text:R.suggestionPlaceholder,required:!0,options:R.options}:null,de=W??x,ve=W?[W]:s,pe=!$||r.isLoading&&!r.editingParam&&!r.inSelectionAnimation;return{completedParams:i,suggestionPills:s,setActivePill:b.setActivePill,removeLastParam:b.removeLastParam,segments:r.segments,newParamId:r.newParamId,clearNewParamId:b.clearNewParamId,suggestions:r.suggestions,activeIndex:r.activeDropdownIndex,isReady:r.isReady,isLoading:pe,isFocused:r.isFocused,isDropdownOpen:r.isDropdownOpen,placeholderText:r.placeholderText,listboxId:p,error:r.error,handleTextChange:b.handleTextChange,handleKeyDown:b.handleKeyDown,setFocused:b.setFocused,editingParam:R,editingAnchor:r.editingAnchor,caretOffset:r.caretOffset,startEditingParam:b.startEditingParam,exitEditMode:b.exitEditMode,handleCaretAfterInput:b.handleCaretAfterInput,handleCaretMove:b.handleCaretMove,replaceEditingRange:b.replaceEditingRange,inputProps:{value:o,placeholder:r.placeholderText||void 0,onChange:Y,onKeyDown:ee,onFocus:b.handleFocus,onBlur:b.handleBlur,role:"combobox","aria-expanded":r.isDropdownOpen,"aria-activedescendant":P,"aria-autocomplete":"list","aria-controls":p},reset:b.reset,dropdownProps:{suggestions:de?[{...de,options:r.filteredOptions}]:[],activeIndex:r.activeDropdownIndex,onSelect:b.selectOption,onHighlight:b.setActiveDropdownIndex,isOpen:r.isDropdownOpen,id:p,pills:ve,onPillClick:b.setActivePill,isLoading:pe}}}import{extractPlainText as Ke,getCursorOffset as Fe,plainTextLength as pt,renderEditableContent as ut,setCursorOffset as We}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as M,useEffect as Se,useLayoutEffect as Pe,useRef as re}from"react";var xe;function ct(){if(xe!==void 0)return xe;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),xe=e.contentEditable==="plaintext-only",xe}function Ne(e){let{segments:_,newParamId:f,editingParam:v,editingAnchor:c,caretOffset:l,placeholderText:m,isFocused:g,isDropdownOpen:h,listboxId:n,activeDescendantId:d,autoFocus:I,handleTextChange:A,handleKeyDown:S,handleCaretAfterInput:D,handleCaretMove:H,startEditingParam:N,replaceEditingRange:E,setFocused:a}=e,w=re(null),G=re(!1),X=re(""),K=re(""),Q=re(null),V=re(0);Q.current=l,Se(()=>{if(!I)return;let o=w.current;o&&(document.activeElement===o?a(!0):o.focus())},[I,a]),Se(()=>{let o=w.current;if(!o)return;let i=o.ownerDocument??document,s=()=>{let x=i.getSelection();if(!x||x.rangeCount===0||!x.anchorNode||!o.contains(x.anchorNode))return;let p=x.anchorNode,W=(p.nodeType===Node.ELEMENT_NODE?p:p.parentElement)?.closest('strong[data-seg="completed"][data-param-id]')?.dataset.paramId??null;if(W&&W!==v?.id){N(W);return}performance.now()-V.current<50||H(Fe(o))};return i.addEventListener("selectionchange",s),()=>i.removeEventListener("selectionchange",s)},[v,N,H]),Pe(()=>{let o=w.current;o&&ut({input:o,segments:_,newParamId:f,editingParamId:v?.id??null,placeholderText:m??"",isFocused:g})},[_,f,v,m,g]),Pe(()=>{let o=X.current,i=f??"";if(X.current=i,!i||i===o)return;let s=w.current;if(!s)return;s.focus();let x=Q.current??pt(s);We(s,x)},[f]),Pe(()=>{let o=K.current,i=v?.id??"";if(K.current=i,!i||i===o||c==null)return;let s=w.current;s&&We(s,c)},[v,c]);let C=M(()=>{if(G.current)return;let o=w.current;if(!o)return;let i=Ke(o),x=i.length>0&&i[0]!==i[0].toUpperCase()?i[0].toUpperCase()+i.slice(1):i;A(x)},[A]),J=M(()=>{V.current=performance.now(),C();let o=w.current;o&&D(Fe(o))},[C,D]);Se(()=>{let o=w.current;if(!o)return;let i=s=>{let x=s,p=x.inputType;if(p==="insertParagraph"||p==="insertLineBreak"||p==="insertFromDrop"){s.preventDefault();return}if(p.startsWith("insert")||p.startsWith("delete")){let P=p.startsWith("delete")?"":x.data??"";E(P)&&s.preventDefault()}};return o.addEventListener("beforeinput",i),()=>o.removeEventListener("beforeinput",i)},[E]);let L=M(()=>{G.current=!0},[]),ae=M(()=>{G.current=!1,C()},[C]),Z=M(o=>{o.preventDefault();let i=w.current;if(!i)return;let s=(o.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!s)return;let x=i.ownerDocument??document,p=x.getSelection();if(!p||p.rangeCount===0)return;let P=p.getRangeAt(0);if(!i.contains(P.startContainer))return;P.deleteContents();let R=x.createTextNode(s);P.insertNode(R),P.setStartAfter(R),P.collapse(!0),p.removeAllRanges(),p.addRange(P),C()},[C]),q=M(o=>S(o),[S]),F=M(()=>a(!0),[a]),b=M(()=>a(!1),[a]),Y=M(()=>w.current?.focus(),[]),ee=M(()=>w.current?.blur(),[]),$=M(()=>{let o=w.current;return o?Ke(o):""},[]),r=ct()?"plaintext-only":"true";return{inputRef:w,editorProps:{ref:w,contentEditable:r,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":n,"aria-expanded":h,"aria-activedescendant":d,spellCheck:!0,enterKeyHint:"send",onInput:J,onKeyDown:q,onCompositionStart:L,onCompositionEnd:ae,onPaste:Z,onFocus:F,onBlur:b},getPlainText:$,focus:Y,blur:ee}}import{jsx as j,jsxs as Ce}from"react/jsx-runtime";function vt(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var wt=mt(function({onSubmit:_,onError:f,optionOverrides:v,maskCompletedText:c,className:l,apiConfig:m,columns:g,pillPlacement:h="inline",mode:n="auto",optionsPosition:d="below",animations:I=!0,dropdownTrigger:A,closeDropdownOnBlur:S,showNonTappableOptions:D,autoFocus:H=!0,onFocus:N,onBlur:E,value:a,completedParams:w,onChange:G,onParamsChange:X,submitButton:K},Q){let V=le(null),C=le(null),J=le(()=>{}),L=le(null),ae=le(null);Ge(()=>{let u=V.current;if(u)return L.current?L.current.setMode(n):L.current=new ht(u,n),()=>{L.current?.destroy(),L.current=null}},[n]);let Z=Ee(u=>{let O=ae.current?.current;O&&(O.focus(),xt(O,u))},[]),{completedParams:q,suggestionPills:F,setActivePill:b,segments:Y,newParamId:ee,clearNewParamId:$,placeholderText:r,isFocused:o,isDropdownOpen:i,isLoading:s,activeIndex:x,listboxId:p,handleTextChange:P,handleKeyDown:R,setFocused:W,editingParam:de,editingAnchor:ve,caretOffset:pe,startEditingParam:t,handleCaretAfterInput:k,handleCaretMove:y,replaceEditingRange:ne,dropdownProps:ie,reset:ue}=Ae({onSubmit:u=>J.current(u),onError:f,optionOverrides:v,maskCompletedText:c,apiConfig:m,columns:g,dropdownTrigger:A,optionsPosition:d,closeDropdownOnBlur:S,showNonTappableOptions:D,onFocus:N,onBlur:E,value:a,completedParams:w,onChange:G,onParamsChange:X,source:"full-sdk",setCursor:Z});Ge(()=>{if(!ee)return;let u=window.setTimeout(()=>$(),650);return()=>window.clearTimeout(u)},[ee,$]);let Ve=x>=0?`${p}-option-${x}`:void 0,{inputRef:we,editorProps:qe,focus:ce,blur:De,getPlainText:Le}=Ne({segments:Y,newParamId:ee,editingParam:de,editingAnchor:ve,caretOffset:pe,placeholderText:r,isFocused:o,isDropdownOpen:i,listboxId:p,activeDescendantId:Ve,autoFocus:H,handleTextChange:P,handleKeyDown:R,handleCaretAfterInput:k,handleCaretMove:y,startEditingParam:t,replaceEditingRange:ne,setFocused:W});ae.current=we,ft(()=>{let u=C.current,O=we.current;if(!u||!O)return;let ge=()=>{let Te=u.firstElementChild;if(!Te)return;let Xe=Te.getBoundingClientRect(),Qe=O.getBoundingClientRect();Xe.top>=Qe.bottom-2?u.setAttribute("data-aia-pill-wrapped",""):u.removeAttribute("data-aia-pill-wrapped")};ge();let Re=new ResizeObserver(ge);return Re.observe(O),()=>Re.disconnect()},[Y,F.length,s,we]),gt(Q,()=>({focus:ce,blur:De,reset:ue,setMode:u=>L.current?.setMode(u)}),[ce,De,ue]);let me=!!Y.length||q.length>0,_e=Ee(()=>{if(!me)return;let u=Le(),{rawQuery:O,completedParams:ge}=bt(u,q);_({query:u.trim(),raw_query:O,completed_params:ge}),ue()},[me,q,_,ue,Le]);J.current=_e;let $e=Ee(u=>{u.target?.closest("[data-aia-pill]")||ce()},[ce]),Ue=h==="inline",je=h==="dropdown";return Ce("div",{ref:V,className:`magicx-aia ${U.container} ${l??""}`,"data-pill-placement":h,"data-options-position":d,"data-animations":I?"on":"off","data-mode":vt(n),children:[j(ke,{...ie,showPills:je}),Ce("div",{className:U.inputWrapper,onClick:$e,children:[Ce("div",{className:U.editorArea,"data-aia-editor":"",children:[j("div",{...qe,className:U.input,"data-aia-input":""}),Ue&&(s||F.length>0)&&j("span",{ref:C,className:U.pillListContainer,"data-aia-pill-list-container":"",children:j(se,{pills:F,activePillIndex:0,onSelectPill:b,loading:s})})]}),K===null?null:K===void 0?j("button",{type:"button","data-aia-submit":"",className:U.submitButton,disabled:!me,onClick:u=>{u.stopPropagation(),_e()},"aria-label":"Submit",children:j("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:j("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}):j("span",{"data-aia-submit":"",className:U.submitSlot,onClick:u=>{me&&(u.stopPropagation(),_e())},children:K})]})]})});export{wt as AIAutocomplete,ke as AIAutocompleteDropdown,Ae as useAIAutocomplete};
|
|
957
|
+
`,document.head.appendChild(e)}import{buildQuery as Lt,ModeController as zt,setCursorOffset as Bt}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 {
|
|
958
|
+
flex-shrink: 0;
|
|
959
|
+
width: 36px;
|
|
960
|
+
height: 36px;
|
|
961
|
+
border-radius: 50%;
|
|
962
|
+
border: none;
|
|
963
|
+
background: var(--aia-submit-bg, var(--aia-color-text-default, #fff));
|
|
964
|
+
color: var(--aia-submit-color, var(--aia-color-bg-default, #000));
|
|
965
|
+
cursor: pointer;
|
|
966
|
+
display: flex;
|
|
967
|
+
align-items: center;
|
|
968
|
+
justify-content: center;
|
|
969
|
+
padding: 0;
|
|
970
|
+
transition: opacity 0.2s ease;
|
|
971
|
+
}
|
|
972
|
+
|
|
973
|
+
.SubmitButton-module_submitButton_otz7H:hover {
|
|
974
|
+
opacity: 0.85;
|
|
975
|
+
}
|
|
976
|
+
|
|
977
|
+
.SubmitButton-module_submitButton_otz7H:disabled {
|
|
978
|
+
opacity: 0.4;
|
|
979
|
+
cursor: default;
|
|
980
|
+
}
|
|
981
|
+
`,document.head.appendChild(e)}var Xe={submitButton:"SubmitButton-module_submitButton_otz7H"};import{jsx as Ee}from"react/jsx-runtime";function Je({disabled:e,onClick:s}){return Ee("button",{type:"button","data-aia-submit":"",className:Xe.submitButton,disabled:e,onClick:r=>{r.stopPropagation(),s()},"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 It}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as Ze,useEffect as ye,useRef as F,useState as St}from"react";var At={text:"",completedParams:[],suggestions:[],activeDropdownIndex:-1,newParamId:null,isLoading:!0,isReady:!1,error:null,segments:[],actionableSuggestions:[],filteredOptions:[],placeholderText:"",isDropdownOpen:!1,filterBase:0,filterInProgress:!1,pillTapped:!1,skipNextFetch:!1,lastRawQuery:"",isFocused:!1,editingParam:null,editingAnchor:null,editingTail:null,caretOffset:null,inSelectionAnimation:!1,hasTabbedToHighlight:!1};function De({onSubmit:e,onError:s,optionOverrides:r,maskCompletedText:c,apiConfig:i,columns:t=2,dropdownTrigger:l,optionsPosition:u,closeDropdownOnBlur:v,showNonTappableOptions:f,onFocus:_,onBlur:S,value:I,completedParams:k,onChange:h,onParamsChange:P,source:R,setCursor:V}){let n=F(null),[b,O]=St(null),N=F(e);N.current=e;let E=F(s);E.current=s;let Q=F(h);Q.current=h;let q=F(P);q.current=P;let T=F(_);T.current=_;let X=F(S);X.current=S;let L=F(V);L.current=V,ye(()=>{if(typeof document>"u")return;let o=new It(document.createElement("div"),{renderMode:"headless",apiConfig:i,optionOverrides:r,maskCompletedText:c,columns:t,dropdownTrigger:l,optionsPosition:u,closeDropdownOnBlur:v,showNonTappableOptions:f,source:R,value:I,completedParams:k,onSubmit:(...A)=>N.current?.(...A),onError:(...A)=>E.current?.(...A),onChange:(...A)=>Q.current?.(...A),onParamsChange:(...A)=>q.current?.(...A),onFocus:()=>T.current?.(),onBlur:()=>X.current?.(),setCursor:A=>L.current?.(A)});n.current=o,O(o.getState());let C=o.subscribe(A=>O(A));return()=>{C(),o.destroy(),n.current===o&&(n.current=null)}},[]),ye(()=>{I!==void 0&&n.current?.setValue(I)},[I]),ye(()=>{k!==void 0&&n.current?.setCompletedParams(k)},[k]);let oe=JSON.stringify(i??null),J=F(r),$=F(0);if(r!==J.current){let o=J.current,C=r,A=Object.keys(o??{}),ae=Object.keys(C??{});(A.length!==ae.length||ae.some(se=>!o?.[se]||C[se]!==o[se]))&&$.current++,J.current=r}ye(()=>{n.current?.update({apiConfig:i,optionOverrides:r,dropdownTrigger:l,optionsPosition:u,closeDropdownOnBlur:v,showNonTappableOptions:f})},[oe,$.current,l,u,v,f]);let K=F(null);K.current===null&&(K.current={handleTextChange:o=>n.current?.handleTextChange(o),handleKeyDown:o=>{let C="nativeEvent"in o?o.nativeEvent:o;n.current?.handleKeyDown(C)},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 w=K.current,Z=Ze(o=>{let C=o.target.value,ae=C.length>0&&!o.nativeEvent?.isComposing&&C[0]!==C[0].toUpperCase()?C[0].toUpperCase()+C.slice(1):C;n.current?.handleTextChange(ae)},[]),Y=Ze(o=>{n.current?.handleKeyDown(o.nativeEvent)},[]),U=n.current,d=b??At,a=I!==void 0?I:d.text,p=k!==void 0?k:d.completedParams,m=d.actionableSuggestions,y=m[0],g=U?.listboxId??"",D=d.activeDropdownIndex>=0&&U?`${g}-option-${d.activeDropdownIndex}`:void 0,z=d.editingParam,W=z?{type:z.suggestionType,text:z.suggestionPlaceholder,required:!0,options:z.options}:null,pe=W??y,ke=W?[W]:m,ue=!U||d.isLoading&&!d.editingParam&&!d.inSelectionAnimation;return{completedParams:p,suggestionPills:m,setActivePill:w.setActivePill,removeLastParam:w.removeLastParam,segments:d.segments,newParamId:d.newParamId,clearNewParamId:w.clearNewParamId,suggestions:d.suggestions,activeIndex:d.activeDropdownIndex,isReady:d.isReady,isLoading:ue,isFocused:d.isFocused,isDropdownOpen:d.isDropdownOpen,placeholderText:d.placeholderText,listboxId:g,error:d.error,handleTextChange:w.handleTextChange,handleKeyDown:w.handleKeyDown,setFocused:w.setFocused,editingParam:z,editingAnchor:d.editingAnchor,caretOffset:d.caretOffset,startEditingParam:w.startEditingParam,exitEditMode:w.exitEditMode,handleCaretAfterInput:w.handleCaretAfterInput,handleCaretMove:w.handleCaretMove,replaceEditingRange:w.replaceEditingRange,inputProps:{value:a,placeholder:d.placeholderText||void 0,onChange:Z,onKeyDown:Y,onFocus:w.handleFocus,onBlur:w.handleBlur,role:"combobox","aria-expanded":d.isDropdownOpen,"aria-activedescendant":D,"aria-autocomplete":"list","aria-controls":g},reset:w.reset,dropdownProps:{suggestions:pe?[{...pe,options:d.filteredOptions}]:[],activeIndex:d.activeDropdownIndex,onSelect:w.selectOption,onHighlight:w.setActiveDropdownIndex,isOpen:d.isDropdownOpen,id:g,pills:ke,onPillClick:w.setActivePill,isLoading:ue,hasTabbedToHighlight:d.hasTabbedToHighlight}}}import{extractPlainText as Ye,getCursorOffset as et,plainTextLength as Ct,renderEditableContent as Pt,setCursorOffset as tt}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as H,useEffect as Re,useLayoutEffect as Te,useRef as re}from"react";var _e;function Et(){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 ot(e){let{segments:s,newParamId:r,editingParam:c,editingAnchor:i,caretOffset:t,placeholderText:l,isFocused:u,isDropdownOpen:v,listboxId:f,activeDescendantId:_,autoFocus:S,handleTextChange:I,handleKeyDown:k,handleCaretAfterInput:h,handleCaretMove:P,startEditingParam:R,replaceEditingRange:V,setFocused:n}=e,b=re(null),O=re(!1),N=re(""),E=re(""),Q=re(null),q=re(0);Q.current=t,Re(()=>{if(!S)return;let a=b.current;a&&(document.activeElement===a?n(!0):a.focus())},[S,n]),Re(()=>{let a=b.current;if(!a)return;let p=a.ownerDocument??document,m=()=>{let y=p.getSelection();if(!y||y.rangeCount===0||!y.anchorNode||!a.contains(y.anchorNode))return;let g=y.anchorNode,W=(g.nodeType===Node.ELEMENT_NODE?g:g.parentElement)?.closest('strong[data-seg="completed"][data-param-id]')?.dataset.paramId??null;if(W&&W!==c?.id){R(W);return}performance.now()-q.current<50||P(et(a))};return p.addEventListener("selectionchange",m),()=>p.removeEventListener("selectionchange",m)},[c,R,P]),Te(()=>{let a=b.current;a&&Pt({input:a,segments:s,newParamId:r,editingParamId:c?.id??null,placeholderText:l??"",isFocused:u})},[s,r,c,l,u]),Te(()=>{let a=N.current,p=r??"";if(N.current=p,!p||p===a)return;let m=b.current;if(!m)return;m.focus();let y=Q.current??Ct(m);tt(m,y)},[r]),Te(()=>{let a=E.current,p=c?.id??"";if(E.current=p,!p||p===a||i==null)return;let m=b.current;m&&tt(m,i)},[c,i]);let T=H(()=>{if(O.current)return;let a=b.current;if(!a)return;let p=Ye(a),y=p.length>0&&p[0]!==p[0].toUpperCase()?p[0].toUpperCase()+p.slice(1):p;I(y)},[I]),X=H(()=>{q.current=performance.now(),T();let a=b.current;a&&h(et(a))},[T,h]);Re(()=>{let a=b.current;if(!a)return;let p=m=>{let y=m,g=y.inputType;if(g==="insertParagraph"||g==="insertLineBreak"||g==="insertFromDrop"){m.preventDefault();return}if(g.startsWith("insert")||g.startsWith("delete")){let D=g.startsWith("delete")?"":y.data??"";V(D)&&m.preventDefault()}};return a.addEventListener("beforeinput",p),()=>a.removeEventListener("beforeinput",p)},[V]);let L=H(()=>{O.current=!0},[]),oe=H(()=>{O.current=!1,T()},[T]),J=H(a=>{a.preventDefault();let p=b.current;if(!p)return;let m=(a.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!m)return;let y=p.ownerDocument??document,g=y.getSelection();if(!g||g.rangeCount===0)return;let D=g.getRangeAt(0);if(!p.contains(D.startContainer))return;D.deleteContents();let z=y.createTextNode(m);D.insertNode(z),D.setStartAfter(z),D.collapse(!0),g.removeAllRanges(),g.addRange(D),T()},[T]),$=H(a=>k(a),[k]),K=H(()=>n(!0),[n]),w=H(()=>n(!1),[n]),Z=H(()=>b.current?.focus(),[]),Y=H(()=>b.current?.blur(),[]),U=H(()=>{let a=b.current;return a?Ye(a):""},[]),d=Et()?"plaintext-only":"true";return{inputRef:b,editorProps:{ref:b,contentEditable:d,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":f,"aria-expanded":v,"aria-activedescendant":_,spellCheck:!0,enterKeyHint:"send",onInput:X,onKeyDown:$,onCompositionStart:L,onCompositionEnd:oe,onPaste:J,onFocus:K,onBlur:w},getPlainText:U,focus:Z,blur:Y}}import{jsx as ie,jsxs as ze}from"react/jsx-runtime";function Ft(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var Ht=Dt(function({onSubmit:s,onError:r,optionOverrides:c,maskCompletedText:i,className:t,apiConfig:l,columns:u,pillPlacement:v="inline",mode:f="auto",optionsPosition:_="below",animations:S=!0,dropdownTrigger:I,closeDropdownOnBlur:k,showNonTappableOptions:h,autoFocus:P=!0,onFocus:R,onBlur:V,value:n,completedParams:b,onChange:O,onParamsChange:N,submitButton:E},Q){let q=ce(null),T=ce(null),X=ce(()=>{}),L=ce(null),oe=ce(null);at(()=>{let x=q.current;if(x)return L.current?L.current.setMode(f):L.current=new zt(x,f),()=>{L.current?.destroy(),L.current=null}},[f]);let J=Le(x=>{let M=oe.current?.current;M&&(M.focus(),Bt(M,x))},[]),{completedParams:$,suggestionPills:K,setActivePill:w,segments:Z,newParamId:Y,clearNewParamId:U,placeholderText:d,isFocused:a,isDropdownOpen:p,isLoading:m,activeIndex:y,listboxId:g,handleTextChange:D,handleKeyDown:z,setFocused:W,editingParam:pe,editingAnchor:ke,caretOffset:ue,startEditingParam:o,handleCaretAfterInput:C,handleCaretMove:A,replaceEditingRange:ae,dropdownProps:se,reset:me}=De({onSubmit:x=>X.current(x),onError:r,optionOverrides:c,maskCompletedText:i,apiConfig:l,columns:u,dropdownTrigger:I,optionsPosition:_,closeDropdownOnBlur:k,showNonTappableOptions:h,onFocus:R,onBlur:V,value:n,completedParams:b,onChange:O,onParamsChange:N,source:"full-sdk",setCursor:J});at(()=>{if(!Y)return;let x=window.setTimeout(()=>U(),650);return()=>window.clearTimeout(x)},[Y,U]);let nt=y>=0?`${g}-option-${y}`:void 0,{inputRef:Ie,editorProps:rt,focus:ge,blur:Be,getPlainText:Fe}=ot({segments:Z,newParamId:Y,editingParam:pe,editingAnchor:ke,caretOffset:ue,placeholderText:d,isFocused:a,isDropdownOpen:p,listboxId:g,activeDescendantId:nt,autoFocus:P,handleTextChange:D,handleKeyDown:z,handleCaretAfterInput:C,handleCaretMove:A,startEditingParam:o,replaceEditingRange:ae,setFocused:W});oe.current=Ie,Tt(()=>{let x=T.current,M=Ie.current;if(!x||!M)return;let he=()=>{let Oe=x.firstElementChild;if(!Oe)return;let dt=Oe.getBoundingClientRect(),ct=M.getBoundingClientRect();dt.top>=ct.bottom-2?x.setAttribute("data-aia-pill-wrapped",""):x.removeAttribute("data-aia-pill-wrapped")};he();let He=new ResizeObserver(he);return He.observe(M),()=>He.disconnect()},[Z,K.length,m,Ie]),Rt(Q,()=>({focus:ge,blur:Be,reset:me,setMode:x=>L.current?.setMode(x)}),[ge,Be,me]);let fe=!!Z.length||$.length>0,Se=Le(()=>{if(!fe)return;let x=Fe(),{rawQuery:M,completedParams:he}=Lt(x,$);s({query:x.trim(),raw_query:M,completed_params:he}),me()},[fe,$,s,me,Fe]);X.current=Se;let it=Le(x=>{x.target?.closest("[data-aia-pill]")||ge()},[ge]),st=v==="inline",lt=v==="dropdown";return ze("div",{ref:q,className:`magicx-aia ${ee.container} ${t??""}`,"data-pill-placement":v,"data-options-position":_,"data-animations":S?"on":"off","data-mode":Ft(f),children:[ie(Pe,{...se,showPills:lt}),ze("div",{className:ee.inputWrapper,onClick:it,children:[ze("div",{className:ee.editorArea,"data-aia-editor":"",children:[ie("div",{...rt,className:ee.input,"data-aia-input":""}),st&&(m||K.length>0)&&ie("span",{ref:T,className:ee.pillListContainer,"data-aia-pill-list-container":"",children:ie(ve,{pills:K,activePillIndex:0,onSelectPill:w,loading:m})})]}),E===null?null:E===void 0?ie(Je,{disabled:!fe,onClick:Se}):ie("span",{"data-aia-submit":"",className:ee.submitSlot,onClick:x=>{fe&&(x.stopPropagation(),Se())},children:E})]})]})});export{Ht as AIAutocomplete,Pe as AIAutocompleteDropdown,De as useAIAutocomplete};
|
|
830
982
|
//# sourceMappingURL=index.mjs.map
|