@magicx-eng/ai-autocomplete-react 0.6.2 → 0.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +98 -69
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +98 -69
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{forwardRef as
|
|
1
|
+
import{forwardRef as Ft,useCallback as Le,useEffect as ot,useImperativeHandle as Bt,useLayoutEffect as Ot,useRef as pe}from"react";if(typeof document<"u"&&!document.getElementById("ac-style-67791514")){let e=document.createElement("style");e.id="ac-style-67791514",e.textContent=`.AIAutocomplete-module_container_KKjFU {
|
|
2
2
|
position: relative;
|
|
3
3
|
/* Inherits the host page's font by default. Consumers can pin a specific
|
|
4
4
|
font on the library via \`--aia-font-family: 'Custom Font'\` without
|
|
@@ -47,24 +47,47 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
47
47
|
vertical-align: middle;
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
-
/* Completed params render as inline
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
50
|
+
/* Completed params render as inline pills (Figma "RichTextPill") \u2014 a compact
|
|
51
|
+
~26px chip with regular-weight primary-color text on a faint-gray fill.
|
|
52
|
+
inline-block gives the padding/radius a box while the text stays part of the
|
|
53
|
+
editable plain text (the caret system counts characters inside this
|
|
54
|
+
<strong>). The completed class is stamped by the shared renderer as a global
|
|
55
|
+
string, so match it via [class~=] to bypass CSS Modules' hashing. */
|
|
56
|
+
:where(.AIAutocomplete-module_input_IW-P-) strong[class~="magicx-aia-segment--completed"] {
|
|
57
|
+
display: inline-block;
|
|
58
|
+
padding: 4px 6px;
|
|
59
|
+
border-radius: 999px;
|
|
60
|
+
background: var(--aia-completed-pill-bg, rgba(189, 189, 189, 0.15));
|
|
61
|
+
color: var(--aia-completed-pill-color, var(--aia-written-text-color, #fff));
|
|
62
|
+
font-size: var(--aia-pill-font-size, 14px);
|
|
63
|
+
font-weight: 400;
|
|
64
|
+
line-height: normal;
|
|
65
|
+
white-space: nowrap;
|
|
66
|
+
/* Small vertical breathing room so wrapped rows of pills don't touch. */
|
|
67
|
+
margin: 2px 0;
|
|
68
|
+
vertical-align: middle;
|
|
69
|
+
cursor: pointer;
|
|
70
|
+
/* Smooth hover fade. Neutralized by the data-animations="off" block. */
|
|
71
|
+
transition: background-color 150ms ease;
|
|
55
72
|
}
|
|
56
73
|
|
|
57
|
-
/*
|
|
58
|
-
|
|
59
|
-
|
|
74
|
+
/* Hover highlight \u2014 a slightly stronger fill so a pointed-at pill reads as
|
|
75
|
+
tappable. Declared between the base and editing rules so editing wins. */
|
|
76
|
+
:where(.AIAutocomplete-module_input_IW-P-) strong[class~="magicx-aia-segment--completed"]:hover {
|
|
77
|
+
background: var(--aia-completed-pill-bg-active, rgba(189, 189, 189, 0.35));
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* Re-edit highlight \u2014 applied to the completed pill being re-edited (after a
|
|
81
|
+
tap). Reuses the exact hover fill so the highlight persists from tap until an
|
|
82
|
+
option is selected. Hides the native caret; cursor switches to text since the
|
|
83
|
+
pill is in text-replacement mode. The editing class is written by the shared
|
|
84
|
+
renderer (a global string), so target it via an attribute selector to bypass
|
|
85
|
+
CSS Modules' hashing. Declared last so it wins on a strong carrying both
|
|
86
|
+
classes. */
|
|
60
87
|
:where(.AIAutocomplete-module_input_IW-P-) strong[class~="magicx-aia-segment--editing"] {
|
|
61
|
-
background
|
|
62
|
-
border-radius: 6px;
|
|
63
|
-
padding: 2px 3px;
|
|
64
|
-
/* Pull surrounding inline text back so the wider/taller fill doesn't shove
|
|
65
|
-
the rest of the line \u2014 only the visible background grows. */
|
|
66
|
-
margin: 0 -1.5px;
|
|
88
|
+
background: var(--aia-completed-pill-bg-active, rgba(189, 189, 189, 0.35));
|
|
67
89
|
caret-color: transparent;
|
|
90
|
+
cursor: text;
|
|
68
91
|
}
|
|
69
92
|
|
|
70
93
|
/* In re-edit mode the caret is parked just *before* the bold strong (see
|
|
@@ -114,39 +137,23 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
114
137
|
display: contents;
|
|
115
138
|
}
|
|
116
139
|
|
|
117
|
-
/*
|
|
118
|
-
(core/render/renderEditable.ts) stamps the global
|
|
119
|
-
|
|
120
|
-
hashing
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
120deg,
|
|
125
|
-
var(--aia-written-text-color, var(--aia-color-text-default, #fff)) 0%,
|
|
126
|
-
var(--aia-written-text-color, var(--aia-color-text-default, #fff)) 44%,
|
|
127
|
-
#b0b0b0 48%,
|
|
128
|
-
#b0b0b0 52%,
|
|
129
|
-
var(--aia-written-text-color, var(--aia-color-text-default, #fff)) 56%,
|
|
130
|
-
var(--aia-written-text-color, var(--aia-color-text-default, #fff)) 100%
|
|
131
|
-
);
|
|
132
|
-
background-size: 200% 100%;
|
|
133
|
-
-webkit-background-clip: text;
|
|
134
|
-
background-clip: text;
|
|
135
|
-
}
|
|
136
|
-
|
|
140
|
+
/* Promotion reveal on a newly promoted completed param. The shared renderer
|
|
141
|
+
(core/render/renderEditable.ts) stamps the global shimmer classes onto the
|
|
142
|
+
just-added <strong>; we match them via [class~=] to bypass CSS Modules'
|
|
143
|
+
hashing. Completed params are now pills with a solid background, so the old
|
|
144
|
+
text-clip gradient shimmer can't be used (background-clip: text would wipe
|
|
145
|
+
the pill background). The reveal is a simple fade-in of the whole pill,
|
|
146
|
+
riding on shimmer-sweep so it only plays on genuine promotions. */
|
|
137
147
|
:where(.AIAutocomplete-module_input_IW-P-) strong[class~="magicx-aia-shimmer-sweep"] {
|
|
138
|
-
animation: AIAutocomplete-
|
|
148
|
+
animation: AIAutocomplete-module_aiaPillReveal_wf05b 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
139
149
|
}
|
|
140
150
|
|
|
141
|
-
@keyframes AIAutocomplete-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
}
|
|
145
|
-
100% {
|
|
146
|
-
background-position: -50% 0;
|
|
151
|
+
@keyframes AIAutocomplete-module_aiaPillReveal_wf05b {
|
|
152
|
+
from {
|
|
153
|
+
opacity: 0;
|
|
147
154
|
}
|
|
148
155
|
}
|
|
149
|
-
`,document.head.appendChild(e)}var te={container:"AIAutocomplete-module_container_KKjFU",inputWrapper:"AIAutocomplete-module_inputWrapper_FLq1b",editorArea:"AIAutocomplete-module_editorArea_7rBWq",input:"AIAutocomplete-module_input_IW-P-",pillListContainer:"AIAutocomplete-module_pillListContainer_h92IA",submitSlot:"AIAutocomplete-module_submitSlot_GhuCM",
|
|
156
|
+
`,document.head.appendChild(e)}var te={container:"AIAutocomplete-module_container_KKjFU",inputWrapper:"AIAutocomplete-module_inputWrapper_FLq1b",editorArea:"AIAutocomplete-module_editorArea_7rBWq",input:"AIAutocomplete-module_input_IW-P-",pillListContainer:"AIAutocomplete-module_pillListContainer_h92IA",submitSlot:"AIAutocomplete-module_submitSlot_GhuCM",aiaPillReveal:"AIAutocomplete-module_aiaPillReveal_wf05b"};import{useEffect as kt,useRef as It,useState as Pt}from"react";if(typeof document<"u"&&!document.getElementById("ac-style-0ae03977")){let e=document.createElement("style");e.id="ac-style-0ae03977",e.textContent=`/*
|
|
150
157
|
* Built-in appearance defaults \u2014 zero specificity via :where().
|
|
151
158
|
* Consumer CSS always wins without !important.
|
|
152
159
|
*
|
|
@@ -185,6 +192,9 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
185
192
|
--aia-primitive-neutral-1000: #ffffff;
|
|
186
193
|
--aia-primitive-blue-50: #eef2ff;
|
|
187
194
|
--aia-primitive-neutral-750-a50: rgba(189, 189, 189, 0.51);
|
|
195
|
+
--aia-primitive-neutral-750-a35: rgba(189, 189, 189, 0.35);
|
|
196
|
+
--aia-primitive-neutral-750-a30: rgba(189, 189, 189, 0.3);
|
|
197
|
+
--aia-primitive-neutral-750-a15: rgba(189, 189, 189, 0.15);
|
|
188
198
|
--aia-primitive-neutral-700-a40: rgba(176, 176, 176, 0.4);
|
|
189
199
|
}
|
|
190
200
|
|
|
@@ -201,10 +211,21 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
201
211
|
--aia-primitive-neutral-900
|
|
202
212
|
); /* was #e5e7eb \u2014 snapped to palette (\u03942) */
|
|
203
213
|
--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
|
|
204
|
-
|
|
214
|
+
/* Suggestion pills (Figma "ParamPill"): transparent fill + dashed border;
|
|
215
|
+
per-pill opacity via getPillOpacity. */
|
|
216
|
+
--aia-pill-bg: var(--aia-primitive-neutral-750);
|
|
205
217
|
--aia-pill-color: var(--aia-primitive-neutral-300);
|
|
218
|
+
--aia-pill-border: var(--aia-primitive-neutral-750-a30);
|
|
206
219
|
--aia-pill-font-size: 14px;
|
|
207
220
|
|
|
221
|
+
/* Completed params (Figma "RichTextPill"): compact faint-gray chip with
|
|
222
|
+
primary-color regular-weight text. -active is the hover / tapped (re-edit)
|
|
223
|
+
highlight \u2014 an alpha over the input background, so one value works in both
|
|
224
|
+
themes. */
|
|
225
|
+
--aia-completed-pill-bg: var(--aia-primitive-neutral-750-a15);
|
|
226
|
+
--aia-completed-pill-bg-active: var(--aia-primitive-neutral-750-a35);
|
|
227
|
+
--aia-completed-pill-color: var(--aia-primitive-neutral-0);
|
|
228
|
+
|
|
208
229
|
--aia-option-bg: var(--aia-primitive-blue-50);
|
|
209
230
|
--aia-option-color: var(--aia-primitive-neutral-500);
|
|
210
231
|
--aia-option-color-selected: var(--aia-primitive-neutral-0);
|
|
@@ -242,10 +263,18 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
242
263
|
--aia-primitive-neutral-400
|
|
243
264
|
); /* was #484848 \u2014 snapped to palette (\u03942) */
|
|
244
265
|
--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
|
|
266
|
+
/* Suggestion pills (Figma "ParamPill"): transparent fill + dashed border. */
|
|
245
267
|
--aia-pill-bg: var(--aia-primitive-neutral-750);
|
|
246
268
|
--aia-pill-color: var(--aia-primitive-neutral-700);
|
|
269
|
+
--aia-pill-border: var(--aia-primitive-neutral-750-a30);
|
|
247
270
|
--aia-pill-font-size: 14px;
|
|
248
271
|
|
|
272
|
+
/* Completed params (Figma "RichTextPill") \u2014 dark theme (design source):
|
|
273
|
+
white text on a faint-gray chip. -active is the hover / tapped highlight. */
|
|
274
|
+
--aia-completed-pill-bg: var(--aia-primitive-neutral-750-a15);
|
|
275
|
+
--aia-completed-pill-bg-active: var(--aia-primitive-neutral-750-a35);
|
|
276
|
+
--aia-completed-pill-color: var(--aia-primitive-neutral-1000);
|
|
277
|
+
|
|
249
278
|
--aia-option-bg: var(--aia-primitive-neutral-250);
|
|
250
279
|
--aia-option-color: var(--aia-primitive-neutral-700);
|
|
251
280
|
--aia-option-color-selected: var(--aia-primitive-neutral-1000);
|
|
@@ -396,7 +425,7 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
396
425
|
opacity: 0.25;
|
|
397
426
|
}
|
|
398
427
|
}
|
|
399
|
-
`,document.head.appendChild(e)}var
|
|
428
|
+
`,document.head.appendChild(e)}var ie={dropdown:"AIAutocompleteDropdown-module_dropdown_yz2KC",visible:"AIAutocompleteDropdown-module_visible_QCoXj",pillBar:"AIAutocompleteDropdown-module_pillBar_pwTXe",skeletonBars:"AIAutocompleteDropdown-module_skeletonBars_HVr9C",skeletonBar:"AIAutocompleteDropdown-module_skeletonBar_O3xIx",aiaSkeletonPulse:"AIAutocompleteDropdown-module_aiaSkeletonPulse_G8W7q"};import{getFooterHint as ut}from"@magicx-eng/ai-autocomplete-vanilla";if(typeof document<"u"&&!document.getElementById("ac-style-5259a217")){let e=document.createElement("style");e.id="ac-style-5259a217",e.textContent=`@layer layout {
|
|
400
429
|
.aia-cluster {
|
|
401
430
|
display: flex;
|
|
402
431
|
flex-wrap: wrap;
|
|
@@ -438,7 +467,7 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
438
467
|
justify-content: space-around;
|
|
439
468
|
}
|
|
440
469
|
}
|
|
441
|
-
`,document.head.appendChild(e)}import{jsx as He}from"react/jsx-runtime";function le({gap:e,align:
|
|
470
|
+
`,document.head.appendChild(e)}import{jsx as He}from"react/jsx-runtime";function le({gap:e,align:l="center",justify:i="start",noWrap:r=!1,inline:d=!1,className:a,children:s,...c}){let b=e?{"--aia-cluster-gap":e}:void 0,x={className:a?`aia-cluster ${a}`:"aia-cluster","data-align":l,"data-justify":i,"data-nowrap":r||void 0,"data-inline":d||void 0,style:b,...c};return d?He("span",{...x,children:s}):He("div",{...x,children:s})}if(typeof document<"u"&&!document.getElementById("ac-style-56b0c577")){let e=document.createElement("style");e.id="ac-style-56b0c577",e.textContent=`/* The footer adds its own 8px horizontal inset so it stays clear of the
|
|
442
471
|
dropdown's rounded edges. The top inset (--aia-footer-gap) adds breathing
|
|
443
472
|
room above the hint/branding row so the footer doesn't butt against the last
|
|
444
473
|
option row \u2014 additive to the dropdown's 8px section gap. */
|
|
@@ -519,19 +548,17 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
519
548
|
justify-content: flex-end;
|
|
520
549
|
}
|
|
521
550
|
}
|
|
522
|
-
`,document.head.appendChild(e)}var
|
|
551
|
+
`,document.head.appendChild(e)}var q={footer:"DropdownFooter-module_footer_qQQ7x",hintGroup:"DropdownFooter-module_hintGroup_ZzbPf",brandLink:"DropdownFooter-module_brandLink_r4f3R",key:"DropdownFooter-module_key_Bz1H-",hint:"DropdownFooter-module_hint_GKEOH",brand:"DropdownFooter-module_brand_Al-lR",badge:"DropdownFooter-module_badge_Fk9vg",row:"DropdownFooter-module_row_BgZ6Q"};import{jsx as de,jsxs as Pe}from"react/jsx-runtime";function Ne({isOptionHighlighted:e=!1,isInputEmpty:l=!1}){let{key:i,hint:r}=ut(e,l);return de("footer",{className:q.footer,"data-aia-footer":"",children:Pe(le,{justify:"between",noWrap:!0,className:q.row,children:[Pe(le,{gap:"5px",className:q.hintGroup,children:[de("kbd",{className:q.key,children:i}),de("span",{className:q.hint,children:r})]}),Pe("a",{className:q.brandLink,href:"https://ai-autocomplete.com",target:"_blank",rel:"noopener noreferrer",children:[de("span",{className:q.brand,children:"AI"}),de("span",{className:q.badge,children:"Autocomplete"})]})]})})}if(typeof document<"u"&&!document.getElementById("ac-style-199d0432")){let e=document.createElement("style");e.id="ac-style-199d0432",e.textContent=`/* ParamPill (Figma "ParamPill") \u2014 unfilled suggestion pill: transparent fill
|
|
552
|
+
with a dashed border. ~28px via 6px padding + 14px text + the 1px border
|
|
553
|
+
(border-box). */
|
|
554
|
+
.ParamPill-module_pill_6Ga7S {
|
|
523
555
|
display: inline-flex;
|
|
524
556
|
align-items: center;
|
|
525
557
|
justify-content: center;
|
|
526
|
-
padding:
|
|
527
|
-
border:
|
|
558
|
+
padding: 6px;
|
|
559
|
+
border: 1px dashed var(--aia-pill-border, rgba(189, 189, 189, 0.3));
|
|
528
560
|
border-radius: 999px;
|
|
529
|
-
background:
|
|
530
|
-
background: color-mix(
|
|
531
|
-
in srgb,
|
|
532
|
-
var(--aia-pill-bg, var(--aia-color-background-supportive, #313255)) 30%,
|
|
533
|
-
transparent
|
|
534
|
-
);
|
|
561
|
+
background: transparent;
|
|
535
562
|
color: var(--aia-pill-color, var(--aia-color-text-muted, #c1c4cb));
|
|
536
563
|
font-family: inherit;
|
|
537
564
|
font-size: var(--aia-pill-font-size, 14px);
|
|
@@ -539,24 +566,26 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
539
566
|
line-height: normal;
|
|
540
567
|
cursor: pointer;
|
|
541
568
|
white-space: nowrap;
|
|
542
|
-
animation:
|
|
569
|
+
animation: ParamPill-module_fadeIn_Ux4eQ 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
543
570
|
}
|
|
544
571
|
|
|
545
|
-
.
|
|
572
|
+
.ParamPill-module_rounded_y7xA9 {
|
|
546
573
|
border-radius: 999px;
|
|
547
574
|
}
|
|
548
575
|
|
|
549
576
|
/* Loading skeleton \u2014 preserves the pill's exact box (same width and height)
|
|
550
|
-
and
|
|
551
|
-
|
|
552
|
-
.
|
|
577
|
+
and hides the text. The base pill is now transparent, so fill the interior
|
|
578
|
+
with the skeleton color (inside the dashed border) and pulse it so it still
|
|
579
|
+
reads as a loading chip. */
|
|
580
|
+
.ParamPill-module_skeleton_57P0T {
|
|
553
581
|
pointer-events: none;
|
|
554
582
|
cursor: default;
|
|
555
583
|
color: transparent;
|
|
556
|
-
|
|
584
|
+
background: var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, 0.51)));
|
|
585
|
+
animation: ParamPill-module_skeletonPulse_xGcUy 1.4s ease-in-out infinite;
|
|
557
586
|
}
|
|
558
587
|
|
|
559
|
-
@keyframes
|
|
588
|
+
@keyframes ParamPill-module_skeletonPulse_xGcUy {
|
|
560
589
|
0%,
|
|
561
590
|
100% {
|
|
562
591
|
filter: brightness(1);
|
|
@@ -566,12 +595,12 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
566
595
|
}
|
|
567
596
|
}
|
|
568
597
|
|
|
569
|
-
@keyframes
|
|
598
|
+
@keyframes ParamPill-module_fadeIn_Ux4eQ {
|
|
570
599
|
from {
|
|
571
600
|
opacity: 0;
|
|
572
601
|
}
|
|
573
602
|
}
|
|
574
|
-
`,document.head.appendChild(e)}var
|
|
603
|
+
`,document.head.appendChild(e)}var J={pill:"ParamPill-module_pill_6Ga7S",fadeIn:"ParamPill-module_fadeIn_Ux4eQ",rounded:"ParamPill-module_rounded_y7xA9",skeleton:"ParamPill-module_skeleton_57P0T",skeletonPulse:"ParamPill-module_skeletonPulse_xGcUy"};import{jsx as mt}from"react/jsx-runtime";var Se={selected:1,first:.7,next:.4,last:.2};function Ke({label:e,state:l,rounded:i,loading:r,onClick:d}){let a=[J.pill,i?J.rounded:"",r?J.skeleton:""].filter(Boolean).join(" ");return mt("button",{type:"button","data-aia-pill":"","data-aia-loading":r?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:a,style:{opacity:Se[l]},onMouseDown:s=>s.preventDefault(),onClick:r?void 0:d,disabled:r,children:e})}if(typeof document<"u"&&!document.getElementById("ac-style-0fcb7940")){let e=document.createElement("style");e.id="ac-style-0fcb7940",e.textContent=`.PillList-module_list_qvLqO {
|
|
575
604
|
position: relative;
|
|
576
605
|
z-index: 1;
|
|
577
606
|
pointer-events: auto;
|
|
@@ -581,7 +610,7 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
581
610
|
align-items: center;
|
|
582
611
|
vertical-align: middle;
|
|
583
612
|
}
|
|
584
|
-
`,document.head.appendChild(e)}var
|
|
613
|
+
`,document.head.appendChild(e)}var Ae={list:"PillList-module_list_qvLqO"};import{jsx as be}from"react/jsx-runtime";var gt=[125,69];function We(e){return e===0?"first":e===1?"next":"last"}function xe({pills:e,activePillIndex:l,onSelectPill:i,activeSelected:r,rounded:d,loading:a}){return a&&e.length===0?be("span",{className:Ae.list,"data-aia-pill-list-loading":"",children:gt.map((s,c)=>be("span",{"data-aia-pill-skeleton":"",className:`${J.pill} ${d?J.rounded:""} ${J.skeleton}`,style:{width:s,opacity:Se[We(c)]}},`skel-${s}`))}):be("span",{className:Ae.list,"data-aia-pill-list-loading":a?"":void 0,children:e.map((s,c)=>{let b=!!r&&c===l;return be(Ke,{label:s.text,state:b?"selected":We(c),selected:b,rounded:d,loading:a,onClick:()=>i(c)},`${s.type}-${s.text}`)})})}import{useEffect as ft,useLayoutEffect as ht,useRef as bt,useState as xt}from"react";if(typeof document<"u"&&!document.getElementById("ac-style-948e58da")){let e=document.createElement("style");e.id="ac-style-948e58da",e.textContent=`@layer layout {
|
|
585
614
|
.aia-grid {
|
|
586
615
|
display: grid;
|
|
587
616
|
grid-template-columns: repeat(
|
|
@@ -640,7 +669,7 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
640
669
|
display: none;
|
|
641
670
|
}
|
|
642
671
|
}
|
|
643
|
-
`,document.head.appendChild(e)}import{jsx as Ge}from"react/jsx-runtime";function
|
|
672
|
+
`,document.head.appendChild(e)}import{jsx as Ge}from"react/jsx-runtime";function Ue({min:e="16rem",max:l,gap:i,scroll:r=!1,maxHeight:d,fade:a=!1,className:s,children:c,...b}){let x=bt(null),[R,I]=xt(!1);ft(()=>{if(!a)return;let w=x.current;if(!w)return;let C=()=>{I(w.scrollHeight-w.scrollTop-w.clientHeight>1)};w.addEventListener("scroll",C,{passive:!0});let F=new ResizeObserver(C);return F.observe(w),()=>{w.removeEventListener("scroll",C),F.disconnect()}},[a]),ht(()=>{let w=x.current;!a||!w||I(w.scrollHeight-w.scrollTop-w.clientHeight>1)},[a,c]);let k={"--aia-grid-min":e};l&&(k["--aia-grid-max"]=l),i&&(k["--aia-grid-gap"]=i),d&&(k["--aia-grid-max-height"]=d);let P=Ge("div",{ref:x,className:!a&&s?`aia-grid ${s}`:"aia-grid","data-scroll":r||void 0,style:k,...a?{}:b,children:c});return a?Ge("div",{className:s?`aia-grid-fade ${s}`:"aia-grid-fade","data-fade":R?"":void 0,...b,children:P}):P}import{useEffect as vt,useRef as wt,useState as yt}from"react";if(typeof document<"u"&&!document.getElementById("ac-style-82820da7")){let e=document.createElement("style");e.id="ac-style-82820da7",e.textContent=`.SuggestionItem-module_item_d4vpD {
|
|
644
673
|
position: relative;
|
|
645
674
|
overflow: visible;
|
|
646
675
|
display: flex;
|
|
@@ -990,7 +1019,7 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
990
1019
|
filter: brightness(0.55);
|
|
991
1020
|
}
|
|
992
1021
|
}
|
|
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
|
|
1022
|
+
`,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 je({option:e,isHighlighted:l,onSelect:i,onHighlight:r,id:d,loading:a}){let[s,c]=yt(!1),b=wt(void 0);vt(()=>()=>clearTimeout(b.current),[]);let x=()=>{a||!e.is_tappable||s||(c(!0),i(e),clearTimeout(b.current),b.current=setTimeout(()=>c(!1),500))},R=[H.item,l&&!a?H.highlighted:"",e.is_tappable?H.tappable:H.nonTappable,s?H.pressed:""].filter(Boolean).join(" ");return Ve("div",{id:d,role:"option","data-aia-option":"","data-aia-loading":a?"":void 0,"aria-selected":l,className:R,tabIndex:a||!e.is_tappable?-1:0,onClick:x,onKeyDown:I=>{!a&&e.is_tappable&&(I.key==="Enter"||I.key===" ")&&(I.preventDefault(),x())},onMouseEnter:!a&&e.is_tappable?r:void 0,children:[ve("div",{className:H.streaks}),ve("div",{className:H.streaksVert}),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 qe({options:e,activeIndex:l,onSelect:i,onHighlight:r,listboxId:d,loading:a}){return $e(Ue,{min:"250px",max:"250px",gap:"0",scroll:!0,fade:!0,children:e.map((s,c)=>$e(je,{option:s,isHighlighted:c===l,onSelect:i,onHighlight:()=>r(c),id:`${d}-option-${c}`,loading:a},s.text))})}if(typeof document<"u"&&!document.getElementById("ac-style-8414cd5f")){let e=document.createElement("style");e.id="ac-style-8414cd5f",e.textContent=`@layer layout {
|
|
994
1023
|
.aia-stack {
|
|
995
1024
|
display: flex;
|
|
996
1025
|
flex-direction: column;
|
|
@@ -1007,7 +1036,7 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
1007
1036
|
}
|
|
1008
1037
|
/* data-align="stretch" is the flex default \u2014 no rule needed. */
|
|
1009
1038
|
}
|
|
1010
|
-
`,document.head.appendChild(e)}import{jsx as _t}from"react/jsx-runtime";function Qe({space:e,align:
|
|
1039
|
+
`,document.head.appendChild(e)}import{jsx as _t}from"react/jsx-runtime";function Qe({space:e,align:l="stretch",className:i,children:r,...d}){let a=e?{"--aia-stack-space":e}:void 0;return _t("div",{className:i?`aia-stack ${i}`:"aia-stack","data-align":l,style:a,...d,children:r})}import{jsx as ae,jsxs as Ct}from"react/jsx-runtime";var St=[159,119,164];function At(e){let l=()=>typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches,[i,r]=Pt(l);if(kt(()=>{if(e!=="auto"||typeof window>"u"||typeof window.matchMedia!="function")return;let d=window.matchMedia("(prefers-color-scheme: dark)"),a=()=>r(d.matches);return d.addEventListener("change",a),()=>d.removeEventListener("change",a)},[e]),e!==void 0)return e==="auto"?i?"dark":"light":e}function Ce({suggestions:e,activeIndex:l,onSelect:i,onHighlight:r,isOpen:d,id:a,className:s,pills:c,onPillClick:b,showPills:x=!0,activeSelected:R=!1,isLoading:I=!1,isInputEmpty:k=!1,optionsPosition:P="below",mode:w}){let C=At(w),F=C!==void 0,V=e[0]?.options??[],n=!!(c&&c.length>0&&b),y=d&&(V.length>0||x&&n||I),L={suggestions:e,activeIndex:l,pills:c,showPills:x,activeSelected:R,isLoading:I,isInputEmpty:k},W=It(L);y&&(W.current=L);let f=y?L:W.current,z=f.suggestions[0]?.options??[],E=f.activeIndex>=0&&!!z[f.activeIndex]?.is_tappable,G=!!(f.pills&&f.pills.length>0&&b),T=f.showPills&&G,X=f.showPills&&!G&&f.isLoading,j=T||X,B=z.length>0,O=f.isLoading&&!B;return ae("div",{id:a,role:"listbox","data-aia-dropdown":"","data-options-position":P,"data-mode":C,"data-aia-loading":f.isLoading?"":void 0,className:`${F?"magicx-aia ":""}${ie.dropdown} ${y?ie.visible:""} ${s??""}`,onMouseDown:h=>h.preventDefault(),children:Ct(Qe,{space:"8px",children:[j&&ae(le,{noWrap:!0,className:ie.pillBar,"data-aia-pillbar":"",children:ae(xe,{pills:f.pills??[],activePillIndex:0,activeSelected:f.activeSelected,onSelectPill:b??(()=>{}),rounded:!0,loading:f.isLoading})}),B&&ae(qe,{options:z,activeIndex:f.activeIndex,onSelect:i,onHighlight:r,listboxId:a,loading:f.isLoading}),O&&ae("div",{className:ie.skeletonBars,"data-aia-skeleton-bars":"",children:St.map(h=>ae("span",{className:ie.skeletonBar,style:{width:h}},`bar-${h}`))}),ae(Ne,{isOptionHighlighted:E,isInputEmpty:f.isInputEmpty})]})})}import{buildQuery as Mt,ModeController as Ht,setCursorOffset as Nt}from"@magicx-eng/ai-autocomplete-vanilla";if(typeof document<"u"&&!document.getElementById("ac-style-fdee06e6")){let e=document.createElement("style");e.id="ac-style-fdee06e6",e.textContent=`.SubmitButton-module_submitButton_otz7H {
|
|
1011
1040
|
flex-shrink: 0;
|
|
1012
1041
|
width: 32px;
|
|
1013
1042
|
height: 32px;
|
|
@@ -1042,5 +1071,5 @@ import{forwardRef as zt,useCallback as Te,useEffect as ot,useImperativeHandle as
|
|
|
1042
1071
|
);
|
|
1043
1072
|
cursor: default;
|
|
1044
1073
|
}
|
|
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};
|
|
1074
|
+
`,document.head.appendChild(e)}var Xe={submitButton:"SubmitButton-module_submitButton_otz7H"};import{jsx as Ee}from"react/jsx-runtime";function Ze({disabled:e,onClick:l}){return Ee("button",{type:"button","data-aia-submit":"",className:Xe.submitButton,disabled:e,onClick:i=>{i.stopPropagation(),l()},"aria-label":"Submit",children:Ee("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:Ee("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}import{AIAutocomplete as Et}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as Je,useEffect as we,useRef as N,useState as Dt}from"react";var Rt={text:"",completedParams:[],suggestions:[],activeDropdownIndex:-1,newParamId:null,isLoading:!0,isReady:!1,error:null,segments:[],actionableSuggestions:[],filteredOptions:[],placeholderText:"",isDropdownOpen:!1,isActivePillSelected:!1,filterBase:0,filterInProgress:!1,pillTapped:!1,skipNextFetch:!1,lastRawQuery:"",isFocused:!1,editingParam:null,editingAnchor:null,editingTail:null,caretOffset:null,inSelectionAnimation:!1};function De({onSubmit:e,onError:l,optionOverrides:i,maskCompletedText:r,apiConfig:d,columns:a=2,dropdownTrigger:s,optionsPosition:c,closeDropdownOnBlur:b,showNonTappableOptions:x,onFocus:R,onBlur:I,value:k,completedParams:P,onChange:w,onParamsChange:C,source:F,setCursor:V}){let n=N(null),[y,L]=Dt(null),W=N(e);W.current=e;let f=N(l);f.current=l;let Q=N(w);Q.current=w;let z=N(C);z.current=C;let E=N(R);E.current=R;let G=N(I);G.current=I;let T=N(V);T.current=V,we(()=>{if(typeof document>"u")return;let o=new Et(document.createElement("div"),{renderMode:"headless",apiConfig:d,optionOverrides:i,maskCompletedText:r,columns:a,dropdownTrigger:s,optionsPosition:c,closeDropdownOnBlur:b,showNonTappableOptions:x,source:F,value:k,completedParams:P,onSubmit:(...S)=>W.current?.(...S),onError:(...S)=>f.current?.(...S),onChange:(...S)=>Q.current?.(...S),onParamsChange:(...S)=>z.current?.(...S),onFocus:()=>E.current?.(),onBlur:()=>G.current?.(),setCursor:S=>T.current?.(S)});n.current=o,L(o.getState());let A=o.subscribe(S=>L(S));return()=>{A(),o.destroy(),n.current===o&&(n.current=null)}},[]),we(()=>{k!==void 0&&n.current?.setValue(k)},[k]),we(()=>{P!==void 0&&n.current?.setCompletedParams(P)},[P]);let X=JSON.stringify(d??null),j=N(i),B=N(0);if(i!==j.current){let o=j.current,A=i,S=Object.keys(o??{}),oe=Object.keys(A??{});(S.length!==oe.length||oe.some(se=>!o?.[se]||A[se]!==o[se]))&&B.current++,j.current=i}we(()=>{n.current?.update({apiConfig:d,optionOverrides:i,dropdownTrigger:s,optionsPosition:c,closeDropdownOnBlur:b,showNonTappableOptions:x})},[X,B.current,s,c,b,x]);let O=N(null);O.current===null&&(O.current={handleTextChange:o=>n.current?.handleTextChange(o),handleKeyDown:o=>{let A="nativeEvent"in o?o.nativeEvent:o;n.current?.handleKeyDown(A)},setFocused:o=>n.current?.setFocused(o),startEditingParam:o=>n.current?.startEditingParam(o),exitEditMode:()=>n.current?.exitEditMode(),handleCaretAfterInput:o=>n.current?.handleCaretAfterInput(o),handleCaretMove:o=>n.current?.handleCaretMove(o),replaceEditingRange:o=>n.current?.replaceEditingRange(o)??!1,setActivePill:o=>n.current?.setActivePill(o),removeLastParam:()=>n.current?.removeLastParam(),clearNewParamId:()=>n.current?.clearNewParamId(),reset:()=>n.current?.reset(),selectOption:o=>n.current?.selectOption(o),setActiveDropdownIndex:o=>n.current?.setActiveDropdownIndex(o),handleFocus:()=>n.current?.setFocused(!0),handleBlur:()=>n.current?.setFocused(!1)});let h=O.current,Y=Je(o=>{let A=o.target.value,oe=A.length>0&&!o.nativeEvent?.isComposing&&A[0]!==A[0].toUpperCase()?A[0].toUpperCase()+A.slice(1):A;n.current?.handleTextChange(oe)},[]),ee=Je(o=>{n.current?.handleKeyDown(o.nativeEvent)},[]),Z=n.current,u=y??Rt,t=k!==void 0?k:u.text,p=P!==void 0?P:u.completedParams,m=u.actionableSuggestions,v=m[0],g=Z?.listboxId??"",D=u.activeDropdownIndex>=0&&Z?`${g}-option-${u.activeDropdownIndex}`:void 0,M=u.editingParam,$=M?{type:M.suggestionType,text:M.suggestionPlaceholder,required:!0,options:M.options}:null,ce=$??v,_e=$?[$]:m,ue=!Z||u.isLoading&&!u.editingParam&&!u.inSelectionAnimation;return{completedParams:p,suggestionPills:m,setActivePill:h.setActivePill,removeLastParam:h.removeLastParam,segments:u.segments,newParamId:u.newParamId,clearNewParamId:h.clearNewParamId,suggestions:u.suggestions,activeIndex:u.activeDropdownIndex,isReady:u.isReady,isLoading:ue,isFocused:u.isFocused,isDropdownOpen:u.isDropdownOpen,isActivePillSelected:u.isActivePillSelected,placeholderText:u.placeholderText,listboxId:g,error:u.error,handleTextChange:h.handleTextChange,handleKeyDown:h.handleKeyDown,setFocused:h.setFocused,editingParam:M,editingAnchor:u.editingAnchor,caretOffset:u.caretOffset,startEditingParam:h.startEditingParam,exitEditMode:h.exitEditMode,handleCaretAfterInput:h.handleCaretAfterInput,handleCaretMove:h.handleCaretMove,replaceEditingRange:h.replaceEditingRange,inputProps:{value:t,placeholder:u.placeholderText||void 0,onChange:Y,onKeyDown:ee,onFocus:h.handleFocus,onBlur:h.handleBlur,role:"combobox","aria-expanded":u.isDropdownOpen,"aria-activedescendant":D,"aria-autocomplete":"list","aria-controls":g},reset:h.reset,dropdownProps:{suggestions:ce?[{...ce,options:u.filteredOptions}]:[],activeIndex:u.activeDropdownIndex,onSelect:h.selectOption,onHighlight:h.setActiveDropdownIndex,isOpen:u.isDropdownOpen,id:g,pills:_e,activeSelected:u.isActivePillSelected,onPillClick:h.setActivePill,isLoading:ue,isInputEmpty:t.trim().length===0,optionsPosition:c??"below"}}}import{extractPlainText as Ye,getCursorOffset as et,plainTextLength as Tt,renderEditableContent as Lt,setCursorOffset as tt}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as K,useEffect as Re,useLayoutEffect as Te,useRef as ne}from"react";var ye;function zt(){if(ye!==void 0)return ye;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),ye=e.contentEditable==="plaintext-only",ye}function at(e){let{segments:l,newParamId:i,editingParam:r,editingAnchor:d,caretOffset:a,placeholderText:s,isFocused:c,isDropdownOpen:b,listboxId:x,activeDescendantId:R,autoFocus:I,handleTextChange:k,handleKeyDown:P,handleCaretAfterInput:w,handleCaretMove:C,startEditingParam:F,replaceEditingRange:V,setFocused:n}=e,y=ne(null),L=ne(!1),W=ne(""),f=ne(""),Q=ne(null),z=ne(0);Q.current=a,Re(()=>{if(!I)return;let t=y.current;if(!t)return;document.activeElement===t?n(!0):t.focus();let p=t.ownerDocument??document,m=p.getSelection(),v=m&&m.rangeCount>0&&t.contains(m.anchorNode);if(m&&!v){let g=p.createRange();g.selectNodeContents(t),g.collapse(!0),m.removeAllRanges(),m.addRange(g)}},[I,n]),Re(()=>{let t=y.current;if(!t)return;let p=t.ownerDocument??document,m=()=>{let v=p.getSelection();if(!v||v.rangeCount===0||!v.anchorNode||!t.contains(v.anchorNode))return;let g=v.anchorNode,$=(g.nodeType===Node.ELEMENT_NODE?g:g.parentElement)?.closest('strong[data-seg="completed"][data-param-id]')?.dataset.paramId??null;if($&&$!==r?.id){F($);return}performance.now()-z.current<50||C(et(t))};return p.addEventListener("selectionchange",m),()=>p.removeEventListener("selectionchange",m)},[r,F,C]),Te(()=>{let t=y.current;t&&Lt({input:t,segments:l,newParamId:i,editingParamId:r?.id??null,placeholderText:s??"",isFocused:c})},[l,i,r,s,c]),Te(()=>{let t=W.current,p=i??"";if(W.current=p,!p||p===t)return;let m=y.current;if(!m)return;m.focus();let v=Q.current??Tt(m);tt(m,v)},[i]),Te(()=>{let t=f.current,p=r?.id??"";if(f.current=p,!p||p===t||d==null)return;let m=y.current;m&&tt(m,d)},[r,d]);let E=K(()=>{if(L.current)return;let t=y.current;if(!t)return;let p=Ye(t),v=p.length>0&&p[0]!==p[0].toUpperCase()?p[0].toUpperCase()+p.slice(1):p;k(v)},[k]),G=K(()=>{z.current=performance.now(),E();let t=y.current;t&&w(et(t))},[E,w]);Re(()=>{let t=y.current;if(!t)return;let p=m=>{let v=m,g=v.inputType;if(g==="insertParagraph"||g==="insertLineBreak"||g==="insertFromDrop"){m.preventDefault();return}if(g.startsWith("insert")||g.startsWith("delete")){let D=g.startsWith("delete")?"":v.data??"";V(D)&&m.preventDefault()}};return t.addEventListener("beforeinput",p),()=>t.removeEventListener("beforeinput",p)},[V]);let T=K(()=>{L.current=!0},[]),X=K(()=>{L.current=!1,E()},[E]),j=K(t=>{t.preventDefault();let p=y.current;if(!p)return;let m=(t.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!m)return;let v=p.ownerDocument??document,g=v.getSelection();if(!g||g.rangeCount===0)return;let D=g.getRangeAt(0);if(!p.contains(D.startContainer))return;D.deleteContents();let M=v.createTextNode(m);D.insertNode(M),D.setStartAfter(M),D.collapse(!0),g.removeAllRanges(),g.addRange(D),E()},[E]),B=K(t=>P(t),[P]),O=K(()=>n(!0),[n]),h=K(()=>n(!1),[n]),Y=K(()=>y.current?.focus(),[]),ee=K(()=>y.current?.blur(),[]),Z=K(()=>{let t=y.current;return t?Ye(t):""},[]),u=zt()?"plaintext-only":"true";return{inputRef:y,editorProps:{ref:y,contentEditable:u,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":x,"aria-expanded":b,"aria-activedescendant":R,spellCheck:!0,enterKeyHint:"send",onInput:G,onKeyDown:B,onCompositionStart:T,onCompositionEnd:X,onPaste:j,onFocus:O,onBlur:h},getPlainText:Z,focus:Y,blur:ee}}import{jsx as re,jsxs as ze}from"react/jsx-runtime";function Kt(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var Wt=Ft(function({onSubmit:l,onError:i,optionOverrides:r,maskCompletedText:d,className:a,apiConfig:s,columns:c,pillPlacement:b="dropdown",mode:x="auto",optionsPosition:R="below",animations:I=!0,dropdownTrigger:k,closeDropdownOnBlur:P,showNonTappableOptions:w,autoFocus:C=!0,onFocus:F,onBlur:V,value:n,completedParams:y,onChange:L,onParamsChange:W,submitButton:f},Q){let z=pe(null),E=pe(null),G=pe(()=>{}),T=pe(null),X=pe(null);ot(()=>{let _=z.current;if(_)return T.current?T.current.setMode(x):T.current=new Ht(_,x),()=>{T.current?.destroy(),T.current=null}},[x]);let j=Le(_=>{let U=X.current?.current;U&&(U.focus(),Nt(U,_))},[]),{completedParams:B,suggestionPills:O,setActivePill:h,segments:Y,newParamId:ee,clearNewParamId:Z,placeholderText:u,isFocused:t,isDropdownOpen:p,isActivePillSelected:m,isLoading:v,activeIndex:g,listboxId:D,handleTextChange:M,handleKeyDown:$,setFocused:ce,editingParam:_e,editingAnchor:ue,caretOffset:o,startEditingParam:A,handleCaretAfterInput:S,handleCaretMove:oe,replaceEditingRange:se,dropdownProps:it,reset:me}=De({onSubmit:_=>G.current(_),onError:i,optionOverrides:r,maskCompletedText:d,apiConfig:s,columns:c,dropdownTrigger:k,optionsPosition:R,closeDropdownOnBlur:P,showNonTappableOptions:w,onFocus:F,onBlur:V,value:n,completedParams:y,onChange:L,onParamsChange:W,source:"full-sdk",setCursor:j});ot(()=>{if(!ee)return;let _=window.setTimeout(()=>Z(),650);return()=>window.clearTimeout(_)},[ee,Z]);let nt=g>=0?`${D}-option-${g}`:void 0,{inputRef:ke,editorProps:rt,focus:ge,blur:Fe,getPlainText:Be}=at({segments:Y,newParamId:ee,editingParam:_e,editingAnchor:ue,caretOffset:o,placeholderText:u,isFocused:t,isDropdownOpen:p,listboxId:D,activeDescendantId:nt,autoFocus:C,handleTextChange:M,handleKeyDown:$,handleCaretAfterInput:S,handleCaretMove:oe,startEditingParam:A,replaceEditingRange:se,setFocused:ce});X.current=ke,Ot(()=>{let _=E.current,U=ke.current;if(!_||!U)return;let he=()=>{let Me=_.firstElementChild;if(!Me)return;let pt=Me.getBoundingClientRect(),ct=U.getBoundingClientRect();pt.top>=ct.bottom-2?_.setAttribute("data-aia-pill-wrapped",""):_.removeAttribute("data-aia-pill-wrapped")};he();let Oe=new ResizeObserver(he);return Oe.observe(U),()=>Oe.disconnect()},[Y,O.length,v,ke]),Bt(Q,()=>({focus:ge,blur:Fe,reset:me,setMode:_=>T.current?.setMode(_)}),[ge,Fe,me]);let fe=!!Y.length||B.length>0,Ie=Le(()=>{if(!fe)return;let _=Be(),{rawQuery:U,completedParams:he}=Mt(_,B);l({query:_.trim(),raw_query:U,completed_params:he}),me()},[fe,B,l,me,Be]);G.current=Ie;let st=Le(_=>{_.target?.closest("[data-aia-pill]")||ge()},[ge]),lt=b==="inline",dt=b==="dropdown";return ze("div",{ref:z,className:`magicx-aia ${te.container} ${a??""}`,"data-pill-placement":b,"data-options-position":R,"data-animations":I?"on":"off","data-mode":Kt(x),children:[re(Ce,{...it,showPills:dt}),ze("div",{className:te.inputWrapper,onClick:st,children:[ze("div",{className:te.editorArea,"data-aia-editor":"",children:[re("div",{...rt,className:te.input,"data-aia-input":""}),lt&&(v||O.length>0)&&re("span",{ref:E,className:te.pillListContainer,"data-aia-pill-list-container":"",children:re(xe,{pills:O,activePillIndex:0,activeSelected:m,onSelectPill:h,loading:v})})]}),f===null?null:f===void 0?re(Ze,{disabled:!fe,onClick:Ie}):re("span",{"data-aia-submit":"",className:te.submitSlot,onClick:_=>{fe&&(_.stopPropagation(),Ie())},children:f})]})]})});export{Wt as AIAutocomplete,Ce as AIAutocompleteDropdown,De as useAIAutocomplete};
|
|
1046
1075
|
//# sourceMappingURL=index.mjs.map
|