@magicx-eng/ai-autocomplete-react 0.5.3 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -2
- package/dist/index.js +117 -69
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +116 -68
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{forwardRef as zt,useCallback as Te,useEffect as
|
|
1
|
+
import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as Ft,useLayoutEffect as Ot,useRef as pe}from"react";if(typeof document<"u"&&!document.getElementById("ac-style-67791514")){let e=document.createElement("style");e.id="ac-style-67791514",e.textContent=`.AIAutocomplete-module_container_KKjFU {
|
|
2
2
|
position: relative;
|
|
3
3
|
/* Inherits the host page's font by default. Consumers can pin a specific
|
|
4
4
|
font on the library via \`--aia-font-family: 'Custom Font'\` without
|
|
@@ -12,6 +12,7 @@ import{forwardRef as zt,useCallback as Te,useEffect as at,useImperativeHandle as
|
|
|
12
12
|
border: 1px solid var(--aia-border, #b0b0b0);
|
|
13
13
|
border-radius: 20px;
|
|
14
14
|
background: var(--aia-surface, #ffffff);
|
|
15
|
+
box-shadow: var(--aia-shadow, none);
|
|
15
16
|
overflow: hidden;
|
|
16
17
|
display: flex;
|
|
17
18
|
align-items: center;
|
|
@@ -167,75 +168,106 @@ import{forwardRef as zt,useCallback as Te,useEffect as at,useImperativeHandle as
|
|
|
167
168
|
box-sizing: border-box;
|
|
168
169
|
}
|
|
169
170
|
|
|
170
|
-
/*
|
|
171
|
+
/*
|
|
172
|
+
* Primitive color ramp \u2014 single source of truth, mirroring the Figma
|
|
173
|
+
* "Primitives" collection. INTERNAL: theme via the public --aia-* vars below,
|
|
174
|
+
* not these. Mode-independent (raw values; the same in light and dark).
|
|
175
|
+
*/
|
|
176
|
+
:where(.magicx-aia) {
|
|
177
|
+
--aia-primitive-neutral-0: #000000;
|
|
178
|
+
--aia-primitive-neutral-250: #323232;
|
|
179
|
+
--aia-primitive-neutral-300: #333539;
|
|
180
|
+
--aia-primitive-neutral-400: #4a4a4a;
|
|
181
|
+
--aia-primitive-neutral-500: #505050;
|
|
182
|
+
--aia-primitive-neutral-700: #b0b0b0;
|
|
183
|
+
--aia-primitive-neutral-750: #bdbdbd;
|
|
184
|
+
--aia-primitive-neutral-900: #e7e7e7;
|
|
185
|
+
--aia-primitive-neutral-1000: #ffffff;
|
|
186
|
+
--aia-primitive-blue-50: #eef2ff;
|
|
187
|
+
--aia-primitive-neutral-750-a50: rgba(189, 189, 189, 0.51);
|
|
188
|
+
--aia-primitive-neutral-700-a40: rgba(176, 176, 176, 0.4);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
/* Light mode defaults (base) \u2014 public --aia-* vars resolve to primitives */
|
|
171
192
|
:where(.magicx-aia),
|
|
172
193
|
:where(.magicx-aia[data-mode="light"]) {
|
|
173
|
-
--aia-surface:
|
|
174
|
-
--aia-border:
|
|
175
|
-
|
|
194
|
+
--aia-surface: var(--aia-primitive-neutral-1000);
|
|
195
|
+
--aia-border: rgba(17, 24, 39, 0.14); /* subtle slate hairline (off-palette) */
|
|
196
|
+
/* Elevation for the input container (.inputWrapper). */
|
|
197
|
+
--aia-shadow:
|
|
198
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(16, 24, 40, 0.1),
|
|
199
|
+
0 8px 24px rgba(16, 24, 40, 0.16);
|
|
200
|
+
--aia-dropdown-border: var(
|
|
201
|
+
--aia-primitive-neutral-900
|
|
202
|
+
); /* was #e5e7eb \u2014 snapped to palette (\u03942) */
|
|
176
203
|
--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
|
|
177
|
-
--aia-pill-bg:
|
|
178
|
-
--aia-pill-color:
|
|
204
|
+
--aia-pill-bg: var(--aia-primitive-neutral-750); /* solid; per-pill opacity via getPillOpacity */
|
|
205
|
+
--aia-pill-color: var(--aia-primitive-neutral-300);
|
|
179
206
|
--aia-pill-font-size: 14px;
|
|
180
207
|
|
|
181
|
-
--aia-option-bg:
|
|
182
|
-
--aia-option-color:
|
|
183
|
-
--aia-option-color-selected:
|
|
208
|
+
--aia-option-bg: var(--aia-primitive-blue-50);
|
|
209
|
+
--aia-option-color: var(--aia-primitive-neutral-500);
|
|
210
|
+
--aia-option-color-selected: var(--aia-primitive-neutral-0);
|
|
184
211
|
--aia-option-font-size: 14px;
|
|
185
212
|
|
|
186
|
-
--aia-written-text-color:
|
|
213
|
+
--aia-written-text-color: var(--aia-primitive-neutral-0);
|
|
187
214
|
--aia-written-text-font-size: 14px;
|
|
188
215
|
--aia-caret-color: var(--aia-written-text-color, #000000);
|
|
189
216
|
|
|
190
|
-
--aia-submit-bg:
|
|
191
|
-
--aia-submit-color:
|
|
217
|
+
--aia-submit-bg: var(--aia-primitive-neutral-0);
|
|
218
|
+
--aia-submit-color: var(--aia-primitive-neutral-1000);
|
|
192
219
|
|
|
193
|
-
--aia-color-text-muted: #6b7280;
|
|
220
|
+
--aia-color-text-muted: #6b7280; /* off shared palette (slate) */
|
|
194
221
|
|
|
195
|
-
--aia-skeleton-bg:
|
|
222
|
+
--aia-skeleton-bg: var(--aia-primitive-neutral-750-a50);
|
|
196
223
|
|
|
197
|
-
--aia-streak-rgb: 99, 102, 241;
|
|
224
|
+
--aia-streak-rgb: 99, 102, 241; /* off shared palette (indigo effect) */
|
|
198
225
|
--aia-streak-glass-bg: rgba(99, 102, 241, 0.1);
|
|
199
226
|
|
|
200
|
-
--aia-footer-
|
|
201
|
-
--aia-footer-
|
|
202
|
-
--aia-footer-
|
|
203
|
-
--aia-footer-badge-border: rgba(189, 189, 189, 0.51);
|
|
227
|
+
--aia-footer-hint-color: var(--aia-primitive-neutral-500);
|
|
228
|
+
--aia-footer-brand-color: var(--aia-primitive-neutral-700);
|
|
229
|
+
--aia-footer-badge-border: var(--aia-primitive-neutral-750-a50);
|
|
204
230
|
}
|
|
205
231
|
|
|
206
232
|
/* Dark mode defaults */
|
|
207
233
|
:where(.magicx-aia[data-mode="dark"]) {
|
|
208
|
-
--aia-surface:
|
|
209
|
-
--aia-border:
|
|
210
|
-
|
|
234
|
+
--aia-surface: var(--aia-primitive-neutral-0);
|
|
235
|
+
--aia-border: var(--aia-primitive-neutral-500);
|
|
236
|
+
/* Elevation for the input container (.inputWrapper) \u2014 tuned for dark surfaces:
|
|
237
|
+
a faint top highlight + deeper ambient shadows. */
|
|
238
|
+
--aia-shadow:
|
|
239
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.4),
|
|
240
|
+
0 8px 24px rgba(0, 0, 0, 0.5);
|
|
241
|
+
--aia-dropdown-border: var(
|
|
242
|
+
--aia-primitive-neutral-400
|
|
243
|
+
); /* was #484848 \u2014 snapped to palette (\u03942) */
|
|
211
244
|
--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
|
|
212
|
-
--aia-pill-bg:
|
|
213
|
-
--aia-pill-color:
|
|
245
|
+
--aia-pill-bg: var(--aia-primitive-neutral-750);
|
|
246
|
+
--aia-pill-color: var(--aia-primitive-neutral-700);
|
|
214
247
|
--aia-pill-font-size: 14px;
|
|
215
248
|
|
|
216
|
-
--aia-option-bg:
|
|
217
|
-
--aia-option-color:
|
|
218
|
-
--aia-option-color-selected:
|
|
249
|
+
--aia-option-bg: var(--aia-primitive-neutral-250);
|
|
250
|
+
--aia-option-color: var(--aia-primitive-neutral-700);
|
|
251
|
+
--aia-option-color-selected: var(--aia-primitive-neutral-1000);
|
|
219
252
|
--aia-option-font-size: 14px;
|
|
220
253
|
|
|
221
|
-
--aia-written-text-color:
|
|
254
|
+
--aia-written-text-color: var(--aia-primitive-neutral-1000);
|
|
222
255
|
--aia-written-text-font-size: 14px;
|
|
223
256
|
--aia-caret-color: var(--aia-written-text-color, #ffffff);
|
|
224
257
|
|
|
225
|
-
--aia-submit-bg:
|
|
226
|
-
--aia-submit-color:
|
|
258
|
+
--aia-submit-bg: var(--aia-primitive-neutral-1000);
|
|
259
|
+
--aia-submit-color: var(--aia-primitive-neutral-0);
|
|
227
260
|
|
|
228
|
-
--aia-color-text-muted: #c1c4cb;
|
|
261
|
+
--aia-color-text-muted: #c1c4cb; /* off shared palette (slate) */
|
|
229
262
|
|
|
230
|
-
--aia-skeleton-bg:
|
|
263
|
+
--aia-skeleton-bg: var(--aia-primitive-neutral-300);
|
|
231
264
|
|
|
232
265
|
--aia-streak-rgb: 255, 255, 255;
|
|
233
266
|
--aia-streak-glass-bg: rgba(255, 255, 255, 0.1);
|
|
234
267
|
|
|
235
|
-
--aia-footer-
|
|
236
|
-
--aia-footer-
|
|
237
|
-
--aia-footer-
|
|
238
|
-
--aia-footer-badge-border: #505050;
|
|
268
|
+
--aia-footer-hint-color: var(--aia-primitive-neutral-700);
|
|
269
|
+
--aia-footer-brand-color: var(--aia-primitive-neutral-500);
|
|
270
|
+
--aia-footer-badge-border: var(--aia-primitive-neutral-500);
|
|
239
271
|
}
|
|
240
272
|
|
|
241
273
|
/* optionsPosition: dropdown above the input. The sections live inside the
|
|
@@ -253,7 +285,7 @@ import{forwardRef as zt,useCallback as Te,useEffect as at,useImperativeHandle as
|
|
|
253
285
|
top: auto;
|
|
254
286
|
bottom: 100%;
|
|
255
287
|
margin-top: 0;
|
|
256
|
-
margin-bottom:
|
|
288
|
+
margin-bottom: var(--aia-dropdown-offset, 13px);
|
|
257
289
|
}
|
|
258
290
|
|
|
259
291
|
:where(.magicx-aia[data-options-position="above"]) [data-aia-dropdown] .aia-stack,
|
|
@@ -261,15 +293,6 @@ import{forwardRef as zt,useCallback as Te,useEffect as at,useImperativeHandle as
|
|
|
261
293
|
flex-direction: column-reverse;
|
|
262
294
|
}
|
|
263
295
|
|
|
264
|
-
/* The footer sits at the top when the dropdown is above, so flip its own
|
|
265
|
-
internal stack too \u2014 the divider should sit BELOW the hint/branding row
|
|
266
|
-
(between the footer and the options beneath it), not above it. The footer's
|
|
267
|
-
own class is CSS-module-scoped, so target the stable data attribute. */
|
|
268
|
-
:where(.magicx-aia[data-options-position="above"]) [data-aia-dropdown] [data-aia-footer],
|
|
269
|
-
[data-aia-dropdown][data-options-position="above"] [data-aia-footer] {
|
|
270
|
-
flex-direction: column-reverse;
|
|
271
|
-
}
|
|
272
|
-
|
|
273
296
|
/* Disable all animations when data-animations="off" */
|
|
274
297
|
:where(.magicx-aia[data-animations="off"]) *,
|
|
275
298
|
:where(.magicx-aia[data-animations="off"]) *::before,
|
|
@@ -283,7 +306,8 @@ import{forwardRef as zt,useCallback as Te,useEffect as at,useImperativeHandle as
|
|
|
283
306
|
right: 0;
|
|
284
307
|
top: 100%;
|
|
285
308
|
max-width: 544px;
|
|
286
|
-
|
|
309
|
+
/* Gap between the input box and the dropdown. Tunable via --aia-dropdown-offset. */
|
|
310
|
+
margin-top: var(--aia-dropdown-offset, 13px);
|
|
287
311
|
display: flex;
|
|
288
312
|
flex-direction: column;
|
|
289
313
|
box-sizing: border-box;
|
|
@@ -414,19 +438,15 @@ import{forwardRef as zt,useCallback as Te,useEffect as at,useImperativeHandle as
|
|
|
414
438
|
justify-content: space-around;
|
|
415
439
|
}
|
|
416
440
|
}
|
|
417
|
-
`,document.head.appendChild(e)}import{jsx as He}from"react/jsx-runtime";function le({gap:e,align:d="center",justify:n="start",noWrap:
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
441
|
+
`,document.head.appendChild(e)}import{jsx as He}from"react/jsx-runtime";function le({gap:e,align:d="center",justify:n="start",noWrap:m=!1,inline:i=!1,className:a,children:s,...l}){let b=e?{"--aia-cluster-gap":e}:void 0,x={className:a?`aia-cluster ${a}`:"aia-cluster","data-align":d,"data-justify":n,"data-nowrap":m||void 0,"data-inline":i||void 0,style:b,...l};return i?He("span",{...x,children:s}):He("div",{...x,children:s})}if(typeof document<"u"&&!document.getElementById("ac-style-56b0c577")){let e=document.createElement("style");e.id="ac-style-56b0c577",e.textContent=`/* The footer adds its own 8px horizontal inset so it stays clear of the
|
|
442
|
+
dropdown's rounded edges. The top inset (--aia-footer-gap) adds breathing
|
|
443
|
+
room above the hint/branding row so the footer doesn't butt against the last
|
|
444
|
+
option row \u2014 additive to the dropdown's 8px section gap. */
|
|
421
445
|
.DropdownFooter-module_footer_qQQ7x {
|
|
422
446
|
display: flex;
|
|
423
447
|
flex-direction: column;
|
|
424
448
|
gap: 8px;
|
|
425
|
-
padding:
|
|
426
|
-
}
|
|
427
|
-
|
|
428
|
-
.DropdownFooter-module_divider_FlX4C {
|
|
429
|
-
border-top: 1px solid var(--aia-footer-divider, rgba(176, 176, 176, 0.4));
|
|
449
|
+
padding: var(--aia-footer-gap, 8px) 8px 0;
|
|
430
450
|
}
|
|
431
451
|
|
|
432
452
|
.DropdownFooter-module_hintGroup_ZzbPf {
|
|
@@ -487,7 +507,19 @@ import{forwardRef as zt,useCallback as Te,useEffect as at,useImperativeHandle as
|
|
|
487
507
|
line-height: 18px;
|
|
488
508
|
color: var(--aia-footer-brand-color, #b0b0b0);
|
|
489
509
|
}
|
|
490
|
-
|
|
510
|
+
|
|
511
|
+
/* Mobile footer variant (Figma "Mobile"): on phone-width viewports drop the
|
|
512
|
+
keyboard hint ("tab to select" is meaningless on touch), leaving only the
|
|
513
|
+
AI-Autocomplete brand pinned to the right. */
|
|
514
|
+
@media (max-width: 768px) {
|
|
515
|
+
.DropdownFooter-module_hintGroup_ZzbPf {
|
|
516
|
+
display: none;
|
|
517
|
+
}
|
|
518
|
+
.DropdownFooter-module_row_BgZ6Q {
|
|
519
|
+
justify-content: flex-end;
|
|
520
|
+
}
|
|
521
|
+
}
|
|
522
|
+
`,document.head.appendChild(e)}var U={footer:"DropdownFooter-module_footer_qQQ7x",hintGroup:"DropdownFooter-module_hintGroup_ZzbPf",brandLink:"DropdownFooter-module_brandLink_r4f3R",key:"DropdownFooter-module_key_Bz1H-",hint:"DropdownFooter-module_hint_GKEOH",brand:"DropdownFooter-module_brand_Al-lR",badge:"DropdownFooter-module_badge_Fk9vg",row:"DropdownFooter-module_row_BgZ6Q"};import{jsx as de,jsxs as Se}from"react/jsx-runtime";function Ne({isOptionHighlighted:e=!1,isInputEmpty:d=!1}){let{key:n,hint:m}=ut(e,d);return de("footer",{className:U.footer,"data-aia-footer":"",children:Se(le,{justify:"between",noWrap:!0,className:U.row,children:[Se(le,{gap:"5px",className:U.hintGroup,children:[de("kbd",{className:U.key,children:n}),de("span",{className:U.hint,children:m})]}),Se("a",{className:U.brandLink,href:"https://ai-autocomplete.com",target:"_blank",rel:"noopener noreferrer",children:[de("span",{className:U.brand,children:"AI"}),de("span",{className:U.badge,children:"Autocomplete"})]})]})})}if(typeof document<"u"&&!document.getElementById("ac-style-04fef8d6")){let e=document.createElement("style");e.id="ac-style-04fef8d6",e.textContent=`.Pill-module_pill_3Rkw- {
|
|
491
523
|
display: inline-flex;
|
|
492
524
|
align-items: center;
|
|
493
525
|
justify-content: center;
|
|
@@ -539,7 +571,7 @@ import{forwardRef as zt,useCallback as Te,useEffect as at,useImperativeHandle as
|
|
|
539
571
|
opacity: 0;
|
|
540
572
|
}
|
|
541
573
|
}
|
|
542
|
-
`,document.head.appendChild(e)}var Q={pill:"Pill-module_pill_3Rkw-",fadeIn:"Pill-module_fadeIn_Bbqtz",rounded:"Pill-module_rounded_6WMps",skeleton:"Pill-module_skeleton_-u9-j",skeletonPulse:"Pill-module_skeletonPulse_xHh-7"};import{jsx as mt}from"react/jsx-runtime";var Ae={selected:1,first:.7,next:.4,last:.2};function
|
|
574
|
+
`,document.head.appendChild(e)}var Q={pill:"Pill-module_pill_3Rkw-",fadeIn:"Pill-module_fadeIn_Bbqtz",rounded:"Pill-module_rounded_6WMps",skeleton:"Pill-module_skeleton_-u9-j",skeletonPulse:"Pill-module_skeletonPulse_xHh-7"};import{jsx as mt}from"react/jsx-runtime";var Ae={selected:1,first:.7,next:.4,last:.2};function We({label:e,state:d,selected:n,rounded:m,loading:i,onClick:a}){let s=[Q.pill,m?Q.rounded:"",n&&!i?Q.active:"",i?Q.skeleton:""].filter(Boolean).join(" ");return mt("button",{type:"button","data-aia-pill":"","data-aia-loading":i?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:s,style:{opacity:Ae[d]},onMouseDown:l=>l.preventDefault(),onClick:i?void 0:a,disabled:i,children:e})}if(typeof document<"u"&&!document.getElementById("ac-style-0fcb7940")){let e=document.createElement("style");e.id="ac-style-0fcb7940",e.textContent=`.PillList-module_list_qvLqO {
|
|
543
575
|
position: relative;
|
|
544
576
|
z-index: 1;
|
|
545
577
|
pointer-events: auto;
|
|
@@ -549,7 +581,7 @@ import{forwardRef as zt,useCallback as Te,useEffect as at,useImperativeHandle as
|
|
|
549
581
|
align-items: center;
|
|
550
582
|
vertical-align: middle;
|
|
551
583
|
}
|
|
552
|
-
`,document.head.appendChild(e)}var Pe={list:"PillList-module_list_qvLqO"};import{jsx as
|
|
584
|
+
`,document.head.appendChild(e)}var Pe={list:"PillList-module_list_qvLqO"};import{jsx as be}from"react/jsx-runtime";var gt=[125,69];function Ke(e){return e===0?"first":e===1?"next":"last"}function xe({pills:e,activePillIndex:d,onSelectPill:n,activeSelected:m,rounded:i,loading:a}){return a&&e.length===0?be("span",{className:Pe.list,"data-aia-pill-list-loading":"",children:gt.map((s,l)=>be("span",{"data-aia-pill-skeleton":"",className:`${Q.pill} ${i?Q.rounded:""} ${Q.skeleton}`,style:{width:s,opacity:Ae[Ke(l)]}},`skel-${s}`))}):be("span",{className:Pe.list,"data-aia-pill-list-loading":a?"":void 0,children:e.map((s,l)=>{let b=!!m&&l===d;return be(We,{label:s.text,state:b?"selected":Ke(l),selected:b,rounded:i,loading:a,onClick:()=>n(l)},`${s.type}-${s.text}`)})})}import{useEffect as ft,useLayoutEffect as ht,useRef as bt,useState as xt}from"react";if(typeof document<"u"&&!document.getElementById("ac-style-948e58da")){let e=document.createElement("style");e.id="ac-style-948e58da",e.textContent=`@layer layout {
|
|
553
585
|
.aia-grid {
|
|
554
586
|
display: grid;
|
|
555
587
|
grid-template-columns: repeat(
|
|
@@ -582,7 +614,8 @@ import{forwardRef as zt,useCallback as Te,useEffect as at,useImperativeHandle as
|
|
|
582
614
|
border-radius: 3px;
|
|
583
615
|
}
|
|
584
616
|
|
|
585
|
-
/* Fade wrapper \u2014 bottom
|
|
617
|
+
/* Fade wrapper \u2014 bottom gradient overlay shown while the grid overflows
|
|
618
|
+
below: overflowing options fade into the dropdown surface color. */
|
|
586
619
|
.aia-grid-fade {
|
|
587
620
|
position: relative;
|
|
588
621
|
}
|
|
@@ -596,14 +629,18 @@ import{forwardRef as zt,useCallback as Te,useEffect as at,useImperativeHandle as
|
|
|
596
629
|
pointer-events: none;
|
|
597
630
|
opacity: 0;
|
|
598
631
|
transition: opacity 150ms ease-out;
|
|
599
|
-
|
|
600
|
-
mask-image: linear-gradient(to bottom, transparent, white);
|
|
632
|
+
background: linear-gradient(to bottom, transparent, var(--aia-surface, #ffffff));
|
|
601
633
|
}
|
|
602
634
|
.aia-grid-fade[data-fade]::after {
|
|
603
635
|
opacity: 1;
|
|
604
636
|
}
|
|
637
|
+
|
|
638
|
+
/* Glass surface has no solid color to fade into, so skip the fade entirely. */
|
|
639
|
+
[data-aia-surface="glass"] .aia-grid-fade::after {
|
|
640
|
+
display: none;
|
|
641
|
+
}
|
|
605
642
|
}
|
|
606
|
-
`,document.head.appendChild(e)}import{jsx as Ge}from"react/jsx-runtime";function je({min:e="16rem",max:d,gap:n,scroll:
|
|
643
|
+
`,document.head.appendChild(e)}import{jsx as Ge}from"react/jsx-runtime";function je({min:e="16rem",max:d,gap:n,scroll:m=!1,maxHeight:i,fade:a=!1,className:s,children:l,...b}){let x=bt(null),[R,I]=xt(!1);ft(()=>{if(!a)return;let w=x.current;if(!w)return;let C=()=>{I(w.scrollHeight-w.scrollTop-w.clientHeight>1)};w.addEventListener("scroll",C,{passive:!0});let z=new ResizeObserver(C);return z.observe(w),()=>{w.removeEventListener("scroll",C),z.disconnect()}},[a]),ht(()=>{let w=x.current;!a||!w||I(w.scrollHeight-w.scrollTop-w.clientHeight>1)},[a,l]);let k={"--aia-grid-min":e};d&&(k["--aia-grid-max"]=d),n&&(k["--aia-grid-gap"]=n),i&&(k["--aia-grid-max-height"]=i);let S=Ge("div",{ref:x,className:!a&&s?`aia-grid ${s}`:"aia-grid","data-scroll":m||void 0,style:k,...a?{}:b,children:l});return a?Ge("div",{className:s?`aia-grid-fade ${s}`:"aia-grid-fade","data-fade":R?"":void 0,...b,children:S}):S}import{useEffect as vt,useRef as wt,useState as yt}from"react";if(typeof document<"u"&&!document.getElementById("ac-style-82820da7")){let e=document.createElement("style");e.id="ac-style-82820da7",e.textContent=`.SuggestionItem-module_item_d4vpD {
|
|
607
644
|
position: relative;
|
|
608
645
|
overflow: visible;
|
|
609
646
|
display: flex;
|
|
@@ -953,7 +990,7 @@ import{forwardRef as zt,useCallback as Te,useEffect as at,useImperativeHandle as
|
|
|
953
990
|
filter: brightness(0.55);
|
|
954
991
|
}
|
|
955
992
|
}
|
|
956
|
-
`,document.head.appendChild(e)}var H={item:"SuggestionItem-module_item_d4vpD",fadeIn:"SuggestionItem-module_fadeIn_I8u35",content:"SuggestionItem-module_content_T-Qba",tappable:"SuggestionItem-module_tappable_70KcX",nonTappable:"SuggestionItem-module_nonTappable_xSZM-",highlighted:"SuggestionItem-module_highlighted_Hb0SU",tag:"SuggestionItem-module_tag_e3Fwe",pressed:"SuggestionItem-module_pressed_98o-r",glassFade:"SuggestionItem-module_glassFade_oyiSj",tapDown:"SuggestionItem-module_tapDown_G3WGz",streaks:"SuggestionItem-module_streaks_d9PEB",streaksVert:"SuggestionItem-module_streaksVert_ERlV1",streakHorizRight:"SuggestionItem-module_streakHorizRight_aboGz",streakHorizLeft:"SuggestionItem-module_streakHorizLeft_BreWJ",streakVertUp:"SuggestionItem-module_streakVertUp_to1GD",streakVertDown:"SuggestionItem-module_streakVertDown_OrcLh",skeletonPulse:"SuggestionItem-module_skeletonPulse_plvdD",text:"SuggestionItem-module_text_yqoh9"};import{jsx as
|
|
993
|
+
`,document.head.appendChild(e)}var H={item:"SuggestionItem-module_item_d4vpD",fadeIn:"SuggestionItem-module_fadeIn_I8u35",content:"SuggestionItem-module_content_T-Qba",tappable:"SuggestionItem-module_tappable_70KcX",nonTappable:"SuggestionItem-module_nonTappable_xSZM-",highlighted:"SuggestionItem-module_highlighted_Hb0SU",tag:"SuggestionItem-module_tag_e3Fwe",pressed:"SuggestionItem-module_pressed_98o-r",glassFade:"SuggestionItem-module_glassFade_oyiSj",tapDown:"SuggestionItem-module_tapDown_G3WGz",streaks:"SuggestionItem-module_streaks_d9PEB",streaksVert:"SuggestionItem-module_streaksVert_ERlV1",streakHorizRight:"SuggestionItem-module_streakHorizRight_aboGz",streakHorizLeft:"SuggestionItem-module_streakHorizLeft_BreWJ",streakVertUp:"SuggestionItem-module_streakVertUp_to1GD",streakVertDown:"SuggestionItem-module_streakVertDown_OrcLh",skeletonPulse:"SuggestionItem-module_skeletonPulse_plvdD",text:"SuggestionItem-module_text_yqoh9"};import{jsx as ve,jsxs as Ve}from"react/jsx-runtime";function qe({option:e,isHighlighted:d,onSelect:n,onHighlight:m,id:i,loading:a}){let[s,l]=yt(!1),b=wt(void 0);vt(()=>()=>clearTimeout(b.current),[]);let x=()=>{a||!e.is_tappable||s||(l(!0),n(e),clearTimeout(b.current),b.current=setTimeout(()=>l(!1),500))},R=[H.item,d&&!a?H.highlighted:"",e.is_tappable?H.tappable:H.nonTappable,s?H.pressed:""].filter(Boolean).join(" ");return Ve("div",{id:i,role:"option","data-aia-option":"","data-aia-loading":a?"":void 0,"aria-selected":d,className:R,tabIndex:a||!e.is_tappable?-1:0,onClick:x,onKeyDown:I=>{!a&&e.is_tappable&&(I.key==="Enter"||I.key===" ")&&(I.preventDefault(),x())},onMouseEnter:!a&&e.is_tappable?m:void 0,children:[ve("div",{className:H.streaks}),ve("div",{className:H.streaksVert}),Ve("span",{className:H.content,children:[ve("span",{className:H.text,children:e.icon?`${e.icon} ${e.text}`:e.text}),e.tag&&ve("span",{className:H.tag,children:e.tag})]})]})}import{jsx as $e}from"react/jsx-runtime";function Ue({options:e,activeIndex:d,onSelect:n,onHighlight:m,listboxId:i,loading:a}){return $e(je,{min:"250px",max:"250px",gap:"0",scroll:!0,fade:!0,children:e.map((s,l)=>$e(qe,{option:s,isHighlighted:l===d,onSelect:n,onHighlight:()=>m(l),id:`${i}-option-${l}`,loading:a},s.text))})}if(typeof document<"u"&&!document.getElementById("ac-style-8414cd5f")){let e=document.createElement("style");e.id="ac-style-8414cd5f",e.textContent=`@layer layout {
|
|
957
994
|
.aia-stack {
|
|
958
995
|
display: flex;
|
|
959
996
|
flex-direction: column;
|
|
@@ -970,7 +1007,7 @@ import{forwardRef as zt,useCallback as Te,useEffect as at,useImperativeHandle as
|
|
|
970
1007
|
}
|
|
971
1008
|
/* data-align="stretch" is the flex default \u2014 no rule needed. */
|
|
972
1009
|
}
|
|
973
|
-
`,document.head.appendChild(e)}import{jsx as _t}from"react/jsx-runtime";function Qe({space:e,align:d="stretch",className:n,children:
|
|
1010
|
+
`,document.head.appendChild(e)}import{jsx as _t}from"react/jsx-runtime";function Qe({space:e,align:d="stretch",className:n,children:m,...i}){let a=e?{"--aia-stack-space":e}:void 0;return _t("div",{className:n?`aia-stack ${n}`:"aia-stack","data-align":d,style:a,...i,children:m})}import{jsx as ae,jsxs as Ct}from"react/jsx-runtime";var At=[159,119,164];function Pt(e){let d=()=>typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches,[n,m]=St(d);if(kt(()=>{if(e!=="auto"||typeof window>"u"||typeof window.matchMedia!="function")return;let i=window.matchMedia("(prefers-color-scheme: dark)"),a=()=>m(i.matches);return i.addEventListener("change",a),()=>i.removeEventListener("change",a)},[e]),e!==void 0)return e==="auto"?n?"dark":"light":e}function Ce({suggestions:e,activeIndex:d,onSelect:n,onHighlight:m,isOpen:i,id:a,className:s,pills:l,onPillClick:b,showPills:x=!0,activeSelected:R=!1,isLoading:I=!1,isInputEmpty:k=!1,optionsPosition:S="below",mode:w}){let C=Pt(w),z=C!==void 0,V=e[0]?.options??[],r=!!(l&&l.length>0&&b),y=i&&(V.length>0||x&&r||I),T={suggestions:e,activeIndex:d,pills:l,showPills:x,activeSelected:R,isLoading:I,isInputEmpty:k},K=It(T);y&&(K.current=T);let f=y?T:K.current,B=f.suggestions[0]?.options??[],E=f.activeIndex>=0&&!!B[f.activeIndex]?.is_tappable,G=!!(f.pills&&f.pills.length>0&&b),L=f.showPills&&G,Z=f.showPills&&!G&&f.isLoading,q=L||Z,F=B.length>0,O=f.isLoading&&!F;return ae("div",{id:a,role:"listbox","data-aia-dropdown":"","data-options-position":S,"data-mode":C,"data-aia-loading":f.isLoading?"":void 0,className:`${z?"magicx-aia ":""}${ne.dropdown} ${y?ne.visible:""} ${s??""}`,onMouseDown:h=>h.preventDefault(),children:Ct(Qe,{space:"8px",children:[q&&ae(le,{noWrap:!0,className:ne.pillBar,"data-aia-pillbar":"",children:ae(xe,{pills:f.pills??[],activePillIndex:0,activeSelected:f.activeSelected,onSelectPill:b??(()=>{}),rounded:!0,loading:f.isLoading})}),F&&ae(Ue,{options:B,activeIndex:f.activeIndex,onSelect:n,onHighlight:m,listboxId:a,loading:f.isLoading}),O&&ae("div",{className:ne.skeletonBars,"data-aia-skeleton-bars":"",children:At.map(h=>ae("span",{className:ne.skeletonBar,style:{width:h}},`bar-${h}`))}),ae(Ne,{isOptionHighlighted:E,isInputEmpty:f.isInputEmpty})]})})}import{buildQuery as Mt,ModeController as Ht,setCursorOffset as Nt}from"@magicx-eng/ai-autocomplete-vanilla";if(typeof document<"u"&&!document.getElementById("ac-style-fdee06e6")){let e=document.createElement("style");e.id="ac-style-fdee06e6",e.textContent=`.SubmitButton-module_submitButton_otz7H {
|
|
974
1011
|
flex-shrink: 0;
|
|
975
1012
|
width: 32px;
|
|
976
1013
|
height: 32px;
|
|
@@ -990,9 +1027,20 @@ import{forwardRef as zt,useCallback as Te,useEffect as at,useImperativeHandle as
|
|
|
990
1027
|
opacity: 0.85;
|
|
991
1028
|
}
|
|
992
1029
|
|
|
1030
|
+
/* Disabled (empty input) keeps the solid themed look by default \u2014 the disabled
|
|
1031
|
+
tokens fall back to the enabled ones, so a consumer's themed color is never
|
|
1032
|
+
washed out. Opt into a faded/dimmed rest state by setting
|
|
1033
|
+
--aia-submit-bg-disabled / --aia-submit-color-disabled. */
|
|
993
1034
|
.SubmitButton-module_submitButton_otz7H:disabled {
|
|
994
|
-
|
|
1035
|
+
background: var(
|
|
1036
|
+
--aia-submit-bg-disabled,
|
|
1037
|
+
var(--aia-submit-bg, var(--aia-color-text-default, #fff))
|
|
1038
|
+
);
|
|
1039
|
+
color: var(
|
|
1040
|
+
--aia-submit-color-disabled,
|
|
1041
|
+
var(--aia-submit-color, var(--aia-color-bg-default, #000))
|
|
1042
|
+
);
|
|
995
1043
|
cursor: default;
|
|
996
1044
|
}
|
|
997
|
-
`,document.head.appendChild(e)}var Xe={submitButton:"SubmitButton-module_submitButton_otz7H"};import{jsx as Ee}from"react/jsx-runtime";function Je({disabled:e,onClick:d}){return Ee("button",{type:"button","data-aia-submit":"",className:Xe.submitButton,disabled:e,onClick:n=>{n.stopPropagation(),d()},"aria-label":"Submit",children:Ee("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:Ee("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}import{AIAutocomplete as Et}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as Ze,useEffect as ye,useRef as N,useState as Dt}from"react";var Rt={text:"",completedParams:[],suggestions:[],activeDropdownIndex:-1,newParamId:null,isLoading:!0,isReady:!1,error:null,segments:[],actionableSuggestions:[],filteredOptions:[],placeholderText:"",isDropdownOpen:!1,isActivePillSelected:!1,filterBase:0,filterInProgress:!1,pillTapped:!1,skipNextFetch:!1,lastRawQuery:"",isFocused:!1,editingParam:null,editingAnchor:null,editingTail:null,caretOffset:null,inSelectionAnimation:!1};function De({onSubmit:e,onError:d,optionOverrides:n,maskCompletedText:p,apiConfig:i,columns:t=2,dropdownTrigger:s,optionsPosition:l,closeDropdownOnBlur:f,showNonTappableOptions:x,onFocus:R,onBlur:I,value:k,completedParams:S,onChange:v,onParamsChange:C,source:z,setCursor:V}){let r=N(null),[w,T]=Dt(null),W=N(e);W.current=e;let m=N(d);m.current=d;let X=N(v);X.current=v;let B=N(C);B.current=C;let E=N(R);E.current=R;let G=N(I);G.current=I;let L=N(V);L.current=V,ye(()=>{if(typeof document>"u")return;let a=new Et(document.createElement("div"),{renderMode:"headless",apiConfig:i,optionOverrides:n,maskCompletedText:p,columns:t,dropdownTrigger:s,optionsPosition:l,closeDropdownOnBlur:f,showNonTappableOptions:x,source:z,value:k,completedParams:S,onSubmit:(...A)=>W.current?.(...A),onError:(...A)=>m.current?.(...A),onChange:(...A)=>X.current?.(...A),onParamsChange:(...A)=>B.current?.(...A),onFocus:()=>E.current?.(),onBlur:()=>G.current?.(),setCursor:A=>L.current?.(A)});r.current=a,T(a.getState());let P=a.subscribe(A=>T(A));return()=>{P(),a.destroy(),r.current===a&&(r.current=null)}},[]),ye(()=>{k!==void 0&&r.current?.setValue(k)},[k]),ye(()=>{S!==void 0&&r.current?.setCompletedParams(S)},[S]);let J=JSON.stringify(i??null),q=N(n),F=N(0);if(n!==q.current){let a=q.current,P=n,A=Object.keys(a??{}),ae=Object.keys(P??{});(A.length!==ae.length||ae.some(se=>!a?.[se]||P[se]!==a[se]))&&F.current++,q.current=n}ye(()=>{r.current?.update({apiConfig:i,optionOverrides:n,dropdownTrigger:s,optionsPosition:l,closeDropdownOnBlur:f,showNonTappableOptions:x})},[J,F.current,s,l,f,x]);let O=N(null);O.current===null&&(O.current={handleTextChange:a=>r.current?.handleTextChange(a),handleKeyDown:a=>{let P="nativeEvent"in a?a.nativeEvent:a;r.current?.handleKeyDown(P)},setFocused:a=>r.current?.setFocused(a),startEditingParam:a=>r.current?.startEditingParam(a),exitEditMode:()=>r.current?.exitEditMode(),handleCaretAfterInput:a=>r.current?.handleCaretAfterInput(a),handleCaretMove:a=>r.current?.handleCaretMove(a),replaceEditingRange:a=>r.current?.replaceEditingRange(a)??!1,setActivePill:a=>r.current?.setActivePill(a),removeLastParam:()=>r.current?.removeLastParam(),clearNewParamId:()=>r.current?.clearNewParamId(),reset:()=>r.current?.reset(),selectOption:a=>r.current?.selectOption(a),setActiveDropdownIndex:a=>r.current?.setActiveDropdownIndex(a),handleFocus:()=>r.current?.setFocused(!0),handleBlur:()=>r.current?.setFocused(!1)});let g=O.current,Y=Ze(a=>{let P=a.target.value,ae=P.length>0&&!a.nativeEvent?.isComposing&&P[0]!==P[0].toUpperCase()?P[0].toUpperCase()+P.slice(1):P;r.current?.handleTextChange(ae)},[]),ee=Ze(a=>{r.current?.handleKeyDown(a.nativeEvent)},[]),Z=r.current,c=w??Rt,o=k!==void 0?k:c.text,u=S!==void 0?S:c.completedParams,h=c.actionableSuggestions,_=h[0],b=Z?.listboxId??"",D=c.activeDropdownIndex>=0&&Z?`${b}-option-${c.activeDropdownIndex}`:void 0,M=c.editingParam,$=M?{type:M.suggestionType,text:M.suggestionPlaceholder,required:!0,options:M.options}:null,pe=$??_,ke=$?[$]:h,ue=!Z||c.isLoading&&!c.editingParam&&!c.inSelectionAnimation;return{completedParams:u,suggestionPills:h,setActivePill:g.setActivePill,removeLastParam:g.removeLastParam,segments:c.segments,newParamId:c.newParamId,clearNewParamId:g.clearNewParamId,suggestions:c.suggestions,activeIndex:c.activeDropdownIndex,isReady:c.isReady,isLoading:ue,isFocused:c.isFocused,isDropdownOpen:c.isDropdownOpen,isActivePillSelected:c.isActivePillSelected,placeholderText:c.placeholderText,listboxId:b,error:c.error,handleTextChange:g.handleTextChange,handleKeyDown:g.handleKeyDown,setFocused:g.setFocused,editingParam:M,editingAnchor:c.editingAnchor,caretOffset:c.caretOffset,startEditingParam:g.startEditingParam,exitEditMode:g.exitEditMode,handleCaretAfterInput:g.handleCaretAfterInput,handleCaretMove:g.handleCaretMove,replaceEditingRange:g.replaceEditingRange,inputProps:{value:o,placeholder:c.placeholderText||void 0,onChange:Y,onKeyDown:ee,onFocus:g.handleFocus,onBlur:g.handleBlur,role:"combobox","aria-expanded":c.isDropdownOpen,"aria-activedescendant":D,"aria-autocomplete":"list","aria-controls":b},reset:g.reset,dropdownProps:{suggestions:pe?[{...pe,options:c.filteredOptions}]:[],activeIndex:c.activeDropdownIndex,onSelect:g.selectOption,onHighlight:g.setActiveDropdownIndex,isOpen:c.isDropdownOpen,id:b,pills:ke,activeSelected:c.isActivePillSelected,onPillClick:g.setActivePill,isLoading:ue,isInputEmpty:o.trim().length===0,optionsPosition:l??"below"}}}import{extractPlainText as Ye,getCursorOffset as et,plainTextLength as Lt,renderEditableContent as Tt,setCursorOffset as tt}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as K,useEffect as Re,useLayoutEffect as Le,useRef as ie}from"react";var _e;function Bt(){if(_e!==void 0)return _e;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),_e=e.contentEditable==="plaintext-only",_e}function ot(e){let{segments:d,newParamId:n,editingParam:p,editingAnchor:i,caretOffset:t,placeholderText:s,isFocused:l,isDropdownOpen:f,listboxId:x,activeDescendantId:R,autoFocus:I,handleTextChange:k,handleKeyDown:S,handleCaretAfterInput:v,handleCaretMove:C,startEditingParam:z,replaceEditingRange:V,setFocused:r}=e,w=ie(null),T=ie(!1),W=ie(""),m=ie(""),X=ie(null),B=ie(0);X.current=t,Re(()=>{if(!I)return;let o=w.current;o&&(document.activeElement===o?r(!0):o.focus())},[I,r]),Re(()=>{let o=w.current;if(!o)return;let u=o.ownerDocument??document,h=()=>{let _=u.getSelection();if(!_||_.rangeCount===0||!_.anchorNode||!o.contains(_.anchorNode))return;let b=_.anchorNode,$=(b.nodeType===Node.ELEMENT_NODE?b:b.parentElement)?.closest('strong[data-seg="completed"][data-param-id]')?.dataset.paramId??null;if($&&$!==p?.id){z($);return}performance.now()-B.current<50||C(et(o))};return u.addEventListener("selectionchange",h),()=>u.removeEventListener("selectionchange",h)},[p,z,C]),Le(()=>{let o=w.current;o&&Tt({input:o,segments:d,newParamId:n,editingParamId:p?.id??null,placeholderText:s??"",isFocused:l})},[d,n,p,s,l]),Le(()=>{let o=W.current,u=n??"";if(W.current=u,!u||u===o)return;let h=w.current;if(!h)return;h.focus();let _=X.current??Lt(h);tt(h,_)},[n]),Le(()=>{let o=m.current,u=p?.id??"";if(m.current=u,!u||u===o||i==null)return;let h=w.current;h&&tt(h,i)},[p,i]);let E=K(()=>{if(T.current)return;let o=w.current;if(!o)return;let u=Ye(o),_=u.length>0&&u[0]!==u[0].toUpperCase()?u[0].toUpperCase()+u.slice(1):u;k(_)},[k]),G=K(()=>{B.current=performance.now(),E();let o=w.current;o&&v(et(o))},[E,v]);Re(()=>{let o=w.current;if(!o)return;let u=h=>{let _=h,b=_.inputType;if(b==="insertParagraph"||b==="insertLineBreak"||b==="insertFromDrop"){h.preventDefault();return}if(b.startsWith("insert")||b.startsWith("delete")){let D=b.startsWith("delete")?"":_.data??"";V(D)&&h.preventDefault()}};return o.addEventListener("beforeinput",u),()=>o.removeEventListener("beforeinput",u)},[V]);let L=K(()=>{T.current=!0},[]),J=K(()=>{T.current=!1,E()},[E]),q=K(o=>{o.preventDefault();let u=w.current;if(!u)return;let h=(o.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!h)return;let _=u.ownerDocument??document,b=_.getSelection();if(!b||b.rangeCount===0)return;let D=b.getRangeAt(0);if(!u.contains(D.startContainer))return;D.deleteContents();let M=_.createTextNode(h);D.insertNode(M),D.setStartAfter(M),D.collapse(!0),b.removeAllRanges(),b.addRange(D),E()},[E]),F=K(o=>S(o),[S]),O=K(()=>r(!0),[r]),g=K(()=>r(!1),[r]),Y=K(()=>w.current?.focus(),[]),ee=K(()=>w.current?.blur(),[]),Z=K(()=>{let o=w.current;return o?Ye(o):""},[]),c=Bt()?"plaintext-only":"true";return{inputRef:w,editorProps:{ref:w,contentEditable:c,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":x,"aria-expanded":f,"aria-activedescendant":R,spellCheck:!0,enterKeyHint:"send",onInput:G,onKeyDown:F,onCompositionStart:L,onCompositionEnd:J,onPaste:q,onFocus:O,onBlur:g},getPlainText:Z,focus:Y,blur:ee}}import{jsx as re,jsxs as Be}from"react/jsx-runtime";function Kt(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var Wt=zt(function({onSubmit:d,onError:n,optionOverrides:p,maskCompletedText:i,className:t,apiConfig:s,columns:l,pillPlacement:f="dropdown",mode:x="auto",optionsPosition:R="below",animations:I=!0,dropdownTrigger:k,closeDropdownOnBlur:S,showNonTappableOptions:v,autoFocus:C=!0,onFocus:z,onBlur:V,value:r,completedParams:w,onChange:T,onParamsChange:W,submitButton:m},X){let B=ce(null),E=ce(null),G=ce(()=>{}),L=ce(null),J=ce(null);at(()=>{let y=B.current;if(y)return L.current?L.current.setMode(x):L.current=new Ht(y,x),()=>{L.current?.destroy(),L.current=null}},[x]);let q=Te(y=>{let j=J.current?.current;j&&(j.focus(),Nt(j,y))},[]),{completedParams:F,suggestionPills:O,setActivePill:g,segments:Y,newParamId:ee,clearNewParamId:Z,placeholderText:c,isFocused:o,isDropdownOpen:u,isActivePillSelected:h,isLoading:_,activeIndex:b,listboxId:D,handleTextChange:M,handleKeyDown:$,setFocused:pe,editingParam:ke,editingAnchor:ue,caretOffset:a,startEditingParam:P,handleCaretAfterInput:A,handleCaretMove:ae,replaceEditingRange:se,dropdownProps:nt,reset:me}=De({onSubmit:y=>G.current(y),onError:n,optionOverrides:p,maskCompletedText:i,apiConfig:s,columns:l,dropdownTrigger:k,optionsPosition:R,closeDropdownOnBlur:S,showNonTappableOptions:v,onFocus:z,onBlur:V,value:r,completedParams:w,onChange:T,onParamsChange:W,source:"full-sdk",setCursor:q});at(()=>{if(!ee)return;let y=window.setTimeout(()=>Z(),650);return()=>window.clearTimeout(y)},[ee,Z]);let it=b>=0?`${D}-option-${b}`:void 0,{inputRef:Ie,editorProps:rt,focus:ge,blur:ze,getPlainText:Fe}=ot({segments:Y,newParamId:ee,editingParam:ke,editingAnchor:ue,caretOffset:a,placeholderText:c,isFocused:o,isDropdownOpen:u,listboxId:D,activeDescendantId:it,autoFocus:C,handleTextChange:M,handleKeyDown:$,handleCaretAfterInput:A,handleCaretMove:ae,startEditingParam:P,replaceEditingRange:se,setFocused:pe});J.current=Ie,Ot(()=>{let y=E.current,j=Ie.current;if(!y||!j)return;let he=()=>{let Me=y.firstElementChild;if(!Me)return;let ct=Me.getBoundingClientRect(),pt=j.getBoundingClientRect();ct.top>=pt.bottom-2?y.setAttribute("data-aia-pill-wrapped",""):y.removeAttribute("data-aia-pill-wrapped")};he();let Oe=new ResizeObserver(he);return Oe.observe(j),()=>Oe.disconnect()},[Y,O.length,_,Ie]),Ft(X,()=>({focus:ge,blur:ze,reset:me,setMode:y=>L.current?.setMode(y)}),[ge,ze,me]);let fe=!!Y.length||F.length>0,Se=Te(()=>{if(!fe)return;let y=Fe(),{rawQuery:j,completedParams:he}=Mt(y,F);d({query:y.trim(),raw_query:j,completed_params:he}),me()},[fe,F,d,me,Fe]);G.current=Se;let st=Te(y=>{y.target?.closest("[data-aia-pill]")||ge()},[ge]),lt=f==="inline",dt=f==="dropdown";return Be("div",{ref:B,className:`magicx-aia ${te.container} ${t??""}`,"data-pill-placement":f,"data-options-position":R,"data-animations":I?"on":"off","data-mode":Kt(x),children:[re(Ce,{...nt,showPills:dt}),Be("div",{className:te.inputWrapper,onClick:st,children:[Be("div",{className:te.editorArea,"data-aia-editor":"",children:[re("div",{...rt,className:te.input,"data-aia-input":""}),lt&&(_||O.length>0)&&re("span",{ref:E,className:te.pillListContainer,"data-aia-pill-list-container":"",children:re(ve,{pills:O,activePillIndex:0,activeSelected:h,onSelectPill:g,loading:_})})]}),m===null?null:m===void 0?re(Je,{disabled:!fe,onClick:Se}):re("span",{"data-aia-submit":"",className:te.submitSlot,onClick:y=>{fe&&(y.stopPropagation(),Se())},children:m})]})]})});export{Wt as AIAutocomplete,Ce as AIAutocompleteDropdown,De as useAIAutocomplete};
|
|
1045
|
+
`,document.head.appendChild(e)}var Xe={submitButton:"SubmitButton-module_submitButton_otz7H"};import{jsx as Ee}from"react/jsx-runtime";function Ze({disabled:e,onClick:d}){return Ee("button",{type:"button","data-aia-submit":"",className:Xe.submitButton,disabled:e,onClick:n=>{n.stopPropagation(),d()},"aria-label":"Submit",children:Ee("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:Ee("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}import{AIAutocomplete as Et}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as Je,useEffect as we,useRef as N,useState as Dt}from"react";var Rt={text:"",completedParams:[],suggestions:[],activeDropdownIndex:-1,newParamId:null,isLoading:!0,isReady:!1,error:null,segments:[],actionableSuggestions:[],filteredOptions:[],placeholderText:"",isDropdownOpen:!1,isActivePillSelected:!1,filterBase:0,filterInProgress:!1,pillTapped:!1,skipNextFetch:!1,lastRawQuery:"",isFocused:!1,editingParam:null,editingAnchor:null,editingTail:null,caretOffset:null,inSelectionAnimation:!1};function De({onSubmit:e,onError:d,optionOverrides:n,maskCompletedText:m,apiConfig:i,columns:a=2,dropdownTrigger:s,optionsPosition:l,closeDropdownOnBlur:b,showNonTappableOptions:x,onFocus:R,onBlur:I,value:k,completedParams:S,onChange:w,onParamsChange:C,source:z,setCursor:V}){let r=N(null),[y,T]=Dt(null),K=N(e);K.current=e;let f=N(d);f.current=d;let X=N(w);X.current=w;let B=N(C);B.current=C;let E=N(R);E.current=R;let G=N(I);G.current=I;let L=N(V);L.current=V,we(()=>{if(typeof document>"u")return;let o=new Et(document.createElement("div"),{renderMode:"headless",apiConfig:i,optionOverrides:n,maskCompletedText:m,columns:a,dropdownTrigger:s,optionsPosition:l,closeDropdownOnBlur:b,showNonTappableOptions:x,source:z,value:k,completedParams:S,onSubmit:(...A)=>K.current?.(...A),onError:(...A)=>f.current?.(...A),onChange:(...A)=>X.current?.(...A),onParamsChange:(...A)=>B.current?.(...A),onFocus:()=>E.current?.(),onBlur:()=>G.current?.(),setCursor:A=>L.current?.(A)});r.current=o,T(o.getState());let P=o.subscribe(A=>T(A));return()=>{P(),o.destroy(),r.current===o&&(r.current=null)}},[]),we(()=>{k!==void 0&&r.current?.setValue(k)},[k]),we(()=>{S!==void 0&&r.current?.setCompletedParams(S)},[S]);let Z=JSON.stringify(i??null),q=N(n),F=N(0);if(n!==q.current){let o=q.current,P=n,A=Object.keys(o??{}),oe=Object.keys(P??{});(A.length!==oe.length||oe.some(se=>!o?.[se]||P[se]!==o[se]))&&F.current++,q.current=n}we(()=>{r.current?.update({apiConfig:i,optionOverrides:n,dropdownTrigger:s,optionsPosition:l,closeDropdownOnBlur:b,showNonTappableOptions:x})},[Z,F.current,s,l,b,x]);let O=N(null);O.current===null&&(O.current={handleTextChange:o=>r.current?.handleTextChange(o),handleKeyDown:o=>{let P="nativeEvent"in o?o.nativeEvent:o;r.current?.handleKeyDown(P)},setFocused:o=>r.current?.setFocused(o),startEditingParam:o=>r.current?.startEditingParam(o),exitEditMode:()=>r.current?.exitEditMode(),handleCaretAfterInput:o=>r.current?.handleCaretAfterInput(o),handleCaretMove:o=>r.current?.handleCaretMove(o),replaceEditingRange:o=>r.current?.replaceEditingRange(o)??!1,setActivePill:o=>r.current?.setActivePill(o),removeLastParam:()=>r.current?.removeLastParam(),clearNewParamId:()=>r.current?.clearNewParamId(),reset:()=>r.current?.reset(),selectOption:o=>r.current?.selectOption(o),setActiveDropdownIndex:o=>r.current?.setActiveDropdownIndex(o),handleFocus:()=>r.current?.setFocused(!0),handleBlur:()=>r.current?.setFocused(!1)});let h=O.current,Y=Je(o=>{let P=o.target.value,oe=P.length>0&&!o.nativeEvent?.isComposing&&P[0]!==P[0].toUpperCase()?P[0].toUpperCase()+P.slice(1):P;r.current?.handleTextChange(oe)},[]),ee=Je(o=>{r.current?.handleKeyDown(o.nativeEvent)},[]),J=r.current,c=y??Rt,t=k!==void 0?k:c.text,p=S!==void 0?S:c.completedParams,u=c.actionableSuggestions,v=u[0],g=J?.listboxId??"",D=c.activeDropdownIndex>=0&&J?`${g}-option-${c.activeDropdownIndex}`:void 0,M=c.editingParam,$=M?{type:M.suggestionType,text:M.suggestionPlaceholder,required:!0,options:M.options}:null,ce=$??v,_e=$?[$]:u,ue=!J||c.isLoading&&!c.editingParam&&!c.inSelectionAnimation;return{completedParams:p,suggestionPills:u,setActivePill:h.setActivePill,removeLastParam:h.removeLastParam,segments:c.segments,newParamId:c.newParamId,clearNewParamId:h.clearNewParamId,suggestions:c.suggestions,activeIndex:c.activeDropdownIndex,isReady:c.isReady,isLoading:ue,isFocused:c.isFocused,isDropdownOpen:c.isDropdownOpen,isActivePillSelected:c.isActivePillSelected,placeholderText:c.placeholderText,listboxId:g,error:c.error,handleTextChange:h.handleTextChange,handleKeyDown:h.handleKeyDown,setFocused:h.setFocused,editingParam:M,editingAnchor:c.editingAnchor,caretOffset:c.caretOffset,startEditingParam:h.startEditingParam,exitEditMode:h.exitEditMode,handleCaretAfterInput:h.handleCaretAfterInput,handleCaretMove:h.handleCaretMove,replaceEditingRange:h.replaceEditingRange,inputProps:{value:t,placeholder:c.placeholderText||void 0,onChange:Y,onKeyDown:ee,onFocus:h.handleFocus,onBlur:h.handleBlur,role:"combobox","aria-expanded":c.isDropdownOpen,"aria-activedescendant":D,"aria-autocomplete":"list","aria-controls":g},reset:h.reset,dropdownProps:{suggestions:ce?[{...ce,options:c.filteredOptions}]:[],activeIndex:c.activeDropdownIndex,onSelect:h.selectOption,onHighlight:h.setActiveDropdownIndex,isOpen:c.isDropdownOpen,id:g,pills:_e,activeSelected:c.isActivePillSelected,onPillClick:h.setActivePill,isLoading:ue,isInputEmpty:t.trim().length===0,optionsPosition:l??"below"}}}import{extractPlainText as Ye,getCursorOffset as et,plainTextLength as Lt,renderEditableContent as Tt,setCursorOffset as tt}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as W,useEffect as Re,useLayoutEffect as Le,useRef as ie}from"react";var ye;function Bt(){if(ye!==void 0)return ye;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),ye=e.contentEditable==="plaintext-only",ye}function at(e){let{segments:d,newParamId:n,editingParam:m,editingAnchor:i,caretOffset:a,placeholderText:s,isFocused:l,isDropdownOpen:b,listboxId:x,activeDescendantId:R,autoFocus:I,handleTextChange:k,handleKeyDown:S,handleCaretAfterInput:w,handleCaretMove:C,startEditingParam:z,replaceEditingRange:V,setFocused:r}=e,y=ie(null),T=ie(!1),K=ie(""),f=ie(""),X=ie(null),B=ie(0);X.current=a,Re(()=>{if(!I)return;let t=y.current;if(!t)return;document.activeElement===t?r(!0):t.focus();let p=t.ownerDocument??document,u=p.getSelection(),v=u&&u.rangeCount>0&&t.contains(u.anchorNode);if(u&&!v){let g=p.createRange();g.selectNodeContents(t),g.collapse(!0),u.removeAllRanges(),u.addRange(g)}},[I,r]),Re(()=>{let t=y.current;if(!t)return;let p=t.ownerDocument??document,u=()=>{let v=p.getSelection();if(!v||v.rangeCount===0||!v.anchorNode||!t.contains(v.anchorNode))return;let g=v.anchorNode,$=(g.nodeType===Node.ELEMENT_NODE?g:g.parentElement)?.closest('strong[data-seg="completed"][data-param-id]')?.dataset.paramId??null;if($&&$!==m?.id){z($);return}performance.now()-B.current<50||C(et(t))};return p.addEventListener("selectionchange",u),()=>p.removeEventListener("selectionchange",u)},[m,z,C]),Le(()=>{let t=y.current;t&&Tt({input:t,segments:d,newParamId:n,editingParamId:m?.id??null,placeholderText:s??"",isFocused:l})},[d,n,m,s,l]),Le(()=>{let t=K.current,p=n??"";if(K.current=p,!p||p===t)return;let u=y.current;if(!u)return;u.focus();let v=X.current??Lt(u);tt(u,v)},[n]),Le(()=>{let t=f.current,p=m?.id??"";if(f.current=p,!p||p===t||i==null)return;let u=y.current;u&&tt(u,i)},[m,i]);let E=W(()=>{if(T.current)return;let t=y.current;if(!t)return;let p=Ye(t),v=p.length>0&&p[0]!==p[0].toUpperCase()?p[0].toUpperCase()+p.slice(1):p;k(v)},[k]),G=W(()=>{B.current=performance.now(),E();let t=y.current;t&&w(et(t))},[E,w]);Re(()=>{let t=y.current;if(!t)return;let p=u=>{let v=u,g=v.inputType;if(g==="insertParagraph"||g==="insertLineBreak"||g==="insertFromDrop"){u.preventDefault();return}if(g.startsWith("insert")||g.startsWith("delete")){let D=g.startsWith("delete")?"":v.data??"";V(D)&&u.preventDefault()}};return t.addEventListener("beforeinput",p),()=>t.removeEventListener("beforeinput",p)},[V]);let L=W(()=>{T.current=!0},[]),Z=W(()=>{T.current=!1,E()},[E]),q=W(t=>{t.preventDefault();let p=y.current;if(!p)return;let u=(t.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!u)return;let v=p.ownerDocument??document,g=v.getSelection();if(!g||g.rangeCount===0)return;let D=g.getRangeAt(0);if(!p.contains(D.startContainer))return;D.deleteContents();let M=v.createTextNode(u);D.insertNode(M),D.setStartAfter(M),D.collapse(!0),g.removeAllRanges(),g.addRange(D),E()},[E]),F=W(t=>S(t),[S]),O=W(()=>r(!0),[r]),h=W(()=>r(!1),[r]),Y=W(()=>y.current?.focus(),[]),ee=W(()=>y.current?.blur(),[]),J=W(()=>{let t=y.current;return t?Ye(t):""},[]),c=Bt()?"plaintext-only":"true";return{inputRef:y,editorProps:{ref:y,contentEditable:c,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":x,"aria-expanded":b,"aria-activedescendant":R,spellCheck:!0,enterKeyHint:"send",onInput:G,onKeyDown:F,onCompositionStart:L,onCompositionEnd:Z,onPaste:q,onFocus:O,onBlur:h},getPlainText:J,focus:Y,blur:ee}}import{jsx as re,jsxs as Be}from"react/jsx-runtime";function Wt(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var Kt=zt(function({onSubmit:d,onError:n,optionOverrides:m,maskCompletedText:i,className:a,apiConfig:s,columns:l,pillPlacement:b="dropdown",mode:x="auto",optionsPosition:R="below",animations:I=!0,dropdownTrigger:k,closeDropdownOnBlur:S,showNonTappableOptions:w,autoFocus:C=!0,onFocus:z,onBlur:V,value:r,completedParams:y,onChange:T,onParamsChange:K,submitButton:f},X){let B=pe(null),E=pe(null),G=pe(()=>{}),L=pe(null),Z=pe(null);ot(()=>{let _=B.current;if(_)return L.current?L.current.setMode(x):L.current=new Ht(_,x),()=>{L.current?.destroy(),L.current=null}},[x]);let q=Te(_=>{let j=Z.current?.current;j&&(j.focus(),Nt(j,_))},[]),{completedParams:F,suggestionPills:O,setActivePill:h,segments:Y,newParamId:ee,clearNewParamId:J,placeholderText:c,isFocused:t,isDropdownOpen:p,isActivePillSelected:u,isLoading:v,activeIndex:g,listboxId:D,handleTextChange:M,handleKeyDown:$,setFocused:ce,editingParam:_e,editingAnchor:ue,caretOffset:o,startEditingParam:P,handleCaretAfterInput:A,handleCaretMove:oe,replaceEditingRange:se,dropdownProps:nt,reset:me}=De({onSubmit:_=>G.current(_),onError:n,optionOverrides:m,maskCompletedText:i,apiConfig:s,columns:l,dropdownTrigger:k,optionsPosition:R,closeDropdownOnBlur:S,showNonTappableOptions:w,onFocus:z,onBlur:V,value:r,completedParams:y,onChange:T,onParamsChange:K,source:"full-sdk",setCursor:q});ot(()=>{if(!ee)return;let _=window.setTimeout(()=>J(),650);return()=>window.clearTimeout(_)},[ee,J]);let it=g>=0?`${D}-option-${g}`:void 0,{inputRef:ke,editorProps:rt,focus:ge,blur:ze,getPlainText:Fe}=at({segments:Y,newParamId:ee,editingParam:_e,editingAnchor:ue,caretOffset:o,placeholderText:c,isFocused:t,isDropdownOpen:p,listboxId:D,activeDescendantId:it,autoFocus:C,handleTextChange:M,handleKeyDown:$,handleCaretAfterInput:A,handleCaretMove:oe,startEditingParam:P,replaceEditingRange:se,setFocused:ce});Z.current=ke,Ot(()=>{let _=E.current,j=ke.current;if(!_||!j)return;let he=()=>{let Me=_.firstElementChild;if(!Me)return;let pt=Me.getBoundingClientRect(),ct=j.getBoundingClientRect();pt.top>=ct.bottom-2?_.setAttribute("data-aia-pill-wrapped",""):_.removeAttribute("data-aia-pill-wrapped")};he();let Oe=new ResizeObserver(he);return Oe.observe(j),()=>Oe.disconnect()},[Y,O.length,v,ke]),Ft(X,()=>({focus:ge,blur:ze,reset:me,setMode:_=>L.current?.setMode(_)}),[ge,ze,me]);let fe=!!Y.length||F.length>0,Ie=Te(()=>{if(!fe)return;let _=Fe(),{rawQuery:j,completedParams:he}=Mt(_,F);d({query:_.trim(),raw_query:j,completed_params:he}),me()},[fe,F,d,me,Fe]);G.current=Ie;let st=Te(_=>{_.target?.closest("[data-aia-pill]")||ge()},[ge]),lt=b==="inline",dt=b==="dropdown";return Be("div",{ref:B,className:`magicx-aia ${te.container} ${a??""}`,"data-pill-placement":b,"data-options-position":R,"data-animations":I?"on":"off","data-mode":Wt(x),children:[re(Ce,{...nt,showPills:dt}),Be("div",{className:te.inputWrapper,onClick:st,children:[Be("div",{className:te.editorArea,"data-aia-editor":"",children:[re("div",{...rt,className:te.input,"data-aia-input":""}),lt&&(v||O.length>0)&&re("span",{ref:E,className:te.pillListContainer,"data-aia-pill-list-container":"",children:re(xe,{pills:O,activePillIndex:0,activeSelected:u,onSelectPill:h,loading:v})})]}),f===null?null:f===void 0?re(Ze,{disabled:!fe,onClick:Ie}):re("span",{"data-aia-submit":"",className:te.submitSlot,onClick:_=>{fe&&(_.stopPropagation(),Ie())},children:f})]})]})});export{Kt as AIAutocomplete,Ce as AIAutocompleteDropdown,De as useAIAutocomplete};
|
|
998
1046
|
//# sourceMappingURL=index.mjs.map
|