@magicx-eng/ai-autocomplete-react 0.2.0 → 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 -131
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +281 -131
- 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 Pe,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;
|
|
@@ -97,7 +97,6 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
|
|
|
97
97
|
.AIAutocomplete-module_input_IW-P-[data-aia-empty="true"] {
|
|
98
98
|
display: inline-block;
|
|
99
99
|
min-width: 1px;
|
|
100
|
-
vertical-align: top;
|
|
101
100
|
}
|
|
102
101
|
|
|
103
102
|
.AIAutocomplete-module_pillListContainer_h92IA {
|
|
@@ -110,26 +109,6 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
|
|
|
110
109
|
margin-left: 0;
|
|
111
110
|
}
|
|
112
111
|
|
|
113
|
-
.AIAutocomplete-module_submitButton_sl1Mi {
|
|
114
|
-
flex-shrink: 0;
|
|
115
|
-
width: 36px;
|
|
116
|
-
height: 36px;
|
|
117
|
-
border-radius: 50%;
|
|
118
|
-
border: none;
|
|
119
|
-
background: var(--aia-submit-bg, var(--aia-color-text-default, #fff));
|
|
120
|
-
color: var(--aia-submit-color, var(--aia-color-bg-default, #000));
|
|
121
|
-
cursor: pointer;
|
|
122
|
-
display: flex;
|
|
123
|
-
align-items: center;
|
|
124
|
-
justify-content: center;
|
|
125
|
-
padding: 0;
|
|
126
|
-
transition: opacity 0.2s ease;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.AIAutocomplete-module_submitButton_sl1Mi:hover {
|
|
130
|
-
opacity: 0.85;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
112
|
.AIAutocomplete-module_submitSlot_GhuCM {
|
|
134
113
|
display: contents;
|
|
135
114
|
}
|
|
@@ -166,7 +145,7 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
|
|
|
166
145
|
background-position: -50% 0;
|
|
167
146
|
}
|
|
168
147
|
}
|
|
169
|
-
`,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 {
|
|
170
149
|
position: absolute;
|
|
171
150
|
left: 0;
|
|
172
151
|
right: 0;
|
|
@@ -175,12 +154,24 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
|
|
|
175
154
|
margin-top: 6px;
|
|
176
155
|
display: flex;
|
|
177
156
|
flex-direction: column;
|
|
157
|
+
box-sizing: border-box;
|
|
158
|
+
padding: 15px 0;
|
|
178
159
|
overflow: hidden;
|
|
179
160
|
container-type: inline-size;
|
|
180
161
|
z-index: 10;
|
|
181
162
|
opacity: 0;
|
|
182
163
|
pointer-events: none;
|
|
183
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;
|
|
184
175
|
box-shadow:
|
|
185
176
|
hsla(0, 0%, 100%, 1) -3.2px -3.2px 3.2px -3.2px inset,
|
|
186
177
|
hsla(0, 0%, 100%, 1) 6.4px 6.4px 1.6px -8px inset,
|
|
@@ -193,7 +184,6 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
|
|
|
193
184
|
inset 0 0 30px 5px hsla(0, 0%, 0%, 0.05),
|
|
194
185
|
hsla(0, 0%, 0%, 0.08) 0px 0px 30px 2px;
|
|
195
186
|
backdrop-filter: blur(30px);
|
|
196
|
-
border-radius: 28px;
|
|
197
187
|
}
|
|
198
188
|
|
|
199
189
|
.AIAutocompleteDropdown-module_visible_QCoXj {
|
|
@@ -201,8 +191,10 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
|
|
|
201
191
|
pointer-events: auto;
|
|
202
192
|
}
|
|
203
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. */
|
|
204
196
|
.AIAutocompleteDropdown-module_pillBar_pwTXe {
|
|
205
|
-
padding:
|
|
197
|
+
padding: 0 15px;
|
|
206
198
|
overflow-x: auto;
|
|
207
199
|
overflow-y: hidden;
|
|
208
200
|
scrollbar-width: none;
|
|
@@ -219,7 +211,7 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
|
|
|
219
211
|
display: flex;
|
|
220
212
|
flex-direction: column;
|
|
221
213
|
gap: 20px;
|
|
222
|
-
padding:
|
|
214
|
+
padding: 10px 15px;
|
|
223
215
|
}
|
|
224
216
|
|
|
225
217
|
.AIAutocompleteDropdown-module_skeletonBar_O3xIx {
|
|
@@ -248,29 +240,132 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
|
|
|
248
240
|
opacity: 0.25;
|
|
249
241
|
}
|
|
250
242
|
}
|
|
251
|
-
`,document.head.appendChild(e)}var
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
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 {
|
|
255
304
|
display: inline-flex;
|
|
256
|
-
gap: 5px;
|
|
257
305
|
align-items: center;
|
|
258
|
-
|
|
259
|
-
|
|
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;
|
|
260
314
|
}
|
|
261
315
|
|
|
262
|
-
.
|
|
316
|
+
.DropdownFooter-module_key_Bz1H- {
|
|
263
317
|
display: inline-flex;
|
|
264
318
|
align-items: center;
|
|
265
319
|
justify-content: center;
|
|
266
|
-
|
|
267
|
-
|
|
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;
|
|
268
363
|
border: none;
|
|
269
364
|
border-radius: 999px;
|
|
270
365
|
background: rgba(49, 50, 85, 0.25);
|
|
271
366
|
background: color-mix(
|
|
272
367
|
in srgb,
|
|
273
|
-
var(--aia-pill-bg, var(--aia-color-background-supportive, #313255))
|
|
368
|
+
var(--aia-pill-bg, var(--aia-color-background-supportive, #313255)) 30%,
|
|
274
369
|
transparent
|
|
275
370
|
);
|
|
276
371
|
color: var(--aia-pill-color, var(--aia-color-text-muted, #c1c4cb));
|
|
@@ -279,36 +374,24 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
|
|
|
279
374
|
line-height: 30px;
|
|
280
375
|
cursor: pointer;
|
|
281
376
|
white-space: nowrap;
|
|
282
|
-
animation:
|
|
283
|
-
box-shadow:
|
|
284
|
-
hsla(0, 0%, 100%, 1) -3.2px -3.2px 3.2px -3.2px inset,
|
|
285
|
-
hsla(0, 0%, 100%, 1) 6.4px 6.4px 1.6px -8px inset,
|
|
286
|
-
var(--aia-dropdown-bg, transparent) -6.4px 6.4px 1.6px -8px inset,
|
|
287
|
-
var(--aia-dropdown-bg, transparent) 6.4px -6.4px 1.6px -8px inset,
|
|
288
|
-
hsla(0, 0%, 100%, 0.15) -1.6px 0px 0px -1.6px inset,
|
|
289
|
-
hsla(0, 0%, 100%, 0.15) 0px -1.6px 0px -1.6px inset,
|
|
290
|
-
hsla(0, 0%, 100%, 0.3) 0px 1.6px 0px 0px inset,
|
|
291
|
-
hsla(0, 0%, 100%, 0.3) 1.6px 0px 0px 0px inset,
|
|
292
|
-
inset 0 0 30px 5px hsla(0, 0%, 0%, 0.05),
|
|
293
|
-
hsla(0, 0%, 0%, 0.08) 0px 0px 30px 2px;
|
|
294
|
-
backdrop-filter: blur(30px);
|
|
377
|
+
animation: Pill-module_fadeIn_Bbqtz 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
295
378
|
}
|
|
296
379
|
|
|
297
|
-
.
|
|
380
|
+
.Pill-module_rounded_6WMps {
|
|
298
381
|
border-radius: 999px;
|
|
299
382
|
}
|
|
300
383
|
|
|
301
384
|
/* Loading skeleton \u2014 preserves the pill's exact box (same width and height)
|
|
302
385
|
and just hides the text. The pill's native background acts as the visible
|
|
303
386
|
shape; the pulse provides the shimmer. */
|
|
304
|
-
.
|
|
387
|
+
.Pill-module_skeleton_-u9-j {
|
|
305
388
|
pointer-events: none;
|
|
306
389
|
cursor: default;
|
|
307
390
|
color: transparent;
|
|
308
|
-
animation:
|
|
391
|
+
animation: Pill-module_skeletonPulse_xHh-7 1.4s ease-in-out infinite;
|
|
309
392
|
}
|
|
310
393
|
|
|
311
|
-
@keyframes
|
|
394
|
+
@keyframes Pill-module_skeletonPulse_xHh-7 {
|
|
312
395
|
0%,
|
|
313
396
|
100% {
|
|
314
397
|
filter: brightness(1);
|
|
@@ -318,75 +401,75 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
|
|
|
318
401
|
}
|
|
319
402
|
}
|
|
320
403
|
|
|
321
|
-
|
|
322
|
-
filter: brightness(1.2);
|
|
323
|
-
}
|
|
324
|
-
|
|
325
|
-
.PillList-module_active_Oll-- {
|
|
326
|
-
outline: 1px solid #5a5b8a;
|
|
327
|
-
}
|
|
328
|
-
|
|
329
|
-
@keyframes PillList-module_fadeIn_Aezob {
|
|
404
|
+
@keyframes Pill-module_fadeIn_Bbqtz {
|
|
330
405
|
from {
|
|
331
406
|
opacity: 0;
|
|
332
407
|
}
|
|
333
408
|
}
|
|
334
|
-
`,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 {
|
|
335
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;
|
|
336
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
|
+
}
|
|
337
427
|
|
|
338
|
-
.
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
bottom: 0;
|
|
344
|
-
height: 50%;
|
|
345
|
-
pointer-events: none;
|
|
346
|
-
opacity: 0;
|
|
347
|
-
transition: opacity 150ms ease-out;
|
|
348
|
-
backdrop-filter: blur(12px);
|
|
349
|
-
mask-image: linear-gradient(to bottom, transparent, white);
|
|
350
|
-
}
|
|
351
|
-
|
|
352
|
-
.SuggestionGrid-module_scrollWrapper_MOqfw[data-fade]::after {
|
|
353
|
-
opacity: 1;
|
|
354
|
-
}
|
|
355
|
-
|
|
356
|
-
.SuggestionGrid-module_grid_jvaPb {
|
|
357
|
-
display: grid;
|
|
358
|
-
grid-template-columns: minmax(0, 250px);
|
|
359
|
-
/* Pack rows from the top instead of stretching to fill the grid container. */
|
|
360
|
-
grid-auto-rows: min-content;
|
|
361
|
-
align-content: start;
|
|
362
|
-
max-width: 100cqi;
|
|
363
|
-
padding: 8px 8px;
|
|
364
|
-
max-height: 200px;
|
|
365
|
-
overflow-y: auto;
|
|
366
|
-
scrollbar-width: thin;
|
|
367
|
-
scrollbar-color: var(--aia-scrollbar-thumb, rgba(0, 0, 0, 0.3)) transparent;
|
|
368
|
-
}
|
|
369
|
-
|
|
370
|
-
@container (min-width: 516px) {
|
|
371
|
-
.SuggestionGrid-module_grid_jvaPb {
|
|
372
|
-
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;
|
|
373
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;
|
|
374
449
|
}
|
|
375
|
-
}
|
|
376
|
-
|
|
377
|
-
.SuggestionGrid-module_grid_jvaPb::-webkit-scrollbar {
|
|
378
|
-
width: 6px;
|
|
379
|
-
}
|
|
380
|
-
|
|
381
|
-
.SuggestionGrid-module_grid_jvaPb::-webkit-scrollbar-track {
|
|
382
|
-
background: transparent;
|
|
383
|
-
}
|
|
384
450
|
|
|
385
|
-
.
|
|
386
|
-
|
|
387
|
-
|
|
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
|
+
}
|
|
388
471
|
}
|
|
389
|
-
`,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 {
|
|
390
473
|
position: relative;
|
|
391
474
|
overflow: visible;
|
|
392
475
|
display: flex;
|
|
@@ -401,7 +484,10 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
|
|
|
401
484
|
white-space: normal;
|
|
402
485
|
word-break: break-word;
|
|
403
486
|
border-radius: 12px;
|
|
404
|
-
|
|
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;
|
|
405
491
|
animation: SuggestionItem-module_fadeIn_I8u35 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
406
492
|
}
|
|
407
493
|
|
|
@@ -733,7 +819,24 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
|
|
|
733
819
|
filter: brightness(0.55);
|
|
734
820
|
}
|
|
735
821
|
}
|
|
736
|
-
`,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=`/*
|
|
737
840
|
* Built-in appearance defaults \u2014 zero specificity via :where().
|
|
738
841
|
* Consumer CSS always wins without !important.
|
|
739
842
|
*
|
|
@@ -758,17 +861,19 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
|
|
|
758
861
|
/* Light mode defaults (base) */
|
|
759
862
|
:where(.magicx-aia),
|
|
760
863
|
:where(.magicx-aia[data-mode="light"]) {
|
|
864
|
+
--aia-surface: #ffffff;
|
|
865
|
+
--aia-border: #b0b0b0;
|
|
761
866
|
--aia-pill-bg: #bdbdbd;
|
|
762
|
-
--aia-pill-color: #
|
|
763
|
-
--aia-pill-font-size:
|
|
867
|
+
--aia-pill-color: #333539;
|
|
868
|
+
--aia-pill-font-size: 18px;
|
|
764
869
|
|
|
765
870
|
--aia-option-bg: transparent;
|
|
766
|
-
--aia-option-color: #
|
|
871
|
+
--aia-option-color: #505050;
|
|
767
872
|
--aia-option-color-selected: #000000;
|
|
768
|
-
--aia-option-font-size:
|
|
873
|
+
--aia-option-font-size: 18px;
|
|
769
874
|
|
|
770
875
|
--aia-written-text-color: #000000;
|
|
771
|
-
--aia-written-text-font-size:
|
|
876
|
+
--aia-written-text-font-size: 20px;
|
|
772
877
|
--aia-caret-color: var(--aia-written-text-color, #000000);
|
|
773
878
|
|
|
774
879
|
--aia-submit-bg: #000000;
|
|
@@ -780,21 +885,28 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
|
|
|
780
885
|
|
|
781
886
|
--aia-streak-rgb: 99, 102, 241;
|
|
782
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);
|
|
783
893
|
}
|
|
784
894
|
|
|
785
895
|
/* Dark mode defaults */
|
|
786
896
|
:where(.magicx-aia[data-mode="dark"]) {
|
|
897
|
+
--aia-surface: #000000;
|
|
898
|
+
--aia-border: #505050;
|
|
787
899
|
--aia-pill-bg: #bdbdbd;
|
|
788
|
-
--aia-pill-color: #
|
|
789
|
-
--aia-pill-font-size:
|
|
900
|
+
--aia-pill-color: #b0b0b0;
|
|
901
|
+
--aia-pill-font-size: 18px;
|
|
790
902
|
|
|
791
903
|
--aia-option-bg: transparent;
|
|
792
904
|
--aia-option-color: #b0b0b0;
|
|
793
905
|
--aia-option-color-selected: #ffffff;
|
|
794
|
-
--aia-option-font-size:
|
|
906
|
+
--aia-option-font-size: 18px;
|
|
795
907
|
|
|
796
908
|
--aia-written-text-color: #ffffff;
|
|
797
|
-
--aia-written-text-font-size:
|
|
909
|
+
--aia-written-text-font-size: 20px;
|
|
798
910
|
--aia-caret-color: var(--aia-written-text-color, #ffffff);
|
|
799
911
|
|
|
800
912
|
--aia-submit-bg: #ffffff;
|
|
@@ -806,19 +918,33 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
|
|
|
806
918
|
|
|
807
919
|
--aia-streak-rgb: 255, 255, 255;
|
|
808
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;
|
|
809
926
|
}
|
|
810
927
|
|
|
811
|
-
/* 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). */
|
|
812
931
|
:where(.magicx-aia[data-options-position="above"]) [data-aia-dropdown] {
|
|
813
932
|
top: auto;
|
|
814
933
|
bottom: 100%;
|
|
815
934
|
margin-top: 0;
|
|
816
935
|
margin-bottom: 6px;
|
|
936
|
+
}
|
|
937
|
+
|
|
938
|
+
:where(.magicx-aia[data-options-position="above"]) [data-aia-dropdown] .aia-stack {
|
|
817
939
|
flex-direction: column-reverse;
|
|
818
940
|
}
|
|
819
941
|
|
|
820
|
-
|
|
821
|
-
|
|
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;
|
|
822
948
|
}
|
|
823
949
|
|
|
824
950
|
/* Disable all animations when data-animations="off" */
|
|
@@ -828,5 +954,29 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
|
|
|
828
954
|
animation-duration: 0s !important;
|
|
829
955
|
transition-duration: 0s !important;
|
|
830
956
|
}
|
|
831
|
-
`,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 M,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:d=2,dropdownTrigger:m,optionsPosition:g,closeDropdownOnBlur:h,showNonTappableOptions:n,onFocus:p,onBlur:I,value:A,completedParams:S,onChange:D,onParamsChange:H,source:N,setCursor:P}){let a=M(null),[w,G]=lt(null),X=M(e);X.current=e;let K=M(_);K.current=_;let Q=M(D);Q.current=D;let V=M(H);V.current=H;let C=M(p);C.current=p;let J=M(I);J.current=I;let L=M(P);L.current=P,he(()=>{if(typeof document>"u")return;let t=new st(document.createElement("div"),{renderMode:"headless",apiConfig:c,optionOverrides:f,maskCompletedText:v,columns:d,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),Y=M(f),q=M(0);if(f!==Y.current){let t=Y.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++,Y.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=M(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,Z=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],u=$?.listboxId??"",E=r.activeDropdownIndex>=0&&$?`${u}-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:u,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:Z,onKeyDown:ee,onFocus:b.handleFocus,onBlur:b.handleBlur,role:"combobox","aria-expanded":r.isDropdownOpen,"aria-activedescendant":E,"aria-autocomplete":"list","aria-controls":u},reset:b.reset,dropdownProps:{suggestions:de?[{...de,options:r.filteredOptions}]:[],activeIndex:r.activeDropdownIndex,onSelect:b.selectOption,onHighlight:b.setActiveDropdownIndex,isOpen:r.isDropdownOpen,id:u,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 O,useEffect as Se,useLayoutEffect as Ee,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:d,placeholderText:m,isFocused:g,isDropdownOpen:h,listboxId:n,activeDescendantId:p,autoFocus:I,handleTextChange:A,handleKeyDown:S,handleCaretAfterInput:D,handleCaretMove:H,startEditingParam:N,replaceEditingRange:P,setFocused:a}=e,w=re(null),G=re(!1),X=re(""),K=re(""),Q=re(null),V=re(0);Q.current=d,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 u=x.anchorNode,W=(u.nodeType===Node.ELEMENT_NODE?u:u.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]),Ee(()=>{let o=w.current;o&&ut({input:o,segments:_,newParamId:f,editingParamId:v?.id??null,placeholderText:m??"",isFocused:g})},[_,f,v,m,g]),Ee(()=>{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]),Ee(()=>{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=O(()=>{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=O(()=>{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,u=x.inputType;if(u==="insertParagraph"||u==="insertLineBreak"||u==="insertFromDrop"){s.preventDefault();return}if(u.startsWith("insert")||u.startsWith("delete")){let E=u.startsWith("delete")?"":x.data??"";P(E)&&s.preventDefault()}};return o.addEventListener("beforeinput",i),()=>o.removeEventListener("beforeinput",i)},[P]);let L=O(()=>{G.current=!0},[]),ae=O(()=>{G.current=!1,C()},[C]),Y=O(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,u=x.getSelection();if(!u||u.rangeCount===0)return;let E=u.getRangeAt(0);if(!i.contains(E.startContainer))return;E.deleteContents();let R=x.createTextNode(s);E.insertNode(R),E.setStartAfter(R),E.collapse(!0),u.removeAllRanges(),u.addRange(E),C()},[C]),q=O(o=>S(o),[S]),F=O(()=>a(!0),[a]),b=O(()=>a(!1),[a]),Z=O(()=>w.current?.focus(),[]),ee=O(()=>w.current?.blur(),[]),$=O(()=>{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":p,spellCheck:!0,enterKeyHint:"send",onInput:J,onKeyDown:q,onCompositionStart:L,onCompositionEnd:ae,onPaste:Y,onFocus:F,onBlur:b},getPlainText:$,focus:Z,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:d,apiConfig:m,columns:g,pillPlacement:h="inline",mode:n="auto",optionsPosition:p="below",animations:I=!0,dropdownTrigger:A,closeDropdownOnBlur:S,showNonTappableOptions:D,autoFocus:H=!0,onFocus:N,onBlur:P,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 l=V.current;if(l)return L.current?L.current.setMode(n):L.current=new ht(l,n),()=>{L.current?.destroy(),L.current=null}},[n]);let Y=Pe(l=>{let T=ae.current?.current;T&&(T.focus(),xt(T,l))},[]),{completedParams:q,suggestionPills:F,setActivePill:b,segments:Z,newParamId:ee,clearNewParamId:$,placeholderText:r,isFocused:o,isDropdownOpen:i,isLoading:s,activeIndex:x,listboxId:u,handleTextChange:E,handleKeyDown:R,setFocused:W,editingParam:de,editingAnchor:ve,caretOffset:pe,startEditingParam:t,handleCaretAfterInput:k,handleCaretMove:y,replaceEditingRange:ne,dropdownProps:ie,reset:ue}=Ae({onSubmit:l=>J.current(l),onError:f,optionOverrides:v,maskCompletedText:c,apiConfig:m,columns:g,dropdownTrigger:A,optionsPosition:p,closeDropdownOnBlur:S,showNonTappableOptions:D,onFocus:N,onBlur:P,value:a,completedParams:w,onChange:G,onParamsChange:X,source:"full-sdk",setCursor:Y});Ge(()=>{if(!ee)return;let l=window.setTimeout(()=>$(),650);return()=>window.clearTimeout(l)},[ee,$]);let Ve=x>=0?`${u}-option-${x}`:void 0,{inputRef:we,editorProps:qe,focus:ce,blur:De,getPlainText:Le}=Ne({segments:Z,newParamId:ee,editingParam:de,editingAnchor:ve,caretOffset:pe,placeholderText:r,isFocused:o,isDropdownOpen:i,listboxId:u,activeDescendantId:Ve,autoFocus:H,handleTextChange:E,handleKeyDown:R,handleCaretAfterInput:k,handleCaretMove:y,startEditingParam:t,replaceEditingRange:ne,setFocused:W});ae.current=we,ft(()=>{let l=C.current,T=we.current;if(!l||!T)return;let ge=()=>{let Te=l.firstElementChild;if(!Te)return;if(T.dataset.aiaEmpty==="true"){l.setAttribute("data-aia-pill-wrapped","");return}let Xe=Te.getBoundingClientRect(),Qe=T.getBoundingClientRect();Xe.top>=Qe.bottom-2?l.setAttribute("data-aia-pill-wrapped",""):l.removeAttribute("data-aia-pill-wrapped")};ge();let Re=new ResizeObserver(ge);return Re.observe(T),()=>Re.disconnect()},[Z,F.length,s,we]),gt(Q,()=>({focus:ce,blur:De,reset:ue,setMode:l=>L.current?.setMode(l)}),[ce,De,ue]);let me=!!Z.length||q.length>0,_e=Pe(()=>{if(!me)return;let l=Le(),{rawQuery:T,completedParams:ge}=bt(l,q);_({query:l.trim(),raw_query:T,completed_params:ge}),ue()},[me,q,_,ue,Le]);J.current=_e;let $e=Pe(l=>{l.target?.closest("[data-aia-pill]")||ce()},[ce]),Ue=h==="inline",je=h==="dropdown";return Ce("div",{ref:V,className:`magicx-aia ${U.container} ${d??""}`,"data-pill-placement":h,"data-options-position":p,"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:l=>{l.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:l=>{me&&(l.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};
|
|
832
982
|
//# sourceMappingURL=index.mjs.map
|