@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.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var De=Object.defineProperty;var lt=Object.getOwnPropertyDescriptor;var dt=Object.getOwnPropertyNames;var ct=Object.prototype.hasOwnProperty;var pt=(e,t)=>{for(var o in t)De(e,o,{get:t[o],enumerable:!0})},ut=(e,t,o,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of dt(t))!ct.call(e,a)&&a!==o&&De(e,a,{get:()=>t[a],enumerable:!(l=lt(t,a))||l.enumerable});return e};var mt=e=>ut(De({},"__esModule",{value:!0}),e);var vt={};pt(vt,{AIAutocomplete:()=>et,AIAutocompleteDropdown:()=>ke,useAIAutocomplete:()=>Se});module.exports=mt(vt);var I=require("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 @@
|
|
|
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 @@
|
|
|
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 @@
|
|
|
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 @@
|
|
|
166
145
|
background-position: -50% 0;
|
|
167
146
|
}
|
|
168
147
|
}
|
|
169
|
-
`,document.head.appendChild(e)}var
|
|
148
|
+
`,document.head.appendChild(e)}var se={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 @@
|
|
|
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 @@
|
|
|
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 @@
|
|
|
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 @@
|
|
|
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 @@
|
|
|
248
240
|
opacity: 0.25;
|
|
249
241
|
}
|
|
250
242
|
}
|
|
251
|
-
`,document.head.appendChild(e)}var
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
243
|
+
`,document.head.appendChild(e)}var ce={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"};var Ne=require("@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)}var Re=require("react/jsx-runtime");function ge({gap:e,align:t="center",justify:o="start",noWrap:l=!1,inline:a=!1,className:n,children:d,...m}){let y=e?{"--aia-cluster-gap":e}:void 0,h={className:n?`aia-cluster ${n}`:"aia-cluster","data-align":t,"data-justify":o,"data-nowrap":l||void 0,"data-inline":a||void 0,style:y,...m};return a?(0,Re.jsx)("span",{...h,children:d}):(0,Re.jsx)("div",{...h,children:d})}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 U={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"};var M=require("react/jsx-runtime");function Ke({hasTabbedToHighlight:e=!1,isOptionHighlighted:t=!1}){let{key:o,hint:l}=(0,Ne.getFooterHint)(e,t);return(0,M.jsxs)("footer",{className:U.footer,"data-aia-footer":"",children:[(0,M.jsx)("div",{className:U.divider}),(0,M.jsxs)(ge,{justify:"between",noWrap:!0,children:[(0,M.jsxs)(ge,{gap:"5px",className:U.hintGroup,children:[(0,M.jsx)("kbd",{className:U.key,children:o}),(0,M.jsx)("span",{className:U.hint,children:l})]}),(0,M.jsxs)("a",{className:U.brandLink,href:"https://ai-autocomplete.com",target:"_blank",rel:"noopener noreferrer",children:[(0,M.jsx)("span",{className:U.brand,children:"AI"}),(0,M.jsx)("span",{className:U.badge,children:"Autocomplete"})]})]})]})}if(typeof document<"u"&&!document.getElementById("ac-style-04fef8d6")){let e=document.createElement("style");e.id="ac-style-04fef8d6",e.textContent=`.Pill-module_pill_3Rkw- {
|
|
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 @@
|
|
|
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 @@
|
|
|
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 Q={pill:"Pill-module_pill_3Rkw-",fadeIn:"Pill-module_fadeIn_Bbqtz",rounded:"Pill-module_rounded_6WMps",skeleton:"Pill-module_skeleton_-u9-j",skeletonPulse:"Pill-module_skeletonPulse_xHh-7"};var Ge=require("react/jsx-runtime"),Te={active:1,upcoming:.4,disabled:.2};function We({label:e,state:t,selected:o,rounded:l,loading:a,onClick:n}){let d=[Q.pill,l?Q.rounded:"",o&&!a?Q.active:"",a?Q.skeleton:""].filter(Boolean).join(" ");return(0,Ge.jsx)("button",{type:"button","data-aia-pill":"","data-aia-loading":a?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:d,style:{opacity:Te[t]},onMouseDown:m=>m.preventDefault(),onClick:a?void 0:n,disabled:a,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 Le={list:"PillList-module_list_qvLqO"};var fe=require("react/jsx-runtime"),gt=[125,69];function je(e){return e===0?"active":e===1?"upcoming":"disabled"}function _e({pills:e,activePillIndex:t,onSelectPill:o,rounded:l,loading:a}){return a&&e.length===0?(0,fe.jsx)("span",{className:Le.list,"data-aia-pill-list-loading":"",children:gt.map((n,d)=>(0,fe.jsx)("span",{"data-aia-pill-skeleton":"",className:`${Q.pill} ${l?Q.rounded:""} ${Q.skeleton}`,style:{width:n,opacity:Te[je(d)]}},`skel-${n}`))}):(0,fe.jsx)("span",{className:Le.list,"data-aia-pill-list-loading":a?"":void 0,children:e.map((n,d)=>(0,fe.jsx)(We,{label:n.text,state:je(d),selected:d===t,rounded:l,loading:a,onClick:()=>o(d)},`${n.type}-${n.text}`))})}var ee=require("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)}var
|
|
472
|
+
`,document.head.appendChild(e)}var ze=require("react/jsx-runtime");function Ve({min:e="16rem",max:t,gap:o,scroll:l=!1,maxHeight:a,fade:n=!1,className:d,children:m,...y}){let h=(0,ee.useRef)(null),[S,P]=(0,ee.useState)(!1);(0,ee.useEffect)(()=>{if(!n)return;let b=h.current;if(!b)return;let R=()=>{P(b.scrollHeight-b.scrollTop-b.clientHeight>1)};b.addEventListener("scroll",R,{passive:!0});let B=new ResizeObserver(R);return B.observe(b),()=>{b.removeEventListener("scroll",R),B.disconnect()}},[n]),(0,ee.useLayoutEffect)(()=>{let b=h.current;!n||!b||P(b.scrollHeight-b.scrollTop-b.clientHeight>1)},[n,m]);let C={"--aia-grid-min":e};t&&(C["--aia-grid-max"]=t),o&&(C["--aia-grid-gap"]=o),a&&(C["--aia-grid-max-height"]=a);let A=(0,ze.jsx)("div",{ref:h,className:!n&&d?`aia-grid ${d}`:"aia-grid","data-scroll":l||void 0,style:C,...n?{}:y,children:m});return n?(0,ze.jsx)("div",{className:d?`aia-grid-fade ${d}`:"aia-grid-fade","data-fade":S?"":void 0,...y,children:A}):A}var pe=require("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 @@
|
|
|
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 @@
|
|
|
733
819
|
filter: brightness(0.55);
|
|
734
820
|
}
|
|
735
821
|
}
|
|
736
|
-
`,document.head.appendChild(e)}var
|
|
822
|
+
`,document.head.appendChild(e)}var N={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"};var te=require("react/jsx-runtime");function qe({option:e,isHighlighted:t,onSelect:o,onHighlight:l,id:a,loading:n}){let[d,m]=(0,pe.useState)(!1),y=(0,pe.useRef)(void 0);(0,pe.useEffect)(()=>()=>clearTimeout(y.current),[]);let h=()=>{n||!e.is_tappable||d||(m(!0),o(e),clearTimeout(y.current),y.current=setTimeout(()=>m(!1),500))},S=[N.item,t&&!n?N.highlighted:"",e.is_tappable?N.tappable:N.nonTappable,d?N.pressed:""].filter(Boolean).join(" ");return(0,te.jsxs)("div",{id:a,role:"option","data-aia-option":"","data-aia-loading":n?"":void 0,"aria-selected":t,className:S,tabIndex:n||!e.is_tappable?-1:0,onClick:h,onKeyDown:P=>{!n&&e.is_tappable&&(P.key==="Enter"||P.key===" ")&&(P.preventDefault(),h())},onMouseEnter:!n&&e.is_tappable?l:void 0,children:[(0,te.jsx)("div",{className:N.streaks}),(0,te.jsx)("div",{className:N.streaksVert}),(0,te.jsxs)("span",{className:N.content,children:[(0,te.jsx)("span",{className:N.text,children:e.icon?`${e.icon} ${e.text}`:e.text}),e.tag&&(0,te.jsx)("span",{className:N.tag,children:e.tag})]})]})}var Be=require("react/jsx-runtime");function $e({options:e,activeIndex:t,onSelect:o,onHighlight:l,listboxId:a,loading:n}){return(0,Be.jsx)(Ve,{min:"250px",max:"250px",gap:"0",scroll:!0,fade:!0,children:e.map((d,m)=>(0,Be.jsx)(qe,{option:d,isHighlighted:m===t,onSelect:o,onHighlight:()=>l(m),id:`${a}-option-${m}`,loading:n},d.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)}var Qe=require("react/jsx-runtime");function Ue({space:e,align:t="stretch",className:o,children:l,...a}){let n=e?{"--aia-stack-space":e}:void 0;return(0,Qe.jsx)("div",{className:o?`aia-stack ${o}`:"aia-stack","data-align":t,style:n,...a,children:l})}var j=require("react/jsx-runtime"),ft=[159,119,164];function ke({suggestions:e,activeIndex:t,onSelect:o,onHighlight:l,isOpen:a,id:n,className:d,pills:m,onPillClick:y,showPills:h=!0,isLoading:S=!1,hasTabbedToHighlight:P=!1}){let A=e[0]?.options??[],b=t>=0&&!!A[t]?.is_tappable,R=!!(m&&m.length>0&&y),B=h&&R,s=B||h&&!R&&S,x=A.length>0,W=S&&!x,V=a&&(x||B||S);return(0,j.jsx)("div",{id:n,role:"listbox","data-aia-dropdown":"","data-aia-loading":S?"":void 0,className:`${ce.dropdown} ${V?ce.visible:""} ${d??""}`,onMouseDown:T=>T.preventDefault(),children:(0,j.jsxs)(Ue,{space:"14px",children:[s&&(0,j.jsx)(ge,{noWrap:!0,className:ce.pillBar,"data-aia-pillbar":"",children:(0,j.jsx)(_e,{pills:m??[],activePillIndex:0,onSelectPill:y??(()=>{}),rounded:!0,loading:S})}),x&&(0,j.jsx)($e,{options:A,activeIndex:t,onSelect:o,onHighlight:l,listboxId:n,loading:S}),W&&(0,j.jsx)("div",{className:ce.skeletonBars,"data-aia-skeleton-bars":"",children:ft.map(T=>(0,j.jsx)("span",{className:ce.skeletonBar,style:{width:T}},`bar-${T}`))}),(0,j.jsx)(Ke,{hasTabbedToHighlight:P,isOptionHighlighted:b})]})})}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 @@
|
|
|
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 @@
|
|
|
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 @@
|
|
|
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 @@
|
|
|
828
954
|
animation-duration: 0s !important;
|
|
829
955
|
transition-duration: 0s !important;
|
|
830
956
|
}
|
|
831
|
-
`,document.head.appendChild(e)}var pe=require("@magicx-eng/ai-autocomplete-vanilla");var Oe=require("@magicx-eng/ai-autocomplete-vanilla"),v=require("react"),et={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 ye({onSubmit:e,onError:l,optionOverrides:p,maskCompletedText:x,apiConfig:r,columns:m=2,dropdownTrigger:b,optionsPosition:h,closeDropdownOnBlur:_,showNonTappableOptions:n,onFocus:g,onBlur:S,value:P,completedParams:C,onChange:M,onParamsChange:N,source:$,setCursor:T}){let a=(0,v.useRef)(null),[k,U]=(0,v.useState)(null),ee=(0,v.useRef)(e);ee.current=e;let G=(0,v.useRef)(l);G.current=l;let te=(0,v.useRef)(M);te.current=M;let j=(0,v.useRef)(N);j.current=N;let z=(0,v.useRef)(g);z.current=g;let oe=(0,v.useRef)(S);oe.current=S;let O=(0,v.useRef)(T);O.current=T,(0,v.useEffect)(()=>{if(typeof document>"u")return;let t=new Oe.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:r,optionOverrides:p,maskCompletedText:x,columns:m,dropdownTrigger:b,optionsPosition:h,closeDropdownOnBlur:_,showNonTappableOptions:n,source:$,value:P,completedParams:C,onSubmit:(...A)=>ee.current?.(...A),onError:(...A)=>G.current?.(...A),onChange:(...A)=>te.current?.(...A),onParamsChange:(...A)=>j.current?.(...A),onFocus:()=>z.current?.(),onBlur:()=>oe.current?.(),setCursor:A=>O.current?.(A)});a.current=t,U(t.getState());let E=t.subscribe(A=>U(A));return()=>{E(),t.destroy(),a.current===t&&(a.current=null)}},[]),(0,v.useEffect)(()=>{P!==void 0&&a.current?.setValue(P)},[P]),(0,v.useEffect)(()=>{C!==void 0&&a.current?.setCompletedParams(C)},[C]);let se=JSON.stringify(r??null),ae=(0,v.useRef)(p),X=(0,v.useRef)(0);if(p!==ae.current){let t=ae.current,E=p,A=Object.keys(t??{}),le=Object.keys(E??{});(A.length!==le.length||le.some(ue=>!t?.[ue]||E[ue]!==t[ue]))&&X.current++,ae.current=p}(0,v.useEffect)(()=>{a.current?.update({apiConfig:r,optionOverrides:p,dropdownTrigger:b,optionsPosition:h,closeDropdownOnBlur:_,showNonTappableOptions:n})},[se,X.current,b,h,_,n]);let V=(0,v.useRef)(null);V.current===null&&(V.current={handleTextChange:t=>a.current?.handleTextChange(t),handleKeyDown:t=>{let E="nativeEvent"in t?t.nativeEvent:t;a.current?.handleKeyDown(E)},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 w=V.current,ne=(0,v.useCallback)(t=>{let E=t.target.value,le=E.length>0&&!t.nativeEvent?.isComposing&&E[0]!==E[0].toUpperCase()?E[0].toUpperCase()+E.slice(1):E;a.current?.handleTextChange(le)},[]),re=(0,v.useCallback)(t=>{a.current?.handleKeyDown(t.nativeEvent)},[]),Q=a.current,i=k??et,o=P!==void 0?P:i.text,s=C!==void 0?C:i.completedParams,u=i.actionableSuggestions,y=u[0],f=Q?.listboxId??"",D=i.activeDropdownIndex>=0&&Q?`${f}-option-${i.activeDropdownIndex}`:void 0,B=i.editingParam,q=B?{type:B.suggestionType,text:B.suggestionPlaceholder,required:!0,options:B.options}:null,ge=q??y,ke=q?[q]:u,fe=!Q||i.isLoading&&!i.editingParam&&!i.inSelectionAnimation;return{completedParams:s,suggestionPills:u,setActivePill:w.setActivePill,removeLastParam:w.removeLastParam,segments:i.segments,newParamId:i.newParamId,clearNewParamId:w.clearNewParamId,suggestions:i.suggestions,activeIndex:i.activeDropdownIndex,isReady:i.isReady,isLoading:fe,isFocused:i.isFocused,isDropdownOpen:i.isDropdownOpen,placeholderText:i.placeholderText,listboxId:f,error:i.error,handleTextChange:w.handleTextChange,handleKeyDown:w.handleKeyDown,setFocused:w.setFocused,editingParam:B,editingAnchor:i.editingAnchor,caretOffset:i.caretOffset,startEditingParam:w.startEditingParam,exitEditMode:w.exitEditMode,handleCaretAfterInput:w.handleCaretAfterInput,handleCaretMove:w.handleCaretMove,replaceEditingRange:w.replaceEditingRange,inputProps:{value:o,placeholder:i.placeholderText||void 0,onChange:ne,onKeyDown:re,onFocus:w.handleFocus,onBlur:w.handleBlur,role:"combobox","aria-expanded":i.isDropdownOpen,"aria-activedescendant":D,"aria-autocomplete":"list","aria-controls":f},reset:w.reset,dropdownProps:{suggestions:ge?[{...ge,options:i.filteredOptions}]:[],activeIndex:i.activeDropdownIndex,onSelect:w.selectOption,onHighlight:w.setActiveDropdownIndex,isOpen:i.isDropdownOpen,id:f,pills:ke,onPillClick:w.setActivePill,isLoading:fe}}}var L=require("@magicx-eng/ai-autocomplete-vanilla"),d=require("react"),Ie;function tt(){if(Ie!==void 0)return Ie;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Ie=e.contentEditable==="plaintext-only",Ie}function Be(e){let{segments:l,newParamId:p,editingParam:x,editingAnchor:r,caretOffset:m,placeholderText:b,isFocused:h,isDropdownOpen:_,listboxId:n,activeDescendantId:g,autoFocus:S,handleTextChange:P,handleKeyDown:C,handleCaretAfterInput:M,handleCaretMove:N,startEditingParam:$,replaceEditingRange:T,setFocused:a}=e,k=(0,d.useRef)(null),U=(0,d.useRef)(!1),ee=(0,d.useRef)(""),G=(0,d.useRef)(""),te=(0,d.useRef)(null),j=(0,d.useRef)(0);te.current=m,(0,d.useEffect)(()=>{if(!S)return;let o=k.current;o&&(document.activeElement===o?a(!0):o.focus())},[S,a]),(0,d.useEffect)(()=>{let o=k.current;if(!o)return;let s=o.ownerDocument??document,u=()=>{let y=s.getSelection();if(!y||y.rangeCount===0||!y.anchorNode||!o.contains(y.anchorNode))return;let f=y.anchorNode,q=(f.nodeType===Node.ELEMENT_NODE?f:f.parentElement)?.closest('strong[data-seg="completed"][data-param-id]')?.dataset.paramId??null;if(q&&q!==x?.id){$(q);return}performance.now()-j.current<50||N((0,L.getCursorOffset)(o))};return s.addEventListener("selectionchange",u),()=>s.removeEventListener("selectionchange",u)},[x,$,N]),(0,d.useLayoutEffect)(()=>{let o=k.current;o&&(0,L.renderEditableContent)({input:o,segments:l,newParamId:p,editingParamId:x?.id??null,placeholderText:b??"",isFocused:h})},[l,p,x,b,h]),(0,d.useLayoutEffect)(()=>{let o=ee.current,s=p??"";if(ee.current=s,!s||s===o)return;let u=k.current;if(!u)return;u.focus();let y=te.current??(0,L.plainTextLength)(u);(0,L.setCursorOffset)(u,y)},[p]),(0,d.useLayoutEffect)(()=>{let o=G.current,s=x?.id??"";if(G.current=s,!s||s===o||r==null)return;let u=k.current;u&&(0,L.setCursorOffset)(u,r)},[x,r]);let z=(0,d.useCallback)(()=>{if(U.current)return;let o=k.current;if(!o)return;let s=(0,L.extractPlainText)(o),y=s.length>0&&s[0]!==s[0].toUpperCase()?s[0].toUpperCase()+s.slice(1):s;P(y)},[P]),oe=(0,d.useCallback)(()=>{j.current=performance.now(),z();let o=k.current;o&&M((0,L.getCursorOffset)(o))},[z,M]);(0,d.useEffect)(()=>{let o=k.current;if(!o)return;let s=u=>{let y=u,f=y.inputType;if(f==="insertParagraph"||f==="insertLineBreak"||f==="insertFromDrop"){u.preventDefault();return}if(f.startsWith("insert")||f.startsWith("delete")){let D=f.startsWith("delete")?"":y.data??"";T(D)&&u.preventDefault()}};return o.addEventListener("beforeinput",s),()=>o.removeEventListener("beforeinput",s)},[T]);let O=(0,d.useCallback)(()=>{U.current=!0},[]),se=(0,d.useCallback)(()=>{U.current=!1,z()},[z]),ae=(0,d.useCallback)(o=>{o.preventDefault();let s=k.current;if(!s)return;let u=(o.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!u)return;let y=s.ownerDocument??document,f=y.getSelection();if(!f||f.rangeCount===0)return;let D=f.getRangeAt(0);if(!s.contains(D.startContainer))return;D.deleteContents();let B=y.createTextNode(u);D.insertNode(B),D.setStartAfter(B),D.collapse(!0),f.removeAllRanges(),f.addRange(D),z()},[z]),X=(0,d.useCallback)(o=>C(o),[C]),V=(0,d.useCallback)(()=>a(!0),[a]),w=(0,d.useCallback)(()=>a(!1),[a]),ne=(0,d.useCallback)(()=>k.current?.focus(),[]),re=(0,d.useCallback)(()=>k.current?.blur(),[]),Q=(0,d.useCallback)(()=>{let o=k.current;return o?(0,L.extractPlainText)(o):""},[]),i=tt()?"plaintext-only":"true";return{inputRef:k,editorProps:{ref:k,contentEditable:i,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":n,"aria-expanded":_,"aria-activedescendant":g,spellCheck:!0,enterKeyHint:"send",onInput:oe,onKeyDown:X,onCompositionStart:O,onCompositionEnd:se,onPaste:ae,onFocus:V,onBlur:w},getPlainText:Q,focus:ne,blur:re}}var R=require("react/jsx-runtime");function ot(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var He=(0,I.forwardRef)(function({onSubmit:l,onError:p,optionOverrides:x,maskCompletedText:r,className:m,apiConfig:b,columns:h,pillPlacement:_="inline",mode:n="auto",optionsPosition:g="below",animations:S=!0,dropdownTrigger:P,closeDropdownOnBlur:C,showNonTappableOptions:M,autoFocus:N=!0,onFocus:$,onBlur:T,value:a,completedParams:k,onChange:U,onParamsChange:ee,submitButton:G},te){let j=(0,I.useRef)(null),z=(0,I.useRef)(null),oe=(0,I.useRef)(()=>{}),O=(0,I.useRef)(null),se=(0,I.useRef)(null);(0,I.useEffect)(()=>{let c=j.current;if(c)return O.current?O.current.setMode(n):O.current=new pe.ModeController(c,n),()=>{O.current?.destroy(),O.current=null}},[n]);let ae=(0,I.useCallback)(c=>{let H=se.current?.current;H&&(H.focus(),(0,pe.setCursorOffset)(H,c))},[]),{completedParams:X,suggestionPills:V,setActivePill:w,segments:ne,newParamId:re,clearNewParamId:Q,placeholderText:i,isFocused:o,isDropdownOpen:s,isLoading:u,activeIndex:y,listboxId:f,handleTextChange:D,handleKeyDown:B,setFocused:q,editingParam:ge,editingAnchor:ke,caretOffset:fe,startEditingParam:t,handleCaretAfterInput:E,handleCaretMove:A,replaceEditingRange:le,dropdownProps:ue,reset:be}=ye({onSubmit:c=>oe.current(c),onError:p,optionOverrides:x,maskCompletedText:r,apiConfig:b,columns:h,dropdownTrigger:P,optionsPosition:g,closeDropdownOnBlur:C,showNonTappableOptions:M,onFocus:$,onBlur:T,value:a,completedParams:k,onChange:U,onParamsChange:ee,source:"full-sdk",setCursor:ae});(0,I.useEffect)(()=>{if(!re)return;let c=window.setTimeout(()=>Q(),650);return()=>window.clearTimeout(c)},[re,Q]);let Ke=y>=0?`${f}-option-${y}`:void 0,{inputRef:Ae,editorProps:Fe,focus:he,blur:Ce,getPlainText:De}=Be({segments:ne,newParamId:re,editingParam:ge,editingAnchor:ke,caretOffset:fe,placeholderText:i,isFocused:o,isDropdownOpen:s,listboxId:f,activeDescendantId:Ke,autoFocus:N,handleTextChange:D,handleKeyDown:B,handleCaretAfterInput:E,handleCaretMove:A,startEditingParam:t,replaceEditingRange:le,setFocused:q});se.current=Ae,(0,I.useLayoutEffect)(()=>{let c=z.current,H=Ae.current;if(!c||!H)return;let ve=()=>{let Re=c.firstElementChild;if(!Re)return;if(H.dataset.aiaEmpty==="true"){c.setAttribute("data-aia-pill-wrapped","");return}let Ve=Re.getBoundingClientRect(),qe=H.getBoundingClientRect();Ve.top>=qe.bottom-2?c.setAttribute("data-aia-pill-wrapped",""):c.removeAttribute("data-aia-pill-wrapped")};ve();let Le=new ResizeObserver(ve);return Le.observe(H),()=>Le.disconnect()},[ne,V.length,u,Ae]),(0,I.useImperativeHandle)(te,()=>({focus:he,blur:Ce,reset:be,setMode:c=>O.current?.setMode(c)}),[he,Ce,be]);let xe=!!ne.length||X.length>0,Se=(0,I.useCallback)(()=>{if(!xe)return;let c=De(),{rawQuery:H,completedParams:ve}=(0,pe.buildQuery)(c,X);l({query:c.trim(),raw_query:H,completed_params:ve}),be()},[xe,X,l,be,De]);oe.current=Se;let We=(0,I.useCallback)(c=>{c.target?.closest("[data-aia-pill]")||he()},[he]),Ne=_==="inline",Ge=_==="dropdown";return(0,R.jsxs)("div",{ref:j,className:`magicx-aia ${J.container} ${m??""}`,"data-pill-placement":_,"data-options-position":g,"data-animations":S?"on":"off","data-mode":ot(n),children:[(0,R.jsx)(_e,{...ue,showPills:Ge}),(0,R.jsxs)("div",{className:J.inputWrapper,onClick:We,children:[(0,R.jsxs)("div",{className:J.editorArea,"data-aia-editor":"",children:[(0,R.jsx)("div",{...Fe,className:J.input,"data-aia-input":""}),Ne&&(u||V.length>0)&&(0,R.jsx)("span",{ref:z,className:J.pillListContainer,"data-aia-pill-list-container":"",children:(0,R.jsx)(me,{pills:V,activePillIndex:0,onSelectPill:w,loading:u})})]}),G===null?null:G===void 0?(0,R.jsx)("button",{type:"button","data-aia-submit":"",className:J.submitButton,disabled:!xe,onClick:c=>{c.stopPropagation(),Se()},"aria-label":"Submit",children:(0,R.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,R.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}):(0,R.jsx)("span",{"data-aia-submit":"",className:J.submitSlot,onClick:c=>{xe&&(c.stopPropagation(),Se())},children:G})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,useAIAutocomplete});
|
|
957
|
+
`,document.head.appendChild(e)}var ue=require("@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"};var Ie=require("react/jsx-runtime");function Je({disabled:e,onClick:t}){return(0,Ie.jsx)("button",{type:"button","data-aia-submit":"",className:Xe.submitButton,disabled:e,onClick:o=>{o.stopPropagation(),t()},"aria-label":"Submit",children:(0,Ie.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,Ie.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var Ze=require("@magicx-eng/ai-autocomplete-vanilla"),w=require("react"),ht={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 Se({onSubmit:e,onError:t,optionOverrides:o,maskCompletedText:l,apiConfig:a,columns:n=2,dropdownTrigger:d,optionsPosition:m,closeDropdownOnBlur:y,showNonTappableOptions:h,onFocus:S,onBlur:P,value:C,completedParams:A,onChange:b,onParamsChange:R,source:B,setCursor:X}){let s=(0,w.useRef)(null),[x,W]=(0,w.useState)(null),V=(0,w.useRef)(e);V.current=e;let T=(0,w.useRef)(t);T.current=t;let oe=(0,w.useRef)(b);oe.current=b;let J=(0,w.useRef)(R);J.current=R;let F=(0,w.useRef)(S);F.current=S;let ae=(0,w.useRef)(P);ae.current=P;let H=(0,w.useRef)(X);H.current=X,(0,w.useEffect)(()=>{if(typeof document>"u")return;let r=new Ze.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:a,optionOverrides:o,maskCompletedText:l,columns:n,dropdownTrigger:d,optionsPosition:m,closeDropdownOnBlur:y,showNonTappableOptions:h,source:B,value:C,completedParams:A,onSubmit:(...E)=>V.current?.(...E),onError:(...E)=>T.current?.(...E),onChange:(...E)=>oe.current?.(...E),onParamsChange:(...E)=>J.current?.(...E),onFocus:()=>F.current?.(),onBlur:()=>ae.current?.(),setCursor:E=>H.current?.(E)});s.current=r,W(r.getState());let D=r.subscribe(E=>W(E));return()=>{D(),r.destroy(),s.current===r&&(s.current=null)}},[]),(0,w.useEffect)(()=>{C!==void 0&&s.current?.setValue(C)},[C]),(0,w.useEffect)(()=>{A!==void 0&&s.current?.setCompletedParams(A)},[A]);let le=JSON.stringify(a??null),ne=(0,w.useRef)(o),Z=(0,w.useRef)(0);if(o!==ne.current){let r=ne.current,D=o,E=Object.keys(r??{}),de=Object.keys(D??{});(E.length!==de.length||de.some(me=>!r?.[me]||D[me]!==r[me]))&&Z.current++,ne.current=o}(0,w.useEffect)(()=>{s.current?.update({apiConfig:a,optionOverrides:o,dropdownTrigger:d,optionsPosition:m,closeDropdownOnBlur:y,showNonTappableOptions:h})},[le,Z.current,d,m,y,h]);let q=(0,w.useRef)(null);q.current===null&&(q.current={handleTextChange:r=>s.current?.handleTextChange(r),handleKeyDown:r=>{let D="nativeEvent"in r?r.nativeEvent:r;s.current?.handleKeyDown(D)},setFocused:r=>s.current?.setFocused(r),startEditingParam:r=>s.current?.startEditingParam(r),exitEditMode:()=>s.current?.exitEditMode(),handleCaretAfterInput:r=>s.current?.handleCaretAfterInput(r),handleCaretMove:r=>s.current?.handleCaretMove(r),replaceEditingRange:r=>s.current?.replaceEditingRange(r)??!1,setActivePill:r=>s.current?.setActivePill(r),removeLastParam:()=>s.current?.removeLastParam(),clearNewParamId:()=>s.current?.clearNewParamId(),reset:()=>s.current?.reset(),selectOption:r=>s.current?.selectOption(r),setActiveDropdownIndex:r=>s.current?.setActiveDropdownIndex(r),handleFocus:()=>s.current?.setFocused(!0),handleBlur:()=>s.current?.setFocused(!1)});let _=q.current,re=(0,w.useCallback)(r=>{let D=r.target.value,de=D.length>0&&!r.nativeEvent?.isComposing&&D[0]!==D[0].toUpperCase()?D[0].toUpperCase()+D.slice(1):D;s.current?.handleTextChange(de)},[]),ie=(0,w.useCallback)(r=>{s.current?.handleKeyDown(r.nativeEvent)},[]),Y=s.current,c=x??ht,i=C!==void 0?C:c.text,p=A!==void 0?A:c.completedParams,g=c.actionableSuggestions,k=g[0],f=Y?.listboxId??"",L=c.activeDropdownIndex>=0&&Y?`${f}-option-${c.activeDropdownIndex}`:void 0,O=c.editingParam,$=O?{type:O.suggestionType,text:O.suggestionPlaceholder,required:!0,options:O.options}:null,he=$??k,Ce=$?[$]:g,be=!Y||c.isLoading&&!c.editingParam&&!c.inSelectionAnimation;return{completedParams:p,suggestionPills:g,setActivePill:_.setActivePill,removeLastParam:_.removeLastParam,segments:c.segments,newParamId:c.newParamId,clearNewParamId:_.clearNewParamId,suggestions:c.suggestions,activeIndex:c.activeDropdownIndex,isReady:c.isReady,isLoading:be,isFocused:c.isFocused,isDropdownOpen:c.isDropdownOpen,placeholderText:c.placeholderText,listboxId:f,error:c.error,handleTextChange:_.handleTextChange,handleKeyDown:_.handleKeyDown,setFocused:_.setFocused,editingParam:O,editingAnchor:c.editingAnchor,caretOffset:c.caretOffset,startEditingParam:_.startEditingParam,exitEditMode:_.exitEditMode,handleCaretAfterInput:_.handleCaretAfterInput,handleCaretMove:_.handleCaretMove,replaceEditingRange:_.replaceEditingRange,inputProps:{value:i,placeholder:c.placeholderText||void 0,onChange:re,onKeyDown:ie,onFocus:_.handleFocus,onBlur:_.handleBlur,role:"combobox","aria-expanded":c.isDropdownOpen,"aria-activedescendant":L,"aria-autocomplete":"list","aria-controls":f},reset:_.reset,dropdownProps:{suggestions:he?[{...he,options:c.filteredOptions}]:[],activeIndex:c.activeDropdownIndex,onSelect:_.selectOption,onHighlight:_.setActiveDropdownIndex,isOpen:c.isDropdownOpen,id:f,pills:Ce,onPillClick:_.setActivePill,isLoading:be,hasTabbedToHighlight:c.hasTabbedToHighlight}}}var z=require("@magicx-eng/ai-autocomplete-vanilla"),u=require("react"),Ae;function bt(){if(Ae!==void 0)return Ae;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Ae=e.contentEditable==="plaintext-only",Ae}function Ye(e){let{segments:t,newParamId:o,editingParam:l,editingAnchor:a,caretOffset:n,placeholderText:d,isFocused:m,isDropdownOpen:y,listboxId:h,activeDescendantId:S,autoFocus:P,handleTextChange:C,handleKeyDown:A,handleCaretAfterInput:b,handleCaretMove:R,startEditingParam:B,replaceEditingRange:X,setFocused:s}=e,x=(0,u.useRef)(null),W=(0,u.useRef)(!1),V=(0,u.useRef)(""),T=(0,u.useRef)(""),oe=(0,u.useRef)(null),J=(0,u.useRef)(0);oe.current=n,(0,u.useEffect)(()=>{if(!P)return;let i=x.current;i&&(document.activeElement===i?s(!0):i.focus())},[P,s]),(0,u.useEffect)(()=>{let i=x.current;if(!i)return;let p=i.ownerDocument??document,g=()=>{let k=p.getSelection();if(!k||k.rangeCount===0||!k.anchorNode||!i.contains(k.anchorNode))return;let f=k.anchorNode,$=(f.nodeType===Node.ELEMENT_NODE?f:f.parentElement)?.closest('strong[data-seg="completed"][data-param-id]')?.dataset.paramId??null;if($&&$!==l?.id){B($);return}performance.now()-J.current<50||R((0,z.getCursorOffset)(i))};return p.addEventListener("selectionchange",g),()=>p.removeEventListener("selectionchange",g)},[l,B,R]),(0,u.useLayoutEffect)(()=>{let i=x.current;i&&(0,z.renderEditableContent)({input:i,segments:t,newParamId:o,editingParamId:l?.id??null,placeholderText:d??"",isFocused:m})},[t,o,l,d,m]),(0,u.useLayoutEffect)(()=>{let i=V.current,p=o??"";if(V.current=p,!p||p===i)return;let g=x.current;if(!g)return;g.focus();let k=oe.current??(0,z.plainTextLength)(g);(0,z.setCursorOffset)(g,k)},[o]),(0,u.useLayoutEffect)(()=>{let i=T.current,p=l?.id??"";if(T.current=p,!p||p===i||a==null)return;let g=x.current;g&&(0,z.setCursorOffset)(g,a)},[l,a]);let F=(0,u.useCallback)(()=>{if(W.current)return;let i=x.current;if(!i)return;let p=(0,z.extractPlainText)(i),k=p.length>0&&p[0]!==p[0].toUpperCase()?p[0].toUpperCase()+p.slice(1):p;C(k)},[C]),ae=(0,u.useCallback)(()=>{J.current=performance.now(),F();let i=x.current;i&&b((0,z.getCursorOffset)(i))},[F,b]);(0,u.useEffect)(()=>{let i=x.current;if(!i)return;let p=g=>{let k=g,f=k.inputType;if(f==="insertParagraph"||f==="insertLineBreak"||f==="insertFromDrop"){g.preventDefault();return}if(f.startsWith("insert")||f.startsWith("delete")){let L=f.startsWith("delete")?"":k.data??"";X(L)&&g.preventDefault()}};return i.addEventListener("beforeinput",p),()=>i.removeEventListener("beforeinput",p)},[X]);let H=(0,u.useCallback)(()=>{W.current=!0},[]),le=(0,u.useCallback)(()=>{W.current=!1,F()},[F]),ne=(0,u.useCallback)(i=>{i.preventDefault();let p=x.current;if(!p)return;let g=(i.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!g)return;let k=p.ownerDocument??document,f=k.getSelection();if(!f||f.rangeCount===0)return;let L=f.getRangeAt(0);if(!p.contains(L.startContainer))return;L.deleteContents();let O=k.createTextNode(g);L.insertNode(O),L.setStartAfter(O),L.collapse(!0),f.removeAllRanges(),f.addRange(L),F()},[F]),Z=(0,u.useCallback)(i=>A(i),[A]),q=(0,u.useCallback)(()=>s(!0),[s]),_=(0,u.useCallback)(()=>s(!1),[s]),re=(0,u.useCallback)(()=>x.current?.focus(),[]),ie=(0,u.useCallback)(()=>x.current?.blur(),[]),Y=(0,u.useCallback)(()=>{let i=x.current;return i?(0,z.extractPlainText)(i):""},[]),c=bt()?"plaintext-only":"true";return{inputRef:x,editorProps:{ref:x,contentEditable:c,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":h,"aria-expanded":y,"aria-activedescendant":S,spellCheck:!0,enterKeyHint:"send",onInput:ae,onKeyDown:Z,onCompositionStart:H,onCompositionEnd:le,onPaste:ne,onFocus:q,onBlur:_},getPlainText:Y,focus:re,blur:ie}}var K=require("react/jsx-runtime");function xt(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var et=(0,I.forwardRef)(function({onSubmit:t,onError:o,optionOverrides:l,maskCompletedText:a,className:n,apiConfig:d,columns:m,pillPlacement:y="inline",mode:h="auto",optionsPosition:S="below",animations:P=!0,dropdownTrigger:C,closeDropdownOnBlur:A,showNonTappableOptions:b,autoFocus:R=!0,onFocus:B,onBlur:X,value:s,completedParams:x,onChange:W,onParamsChange:V,submitButton:T},oe){let J=(0,I.useRef)(null),F=(0,I.useRef)(null),ae=(0,I.useRef)(()=>{}),H=(0,I.useRef)(null),le=(0,I.useRef)(null);(0,I.useEffect)(()=>{let v=J.current;if(v)return H.current?H.current.setMode(h):H.current=new ue.ModeController(v,h),()=>{H.current?.destroy(),H.current=null}},[h]);let ne=(0,I.useCallback)(v=>{let G=le.current?.current;G&&(G.focus(),(0,ue.setCursorOffset)(G,v))},[]),{completedParams:Z,suggestionPills:q,setActivePill:_,segments:re,newParamId:ie,clearNewParamId:Y,placeholderText:c,isFocused:i,isDropdownOpen:p,isLoading:g,activeIndex:k,listboxId:f,handleTextChange:L,handleKeyDown:O,setFocused:$,editingParam:he,editingAnchor:Ce,caretOffset:be,startEditingParam:r,handleCaretAfterInput:D,handleCaretMove:E,replaceEditingRange:de,dropdownProps:me,reset:xe}=Se({onSubmit:v=>ae.current(v),onError:o,optionOverrides:l,maskCompletedText:a,apiConfig:d,columns:m,dropdownTrigger:C,optionsPosition:S,closeDropdownOnBlur:A,showNonTappableOptions:b,onFocus:B,onBlur:X,value:s,completedParams:x,onChange:W,onParamsChange:V,source:"full-sdk",setCursor:ne});(0,I.useEffect)(()=>{if(!ie)return;let v=window.setTimeout(()=>Y(),650);return()=>window.clearTimeout(v)},[ie,Y]);let tt=k>=0?`${f}-option-${k}`:void 0,{inputRef:Pe,editorProps:ot,focus:ve,blur:Fe,getPlainText:He}=Ye({segments:re,newParamId:ie,editingParam:he,editingAnchor:Ce,caretOffset:be,placeholderText:c,isFocused:i,isDropdownOpen:p,listboxId:f,activeDescendantId:tt,autoFocus:R,handleTextChange:L,handleKeyDown:O,handleCaretAfterInput:D,handleCaretMove:E,startEditingParam:r,replaceEditingRange:de,setFocused:$});le.current=Pe,(0,I.useLayoutEffect)(()=>{let v=F.current,G=Pe.current;if(!v||!G)return;let ye=()=>{let Me=v.firstElementChild;if(!Me)return;let it=Me.getBoundingClientRect(),st=G.getBoundingClientRect();it.top>=st.bottom-2?v.setAttribute("data-aia-pill-wrapped",""):v.removeAttribute("data-aia-pill-wrapped")};ye();let Oe=new ResizeObserver(ye);return Oe.observe(G),()=>Oe.disconnect()},[re,q.length,g,Pe]),(0,I.useImperativeHandle)(oe,()=>({focus:ve,blur:Fe,reset:xe,setMode:v=>H.current?.setMode(v)}),[ve,Fe,xe]);let we=!!re.length||Z.length>0,Ee=(0,I.useCallback)(()=>{if(!we)return;let v=He(),{rawQuery:G,completedParams:ye}=(0,ue.buildQuery)(v,Z);t({query:v.trim(),raw_query:G,completed_params:ye}),xe()},[we,Z,t,xe,He]);ae.current=Ee;let at=(0,I.useCallback)(v=>{v.target?.closest("[data-aia-pill]")||ve()},[ve]),nt=y==="inline",rt=y==="dropdown";return(0,K.jsxs)("div",{ref:J,className:`magicx-aia ${se.container} ${n??""}`,"data-pill-placement":y,"data-options-position":S,"data-animations":P?"on":"off","data-mode":xt(h),children:[(0,K.jsx)(ke,{...me,showPills:rt}),(0,K.jsxs)("div",{className:se.inputWrapper,onClick:at,children:[(0,K.jsxs)("div",{className:se.editorArea,"data-aia-editor":"",children:[(0,K.jsx)("div",{...ot,className:se.input,"data-aia-input":""}),nt&&(g||q.length>0)&&(0,K.jsx)("span",{ref:F,className:se.pillListContainer,"data-aia-pill-list-container":"",children:(0,K.jsx)(_e,{pills:q,activePillIndex:0,onSelectPill:_,loading:g})})]}),T===null?null:T===void 0?(0,K.jsx)(Je,{disabled:!we,onClick:Ee}):(0,K.jsx)("span",{"data-aia-submit":"",className:se.submitSlot,onClick:v=>{we&&(v.stopPropagation(),Ee())},children:T})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,useAIAutocomplete});
|
|
832
982
|
//# sourceMappingURL=index.js.map
|