@magicx-eng/ai-autocomplete-react 0.9.1 → 0.10.1
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 +4 -0
- package/dist/index.d.mts +55 -2
- package/dist/index.d.ts +55 -2
- package/dist/index.js +84 -21
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +84 -21
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{buildSubmitResult as
|
|
1
|
+
import{buildSubmitResult as Go,withSkippedParams as Ko}from"@magicx-eng/ai-autocomplete-vanilla";import{forwardRef as oa,useCallback as Ge,useEffect as gt,useImperativeHandle as ia,useLayoutEffect as ra,useRef as be}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
|
|
@@ -179,7 +179,7 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
179
179
|
opacity: 0;
|
|
180
180
|
}
|
|
181
181
|
}
|
|
182
|
-
`,document.head.appendChild(e)}var
|
|
182
|
+
`,document.head.appendChild(e)}var le={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 Vt,useRef as qt,useState as $t}from"react";if(typeof document<"u"&&!document.getElementById("ac-style-0ae03977")){let e=document.createElement("style");e.id="ac-style-0ae03977",e.textContent=`/*
|
|
183
183
|
* Built-in appearance defaults \u2014 zero specificity via :where().
|
|
184
184
|
* Consumer CSS always wins without !important.
|
|
185
185
|
*
|
|
@@ -380,13 +380,16 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
380
380
|
text's left edge.
|
|
381
381
|
|
|
382
382
|
Selector shape differs from the vanilla/Angular copies (which target the
|
|
383
|
-
\`.aia-pill-list\` / \`.aia-pill\` class names):
|
|
384
|
-
hash-scoped
|
|
385
|
-
|
|
386
|
-
pill-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
383
|
+
\`.aia-pill-list\` / \`.aia-pill\` class names): the module classes here are
|
|
384
|
+
hash-scoped locals, unreachable from this global stylesheet. The bar's
|
|
385
|
+
direct \`> span\` child is the masked scroll wrapper (\`.pillScroll\`, tagged
|
|
386
|
+
\`data-aia-pill-scroll\`) that holds PillList, so the 10px indent lands on
|
|
387
|
+
the wrapper and the module zeroes PillList's own base padding underneath
|
|
388
|
+
(\`.pillScroll > span\` in AIAutocompleteDropdown.module.css \u2014 remove one
|
|
389
|
+
only with the other). Pills are matched via \`[data-aia-pill]\` (unique to
|
|
390
|
+
ParamPill). Like the sibling structural \`[data-aia-dropdown]\` rules below,
|
|
391
|
+
this is deliberately NOT \`:where()\`-wrapped \u2014 it must win over ParamPill's
|
|
392
|
+
own \`.pill\` base rule. */
|
|
390
393
|
[data-aia-dropdown] [data-aia-pillbar] > span {
|
|
391
394
|
padding-inline: 10px;
|
|
392
395
|
}
|
|
@@ -555,8 +558,23 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
555
558
|
}
|
|
556
559
|
|
|
557
560
|
/* The dropdown container owns the 10px/8px edge padding and the 8px section
|
|
558
|
-
gaps (matching Figma); the pill row adds none
|
|
561
|
+
gaps (matching Figma); the pill row adds none. The horizontal scroll + fade
|
|
562
|
+
live on the inner .pillScroll wrapper, NOT the bar itself: the trailing skip
|
|
563
|
+
button is the bar's other child, and a mask on the bar would fade it out
|
|
564
|
+
along with the overflowing pills it's meant to sit beside. */
|
|
559
565
|
.AIAutocompleteDropdown-module_pillBar_pwTXe {
|
|
566
|
+
overflow: hidden;
|
|
567
|
+
}
|
|
568
|
+
|
|
569
|
+
/* Scrollable region for the pills. The appearance layer's
|
|
570
|
+
\`[data-aia-pillbar] > span\` rule lands here (10px inline padding aligning
|
|
571
|
+
the param label with the option text), so the inner PillList span must not
|
|
572
|
+
add its own base padding on top \u2014 see the child rule below. */
|
|
573
|
+
.AIAutocompleteDropdown-module_pillScroll_Tpzus {
|
|
574
|
+
display: inline-flex;
|
|
575
|
+
align-items: center;
|
|
576
|
+
flex: 1 1 auto;
|
|
577
|
+
min-width: 0;
|
|
560
578
|
overflow-x: auto;
|
|
561
579
|
overflow-y: hidden;
|
|
562
580
|
scrollbar-width: none;
|
|
@@ -564,10 +582,55 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
564
582
|
-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 48px), transparent 100%);
|
|
565
583
|
}
|
|
566
584
|
|
|
567
|
-
.AIAutocompleteDropdown-
|
|
585
|
+
.AIAutocompleteDropdown-module_pillScroll_Tpzus > span {
|
|
586
|
+
padding-inline: 0;
|
|
587
|
+
}
|
|
588
|
+
|
|
589
|
+
.AIAutocompleteDropdown-module_pillScroll_Tpzus::-webkit-scrollbar {
|
|
568
590
|
display: none;
|
|
569
591
|
}
|
|
570
592
|
|
|
593
|
+
/* Trailing "skip" button \u2014 dismisses the active pill, same action as pressing
|
|
594
|
+
\u2192 at the end of the input. Pinned at the bar's far edge (auto inline-start
|
|
595
|
+
margin), outside the masked scroller. Typography follows the footer hint
|
|
596
|
+
(quiet chrome), not the pills. Declarations mirror \`.magicx-aia-skip\` in the
|
|
597
|
+
vanilla stylesheet \u2014 change both in the same commit. */
|
|
598
|
+
.AIAutocompleteDropdown-module_skip_7-olS {
|
|
599
|
+
display: inline-flex;
|
|
600
|
+
align-items: center;
|
|
601
|
+
margin-inline-start: auto;
|
|
602
|
+
flex-shrink: 0;
|
|
603
|
+
padding: 5px 8px;
|
|
604
|
+
border: none;
|
|
605
|
+
/* Matches the completed-param chip radius, so the hover fill reads as a
|
|
606
|
+
soft rectangle rather than a capsule. */
|
|
607
|
+
border-radius: 6px;
|
|
608
|
+
background: transparent;
|
|
609
|
+
font-family: inherit;
|
|
610
|
+
font-size: var(--aia-skip-font-size, 10px);
|
|
611
|
+
line-height: 18px;
|
|
612
|
+
color: var(--aia-skip-color, var(--aia-footer-hint-color, #505050));
|
|
613
|
+
cursor: pointer;
|
|
614
|
+
white-space: nowrap;
|
|
615
|
+
transition:
|
|
616
|
+
color 150ms ease-out,
|
|
617
|
+
background-color 150ms ease-out;
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
.AIAutocompleteDropdown-module_skip_7-olS:hover {
|
|
621
|
+
color: var(--aia-skip-color-hover, var(--aia-pill-color, var(--aia-color-text-muted, #c1c4cb)));
|
|
622
|
+
/* Same fill as a highlighted option row (--aia-option-bg), so the hover
|
|
623
|
+
reads with the dropdown's own hover language and stays visible on both
|
|
624
|
+
mode surfaces. */
|
|
625
|
+
background: var(--aia-skip-hover-bg, var(--aia-option-bg, transparent));
|
|
626
|
+
}
|
|
627
|
+
|
|
628
|
+
.AIAutocompleteDropdown-module_skip_7-olS:disabled {
|
|
629
|
+
pointer-events: none;
|
|
630
|
+
cursor: default;
|
|
631
|
+
opacity: 0.5;
|
|
632
|
+
}
|
|
633
|
+
|
|
571
634
|
/* --- Fallback loading skeleton (only when no pills/options are cached) --- */
|
|
572
635
|
.AIAutocompleteDropdown-module_skeletonBars_HVr9C {
|
|
573
636
|
display: flex;
|
|
@@ -602,7 +665,7 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
602
665
|
opacity: 0.25;
|
|
603
666
|
}
|
|
604
667
|
}
|
|
605
|
-
`,document.head.appendChild(e)}var
|
|
668
|
+
`,document.head.appendChild(e)}var ae={dropdown:"AIAutocompleteDropdown-module_dropdown_yz2KC",visible:"AIAutocompleteDropdown-module_visible_QCoXj",pillBar:"AIAutocompleteDropdown-module_pillBar_pwTXe",pillScroll:"AIAutocompleteDropdown-module_pillScroll_Tpzus",skip:"AIAutocompleteDropdown-module_skip_7-olS",skeletonBars:"AIAutocompleteDropdown-module_skeletonBars_HVr9C",skeletonBar:"AIAutocompleteDropdown-module_skeletonBar_O3xIx",aiaSkeletonPulse:"AIAutocompleteDropdown-module_aiaSkeletonPulse_G8W7q"};import{ATTRIBUTION_URL as _t,buildAttributionUrl as Pt,getFooterHint as It}from"@magicx-eng/ai-autocomplete-vanilla";import{useEffect as St,useState as At}from"react";if(typeof document<"u"&&!document.getElementById("ac-style-5259a217")){let e=document.createElement("style");e.id="ac-style-5259a217",e.textContent=`@layer layout {
|
|
606
669
|
.aia-cluster {
|
|
607
670
|
display: flex;
|
|
608
671
|
flex-wrap: wrap;
|
|
@@ -644,7 +707,7 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
644
707
|
justify-content: space-around;
|
|
645
708
|
}
|
|
646
709
|
}
|
|
647
|
-
`,document.head.appendChild(e)}import{jsx as
|
|
710
|
+
`,document.head.appendChild(e)}import{jsx as je}from"react/jsx-runtime";function he({gap:e,align:s="center",justify:a="start",noWrap:n=!1,inline:d=!1,className:l,children:o,...m}){let f=e?{"--aia-cluster-gap":e}:void 0,v={className:l?`aia-cluster ${l}`:"aia-cluster","data-align":s,"data-justify":a,"data-nowrap":n||void 0,"data-inline":d||void 0,style:f,...m};return d?je("span",{...v,children:o}):je("div",{...v,children:o})}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
|
|
648
711
|
dropdown's rounded edges. The top inset (--aia-footer-gap) adds breathing
|
|
649
712
|
room above the hint/branding row so the footer doesn't butt against the last
|
|
650
713
|
option row \u2014 additive to the dropdown's 8px section gap. */
|
|
@@ -774,7 +837,7 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
774
837
|
justify-content: flex-end;
|
|
775
838
|
}
|
|
776
839
|
}
|
|
777
|
-
`,document.head.appendChild(e)}var
|
|
840
|
+
`,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 ge,jsxs as Te}from"react/jsx-runtime";function Qe({isOptionHighlighted:e=!1,isInputEmpty:s=!1}){let{key:a,hint:n}=It(e,s),[d,l]=At(_t);return St(()=>{l(Pt())},[]),ge("footer",{className:Q.footer,"data-aia-footer":"",children:Te(he,{justify:"between",noWrap:!0,className:Q.row,children:[Te(he,{gap:"5px",className:Q.hintGroup,children:[ge("kbd",{className:Q.key,children:a}),ge("span",{className:Q.hint,children:n})]}),Te("a",{className:Q.brandLink,href:d,target:"_blank",rel:"noopener noreferrer",children:[ge("span",{className:Q.brand,children:"AI"}),ge("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,
|
|
778
841
|
no outline. ~28px via 6px padding + 14px text + the 1px border (border-box).
|
|
779
842
|
The border is kept as a 1px transparent line so the box stays the same size
|
|
780
843
|
as it was when the outline was dashed. */
|
|
@@ -831,7 +894,7 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
831
894
|
opacity: 0;
|
|
832
895
|
}
|
|
833
896
|
}
|
|
834
|
-
`,document.head.appendChild(e)}var
|
|
897
|
+
`,document.head.appendChild(e)}var oe={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 Ct}from"react/jsx-runtime";var Le={selected:1,first:.7,next:.4,last:.2};function Je({label:e,state:s,rounded:a,loading:n,onClick:d}){let l=[oe.pill,a?oe.rounded:"",n?oe.skeleton:""].filter(Boolean).join(" ");return Ct("button",{type:"button","data-aia-pill":"","data-aia-loading":n?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:l,style:{opacity:Le[s]},onMouseDown:o=>o.preventDefault(),onClick:n?void 0:d,disabled:n,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 {
|
|
835
898
|
position: relative;
|
|
836
899
|
z-index: 1;
|
|
837
900
|
pointer-events: auto;
|
|
@@ -841,7 +904,7 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
841
904
|
align-items: center;
|
|
842
905
|
vertical-align: middle;
|
|
843
906
|
}
|
|
844
|
-
`,document.head.appendChild(e)}var
|
|
907
|
+
`,document.head.appendChild(e)}var ze={list:"PillList-module_list_qvLqO"};import{jsx as Pe}from"react/jsx-runtime";var Et=[125,69];function Xe(e){return e===0?"first":e===1?"next":"last"}function Ie({pills:e,activePillIndex:s,onSelectPill:a,activeSelected:n,rounded:d,loading:l}){return l&&e.length===0?Pe("span",{className:ze.list,"data-aia-pill-list-loading":"",children:Et.map((o,m)=>Pe("span",{"data-aia-pill-skeleton":"",className:`${oe.pill} ${d?oe.rounded:""} ${oe.skeleton}`,style:{width:o,opacity:Le[Xe(m)]}},`skel-${o}`))}):Pe("span",{className:ze.list,"data-aia-pill-list-loading":l?"":void 0,children:e.map((o,m)=>{let f=!!n&&m===s;return Pe(Je,{label:o.text,state:f?"selected":Xe(m),selected:f,rounded:d,loading:l,onClick:()=>a(m)},`${o.type}-${o.text}`)})})}if(typeof document<"u"&&!document.getElementById("ac-style-fef1688d")){let e=document.createElement("style");e.id="ac-style-fef1688d",e.textContent=`/* Product strip \u2014 the React counterpart of the vanilla core's strip rules
|
|
845
908
|
(packages/vanilla/src/styles.css). Same tokens, same defaults, so a consumer
|
|
846
909
|
theming one package sees the same result in the other.
|
|
847
910
|
|
|
@@ -1008,7 +1071,7 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
1008
1071
|
var(--aia-option-color-selected, var(--aia-color-text-default, #fff))
|
|
1009
1072
|
);
|
|
1010
1073
|
}
|
|
1011
|
-
`,document.head.appendChild(e)}var M={section:"ProductStrip-module_section_Hugfg",label:"ProductStrip-module_label_nuc93",row:"ProductStrip-module_row_WDVBX",card:"ProductStrip-module_card_JBGYT",media:"ProductStrip-module_media_RrbGe",image:"ProductStrip-module_image_5pNL7",body:"ProductStrip-module_body_ly032",vendor:"ProductStrip-module_vendor_Gvu7G",title:"ProductStrip-module_title_gCNmq",price:"ProductStrip-module_price_gULcE"};import{jsx as
|
|
1074
|
+
`,document.head.appendChild(e)}var M={section:"ProductStrip-module_section_Hugfg",label:"ProductStrip-module_label_nuc93",row:"ProductStrip-module_row_WDVBX",card:"ProductStrip-module_card_JBGYT",media:"ProductStrip-module_media_RrbGe",image:"ProductStrip-module_image_5pNL7",body:"ProductStrip-module_body_ly032",vendor:"ProductStrip-module_vendor_Gvu7G",title:"ProductStrip-module_title_gCNmq",price:"ProductStrip-module_price_gULcE"};import{jsx as ie,jsxs as Be}from"react/jsx-runtime";function Ze({products:e,listboxId:s,onSelect:a,onFocusChange:n,focusable:d=!0}){if(e.length===0)return null;let l=`${s}-products-label`;return Be("section",{className:M.section,"data-aia-products":"",role:"group","aria-labelledby":l,children:[ie("div",{className:M.label,id:l,children:"Products"}),ie("div",{className:M.row,"data-aia-products-row":"",children:e.map((o,m)=>ie(Dt,{product:o,id:`${s}-product-${m}`,onSelect:a,onFocusChange:n,focusable:d},o.id))})]})}function Dt({product:e,id:s,onSelect:a,onFocusChange:n,focusable:d}){let l=o=>{o.metaKey||o.ctrlKey||o.shiftKey||o.altKey||o.button!==0||(o.preventDefault(),a(e))};return Be("a",{id:s,className:M.card,"data-aia-product":"",role:"option","aria-selected":!1,href:e.url,tabIndex:d?0:-1,onClick:l,onKeyDown:o=>{o.key!=="Enter"&&o.key!==" "||(o.preventDefault(),a(e))},onFocus:()=>n?.(!0),onBlur:o=>{o.relatedTarget?.closest("[data-aia-dropdown]")||n?.(!1)},children:[ie("span",{className:M.media,"data-aia-product-placeholder":e.imageUrl?void 0:"",children:e.imageUrl?ie("img",{className:M.image,src:e.imageUrl,alt:"",loading:"lazy",decoding:"async"}):null}),Be("span",{className:M.body,children:[e.vendor?ie("span",{className:M.vendor,children:e.vendor}):null,ie("span",{className:M.title,children:e.title}),e.price?ie("span",{className:M.price,children:e.price}):null]})]})}import{computeOptionsGridLayout as Nt,isOptionsGridMobileViewport as Ot,OPTIONS_GRID_MOBILE_QUERY as Ht}from"@magicx-eng/ai-autocomplete-vanilla";import{useEffect as Gt,useState as Kt}from"react";import{optionsGridTemplateColumns as Rt}from"@magicx-eng/ai-autocomplete-vanilla";import{useLayoutEffect as Tt,useRef as Lt}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 {
|
|
1012
1075
|
.aia-grid {
|
|
1013
1076
|
display: grid;
|
|
1014
1077
|
grid-template-columns: repeat(
|
|
@@ -1043,7 +1106,7 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
1043
1106
|
border-radius: 3px;
|
|
1044
1107
|
}
|
|
1045
1108
|
}
|
|
1046
|
-
`,document.head.appendChild(e)}import{jsx as
|
|
1109
|
+
`,document.head.appendChild(e)}import{jsx as zt}from"react/jsx-runtime";function Ye({min:e="16rem",max:s,gap:a,scroll:n=!1,maxHeight:d,scrollResetKey:l,cols:o,className:m,children:f,...v}){let _=Lt(null);Tt(()=>{if(l===void 0)return;let R=_.current;R&&(R.scrollTop=0)},[l]);let x={"--aia-grid-min":e};return s&&(x["--aia-grid-max"]=s),a&&(x["--aia-grid-gap"]=a),d&&(x["--aia-grid-max-height"]=d),o&&(x.gridTemplateColumns=Rt(o)),zt("div",{ref:_,className:m?`aia-grid ${m}`:"aia-grid","data-scroll":n||void 0,style:x,...v,children:f})}import{useEffect as Bt,useRef as Ft,useState as Mt}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 {
|
|
1047
1110
|
position: relative;
|
|
1048
1111
|
overflow: visible;
|
|
1049
1112
|
display: flex;
|
|
@@ -1393,7 +1456,7 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
1393
1456
|
filter: brightness(0.55);
|
|
1394
1457
|
}
|
|
1395
1458
|
}
|
|
1396
|
-
`,document.head.appendChild(e)}var
|
|
1459
|
+
`,document.head.appendChild(e)}var N={item:"SuggestionItem-module_item_d4vpD",fadeIn:"SuggestionItem-module_fadeIn_I8u35",content:"SuggestionItem-module_content_T-Qba",tappable:"SuggestionItem-module_tappable_70KcX",nonTappable:"SuggestionItem-module_nonTappable_xSZM-",highlighted:"SuggestionItem-module_highlighted_Hb0SU",tag:"SuggestionItem-module_tag_e3Fwe",pressed:"SuggestionItem-module_pressed_98o-r",glassFade:"SuggestionItem-module_glassFade_oyiSj",tapDown:"SuggestionItem-module_tapDown_G3WGz",streaks:"SuggestionItem-module_streaks_d9PEB",streaksVert:"SuggestionItem-module_streaksVert_ERlV1",streakHorizRight:"SuggestionItem-module_streakHorizRight_aboGz",streakHorizLeft:"SuggestionItem-module_streakHorizLeft_BreWJ",streakVertUp:"SuggestionItem-module_streakVertUp_to1GD",streakVertDown:"SuggestionItem-module_streakVertDown_OrcLh",skeletonPulse:"SuggestionItem-module_skeletonPulse_plvdD",text:"SuggestionItem-module_text_yqoh9"};import{jsx as Se,jsxs as et}from"react/jsx-runtime";function tt({option:e,isHighlighted:s,onSelect:a,onHighlight:n,id:d,loading:l}){let[o,m]=Mt(!1),f=Ft(void 0);Bt(()=>()=>clearTimeout(f.current),[]);let v=()=>{l||!e.is_tappable||o||(m(!0),a(e),clearTimeout(f.current),f.current=setTimeout(()=>m(!1),500))},_=[N.item,s&&!l?N.highlighted:"",e.is_tappable?N.tappable:N.nonTappable,o?N.pressed:""].filter(Boolean).join(" ");return et("div",{id:d,role:"option","data-aia-option":"","data-aia-loading":l?"":void 0,"aria-selected":s,className:_,tabIndex:l||!e.is_tappable?-1:0,onClick:v,onKeyDown:x=>{!l&&e.is_tappable&&(x.key==="Enter"||x.key===" ")&&(x.preventDefault(),v())},onMouseEnter:!l&&e.is_tappable?n:void 0,children:[Se("div",{className:N.streaks}),Se("div",{className:N.streaksVert}),et("span",{className:N.content,children:[Se("span",{className:N.text,children:e.icon?`${e.icon} ${e.text}`:e.text}),e.tag&&Se("span",{className:N.tag,children:e.tag})]})]})}import{jsx as at}from"react/jsx-runtime";function Wt(){let[e,s]=Kt(Ot);return Gt(()=>{if(typeof window>"u"||!window.matchMedia)return;let a=window.matchMedia(Ht),n=()=>s(a.matches);return n(),a.addEventListener("change",n),()=>a.removeEventListener("change",n)},[]),e}function ot({options:e,activeIndex:s,onSelect:a,onHighlight:n,listboxId:d,loading:l,groupKey:o}){let m=Wt(),{cols:f,maxHeight:v}=Nt(e.length,m);return at(Ye,{min:"250px",max:"1fr",gap:"0",scroll:!0,scrollResetKey:o,cols:f,maxHeight:v,children:e.map((_,x)=>at(tt,{option:_,isHighlighted:x===s,onSelect:a,onHighlight:()=>n(x),id:`${d}-option-${x}`,loading:l},_.text))})}if(typeof document<"u"&&!document.getElementById("ac-style-8414cd5f")){let e=document.createElement("style");e.id="ac-style-8414cd5f",e.textContent=`@layer layout {
|
|
1397
1460
|
.aia-stack {
|
|
1398
1461
|
display: flex;
|
|
1399
1462
|
flex-direction: column;
|
|
@@ -1410,7 +1473,7 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
1410
1473
|
}
|
|
1411
1474
|
/* data-align="stretch" is the flex default \u2014 no rule needed. */
|
|
1412
1475
|
}
|
|
1413
|
-
`,document.head.appendChild(e)}import{jsx as
|
|
1476
|
+
`,document.head.appendChild(e)}import{jsx as Ut}from"react/jsx-runtime";function it({space:e,align:s="stretch",className:a,children:n,...d}){let l=e?{"--aia-stack-space":e}:void 0;return Ut("div",{className:a?`aia-stack ${a}`:"aia-stack","data-align":s,style:l,...d,children:n})}import{jsx as J,jsxs as rt}from"react/jsx-runtime";var jt=[159,119,164],Qt=()=>{};function Jt(e){let s=()=>typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches,[a,n]=$t(s);if(Vt(()=>{if(e!=="auto"||typeof window>"u"||typeof window.matchMedia!="function")return;let d=window.matchMedia("(prefers-color-scheme: dark)"),l=()=>n(d.matches);return d.addEventListener("change",l),()=>d.removeEventListener("change",l)},[e]),e!==void 0)return e==="auto"?a?"dark":"light":e}function Fe({suggestions:e,activeIndex:s,onSelect:a,onHighlight:n,isOpen:d,id:l,className:o,pills:m,onPillClick:f,showPills:v=!0,onSkip:_,showSkipButton:x=!0,skipDisabled:R=!1,activeSelected:C=!1,isLoading:A=!1,isInputEmpty:U=!1,products:T,onProductSelect:X,onProductFocusChange:E,optionsPosition:y="below",mode:H}){let c=Jt(H),Z=c!==void 0,V=e[0]?.options??[],q=!!(m&&m.length>0&&f),I=!!(T&&T.length>0),L=d&&(V.length>0||v&&q||A||I),z={suggestions:e,activeIndex:s,pills:m,showPills:v,showSkipButton:x,skipDisabled:R,activeSelected:C,isLoading:A,isInputEmpty:U,products:T},G=qt(z);L&&(G.current=z);let h=L?z:G.current,P=h.suggestions[0],B=P?.options??[],$=h.activeIndex>=0&&!!B[h.activeIndex]?.is_tappable,F=!!(h.pills&&h.pills.length>0&&f),K=h.showPills&&F,W=h.showPills&&!F&&h.isLoading,j=K||W,r=F&&h.showSkipButton&&!h.isInputEmpty&&!!_,t=h.pills?.[0]?.text,u=B.length>0,b=h.isLoading&&!u,g=h.products??[];return J("div",{id:l,role:"listbox","data-aia-dropdown":"","data-options-position":y,"data-mode":c,"data-aia-loading":h.isLoading?"":void 0,"data-aia-has-products":g.length>0?"":void 0,className:`${Z?"magicx-aia ":""}${ae.dropdown} ${L?ae.visible:""} ${o??""}`,onMouseDown:i=>i.preventDefault(),children:rt(it,{space:"8px",children:[(j||r)&&rt(he,{noWrap:!0,className:ae.pillBar,"data-aia-pillbar":"",children:[j&&J("span",{className:ae.pillScroll,"data-aia-pill-scroll":"",children:J(Ie,{pills:h.pills??[],activePillIndex:0,activeSelected:h.activeSelected,onSelectPill:f??(()=>{}),rounded:!0,loading:h.isLoading})}),r&&J("button",{type:"button",tabIndex:-1,className:ae.skip,"data-aia-skip":"",disabled:h.isLoading||h.skipDisabled,"aria-label":t?`Skip ${t}`:"Skip",onClick:_,children:"skip"})]}),u&&J(ot,{options:B,activeIndex:h.activeIndex,onSelect:a,onHighlight:n,listboxId:l,loading:h.isLoading,groupKey:P?`${P.type} ${P.text}`:""}),b&&J("div",{className:ae.skeletonBars,"data-aia-skeleton-bars":"",children:jt.map(i=>J("span",{className:ae.skeletonBar,style:{width:i}},`bar-${i}`))}),J(Ze,{products:g,listboxId:l,onSelect:X??Qt,onFocusChange:E,focusable:L}),J(Qe,{isOptionHighlighted:$,isInputEmpty:h.isInputEmpty})]})})}import{buildSubmitResult as na,ModeController as sa,setCursorOffset as la}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 {
|
|
1414
1477
|
flex-shrink: 0;
|
|
1415
1478
|
width: 32px;
|
|
1416
1479
|
height: 32px;
|
|
@@ -1445,5 +1508,5 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
1445
1508
|
);
|
|
1446
1509
|
cursor: default;
|
|
1447
1510
|
}
|
|
1448
|
-
`,document.head.appendChild(e)}var ot={submitButton:"SubmitButton-module_submitButton_otz7H"};import{jsx as Be}from"react/jsx-runtime";function it({disabled:e,onClick:n}){return Be("button",{type:"button","data-aia-submit":"",className:ot.submitButton,disabled:e,onClick:o=>{o.stopPropagation(),n()},"aria-label":"Submit",children:Be("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:Be("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}import{AIAutocomplete as Qt}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as st,useEffect as ge,useRef as D,useState as Xt}from"react";import{useRef as rt}from"react";function nt(e){let n=rt(e);n.current=e;let o=rt(null);o.current===null&&(o.current={fetch:(l,s)=>{let i=n.current;return i?i.fetch(l,s):Promise.reject(new Error("products config removed"))},transform:l=>n.current?.transform(l)??[],get limit(){return n.current?.limit}});let r=e!==void 0;return{config:r?o.current:void 0,enabled:r}}var Jt={text:"",completedParams:[],identifiedParams:[],skippedParams:[],pendingSpan:null,suggestions:[],products:[],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 Fe({onSubmit:e,onError:n,optionOverrides:o,maskCompletedText:r,apiConfig:l,columns:s=2,dropdownTrigger:i,optionsPosition:u,closeDropdownOnBlur:h,showNonTappableOptions:v,onFocus:k,onBlur:f,value:_,completedParams:P,onChange:W,onParamsChange:U,products:J,onProductSelect:V,source:C,setCursor:x}){let p=D(null),[Z,q]=Xt(null),T=D(e);T.current=e;let E=D(n);E.current=n;let A=D(W);A.current=W;let g=D(U);g.current=U;let L=D(k);L.current=k;let B=D(f);B.current=f;let R=D(x);R.current=x;let H=D(V);H.current=V;let $=nt(J);ge(()=>{if(typeof document>"u")return;let d=new Qt(document.createElement("div"),{renderMode:"headless",apiConfig:l,optionOverrides:o,maskCompletedText:r,columns:s,dropdownTrigger:i,optionsPosition:u,closeDropdownOnBlur:h,showNonTappableOptions:v,source:C,value:_,completedParams:P,onSubmit:(...y)=>T.current?.(...y),onError:(...y)=>E.current?.(...y),onChange:(...y)=>A.current?.(...y),onParamsChange:(...y)=>g.current?.(...y),onFocus:()=>L.current?.(),onBlur:()=>B.current?.(),onProductSelect:y=>H.current?.(y),setCursor:y=>R.current?.(y),products:$.config});p.current=d,q(d.getState());let S=d.subscribe(y=>q(y));return()=>{S(),d.destroy(),p.current===d&&(p.current=null)}},[]),ge(()=>{_!==void 0&&p.current?.setValue(_)},[_]),ge(()=>{P!==void 0&&p.current?.setCompletedParams(P)},[P]);let j=JSON.stringify(l??null),G=D(o),F=D(0);if(o!==G.current){let d=G.current,S=o,y=Object.keys(d??{}),le=Object.keys(S??{});(y.length!==le.length||le.some(ee=>!d?.[ee]||S[ee]!==d[ee]))&&F.current++,G.current=o}ge(()=>{p.current?.update({apiConfig:l,optionOverrides:o,dropdownTrigger:i,optionsPosition:u,closeDropdownOnBlur:h,showNonTappableOptions:v})},[j,F.current,i,u,h,v]);let Y=D(!1);ge(()=>{if(!Y.current){Y.current=!0;return}p.current?.update({products:$.config})},[$.enabled]);let z=D(null);z.current===null&&(z.current={handleTextChange:d=>p.current?.handleTextChange(d),handleKeyDown:d=>{let S="nativeEvent"in d?d.nativeEvent:d;p.current?.handleKeyDown(S)},setFocused:d=>p.current?.setFocused(d),startEditingParam:d=>p.current?.startEditingParam(d),exitEditMode:()=>p.current?.exitEditMode(),handleCaretAfterInput:d=>p.current?.handleCaretAfterInput(d),handleCaretMove:d=>p.current?.handleCaretMove(d),replaceEditingRange:d=>p.current?.replaceEditingRange(d)??!1,setActivePill:d=>p.current?.setActivePill(d),removeLastParam:()=>p.current?.removeLastParam(),clearNewParamId:()=>p.current?.clearNewParamId(),reset:()=>p.current?.reset(),selectOption:d=>p.current?.selectOption(d),selectProduct:d=>p.current?.selectProduct(d),setActiveDropdownIndex:d=>p.current?.setActiveDropdownIndex(d),handleFocus:()=>p.current?.setFocused(!0),handleBlur:()=>p.current?.setFocused(!1)});let t=z.current,c=st(d=>{let S=d.target.value,le=S.length>0&&!d.nativeEvent?.isComposing&&S[0]!==S[0].toUpperCase()?S[0].toUpperCase()+S.slice(1):S;p.current?.handleTextChange(le)},[]),m=st(d=>{p.current?.handleKeyDown(d.nativeEvent)},[]),b=p.current,a=Z??Jt,I=_!==void 0?_:a.text,Q=P!==void 0?P:a.completedParams,K=a.actionableSuggestions,be=K[0],se=b?.listboxId??"",Se=a.activeDropdownIndex>=0&&b?`${se}-option-${a.activeDropdownIndex}`:void 0,re=a.editingParam,ue=re?{type:re.suggestionType,text:re.suggestionPlaceholder,required:!0,options:re.options}:null,ve=ue??be,Ae=ue?[ue]:K,xe=!b||a.isLoading&&!a.editingParam&&!a.inSelectionAnimation;return{completedParams:Q,skippedParams:a.skippedParams,suggestionPills:K,setActivePill:t.setActivePill,removeLastParam:t.removeLastParam,segments:a.segments,newParamId:a.newParamId,clearNewParamId:t.clearNewParamId,suggestions:a.suggestions,activeIndex:a.activeDropdownIndex,isReady:a.isReady,isLoading:xe,isFocused:a.isFocused,isDropdownOpen:a.isDropdownOpen,isActivePillSelected:a.isActivePillSelected,placeholderText:a.placeholderText,listboxId:se,error:a.error,products:a.products,selectProduct:t.selectProduct,handleTextChange:t.handleTextChange,handleKeyDown:t.handleKeyDown,setFocused:t.setFocused,editingParam:re,editingAnchor:a.editingAnchor,caretOffset:a.caretOffset,startEditingParam:t.startEditingParam,exitEditMode:t.exitEditMode,handleCaretAfterInput:t.handleCaretAfterInput,handleCaretMove:t.handleCaretMove,replaceEditingRange:t.replaceEditingRange,inputProps:{value:I,placeholder:a.placeholderText||void 0,onChange:c,onKeyDown:m,onFocus:t.handleFocus,onBlur:t.handleBlur,role:"combobox","aria-expanded":a.isDropdownOpen,"aria-activedescendant":Se,"aria-autocomplete":"list","aria-controls":se},reset:t.reset,dropdownProps:{suggestions:ve?[{...ve,options:a.filteredOptions}]:[],activeIndex:a.activeDropdownIndex,onSelect:t.selectOption,onHighlight:t.setActiveDropdownIndex,isOpen:a.isDropdownOpen,id:se,pills:Ae,activeSelected:a.isActivePillSelected,onPillClick:t.setActivePill,isLoading:xe,isInputEmpty:I.trim().length===0,products:a.products,onProductSelect:t.selectProduct,onProductFocusChange:t.setFocused,optionsPosition:u??"below"}}}import{extractPlainText as lt,getCursorOffset as dt,plainTextLength as Zt,renderEditableContent as Yt,setCursorOffset as pt}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as N,useEffect as Me,useLayoutEffect as Oe,useRef as pe}from"react";var Ie;function ea(){if(Ie!==void 0)return Ie;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Ie=e.contentEditable==="plaintext-only",Ie}function ct(e){let{segments:n,newParamId:o,editingParam:r,editingAnchor:l,caretOffset:s,placeholderText:i,isFocused:u,isDropdownOpen:h,listboxId:v,activeDescendantId:k,autoFocus:f,handleTextChange:_,handleKeyDown:P,handleCaretAfterInput:W,handleCaretMove:U,startEditingParam:J,replaceEditingRange:V,setFocused:C}=e,x=pe(null),p=pe(!1),Z=pe(""),q=pe(""),T=pe(null),E=pe(0);T.current=s,Me(()=>{if(!f)return;let t=x.current;if(!t)return;document.activeElement===t?C(!0):t.focus();let c=t.ownerDocument??document,m=c.getSelection(),b=m&&m.rangeCount>0&&t.contains(m.anchorNode);if(m&&!b){let a=c.createRange();a.selectNodeContents(t),a.collapse(!0),m.removeAllRanges(),m.addRange(a)}},[f,C]),Me(()=>{let t=x.current;if(!t)return;let c=t.ownerDocument??document,m=()=>{let b=c.getSelection();if(!b||b.rangeCount===0||!b.anchorNode||!t.contains(b.anchorNode))return;let a=b.anchorNode,I=a.nodeType===Node.ELEMENT_NODE?a:a.parentElement,K=(b.isCollapsed?I?.closest('strong[data-seg="completed"][data-param-id]'):null)?.dataset.paramId??null;if(K&&K!==r?.id){J(K);return}performance.now()-E.current<50||U(dt(t))};return c.addEventListener("selectionchange",m),()=>c.removeEventListener("selectionchange",m)},[r,J,U]),Oe(()=>{let t=x.current;t&&Yt({input:t,segments:n,newParamId:o,editingParamId:r?.id??null,placeholderText:i??"",isFocused:u})},[n,o,r,i,u]),Oe(()=>{let t=Z.current,c=o??"";if(Z.current=c,!c||c===t)return;let m=x.current;if(!m)return;m.focus();let b=T.current??Zt(m);pt(m,b)},[o]),Oe(()=>{let t=q.current,c=r?.id??"";if(q.current=c,!c||c===t||l==null)return;let m=x.current;m&&pt(m,l)},[r,l]);let A=N(()=>{if(p.current)return;let t=x.current;if(!t)return;let c=lt(t),b=c.length>0&&c[0]!==c[0].toUpperCase()?c[0].toUpperCase()+c.slice(1):c;_(b)},[_]),g=N(()=>{E.current=performance.now(),A();let t=x.current;t&&W(dt(t))},[A,W]);Me(()=>{let t=x.current;if(!t)return;let c=m=>{let b=m,a=b.inputType;if(a==="insertParagraph"||a==="insertLineBreak"||a==="insertFromDrop"){m.preventDefault();return}if(a.startsWith("insert")||a.startsWith("delete")){let I=a.startsWith("delete")?"":b.data??"";V(I)&&m.preventDefault()}};return t.addEventListener("beforeinput",c),()=>t.removeEventListener("beforeinput",c)},[V]);let L=N(()=>{p.current=!0},[]),B=N(()=>{p.current=!1,A()},[A]),R=N(t=>{t.preventDefault();let c=x.current;if(!c)return;let m=(t.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!m)return;let b=c.ownerDocument??document,a=b.getSelection();if(!a||a.rangeCount===0)return;let I=a.getRangeAt(0);if(!c.contains(I.startContainer))return;I.deleteContents();let Q=b.createTextNode(m);I.insertNode(Q),I.setStartAfter(Q),I.collapse(!0),a.removeAllRanges(),a.addRange(I),A()},[A]),H=N(t=>P(t),[P]),$=N(()=>C(!0),[C]),j=N(()=>C(!1),[C]),G=N(()=>x.current?.focus(),[]),F=N(()=>x.current?.blur(),[]),Y=N(()=>{let t=x.current;return t?lt(t):""},[]),z=ea()?"plaintext-only":"true";return{inputRef:x,editorProps:{ref:x,contentEditable:z,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":v,"aria-expanded":h,"aria-activedescendant":k,spellCheck:!0,enterKeyHint:"send",onInput:g,onKeyDown:H,onCompositionStart:L,onCompositionEnd:B,onPaste:R,onFocus:$,onBlur:j},getPlainText:Y,focus:G,blur:F}}import{jsx as ce,jsxs as He}from"react/jsx-runtime";function sa(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var la=ta(function({onSubmit:n,onError:o,optionOverrides:r,maskCompletedText:l,className:s,apiConfig:i,columns:u,pillPlacement:h="dropdown",mode:v="auto",optionsPosition:k="below",animations:f=!0,dropdownTrigger:_,closeDropdownOnBlur:P,showNonTappableOptions:W,autoFocus:U=!0,onFocus:J,onBlur:V,value:C,completedParams:x,onChange:p,onParamsChange:Z,products:q,onProductSelect:T,submitButton:E},A){let g=fe(null),L=fe(null),B=fe(()=>{}),R=fe(null),H=fe(null);ut(()=>{let w=g.current;if(w)return R.current?R.current.setMode(v):R.current=new ra(w,v),()=>{R.current?.destroy(),R.current=null}},[v]);let $=Ne(w=>{let te=H.current?.current;te&&(te.focus(),na(te,w))},[]),{completedParams:j,skippedParams:G,suggestionPills:F,setActivePill:Y,segments:z,newParamId:t,clearNewParamId:c,placeholderText:m,isFocused:b,isDropdownOpen:a,isActivePillSelected:I,isLoading:Q,activeIndex:K,listboxId:be,handleTextChange:se,handleKeyDown:Se,setFocused:re,editingParam:ue,editingAnchor:ve,caretOffset:Ae,startEditingParam:xe,handleCaretAfterInput:d,handleCaretMove:S,replaceEditingRange:y,dropdownProps:le,reset:ee}=Fe({onSubmit:w=>B.current(w),onError:o,optionOverrides:r,maskCompletedText:l,apiConfig:i,columns:u,dropdownTrigger:_,optionsPosition:k,closeDropdownOnBlur:P,showNonTappableOptions:W,onFocus:J,onBlur:V,value:C,completedParams:x,onChange:p,onParamsChange:Z,products:q,onProductSelect:T,source:"full-sdk",setCursor:$});ut(()=>{if(!t)return;let w=window.setTimeout(()=>c(),650);return()=>window.clearTimeout(w)},[t,c]);let mt=K>=0?`${be}-option-${K}`:void 0,{inputRef:Ce,editorProps:ht,focus:we,blur:Ge,getPlainText:Ke}=ct({segments:z,newParamId:t,editingParam:ue,editingAnchor:ve,caretOffset:Ae,placeholderText:m,isFocused:b,isDropdownOpen:a,listboxId:be,activeDescendantId:mt,autoFocus:U,handleTextChange:se,handleKeyDown:Se,handleCaretAfterInput:d,handleCaretMove:S,startEditingParam:xe,replaceEditingRange:y,setFocused:re});H.current=Ce,oa(()=>{let w=L.current,te=Ce.current;if(!w||!te)return;let We=()=>{let Ve=w.firstElementChild;if(!Ve)return;let vt=Ve.getBoundingClientRect(),xt=te.getBoundingClientRect();vt.top>=xt.bottom-2?w.setAttribute("data-aia-pill-wrapped",""):w.removeAttribute("data-aia-pill-wrapped")};We();let Ue=new ResizeObserver(We);return Ue.observe(te),()=>Ue.disconnect()},[z,F.length,Q,Ce]),aa(A,()=>({focus:we,blur:Ge,reset:ee,setMode:w=>R.current?.setMode(w)}),[we,Ge,ee]);let ye=!!z.length||j.length>0,Ee=Ne(()=>{if(!ye)return;let w=Ke();n(ia(w,j,G)),ee()},[ye,j,G,n,ee,Ke]);B.current=Ee;let gt=Ne(w=>{w.target?.closest("[data-aia-pill]")||we()},[we]),ft=h==="inline",bt=h==="dropdown";return He("div",{ref:g,className:`magicx-aia ${ne.container} ${s??""}`,"data-pill-placement":h,"data-options-position":k,"data-animations":f?"on":"off","data-mode":sa(v),children:[ce(ze,{...le,showPills:bt}),He("div",{className:ne.inputWrapper,onClick:gt,children:[He("div",{className:ne.editorArea,"data-aia-editor":"",children:[ce("div",{...ht,className:ne.input,"data-aia-input":""}),ft&&(Q||F.length>0)&&ce("span",{ref:L,className:ne.pillListContainer,"data-aia-pill-list-container":"",children:ce(_e,{pills:F,activePillIndex:0,activeSelected:I,onSelectPill:Y,loading:Q})})]}),E===null?null:E===void 0?ce(it,{disabled:!ye,onClick:Ee}):ce("span",{"data-aia-submit":"",className:ne.submitSlot,onClick:w=>{ye&&(w.stopPropagation(),Ee())},children:E})]})]})});export{la as AIAutocomplete,ze as AIAutocompleteDropdown,No as buildSubmitResult,Fe as useAIAutocomplete,Ho as withSkippedParams};
|
|
1511
|
+
`,document.head.appendChild(e)}var nt={submitButton:"SubmitButton-module_submitButton_otz7H"};import{jsx as Me}from"react/jsx-runtime";function st({disabled:e,onClick:s}){return Me("button",{type:"button","data-aia-submit":"",className:nt.submitButton,disabled:e,onClick:a=>{a.stopPropagation(),s()},"aria-label":"Submit",children:Me("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:Me("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}import{AIAutocomplete as Xt}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as pt,useEffect as fe,useRef as D,useState as Zt}from"react";import{useRef as lt}from"react";function dt(e){let s=lt(e);s.current=e;let a=lt(null);a.current===null&&(a.current={fetch:(d,l)=>{let o=s.current;return o?o.fetch(d,l):Promise.reject(new Error("products config removed"))},transform:d=>s.current?.transform(d)??[],get limit(){return s.current?.limit}});let n=e!==void 0;return{config:n?a.current:void 0,enabled:n}}var Yt={text:"",completedParams:[],identifiedParams:[],skippedParams:[],pendingSpan:null,suggestions:[],products:[],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 Ne({onSubmit:e,onError:s,optionOverrides:a,maskCompletedText:n,apiConfig:d,columns:l=2,dropdownTrigger:o,optionsPosition:m,closeDropdownOnBlur:f,showNonTappableOptions:v,showSkipButton:_,onFocus:x,onBlur:R,value:C,completedParams:A,onChange:U,onParamsChange:T,products:X,onProductSelect:E,source:y,setCursor:H}){let c=D(null),[Z,V]=Zt(null),q=D(e);q.current=e;let I=D(s);I.current=s;let L=D(U);L.current=U;let z=D(T);z.current=T;let G=D(x);G.current=x;let h=D(R);h.current=R;let P=D(H);P.current=H;let B=D(E);B.current=E;let $=dt(X);fe(()=>{if(typeof document>"u")return;let p=new Xt(document.createElement("div"),{renderMode:"headless",apiConfig:d,optionOverrides:a,maskCompletedText:n,columns:l,dropdownTrigger:o,optionsPosition:m,closeDropdownOnBlur:f,showNonTappableOptions:v,source:y,value:C,completedParams:A,onSubmit:(...k)=>q.current?.(...k),onError:(...k)=>I.current?.(...k),onChange:(...k)=>L.current?.(...k),onParamsChange:(...k)=>z.current?.(...k),onFocus:()=>G.current?.(),onBlur:()=>h.current?.(),onProductSelect:k=>B.current?.(k),setCursor:k=>P.current?.(k),products:$.config});c.current=p,V(p.getState());let S=p.subscribe(k=>V(k));return()=>{S(),p.destroy(),c.current===p&&(c.current=null)}},[]),fe(()=>{C!==void 0&&c.current?.setValue(C)},[C]),fe(()=>{A!==void 0&&c.current?.setCompletedParams(A)},[A]);let F=JSON.stringify(d??null),K=D(a),W=D(0);if(a!==K.current){let p=K.current,S=a,k=Object.keys(p??{}),de=Object.keys(S??{});(k.length!==de.length||de.some(me=>!p?.[me]||S[me]!==p[me]))&&W.current++,K.current=a}fe(()=>{c.current?.update({apiConfig:d,optionOverrides:a,dropdownTrigger:o,optionsPosition:m,closeDropdownOnBlur:f,showNonTappableOptions:v})},[F,W.current,o,m,f,v]);let j=D(!1);fe(()=>{if(!j.current){j.current=!0;return}c.current?.update({products:$.config})},[$.enabled]);let r=D(null);r.current===null&&(r.current={handleTextChange:p=>c.current?.handleTextChange(p),handleKeyDown:p=>{let S="nativeEvent"in p?p.nativeEvent:p;c.current?.handleKeyDown(S)},setFocused:p=>c.current?.setFocused(p),startEditingParam:p=>c.current?.startEditingParam(p),exitEditMode:()=>c.current?.exitEditMode(),handleCaretAfterInput:p=>c.current?.handleCaretAfterInput(p),handleCaretMove:p=>c.current?.handleCaretMove(p),replaceEditingRange:p=>c.current?.replaceEditingRange(p)??!1,setActivePill:p=>c.current?.setActivePill(p),skipActivePill:()=>c.current?.skipActivePill(),removeLastParam:()=>c.current?.removeLastParam(),clearNewParamId:()=>c.current?.clearNewParamId(),reset:()=>c.current?.reset(),selectOption:p=>c.current?.selectOption(p),selectProduct:p=>c.current?.selectProduct(p),setActiveDropdownIndex:p=>c.current?.setActiveDropdownIndex(p),handleFocus:()=>c.current?.setFocused(!0),handleBlur:()=>c.current?.setFocused(!1)});let t=r.current,u=pt(p=>{let S=p.target.value,de=S.length>0&&!p.nativeEvent?.isComposing&&S[0]!==S[0].toUpperCase()?S[0].toUpperCase()+S.slice(1):S;c.current?.handleTextChange(de)},[]),b=pt(p=>{c.current?.handleKeyDown(p.nativeEvent)},[]),g=c.current,i=Z??Yt,Y=C!==void 0?C:i.text,re=A!==void 0?A:i.completedParams,ne=i.actionableSuggestions,ve=ne[0],se=g?.listboxId??"",Ce=i.activeDropdownIndex>=0&&g?`${se}-option-${i.activeDropdownIndex}`:void 0,ee=i.editingParam,ue=ee?{type:ee.suggestionType,text:ee.suggestionPlaceholder,required:!0,options:ee.options}:null,xe=ue??ve,Ee=ue?[ue]:ne,we=!g||i.isLoading&&!i.editingParam&&!i.inSelectionAnimation;return{completedParams:re,skippedParams:i.skippedParams,suggestionPills:ne,setActivePill:t.setActivePill,skipActivePill:t.skipActivePill,removeLastParam:t.removeLastParam,segments:i.segments,newParamId:i.newParamId,clearNewParamId:t.clearNewParamId,suggestions:i.suggestions,activeIndex:i.activeDropdownIndex,isReady:i.isReady,isLoading:we,isFocused:i.isFocused,isDropdownOpen:i.isDropdownOpen,isActivePillSelected:i.isActivePillSelected,placeholderText:i.placeholderText,listboxId:se,error:i.error,products:i.products,selectProduct:t.selectProduct,handleTextChange:t.handleTextChange,handleKeyDown:t.handleKeyDown,setFocused:t.setFocused,editingParam:ee,editingAnchor:i.editingAnchor,caretOffset:i.caretOffset,startEditingParam:t.startEditingParam,exitEditMode:t.exitEditMode,handleCaretAfterInput:t.handleCaretAfterInput,handleCaretMove:t.handleCaretMove,replaceEditingRange:t.replaceEditingRange,inputProps:{value:Y,placeholder:i.placeholderText||void 0,onChange:u,onKeyDown:b,onFocus:t.handleFocus,onBlur:t.handleBlur,role:"combobox","aria-expanded":i.isDropdownOpen,"aria-activedescendant":Ce,"aria-autocomplete":"list","aria-controls":se},reset:t.reset,dropdownProps:{suggestions:xe?[{...xe,options:i.filteredOptions}]:[],activeIndex:i.activeDropdownIndex,onSelect:t.selectOption,onHighlight:t.setActiveDropdownIndex,isOpen:i.isDropdownOpen,id:se,pills:Ee,activeSelected:i.isActivePillSelected,onPillClick:t.setActivePill,onSkip:t.skipActivePill,showSkipButton:(_??!0)&&!ee,skipDisabled:i.inSelectionAnimation,isLoading:we,isInputEmpty:Y.trim().length===0,products:i.products,onProductSelect:t.selectProduct,onProductFocusChange:t.setFocused,optionsPosition:m??"below"}}}import{extractPlainText as ct,getCursorOffset as ut,plainTextLength as ea,renderEditableContent as ta,setCursorOffset as mt}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as O,useEffect as Oe,useLayoutEffect as He,useRef as pe}from"react";var Ae;function aa(){if(Ae!==void 0)return Ae;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Ae=e.contentEditable==="plaintext-only",Ae}function ht(e){let{segments:s,newParamId:a,editingParam:n,editingAnchor:d,caretOffset:l,placeholderText:o,isFocused:m,isDropdownOpen:f,listboxId:v,activeDescendantId:_,autoFocus:x,handleTextChange:R,handleKeyDown:C,handleCaretAfterInput:A,handleCaretMove:U,startEditingParam:T,replaceEditingRange:X,setFocused:E}=e,y=pe(null),H=pe(!1),c=pe(""),Z=pe(""),V=pe(null),q=pe(0);V.current=l,Oe(()=>{if(!x)return;let r=y.current;if(!r)return;document.activeElement===r?E(!0):r.focus();let t=r.ownerDocument??document,u=t.getSelection(),b=u&&u.rangeCount>0&&r.contains(u.anchorNode);if(u&&!b){let g=t.createRange();g.selectNodeContents(r),g.collapse(!0),u.removeAllRanges(),u.addRange(g)}},[x,E]),Oe(()=>{let r=y.current;if(!r)return;let t=r.ownerDocument??document,u=()=>{let b=t.getSelection();if(!b||b.rangeCount===0||!b.anchorNode||!r.contains(b.anchorNode))return;let g=b.anchorNode,i=g.nodeType===Node.ELEMENT_NODE?g:g.parentElement,re=(b.isCollapsed?i?.closest('strong[data-seg="completed"][data-param-id]'):null)?.dataset.paramId??null;if(re&&re!==n?.id){T(re);return}performance.now()-q.current<50||U(ut(r))};return t.addEventListener("selectionchange",u),()=>t.removeEventListener("selectionchange",u)},[n,T,U]),He(()=>{let r=y.current;r&&ta({input:r,segments:s,newParamId:a,editingParamId:n?.id??null,placeholderText:o??"",isFocused:m})},[s,a,n,o,m]),He(()=>{let r=c.current,t=a??"";if(c.current=t,!t||t===r)return;let u=y.current;if(!u)return;u.focus();let b=V.current??ea(u);mt(u,b)},[a]),He(()=>{let r=Z.current,t=n?.id??"";if(Z.current=t,!t||t===r||d==null)return;let u=y.current;u&&mt(u,d)},[n,d]);let I=O(()=>{if(H.current)return;let r=y.current;if(!r)return;let t=ct(r),b=t.length>0&&t[0]!==t[0].toUpperCase()?t[0].toUpperCase()+t.slice(1):t;R(b)},[R]),L=O(()=>{q.current=performance.now(),I();let r=y.current;r&&A(ut(r))},[I,A]);Oe(()=>{let r=y.current;if(!r)return;let t=u=>{let b=u,g=b.inputType;if(g==="insertParagraph"||g==="insertLineBreak"||g==="insertFromDrop"){u.preventDefault();return}if(g.startsWith("insert")||g.startsWith("delete")){let i=g.startsWith("delete")?"":b.data??"";X(i)&&u.preventDefault()}};return r.addEventListener("beforeinput",t),()=>r.removeEventListener("beforeinput",t)},[X]);let z=O(()=>{H.current=!0},[]),G=O(()=>{H.current=!1,I()},[I]),h=O(r=>{r.preventDefault();let t=y.current;if(!t)return;let u=(r.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!u)return;let b=t.ownerDocument??document,g=b.getSelection();if(!g||g.rangeCount===0)return;let i=g.getRangeAt(0);if(!t.contains(i.startContainer))return;i.deleteContents();let Y=b.createTextNode(u);i.insertNode(Y),i.setStartAfter(Y),i.collapse(!0),g.removeAllRanges(),g.addRange(i),I()},[I]),P=O(r=>C(r),[C]),B=O(()=>E(!0),[E]),$=O(()=>E(!1),[E]),F=O(()=>y.current?.focus(),[]),K=O(()=>y.current?.blur(),[]),W=O(()=>{let r=y.current;return r?ct(r):""},[]),j=aa()?"plaintext-only":"true";return{inputRef:y,editorProps:{ref:y,contentEditable:j,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":v,"aria-expanded":f,"aria-activedescendant":_,spellCheck:!0,enterKeyHint:"send",onInput:L,onKeyDown:P,onCompositionStart:z,onCompositionEnd:G,onPaste:h,onFocus:B,onBlur:$},getPlainText:W,focus:F,blur:K}}import{jsx as ce,jsxs as Ke}from"react/jsx-runtime";function da(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var pa=oa(function({onSubmit:s,onError:a,optionOverrides:n,maskCompletedText:d,className:l,apiConfig:o,columns:m,pillPlacement:f="dropdown",mode:v="auto",optionsPosition:_="below",animations:x=!0,dropdownTrigger:R,closeDropdownOnBlur:C,showNonTappableOptions:A,showSkipButton:U,autoFocus:T=!0,onFocus:X,onBlur:E,value:y,completedParams:H,onChange:c,onParamsChange:Z,products:V,onProductSelect:q,submitButton:I},L){let z=be(null),G=be(null),h=be(()=>{}),P=be(null),B=be(null);gt(()=>{let w=z.current;if(w)return P.current?P.current.setMode(v):P.current=new sa(w,v),()=>{P.current?.destroy(),P.current=null}},[v]);let $=Ge(w=>{let te=B.current?.current;te&&(te.focus(),la(te,w))},[]),{completedParams:F,skippedParams:K,suggestionPills:W,setActivePill:j,skipActivePill:r,segments:t,newParamId:u,clearNewParamId:b,placeholderText:g,isFocused:i,isDropdownOpen:Y,isActivePillSelected:re,isLoading:ne,activeIndex:ve,listboxId:se,handleTextChange:Ce,handleKeyDown:ee,setFocused:ue,editingParam:xe,editingAnchor:Ee,caretOffset:we,startEditingParam:p,handleCaretAfterInput:S,handleCaretMove:k,replaceEditingRange:de,dropdownProps:me,reset:ye}=Ne({onSubmit:w=>h.current(w),onError:a,optionOverrides:n,maskCompletedText:d,apiConfig:o,columns:m,dropdownTrigger:R,optionsPosition:_,closeDropdownOnBlur:C,showNonTappableOptions:A,showSkipButton:U,onFocus:X,onBlur:E,value:y,completedParams:H,onChange:c,onParamsChange:Z,products:V,onProductSelect:q,source:"full-sdk",setCursor:$});gt(()=>{if(!u)return;let w=window.setTimeout(()=>b(),650);return()=>window.clearTimeout(w)},[u,b]);let ft=ve>=0?`${se}-option-${ve}`:void 0,{inputRef:De,editorProps:bt,focus:ke,blur:We,getPlainText:Ue}=ht({segments:t,newParamId:u,editingParam:xe,editingAnchor:Ee,caretOffset:we,placeholderText:g,isFocused:i,isDropdownOpen:Y,listboxId:se,activeDescendantId:ft,autoFocus:T,handleTextChange:Ce,handleKeyDown:ee,handleCaretAfterInput:S,handleCaretMove:k,startEditingParam:p,replaceEditingRange:de,setFocused:ue});B.current=De,ra(()=>{let w=G.current,te=De.current;if(!w||!te)return;let Ve=()=>{let $e=w.firstElementChild;if(!$e)return;let yt=$e.getBoundingClientRect(),kt=te.getBoundingClientRect();yt.top>=kt.bottom-2?w.setAttribute("data-aia-pill-wrapped",""):w.removeAttribute("data-aia-pill-wrapped")};Ve();let qe=new ResizeObserver(Ve);return qe.observe(te),()=>qe.disconnect()},[t,W.length,ne,De]),ia(L,()=>({focus:ke,blur:We,reset:ye,setMode:w=>P.current?.setMode(w),skipActivePill:r}),[ke,We,ye,r]);let _e=!!t.length||F.length>0,Re=Ge(()=>{if(!_e)return;let w=Ue();s(na(w,F,K)),ye()},[_e,F,K,s,ye,Ue]);h.current=Re;let vt=Ge(w=>{w.target?.closest("[data-aia-pill]")||ke()},[ke]),xt=f==="inline",wt=f==="dropdown";return Ke("div",{ref:z,className:`magicx-aia ${le.container} ${l??""}`,"data-pill-placement":f,"data-options-position":_,"data-animations":x?"on":"off","data-mode":da(v),children:[ce(Fe,{...me,showPills:wt}),Ke("div",{className:le.inputWrapper,onClick:vt,children:[Ke("div",{className:le.editorArea,"data-aia-editor":"",children:[ce("div",{...bt,className:le.input,"data-aia-input":""}),xt&&(ne||W.length>0)&&ce("span",{ref:G,className:le.pillListContainer,"data-aia-pill-list-container":"",children:ce(Ie,{pills:W,activePillIndex:0,activeSelected:re,onSelectPill:j,loading:ne})})]}),I===null?null:I===void 0?ce(st,{disabled:!_e,onClick:Re}):ce("span",{"data-aia-submit":"",className:le.submitSlot,onClick:w=>{_e&&(w.stopPropagation(),Re())},children:I})]})]})});export{pa as AIAutocomplete,Fe as AIAutocompleteDropdown,Go as buildSubmitResult,Ne as useAIAutocomplete,Ko as withSkippedParams};
|
|
1449
1512
|
//# sourceMappingURL=index.mjs.map
|