@magicx-eng/ai-autocomplete-react 0.7.0 → 0.8.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 +127 -2
- package/dist/index.d.mts +79 -4
- package/dist/index.d.ts +79 -4
- package/dist/index.js +225 -24
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +225 -24
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var He=Object.defineProperty;var wt=Object.getOwnPropertyDescriptor;var yt=Object.getOwnPropertyNames;var kt=Object.prototype.hasOwnProperty;var _t=(e,o)=>{for(var i in o)He(e,i,{get:o[i],enumerable:!0})},Pt=(e,o,i,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of yt(o))!kt.call(e,n)&&n!==i&&He(e,n,{get:()=>o[n],enumerable:!(s=wt(o,n))||s.enumerable});return e};var It=e=>Pt(He({},"__esModule",{value:!0}),e);var zt={};_t(zt,{AIAutocomplete:()=>ut,AIAutocompleteDropdown:()=>Re,buildSubmitResult:()=>ze.buildSubmitResult,useAIAutocomplete:()=>Te,withSkippedParams:()=>ze.withSkippedParams});module.exports=It(zt);var ze=require("@magicx-eng/ai-autocomplete-vanilla");var k=require("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
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
display: inline-block;
|
|
58
58
|
padding: 4px 6px;
|
|
59
59
|
border-radius: 999px;
|
|
60
|
-
background: var(--aia-completed-pill-bg, rgba(189, 189, 189, 0.
|
|
60
|
+
background: var(--aia-completed-pill-bg, rgba(189, 189, 189, 0.105));
|
|
61
61
|
color: var(--aia-completed-pill-color, var(--aia-written-text-color, #fff));
|
|
62
62
|
font-size: var(--aia-pill-font-size, 14px);
|
|
63
63
|
font-weight: 400;
|
|
@@ -158,7 +158,7 @@
|
|
|
158
158
|
opacity: 0;
|
|
159
159
|
}
|
|
160
160
|
}
|
|
161
|
-
`,document.head.appendChild(e)}var
|
|
161
|
+
`,document.head.appendChild(e)}var ce={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"};var be=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-0ae03977")){let e=document.createElement("style");e.id="ac-style-0ae03977",e.textContent=`/*
|
|
162
162
|
* Built-in appearance defaults \u2014 zero specificity via :where().
|
|
163
163
|
* Consumer CSS always wins without !important.
|
|
164
164
|
*
|
|
@@ -202,7 +202,15 @@
|
|
|
202
202
|
--aia-primitive-neutral-750-a35: rgba(189, 189, 189, 0.35);
|
|
203
203
|
--aia-primitive-neutral-750-a30: rgba(189, 189, 189, 0.3);
|
|
204
204
|
--aia-primitive-neutral-750-a15: rgba(189, 189, 189, 0.15);
|
|
205
|
+
/* a105 is a15 lightened 30% (0.15 -> 0.105) \u2014 a fainter tint of the same
|
|
206
|
+
gray, not a new color. Light mode only: over a WHITE surface a weaker
|
|
207
|
+
tint is lighter, but over the dark theme's black surface it would be
|
|
208
|
+
darker, so dark mode keeps a15. */
|
|
209
|
+
--aia-primitive-neutral-750-a105: rgba(189, 189, 189, 0.105);
|
|
205
210
|
--aia-primitive-neutral-700-a40: rgba(176, 176, 176, 0.4);
|
|
211
|
+
/* Exactly 0.5, unlike the older 750-a50 above (0.51). */
|
|
212
|
+
--aia-primitive-neutral-900-a50: rgba(231, 231, 231, 0.5);
|
|
213
|
+
--aia-primitive-neutral-400-a50: rgba(74, 74, 74, 0.5);
|
|
206
214
|
}
|
|
207
215
|
|
|
208
216
|
/* Light mode defaults (base) \u2014 public --aia-* vars resolve to primitives */
|
|
@@ -214,10 +222,11 @@
|
|
|
214
222
|
--aia-shadow:
|
|
215
223
|
inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(16, 24, 40, 0.1),
|
|
216
224
|
0 8px 24px rgba(16, 24, 40, 0.16);
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
--aia-dropdown-
|
|
225
|
+
/* Half-strength stroke: neutral-900 (was #e5e7eb \u2014 snapped to palette,
|
|
226
|
+
\u03942) at 50% alpha over the surface, so the hairline lands exactly
|
|
227
|
+
halfway between its old value and the white behind it. */
|
|
228
|
+
--aia-dropdown-border: var(--aia-primitive-neutral-900-a50);
|
|
229
|
+
--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, 0.05);
|
|
221
230
|
/* Suggestion pills (Figma "ParamPill"): transparent fill + dashed border;
|
|
222
231
|
per-pill opacity via getPillOpacity. */
|
|
223
232
|
--aia-pill-bg: var(--aia-primitive-neutral-750);
|
|
@@ -229,7 +238,7 @@
|
|
|
229
238
|
primary-color regular-weight text. -active is the hover / tapped (re-edit)
|
|
230
239
|
highlight \u2014 an alpha over the input background, so one value works in both
|
|
231
240
|
themes. */
|
|
232
|
-
--aia-completed-pill-bg: var(--aia-primitive-neutral-750-
|
|
241
|
+
--aia-completed-pill-bg: var(--aia-primitive-neutral-750-a105);
|
|
233
242
|
--aia-completed-pill-bg-active: var(--aia-primitive-neutral-750-a35);
|
|
234
243
|
--aia-completed-pill-color: var(--aia-primitive-neutral-0);
|
|
235
244
|
|
|
@@ -268,10 +277,10 @@
|
|
|
268
277
|
--aia-shadow:
|
|
269
278
|
inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.4),
|
|
270
279
|
0 8px 24px rgba(0, 0, 0, 0.5);
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, 0.
|
|
280
|
+
/* Half-strength stroke \u2014 neutral-400 (was #484848 \u2014 snapped to palette,
|
|
281
|
+
\u03942) at 50% alpha; see the light-mode note above. */
|
|
282
|
+
--aia-dropdown-border: var(--aia-primitive-neutral-400-a50);
|
|
283
|
+
--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, 0.05);
|
|
275
284
|
/* Suggestion pills (Figma "ParamPill"): transparent fill + dashed border. */
|
|
276
285
|
--aia-pill-bg: var(--aia-primitive-neutral-750);
|
|
277
286
|
--aia-pill-color: var(--aia-primitive-neutral-700);
|
|
@@ -279,7 +288,11 @@
|
|
|
279
288
|
--aia-pill-font-size: 14px;
|
|
280
289
|
|
|
281
290
|
/* Completed params (Figma "RichTextPill") \u2014 dark theme (design source):
|
|
282
|
-
white text on a faint-gray chip. -active is the hover / tapped highlight.
|
|
291
|
+
white text on a faint-gray chip. -active is the hover / tapped highlight.
|
|
292
|
+
Deliberately still a15 while light mode moved to a105: the fill is a light
|
|
293
|
+
gray tinting the surface, so thinning it lightens over white but DARKENS
|
|
294
|
+
over this theme's black. Lightening the dark chip means a stronger tint,
|
|
295
|
+
which is a design call, not a mechanical one \u2014 left for design to make. */
|
|
283
296
|
--aia-completed-pill-bg: var(--aia-primitive-neutral-750-a15);
|
|
284
297
|
--aia-completed-pill-bg-active: var(--aia-primitive-neutral-750-a35);
|
|
285
298
|
--aia-completed-pill-color: var(--aia-primitive-neutral-1000);
|
|
@@ -400,6 +413,27 @@
|
|
|
400
413
|
margin-bottom: var(--aia-dropdown-offset, 13px);
|
|
401
414
|
}
|
|
402
415
|
|
|
416
|
+
/* Declared after the optionsPosition="above" block on purpose: that rule's
|
|
417
|
+
second selector ([data-aia-dropdown][data-options-position="above"]) has the
|
|
418
|
+
same two-attribute specificity as this one, so source order is what decides
|
|
419
|
+
which wins when a strip is present in an above-positioned dropdown. */
|
|
420
|
+
/* Product strip present: the footer no longer sits on the scrolling option
|
|
421
|
+
list \u2014 the strip is between them \u2014 so there is nothing to ride up over and
|
|
422
|
+
nothing to reserve. Zeroing the band HERE, where it is defined, is the fix:
|
|
423
|
+
the pull is a property of "footer directly over the list", not of the grid,
|
|
424
|
+
and any section rendered after the grid would otherwise inherit it and land
|
|
425
|
+
on top of the last option row. Both edges are zeroed because
|
|
426
|
+
optionsPosition="above" flips which one is in play. */
|
|
427
|
+
[data-aia-dropdown][data-aia-has-products] {
|
|
428
|
+
--aia-grid-scroll-bottom: 0px;
|
|
429
|
+
--aia-grid-overlap-bottom: 0px;
|
|
430
|
+
--aia-grid-scroll-top: 0px;
|
|
431
|
+
--aia-grid-overlap-top: 0px;
|
|
432
|
+
/* The fade exists to dissolve rows sliding under the footer. With the strip
|
|
433
|
+
in between it has nothing to dissolve and would just wash over the cards. */
|
|
434
|
+
--aia-footer-fade-lead: 0px;
|
|
435
|
+
}
|
|
436
|
+
|
|
403
437
|
:where(.magicx-aia[data-options-position="above"]) [data-aia-dropdown] .aia-stack,
|
|
404
438
|
[data-aia-dropdown][data-options-position="above"] .aia-stack {
|
|
405
439
|
flex-direction: column-reverse;
|
|
@@ -446,9 +480,9 @@
|
|
|
446
480
|
/* Solid surface is the default (matches the Figma components). Opt into the
|
|
447
481
|
frosted-glass look with data-aia-surface="glass". */
|
|
448
482
|
background: var(--aia-surface, #ffffff);
|
|
449
|
-
border: 1px solid var(--aia-dropdown-border,
|
|
483
|
+
border: 1px solid var(--aia-dropdown-border, rgba(231, 231, 231, 0.5));
|
|
450
484
|
border-radius: 18px;
|
|
451
|
-
box-shadow: var(--aia-dropdown-shadow, 0 8px 12px rgba(0, 0, 0, 0.
|
|
485
|
+
box-shadow: var(--aia-dropdown-shadow, 0 8px 12px rgba(0, 0, 0, 0.05));
|
|
452
486
|
}
|
|
453
487
|
|
|
454
488
|
.AIAutocompleteDropdown-module_dropdown_yz2KC[data-aia-surface="glass"] {
|
|
@@ -521,7 +555,7 @@
|
|
|
521
555
|
opacity: 0.25;
|
|
522
556
|
}
|
|
523
557
|
}
|
|
524
|
-
`,document.head.appendChild(e)}var
|
|
558
|
+
`,document.head.appendChild(e)}var ge={dropdown:"AIAutocompleteDropdown-module_dropdown_yz2KC",visible:"AIAutocompleteDropdown-module_visible_QCoXj",pillBar:"AIAutocompleteDropdown-module_pillBar_pwTXe",skeletonBars:"AIAutocompleteDropdown-module_skeletonBars_HVr9C",skeletonBar:"AIAutocompleteDropdown-module_skeletonBar_O3xIx",aiaSkeletonPulse:"AIAutocompleteDropdown-module_aiaSkeletonPulse_G8W7q"};var he=require("@magicx-eng/ai-autocomplete-vanilla"),Ae=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-5259a217")){let e=document.createElement("style");e.id="ac-style-5259a217",e.textContent=`@layer layout {
|
|
525
559
|
.aia-cluster {
|
|
526
560
|
display: flex;
|
|
527
561
|
flex-wrap: wrap;
|
|
@@ -563,7 +597,7 @@
|
|
|
563
597
|
justify-content: space-around;
|
|
564
598
|
}
|
|
565
599
|
}
|
|
566
|
-
`,document.head.appendChild(e)}var
|
|
600
|
+
`,document.head.appendChild(e)}var Oe=require("react/jsx-runtime");function we({gap:e,align:o="center",justify:i="start",noWrap:s=!1,inline:n=!1,className:l,children:r,...u}){let g=e?{"--aia-cluster-gap":e}:void 0,x={className:l?`aia-cluster ${l}`:"aia-cluster","data-align":o,"data-justify":i,"data-nowrap":s||void 0,"data-inline":n||void 0,style:g,...u};return n?(0,Oe.jsx)("span",{...x,children:r}):(0,Oe.jsx)("div",{...x,children:r})}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
|
|
567
601
|
dropdown's rounded edges. The top inset (--aia-footer-gap) adds breathing
|
|
568
602
|
room above the hint/branding row so the footer doesn't butt against the last
|
|
569
603
|
option row \u2014 additive to the dropdown's 8px section gap. */
|
|
@@ -682,7 +716,7 @@
|
|
|
682
716
|
justify-content: flex-end;
|
|
683
717
|
}
|
|
684
718
|
}
|
|
685
|
-
`,document.head.appendChild(e)}var
|
|
719
|
+
`,document.head.appendChild(e)}var ae={footer:"DropdownFooter-module_footer_qQQ7x",hintGroup:"DropdownFooter-module_hintGroup_ZzbPf",brandLink:"DropdownFooter-module_brandLink_r4f3R",key:"DropdownFooter-module_key_Bz1H-",hint:"DropdownFooter-module_hint_GKEOH",brand:"DropdownFooter-module_brand_Al-lR",badge:"DropdownFooter-module_badge_Fk9vg",row:"DropdownFooter-module_row_BgZ6Q"};var q=require("react/jsx-runtime");function Xe({isOptionHighlighted:e=!1,isInputEmpty:o=!1}){let{key:i,hint:s}=(0,he.getFooterHint)(e,o),[n,l]=(0,Ae.useState)(he.ATTRIBUTION_URL);return(0,Ae.useEffect)(()=>{l((0,he.buildAttributionUrl)())},[]),(0,q.jsx)("footer",{className:ae.footer,"data-aia-footer":"",children:(0,q.jsxs)(we,{justify:"between",noWrap:!0,className:ae.row,children:[(0,q.jsxs)(we,{gap:"5px",className:ae.hintGroup,children:[(0,q.jsx)("kbd",{className:ae.key,children:i}),(0,q.jsx)("span",{className:ae.hint,children:s})]}),(0,q.jsxs)("a",{className:ae.brandLink,href:n,target:"_blank",rel:"noopener noreferrer",children:[(0,q.jsx)("span",{className:ae.brand,children:"AI"}),(0,q.jsx)("span",{className:ae.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
|
|
686
720
|
with a dashed border. ~28px via 6px padding + 14px text + the 1px border
|
|
687
721
|
(border-box). */
|
|
688
722
|
.ParamPill-module_pill_6Ga7S {
|
|
@@ -734,7 +768,7 @@
|
|
|
734
768
|
opacity: 0;
|
|
735
769
|
}
|
|
736
770
|
}
|
|
737
|
-
`,document.head.appendChild(e)}var
|
|
771
|
+
`,document.head.appendChild(e)}var le={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"};var Ze=require("react/jsx-runtime"),Ke={selected:1,first:.7,next:.4,last:.2};function Je({label:e,state:o,rounded:i,loading:s,onClick:n}){let l=[le.pill,i?le.rounded:"",s?le.skeleton:""].filter(Boolean).join(" ");return(0,Ze.jsx)("button",{type:"button","data-aia-pill":"","data-aia-loading":s?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:l,style:{opacity:Ke[o]},onMouseDown:r=>r.preventDefault(),onClick:s?void 0:n,disabled:s,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 {
|
|
738
772
|
position: relative;
|
|
739
773
|
z-index: 1;
|
|
740
774
|
pointer-events: auto;
|
|
@@ -744,7 +778,174 @@
|
|
|
744
778
|
align-items: center;
|
|
745
779
|
vertical-align: middle;
|
|
746
780
|
}
|
|
747
|
-
`,document.head.appendChild(e)}var
|
|
781
|
+
`,document.head.appendChild(e)}var Ge={list:"PillList-module_list_qvLqO"};var ye=require("react/jsx-runtime"),St=[125,69];function Ye(e){return e===0?"first":e===1?"next":"last"}function Ce({pills:e,activePillIndex:o,onSelectPill:i,activeSelected:s,rounded:n,loading:l}){return l&&e.length===0?(0,ye.jsx)("span",{className:Ge.list,"data-aia-pill-list-loading":"",children:St.map((r,u)=>(0,ye.jsx)("span",{"data-aia-pill-skeleton":"",className:`${le.pill} ${n?le.rounded:""} ${le.skeleton}`,style:{width:r,opacity:Ke[Ye(u)]}},`skel-${r}`))}):(0,ye.jsx)("span",{className:Ge.list,"data-aia-pill-list-loading":l?"":void 0,children:e.map((r,u)=>{let g=!!s&&u===o;return(0,ye.jsx)(Je,{label:r.text,state:g?"selected":Ye(u),selected:g,rounded:n,loading:l,onClick:()=>i(u)},`${r.type}-${r.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
|
|
782
|
+
(packages/vanilla/src/styles.css). Same tokens, same defaults, so a consumer
|
|
783
|
+
theming one package sees the same result in the other.
|
|
784
|
+
|
|
785
|
+
Nothing here is allowed to say \`color: inherit\`: the dropdown paints a
|
|
786
|
+
background but never sets a \`color\`, so an inheriting node would pick up the
|
|
787
|
+
HOST PAGE's text colour and render black text on a dark panel. For the same
|
|
788
|
+
reason there is no \`prefers-color-scheme\` rule in this file \u2014 the panel's
|
|
789
|
+
darkness comes from --aia-surface, which is independent of the OS setting. */
|
|
790
|
+
|
|
791
|
+
.ProductStrip-module_section_Hugfg {
|
|
792
|
+
display: flex;
|
|
793
|
+
flex-direction: column;
|
|
794
|
+
gap: 6px;
|
|
795
|
+
/* Matches the grid's own 8px inline padding so the section label lines up
|
|
796
|
+
with the option text above it. */
|
|
797
|
+
padding: 0 8px;
|
|
798
|
+
min-width: 0;
|
|
799
|
+
}
|
|
800
|
+
|
|
801
|
+
.ProductStrip-module_label_nuc93 {
|
|
802
|
+
font-family: inherit;
|
|
803
|
+
font-size: var(--aia-products-label-font-size, 11px);
|
|
804
|
+
font-weight: 500;
|
|
805
|
+
line-height: 18px;
|
|
806
|
+
letter-spacing: 0.02em;
|
|
807
|
+
color: var(
|
|
808
|
+
--aia-products-label-color,
|
|
809
|
+
var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb))
|
|
810
|
+
);
|
|
811
|
+
}
|
|
812
|
+
|
|
813
|
+
/* The scroll container. Horizontal overflow is confined here \u2014 the dropdown
|
|
814
|
+
itself is \`overflow: hidden\`, so the page can never gain a sideways
|
|
815
|
+
scrollbar no matter how many cards there are. \`overscroll-behavior-x\` stops
|
|
816
|
+
a trackpad fling at either end from chaining out to the page. */
|
|
817
|
+
.ProductStrip-module_row_WDVBX {
|
|
818
|
+
display: flex;
|
|
819
|
+
gap: var(--aia-product-gap, 8px);
|
|
820
|
+
min-width: 0;
|
|
821
|
+
overflow-x: auto;
|
|
822
|
+
overflow-y: hidden;
|
|
823
|
+
overscroll-behavior-x: contain;
|
|
824
|
+
padding-bottom: 2px;
|
|
825
|
+
/* Hide the scrollbar chrome across all three engines while leaving the box
|
|
826
|
+
scrollable by trackpad, wheel, touch and keyboard. */
|
|
827
|
+
scrollbar-width: none;
|
|
828
|
+
-ms-overflow-style: none;
|
|
829
|
+
}
|
|
830
|
+
|
|
831
|
+
.ProductStrip-module_row_WDVBX::-webkit-scrollbar {
|
|
832
|
+
display: none;
|
|
833
|
+
}
|
|
834
|
+
|
|
835
|
+
.ProductStrip-module_card_JBGYT {
|
|
836
|
+
flex: 0 0 auto;
|
|
837
|
+
display: flex;
|
|
838
|
+
flex-direction: column;
|
|
839
|
+
gap: 6px;
|
|
840
|
+
width: var(--aia-product-card-width, 116px);
|
|
841
|
+
padding: 6px;
|
|
842
|
+
border-radius: 10px;
|
|
843
|
+
background: var(--aia-product-bg, transparent);
|
|
844
|
+
/* Explicit, never inherited \u2014 see the file header. */
|
|
845
|
+
color: var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));
|
|
846
|
+
text-decoration: none;
|
|
847
|
+
cursor: pointer;
|
|
848
|
+
transition: background-color 150ms ease;
|
|
849
|
+
}
|
|
850
|
+
|
|
851
|
+
.ProductStrip-module_card_JBGYT:hover {
|
|
852
|
+
background: var(--aia-product-bg-active, var(--aia-option-bg, transparent));
|
|
853
|
+
}
|
|
854
|
+
|
|
855
|
+
/* Focus is the only cue a keyboard user gets, so it is a real ring rather than
|
|
856
|
+
a background change. Drawn INSIDE the card (negative offset): the row is a
|
|
857
|
+
scroll container with clipped overflow, so an outset ring is cut off on the
|
|
858
|
+
first and last cards and on every card's top and bottom edge. */
|
|
859
|
+
.ProductStrip-module_card_JBGYT:focus-visible {
|
|
860
|
+
outline: 2px solid var(--aia-product-focus-ring, var(--aia-option-color-selected, currentColor));
|
|
861
|
+
outline-offset: -2px;
|
|
862
|
+
}
|
|
863
|
+
|
|
864
|
+
/* Square media tile. aspect-ratio (not a fixed height) keeps it square at any
|
|
865
|
+
--aia-product-card-width a consumer sets. */
|
|
866
|
+
.ProductStrip-module_media_RrbGe {
|
|
867
|
+
display: block;
|
|
868
|
+
position: relative;
|
|
869
|
+
width: 100%;
|
|
870
|
+
aspect-ratio: 1 / 1;
|
|
871
|
+
border-radius: 8px;
|
|
872
|
+
overflow: hidden;
|
|
873
|
+
background: var(--aia-product-media-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, 0.25)));
|
|
874
|
+
}
|
|
875
|
+
|
|
876
|
+
.ProductStrip-module_image_5pNL7 {
|
|
877
|
+
display: block;
|
|
878
|
+
width: 100%;
|
|
879
|
+
height: 100%;
|
|
880
|
+
object-fit: cover;
|
|
881
|
+
}
|
|
882
|
+
|
|
883
|
+
/* Placeholder tile for a product with no image \u2014 a faint glyph on the same
|
|
884
|
+
media fill, so a card without art reads as "no photo" instead of broken. */
|
|
885
|
+
.ProductStrip-module_media_RrbGe[data-aia-product-placeholder]::after {
|
|
886
|
+
content: "";
|
|
887
|
+
position: absolute;
|
|
888
|
+
inset: 30%;
|
|
889
|
+
border-radius: 3px;
|
|
890
|
+
border: 1.5px solid var(--aia-product-placeholder-color, var(--aia-option-color, #c1c4cb));
|
|
891
|
+
opacity: 0.35;
|
|
892
|
+
}
|
|
893
|
+
|
|
894
|
+
/* The text column. Only the title is guaranteed; vendor and price render no
|
|
895
|
+
element at all when absent, so the gap can't reserve space for a missing
|
|
896
|
+
line. */
|
|
897
|
+
.ProductStrip-module_body_ly032 {
|
|
898
|
+
display: flex;
|
|
899
|
+
flex-direction: column;
|
|
900
|
+
gap: 2px;
|
|
901
|
+
min-width: 0;
|
|
902
|
+
}
|
|
903
|
+
|
|
904
|
+
.ProductStrip-module_vendor_Gvu7G {
|
|
905
|
+
font-family: inherit;
|
|
906
|
+
font-size: var(--aia-product-vendor-font-size, 10px);
|
|
907
|
+
line-height: 14px;
|
|
908
|
+
color: var(
|
|
909
|
+
--aia-product-vendor-color,
|
|
910
|
+
var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb))
|
|
911
|
+
);
|
|
912
|
+
opacity: 0.8;
|
|
913
|
+
/* Vendor names are frequently long \u2014 one line, clipped. */
|
|
914
|
+
overflow: hidden;
|
|
915
|
+
white-space: nowrap;
|
|
916
|
+
text-overflow: ellipsis;
|
|
917
|
+
}
|
|
918
|
+
|
|
919
|
+
.ProductStrip-module_title_gCNmq {
|
|
920
|
+
font-family: inherit;
|
|
921
|
+
font-size: var(--aia-product-title-font-size, 12px);
|
|
922
|
+
font-weight: 400;
|
|
923
|
+
line-height: 16px;
|
|
924
|
+
/* The card's most prominent text uses the same token the *highlighted*
|
|
925
|
+
option text does, so it stays legible on any --aia-surface a consumer
|
|
926
|
+
sets \u2014 light or dark \u2014 without a second theming control. */
|
|
927
|
+
color: var(
|
|
928
|
+
--aia-product-title-color,
|
|
929
|
+
var(--aia-option-color-selected, var(--aia-color-text-default, #fff))
|
|
930
|
+
);
|
|
931
|
+
display: -webkit-box;
|
|
932
|
+
-webkit-line-clamp: 2;
|
|
933
|
+
line-clamp: 2;
|
|
934
|
+
-webkit-box-orient: vertical;
|
|
935
|
+
overflow: hidden;
|
|
936
|
+
}
|
|
937
|
+
|
|
938
|
+
.ProductStrip-module_price_gULcE {
|
|
939
|
+
font-family: inherit;
|
|
940
|
+
font-size: var(--aia-product-price-font-size, 11px);
|
|
941
|
+
font-weight: 500;
|
|
942
|
+
line-height: 15px;
|
|
943
|
+
color: var(
|
|
944
|
+
--aia-product-price-color,
|
|
945
|
+
var(--aia-option-color-selected, var(--aia-color-text-default, #fff))
|
|
946
|
+
);
|
|
947
|
+
}
|
|
948
|
+
`,document.head.appendChild(e)}var K={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"};var z=require("react/jsx-runtime");function et({products:e,listboxId:o,onSelect:i,onFocusChange:s,focusable:n=!0}){if(e.length===0)return null;let l=`${o}-products-label`;return(0,z.jsxs)("section",{className:K.section,"data-aia-products":"",role:"group","aria-labelledby":l,children:[(0,z.jsx)("div",{className:K.label,id:l,children:"Products"}),(0,z.jsx)("div",{className:K.row,"data-aia-products-row":"",children:e.map((r,u)=>(0,z.jsx)(At,{product:r,id:`${o}-product-${u}`,onSelect:i,onFocusChange:s,focusable:n},r.id))})]})}function At({product:e,id:o,onSelect:i,onFocusChange:s,focusable:n}){let l=r=>{r.metaKey||r.ctrlKey||r.shiftKey||r.altKey||r.button!==0||(r.preventDefault(),i(e))};return(0,z.jsxs)("a",{id:o,className:K.card,"data-aia-product":"",role:"option","aria-selected":!1,href:e.url,tabIndex:n?0:-1,onClick:l,onKeyDown:r=>{r.key!=="Enter"&&r.key!==" "||(r.preventDefault(),i(e))},onFocus:()=>s?.(!0),onBlur:r=>{r.relatedTarget?.closest("[data-aia-dropdown]")||s?.(!1)},children:[(0,z.jsx)("span",{className:K.media,"data-aia-product-placeholder":e.imageUrl?void 0:"",children:e.imageUrl?(0,z.jsx)("img",{className:K.image,src:e.imageUrl,alt:"",loading:"lazy",decoding:"async"}):null}),(0,z.jsxs)("span",{className:K.body,children:[e.vendor?(0,z.jsx)("span",{className:K.vendor,children:e.vendor}):null,(0,z.jsx)("span",{className:K.title,children:e.title}),e.price?(0,z.jsx)("span",{className:K.price,children:e.price}):null]})]})}var Ee=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-948e58da")){let e=document.createElement("style");e.id="ac-style-948e58da",e.textContent=`@layer layout {
|
|
748
949
|
.aia-grid {
|
|
749
950
|
display: grid;
|
|
750
951
|
grid-template-columns: repeat(
|
|
@@ -779,7 +980,7 @@
|
|
|
779
980
|
border-radius: 3px;
|
|
780
981
|
}
|
|
781
982
|
}
|
|
782
|
-
`,document.head.appendChild(e)}var
|
|
983
|
+
`,document.head.appendChild(e)}var at=require("react/jsx-runtime");function tt({min:e="16rem",max:o,gap:i,scroll:s=!1,maxHeight:n,scrollResetKey:l,className:r,children:u,...g}){let x=(0,Ee.useRef)(null);(0,Ee.useLayoutEffect)(()=>{if(l===void 0)return;let P=x.current;P&&(P.scrollTop=0)},[l]);let I={"--aia-grid-min":e};return o&&(I["--aia-grid-max"]=o),i&&(I["--aia-grid-gap"]=i),n&&(I["--aia-grid-max-height"]=n),(0,at.jsx)("div",{ref:x,className:r?`aia-grid ${r}`:"aia-grid","data-scroll":s||void 0,style:I,...g,children:u})}var fe=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-82820da7")){let e=document.createElement("style");e.id="ac-style-82820da7",e.textContent=`.SuggestionItem-module_item_d4vpD {
|
|
783
984
|
position: relative;
|
|
784
985
|
overflow: visible;
|
|
785
986
|
display: flex;
|
|
@@ -1129,7 +1330,7 @@
|
|
|
1129
1330
|
filter: brightness(0.55);
|
|
1130
1331
|
}
|
|
1131
1332
|
}
|
|
1132
|
-
`,document.head.appendChild(e)}var
|
|
1333
|
+
`,document.head.appendChild(e)}var G={item:"SuggestionItem-module_item_d4vpD",fadeIn:"SuggestionItem-module_fadeIn_I8u35",content:"SuggestionItem-module_content_T-Qba",tappable:"SuggestionItem-module_tappable_70KcX",nonTappable:"SuggestionItem-module_nonTappable_xSZM-",highlighted:"SuggestionItem-module_highlighted_Hb0SU",tag:"SuggestionItem-module_tag_e3Fwe",pressed:"SuggestionItem-module_pressed_98o-r",glassFade:"SuggestionItem-module_glassFade_oyiSj",tapDown:"SuggestionItem-module_tapDown_G3WGz",streaks:"SuggestionItem-module_streaks_d9PEB",streaksVert:"SuggestionItem-module_streaksVert_ERlV1",streakHorizRight:"SuggestionItem-module_streakHorizRight_aboGz",streakHorizLeft:"SuggestionItem-module_streakHorizLeft_BreWJ",streakVertUp:"SuggestionItem-module_streakVertUp_to1GD",streakVertDown:"SuggestionItem-module_streakVertDown_OrcLh",skeletonPulse:"SuggestionItem-module_skeletonPulse_plvdD",text:"SuggestionItem-module_text_yqoh9"};var de=require("react/jsx-runtime");function ot({option:e,isHighlighted:o,onSelect:i,onHighlight:s,id:n,loading:l}){let[r,u]=(0,fe.useState)(!1),g=(0,fe.useRef)(void 0);(0,fe.useEffect)(()=>()=>clearTimeout(g.current),[]);let x=()=>{l||!e.is_tappable||r||(u(!0),i(e),clearTimeout(g.current),g.current=setTimeout(()=>u(!1),500))},I=[G.item,o&&!l?G.highlighted:"",e.is_tappable?G.tappable:G.nonTappable,r?G.pressed:""].filter(Boolean).join(" ");return(0,de.jsxs)("div",{id:n,role:"option","data-aia-option":"","data-aia-loading":l?"":void 0,"aria-selected":o,className:I,tabIndex:l||!e.is_tappable?-1:0,onClick:x,onKeyDown:P=>{!l&&e.is_tappable&&(P.key==="Enter"||P.key===" ")&&(P.preventDefault(),x())},onMouseEnter:!l&&e.is_tappable?s:void 0,children:[(0,de.jsx)("div",{className:G.streaks}),(0,de.jsx)("div",{className:G.streaksVert}),(0,de.jsxs)("span",{className:G.content,children:[(0,de.jsx)("span",{className:G.text,children:e.icon?`${e.icon} ${e.text}`:e.text}),e.tag&&(0,de.jsx)("span",{className:G.tag,children:e.tag})]})]})}var We=require("react/jsx-runtime");function it({options:e,activeIndex:o,onSelect:i,onHighlight:s,listboxId:n,loading:l,groupKey:r}){return(0,We.jsx)(tt,{min:"250px",max:"1fr",gap:"0",scroll:!0,scrollResetKey:r,children:e.map((u,g)=>(0,We.jsx)(ot,{option:u,isHighlighted:g===o,onSelect:i,onHighlight:()=>s(g),id:`${n}-option-${g}`,loading:l},u.text))})}if(typeof document<"u"&&!document.getElementById("ac-style-8414cd5f")){let e=document.createElement("style");e.id="ac-style-8414cd5f",e.textContent=`@layer layout {
|
|
1133
1334
|
.aia-stack {
|
|
1134
1335
|
display: flex;
|
|
1135
1336
|
flex-direction: column;
|
|
@@ -1146,7 +1347,7 @@
|
|
|
1146
1347
|
}
|
|
1147
1348
|
/* data-align="stretch" is the flex default \u2014 no rule needed. */
|
|
1148
1349
|
}
|
|
1149
|
-
`,document.head.appendChild(e)}var
|
|
1350
|
+
`,document.head.appendChild(e)}var nt=require("react/jsx-runtime");function rt({space:e,align:o="stretch",className:i,children:s,...n}){let l=e?{"--aia-stack-space":e}:void 0;return(0,nt.jsx)("div",{className:i?`aia-stack ${i}`:"aia-stack","data-align":o,style:l,...n,children:s})}var W=require("react/jsx-runtime"),Ct=[159,119,164],Et=()=>{};function Rt(e){let o=()=>typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches,[i,s]=(0,be.useState)(o);if((0,be.useEffect)(()=>{if(e!=="auto"||typeof window>"u"||typeof window.matchMedia!="function")return;let n=window.matchMedia("(prefers-color-scheme: dark)"),l=()=>s(n.matches);return n.addEventListener("change",l),()=>n.removeEventListener("change",l)},[e]),e!==void 0)return e==="auto"?i?"dark":"light":e}function Re({suggestions:e,activeIndex:o,onSelect:i,onHighlight:s,isOpen:n,id:l,className:r,pills:u,onPillClick:g,showPills:x=!0,activeSelected:I=!1,isLoading:P=!1,isInputEmpty:R=!1,products:S,onProductSelect:Q,onProductFocusChange:X,optionsPosition:oe="below",mode:J}){let D=Rt(J),w=D!==void 0,p=e[0]?.options??[],ie=!!(u&&u.length>0&&g),Z=!!(S&&S.length>0),B=n&&(p.length>0||x&&ie||P||Z),T={suggestions:e,activeIndex:o,pills:u,showPills:x,activeSelected:I,isLoading:P,isInputEmpty:R,products:S},C=(0,be.useRef)(T);B&&(C.current=T);let f=B?T:C.current,N=f.suggestions[0],H=N?.options??[],L=f.activeIndex>=0&&!!H[f.activeIndex]?.is_tappable,V=!!(f.pills&&f.pills.length>0&&g),Y=f.showPills&&V,ee=f.showPills&&!V&&f.isLoading,$=Y||ee,O=H.length>0,re=f.isLoading&&!O,M=f.products??[];return(0,W.jsx)("div",{id:l,role:"listbox","data-aia-dropdown":"","data-options-position":oe,"data-mode":D,"data-aia-loading":f.isLoading?"":void 0,"data-aia-has-products":M.length>0?"":void 0,className:`${w?"magicx-aia ":""}${ge.dropdown} ${B?ge.visible:""} ${r??""}`,onMouseDown:t=>t.preventDefault(),children:(0,W.jsxs)(rt,{space:"8px",children:[$&&(0,W.jsx)(we,{noWrap:!0,className:ge.pillBar,"data-aia-pillbar":"",children:(0,W.jsx)(Ce,{pills:f.pills??[],activePillIndex:0,activeSelected:f.activeSelected,onSelectPill:g??(()=>{}),rounded:!0,loading:f.isLoading})}),O&&(0,W.jsx)(it,{options:H,activeIndex:f.activeIndex,onSelect:i,onHighlight:s,listboxId:l,loading:f.isLoading,groupKey:N?`${N.type} ${N.text}`:""}),re&&(0,W.jsx)("div",{className:ge.skeletonBars,"data-aia-skeleton-bars":"",children:Ct.map(t=>(0,W.jsx)("span",{className:ge.skeletonBar,style:{width:t}},`bar-${t}`))}),(0,W.jsx)(et,{products:M,listboxId:l,onSelect:Q??Et,onFocusChange:X,focusable:B}),(0,W.jsx)(Xe,{isOptionHighlighted:L,isInputEmpty:f.isInputEmpty})]})})}var ve=require("@magicx-eng/ai-autocomplete-vanilla");if(typeof document<"u"&&!document.getElementById("ac-style-fdee06e6")){let e=document.createElement("style");e.id="ac-style-fdee06e6",e.textContent=`.SubmitButton-module_submitButton_otz7H {
|
|
1150
1351
|
flex-shrink: 0;
|
|
1151
1352
|
width: 32px;
|
|
1152
1353
|
height: 32px;
|
|
@@ -1181,5 +1382,5 @@
|
|
|
1181
1382
|
);
|
|
1182
1383
|
cursor: default;
|
|
1183
1384
|
}
|
|
1184
|
-
`,document.head.appendChild(e)}var Ye={submitButton:"SubmitButton-module_submitButton_otz7H"};var Se=require("react/jsx-runtime");function et({disabled:e,onClick:t}){return(0,Se.jsx)("button",{type:"button","data-aia-submit":"",className:Ye.submitButton,disabled:e,onClick:a=>{a.stopPropagation(),t()},"aria-label":"Submit",children:(0,Se.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,Se.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var tt=require("@magicx-eng/ai-autocomplete-vanilla"),y=require("react"),kt={text:"",completedParams:[],identifiedParams:[],skippedParams:[],pendingSpan:null,suggestions:[],activeDropdownIndex:-1,newParamId:null,isLoading:!0,isReady:!1,error:null,segments:[],actionableSuggestions:[],filteredOptions:[],placeholderText:"",isDropdownOpen:!1,isActivePillSelected:!1,filterBase:0,filterInProgress:!1,pillTapped:!1,skipNextFetch:!1,lastRawQuery:"",isFocused:!1,editingParam:null,editingAnchor:null,editingTail:null,caretOffset:null,inSelectionAnimation:!1};function Ae({onSubmit:e,onError:t,optionOverrides:a,maskCompletedText:r,apiConfig:i,columns:s=2,dropdownTrigger:u,optionsPosition:m,closeDropdownOnBlur:h,showNonTappableOptions:x,onFocus:S,onBlur:P,value:D,completedParams:T,onChange:q,onParamsChange:W,source:ee,setCursor:Q}){let l=(0,y.useRef)(null),[w,F]=(0,y.useState)(null),G=(0,y.useRef)(e);G.current=e;let v=(0,y.useRef)(t);v.current=t;let B=(0,y.useRef)(q);B.current=q;let M=(0,y.useRef)(W);M.current=W;let E=(0,y.useRef)(S);E.current=S;let U=(0,y.useRef)(P);U.current=P;let L=(0,y.useRef)(Q);L.current=Q,(0,y.useEffect)(()=>{if(typeof document>"u")return;let n=new tt.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:i,optionOverrides:a,maskCompletedText:r,columns:s,dropdownTrigger:u,optionsPosition:m,closeDropdownOnBlur:h,showNonTappableOptions:x,source:ee,value:D,completedParams:T,onSubmit:(...A)=>G.current?.(...A),onError:(...A)=>v.current?.(...A),onChange:(...A)=>B.current?.(...A),onParamsChange:(...A)=>M.current?.(...A),onFocus:()=>E.current?.(),onBlur:()=>U.current?.(),setCursor:A=>L.current?.(A)});l.current=n,F(n.getState());let C=n.subscribe(A=>F(A));return()=>{C(),n.destroy(),l.current===n&&(l.current=null)}},[]),(0,y.useEffect)(()=>{D!==void 0&&l.current?.setValue(D)},[D]),(0,y.useEffect)(()=>{T!==void 0&&l.current?.setCompletedParams(T)},[T]);let te=JSON.stringify(i??null),Z=(0,y.useRef)(a),H=(0,y.useRef)(0);if(a!==Z.current){let n=Z.current,C=a,A=Object.keys(n??{}),se=Object.keys(C??{});(A.length!==se.length||se.some(ge=>!n?.[ge]||C[ge]!==n[ge]))&&H.current++,Z.current=a}(0,y.useEffect)(()=>{l.current?.update({apiConfig:i,optionOverrides:a,dropdownTrigger:u,optionsPosition:m,closeDropdownOnBlur:h,showNonTappableOptions:x})},[te,H.current,u,m,h,x]);let j=(0,y.useRef)(null);j.current===null&&(j.current={handleTextChange:n=>l.current?.handleTextChange(n),handleKeyDown:n=>{let C="nativeEvent"in n?n.nativeEvent:n;l.current?.handleKeyDown(C)},setFocused:n=>l.current?.setFocused(n),startEditingParam:n=>l.current?.startEditingParam(n),exitEditMode:()=>l.current?.exitEditMode(),handleCaretAfterInput:n=>l.current?.handleCaretAfterInput(n),handleCaretMove:n=>l.current?.handleCaretMove(n),replaceEditingRange:n=>l.current?.replaceEditingRange(n)??!1,setActivePill:n=>l.current?.setActivePill(n),removeLastParam:()=>l.current?.removeLastParam(),clearNewParamId:()=>l.current?.clearNewParamId(),reset:()=>l.current?.reset(),selectOption:n=>l.current?.selectOption(n),setActiveDropdownIndex:n=>l.current?.setActiveDropdownIndex(n),handleFocus:()=>l.current?.setFocused(!0),handleBlur:()=>l.current?.setFocused(!1)});let f=j.current,me=(0,y.useCallback)(n=>{let C=n.target.value,se=C.length>0&&!n.nativeEvent?.isComposing&&C[0]!==C[0].toUpperCase()?C[0].toUpperCase()+C.slice(1):C;l.current?.handleTextChange(se)},[]),ne=(0,y.useCallback)(n=>{l.current?.handleKeyDown(n.nativeEvent)},[]),X=l.current,d=w??kt,o=D!==void 0?D:d.text,p=T!==void 0?T:d.completedParams,c=d.actionableSuggestions,k=c[0],g=X?.listboxId??"",R=d.activeDropdownIndex>=0&&X?`${g}-option-${d.activeDropdownIndex}`:void 0,O=d.editingParam,J=O?{type:O.suggestionType,text:O.suggestionPlaceholder,required:!0,options:O.options}:null,be=J??k,Re=J?[J]:c,ve=!X||d.isLoading&&!d.editingParam&&!d.inSelectionAnimation;return{completedParams:p,skippedParams:d.skippedParams,suggestionPills:c,setActivePill:f.setActivePill,removeLastParam:f.removeLastParam,segments:d.segments,newParamId:d.newParamId,clearNewParamId:f.clearNewParamId,suggestions:d.suggestions,activeIndex:d.activeDropdownIndex,isReady:d.isReady,isLoading:ve,isFocused:d.isFocused,isDropdownOpen:d.isDropdownOpen,isActivePillSelected:d.isActivePillSelected,placeholderText:d.placeholderText,listboxId:g,error:d.error,handleTextChange:f.handleTextChange,handleKeyDown:f.handleKeyDown,setFocused:f.setFocused,editingParam:O,editingAnchor:d.editingAnchor,caretOffset:d.caretOffset,startEditingParam:f.startEditingParam,exitEditMode:f.exitEditMode,handleCaretAfterInput:f.handleCaretAfterInput,handleCaretMove:f.handleCaretMove,replaceEditingRange:f.replaceEditingRange,inputProps:{value:o,placeholder:d.placeholderText||void 0,onChange:me,onKeyDown:ne,onFocus:f.handleFocus,onBlur:f.handleBlur,role:"combobox","aria-expanded":d.isDropdownOpen,"aria-activedescendant":R,"aria-autocomplete":"list","aria-controls":g},reset:f.reset,dropdownProps:{suggestions:be?[{...be,options:d.filteredOptions}]:[],activeIndex:d.activeDropdownIndex,onSelect:f.selectOption,onHighlight:f.setActiveDropdownIndex,isOpen:d.isDropdownOpen,id:g,pills:Re,activeSelected:d.isActivePillSelected,onPillClick:f.setActivePill,isLoading:ve,isInputEmpty:o.trim().length===0,optionsPosition:m??"below"}}}var z=require("@magicx-eng/ai-autocomplete-vanilla"),b=require("react"),Ce;function _t(){if(Ce!==void 0)return Ce;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Ce=e.contentEditable==="plaintext-only",Ce}function at(e){let{segments:t,newParamId:a,editingParam:r,editingAnchor:i,caretOffset:s,placeholderText:u,isFocused:m,isDropdownOpen:h,listboxId:x,activeDescendantId:S,autoFocus:P,handleTextChange:D,handleKeyDown:T,handleCaretAfterInput:q,handleCaretMove:W,startEditingParam:ee,replaceEditingRange:Q,setFocused:l}=e,w=(0,b.useRef)(null),F=(0,b.useRef)(!1),G=(0,b.useRef)(""),v=(0,b.useRef)(""),B=(0,b.useRef)(null),M=(0,b.useRef)(0);B.current=s,(0,b.useEffect)(()=>{if(!P)return;let o=w.current;if(!o)return;document.activeElement===o?l(!0):o.focus();let p=o.ownerDocument??document,c=p.getSelection(),k=c&&c.rangeCount>0&&o.contains(c.anchorNode);if(c&&!k){let g=p.createRange();g.selectNodeContents(o),g.collapse(!0),c.removeAllRanges(),c.addRange(g)}},[P,l]),(0,b.useEffect)(()=>{let o=w.current;if(!o)return;let p=o.ownerDocument??document,c=()=>{let k=p.getSelection();if(!k||k.rangeCount===0||!k.anchorNode||!o.contains(k.anchorNode))return;let g=k.anchorNode,J=(g.nodeType===Node.ELEMENT_NODE?g:g.parentElement)?.closest('strong[data-seg="completed"][data-param-id]')?.dataset.paramId??null;if(J&&J!==r?.id){ee(J);return}performance.now()-M.current<50||W((0,z.getCursorOffset)(o))};return p.addEventListener("selectionchange",c),()=>p.removeEventListener("selectionchange",c)},[r,ee,W]),(0,b.useLayoutEffect)(()=>{let o=w.current;o&&(0,z.renderEditableContent)({input:o,segments:t,newParamId:a,editingParamId:r?.id??null,placeholderText:u??"",isFocused:m})},[t,a,r,u,m]),(0,b.useLayoutEffect)(()=>{let o=G.current,p=a??"";if(G.current=p,!p||p===o)return;let c=w.current;if(!c)return;c.focus();let k=B.current??(0,z.plainTextLength)(c);(0,z.setCursorOffset)(c,k)},[a]),(0,b.useLayoutEffect)(()=>{let o=v.current,p=r?.id??"";if(v.current=p,!p||p===o||i==null)return;let c=w.current;c&&(0,z.setCursorOffset)(c,i)},[r,i]);let E=(0,b.useCallback)(()=>{if(F.current)return;let o=w.current;if(!o)return;let p=(0,z.extractPlainText)(o),k=p.length>0&&p[0]!==p[0].toUpperCase()?p[0].toUpperCase()+p.slice(1):p;D(k)},[D]),U=(0,b.useCallback)(()=>{M.current=performance.now(),E();let o=w.current;o&&q((0,z.getCursorOffset)(o))},[E,q]);(0,b.useEffect)(()=>{let o=w.current;if(!o)return;let p=c=>{let k=c,g=k.inputType;if(g==="insertParagraph"||g==="insertLineBreak"||g==="insertFromDrop"){c.preventDefault();return}if(g.startsWith("insert")||g.startsWith("delete")){let R=g.startsWith("delete")?"":k.data??"";Q(R)&&c.preventDefault()}};return o.addEventListener("beforeinput",p),()=>o.removeEventListener("beforeinput",p)},[Q]);let L=(0,b.useCallback)(()=>{F.current=!0},[]),te=(0,b.useCallback)(()=>{F.current=!1,E()},[E]),Z=(0,b.useCallback)(o=>{o.preventDefault();let p=w.current;if(!p)return;let c=(o.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!c)return;let k=p.ownerDocument??document,g=k.getSelection();if(!g||g.rangeCount===0)return;let R=g.getRangeAt(0);if(!p.contains(R.startContainer))return;R.deleteContents();let O=k.createTextNode(c);R.insertNode(O),R.setStartAfter(O),R.collapse(!0),g.removeAllRanges(),g.addRange(R),E()},[E]),H=(0,b.useCallback)(o=>T(o),[T]),j=(0,b.useCallback)(()=>l(!0),[l]),f=(0,b.useCallback)(()=>l(!1),[l]),me=(0,b.useCallback)(()=>w.current?.focus(),[]),ne=(0,b.useCallback)(()=>w.current?.blur(),[]),X=(0,b.useCallback)(()=>{let o=w.current;return o?(0,z.extractPlainText)(o):""},[]),d=_t()?"plaintext-only":"true";return{inputRef:w,editorProps:{ref:w,contentEditable:d,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":x,"aria-expanded":h,"aria-activedescendant":S,spellCheck:!0,enterKeyHint:"send",onInput:U,onKeyDown:H,onCompositionStart:L,onCompositionEnd:te,onPaste:Z,onFocus:j,onBlur:f},getPlainText:X,focus:me,blur:ne}}var K=require("react/jsx-runtime");function It(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var ot=(0,I.forwardRef)(function({onSubmit:t,onError:a,optionOverrides:r,maskCompletedText:i,className:s,apiConfig:u,columns:m,pillPlacement:h="dropdown",mode:x="auto",optionsPosition:S="below",animations:P=!0,dropdownTrigger:D,closeDropdownOnBlur:T,showNonTappableOptions:q,autoFocus:W=!0,onFocus:ee,onBlur:Q,value:l,completedParams:w,onChange:F,onParamsChange:G,submitButton:v},B){let M=(0,I.useRef)(null),E=(0,I.useRef)(null),U=(0,I.useRef)(()=>{}),L=(0,I.useRef)(null),te=(0,I.useRef)(null);(0,I.useEffect)(()=>{let _=M.current;if(_)return L.current?L.current.setMode(x):L.current=new ue.ModeController(_,x),()=>{L.current?.destroy(),L.current=null}},[x]);let Z=(0,I.useCallback)(_=>{let ae=te.current?.current;ae&&(ae.focus(),(0,ue.setCursorOffset)(ae,_))},[]),{completedParams:H,skippedParams:j,suggestionPills:f,setActivePill:me,segments:ne,newParamId:X,clearNewParamId:d,placeholderText:o,isFocused:p,isDropdownOpen:c,isActivePillSelected:k,isLoading:g,activeIndex:R,listboxId:O,handleTextChange:J,handleKeyDown:be,setFocused:Re,editingParam:ve,editingAnchor:n,caretOffset:C,startEditingParam:A,handleCaretAfterInput:se,handleCaretMove:ge,replaceEditingRange:it,dropdownProps:nt,reset:xe}=Ae({onSubmit:_=>U.current(_),onError:a,optionOverrides:r,maskCompletedText:i,apiConfig:u,columns:m,dropdownTrigger:D,optionsPosition:S,closeDropdownOnBlur:T,showNonTappableOptions:q,onFocus:ee,onBlur:Q,value:l,completedParams:w,onChange:F,onParamsChange:G,source:"full-sdk",setCursor:Z});(0,I.useEffect)(()=>{if(!X)return;let _=window.setTimeout(()=>d(),650);return()=>window.clearTimeout(_)},[X,d]);let rt=R>=0?`${O}-option-${R}`:void 0,{inputRef:De,editorProps:st,focus:we,blur:Oe,getPlainText:He}=at({segments:ne,newParamId:X,editingParam:ve,editingAnchor:n,caretOffset:C,placeholderText:o,isFocused:p,isDropdownOpen:c,listboxId:O,activeDescendantId:rt,autoFocus:W,handleTextChange:J,handleKeyDown:be,handleCaretAfterInput:se,handleCaretMove:ge,startEditingParam:A,replaceEditingRange:it,setFocused:Re});te.current=De,(0,I.useLayoutEffect)(()=>{let _=E.current,ae=De.current;if(!_||!ae)return;let Ne=()=>{let We=_.firstElementChild;if(!We)return;let ct=We.getBoundingClientRect(),ut=ae.getBoundingClientRect();ct.top>=ut.bottom-2?_.setAttribute("data-aia-pill-wrapped",""):_.removeAttribute("data-aia-pill-wrapped")};Ne();let Ke=new ResizeObserver(Ne);return Ke.observe(ae),()=>Ke.disconnect()},[ne,f.length,g,De]),(0,I.useImperativeHandle)(B,()=>({focus:we,blur:Oe,reset:xe,setMode:_=>L.current?.setMode(_)}),[we,Oe,xe]);let ye=!!ne.length||H.length>0,Te=(0,I.useCallback)(()=>{if(!ye)return;let _=He();t((0,ue.buildSubmitResult)(_,H,j)),xe()},[ye,H,j,t,xe,He]);U.current=Te;let lt=(0,I.useCallback)(_=>{_.target?.closest("[data-aia-pill]")||we()},[we]),dt=h==="inline",pt=h==="dropdown";return(0,K.jsxs)("div",{ref:M,className:`magicx-aia ${re.container} ${s??""}`,"data-pill-placement":h,"data-options-position":S,"data-animations":P?"on":"off","data-mode":It(x),children:[(0,K.jsx)(Pe,{...nt,showPills:pt}),(0,K.jsxs)("div",{className:re.inputWrapper,onClick:lt,children:[(0,K.jsxs)("div",{className:re.editorArea,"data-aia-editor":"",children:[(0,K.jsx)("div",{...st,className:re.input,"data-aia-input":""}),dt&&(g||f.length>0)&&(0,K.jsx)("span",{ref:E,className:re.pillListContainer,"data-aia-pill-list-container":"",children:(0,K.jsx)(_e,{pills:f,activePillIndex:0,activeSelected:k,onSelectPill:me,loading:g})})]}),v===null?null:v===void 0?(0,K.jsx)(et,{disabled:!ye,onClick:Te}):(0,K.jsx)("span",{"data-aia-submit":"",className:re.submitSlot,onClick:_=>{ye&&(_.stopPropagation(),Te())},children:v})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,buildSubmitResult,useAIAutocomplete,withSkippedParams});
|
|
1385
|
+
`,document.head.appendChild(e)}var st={submitButton:"SubmitButton-module_submitButton_otz7H"};var De=require("react/jsx-runtime");function lt({disabled:e,onClick:o}){return(0,De.jsx)("button",{type:"button","data-aia-submit":"",className:st.submitButton,disabled:e,onClick:i=>{i.stopPropagation(),o()},"aria-label":"Submit",children:(0,De.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,De.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var pt=require("@magicx-eng/ai-autocomplete-vanilla"),b=require("react");var Ue=require("react");function dt(e){let o=(0,Ue.useRef)(e);o.current=e;let i=(0,Ue.useRef)(null);i.current===null&&(i.current={fetch:(n,l)=>{let r=o.current;return r?r.fetch(n,l):Promise.reject(new Error("products config removed"))},transform:n=>o.current?.transform(n)??[],get limit(){return o.current?.limit}});let s=e!==void 0;return{config:s?i.current:void 0,enabled:s}}var Dt={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 Te({onSubmit:e,onError:o,optionOverrides:i,maskCompletedText:s,apiConfig:n,columns:l=2,dropdownTrigger:r,optionsPosition:u,closeDropdownOnBlur:g,showNonTappableOptions:x,onFocus:I,onBlur:P,value:R,completedParams:S,onChange:Q,onParamsChange:X,products:oe,onProductSelect:J,source:D,setCursor:w}){let p=(0,b.useRef)(null),[ie,Z]=(0,b.useState)(null),B=(0,b.useRef)(e);B.current=e;let T=(0,b.useRef)(o);T.current=o;let C=(0,b.useRef)(Q);C.current=Q;let f=(0,b.useRef)(X);f.current=X;let N=(0,b.useRef)(I);N.current=I;let H=(0,b.useRef)(P);H.current=P;let L=(0,b.useRef)(w);L.current=w;let V=(0,b.useRef)(J);V.current=J;let Y=dt(oe);(0,b.useEffect)(()=>{if(typeof document>"u")return;let d=new pt.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:n,optionOverrides:i,maskCompletedText:s,columns:l,dropdownTrigger:r,optionsPosition:u,closeDropdownOnBlur:g,showNonTappableOptions:x,source:D,value:R,completedParams:S,onSubmit:(..._)=>B.current?.(..._),onError:(..._)=>T.current?.(..._),onChange:(..._)=>C.current?.(..._),onParamsChange:(..._)=>f.current?.(..._),onFocus:()=>N.current?.(),onBlur:()=>H.current?.(),onProductSelect:_=>V.current?.(_),setCursor:_=>L.current?.(_),products:Y.config});p.current=d,Z(d.getState());let A=d.subscribe(_=>Z(_));return()=>{A(),d.destroy(),p.current===d&&(p.current=null)}},[]),(0,b.useEffect)(()=>{R!==void 0&&p.current?.setValue(R)},[R]),(0,b.useEffect)(()=>{S!==void 0&&p.current?.setCompletedParams(S)},[S]);let ee=JSON.stringify(n??null),$=(0,b.useRef)(i),O=(0,b.useRef)(0);if(i!==$.current){let d=$.current,A=i,_=Object.keys(d??{}),me=Object.keys(A??{});(_.length!==me.length||me.some(ne=>!d?.[ne]||A[ne]!==d[ne]))&&O.current++,$.current=i}(0,b.useEffect)(()=>{p.current?.update({apiConfig:n,optionOverrides:i,dropdownTrigger:r,optionsPosition:u,closeDropdownOnBlur:g,showNonTappableOptions:x})},[ee,O.current,r,u,g,x]);let re=(0,b.useRef)(!1);(0,b.useEffect)(()=>{if(!re.current){re.current=!0;return}p.current?.update({products:Y.config})},[Y.enabled]);let M=(0,b.useRef)(null);M.current===null&&(M.current={handleTextChange:d=>p.current?.handleTextChange(d),handleKeyDown:d=>{let A="nativeEvent"in d?d.nativeEvent:d;p.current?.handleKeyDown(A)},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=M.current,c=(0,b.useCallback)(d=>{let A=d.target.value,me=A.length>0&&!d.nativeEvent?.isComposing&&A[0]!==A[0].toUpperCase()?A[0].toUpperCase()+A.slice(1):A;p.current?.handleTextChange(me)},[]),m=(0,b.useCallback)(d=>{p.current?.handleKeyDown(d.nativeEvent)},[]),v=p.current,a=ie??Dt,E=R!==void 0?R:a.text,te=S!==void 0?S:a.completedParams,j=a.actionableSuggestions,ke=j[0],ue=v?.listboxId??"",Fe=a.activeDropdownIndex>=0&&v?`${ue}-option-${a.activeDropdownIndex}`:void 0,pe=a.editingParam,xe=pe?{type:pe.suggestionType,text:pe.suggestionPlaceholder,required:!0,options:pe.options}:null,_e=xe??ke,Be=xe?[xe]:j,Pe=!v||a.isLoading&&!a.editingParam&&!a.inSelectionAnimation;return{completedParams:te,skippedParams:a.skippedParams,suggestionPills:j,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:Pe,isFocused:a.isFocused,isDropdownOpen:a.isDropdownOpen,isActivePillSelected:a.isActivePillSelected,placeholderText:a.placeholderText,listboxId:ue,error:a.error,products:a.products,selectProduct:t.selectProduct,handleTextChange:t.handleTextChange,handleKeyDown:t.handleKeyDown,setFocused:t.setFocused,editingParam:pe,editingAnchor:a.editingAnchor,caretOffset:a.caretOffset,startEditingParam:t.startEditingParam,exitEditMode:t.exitEditMode,handleCaretAfterInput:t.handleCaretAfterInput,handleCaretMove:t.handleCaretMove,replaceEditingRange:t.replaceEditingRange,inputProps:{value:E,placeholder:a.placeholderText||void 0,onChange:c,onKeyDown:m,onFocus:t.handleFocus,onBlur:t.handleBlur,role:"combobox","aria-expanded":a.isDropdownOpen,"aria-activedescendant":Fe,"aria-autocomplete":"list","aria-controls":ue},reset:t.reset,dropdownProps:{suggestions:_e?[{..._e,options:a.filteredOptions}]:[],activeIndex:a.activeDropdownIndex,onSelect:t.selectOption,onHighlight:t.setActiveDropdownIndex,isOpen:a.isDropdownOpen,id:ue,pills:Be,activeSelected:a.isActivePillSelected,onPillClick:t.setActivePill,isLoading:Pe,isInputEmpty:E.trim().length===0,products:a.products,onProductSelect:t.selectProduct,onProductFocusChange:t.setFocused,optionsPosition:u??"below"}}}var F=require("@magicx-eng/ai-autocomplete-vanilla"),h=require("react"),Le;function Tt(){if(Le!==void 0)return Le;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Le=e.contentEditable==="plaintext-only",Le}function ct(e){let{segments:o,newParamId:i,editingParam:s,editingAnchor:n,caretOffset:l,placeholderText:r,isFocused:u,isDropdownOpen:g,listboxId:x,activeDescendantId:I,autoFocus:P,handleTextChange:R,handleKeyDown:S,handleCaretAfterInput:Q,handleCaretMove:X,startEditingParam:oe,replaceEditingRange:J,setFocused:D}=e,w=(0,h.useRef)(null),p=(0,h.useRef)(!1),ie=(0,h.useRef)(""),Z=(0,h.useRef)(""),B=(0,h.useRef)(null),T=(0,h.useRef)(0);B.current=l,(0,h.useEffect)(()=>{if(!P)return;let t=w.current;if(!t)return;document.activeElement===t?D(!0):t.focus();let c=t.ownerDocument??document,m=c.getSelection(),v=m&&m.rangeCount>0&&t.contains(m.anchorNode);if(m&&!v){let a=c.createRange();a.selectNodeContents(t),a.collapse(!0),m.removeAllRanges(),m.addRange(a)}},[P,D]),(0,h.useEffect)(()=>{let t=w.current;if(!t)return;let c=t.ownerDocument??document,m=()=>{let v=c.getSelection();if(!v||v.rangeCount===0||!v.anchorNode||!t.contains(v.anchorNode))return;let a=v.anchorNode,j=(a.nodeType===Node.ELEMENT_NODE?a:a.parentElement)?.closest('strong[data-seg="completed"][data-param-id]')?.dataset.paramId??null;if(j&&j!==s?.id){oe(j);return}performance.now()-T.current<50||X((0,F.getCursorOffset)(t))};return c.addEventListener("selectionchange",m),()=>c.removeEventListener("selectionchange",m)},[s,oe,X]),(0,h.useLayoutEffect)(()=>{let t=w.current;t&&(0,F.renderEditableContent)({input:t,segments:o,newParamId:i,editingParamId:s?.id??null,placeholderText:r??"",isFocused:u})},[o,i,s,r,u]),(0,h.useLayoutEffect)(()=>{let t=ie.current,c=i??"";if(ie.current=c,!c||c===t)return;let m=w.current;if(!m)return;m.focus();let v=B.current??(0,F.plainTextLength)(m);(0,F.setCursorOffset)(m,v)},[i]),(0,h.useLayoutEffect)(()=>{let t=Z.current,c=s?.id??"";if(Z.current=c,!c||c===t||n==null)return;let m=w.current;m&&(0,F.setCursorOffset)(m,n)},[s,n]);let C=(0,h.useCallback)(()=>{if(p.current)return;let t=w.current;if(!t)return;let c=(0,F.extractPlainText)(t),v=c.length>0&&c[0]!==c[0].toUpperCase()?c[0].toUpperCase()+c.slice(1):c;R(v)},[R]),f=(0,h.useCallback)(()=>{T.current=performance.now(),C();let t=w.current;t&&Q((0,F.getCursorOffset)(t))},[C,Q]);(0,h.useEffect)(()=>{let t=w.current;if(!t)return;let c=m=>{let v=m,a=v.inputType;if(a==="insertParagraph"||a==="insertLineBreak"||a==="insertFromDrop"){m.preventDefault();return}if(a.startsWith("insert")||a.startsWith("delete")){let E=a.startsWith("delete")?"":v.data??"";J(E)&&m.preventDefault()}};return t.addEventListener("beforeinput",c),()=>t.removeEventListener("beforeinput",c)},[J]);let N=(0,h.useCallback)(()=>{p.current=!0},[]),H=(0,h.useCallback)(()=>{p.current=!1,C()},[C]),L=(0,h.useCallback)(t=>{t.preventDefault();let c=w.current;if(!c)return;let m=(t.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!m)return;let v=c.ownerDocument??document,a=v.getSelection();if(!a||a.rangeCount===0)return;let E=a.getRangeAt(0);if(!c.contains(E.startContainer))return;E.deleteContents();let te=v.createTextNode(m);E.insertNode(te),E.setStartAfter(te),E.collapse(!0),a.removeAllRanges(),a.addRange(E),C()},[C]),V=(0,h.useCallback)(t=>S(t),[S]),Y=(0,h.useCallback)(()=>D(!0),[D]),ee=(0,h.useCallback)(()=>D(!1),[D]),$=(0,h.useCallback)(()=>w.current?.focus(),[]),O=(0,h.useCallback)(()=>w.current?.blur(),[]),re=(0,h.useCallback)(()=>{let t=w.current;return t?(0,F.extractPlainText)(t):""},[]),M=Tt()?"plaintext-only":"true";return{inputRef:w,editorProps:{ref:w,contentEditable:M,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":x,"aria-expanded":g,"aria-activedescendant":I,spellCheck:!0,enterKeyHint:"send",onInput:f,onKeyDown:V,onCompositionStart:N,onCompositionEnd:H,onPaste:L,onFocus:Y,onBlur:ee},getPlainText:re,focus:$,blur:O}}var U=require("react/jsx-runtime");function Lt(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var ut=(0,k.forwardRef)(function({onSubmit:o,onError:i,optionOverrides:s,maskCompletedText:n,className:l,apiConfig:r,columns:u,pillPlacement:g="dropdown",mode:x="auto",optionsPosition:I="below",animations:P=!0,dropdownTrigger:R,closeDropdownOnBlur:S,showNonTappableOptions:Q,autoFocus:X=!0,onFocus:oe,onBlur:J,value:D,completedParams:w,onChange:p,onParamsChange:ie,products:Z,onProductSelect:B,submitButton:T},C){let f=(0,k.useRef)(null),N=(0,k.useRef)(null),H=(0,k.useRef)(()=>{}),L=(0,k.useRef)(null),V=(0,k.useRef)(null);(0,k.useEffect)(()=>{let y=f.current;if(y)return L.current?L.current.setMode(x):L.current=new ve.ModeController(y,x),()=>{L.current?.destroy(),L.current=null}},[x]);let Y=(0,k.useCallback)(y=>{let se=V.current?.current;se&&(se.focus(),(0,ve.setCursorOffset)(se,y))},[]),{completedParams:ee,skippedParams:$,suggestionPills:O,setActivePill:re,segments:M,newParamId:t,clearNewParamId:c,placeholderText:m,isFocused:v,isDropdownOpen:a,isActivePillSelected:E,isLoading:te,activeIndex:j,listboxId:ke,handleTextChange:ue,handleKeyDown:Fe,setFocused:pe,editingParam:xe,editingAnchor:_e,caretOffset:Be,startEditingParam:Pe,handleCaretAfterInput:d,handleCaretMove:A,replaceEditingRange:_,dropdownProps:me,reset:ne}=Te({onSubmit:y=>H.current(y),onError:i,optionOverrides:s,maskCompletedText:n,apiConfig:r,columns:u,dropdownTrigger:R,optionsPosition:I,closeDropdownOnBlur:S,showNonTappableOptions:Q,onFocus:oe,onBlur:J,value:D,completedParams:w,onChange:p,onParamsChange:ie,products:Z,onProductSelect:B,source:"full-sdk",setCursor:Y});(0,k.useEffect)(()=>{if(!t)return;let y=window.setTimeout(()=>c(),650);return()=>window.clearTimeout(y)},[t,c]);let mt=j>=0?`${ke}-option-${j}`:void 0,{inputRef:Ne,editorProps:gt,focus:Ie,blur:Ve,getPlainText:$e}=ct({segments:M,newParamId:t,editingParam:xe,editingAnchor:_e,caretOffset:Be,placeholderText:m,isFocused:v,isDropdownOpen:a,listboxId:ke,activeDescendantId:mt,autoFocus:X,handleTextChange:ue,handleKeyDown:Fe,handleCaretAfterInput:d,handleCaretMove:A,startEditingParam:Pe,replaceEditingRange:_,setFocused:pe});V.current=Ne,(0,k.useLayoutEffect)(()=>{let y=N.current,se=Ne.current;if(!y||!se)return;let je=()=>{let Qe=y.firstElementChild;if(!Qe)return;let vt=Qe.getBoundingClientRect(),xt=se.getBoundingClientRect();vt.top>=xt.bottom-2?y.setAttribute("data-aia-pill-wrapped",""):y.removeAttribute("data-aia-pill-wrapped")};je();let qe=new ResizeObserver(je);return qe.observe(se),()=>qe.disconnect()},[M,O.length,te,Ne]),(0,k.useImperativeHandle)(C,()=>({focus:Ie,blur:Ve,reset:ne,setMode:y=>L.current?.setMode(y)}),[Ie,Ve,ne]);let Se=!!M.length||ee.length>0,Me=(0,k.useCallback)(()=>{if(!Se)return;let y=$e();o((0,ve.buildSubmitResult)(y,ee,$)),ne()},[Se,ee,$,o,ne,$e]);H.current=Me;let ht=(0,k.useCallback)(y=>{y.target?.closest("[data-aia-pill]")||Ie()},[Ie]),ft=g==="inline",bt=g==="dropdown";return(0,U.jsxs)("div",{ref:f,className:`magicx-aia ${ce.container} ${l??""}`,"data-pill-placement":g,"data-options-position":I,"data-animations":P?"on":"off","data-mode":Lt(x),children:[(0,U.jsx)(Re,{...me,showPills:bt}),(0,U.jsxs)("div",{className:ce.inputWrapper,onClick:ht,children:[(0,U.jsxs)("div",{className:ce.editorArea,"data-aia-editor":"",children:[(0,U.jsx)("div",{...gt,className:ce.input,"data-aia-input":""}),ft&&(te||O.length>0)&&(0,U.jsx)("span",{ref:N,className:ce.pillListContainer,"data-aia-pill-list-container":"",children:(0,U.jsx)(Ce,{pills:O,activePillIndex:0,activeSelected:E,onSelectPill:re,loading:te})})]}),T===null?null:T===void 0?(0,U.jsx)(lt,{disabled:!Se,onClick:Me}):(0,U.jsx)("span",{"data-aia-submit":"",className:ce.submitSlot,onClick:y=>{Se&&(y.stopPropagation(),Me())},children:T})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,buildSubmitResult,useAIAutocomplete,withSkippedParams});
|
|
1185
1386
|
//# sourceMappingURL=index.js.map
|