@magicx-eng/ai-autocomplete-react 0.8.1 → 0.9.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/dist/index.js +84 -44
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +83 -43
- 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 No,withSkippedParams as Ho}from"@magicx-eng/ai-autocomplete-vanilla";import{forwardRef as ta,useCallback as Ne,useEffect as ut,useImperativeHandle as aa,useLayoutEffect as oa,useRef as fe}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
|
|
@@ -15,7 +15,9 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
15
15
|
box-shadow: var(--aia-shadow, none);
|
|
16
16
|
overflow: hidden;
|
|
17
17
|
display: flex;
|
|
18
|
-
align
|
|
18
|
+
/* Top-align so the submit button stays by the first line while the editor
|
|
19
|
+
grows downward and then scrolls internally. */
|
|
20
|
+
align-items: flex-start;
|
|
19
21
|
gap: 12px;
|
|
20
22
|
}
|
|
21
23
|
|
|
@@ -23,13 +25,28 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
23
25
|
position: relative;
|
|
24
26
|
flex: 1;
|
|
25
27
|
min-width: 0;
|
|
26
|
-
min-height:
|
|
27
|
-
line
|
|
28
|
+
min-height: 22px;
|
|
29
|
+
/* Airy line box so wrapped rows of chips (and plain text) don't touch. */
|
|
30
|
+
line-height: var(--aia-editor-line-height, 1.9);
|
|
28
31
|
font-family: inherit;
|
|
29
32
|
font-size: var(--aia-written-text-font-size, 14px);
|
|
30
33
|
white-space: pre-wrap;
|
|
31
34
|
word-break: break-word;
|
|
32
35
|
overflow-wrap: anywhere;
|
|
36
|
+
/* Grow with content up to a cap of five rows, then hold height and scroll
|
|
37
|
+
internally \u2014 the caret stays in view as the text is pushed up. The
|
|
38
|
+
scrollbar is hidden so the box reads as a clean growing field. The cap is
|
|
39
|
+
five line boxes rather than a fixed pixel height so it still lands on a
|
|
40
|
+
whole row when a consumer resizes the text via
|
|
41
|
+
--aia-written-text-font-size (\`em\` here resolves against this element's
|
|
42
|
+
own font-size, which is that token). */
|
|
43
|
+
max-height: var(--aia-editor-max-height, calc(var(--aia-editor-line-height, 1.9) * 5em));
|
|
44
|
+
overflow-y: auto;
|
|
45
|
+
scrollbar-width: none;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.AIAutocomplete-module_editorArea_7rBWq::-webkit-scrollbar {
|
|
49
|
+
display: none;
|
|
33
50
|
}
|
|
34
51
|
|
|
35
52
|
.AIAutocomplete-module_input_IW-P- {
|
|
@@ -54,23 +71,27 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
54
71
|
<strong>). The completed class is stamped by the shared renderer as a global
|
|
55
72
|
string, so match it via [class~=] to bypass CSS Modules' hashing. */
|
|
56
73
|
:where(.AIAutocomplete-module_input_IW-P-) strong[class~="magicx-aia-segment--completed"] {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
74
|
+
/* inline (not inline-block) so a chip too wide for the line breaks across two
|
|
75
|
+
lines; box-decoration-break: clone gives each fragment its own padding /
|
|
76
|
+
radius / fill, so an over-long recognized phrase renders as two little
|
|
77
|
+
rounded blocks instead of overflowing the field. */
|
|
78
|
+
display: inline;
|
|
79
|
+
padding: 3px 6px;
|
|
80
|
+
/* Rounded rectangle, not a full capsule. */
|
|
81
|
+
border-radius: 6px;
|
|
82
|
+
-webkit-box-decoration-break: clone;
|
|
83
|
+
box-decoration-break: clone;
|
|
60
84
|
background: var(--aia-completed-pill-bg, rgba(189, 189, 189, 0.105));
|
|
61
85
|
color: var(--aia-completed-pill-color, var(--aia-written-text-color, #fff));
|
|
62
86
|
font-size: var(--aia-pill-font-size, 14px);
|
|
63
87
|
font-weight: 400;
|
|
64
88
|
line-height: normal;
|
|
65
|
-
white-space:
|
|
66
|
-
/*
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
sitting ~1-2px below the adjacent text. The symmetric 4px padding keeps
|
|
72
|
-
the capsule optically centered around the text on its own. */
|
|
73
|
-
vertical-align: baseline;
|
|
89
|
+
white-space: normal;
|
|
90
|
+
/* Tighten the tracking so the chip's horizontal padding doesn't make the
|
|
91
|
+
recognized phrase read wider than the same words as plain text. The exact
|
|
92
|
+
per-chip amount is set inline by the renderer (renderEditable); this is a
|
|
93
|
+
fallback for any chip the renderer didn't stamp. */
|
|
94
|
+
letter-spacing: var(--aia-completed-pill-tracking, -0.02em);
|
|
74
95
|
cursor: pointer;
|
|
75
96
|
/* Smooth hover fade. Neutralized by the data-animations="off" block. */
|
|
76
97
|
transition: background-color 150ms ease;
|
|
@@ -158,7 +179,7 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
158
179
|
opacity: 0;
|
|
159
180
|
}
|
|
160
181
|
}
|
|
161
|
-
`,document.head.appendChild(e)}var ne={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
|
|
182
|
+
`,document.head.appendChild(e)}var ne={container:"AIAutocomplete-module_container_KKjFU",inputWrapper:"AIAutocomplete-module_inputWrapper_FLq1b",editorArea:"AIAutocomplete-module_editorArea_7rBWq",input:"AIAutocomplete-module_input_IW-P-",pillListContainer:"AIAutocomplete-module_pillListContainer_h92IA",submitSlot:"AIAutocomplete-module_submitSlot_GhuCM",aiaPillReveal:"AIAutocomplete-module_aiaPillReveal_wf05b"};import{useEffect as Kt,useRef as Wt,useState as Ut}from"react";if(typeof document<"u"&&!document.getElementById("ac-style-0ae03977")){let e=document.createElement("style");e.id="ac-style-0ae03977",e.textContent=`/*
|
|
162
183
|
* Built-in appearance defaults \u2014 zero specificity via :where().
|
|
163
184
|
* Consumer CSS always wins without !important.
|
|
164
185
|
*
|
|
@@ -232,7 +253,7 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
232
253
|
--aia-pill-bg: var(--aia-primitive-neutral-750);
|
|
233
254
|
--aia-pill-color: var(--aia-primitive-neutral-300);
|
|
234
255
|
--aia-pill-border: var(--aia-primitive-neutral-750-a30);
|
|
235
|
-
--aia-pill-font-size:
|
|
256
|
+
--aia-pill-font-size: 16px;
|
|
236
257
|
|
|
237
258
|
/* Completed params (Figma "RichTextPill"): compact faint-gray chip with
|
|
238
259
|
primary-color regular-weight text. -active is the hover / tapped (re-edit)
|
|
@@ -243,12 +264,15 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
243
264
|
--aia-completed-pill-color: var(--aia-primitive-neutral-0);
|
|
244
265
|
|
|
245
266
|
--aia-option-bg: var(--aia-primitive-blue-50);
|
|
246
|
-
|
|
267
|
+
/* Options read bigger + darker than the small-caps param labels above them. */
|
|
268
|
+
--aia-option-color: var(--aia-primitive-neutral-150);
|
|
247
269
|
--aia-option-color-selected: var(--aia-primitive-neutral-0);
|
|
248
|
-
--aia-option-font-size:
|
|
270
|
+
--aia-option-font-size: 16px;
|
|
249
271
|
|
|
250
272
|
--aia-written-text-color: var(--aia-primitive-neutral-0);
|
|
251
|
-
|
|
273
|
+
/* Match the option size so the typed query never reads smaller than the
|
|
274
|
+
choices below it. */
|
|
275
|
+
--aia-written-text-font-size: 16px;
|
|
252
276
|
--aia-caret-color: var(--aia-written-text-color, #000000);
|
|
253
277
|
|
|
254
278
|
--aia-submit-bg: var(--aia-primitive-neutral-0);
|
|
@@ -285,7 +309,7 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
285
309
|
--aia-pill-bg: var(--aia-primitive-neutral-750);
|
|
286
310
|
--aia-pill-color: var(--aia-primitive-neutral-700);
|
|
287
311
|
--aia-pill-border: var(--aia-primitive-neutral-750-a30);
|
|
288
|
-
--aia-pill-font-size:
|
|
312
|
+
--aia-pill-font-size: 16px;
|
|
289
313
|
|
|
290
314
|
/* Completed params (Figma "RichTextPill") \u2014 dark theme (design source):
|
|
291
315
|
white text on a faint-gray chip. -active is the hover / tapped highlight.
|
|
@@ -298,12 +322,13 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
298
322
|
--aia-completed-pill-color: var(--aia-primitive-neutral-1000);
|
|
299
323
|
|
|
300
324
|
--aia-option-bg: var(--aia-primitive-neutral-250);
|
|
301
|
-
|
|
325
|
+
/* Options read bigger + darker/brighter than the small-caps param labels. */
|
|
326
|
+
--aia-option-color: var(--aia-primitive-neutral-900);
|
|
302
327
|
--aia-option-color-selected: var(--aia-primitive-neutral-1000);
|
|
303
|
-
--aia-option-font-size:
|
|
328
|
+
--aia-option-font-size: 16px;
|
|
304
329
|
|
|
305
330
|
--aia-written-text-color: var(--aia-primitive-neutral-1000);
|
|
306
|
-
--aia-written-text-font-size:
|
|
331
|
+
--aia-written-text-font-size: 16px;
|
|
307
332
|
--aia-caret-color: var(--aia-written-text-color, #ffffff);
|
|
308
333
|
|
|
309
334
|
--aia-submit-bg: var(--aia-primitive-neutral-1000);
|
|
@@ -597,7 +622,7 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
597
622
|
justify-content: space-around;
|
|
598
623
|
}
|
|
599
624
|
}
|
|
600
|
-
`,document.head.appendChild(e)}import{jsx as $e}from"react/jsx-runtime";function me({gap:e,align:n="center",justify:
|
|
625
|
+
`,document.head.appendChild(e)}import{jsx as $e}from"react/jsx-runtime";function me({gap:e,align:n="center",justify:o="start",noWrap:r=!1,inline:l=!1,className:s,children:i,...u}){let h=e?{"--aia-cluster-gap":e}:void 0,v={className:s?`aia-cluster ${s}`:"aia-cluster","data-align":n,"data-justify":o,"data-nowrap":r||void 0,"data-inline":l||void 0,style:h,...u};return l?$e("span",{...v,children:i}):$e("div",{...v,children:i})}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
|
|
601
626
|
dropdown's rounded edges. The top inset (--aia-footer-gap) adds breathing
|
|
602
627
|
room above the hint/branding row so the footer doesn't butt against the last
|
|
603
628
|
option row \u2014 additive to the dropdown's 8px section gap. */
|
|
@@ -659,6 +684,17 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
659
684
|
border-radius: 6px;
|
|
660
685
|
}
|
|
661
686
|
|
|
687
|
+
/* The brand sits at the right edge where option rows scroll under the fade, so
|
|
688
|
+
"AI" was getting clipped / washed out. Give the whole brand its own opaque,
|
|
689
|
+
fully-rounded surface pill so it always reads clearly over the fade. Declared
|
|
690
|
+
after the shared .hintGroup/.brandLink chip rule so it wins. */
|
|
691
|
+
.DropdownFooter-module_brandLink_r4f3R {
|
|
692
|
+
background: var(--aia-footer-brand-pill-bg, var(--aia-surface, #ffffff));
|
|
693
|
+
border-radius: 999px;
|
|
694
|
+
padding: 2px 7px;
|
|
695
|
+
gap: 4px;
|
|
696
|
+
}
|
|
697
|
+
|
|
662
698
|
.DropdownFooter-module_brandLink_r4f3R:hover {
|
|
663
699
|
opacity: 0.7;
|
|
664
700
|
}
|
|
@@ -716,22 +752,26 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
716
752
|
justify-content: flex-end;
|
|
717
753
|
}
|
|
718
754
|
}
|
|
719
|
-
`,document.head.appendChild(e)}var X={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
|
|
755
|
+
`,document.head.appendChild(e)}var X={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 he,jsxs as Re}from"react/jsx-runtime";function qe({isOptionHighlighted:e=!1,isInputEmpty:n=!1}){let{key:o,hint:r}=kt(e,n),[l,s]=Pt(wt);return _t(()=>{s(yt())},[]),he("footer",{className:X.footer,"data-aia-footer":"",children:Re(me,{justify:"between",noWrap:!0,className:X.row,children:[Re(me,{gap:"5px",className:X.hintGroup,children:[he("kbd",{className:X.key,children:o}),he("span",{className:X.hint,children:r})]}),Re("a",{className:X.brandLink,href:l,target:"_blank",rel:"noopener noreferrer",children:[he("span",{className:X.brand,children:"AI"}),he("span",{className:X.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
|
|
720
756
|
with a dashed border. ~28px via 6px padding + 14px text + the 1px border
|
|
721
757
|
(border-box). */
|
|
722
758
|
.ParamPill-module_pill_6Ga7S {
|
|
723
759
|
display: inline-flex;
|
|
724
760
|
align-items: center;
|
|
725
761
|
justify-content: center;
|
|
726
|
-
padding:
|
|
762
|
+
padding: 5px 8px;
|
|
727
763
|
border: 1px dashed var(--aia-pill-border, rgba(189, 189, 189, 0.3));
|
|
728
|
-
border-radius:
|
|
764
|
+
border-radius: 7px;
|
|
729
765
|
background: transparent;
|
|
730
766
|
color: var(--aia-pill-color, var(--aia-color-text-muted, #c1c4cb));
|
|
731
767
|
font-family: inherit;
|
|
732
|
-
|
|
733
|
-
|
|
768
|
+
/* Param labels read as small-caps section headers: distinctly smaller than
|
|
769
|
+
the options they head (0.8\xD7 the pill knob), uppercased, and letter-spaced. */
|
|
770
|
+
font-size: calc(var(--aia-pill-font-size, 14px) * 0.8);
|
|
771
|
+
font-weight: 600;
|
|
734
772
|
line-height: normal;
|
|
773
|
+
text-transform: uppercase;
|
|
774
|
+
letter-spacing: 0.06em;
|
|
735
775
|
cursor: pointer;
|
|
736
776
|
white-space: nowrap;
|
|
737
777
|
animation: ParamPill-module_fadeIn_Ux4eQ 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
@@ -768,7 +808,7 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
768
808
|
opacity: 0;
|
|
769
809
|
}
|
|
770
810
|
}
|
|
771
|
-
`,document.head.appendChild(e)}var ae={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 It}from"react/jsx-runtime";var De={selected:1,first:.7,next:.4,last:.2};function
|
|
811
|
+
`,document.head.appendChild(e)}var ae={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 It}from"react/jsx-runtime";var De={selected:1,first:.7,next:.4,last:.2};function je({label:e,state:n,rounded:o,loading:r,onClick:l}){let s=[ae.pill,o?ae.rounded:"",r?ae.skeleton:""].filter(Boolean).join(" ");return It("button",{type:"button","data-aia-pill":"","data-aia-loading":r?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:s,style:{opacity:De[n]},onMouseDown:i=>i.preventDefault(),onClick:r?void 0:l,disabled:r,children:e})}if(typeof document<"u"&&!document.getElementById("ac-style-0fcb7940")){let e=document.createElement("style");e.id="ac-style-0fcb7940",e.textContent=`.PillList-module_list_qvLqO {
|
|
772
812
|
position: relative;
|
|
773
813
|
z-index: 1;
|
|
774
814
|
pointer-events: auto;
|
|
@@ -778,7 +818,7 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
778
818
|
align-items: center;
|
|
779
819
|
vertical-align: middle;
|
|
780
820
|
}
|
|
781
|
-
`,document.head.appendChild(e)}var Te={list:"PillList-module_list_qvLqO"};import{jsx as ke}from"react/jsx-runtime";var St=[125,69];function Qe(e){return e===0?"first":e===1?"next":"last"}function _e({pills:e,activePillIndex:n,onSelectPill:
|
|
821
|
+
`,document.head.appendChild(e)}var Te={list:"PillList-module_list_qvLqO"};import{jsx as ke}from"react/jsx-runtime";var St=[125,69];function Qe(e){return e===0?"first":e===1?"next":"last"}function _e({pills:e,activePillIndex:n,onSelectPill:o,activeSelected:r,rounded:l,loading:s}){return s&&e.length===0?ke("span",{className:Te.list,"data-aia-pill-list-loading":"",children:St.map((i,u)=>ke("span",{"data-aia-pill-skeleton":"",className:`${ae.pill} ${l?ae.rounded:""} ${ae.skeleton}`,style:{width:i,opacity:De[Qe(u)]}},`skel-${i}`))}):ke("span",{className:Te.list,"data-aia-pill-list-loading":s?"":void 0,children:e.map((i,u)=>{let h=!!r&&u===n;return ke(je,{label:i.text,state:h?"selected":Qe(u),selected:h,rounded:l,loading:s,onClick:()=>o(u)},`${i.type}-${i.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
822
|
(packages/vanilla/src/styles.css). Same tokens, same defaults, so a consumer
|
|
783
823
|
theming one package sees the same result in the other.
|
|
784
824
|
|
|
@@ -945,7 +985,7 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
945
985
|
var(--aia-option-color-selected, var(--aia-color-text-default, #fff))
|
|
946
986
|
);
|
|
947
987
|
}
|
|
948
|
-
`,document.head.appendChild(e)}var
|
|
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 oe,jsxs as Le}from"react/jsx-runtime";function Xe({products:e,listboxId:n,onSelect:o,onFocusChange:r,focusable:l=!0}){if(e.length===0)return null;let s=`${n}-products-label`;return Le("section",{className:M.section,"data-aia-products":"",role:"group","aria-labelledby":s,children:[oe("div",{className:M.label,id:s,children:"Products"}),oe("div",{className:M.row,"data-aia-products-row":"",children:e.map((i,u)=>oe(At,{product:i,id:`${n}-product-${u}`,onSelect:o,onFocusChange:r,focusable:l},i.id))})]})}function At({product:e,id:n,onSelect:o,onFocusChange:r,focusable:l}){let s=i=>{i.metaKey||i.ctrlKey||i.shiftKey||i.altKey||i.button!==0||(i.preventDefault(),o(e))};return Le("a",{id:n,className:M.card,"data-aia-product":"",role:"option","aria-selected":!1,href:e.url,tabIndex:l?0:-1,onClick:s,onKeyDown:i=>{i.key!=="Enter"&&i.key!==" "||(i.preventDefault(),o(e))},onFocus:()=>r?.(!0),onBlur:i=>{i.relatedTarget?.closest("[data-aia-dropdown]")||r?.(!1)},children:[oe("span",{className:M.media,"data-aia-product-placeholder":e.imageUrl?void 0:"",children:e.imageUrl?oe("img",{className:M.image,src:e.imageUrl,alt:"",loading:"lazy",decoding:"async"}):null}),Le("span",{className:M.body,children:[e.vendor?oe("span",{className:M.vendor,children:e.vendor}):null,oe("span",{className:M.title,children:e.title}),e.price?oe("span",{className:M.price,children:e.price}):null]})]})}import{computeOptionsGridLayout as Bt,isOptionsGridMobileViewport as Ft,OPTIONS_GRID_MOBILE_QUERY as Mt}from"@magicx-eng/ai-autocomplete-vanilla";import{useEffect as Ot,useState as Nt}from"react";import{optionsGridTemplateColumns as Ct}from"@magicx-eng/ai-autocomplete-vanilla";import{useLayoutEffect as Et,useRef as Rt}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 {
|
|
949
989
|
.aia-grid {
|
|
950
990
|
display: grid;
|
|
951
991
|
grid-template-columns: repeat(
|
|
@@ -980,7 +1020,7 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
980
1020
|
border-radius: 3px;
|
|
981
1021
|
}
|
|
982
1022
|
}
|
|
983
|
-
`,document.head.appendChild(e)}import{jsx as
|
|
1023
|
+
`,document.head.appendChild(e)}import{jsx as Dt}from"react/jsx-runtime";function Je({min:e="16rem",max:n,gap:o,scroll:r=!1,maxHeight:l,scrollResetKey:s,cols:i,className:u,children:h,...v}){let k=Rt(null);Et(()=>{if(s===void 0)return;let _=k.current;_&&(_.scrollTop=0)},[s]);let f={"--aia-grid-min":e};return n&&(f["--aia-grid-max"]=n),o&&(f["--aia-grid-gap"]=o),l&&(f["--aia-grid-max-height"]=l),i&&(f.gridTemplateColumns=Ct(i)),Dt("div",{ref:k,className:u?`aia-grid ${u}`:"aia-grid","data-scroll":r||void 0,style:f,...v,children:h})}import{useEffect as Tt,useRef as Lt,useState as zt}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 {
|
|
984
1024
|
position: relative;
|
|
985
1025
|
overflow: visible;
|
|
986
1026
|
display: flex;
|
|
@@ -988,16 +1028,16 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
988
1028
|
the same baseline at the top edge of the cell. */
|
|
989
1029
|
align-items: flex-start;
|
|
990
1030
|
font-family: inherit;
|
|
991
|
-
font-size: var(--aia-option-font-size,
|
|
992
|
-
font-weight:
|
|
993
|
-
line-height:
|
|
1031
|
+
font-size: var(--aia-option-font-size, 16px);
|
|
1032
|
+
font-weight: 450;
|
|
1033
|
+
line-height: 21px;
|
|
994
1034
|
color: var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));
|
|
995
1035
|
white-space: normal;
|
|
996
1036
|
word-break: break-word;
|
|
997
1037
|
/* 8px radius on the highlighted fill (--aia-option-bg), matching the Figma
|
|
998
|
-
SuggestionItem selection. The
|
|
1038
|
+
SuggestionItem selection. The 9px/10px inset is the item's own padding. */
|
|
999
1039
|
border-radius: 8px;
|
|
1000
|
-
padding:
|
|
1040
|
+
padding: 8px 10px;
|
|
1001
1041
|
animation: SuggestionItem-module_fadeIn_I8u35 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
1002
1042
|
}
|
|
1003
1043
|
|
|
@@ -1330,7 +1370,7 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
1330
1370
|
filter: brightness(0.55);
|
|
1331
1371
|
}
|
|
1332
1372
|
}
|
|
1333
|
-
`,document.head.appendChild(e)}var
|
|
1373
|
+
`,document.head.appendChild(e)}var O={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 Pe,jsxs as Ze}from"react/jsx-runtime";function Ye({option:e,isHighlighted:n,onSelect:o,onHighlight:r,id:l,loading:s}){let[i,u]=zt(!1),h=Lt(void 0);Tt(()=>()=>clearTimeout(h.current),[]);let v=()=>{s||!e.is_tappable||i||(u(!0),o(e),clearTimeout(h.current),h.current=setTimeout(()=>u(!1),500))},k=[O.item,n&&!s?O.highlighted:"",e.is_tappable?O.tappable:O.nonTappable,i?O.pressed:""].filter(Boolean).join(" ");return Ze("div",{id:l,role:"option","data-aia-option":"","data-aia-loading":s?"":void 0,"aria-selected":n,className:k,tabIndex:s||!e.is_tappable?-1:0,onClick:v,onKeyDown:f=>{!s&&e.is_tappable&&(f.key==="Enter"||f.key===" ")&&(f.preventDefault(),v())},onMouseEnter:!s&&e.is_tappable?r:void 0,children:[Pe("div",{className:O.streaks}),Pe("div",{className:O.streaksVert}),Ze("span",{className:O.content,children:[Pe("span",{className:O.text,children:e.icon?`${e.icon} ${e.text}`:e.text}),e.tag&&Pe("span",{className:O.tag,children:e.tag})]})]})}import{jsx as et}from"react/jsx-runtime";function Ht(){let[e,n]=Nt(Ft);return Ot(()=>{if(typeof window>"u"||!window.matchMedia)return;let o=window.matchMedia(Mt),r=()=>n(o.matches);return r(),o.addEventListener("change",r),()=>o.removeEventListener("change",r)},[]),e}function tt({options:e,activeIndex:n,onSelect:o,onHighlight:r,listboxId:l,loading:s,groupKey:i}){let u=Ht(),{cols:h,maxHeight:v}=Bt(e.length,u);return et(Je,{min:"250px",max:"1fr",gap:"0",scroll:!0,scrollResetKey:i,cols:h,maxHeight:v,children:e.map((k,f)=>et(Ye,{option:k,isHighlighted:f===n,onSelect:o,onHighlight:()=>r(f),id:`${l}-option-${f}`,loading:s},k.text))})}if(typeof document<"u"&&!document.getElementById("ac-style-8414cd5f")){let e=document.createElement("style");e.id="ac-style-8414cd5f",e.textContent=`@layer layout {
|
|
1334
1374
|
.aia-stack {
|
|
1335
1375
|
display: flex;
|
|
1336
1376
|
flex-direction: column;
|
|
@@ -1347,7 +1387,7 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
1347
1387
|
}
|
|
1348
1388
|
/* data-align="stretch" is the flex default \u2014 no rule needed. */
|
|
1349
1389
|
}
|
|
1350
|
-
`,document.head.appendChild(e)}import{jsx as
|
|
1390
|
+
`,document.head.appendChild(e)}import{jsx as Gt}from"react/jsx-runtime";function at({space:e,align:n="stretch",className:o,children:r,...l}){let s=e?{"--aia-stack-space":e}:void 0;return Gt("div",{className:o?`aia-stack ${o}`:"aia-stack","data-align":n,style:s,...l,children:r})}import{jsx as ie,jsxs as jt}from"react/jsx-runtime";var Vt=[159,119,164],$t=()=>{};function qt(e){let n=()=>typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches,[o,r]=Ut(n);if(Kt(()=>{if(e!=="auto"||typeof window>"u"||typeof window.matchMedia!="function")return;let l=window.matchMedia("(prefers-color-scheme: dark)"),s=()=>r(l.matches);return l.addEventListener("change",s),()=>l.removeEventListener("change",s)},[e]),e!==void 0)return e==="auto"?o?"dark":"light":e}function ze({suggestions:e,activeIndex:n,onSelect:o,onHighlight:r,isOpen:l,id:s,className:i,pills:u,onPillClick:h,showPills:v=!0,activeSelected:k=!1,isLoading:f=!1,isInputEmpty:_=!1,products:P,onProductSelect:W,onProductFocusChange:U,optionsPosition:J="below",mode:V}){let C=qt(V),x=C!==void 0,c=e[0]?.options??[],Z=!!(u&&u.length>0&&h),$=!!(P&&P.length>0),T=l&&(c.length>0||v&&Z||f||$),E={suggestions:e,activeIndex:n,pills:u,showPills:v,activeSelected:k,isLoading:f,isInputEmpty:_,products:P},A=Wt(E);T&&(A.current=E);let g=T?E:A.current,L=g.suggestions[0],B=L?.options??[],R=g.activeIndex>=0&&!!B[g.activeIndex]?.is_tappable,H=!!(g.pills&&g.pills.length>0&&h),q=g.showPills&&H,j=g.showPills&&!H&&g.isLoading,G=q||j,F=B.length>0,Y=g.isLoading&&!F,z=g.products??[];return ie("div",{id:s,role:"listbox","data-aia-dropdown":"","data-options-position":J,"data-mode":C,"data-aia-loading":g.isLoading?"":void 0,"data-aia-has-products":z.length>0?"":void 0,className:`${x?"magicx-aia ":""}${de.dropdown} ${T?de.visible:""} ${i??""}`,onMouseDown:t=>t.preventDefault(),children:jt(at,{space:"8px",children:[G&&ie(me,{noWrap:!0,className:de.pillBar,"data-aia-pillbar":"",children:ie(_e,{pills:g.pills??[],activePillIndex:0,activeSelected:g.activeSelected,onSelectPill:h??(()=>{}),rounded:!0,loading:g.isLoading})}),F&&ie(tt,{options:B,activeIndex:g.activeIndex,onSelect:o,onHighlight:r,listboxId:s,loading:g.isLoading,groupKey:L?`${L.type} ${L.text}`:""}),Y&&ie("div",{className:de.skeletonBars,"data-aia-skeleton-bars":"",children:Vt.map(t=>ie("span",{className:de.skeletonBar,style:{width:t}},`bar-${t}`))}),ie(Xe,{products:z,listboxId:s,onSelect:W??$t,onFocusChange:U,focusable:T}),ie(qe,{isOptionHighlighted:R,isInputEmpty:g.isInputEmpty})]})})}import{buildSubmitResult as ia,ModeController as ra,setCursorOffset as na}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 {
|
|
1351
1391
|
flex-shrink: 0;
|
|
1352
1392
|
width: 32px;
|
|
1353
1393
|
height: 32px;
|
|
@@ -1382,5 +1422,5 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
1382
1422
|
);
|
|
1383
1423
|
cursor: default;
|
|
1384
1424
|
}
|
|
1385
|
-
`,document.head.appendChild(e)}var ot={submitButton:"SubmitButton-module_submitButton_otz7H"};import{jsx as Fe}from"react/jsx-runtime";function it({disabled:e,onClick:n}){return Fe("button",{type:"button","data-aia-submit":"",className:ot.submitButton,disabled:e,onClick:i=>{i.stopPropagation(),n()},"aria-label":"Submit",children:Fe("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:Fe("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}import{AIAutocomplete as Gt}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as st,useEffect as he,useRef as D,useState as Wt}from"react";import{useRef as rt}from"react";function nt(e){let n=rt(e);n.current=e;let i=rt(null);i.current===null&&(i.current={fetch:(s,r)=>{let o=n.current;return o?o.fetch(s,r):Promise.reject(new Error("products config removed"))},transform:s=>n.current?.transform(s)??[],get limit(){return n.current?.limit}});let l=e!==void 0;return{config:l?i.current:void 0,enabled:l}}var Ut={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 Be({onSubmit:e,onError:n,optionOverrides:i,maskCompletedText:l,apiConfig:s,columns:r=2,dropdownTrigger:o,optionsPosition:u,closeDropdownOnBlur:g,showNonTappableOptions:b,onFocus:k,onBlur:y,value:A,completedParams:_,onChange:W,onParamsChange:U,products:J,onProductSelect:V,source:C,setCursor:v}){let p=D(null),[Z,$]=Wt(null),T=D(e);T.current=e;let E=D(n);E.current=n;let I=D(W);I.current=W;let h=D(U);h.current=U;let L=D(k);L.current=k;let F=D(y);F.current=y;let R=D(v);R.current=v;let O=D(V);O.current=V;let j=nt(J);he(()=>{if(typeof document>"u")return;let d=new Gt(document.createElement("div"),{renderMode:"headless",apiConfig:s,optionOverrides:i,maskCompletedText:l,columns:r,dropdownTrigger:o,optionsPosition:u,closeDropdownOnBlur:g,showNonTappableOptions:b,source:C,value:A,completedParams:_,onSubmit:(...w)=>T.current?.(...w),onError:(...w)=>E.current?.(...w),onChange:(...w)=>I.current?.(...w),onParamsChange:(...w)=>h.current?.(...w),onFocus:()=>L.current?.(),onBlur:()=>F.current?.(),onProductSelect:w=>O.current?.(w),setCursor:w=>R.current?.(w),products:j.config});p.current=d,$(d.getState());let P=d.subscribe(w=>$(w));return()=>{P(),d.destroy(),p.current===d&&(p.current=null)}},[]),he(()=>{A!==void 0&&p.current?.setValue(A)},[A]),he(()=>{_!==void 0&&p.current?.setCompletedParams(_)},[_]);let q=JSON.stringify(s??null),K=D(i),B=D(0);if(i!==K.current){let d=K.current,P=i,w=Object.keys(d??{}),le=Object.keys(P??{});(w.length!==le.length||le.some(ee=>!d?.[ee]||P[ee]!==d[ee]))&&B.current++,K.current=i}he(()=>{p.current?.update({apiConfig:s,optionOverrides:i,dropdownTrigger:o,optionsPosition:u,closeDropdownOnBlur:g,showNonTappableOptions:b})},[q,B.current,o,u,g,b]);let Y=D(!1);he(()=>{if(!Y.current){Y.current=!0;return}p.current?.update({products:j.config})},[j.enabled]);let z=D(null);z.current===null&&(z.current={handleTextChange:d=>p.current?.handleTextChange(d),handleKeyDown:d=>{let P="nativeEvent"in d?d.nativeEvent:d;p.current?.handleKeyDown(P)},setFocused:d=>p.current?.setFocused(d),startEditingParam:d=>p.current?.startEditingParam(d),exitEditMode:()=>p.current?.exitEditMode(),handleCaretAfterInput:d=>p.current?.handleCaretAfterInput(d),handleCaretMove:d=>p.current?.handleCaretMove(d),replaceEditingRange:d=>p.current?.replaceEditingRange(d)??!1,setActivePill:d=>p.current?.setActivePill(d),removeLastParam:()=>p.current?.removeLastParam(),clearNewParamId:()=>p.current?.clearNewParamId(),reset:()=>p.current?.reset(),selectOption:d=>p.current?.selectOption(d),selectProduct:d=>p.current?.selectProduct(d),setActiveDropdownIndex:d=>p.current?.setActiveDropdownIndex(d),handleFocus:()=>p.current?.setFocused(!0),handleBlur:()=>p.current?.setFocused(!1)});let t=z.current,c=st(d=>{let P=d.target.value,le=P.length>0&&!d.nativeEvent?.isComposing&&P[0]!==P[0].toUpperCase()?P[0].toUpperCase()+P.slice(1):P;p.current?.handleTextChange(le)},[]),m=st(d=>{p.current?.handleKeyDown(d.nativeEvent)},[]),f=p.current,a=Z??Ut,S=A!==void 0?A:a.text,Q=_!==void 0?_:a.completedParams,G=a.actionableSuggestions,be=G[0],se=f?.listboxId??"",Se=a.activeDropdownIndex>=0&&f?`${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]:G,xe=!f||a.isLoading&&!a.editingParam&&!a.inSelectionAnimation;return{completedParams:Q,skippedParams:a.skippedParams,suggestionPills:G,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:S,placeholder:a.placeholderText||void 0,onChange:c,onKeyDown:m,onFocus:t.handleFocus,onBlur:t.handleBlur,role:"combobox","aria-expanded":a.isDropdownOpen,"aria-activedescendant":Se,"aria-autocomplete":"list","aria-controls":se},reset:t.reset,dropdownProps:{suggestions:ve?[{...ve,options:a.filteredOptions}]:[],activeIndex:a.activeDropdownIndex,onSelect:t.selectOption,onHighlight:t.setActiveDropdownIndex,isOpen:a.isDropdownOpen,id:se,pills:Ae,activeSelected:a.isActivePillSelected,onPillClick:t.setActivePill,isLoading:xe,isInputEmpty:S.trim().length===0,products:a.products,onProductSelect:t.selectProduct,onProductFocusChange:t.setFocused,optionsPosition:u??"below"}}}import{extractPlainText as lt,getCursorOffset as dt,plainTextLength as Vt,renderEditableContent as $t,setCursorOffset as pt}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as H,useEffect as Ne,useLayoutEffect as Me,useRef as pe}from"react";var Ie;function jt(){if(Ie!==void 0)return Ie;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Ie=e.contentEditable==="plaintext-only",Ie}function ct(e){let{segments:n,newParamId:i,editingParam:l,editingAnchor:s,caretOffset:r,placeholderText:o,isFocused:u,isDropdownOpen:g,listboxId:b,activeDescendantId:k,autoFocus:y,handleTextChange:A,handleKeyDown:_,handleCaretAfterInput:W,handleCaretMove:U,startEditingParam:J,replaceEditingRange:V,setFocused:C}=e,v=pe(null),p=pe(!1),Z=pe(""),$=pe(""),T=pe(null),E=pe(0);T.current=r,Ne(()=>{if(!y)return;let t=v.current;if(!t)return;document.activeElement===t?C(!0):t.focus();let c=t.ownerDocument??document,m=c.getSelection(),f=m&&m.rangeCount>0&&t.contains(m.anchorNode);if(m&&!f){let a=c.createRange();a.selectNodeContents(t),a.collapse(!0),m.removeAllRanges(),m.addRange(a)}},[y,C]),Ne(()=>{let t=v.current;if(!t)return;let c=t.ownerDocument??document,m=()=>{let f=c.getSelection();if(!f||f.rangeCount===0||!f.anchorNode||!t.contains(f.anchorNode))return;let a=f.anchorNode,G=(a.nodeType===Node.ELEMENT_NODE?a:a.parentElement)?.closest('strong[data-seg="completed"][data-param-id]')?.dataset.paramId??null;if(G&&G!==l?.id){J(G);return}performance.now()-E.current<50||U(dt(t))};return c.addEventListener("selectionchange",m),()=>c.removeEventListener("selectionchange",m)},[l,J,U]),Me(()=>{let t=v.current;t&&$t({input:t,segments:n,newParamId:i,editingParamId:l?.id??null,placeholderText:o??"",isFocused:u})},[n,i,l,o,u]),Me(()=>{let t=Z.current,c=i??"";if(Z.current=c,!c||c===t)return;let m=v.current;if(!m)return;m.focus();let f=T.current??Vt(m);pt(m,f)},[i]),Me(()=>{let t=$.current,c=l?.id??"";if($.current=c,!c||c===t||s==null)return;let m=v.current;m&&pt(m,s)},[l,s]);let I=H(()=>{if(p.current)return;let t=v.current;if(!t)return;let c=lt(t),f=c.length>0&&c[0]!==c[0].toUpperCase()?c[0].toUpperCase()+c.slice(1):c;A(f)},[A]),h=H(()=>{E.current=performance.now(),I();let t=v.current;t&&W(dt(t))},[I,W]);Ne(()=>{let t=v.current;if(!t)return;let c=m=>{let f=m,a=f.inputType;if(a==="insertParagraph"||a==="insertLineBreak"||a==="insertFromDrop"){m.preventDefault();return}if(a.startsWith("insert")||a.startsWith("delete")){let S=a.startsWith("delete")?"":f.data??"";V(S)&&m.preventDefault()}};return t.addEventListener("beforeinput",c),()=>t.removeEventListener("beforeinput",c)},[V]);let L=H(()=>{p.current=!0},[]),F=H(()=>{p.current=!1,I()},[I]),R=H(t=>{t.preventDefault();let c=v.current;if(!c)return;let m=(t.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!m)return;let f=c.ownerDocument??document,a=f.getSelection();if(!a||a.rangeCount===0)return;let S=a.getRangeAt(0);if(!c.contains(S.startContainer))return;S.deleteContents();let Q=f.createTextNode(m);S.insertNode(Q),S.setStartAfter(Q),S.collapse(!0),a.removeAllRanges(),a.addRange(S),I()},[I]),O=H(t=>_(t),[_]),j=H(()=>C(!0),[C]),q=H(()=>C(!1),[C]),K=H(()=>v.current?.focus(),[]),B=H(()=>v.current?.blur(),[]),Y=H(()=>{let t=v.current;return t?lt(t):""},[]),z=jt()?"plaintext-only":"true";return{inputRef:v,editorProps:{ref:v,contentEditable:z,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":b,"aria-expanded":g,"aria-activedescendant":k,spellCheck:!0,enterKeyHint:"send",onInput:h,onKeyDown:O,onCompositionStart:L,onCompositionEnd:F,onPaste:R,onFocus:j,onBlur:q},getPlainText:Y,focus:K,blur:B}}import{jsx as ce,jsxs as Oe}from"react/jsx-runtime";function ea(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var ta=qt(function({onSubmit:n,onError:i,optionOverrides:l,maskCompletedText:s,className:r,apiConfig:o,columns:u,pillPlacement:g="dropdown",mode:b="auto",optionsPosition:k="below",animations:y=!0,dropdownTrigger:A,closeDropdownOnBlur:_,showNonTappableOptions:W,autoFocus:U=!0,onFocus:J,onBlur:V,value:C,completedParams:v,onChange:p,onParamsChange:Z,products:$,onProductSelect:T,submitButton:E},I){let h=fe(null),L=fe(null),F=fe(()=>{}),R=fe(null),O=fe(null);ut(()=>{let x=h.current;if(x)return R.current?R.current.setMode(b):R.current=new Zt(x,b),()=>{R.current?.destroy(),R.current=null}},[b]);let j=He(x=>{let te=O.current?.current;te&&(te.focus(),Yt(te,x))},[]),{completedParams:q,skippedParams:K,suggestionPills:B,setActivePill:Y,segments:z,newParamId:t,clearNewParamId:c,placeholderText:m,isFocused:f,isDropdownOpen:a,isActivePillSelected:S,isLoading:Q,activeIndex:G,listboxId:be,handleTextChange:se,handleKeyDown:Se,setFocused:re,editingParam:ue,editingAnchor:ve,caretOffset:Ae,startEditingParam:xe,handleCaretAfterInput:d,handleCaretMove:P,replaceEditingRange:w,dropdownProps:le,reset:ee}=Be({onSubmit:x=>F.current(x),onError:i,optionOverrides:l,maskCompletedText:s,apiConfig:o,columns:u,dropdownTrigger:A,optionsPosition:k,closeDropdownOnBlur:_,showNonTappableOptions:W,onFocus:J,onBlur:V,value:C,completedParams:v,onChange:p,onParamsChange:Z,products:$,onProductSelect:T,source:"full-sdk",setCursor:j});ut(()=>{if(!t)return;let x=window.setTimeout(()=>c(),650);return()=>window.clearTimeout(x)},[t,c]);let mt=G>=0?`${be}-option-${G}`:void 0,{inputRef:Ce,editorProps:gt,focus:we,blur:Ke,getPlainText:Ge}=ct({segments:z,newParamId:t,editingParam:ue,editingAnchor:ve,caretOffset:Ae,placeholderText:m,isFocused:f,isDropdownOpen:a,listboxId:be,activeDescendantId:mt,autoFocus:U,handleTextChange:se,handleKeyDown:Se,handleCaretAfterInput:d,handleCaretMove:P,startEditingParam:xe,replaceEditingRange:w,setFocused:re});O.current=Ce,Xt(()=>{let x=L.current,te=Ce.current;if(!x||!te)return;let We=()=>{let Ve=x.firstElementChild;if(!Ve)return;let vt=Ve.getBoundingClientRect(),xt=te.getBoundingClientRect();vt.top>=xt.bottom-2?x.setAttribute("data-aia-pill-wrapped",""):x.removeAttribute("data-aia-pill-wrapped")};We();let Ue=new ResizeObserver(We);return Ue.observe(te),()=>Ue.disconnect()},[z,B.length,Q,Ce]),Qt(I,()=>({focus:we,blur:Ke,reset:ee,setMode:x=>R.current?.setMode(x)}),[we,Ke,ee]);let ye=!!z.length||q.length>0,Ee=He(()=>{if(!ye)return;let x=Ge();n(Jt(x,q,K)),ee()},[ye,q,K,n,ee,Ge]);F.current=Ee;let ht=He(x=>{x.target?.closest("[data-aia-pill]")||we()},[we]),ft=g==="inline",bt=g==="dropdown";return Oe("div",{ref:h,className:`magicx-aia ${ne.container} ${r??""}`,"data-pill-placement":g,"data-options-position":k,"data-animations":y?"on":"off","data-mode":ea(b),children:[ce(ze,{...le,showPills:bt}),Oe("div",{className:ne.inputWrapper,onClick:ht,children:[Oe("div",{className:ne.editorArea,"data-aia-editor":"",children:[ce("div",{...gt,className:ne.input,"data-aia-input":""}),ft&&(Q||B.length>0)&&ce("span",{ref:L,className:ne.pillListContainer,"data-aia-pill-list-container":"",children:ce(_e,{pills:B,activePillIndex:0,activeSelected:S,onSelectPill:Y,loading:Q})})]}),E===null?null:E===void 0?ce(it,{disabled:!ye,onClick:Ee}):ce("span",{"data-aia-submit":"",className:ne.submitSlot,onClick:x=>{ye&&(x.stopPropagation(),Ee())},children:E})]})]})});export{ta as AIAutocomplete,ze as AIAutocompleteDropdown,Eo as buildSubmitResult,Be as useAIAutocomplete,Ro as withSkippedParams};
|
|
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};
|
|
1386
1426
|
//# sourceMappingURL=index.mjs.map
|