@magicx-eng/ai-autocomplete-react 0.9.0 → 0.10.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 +4 -0
- package/dist/index.d.mts +54 -2
- package/dist/index.d.ts +54 -2
- package/dist/index.js +107 -21
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +107 -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
|
*
|
|
@@ -248,11 +248,10 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
248
248
|
halfway between its old value and the white behind it. */
|
|
249
249
|
--aia-dropdown-border: var(--aia-primitive-neutral-900-a50);
|
|
250
250
|
--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, 0.05);
|
|
251
|
-
/* Suggestion pills (Figma "ParamPill"): transparent fill
|
|
251
|
+
/* Suggestion pills (Figma "ParamPill"): transparent fill, no visible border;
|
|
252
252
|
per-pill opacity via getPillOpacity. */
|
|
253
253
|
--aia-pill-bg: var(--aia-primitive-neutral-750);
|
|
254
254
|
--aia-pill-color: var(--aia-primitive-neutral-300);
|
|
255
|
-
--aia-pill-border: var(--aia-primitive-neutral-750-a30);
|
|
256
255
|
--aia-pill-font-size: 16px;
|
|
257
256
|
|
|
258
257
|
/* Completed params (Figma "RichTextPill"): compact faint-gray chip with
|
|
@@ -305,10 +304,9 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
305
304
|
\u03942) at 50% alpha; see the light-mode note above. */
|
|
306
305
|
--aia-dropdown-border: var(--aia-primitive-neutral-400-a50);
|
|
307
306
|
--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, 0.05);
|
|
308
|
-
/* Suggestion pills (Figma "ParamPill"): transparent fill
|
|
307
|
+
/* Suggestion pills (Figma "ParamPill"): transparent fill, no visible border. */
|
|
309
308
|
--aia-pill-bg: var(--aia-primitive-neutral-750);
|
|
310
309
|
--aia-pill-color: var(--aia-primitive-neutral-700);
|
|
311
|
-
--aia-pill-border: var(--aia-primitive-neutral-750-a30);
|
|
312
310
|
--aia-pill-font-size: 16px;
|
|
313
311
|
|
|
314
312
|
/* Completed params (Figma "RichTextPill") \u2014 dark theme (design source):
|
|
@@ -374,6 +372,33 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
374
372
|
--aia-footer-fade-inset: calc(-1 * var(--aia-footer-fade-lead)) 0 0;
|
|
375
373
|
}
|
|
376
374
|
|
|
375
|
+
/* In the dropdown, the parameter label reads as a section header for the
|
|
376
|
+
options beneath it \u2014 not an outlined chip floating over them. It drops the
|
|
377
|
+
pill's inner horizontal padding and left-aligns its text with the option
|
|
378
|
+
text below, which sits 10px in from the dropdown's content edge. The label's
|
|
379
|
+
own list wrapper carries that 10px so the text lands exactly on the option
|
|
380
|
+
text's left edge.
|
|
381
|
+
|
|
382
|
+
Selector shape differs from the vanilla/Angular copies (which target the
|
|
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. */
|
|
393
|
+
[data-aia-dropdown] [data-aia-pillbar] > span {
|
|
394
|
+
padding-inline: 10px;
|
|
395
|
+
}
|
|
396
|
+
[data-aia-dropdown] [data-aia-pillbar] [data-aia-pill] {
|
|
397
|
+
justify-content: flex-start;
|
|
398
|
+
border-inline-width: 0;
|
|
399
|
+
padding-inline: 0;
|
|
400
|
+
}
|
|
401
|
+
|
|
377
402
|
/* The reserved band the footer overlaps, kept OUT of \`@layer layout\` on
|
|
378
403
|
purpose. A consumer reset (\`* { margin: 0; padding: 0 }\`, Tailwind's
|
|
379
404
|
preflight, \u2026) is unlayered, and an unlayered declaration beats every layered
|
|
@@ -533,8 +558,23 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
533
558
|
}
|
|
534
559
|
|
|
535
560
|
/* The dropdown container owns the 10px/8px edge padding and the 8px section
|
|
536
|
-
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. */
|
|
537
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;
|
|
538
578
|
overflow-x: auto;
|
|
539
579
|
overflow-y: hidden;
|
|
540
580
|
scrollbar-width: none;
|
|
@@ -542,10 +582,55 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
542
582
|
-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 48px), transparent 100%);
|
|
543
583
|
}
|
|
544
584
|
|
|
545
|
-
.AIAutocompleteDropdown-
|
|
585
|
+
.AIAutocompleteDropdown-module_pillScroll_Tpzus > span {
|
|
586
|
+
padding-inline: 0;
|
|
587
|
+
}
|
|
588
|
+
|
|
589
|
+
.AIAutocompleteDropdown-module_pillScroll_Tpzus::-webkit-scrollbar {
|
|
546
590
|
display: none;
|
|
547
591
|
}
|
|
548
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
|
+
|
|
549
634
|
/* --- Fallback loading skeleton (only when no pills/options are cached) --- */
|
|
550
635
|
.AIAutocompleteDropdown-module_skeletonBars_HVr9C {
|
|
551
636
|
display: flex;
|
|
@@ -580,7 +665,7 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
580
665
|
opacity: 0.25;
|
|
581
666
|
}
|
|
582
667
|
}
|
|
583
|
-
`,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 {
|
|
584
669
|
.aia-cluster {
|
|
585
670
|
display: flex;
|
|
586
671
|
flex-wrap: wrap;
|
|
@@ -622,7 +707,7 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
622
707
|
justify-content: space-around;
|
|
623
708
|
}
|
|
624
709
|
}
|
|
625
|
-
`,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
|
|
626
711
|
dropdown's rounded edges. The top inset (--aia-footer-gap) adds breathing
|
|
627
712
|
room above the hint/branding row so the footer doesn't butt against the last
|
|
628
713
|
option row \u2014 additive to the dropdown's 8px section gap. */
|
|
@@ -752,15 +837,16 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
752
837
|
justify-content: flex-end;
|
|
753
838
|
}
|
|
754
839
|
}
|
|
755
|
-
`,document.head.appendChild(e)}var
|
|
756
|
-
|
|
757
|
-
|
|
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,
|
|
841
|
+
no outline. ~28px via 6px padding + 14px text + the 1px border (border-box).
|
|
842
|
+
The border is kept as a 1px transparent line so the box stays the same size
|
|
843
|
+
as it was when the outline was dashed. */
|
|
758
844
|
.ParamPill-module_pill_6Ga7S {
|
|
759
845
|
display: inline-flex;
|
|
760
846
|
align-items: center;
|
|
761
847
|
justify-content: center;
|
|
762
848
|
padding: 5px 8px;
|
|
763
|
-
border: 1px
|
|
849
|
+
border: 1px solid transparent;
|
|
764
850
|
border-radius: 7px;
|
|
765
851
|
background: transparent;
|
|
766
852
|
color: var(--aia-pill-color, var(--aia-color-text-muted, #c1c4cb));
|
|
@@ -808,7 +894,7 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
808
894
|
opacity: 0;
|
|
809
895
|
}
|
|
810
896
|
}
|
|
811
|
-
`,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 {
|
|
812
898
|
position: relative;
|
|
813
899
|
z-index: 1;
|
|
814
900
|
pointer-events: auto;
|
|
@@ -818,7 +904,7 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
818
904
|
align-items: center;
|
|
819
905
|
vertical-align: middle;
|
|
820
906
|
}
|
|
821
|
-
`,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
|
|
822
908
|
(packages/vanilla/src/styles.css). Same tokens, same defaults, so a consumer
|
|
823
909
|
theming one package sees the same result in the other.
|
|
824
910
|
|
|
@@ -985,7 +1071,7 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
985
1071
|
var(--aia-option-color-selected, var(--aia-color-text-default, #fff))
|
|
986
1072
|
);
|
|
987
1073
|
}
|
|
988
|
-
`,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 {
|
|
989
1075
|
.aia-grid {
|
|
990
1076
|
display: grid;
|
|
991
1077
|
grid-template-columns: repeat(
|
|
@@ -1020,7 +1106,7 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
1020
1106
|
border-radius: 3px;
|
|
1021
1107
|
}
|
|
1022
1108
|
}
|
|
1023
|
-
`,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 {
|
|
1024
1110
|
position: relative;
|
|
1025
1111
|
overflow: visible;
|
|
1026
1112
|
display: flex;
|
|
@@ -1370,7 +1456,7 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
1370
1456
|
filter: brightness(0.55);
|
|
1371
1457
|
}
|
|
1372
1458
|
}
|
|
1373
|
-
`,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 {
|
|
1374
1460
|
.aia-stack {
|
|
1375
1461
|
display: flex;
|
|
1376
1462
|
flex-direction: column;
|
|
@@ -1387,7 +1473,7 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
1387
1473
|
}
|
|
1388
1474
|
/* data-align="stretch" is the flex default \u2014 no rule needed. */
|
|
1389
1475
|
}
|
|
1390
|
-
`,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&&!!_,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 {
|
|
1391
1477
|
flex-shrink: 0;
|
|
1392
1478
|
width: 32px;
|
|
1393
1479
|
height: 32px;
|
|
@@ -1422,5 +1508,5 @@ import{buildSubmitResult as No,withSkippedParams as Ho}from"@magicx-eng/ai-autoc
|
|
|
1422
1508
|
);
|
|
1423
1509
|
cursor: default;
|
|
1424
1510
|
}
|
|
1425
|
-
`,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 c=D(null),[Z,$]=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 q=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:q.config});c.current=d,$(d.getState());let S=d.subscribe(y=>$(y));return()=>{S(),d.destroy(),c.current===d&&(c.current=null)}},[]),ge(()=>{_!==void 0&&c.current?.setValue(_)},[_]),ge(()=>{P!==void 0&&c.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(()=>{c.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}c.current?.update({products:q.config})},[q.enabled]);let z=D(null);z.current===null&&(z.current={handleTextChange:d=>c.current?.handleTextChange(d),handleKeyDown:d=>{let S="nativeEvent"in d?d.nativeEvent:d;c.current?.handleKeyDown(S)},setFocused:d=>c.current?.setFocused(d),startEditingParam:d=>c.current?.startEditingParam(d),exitEditMode:()=>c.current?.exitEditMode(),handleCaretAfterInput:d=>c.current?.handleCaretAfterInput(d),handleCaretMove:d=>c.current?.handleCaretMove(d),replaceEditingRange:d=>c.current?.replaceEditingRange(d)??!1,setActivePill:d=>c.current?.setActivePill(d),removeLastParam:()=>c.current?.removeLastParam(),clearNewParamId:()=>c.current?.clearNewParamId(),reset:()=>c.current?.reset(),selectOption:d=>c.current?.selectOption(d),selectProduct:d=>c.current?.selectProduct(d),setActiveDropdownIndex:d=>c.current?.setActiveDropdownIndex(d),handleFocus:()=>c.current?.setFocused(!0),handleBlur:()=>c.current?.setFocused(!1)});let t=z.current,p=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;c.current?.handleTextChange(le)},[]),m=st(d=>{c.current?.handleKeyDown(d.nativeEvent)},[]),b=c.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:p,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 ct}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as N,useEffect as Me,useLayoutEffect as Oe,useRef as ce}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 pt(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=ce(null),c=ce(!1),Z=ce(""),$=ce(""),T=ce(null),E=ce(0);T.current=s,Me(()=>{if(!f)return;let t=x.current;if(!t)return;document.activeElement===t?C(!0):t.focus();let p=t.ownerDocument??document,m=p.getSelection(),b=m&&m.rangeCount>0&&t.contains(m.anchorNode);if(m&&!b){let a=p.createRange();a.selectNodeContents(t),a.collapse(!0),m.removeAllRanges(),m.addRange(a)}},[f,C]),Me(()=>{let t=x.current;if(!t)return;let p=t.ownerDocument??document,m=()=>{let b=p.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 p.addEventListener("selectionchange",m),()=>p.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,p=o??"";if(Z.current=p,!p||p===t)return;let m=x.current;if(!m)return;m.focus();let b=T.current??Zt(m);ct(m,b)},[o]),Oe(()=>{let t=$.current,p=r?.id??"";if($.current=p,!p||p===t||l==null)return;let m=x.current;m&&ct(m,l)},[r,l]);let A=N(()=>{if(c.current)return;let t=x.current;if(!t)return;let p=lt(t),b=p.length>0&&p[0]!==p[0].toUpperCase()?p[0].toUpperCase()+p.slice(1):p;_(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 p=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",p),()=>t.removeEventListener("beforeinput",p)},[V]);let L=N(()=>{c.current=!0},[]),B=N(()=>{c.current=!1,A()},[A]),R=N(t=>{t.preventDefault();let p=x.current;if(!p)return;let m=(t.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!m)return;let b=p.ownerDocument??document,a=b.getSelection();if(!a||a.rangeCount===0)return;let I=a.getRangeAt(0);if(!p.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]),q=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:q,onBlur:j},getPlainText:Y,focus:G,blur:F}}import{jsx as pe,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:c,onParamsChange:Z,products:$,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 q=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:p,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:c,onParamsChange:Z,products:$,onProductSelect:T,source:"full-sdk",setCursor:q});ut(()=>{if(!t)return;let w=window.setTimeout(()=>p(),650);return()=>window.clearTimeout(w)},[t,p]);let mt=K>=0?`${be}-option-${K}`:void 0,{inputRef:Ce,editorProps:ht,focus:we,blur:Ge,getPlainText:Ke}=pt({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:[pe(ze,{...le,showPills:bt}),He("div",{className:ne.inputWrapper,onClick:gt,children:[He("div",{className:ne.editorArea,"data-aia-editor":"",children:[pe("div",{...ht,className:ne.input,"data-aia-input":""}),ft&&(Q||F.length>0)&&pe("span",{ref:L,className:ne.pillListContainer,"data-aia-pill-list-container":"",children:pe(_e,{pills:F,activePillIndex:0,activeSelected:I,onSelectPill:Y,loading:Q})})]}),E===null?null:E===void 0?pe(it,{disabled:!ye,onClick:Ee}):pe("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};
|
|
1426
1512
|
//# sourceMappingURL=index.mjs.map
|