@magicx-eng/ai-autocomplete-react 0.5.4 → 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 +41 -35
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +40 -34
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -405,8 +405,14 @@ Override on the container (via `className`). All defaults use `:where()` (zero s
|
|
|
405
405
|
| `--aia-written-text-color` | `#000000` | `#ffffff` | Input text |
|
|
406
406
|
| `--aia-written-text-font-size` | `19px` | `19px` | Input text font size |
|
|
407
407
|
| `--aia-caret-color` | `--aia-written-text-color` | `--aia-written-text-color` | Editor caret color. Override independently of input text color. |
|
|
408
|
-
| `--aia-submit-bg` | `#000000` | `#ffffff` | Submit button background |
|
|
409
|
-
| `--aia-submit-color` | `#ffffff` | `#000000` | Submit button
|
|
408
|
+
| `--aia-submit-bg` | `#000000` | `#ffffff` | Submit button background. Solid + full-opacity at rest, even when the input is empty/disabled. |
|
|
409
|
+
| `--aia-submit-color` | `#ffffff` | `#000000` | Submit button arrow color |
|
|
410
|
+
| `--aia-submit-bg-disabled` | `--aia-submit-bg` | `--aia-submit-bg` | Submit background when disabled (empty input). Defaults to the enabled background so themed colors aren't washed out. Set this for a faded rest state. |
|
|
411
|
+
| `--aia-submit-color-disabled` | `--aia-submit-color` | `--aia-submit-color` | Submit arrow color when disabled. Defaults to the enabled color. |
|
|
412
|
+
| `--aia-border` | `rgba(17, 24, 39, 0.14)` | `#505050` | Input container border color |
|
|
413
|
+
| `--aia-shadow` | `inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(16,24,40,0.1), 0 8px 24px rgba(16,24,40,0.16)` | `inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5)` | Input container elevation (box-shadow) |
|
|
414
|
+
| `--aia-dropdown-offset` | `13px` | `13px` | Gap between the input box and the dropdown (the dropdown's margin toward the input). |
|
|
415
|
+
| `--aia-footer-gap` | `8px` | `8px` | Breathing room above the dropdown footer (badge / keyboard hints), additive to the dropdown's 8px section gap. |
|
|
410
416
|
| `--aia-dropdown-bg` | — | — | Optional bg color the dropdown's "glass" rim shadow tints toward. Set this to the page background behind the dropdown so the bottom-corner glow blends seamlessly. |
|
|
411
417
|
| `--aia-scrollbar-thumb` | `rgba(0, 0, 0, 0.3)` | `rgba(0, 0, 0, 0.3)` | Color of the option list's scrollbar thumb (Firefox + WebKit). |
|
|
412
418
|
| `--aia-streak-rgb` | `99, 102, 241` | `255, 255, 255` | Comma-separated RGB triplet used to tint the option-selection streak animation (consumed via `rgba(var(--aia-streak-rgb), …)`). |
|
package/dist/index.js
CHANGED
|
@@ -12,6 +12,7 @@
|
|
|
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;
|
|
@@ -191,7 +192,11 @@
|
|
|
191
192
|
:where(.magicx-aia),
|
|
192
193
|
:where(.magicx-aia[data-mode="light"]) {
|
|
193
194
|
--aia-surface: var(--aia-primitive-neutral-1000);
|
|
194
|
-
--aia-border:
|
|
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);
|
|
195
200
|
--aia-dropdown-border: var(
|
|
196
201
|
--aia-primitive-neutral-900
|
|
197
202
|
); /* was #e5e7eb \u2014 snapped to palette (\u03942) */
|
|
@@ -219,7 +224,6 @@
|
|
|
219
224
|
--aia-streak-rgb: 99, 102, 241; /* off shared palette (indigo effect) */
|
|
220
225
|
--aia-streak-glass-bg: rgba(99, 102, 241, 0.1);
|
|
221
226
|
|
|
222
|
-
--aia-footer-divider: var(--aia-primitive-neutral-700-a40);
|
|
223
227
|
--aia-footer-hint-color: var(--aia-primitive-neutral-500);
|
|
224
228
|
--aia-footer-brand-color: var(--aia-primitive-neutral-700);
|
|
225
229
|
--aia-footer-badge-border: var(--aia-primitive-neutral-750-a50);
|
|
@@ -229,6 +233,11 @@
|
|
|
229
233
|
:where(.magicx-aia[data-mode="dark"]) {
|
|
230
234
|
--aia-surface: var(--aia-primitive-neutral-0);
|
|
231
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);
|
|
232
241
|
--aia-dropdown-border: var(
|
|
233
242
|
--aia-primitive-neutral-400
|
|
234
243
|
); /* was #484848 \u2014 snapped to palette (\u03942) */
|
|
@@ -256,7 +265,6 @@
|
|
|
256
265
|
--aia-streak-rgb: 255, 255, 255;
|
|
257
266
|
--aia-streak-glass-bg: rgba(255, 255, 255, 0.1);
|
|
258
267
|
|
|
259
|
-
--aia-footer-divider: rgba(255, 255, 255, 0.15); /* off shared palette (no .15 step) */
|
|
260
268
|
--aia-footer-hint-color: var(--aia-primitive-neutral-700);
|
|
261
269
|
--aia-footer-brand-color: var(--aia-primitive-neutral-500);
|
|
262
270
|
--aia-footer-badge-border: var(--aia-primitive-neutral-500);
|
|
@@ -277,7 +285,7 @@
|
|
|
277
285
|
top: auto;
|
|
278
286
|
bottom: 100%;
|
|
279
287
|
margin-top: 0;
|
|
280
|
-
margin-bottom:
|
|
288
|
+
margin-bottom: var(--aia-dropdown-offset, 13px);
|
|
281
289
|
}
|
|
282
290
|
|
|
283
291
|
:where(.magicx-aia[data-options-position="above"]) [data-aia-dropdown] .aia-stack,
|
|
@@ -285,15 +293,6 @@
|
|
|
285
293
|
flex-direction: column-reverse;
|
|
286
294
|
}
|
|
287
295
|
|
|
288
|
-
/* The footer sits at the top when the dropdown is above, so flip its own
|
|
289
|
-
internal stack too \u2014 the divider should sit BELOW the hint/branding row
|
|
290
|
-
(between the footer and the options beneath it), not above it. The footer's
|
|
291
|
-
own class is CSS-module-scoped, so target the stable data attribute. */
|
|
292
|
-
:where(.magicx-aia[data-options-position="above"]) [data-aia-dropdown] [data-aia-footer],
|
|
293
|
-
[data-aia-dropdown][data-options-position="above"] [data-aia-footer] {
|
|
294
|
-
flex-direction: column-reverse;
|
|
295
|
-
}
|
|
296
|
-
|
|
297
296
|
/* Disable all animations when data-animations="off" */
|
|
298
297
|
:where(.magicx-aia[data-animations="off"]) *,
|
|
299
298
|
:where(.magicx-aia[data-animations="off"]) *::before,
|
|
@@ -307,7 +306,8 @@
|
|
|
307
306
|
right: 0;
|
|
308
307
|
top: 100%;
|
|
309
308
|
max-width: 544px;
|
|
310
|
-
|
|
309
|
+
/* Gap between the input box and the dropdown. Tunable via --aia-dropdown-offset. */
|
|
310
|
+
margin-top: var(--aia-dropdown-offset, 13px);
|
|
311
311
|
display: flex;
|
|
312
312
|
flex-direction: column;
|
|
313
313
|
box-sizing: border-box;
|
|
@@ -396,7 +396,7 @@
|
|
|
396
396
|
opacity: 0.25;
|
|
397
397
|
}
|
|
398
398
|
}
|
|
399
|
-
`,document.head.appendChild(e)}var pe={dropdown:"AIAutocompleteDropdown-module_dropdown_yz2KC",visible:"AIAutocompleteDropdown-module_visible_QCoXj",pillBar:"AIAutocompleteDropdown-module_pillBar_pwTXe",skeletonBars:"AIAutocompleteDropdown-module_skeletonBars_HVr9C",skeletonBar:"AIAutocompleteDropdown-module_skeletonBar_O3xIx",aiaSkeletonPulse:"AIAutocompleteDropdown-module_aiaSkeletonPulse_G8W7q"};var
|
|
399
|
+
`,document.head.appendChild(e)}var pe={dropdown:"AIAutocompleteDropdown-module_dropdown_yz2KC",visible:"AIAutocompleteDropdown-module_visible_QCoXj",pillBar:"AIAutocompleteDropdown-module_pillBar_pwTXe",skeletonBars:"AIAutocompleteDropdown-module_skeletonBars_HVr9C",skeletonBar:"AIAutocompleteDropdown-module_skeletonBar_O3xIx",aiaSkeletonPulse:"AIAutocompleteDropdown-module_aiaSkeletonPulse_G8W7q"};var We=require("@magicx-eng/ai-autocomplete-vanilla");if(typeof document<"u"&&!document.getElementById("ac-style-5259a217")){let e=document.createElement("style");e.id="ac-style-5259a217",e.textContent=`@layer layout {
|
|
400
400
|
.aia-cluster {
|
|
401
401
|
display: flex;
|
|
402
402
|
flex-wrap: wrap;
|
|
@@ -438,19 +438,15 @@
|
|
|
438
438
|
justify-content: space-around;
|
|
439
439
|
}
|
|
440
440
|
}
|
|
441
|
-
`,document.head.appendChild(e)}var Le=require("react/jsx-runtime");function fe({gap:e,align:t="center",justify:a="start",noWrap:l=!1,inline:o=!1,className:
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
441
|
+
`,document.head.appendChild(e)}var Le=require("react/jsx-runtime");function fe({gap:e,align:t="center",justify:a="start",noWrap:l=!1,inline:o=!1,className:i,children:d,...p}){let x=e?{"--aia-cluster-gap":e}:void 0,v={className:i?`aia-cluster ${i}`:"aia-cluster","data-align":t,"data-justify":a,"data-nowrap":l||void 0,"data-inline":o||void 0,style:x,...p};return o?(0,Le.jsx)("span",{...v,children:d}):(0,Le.jsx)("div",{...v,children:d})}if(typeof document<"u"&&!document.getElementById("ac-style-56b0c577")){let e=document.createElement("style");e.id="ac-style-56b0c577",e.textContent=`/* The footer 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. */
|
|
445
445
|
.DropdownFooter-module_footer_qQQ7x {
|
|
446
446
|
display: flex;
|
|
447
447
|
flex-direction: column;
|
|
448
448
|
gap: 8px;
|
|
449
|
-
padding:
|
|
450
|
-
}
|
|
451
|
-
|
|
452
|
-
.DropdownFooter-module_divider_FlX4C {
|
|
453
|
-
border-top: 1px solid var(--aia-footer-divider, rgba(176, 176, 176, 0.4));
|
|
449
|
+
padding: var(--aia-footer-gap, 8px) 8px 0;
|
|
454
450
|
}
|
|
455
451
|
|
|
456
452
|
.DropdownFooter-module_hintGroup_ZzbPf {
|
|
@@ -513,10 +509,9 @@
|
|
|
513
509
|
}
|
|
514
510
|
|
|
515
511
|
/* Mobile footer variant (Figma "Mobile"): on phone-width viewports drop the
|
|
516
|
-
keyboard hint ("tab to select" is meaningless on touch)
|
|
517
|
-
|
|
512
|
+
keyboard hint ("tab to select" is meaningless on touch), leaving only the
|
|
513
|
+
AI-Autocomplete brand pinned to the right. */
|
|
518
514
|
@media (max-width: 768px) {
|
|
519
|
-
.DropdownFooter-module_divider_FlX4C,
|
|
520
515
|
.DropdownFooter-module_hintGroup_ZzbPf {
|
|
521
516
|
display: none;
|
|
522
517
|
}
|
|
@@ -524,7 +519,7 @@
|
|
|
524
519
|
justify-content: flex-end;
|
|
525
520
|
}
|
|
526
521
|
}
|
|
527
|
-
`,document.head.appendChild(e)}var
|
|
522
|
+
`,document.head.appendChild(e)}var Y={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"};var U=require("react/jsx-runtime");function Ke({isOptionHighlighted:e=!1,isInputEmpty:t=!1}){let{key:a,hint:l}=(0,We.getFooterHint)(e,t);return(0,U.jsx)("footer",{className:Y.footer,"data-aia-footer":"",children:(0,U.jsxs)(fe,{justify:"between",noWrap:!0,className:Y.row,children:[(0,U.jsxs)(fe,{gap:"5px",className:Y.hintGroup,children:[(0,U.jsx)("kbd",{className:Y.key,children:a}),(0,U.jsx)("span",{className:Y.hint,children:l})]}),(0,U.jsxs)("a",{className:Y.brandLink,href:"https://ai-autocomplete.com",target:"_blank",rel:"noopener noreferrer",children:[(0,U.jsx)("span",{className:Y.brand,children:"AI"}),(0,U.jsx)("span",{className:Y.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- {
|
|
528
523
|
display: inline-flex;
|
|
529
524
|
align-items: center;
|
|
530
525
|
justify-content: center;
|
|
@@ -576,7 +571,7 @@
|
|
|
576
571
|
opacity: 0;
|
|
577
572
|
}
|
|
578
573
|
}
|
|
579
|
-
`,document.head.appendChild(e)}var ee={pill:"Pill-module_pill_3Rkw-",fadeIn:"Pill-module_fadeIn_Bbqtz",rounded:"Pill-module_rounded_6WMps",skeleton:"Pill-module_skeleton_-u9-j",skeletonPulse:"Pill-module_skeletonPulse_xHh-7"};var je=require("react/jsx-runtime"),Te={selected:1,first:.7,next:.4,last:.2};function Ge({label:e,state:t,selected:a,rounded:l,loading:o,onClick:
|
|
574
|
+
`,document.head.appendChild(e)}var ee={pill:"Pill-module_pill_3Rkw-",fadeIn:"Pill-module_fadeIn_Bbqtz",rounded:"Pill-module_rounded_6WMps",skeleton:"Pill-module_skeleton_-u9-j",skeletonPulse:"Pill-module_skeletonPulse_xHh-7"};var je=require("react/jsx-runtime"),Te={selected:1,first:.7,next:.4,last:.2};function Ge({label:e,state:t,selected:a,rounded:l,loading:o,onClick:i}){let d=[ee.pill,l?ee.rounded:"",a&&!o?ee.active:"",o?ee.skeleton:""].filter(Boolean).join(" ");return(0,je.jsx)("button",{type:"button","data-aia-pill":"","data-aia-loading":o?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:d,style:{opacity:Te[t]},onMouseDown:p=>p.preventDefault(),onClick:o?void 0:i,disabled:o,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 {
|
|
580
575
|
position: relative;
|
|
581
576
|
z-index: 1;
|
|
582
577
|
pointer-events: auto;
|
|
@@ -586,7 +581,7 @@
|
|
|
586
581
|
align-items: center;
|
|
587
582
|
vertical-align: middle;
|
|
588
583
|
}
|
|
589
|
-
`,document.head.appendChild(e)}var Be={list:"PillList-module_list_qvLqO"};var he=require("react/jsx-runtime"),ht=[125,69];function Ve(e){return e===0?"first":e===1?"next":"last"}function ke({pills:e,activePillIndex:t,onSelectPill:a,activeSelected:l,rounded:o,loading:
|
|
584
|
+
`,document.head.appendChild(e)}var Be={list:"PillList-module_list_qvLqO"};var he=require("react/jsx-runtime"),ht=[125,69];function Ve(e){return e===0?"first":e===1?"next":"last"}function ke({pills:e,activePillIndex:t,onSelectPill:a,activeSelected:l,rounded:o,loading:i}){return i&&e.length===0?(0,he.jsx)("span",{className:Be.list,"data-aia-pill-list-loading":"",children:ht.map((d,p)=>(0,he.jsx)("span",{"data-aia-pill-skeleton":"",className:`${ee.pill} ${o?ee.rounded:""} ${ee.skeleton}`,style:{width:d,opacity:Te[Ve(p)]}},`skel-${d}`))}):(0,he.jsx)("span",{className:Be.list,"data-aia-pill-list-loading":i?"":void 0,children:e.map((d,p)=>{let x=!!l&&p===t;return(0,he.jsx)(Ge,{label:d.text,state:x?"selected":Ve(p),selected:x,rounded:o,loading:i,onClick:()=>a(p)},`${d.type}-${d.text}`)})})}var ne=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-948e58da")){let e=document.createElement("style");e.id="ac-style-948e58da",e.textContent=`@layer layout {
|
|
590
585
|
.aia-grid {
|
|
591
586
|
display: grid;
|
|
592
587
|
grid-template-columns: repeat(
|
|
@@ -645,7 +640,7 @@
|
|
|
645
640
|
display: none;
|
|
646
641
|
}
|
|
647
642
|
}
|
|
648
|
-
`,document.head.appendChild(e)}var ze=require("react/jsx-runtime");function qe({min:e="16rem",max:t,gap:a,scroll:l=!1,maxHeight:o,fade:
|
|
643
|
+
`,document.head.appendChild(e)}var ze=require("react/jsx-runtime");function qe({min:e="16rem",max:t,gap:a,scroll:l=!1,maxHeight:o,fade:i=!1,className:d,children:p,...x}){let v=(0,ne.useRef)(null),[B,P]=(0,ne.useState)(!1);(0,ne.useEffect)(()=>{if(!i)return;let y=v.current;if(!y)return;let R=()=>{P(y.scrollHeight-y.scrollTop-y.clientHeight>1)};y.addEventListener("scroll",R,{passive:!0});let H=new ResizeObserver(R);return H.observe(y),()=>{y.removeEventListener("scroll",R),H.disconnect()}},[i]),(0,ne.useLayoutEffect)(()=>{let y=v.current;!i||!y||P(y.scrollHeight-y.scrollTop-y.clientHeight>1)},[i,p]);let A={"--aia-grid-min":e};t&&(A["--aia-grid-max"]=t),a&&(A["--aia-grid-gap"]=a),o&&(A["--aia-grid-max-height"]=o);let C=(0,ze.jsx)("div",{ref:v,className:!i&&d?`aia-grid ${d}`:"aia-grid","data-scroll":l||void 0,style:A,...i?{}:x,children:p});return i?(0,ze.jsx)("div",{className:d?`aia-grid-fade ${d}`:"aia-grid-fade","data-fade":B?"":void 0,...x,children:C}):C}var ce=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-82820da7")){let e=document.createElement("style");e.id="ac-style-82820da7",e.textContent=`.SuggestionItem-module_item_d4vpD {
|
|
649
644
|
position: relative;
|
|
650
645
|
overflow: visible;
|
|
651
646
|
display: flex;
|
|
@@ -995,7 +990,7 @@
|
|
|
995
990
|
filter: brightness(0.55);
|
|
996
991
|
}
|
|
997
992
|
}
|
|
998
|
-
`,document.head.appendChild(e)}var
|
|
993
|
+
`,document.head.appendChild(e)}var G={item:"SuggestionItem-module_item_d4vpD",fadeIn:"SuggestionItem-module_fadeIn_I8u35",content:"SuggestionItem-module_content_T-Qba",tappable:"SuggestionItem-module_tappable_70KcX",nonTappable:"SuggestionItem-module_nonTappable_xSZM-",highlighted:"SuggestionItem-module_highlighted_Hb0SU",tag:"SuggestionItem-module_tag_e3Fwe",pressed:"SuggestionItem-module_pressed_98o-r",glassFade:"SuggestionItem-module_glassFade_oyiSj",tapDown:"SuggestionItem-module_tapDown_G3WGz",streaks:"SuggestionItem-module_streaks_d9PEB",streaksVert:"SuggestionItem-module_streaksVert_ERlV1",streakHorizRight:"SuggestionItem-module_streakHorizRight_aboGz",streakHorizLeft:"SuggestionItem-module_streakHorizLeft_BreWJ",streakVertUp:"SuggestionItem-module_streakVertUp_to1GD",streakVertDown:"SuggestionItem-module_streakVertDown_OrcLh",skeletonPulse:"SuggestionItem-module_skeletonPulse_plvdD",text:"SuggestionItem-module_text_yqoh9"};var ie=require("react/jsx-runtime");function $e({option:e,isHighlighted:t,onSelect:a,onHighlight:l,id:o,loading:i}){let[d,p]=(0,ce.useState)(!1),x=(0,ce.useRef)(void 0);(0,ce.useEffect)(()=>()=>clearTimeout(x.current),[]);let v=()=>{i||!e.is_tappable||d||(p(!0),a(e),clearTimeout(x.current),x.current=setTimeout(()=>p(!1),500))},B=[G.item,t&&!i?G.highlighted:"",e.is_tappable?G.tappable:G.nonTappable,d?G.pressed:""].filter(Boolean).join(" ");return(0,ie.jsxs)("div",{id:o,role:"option","data-aia-option":"","data-aia-loading":i?"":void 0,"aria-selected":t,className:B,tabIndex:i||!e.is_tappable?-1:0,onClick:v,onKeyDown:P=>{!i&&e.is_tappable&&(P.key==="Enter"||P.key===" ")&&(P.preventDefault(),v())},onMouseEnter:!i&&e.is_tappable?l:void 0,children:[(0,ie.jsx)("div",{className:G.streaks}),(0,ie.jsx)("div",{className:G.streaksVert}),(0,ie.jsxs)("span",{className:G.content,children:[(0,ie.jsx)("span",{className:G.text,children:e.icon?`${e.icon} ${e.text}`:e.text}),e.tag&&(0,ie.jsx)("span",{className:G.tag,children:e.tag})]})]})}var Fe=require("react/jsx-runtime");function Ue({options:e,activeIndex:t,onSelect:a,onHighlight:l,listboxId:o,loading:i}){return(0,Fe.jsx)(qe,{min:"250px",max:"250px",gap:"0",scroll:!0,fade:!0,children:e.map((d,p)=>(0,Fe.jsx)($e,{option:d,isHighlighted:p===t,onSelect:a,onHighlight:()=>l(p),id:`${o}-option-${p}`,loading:i},d.text))})}if(typeof document<"u"&&!document.getElementById("ac-style-8414cd5f")){let e=document.createElement("style");e.id="ac-style-8414cd5f",e.textContent=`@layer layout {
|
|
999
994
|
.aia-stack {
|
|
1000
995
|
display: flex;
|
|
1001
996
|
flex-direction: column;
|
|
@@ -1012,7 +1007,7 @@
|
|
|
1012
1007
|
}
|
|
1013
1008
|
/* data-align="stretch" is the flex default \u2014 no rule needed. */
|
|
1014
1009
|
}
|
|
1015
|
-
`,document.head.appendChild(e)}var Xe=require("react/jsx-runtime");function Qe({space:e,align:t="stretch",className:a,children:l,...o}){let
|
|
1010
|
+
`,document.head.appendChild(e)}var Xe=require("react/jsx-runtime");function Qe({space:e,align:t="stretch",className:a,children:l,...o}){let i=e?{"--aia-stack-space":e}:void 0;return(0,Xe.jsx)("div",{className:a?`aia-stack ${a}`:"aia-stack","data-align":t,style:i,...o,children:l})}var Q=require("react/jsx-runtime"),bt=[159,119,164];function xt(e){let t=()=>typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches,[a,l]=(0,ue.useState)(t);if((0,ue.useEffect)(()=>{if(e!=="auto"||typeof window>"u"||typeof window.matchMedia!="function")return;let o=window.matchMedia("(prefers-color-scheme: dark)"),i=()=>l(o.matches);return o.addEventListener("change",i),()=>o.removeEventListener("change",i)},[e]),e!==void 0)return e==="auto"?a?"dark":"light":e}function Ie({suggestions:e,activeIndex:t,onSelect:a,onHighlight:l,isOpen:o,id:i,className:d,pills:p,onPillClick:x,showPills:v=!0,activeSelected:B=!1,isLoading:P=!1,isInputEmpty:A=!1,optionsPosition:C="below",mode:y}){let R=xt(y),H=R!==void 0,X=e[0]?.options??[],s=!!(p&&p.length>0&&x),_=o&&(X.length>0||v&&s||P),O={suggestions:e,activeIndex:t,pills:p,showPills:v,activeSelected:B,isLoading:P,isInputEmpty:A},V=(0,ue.useRef)(O);_&&(V.current=O);let h=_?O:V.current,M=h.suggestions[0]?.options??[],L=h.activeIndex>=0&&!!M[h.activeIndex]?.is_tappable,q=!!(h.pills&&h.pills.length>0&&x),z=h.showPills&&q,ae=h.showPills&&!q&&h.isLoading,Z=z||ae,N=M.length>0,W=h.isLoading&&!N;return(0,Q.jsx)("div",{id:i,role:"listbox","data-aia-dropdown":"","data-options-position":C,"data-mode":R,"data-aia-loading":h.isLoading?"":void 0,className:`${H?"magicx-aia ":""}${pe.dropdown} ${_?pe.visible:""} ${d??""}`,onMouseDown:b=>b.preventDefault(),children:(0,Q.jsxs)(Qe,{space:"8px",children:[Z&&(0,Q.jsx)(fe,{noWrap:!0,className:pe.pillBar,"data-aia-pillbar":"",children:(0,Q.jsx)(ke,{pills:h.pills??[],activePillIndex:0,activeSelected:h.activeSelected,onSelectPill:x??(()=>{}),rounded:!0,loading:h.isLoading})}),N&&(0,Q.jsx)(Ue,{options:M,activeIndex:h.activeIndex,onSelect:a,onHighlight:l,listboxId:i,loading:h.isLoading}),W&&(0,Q.jsx)("div",{className:pe.skeletonBars,"data-aia-skeleton-bars":"",children:bt.map(b=>(0,Q.jsx)("span",{className:pe.skeletonBar,style:{width:b}},`bar-${b}`))}),(0,Q.jsx)(Ke,{isOptionHighlighted:L,isInputEmpty:h.isInputEmpty})]})})}var me=require("@magicx-eng/ai-autocomplete-vanilla");if(typeof document<"u"&&!document.getElementById("ac-style-fdee06e6")){let e=document.createElement("style");e.id="ac-style-fdee06e6",e.textContent=`.SubmitButton-module_submitButton_otz7H {
|
|
1016
1011
|
flex-shrink: 0;
|
|
1017
1012
|
width: 32px;
|
|
1018
1013
|
height: 32px;
|
|
@@ -1032,9 +1027,20 @@
|
|
|
1032
1027
|
opacity: 0.85;
|
|
1033
1028
|
}
|
|
1034
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. */
|
|
1035
1034
|
.SubmitButton-module_submitButton_otz7H:disabled {
|
|
1036
|
-
|
|
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
|
+
);
|
|
1037
1043
|
cursor: default;
|
|
1038
1044
|
}
|
|
1039
|
-
`,document.head.appendChild(e)}var Ze={submitButton:"SubmitButton-module_submitButton_otz7H"};var Se=require("react/jsx-runtime");function Je({disabled:e,onClick:t}){return(0,Se.jsx)("button",{type:"button","data-aia-submit":"",className:Ze.submitButton,disabled:e,onClick:a=>{a.stopPropagation(),t()},"aria-label":"Submit",children:(0,Se.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,Se.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var Ye=require("@magicx-eng/ai-autocomplete-vanilla"),k=require("react"),vt={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 Ae({onSubmit:e,onError:t,optionOverrides:a,maskCompletedText:l,apiConfig:o,columns:n=2,dropdownTrigger:d,optionsPosition:p,closeDropdownOnBlur:h,showNonTappableOptions:v,onFocus:B,onBlur:P,value:A,completedParams:C,onChange:w,onParamsChange:R,source:H,setCursor:Z}){let s=(0,k.useRef)(null),[y,O]=(0,k.useState)(null),q=(0,k.useRef)(e);q.current=e;let g=(0,k.useRef)(t);g.current=t;let te=(0,k.useRef)(w);te.current=w;let M=(0,k.useRef)(R);M.current=R;let L=(0,k.useRef)(B);L.current=B;let $=(0,k.useRef)(P);$.current=P;let z=(0,k.useRef)(Z);z.current=Z,(0,k.useEffect)(()=>{if(typeof document>"u")return;let r=new Ye.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:o,optionOverrides:a,maskCompletedText:l,columns:n,dropdownTrigger:d,optionsPosition:p,closeDropdownOnBlur:h,showNonTappableOptions:v,source:H,value:A,completedParams:C,onSubmit:(...E)=>q.current?.(...E),onError:(...E)=>g.current?.(...E),onChange:(...E)=>te.current?.(...E),onParamsChange:(...E)=>M.current?.(...E),onFocus:()=>L.current?.(),onBlur:()=>$.current?.(),setCursor:E=>z.current?.(E)});s.current=r,O(r.getState());let D=r.subscribe(E=>O(E));return()=>{D(),r.destroy(),s.current===r&&(s.current=null)}},[]),(0,k.useEffect)(()=>{A!==void 0&&s.current?.setValue(A)},[A]),(0,k.useEffect)(()=>{C!==void 0&&s.current?.setCompletedParams(C)},[C]);let ae=JSON.stringify(o??null),J=(0,k.useRef)(a),N=(0,k.useRef)(0);if(a!==J.current){let r=J.current,D=a,E=Object.keys(r??{}),de=Object.keys(D??{});(E.length!==de.length||de.some(ge=>!r?.[ge]||D[ge]!==r[ge]))&&N.current++,J.current=a}(0,k.useEffect)(()=>{s.current?.update({apiConfig:o,optionOverrides:a,dropdownTrigger:d,optionsPosition:p,closeDropdownOnBlur:h,showNonTappableOptions:v})},[ae,N.current,d,p,h,v]);let K=(0,k.useRef)(null);K.current===null&&(K.current={handleTextChange:r=>s.current?.handleTextChange(r),handleKeyDown:r=>{let D="nativeEvent"in r?r.nativeEvent:r;s.current?.handleKeyDown(D)},setFocused:r=>s.current?.setFocused(r),startEditingParam:r=>s.current?.startEditingParam(r),exitEditMode:()=>s.current?.exitEditMode(),handleCaretAfterInput:r=>s.current?.handleCaretAfterInput(r),handleCaretMove:r=>s.current?.handleCaretMove(r),replaceEditingRange:r=>s.current?.replaceEditingRange(r)??!1,setActivePill:r=>s.current?.setActivePill(r),removeLastParam:()=>s.current?.removeLastParam(),clearNewParamId:()=>s.current?.clearNewParamId(),reset:()=>s.current?.reset(),selectOption:r=>s.current?.selectOption(r),setActiveDropdownIndex:r=>s.current?.setActiveDropdownIndex(r),handleFocus:()=>s.current?.setFocused(!0),handleBlur:()=>s.current?.setFocused(!1)});let f=K.current,re=(0,k.useCallback)(r=>{let D=r.target.value,de=D.length>0&&!r.nativeEvent?.isComposing&&D[0]!==D[0].toUpperCase()?D[0].toUpperCase()+D.slice(1):D;s.current?.handleTextChange(de)},[]),se=(0,k.useCallback)(r=>{s.current?.handleKeyDown(r.nativeEvent)},[]),oe=s.current,c=y??vt,i=A!==void 0?A:c.text,u=C!==void 0?C:c.completedParams,b=c.actionableSuggestions,I=b[0],x=oe?.listboxId??"",T=c.activeDropdownIndex>=0&&oe?`${x}-option-${c.activeDropdownIndex}`:void 0,W=c.editingParam,Y=W?{type:W.suggestionType,text:W.suggestionPlaceholder,required:!0,options:W.options}:null,be=Y??I,Ce=Y?[Y]:b,xe=!oe||c.isLoading&&!c.editingParam&&!c.inSelectionAnimation;return{completedParams:u,suggestionPills:b,setActivePill:f.setActivePill,removeLastParam:f.removeLastParam,segments:c.segments,newParamId:c.newParamId,clearNewParamId:f.clearNewParamId,suggestions:c.suggestions,activeIndex:c.activeDropdownIndex,isReady:c.isReady,isLoading:xe,isFocused:c.isFocused,isDropdownOpen:c.isDropdownOpen,isActivePillSelected:c.isActivePillSelected,placeholderText:c.placeholderText,listboxId:x,error:c.error,handleTextChange:f.handleTextChange,handleKeyDown:f.handleKeyDown,setFocused:f.setFocused,editingParam:W,editingAnchor:c.editingAnchor,caretOffset:c.caretOffset,startEditingParam:f.startEditingParam,exitEditMode:f.exitEditMode,handleCaretAfterInput:f.handleCaretAfterInput,handleCaretMove:f.handleCaretMove,replaceEditingRange:f.replaceEditingRange,inputProps:{value:i,placeholder:c.placeholderText||void 0,onChange:re,onKeyDown:se,onFocus:f.handleFocus,onBlur:f.handleBlur,role:"combobox","aria-expanded":c.isDropdownOpen,"aria-activedescendant":T,"aria-autocomplete":"list","aria-controls":x},reset:f.reset,dropdownProps:{suggestions:be?[{...be,options:c.filteredOptions}]:[],activeIndex:c.activeDropdownIndex,onSelect:f.selectOption,onHighlight:f.setActiveDropdownIndex,isOpen:c.isDropdownOpen,id:x,pills:Ce,activeSelected:c.isActivePillSelected,onPillClick:f.setActivePill,isLoading:xe,isInputEmpty:i.trim().length===0,optionsPosition:p??"below"}}}var F=require("@magicx-eng/ai-autocomplete-vanilla"),m=require("react"),Pe;function wt(){if(Pe!==void 0)return Pe;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Pe=e.contentEditable==="plaintext-only",Pe}function et(e){let{segments:t,newParamId:a,editingParam:l,editingAnchor:o,caretOffset:n,placeholderText:d,isFocused:p,isDropdownOpen:h,listboxId:v,activeDescendantId:B,autoFocus:P,handleTextChange:A,handleKeyDown:C,handleCaretAfterInput:w,handleCaretMove:R,startEditingParam:H,replaceEditingRange:Z,setFocused:s}=e,y=(0,m.useRef)(null),O=(0,m.useRef)(!1),q=(0,m.useRef)(""),g=(0,m.useRef)(""),te=(0,m.useRef)(null),M=(0,m.useRef)(0);te.current=n,(0,m.useEffect)(()=>{if(!P)return;let i=y.current;i&&(document.activeElement===i?s(!0):i.focus())},[P,s]),(0,m.useEffect)(()=>{let i=y.current;if(!i)return;let u=i.ownerDocument??document,b=()=>{let I=u.getSelection();if(!I||I.rangeCount===0||!I.anchorNode||!i.contains(I.anchorNode))return;let x=I.anchorNode,Y=(x.nodeType===Node.ELEMENT_NODE?x:x.parentElement)?.closest('strong[data-seg="completed"][data-param-id]')?.dataset.paramId??null;if(Y&&Y!==l?.id){H(Y);return}performance.now()-M.current<50||R((0,F.getCursorOffset)(i))};return u.addEventListener("selectionchange",b),()=>u.removeEventListener("selectionchange",b)},[l,H,R]),(0,m.useLayoutEffect)(()=>{let i=y.current;i&&(0,F.renderEditableContent)({input:i,segments:t,newParamId:a,editingParamId:l?.id??null,placeholderText:d??"",isFocused:p})},[t,a,l,d,p]),(0,m.useLayoutEffect)(()=>{let i=q.current,u=a??"";if(q.current=u,!u||u===i)return;let b=y.current;if(!b)return;b.focus();let I=te.current??(0,F.plainTextLength)(b);(0,F.setCursorOffset)(b,I)},[a]),(0,m.useLayoutEffect)(()=>{let i=g.current,u=l?.id??"";if(g.current=u,!u||u===i||o==null)return;let b=y.current;b&&(0,F.setCursorOffset)(b,o)},[l,o]);let L=(0,m.useCallback)(()=>{if(O.current)return;let i=y.current;if(!i)return;let u=(0,F.extractPlainText)(i),I=u.length>0&&u[0]!==u[0].toUpperCase()?u[0].toUpperCase()+u.slice(1):u;A(I)},[A]),$=(0,m.useCallback)(()=>{M.current=performance.now(),L();let i=y.current;i&&w((0,F.getCursorOffset)(i))},[L,w]);(0,m.useEffect)(()=>{let i=y.current;if(!i)return;let u=b=>{let I=b,x=I.inputType;if(x==="insertParagraph"||x==="insertLineBreak"||x==="insertFromDrop"){b.preventDefault();return}if(x.startsWith("insert")||x.startsWith("delete")){let T=x.startsWith("delete")?"":I.data??"";Z(T)&&b.preventDefault()}};return i.addEventListener("beforeinput",u),()=>i.removeEventListener("beforeinput",u)},[Z]);let z=(0,m.useCallback)(()=>{O.current=!0},[]),ae=(0,m.useCallback)(()=>{O.current=!1,L()},[L]),J=(0,m.useCallback)(i=>{i.preventDefault();let u=y.current;if(!u)return;let b=(i.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!b)return;let I=u.ownerDocument??document,x=I.getSelection();if(!x||x.rangeCount===0)return;let T=x.getRangeAt(0);if(!u.contains(T.startContainer))return;T.deleteContents();let W=I.createTextNode(b);T.insertNode(W),T.setStartAfter(W),T.collapse(!0),x.removeAllRanges(),x.addRange(T),L()},[L]),N=(0,m.useCallback)(i=>C(i),[C]),K=(0,m.useCallback)(()=>s(!0),[s]),f=(0,m.useCallback)(()=>s(!1),[s]),re=(0,m.useCallback)(()=>y.current?.focus(),[]),se=(0,m.useCallback)(()=>y.current?.blur(),[]),oe=(0,m.useCallback)(()=>{let i=y.current;return i?(0,F.extractPlainText)(i):""},[]),c=wt()?"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":v,"aria-expanded":h,"aria-activedescendant":B,spellCheck:!0,enterKeyHint:"send",onInput:$,onKeyDown:N,onCompositionStart:z,onCompositionEnd:ae,onPaste:J,onFocus:K,onBlur:f},getPlainText:oe,focus:re,blur:se}}var V=require("react/jsx-runtime");function yt(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var tt=(0,S.forwardRef)(function({onSubmit:t,onError:a,optionOverrides:l,maskCompletedText:o,className:n,apiConfig:d,columns:p,pillPlacement:h="dropdown",mode:v="auto",optionsPosition:B="below",animations:P=!0,dropdownTrigger:A,closeDropdownOnBlur:C,showNonTappableOptions:w,autoFocus:R=!0,onFocus:H,onBlur:Z,value:s,completedParams:y,onChange:O,onParamsChange:q,submitButton:g},te){let M=(0,S.useRef)(null),L=(0,S.useRef)(null),$=(0,S.useRef)(()=>{}),z=(0,S.useRef)(null),ae=(0,S.useRef)(null);(0,S.useEffect)(()=>{let _=M.current;if(_)return z.current?z.current.setMode(v):z.current=new me.ModeController(_,v),()=>{z.current?.destroy(),z.current=null}},[v]);let J=(0,S.useCallback)(_=>{let U=ae.current?.current;U&&(U.focus(),(0,me.setCursorOffset)(U,_))},[]),{completedParams:N,suggestionPills:K,setActivePill:f,segments:re,newParamId:se,clearNewParamId:oe,placeholderText:c,isFocused:i,isDropdownOpen:u,isActivePillSelected:b,isLoading:I,activeIndex:x,listboxId:T,handleTextChange:W,handleKeyDown:Y,setFocused:be,editingParam:Ce,editingAnchor:xe,caretOffset:r,startEditingParam:D,handleCaretAfterInput:E,handleCaretMove:de,replaceEditingRange:ge,dropdownProps:at,reset:ve}=Ae({onSubmit:_=>$.current(_),onError:a,optionOverrides:l,maskCompletedText:o,apiConfig:d,columns:p,dropdownTrigger:A,optionsPosition:B,closeDropdownOnBlur:C,showNonTappableOptions:w,onFocus:H,onBlur:Z,value:s,completedParams:y,onChange:O,onParamsChange:q,source:"full-sdk",setCursor:J});(0,S.useEffect)(()=>{if(!se)return;let _=window.setTimeout(()=>oe(),650);return()=>window.clearTimeout(_)},[se,oe]);let ot=x>=0?`${T}-option-${x}`:void 0,{inputRef:Ee,editorProps:nt,focus:we,blur:Oe,getPlainText:Me}=et({segments:re,newParamId:se,editingParam:Ce,editingAnchor:xe,caretOffset:r,placeholderText:c,isFocused:i,isDropdownOpen:u,listboxId:T,activeDescendantId:ot,autoFocus:R,handleTextChange:W,handleKeyDown:Y,handleCaretAfterInput:E,handleCaretMove:de,startEditingParam:D,replaceEditingRange:ge,setFocused:be});ae.current=Ee,(0,S.useLayoutEffect)(()=>{let _=L.current,U=Ee.current;if(!_||!U)return;let _e=()=>{let Ne=_.firstElementChild;if(!Ne)return;let lt=Ne.getBoundingClientRect(),dt=U.getBoundingClientRect();lt.top>=dt.bottom-2?_.setAttribute("data-aia-pill-wrapped",""):_.removeAttribute("data-aia-pill-wrapped")};_e();let He=new ResizeObserver(_e);return He.observe(U),()=>He.disconnect()},[re,K.length,I,Ee]),(0,S.useImperativeHandle)(te,()=>({focus:we,blur:Oe,reset:ve,setMode:_=>z.current?.setMode(_)}),[we,Oe,ve]);let ye=!!re.length||N.length>0,De=(0,S.useCallback)(()=>{if(!ye)return;let _=Me(),{rawQuery:U,completedParams:_e}=(0,me.buildQuery)(_,N);t({query:_.trim(),raw_query:U,completed_params:_e}),ve()},[ye,N,t,ve,Me]);$.current=De;let it=(0,S.useCallback)(_=>{_.target?.closest("[data-aia-pill]")||we()},[we]),rt=h==="inline",st=h==="dropdown";return(0,V.jsxs)("div",{ref:M,className:`magicx-aia ${le.container} ${n??""}`,"data-pill-placement":h,"data-options-position":B,"data-animations":P?"on":"off","data-mode":yt(v),children:[(0,V.jsx)(Ie,{...at,showPills:st}),(0,V.jsxs)("div",{className:le.inputWrapper,onClick:it,children:[(0,V.jsxs)("div",{className:le.editorArea,"data-aia-editor":"",children:[(0,V.jsx)("div",{...nt,className:le.input,"data-aia-input":""}),rt&&(I||K.length>0)&&(0,V.jsx)("span",{ref:L,className:le.pillListContainer,"data-aia-pill-list-container":"",children:(0,V.jsx)(ke,{pills:K,activePillIndex:0,activeSelected:b,onSelectPill:f,loading:I})})]}),g===null?null:g===void 0?(0,V.jsx)(Je,{disabled:!ye,onClick:De}):(0,V.jsx)("span",{"data-aia-submit":"",className:le.submitSlot,onClick:_=>{ye&&(_.stopPropagation(),De())},children:g})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,useAIAutocomplete});
|
|
1045
|
+
`,document.head.appendChild(e)}var Ze={submitButton:"SubmitButton-module_submitButton_otz7H"};var Se=require("react/jsx-runtime");function Je({disabled:e,onClick:t}){return(0,Se.jsx)("button",{type:"button","data-aia-submit":"",className:Ze.submitButton,disabled:e,onClick:a=>{a.stopPropagation(),t()},"aria-label":"Submit",children:(0,Se.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,Se.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var Ye=require("@magicx-eng/ai-autocomplete-vanilla"),I=require("react"),vt={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 Ae({onSubmit:e,onError:t,optionOverrides:a,maskCompletedText:l,apiConfig:o,columns:i=2,dropdownTrigger:d,optionsPosition:p,closeDropdownOnBlur:x,showNonTappableOptions:v,onFocus:B,onBlur:P,value:A,completedParams:C,onChange:y,onParamsChange:R,source:H,setCursor:X}){let s=(0,I.useRef)(null),[_,O]=(0,I.useState)(null),V=(0,I.useRef)(e);V.current=e;let h=(0,I.useRef)(t);h.current=t;let te=(0,I.useRef)(y);te.current=y;let M=(0,I.useRef)(R);M.current=R;let L=(0,I.useRef)(B);L.current=B;let q=(0,I.useRef)(P);q.current=P;let z=(0,I.useRef)(X);z.current=X,(0,I.useEffect)(()=>{if(typeof document>"u")return;let r=new Ye.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:o,optionOverrides:a,maskCompletedText:l,columns:i,dropdownTrigger:d,optionsPosition:p,closeDropdownOnBlur:x,showNonTappableOptions:v,source:H,value:A,completedParams:C,onSubmit:(...E)=>V.current?.(...E),onError:(...E)=>h.current?.(...E),onChange:(...E)=>te.current?.(...E),onParamsChange:(...E)=>M.current?.(...E),onFocus:()=>L.current?.(),onBlur:()=>q.current?.(),setCursor:E=>z.current?.(E)});s.current=r,O(r.getState());let D=r.subscribe(E=>O(E));return()=>{D(),r.destroy(),s.current===r&&(s.current=null)}},[]),(0,I.useEffect)(()=>{A!==void 0&&s.current?.setValue(A)},[A]),(0,I.useEffect)(()=>{C!==void 0&&s.current?.setCompletedParams(C)},[C]);let ae=JSON.stringify(o??null),Z=(0,I.useRef)(a),N=(0,I.useRef)(0);if(a!==Z.current){let r=Z.current,D=a,E=Object.keys(r??{}),de=Object.keys(D??{});(E.length!==de.length||de.some(ge=>!r?.[ge]||D[ge]!==r[ge]))&&N.current++,Z.current=a}(0,I.useEffect)(()=>{s.current?.update({apiConfig:o,optionOverrides:a,dropdownTrigger:d,optionsPosition:p,closeDropdownOnBlur:x,showNonTappableOptions:v})},[ae,N.current,d,p,x,v]);let W=(0,I.useRef)(null);W.current===null&&(W.current={handleTextChange:r=>s.current?.handleTextChange(r),handleKeyDown:r=>{let D="nativeEvent"in r?r.nativeEvent:r;s.current?.handleKeyDown(D)},setFocused:r=>s.current?.setFocused(r),startEditingParam:r=>s.current?.startEditingParam(r),exitEditMode:()=>s.current?.exitEditMode(),handleCaretAfterInput:r=>s.current?.handleCaretAfterInput(r),handleCaretMove:r=>s.current?.handleCaretMove(r),replaceEditingRange:r=>s.current?.replaceEditingRange(r)??!1,setActivePill:r=>s.current?.setActivePill(r),removeLastParam:()=>s.current?.removeLastParam(),clearNewParamId:()=>s.current?.clearNewParamId(),reset:()=>s.current?.reset(),selectOption:r=>s.current?.selectOption(r),setActiveDropdownIndex:r=>s.current?.setActiveDropdownIndex(r),handleFocus:()=>s.current?.setFocused(!0),handleBlur:()=>s.current?.setFocused(!1)});let b=W.current,re=(0,I.useCallback)(r=>{let D=r.target.value,de=D.length>0&&!r.nativeEvent?.isComposing&&D[0]!==D[0].toUpperCase()?D[0].toUpperCase()+D.slice(1):D;s.current?.handleTextChange(de)},[]),se=(0,I.useCallback)(r=>{s.current?.handleKeyDown(r.nativeEvent)},[]),oe=s.current,u=_??vt,n=A!==void 0?A:u.text,c=C!==void 0?C:u.completedParams,m=u.actionableSuggestions,w=m[0],g=oe?.listboxId??"",T=u.activeDropdownIndex>=0&&oe?`${g}-option-${u.activeDropdownIndex}`:void 0,K=u.editingParam,J=K?{type:K.suggestionType,text:K.suggestionPlaceholder,required:!0,options:K.options}:null,be=J??w,Ce=J?[J]:m,xe=!oe||u.isLoading&&!u.editingParam&&!u.inSelectionAnimation;return{completedParams:c,suggestionPills:m,setActivePill:b.setActivePill,removeLastParam:b.removeLastParam,segments:u.segments,newParamId:u.newParamId,clearNewParamId:b.clearNewParamId,suggestions:u.suggestions,activeIndex:u.activeDropdownIndex,isReady:u.isReady,isLoading:xe,isFocused:u.isFocused,isDropdownOpen:u.isDropdownOpen,isActivePillSelected:u.isActivePillSelected,placeholderText:u.placeholderText,listboxId:g,error:u.error,handleTextChange:b.handleTextChange,handleKeyDown:b.handleKeyDown,setFocused:b.setFocused,editingParam:K,editingAnchor:u.editingAnchor,caretOffset:u.caretOffset,startEditingParam:b.startEditingParam,exitEditMode:b.exitEditMode,handleCaretAfterInput:b.handleCaretAfterInput,handleCaretMove:b.handleCaretMove,replaceEditingRange:b.replaceEditingRange,inputProps:{value:n,placeholder:u.placeholderText||void 0,onChange:re,onKeyDown:se,onFocus:b.handleFocus,onBlur:b.handleBlur,role:"combobox","aria-expanded":u.isDropdownOpen,"aria-activedescendant":T,"aria-autocomplete":"list","aria-controls":g},reset:b.reset,dropdownProps:{suggestions:be?[{...be,options:u.filteredOptions}]:[],activeIndex:u.activeDropdownIndex,onSelect:b.selectOption,onHighlight:b.setActiveDropdownIndex,isOpen:u.isDropdownOpen,id:g,pills:Ce,activeSelected:u.isActivePillSelected,onPillClick:b.setActivePill,isLoading:xe,isInputEmpty:n.trim().length===0,optionsPosition:p??"below"}}}var F=require("@magicx-eng/ai-autocomplete-vanilla"),f=require("react"),Pe;function wt(){if(Pe!==void 0)return Pe;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Pe=e.contentEditable==="plaintext-only",Pe}function et(e){let{segments:t,newParamId:a,editingParam:l,editingAnchor:o,caretOffset:i,placeholderText:d,isFocused:p,isDropdownOpen:x,listboxId:v,activeDescendantId:B,autoFocus:P,handleTextChange:A,handleKeyDown:C,handleCaretAfterInput:y,handleCaretMove:R,startEditingParam:H,replaceEditingRange:X,setFocused:s}=e,_=(0,f.useRef)(null),O=(0,f.useRef)(!1),V=(0,f.useRef)(""),h=(0,f.useRef)(""),te=(0,f.useRef)(null),M=(0,f.useRef)(0);te.current=i,(0,f.useEffect)(()=>{if(!P)return;let n=_.current;if(!n)return;document.activeElement===n?s(!0):n.focus();let c=n.ownerDocument??document,m=c.getSelection(),w=m&&m.rangeCount>0&&n.contains(m.anchorNode);if(m&&!w){let g=c.createRange();g.selectNodeContents(n),g.collapse(!0),m.removeAllRanges(),m.addRange(g)}},[P,s]),(0,f.useEffect)(()=>{let n=_.current;if(!n)return;let c=n.ownerDocument??document,m=()=>{let w=c.getSelection();if(!w||w.rangeCount===0||!w.anchorNode||!n.contains(w.anchorNode))return;let g=w.anchorNode,J=(g.nodeType===Node.ELEMENT_NODE?g:g.parentElement)?.closest('strong[data-seg="completed"][data-param-id]')?.dataset.paramId??null;if(J&&J!==l?.id){H(J);return}performance.now()-M.current<50||R((0,F.getCursorOffset)(n))};return c.addEventListener("selectionchange",m),()=>c.removeEventListener("selectionchange",m)},[l,H,R]),(0,f.useLayoutEffect)(()=>{let n=_.current;n&&(0,F.renderEditableContent)({input:n,segments:t,newParamId:a,editingParamId:l?.id??null,placeholderText:d??"",isFocused:p})},[t,a,l,d,p]),(0,f.useLayoutEffect)(()=>{let n=V.current,c=a??"";if(V.current=c,!c||c===n)return;let m=_.current;if(!m)return;m.focus();let w=te.current??(0,F.plainTextLength)(m);(0,F.setCursorOffset)(m,w)},[a]),(0,f.useLayoutEffect)(()=>{let n=h.current,c=l?.id??"";if(h.current=c,!c||c===n||o==null)return;let m=_.current;m&&(0,F.setCursorOffset)(m,o)},[l,o]);let L=(0,f.useCallback)(()=>{if(O.current)return;let n=_.current;if(!n)return;let c=(0,F.extractPlainText)(n),w=c.length>0&&c[0]!==c[0].toUpperCase()?c[0].toUpperCase()+c.slice(1):c;A(w)},[A]),q=(0,f.useCallback)(()=>{M.current=performance.now(),L();let n=_.current;n&&y((0,F.getCursorOffset)(n))},[L,y]);(0,f.useEffect)(()=>{let n=_.current;if(!n)return;let c=m=>{let w=m,g=w.inputType;if(g==="insertParagraph"||g==="insertLineBreak"||g==="insertFromDrop"){m.preventDefault();return}if(g.startsWith("insert")||g.startsWith("delete")){let T=g.startsWith("delete")?"":w.data??"";X(T)&&m.preventDefault()}};return n.addEventListener("beforeinput",c),()=>n.removeEventListener("beforeinput",c)},[X]);let z=(0,f.useCallback)(()=>{O.current=!0},[]),ae=(0,f.useCallback)(()=>{O.current=!1,L()},[L]),Z=(0,f.useCallback)(n=>{n.preventDefault();let c=_.current;if(!c)return;let m=(n.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!m)return;let w=c.ownerDocument??document,g=w.getSelection();if(!g||g.rangeCount===0)return;let T=g.getRangeAt(0);if(!c.contains(T.startContainer))return;T.deleteContents();let K=w.createTextNode(m);T.insertNode(K),T.setStartAfter(K),T.collapse(!0),g.removeAllRanges(),g.addRange(T),L()},[L]),N=(0,f.useCallback)(n=>C(n),[C]),W=(0,f.useCallback)(()=>s(!0),[s]),b=(0,f.useCallback)(()=>s(!1),[s]),re=(0,f.useCallback)(()=>_.current?.focus(),[]),se=(0,f.useCallback)(()=>_.current?.blur(),[]),oe=(0,f.useCallback)(()=>{let n=_.current;return n?(0,F.extractPlainText)(n):""},[]),u=wt()?"plaintext-only":"true";return{inputRef:_,editorProps:{ref:_,contentEditable:u,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":v,"aria-expanded":x,"aria-activedescendant":B,spellCheck:!0,enterKeyHint:"send",onInput:q,onKeyDown:N,onCompositionStart:z,onCompositionEnd:ae,onPaste:Z,onFocus:W,onBlur:b},getPlainText:oe,focus:re,blur:se}}var j=require("react/jsx-runtime");function yt(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var tt=(0,S.forwardRef)(function({onSubmit:t,onError:a,optionOverrides:l,maskCompletedText:o,className:i,apiConfig:d,columns:p,pillPlacement:x="dropdown",mode:v="auto",optionsPosition:B="below",animations:P=!0,dropdownTrigger:A,closeDropdownOnBlur:C,showNonTappableOptions:y,autoFocus:R=!0,onFocus:H,onBlur:X,value:s,completedParams:_,onChange:O,onParamsChange:V,submitButton:h},te){let M=(0,S.useRef)(null),L=(0,S.useRef)(null),q=(0,S.useRef)(()=>{}),z=(0,S.useRef)(null),ae=(0,S.useRef)(null);(0,S.useEffect)(()=>{let k=M.current;if(k)return z.current?z.current.setMode(v):z.current=new me.ModeController(k,v),()=>{z.current?.destroy(),z.current=null}},[v]);let Z=(0,S.useCallback)(k=>{let $=ae.current?.current;$&&($.focus(),(0,me.setCursorOffset)($,k))},[]),{completedParams:N,suggestionPills:W,setActivePill:b,segments:re,newParamId:se,clearNewParamId:oe,placeholderText:u,isFocused:n,isDropdownOpen:c,isActivePillSelected:m,isLoading:w,activeIndex:g,listboxId:T,handleTextChange:K,handleKeyDown:J,setFocused:be,editingParam:Ce,editingAnchor:xe,caretOffset:r,startEditingParam:D,handleCaretAfterInput:E,handleCaretMove:de,replaceEditingRange:ge,dropdownProps:at,reset:ve}=Ae({onSubmit:k=>q.current(k),onError:a,optionOverrides:l,maskCompletedText:o,apiConfig:d,columns:p,dropdownTrigger:A,optionsPosition:B,closeDropdownOnBlur:C,showNonTappableOptions:y,onFocus:H,onBlur:X,value:s,completedParams:_,onChange:O,onParamsChange:V,source:"full-sdk",setCursor:Z});(0,S.useEffect)(()=>{if(!se)return;let k=window.setTimeout(()=>oe(),650);return()=>window.clearTimeout(k)},[se,oe]);let ot=g>=0?`${T}-option-${g}`:void 0,{inputRef:Ee,editorProps:nt,focus:we,blur:Oe,getPlainText:Me}=et({segments:re,newParamId:se,editingParam:Ce,editingAnchor:xe,caretOffset:r,placeholderText:u,isFocused:n,isDropdownOpen:c,listboxId:T,activeDescendantId:ot,autoFocus:R,handleTextChange:K,handleKeyDown:J,handleCaretAfterInput:E,handleCaretMove:de,startEditingParam:D,replaceEditingRange:ge,setFocused:be});ae.current=Ee,(0,S.useLayoutEffect)(()=>{let k=L.current,$=Ee.current;if(!k||!$)return;let _e=()=>{let Ne=k.firstElementChild;if(!Ne)return;let lt=Ne.getBoundingClientRect(),dt=$.getBoundingClientRect();lt.top>=dt.bottom-2?k.setAttribute("data-aia-pill-wrapped",""):k.removeAttribute("data-aia-pill-wrapped")};_e();let He=new ResizeObserver(_e);return He.observe($),()=>He.disconnect()},[re,W.length,w,Ee]),(0,S.useImperativeHandle)(te,()=>({focus:we,blur:Oe,reset:ve,setMode:k=>z.current?.setMode(k)}),[we,Oe,ve]);let ye=!!re.length||N.length>0,De=(0,S.useCallback)(()=>{if(!ye)return;let k=Me(),{rawQuery:$,completedParams:_e}=(0,me.buildQuery)(k,N);t({query:k.trim(),raw_query:$,completed_params:_e}),ve()},[ye,N,t,ve,Me]);q.current=De;let it=(0,S.useCallback)(k=>{k.target?.closest("[data-aia-pill]")||we()},[we]),rt=x==="inline",st=x==="dropdown";return(0,j.jsxs)("div",{ref:M,className:`magicx-aia ${le.container} ${i??""}`,"data-pill-placement":x,"data-options-position":B,"data-animations":P?"on":"off","data-mode":yt(v),children:[(0,j.jsx)(Ie,{...at,showPills:st}),(0,j.jsxs)("div",{className:le.inputWrapper,onClick:it,children:[(0,j.jsxs)("div",{className:le.editorArea,"data-aia-editor":"",children:[(0,j.jsx)("div",{...nt,className:le.input,"data-aia-input":""}),rt&&(w||W.length>0)&&(0,j.jsx)("span",{ref:L,className:le.pillListContainer,"data-aia-pill-list-container":"",children:(0,j.jsx)(ke,{pills:W,activePillIndex:0,activeSelected:m,onSelectPill:b,loading:w})})]}),h===null?null:h===void 0?(0,j.jsx)(Je,{disabled:!ye,onClick:De}):(0,j.jsx)("span",{"data-aia-submit":"",className:le.submitSlot,onClick:k=>{ye&&(k.stopPropagation(),De())},children:h})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,useAIAutocomplete});
|
|
1040
1046
|
//# sourceMappingURL=index.js.map
|