@magicx-eng/ai-autocomplete-react 0.8.2 → 0.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +114 -51
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +113 -50
- 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
|
*
|
|
@@ -227,12 +248,11 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
227
248
|
halfway between its old value and the white behind it. */
|
|
228
249
|
--aia-dropdown-border: var(--aia-primitive-neutral-900-a50);
|
|
229
250
|
--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, 0.05);
|
|
230
|
-
/* Suggestion pills (Figma "ParamPill"): transparent fill
|
|
251
|
+
/* Suggestion pills (Figma "ParamPill"): transparent fill, no visible border;
|
|
231
252
|
per-pill opacity via getPillOpacity. */
|
|
232
253
|
--aia-pill-bg: var(--aia-primitive-neutral-750);
|
|
233
254
|
--aia-pill-color: var(--aia-primitive-neutral-300);
|
|
234
|
-
--aia-pill-
|
|
235
|
-
--aia-pill-font-size: 14px;
|
|
255
|
+
--aia-pill-font-size: 16px;
|
|
236
256
|
|
|
237
257
|
/* Completed params (Figma "RichTextPill"): compact faint-gray chip with
|
|
238
258
|
primary-color regular-weight text. -active is the hover / tapped (re-edit)
|
|
@@ -243,12 +263,15 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
243
263
|
--aia-completed-pill-color: var(--aia-primitive-neutral-0);
|
|
244
264
|
|
|
245
265
|
--aia-option-bg: var(--aia-primitive-blue-50);
|
|
246
|
-
|
|
266
|
+
/* Options read bigger + darker than the small-caps param labels above them. */
|
|
267
|
+
--aia-option-color: var(--aia-primitive-neutral-150);
|
|
247
268
|
--aia-option-color-selected: var(--aia-primitive-neutral-0);
|
|
248
|
-
--aia-option-font-size:
|
|
269
|
+
--aia-option-font-size: 16px;
|
|
249
270
|
|
|
250
271
|
--aia-written-text-color: var(--aia-primitive-neutral-0);
|
|
251
|
-
|
|
272
|
+
/* Match the option size so the typed query never reads smaller than the
|
|
273
|
+
choices below it. */
|
|
274
|
+
--aia-written-text-font-size: 16px;
|
|
252
275
|
--aia-caret-color: var(--aia-written-text-color, #000000);
|
|
253
276
|
|
|
254
277
|
--aia-submit-bg: var(--aia-primitive-neutral-0);
|
|
@@ -281,11 +304,10 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
281
304
|
\u03942) at 50% alpha; see the light-mode note above. */
|
|
282
305
|
--aia-dropdown-border: var(--aia-primitive-neutral-400-a50);
|
|
283
306
|
--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, 0.05);
|
|
284
|
-
/* Suggestion pills (Figma "ParamPill"): transparent fill
|
|
307
|
+
/* Suggestion pills (Figma "ParamPill"): transparent fill, no visible border. */
|
|
285
308
|
--aia-pill-bg: var(--aia-primitive-neutral-750);
|
|
286
309
|
--aia-pill-color: var(--aia-primitive-neutral-700);
|
|
287
|
-
--aia-pill-
|
|
288
|
-
--aia-pill-font-size: 14px;
|
|
310
|
+
--aia-pill-font-size: 16px;
|
|
289
311
|
|
|
290
312
|
/* Completed params (Figma "RichTextPill") \u2014 dark theme (design source):
|
|
291
313
|
white text on a faint-gray chip. -active is the hover / tapped highlight.
|
|
@@ -298,12 +320,13 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
298
320
|
--aia-completed-pill-color: var(--aia-primitive-neutral-1000);
|
|
299
321
|
|
|
300
322
|
--aia-option-bg: var(--aia-primitive-neutral-250);
|
|
301
|
-
|
|
323
|
+
/* Options read bigger + darker/brighter than the small-caps param labels. */
|
|
324
|
+
--aia-option-color: var(--aia-primitive-neutral-900);
|
|
302
325
|
--aia-option-color-selected: var(--aia-primitive-neutral-1000);
|
|
303
|
-
--aia-option-font-size:
|
|
326
|
+
--aia-option-font-size: 16px;
|
|
304
327
|
|
|
305
328
|
--aia-written-text-color: var(--aia-primitive-neutral-1000);
|
|
306
|
-
--aia-written-text-font-size:
|
|
329
|
+
--aia-written-text-font-size: 16px;
|
|
307
330
|
--aia-caret-color: var(--aia-written-text-color, #ffffff);
|
|
308
331
|
|
|
309
332
|
--aia-submit-bg: var(--aia-primitive-neutral-1000);
|
|
@@ -349,6 +372,30 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
349
372
|
--aia-footer-fade-inset: calc(-1 * var(--aia-footer-fade-lead)) 0 0;
|
|
350
373
|
}
|
|
351
374
|
|
|
375
|
+
/* In the dropdown, the parameter label reads as a section header for the
|
|
376
|
+
options beneath it \u2014 not an outlined chip floating over them. It drops the
|
|
377
|
+
pill's inner horizontal padding and left-aligns its text with the option
|
|
378
|
+
text below, which sits 10px in from the dropdown's content edge. The label's
|
|
379
|
+
own list wrapper carries that 10px so the text lands exactly on the option
|
|
380
|
+
text's left edge.
|
|
381
|
+
|
|
382
|
+
Selector shape differs from the vanilla/Angular copies (which target the
|
|
383
|
+
\`.aia-pill-list\` / \`.aia-pill\` class names): PillList's \`.list\` class is a
|
|
384
|
+
hash-scoped CSS-module local, unreachable from this global stylesheet, so
|
|
385
|
+
the wrapper is matched as PillList's own direct child \`> span\` of the
|
|
386
|
+
pill-bar Cluster, and the pill via \`[data-aia-pill]\` (unique to ParamPill).
|
|
387
|
+
Like the sibling structural \`[data-aia-dropdown]\` rules below, this is
|
|
388
|
+
deliberately NOT \`:where()\`-wrapped \u2014 it must win over ParamPill's own
|
|
389
|
+
\`.pill\` base rule. */
|
|
390
|
+
[data-aia-dropdown] [data-aia-pillbar] > span {
|
|
391
|
+
padding-inline: 10px;
|
|
392
|
+
}
|
|
393
|
+
[data-aia-dropdown] [data-aia-pillbar] [data-aia-pill] {
|
|
394
|
+
justify-content: flex-start;
|
|
395
|
+
border-inline-width: 0;
|
|
396
|
+
padding-inline: 0;
|
|
397
|
+
}
|
|
398
|
+
|
|
352
399
|
/* The reserved band the footer overlaps, kept OUT of \`@layer layout\` on
|
|
353
400
|
purpose. A consumer reset (\`* { margin: 0; padding: 0 }\`, Tailwind's
|
|
354
401
|
preflight, \u2026) is unlayered, and an unlayered declaration beats every layered
|
|
@@ -597,7 +644,7 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
597
644
|
justify-content: space-around;
|
|
598
645
|
}
|
|
599
646
|
}
|
|
600
|
-
`,document.head.appendChild(e)}import{jsx as
|
|
647
|
+
`,document.head.appendChild(e)}import{jsx as qe}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?qe("span",{...v,children:i}):qe("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
648
|
dropdown's rounded edges. The top inset (--aia-footer-gap) adds breathing
|
|
602
649
|
room above the hint/branding row so the footer doesn't butt against the last
|
|
603
650
|
option row \u2014 additive to the dropdown's 8px section gap. */
|
|
@@ -659,6 +706,17 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
659
706
|
border-radius: 6px;
|
|
660
707
|
}
|
|
661
708
|
|
|
709
|
+
/* The brand sits at the right edge where option rows scroll under the fade, so
|
|
710
|
+
"AI" was getting clipped / washed out. Give the whole brand its own opaque,
|
|
711
|
+
fully-rounded surface pill so it always reads clearly over the fade. Declared
|
|
712
|
+
after the shared .hintGroup/.brandLink chip rule so it wins. */
|
|
713
|
+
.DropdownFooter-module_brandLink_r4f3R {
|
|
714
|
+
background: var(--aia-footer-brand-pill-bg, var(--aia-surface, #ffffff));
|
|
715
|
+
border-radius: 999px;
|
|
716
|
+
padding: 2px 7px;
|
|
717
|
+
gap: 4px;
|
|
718
|
+
}
|
|
719
|
+
|
|
662
720
|
.DropdownFooter-module_brandLink_r4f3R:hover {
|
|
663
721
|
opacity: 0.7;
|
|
664
722
|
}
|
|
@@ -716,22 +774,27 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
716
774
|
justify-content: flex-end;
|
|
717
775
|
}
|
|
718
776
|
}
|
|
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
|
|
720
|
-
|
|
721
|
-
|
|
777
|
+
`,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 $e({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,
|
|
778
|
+
no outline. ~28px via 6px padding + 14px text + the 1px border (border-box).
|
|
779
|
+
The border is kept as a 1px transparent line so the box stays the same size
|
|
780
|
+
as it was when the outline was dashed. */
|
|
722
781
|
.ParamPill-module_pill_6Ga7S {
|
|
723
782
|
display: inline-flex;
|
|
724
783
|
align-items: center;
|
|
725
784
|
justify-content: center;
|
|
726
|
-
padding:
|
|
727
|
-
border: 1px
|
|
728
|
-
border-radius:
|
|
785
|
+
padding: 5px 8px;
|
|
786
|
+
border: 1px solid transparent;
|
|
787
|
+
border-radius: 7px;
|
|
729
788
|
background: transparent;
|
|
730
789
|
color: var(--aia-pill-color, var(--aia-color-text-muted, #c1c4cb));
|
|
731
790
|
font-family: inherit;
|
|
732
|
-
|
|
733
|
-
|
|
791
|
+
/* Param labels read as small-caps section headers: distinctly smaller than
|
|
792
|
+
the options they head (0.8\xD7 the pill knob), uppercased, and letter-spaced. */
|
|
793
|
+
font-size: calc(var(--aia-pill-font-size, 14px) * 0.8);
|
|
794
|
+
font-weight: 600;
|
|
734
795
|
line-height: normal;
|
|
796
|
+
text-transform: uppercase;
|
|
797
|
+
letter-spacing: 0.06em;
|
|
735
798
|
cursor: pointer;
|
|
736
799
|
white-space: nowrap;
|
|
737
800
|
animation: ParamPill-module_fadeIn_Ux4eQ 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
@@ -768,7 +831,7 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
768
831
|
opacity: 0;
|
|
769
832
|
}
|
|
770
833
|
}
|
|
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
|
|
834
|
+
`,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
835
|
position: relative;
|
|
773
836
|
z-index: 1;
|
|
774
837
|
pointer-events: auto;
|
|
@@ -778,7 +841,7 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
778
841
|
align-items: center;
|
|
779
842
|
vertical-align: middle;
|
|
780
843
|
}
|
|
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:
|
|
844
|
+
`,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
845
|
(packages/vanilla/src/styles.css). Same tokens, same defaults, so a consumer
|
|
783
846
|
theming one package sees the same result in the other.
|
|
784
847
|
|
|
@@ -945,7 +1008,7 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
945
1008
|
var(--aia-option-color-selected, var(--aia-color-text-default, #fff))
|
|
946
1009
|
);
|
|
947
1010
|
}
|
|
948
|
-
`,document.head.appendChild(e)}var
|
|
1011
|
+
`,document.head.appendChild(e)}var M={section:"ProductStrip-module_section_Hugfg",label:"ProductStrip-module_label_nuc93",row:"ProductStrip-module_row_WDVBX",card:"ProductStrip-module_card_JBGYT",media:"ProductStrip-module_media_RrbGe",image:"ProductStrip-module_image_5pNL7",body:"ProductStrip-module_body_ly032",vendor:"ProductStrip-module_vendor_Gvu7G",title:"ProductStrip-module_title_gCNmq",price:"ProductStrip-module_price_gULcE"};import{jsx as 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
1012
|
.aia-grid {
|
|
950
1013
|
display: grid;
|
|
951
1014
|
grid-template-columns: repeat(
|
|
@@ -980,7 +1043,7 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
980
1043
|
border-radius: 3px;
|
|
981
1044
|
}
|
|
982
1045
|
}
|
|
983
|
-
`,document.head.appendChild(e)}import{jsx as
|
|
1046
|
+
`,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
1047
|
position: relative;
|
|
985
1048
|
overflow: visible;
|
|
986
1049
|
display: flex;
|
|
@@ -988,16 +1051,16 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
988
1051
|
the same baseline at the top edge of the cell. */
|
|
989
1052
|
align-items: flex-start;
|
|
990
1053
|
font-family: inherit;
|
|
991
|
-
font-size: var(--aia-option-font-size,
|
|
992
|
-
font-weight:
|
|
993
|
-
line-height:
|
|
1054
|
+
font-size: var(--aia-option-font-size, 16px);
|
|
1055
|
+
font-weight: 450;
|
|
1056
|
+
line-height: 21px;
|
|
994
1057
|
color: var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));
|
|
995
1058
|
white-space: normal;
|
|
996
1059
|
word-break: break-word;
|
|
997
1060
|
/* 8px radius on the highlighted fill (--aia-option-bg), matching the Figma
|
|
998
|
-
SuggestionItem selection. The
|
|
1061
|
+
SuggestionItem selection. The 9px/10px inset is the item's own padding. */
|
|
999
1062
|
border-radius: 8px;
|
|
1000
|
-
padding:
|
|
1063
|
+
padding: 8px 10px;
|
|
1001
1064
|
animation: SuggestionItem-module_fadeIn_I8u35 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
1002
1065
|
}
|
|
1003
1066
|
|
|
@@ -1330,7 +1393,7 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
1330
1393
|
filter: brightness(0.55);
|
|
1331
1394
|
}
|
|
1332
1395
|
}
|
|
1333
|
-
`,document.head.appendChild(e)}var
|
|
1396
|
+
`,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
1397
|
.aia-stack {
|
|
1335
1398
|
display: flex;
|
|
1336
1399
|
flex-direction: column;
|
|
@@ -1347,7 +1410,7 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
1347
1410
|
}
|
|
1348
1411
|
/* data-align="stretch" is the flex default \u2014 no rule needed. */
|
|
1349
1412
|
}
|
|
1350
|
-
`,document.head.appendChild(e)}import{jsx as
|
|
1413
|
+
`,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],qt=()=>{};function $t(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=$t(V),x=C!==void 0,p=e[0]?.options??[],Z=!!(u&&u.length>0&&h),q=!!(P&&P.length>0),T=l&&(p.length>0||v&&Z||f||q),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),$=g.showPills&&H,j=g.showPills&&!H&&g.isLoading,G=$||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??qt,onFocusChange:U,focusable:T}),ie($e,{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
1414
|
flex-shrink: 0;
|
|
1352
1415
|
width: 32px;
|
|
1353
1416
|
height: 32px;
|
|
@@ -1382,5 +1445,5 @@ import{buildSubmitResult as Eo,withSkippedParams as Ro}from"@magicx-eng/ai-autoc
|
|
|
1382
1445
|
);
|
|
1383
1446
|
cursor: default;
|
|
1384
1447
|
}
|
|
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 S=D(W);S.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)=>S.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 I=d.subscribe(w=>$(w));return()=>{I(),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,I=i,w=Object.keys(d??{}),le=Object.keys(I??{});(w.length!==le.length||le.some(ee=>!d?.[ee]||I[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 I="nativeEvent"in d?d.nativeEvent:d;p.current?.handleKeyDown(I)},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 I=d.target.value,le=I.length>0&&!d.nativeEvent?.isComposing&&I[0]!==I[0].toUpperCase()?I[0].toUpperCase()+I.slice(1):I;p.current?.handleTextChange(le)},[]),m=st(d=>{p.current?.handleKeyDown(d.nativeEvent)},[]),f=p.current,a=Z??Ut,P=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:P,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:P.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,P=a.nodeType===Node.ELEMENT_NODE?a:a.parentElement,G=(f.isCollapsed?P?.closest('strong[data-seg="completed"][data-param-id]'):null)?.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 S=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(),S();let t=v.current;t&&W(dt(t))},[S,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 P=a.startsWith("delete")?"":f.data??"";V(P)&&m.preventDefault()}};return t.addEventListener("beforeinput",c),()=>t.removeEventListener("beforeinput",c)},[V]);let L=H(()=>{p.current=!0},[]),F=H(()=>{p.current=!1,S()},[S]),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 P=a.getRangeAt(0);if(!c.contains(P.startContainer))return;P.deleteContents();let Q=f.createTextNode(m);P.insertNode(Q),P.setStartAfter(Q),P.collapse(!0),a.removeAllRanges(),a.addRange(P),S()},[S]),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},S){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:P,isLoading:Q,activeIndex:G,listboxId:be,handleTextChange:se,handleKeyDown:Se,setFocused:re,editingParam:ue,editingAnchor:ve,caretOffset:Ae,startEditingParam:xe,handleCaretAfterInput:d,handleCaretMove:I,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:I,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(S,()=>({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:P,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};
|
|
1448
|
+
`,document.head.appendChild(e)}var ot={submitButton:"SubmitButton-module_submitButton_otz7H"};import{jsx as Be}from"react/jsx-runtime";function it({disabled:e,onClick:n}){return Be("button",{type:"button","data-aia-submit":"",className:ot.submitButton,disabled:e,onClick:o=>{o.stopPropagation(),n()},"aria-label":"Submit",children:Be("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:Be("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}import{AIAutocomplete as Qt}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as st,useEffect as ge,useRef as D,useState as Xt}from"react";import{useRef as rt}from"react";function nt(e){let n=rt(e);n.current=e;let o=rt(null);o.current===null&&(o.current={fetch:(l,s)=>{let i=n.current;return i?i.fetch(l,s):Promise.reject(new Error("products config removed"))},transform:l=>n.current?.transform(l)??[],get limit(){return n.current?.limit}});let r=e!==void 0;return{config:r?o.current:void 0,enabled:r}}var Jt={text:"",completedParams:[],identifiedParams:[],skippedParams:[],pendingSpan:null,suggestions:[],products:[],activeDropdownIndex:-1,newParamId:null,isLoading:!0,isReady:!1,error:null,segments:[],actionableSuggestions:[],filteredOptions:[],placeholderText:"",isDropdownOpen:!1,isActivePillSelected:!1,filterBase:0,filterInProgress:!1,pillTapped:!1,skipNextFetch:!1,lastRawQuery:"",isFocused:!1,editingParam:null,editingAnchor:null,editingTail:null,caretOffset:null,inSelectionAnimation:!1};function Fe({onSubmit:e,onError:n,optionOverrides:o,maskCompletedText:r,apiConfig:l,columns:s=2,dropdownTrigger:i,optionsPosition:u,closeDropdownOnBlur:h,showNonTappableOptions:v,onFocus:k,onBlur:f,value:_,completedParams:P,onChange:W,onParamsChange:U,products:J,onProductSelect:V,source:C,setCursor:x}){let p=D(null),[Z,q]=Xt(null),T=D(e);T.current=e;let E=D(n);E.current=n;let A=D(W);A.current=W;let g=D(U);g.current=U;let L=D(k);L.current=k;let B=D(f);B.current=f;let R=D(x);R.current=x;let H=D(V);H.current=V;let $=nt(J);ge(()=>{if(typeof document>"u")return;let d=new Qt(document.createElement("div"),{renderMode:"headless",apiConfig:l,optionOverrides:o,maskCompletedText:r,columns:s,dropdownTrigger:i,optionsPosition:u,closeDropdownOnBlur:h,showNonTappableOptions:v,source:C,value:_,completedParams:P,onSubmit:(...y)=>T.current?.(...y),onError:(...y)=>E.current?.(...y),onChange:(...y)=>A.current?.(...y),onParamsChange:(...y)=>g.current?.(...y),onFocus:()=>L.current?.(),onBlur:()=>B.current?.(),onProductSelect:y=>H.current?.(y),setCursor:y=>R.current?.(y),products:$.config});p.current=d,q(d.getState());let S=d.subscribe(y=>q(y));return()=>{S(),d.destroy(),p.current===d&&(p.current=null)}},[]),ge(()=>{_!==void 0&&p.current?.setValue(_)},[_]),ge(()=>{P!==void 0&&p.current?.setCompletedParams(P)},[P]);let j=JSON.stringify(l??null),G=D(o),F=D(0);if(o!==G.current){let d=G.current,S=o,y=Object.keys(d??{}),le=Object.keys(S??{});(y.length!==le.length||le.some(ee=>!d?.[ee]||S[ee]!==d[ee]))&&F.current++,G.current=o}ge(()=>{p.current?.update({apiConfig:l,optionOverrides:o,dropdownTrigger:i,optionsPosition:u,closeDropdownOnBlur:h,showNonTappableOptions:v})},[j,F.current,i,u,h,v]);let Y=D(!1);ge(()=>{if(!Y.current){Y.current=!0;return}p.current?.update({products:$.config})},[$.enabled]);let z=D(null);z.current===null&&(z.current={handleTextChange:d=>p.current?.handleTextChange(d),handleKeyDown:d=>{let S="nativeEvent"in d?d.nativeEvent:d;p.current?.handleKeyDown(S)},setFocused:d=>p.current?.setFocused(d),startEditingParam:d=>p.current?.startEditingParam(d),exitEditMode:()=>p.current?.exitEditMode(),handleCaretAfterInput:d=>p.current?.handleCaretAfterInput(d),handleCaretMove:d=>p.current?.handleCaretMove(d),replaceEditingRange:d=>p.current?.replaceEditingRange(d)??!1,setActivePill:d=>p.current?.setActivePill(d),removeLastParam:()=>p.current?.removeLastParam(),clearNewParamId:()=>p.current?.clearNewParamId(),reset:()=>p.current?.reset(),selectOption:d=>p.current?.selectOption(d),selectProduct:d=>p.current?.selectProduct(d),setActiveDropdownIndex:d=>p.current?.setActiveDropdownIndex(d),handleFocus:()=>p.current?.setFocused(!0),handleBlur:()=>p.current?.setFocused(!1)});let t=z.current,c=st(d=>{let S=d.target.value,le=S.length>0&&!d.nativeEvent?.isComposing&&S[0]!==S[0].toUpperCase()?S[0].toUpperCase()+S.slice(1):S;p.current?.handleTextChange(le)},[]),m=st(d=>{p.current?.handleKeyDown(d.nativeEvent)},[]),b=p.current,a=Z??Jt,I=_!==void 0?_:a.text,Q=P!==void 0?P:a.completedParams,K=a.actionableSuggestions,be=K[0],se=b?.listboxId??"",Se=a.activeDropdownIndex>=0&&b?`${se}-option-${a.activeDropdownIndex}`:void 0,re=a.editingParam,ue=re?{type:re.suggestionType,text:re.suggestionPlaceholder,required:!0,options:re.options}:null,ve=ue??be,Ae=ue?[ue]:K,xe=!b||a.isLoading&&!a.editingParam&&!a.inSelectionAnimation;return{completedParams:Q,skippedParams:a.skippedParams,suggestionPills:K,setActivePill:t.setActivePill,removeLastParam:t.removeLastParam,segments:a.segments,newParamId:a.newParamId,clearNewParamId:t.clearNewParamId,suggestions:a.suggestions,activeIndex:a.activeDropdownIndex,isReady:a.isReady,isLoading:xe,isFocused:a.isFocused,isDropdownOpen:a.isDropdownOpen,isActivePillSelected:a.isActivePillSelected,placeholderText:a.placeholderText,listboxId:se,error:a.error,products:a.products,selectProduct:t.selectProduct,handleTextChange:t.handleTextChange,handleKeyDown:t.handleKeyDown,setFocused:t.setFocused,editingParam:re,editingAnchor:a.editingAnchor,caretOffset:a.caretOffset,startEditingParam:t.startEditingParam,exitEditMode:t.exitEditMode,handleCaretAfterInput:t.handleCaretAfterInput,handleCaretMove:t.handleCaretMove,replaceEditingRange:t.replaceEditingRange,inputProps:{value:I,placeholder:a.placeholderText||void 0,onChange:c,onKeyDown:m,onFocus:t.handleFocus,onBlur:t.handleBlur,role:"combobox","aria-expanded":a.isDropdownOpen,"aria-activedescendant":Se,"aria-autocomplete":"list","aria-controls":se},reset:t.reset,dropdownProps:{suggestions:ve?[{...ve,options:a.filteredOptions}]:[],activeIndex:a.activeDropdownIndex,onSelect:t.selectOption,onHighlight:t.setActiveDropdownIndex,isOpen:a.isDropdownOpen,id:se,pills:Ae,activeSelected:a.isActivePillSelected,onPillClick:t.setActivePill,isLoading:xe,isInputEmpty:I.trim().length===0,products:a.products,onProductSelect:t.selectProduct,onProductFocusChange:t.setFocused,optionsPosition:u??"below"}}}import{extractPlainText as lt,getCursorOffset as dt,plainTextLength as Zt,renderEditableContent as Yt,setCursorOffset as pt}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as N,useEffect as Me,useLayoutEffect as Oe,useRef as pe}from"react";var Ie;function ea(){if(Ie!==void 0)return Ie;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Ie=e.contentEditable==="plaintext-only",Ie}function ct(e){let{segments:n,newParamId:o,editingParam:r,editingAnchor:l,caretOffset:s,placeholderText:i,isFocused:u,isDropdownOpen:h,listboxId:v,activeDescendantId:k,autoFocus:f,handleTextChange:_,handleKeyDown:P,handleCaretAfterInput:W,handleCaretMove:U,startEditingParam:J,replaceEditingRange:V,setFocused:C}=e,x=pe(null),p=pe(!1),Z=pe(""),q=pe(""),T=pe(null),E=pe(0);T.current=s,Me(()=>{if(!f)return;let t=x.current;if(!t)return;document.activeElement===t?C(!0):t.focus();let c=t.ownerDocument??document,m=c.getSelection(),b=m&&m.rangeCount>0&&t.contains(m.anchorNode);if(m&&!b){let a=c.createRange();a.selectNodeContents(t),a.collapse(!0),m.removeAllRanges(),m.addRange(a)}},[f,C]),Me(()=>{let t=x.current;if(!t)return;let c=t.ownerDocument??document,m=()=>{let b=c.getSelection();if(!b||b.rangeCount===0||!b.anchorNode||!t.contains(b.anchorNode))return;let a=b.anchorNode,I=a.nodeType===Node.ELEMENT_NODE?a:a.parentElement,K=(b.isCollapsed?I?.closest('strong[data-seg="completed"][data-param-id]'):null)?.dataset.paramId??null;if(K&&K!==r?.id){J(K);return}performance.now()-E.current<50||U(dt(t))};return c.addEventListener("selectionchange",m),()=>c.removeEventListener("selectionchange",m)},[r,J,U]),Oe(()=>{let t=x.current;t&&Yt({input:t,segments:n,newParamId:o,editingParamId:r?.id??null,placeholderText:i??"",isFocused:u})},[n,o,r,i,u]),Oe(()=>{let t=Z.current,c=o??"";if(Z.current=c,!c||c===t)return;let m=x.current;if(!m)return;m.focus();let b=T.current??Zt(m);pt(m,b)},[o]),Oe(()=>{let t=q.current,c=r?.id??"";if(q.current=c,!c||c===t||l==null)return;let m=x.current;m&&pt(m,l)},[r,l]);let A=N(()=>{if(p.current)return;let t=x.current;if(!t)return;let c=lt(t),b=c.length>0&&c[0]!==c[0].toUpperCase()?c[0].toUpperCase()+c.slice(1):c;_(b)},[_]),g=N(()=>{E.current=performance.now(),A();let t=x.current;t&&W(dt(t))},[A,W]);Me(()=>{let t=x.current;if(!t)return;let c=m=>{let b=m,a=b.inputType;if(a==="insertParagraph"||a==="insertLineBreak"||a==="insertFromDrop"){m.preventDefault();return}if(a.startsWith("insert")||a.startsWith("delete")){let I=a.startsWith("delete")?"":b.data??"";V(I)&&m.preventDefault()}};return t.addEventListener("beforeinput",c),()=>t.removeEventListener("beforeinput",c)},[V]);let L=N(()=>{p.current=!0},[]),B=N(()=>{p.current=!1,A()},[A]),R=N(t=>{t.preventDefault();let c=x.current;if(!c)return;let m=(t.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!m)return;let b=c.ownerDocument??document,a=b.getSelection();if(!a||a.rangeCount===0)return;let I=a.getRangeAt(0);if(!c.contains(I.startContainer))return;I.deleteContents();let Q=b.createTextNode(m);I.insertNode(Q),I.setStartAfter(Q),I.collapse(!0),a.removeAllRanges(),a.addRange(I),A()},[A]),H=N(t=>P(t),[P]),$=N(()=>C(!0),[C]),j=N(()=>C(!1),[C]),G=N(()=>x.current?.focus(),[]),F=N(()=>x.current?.blur(),[]),Y=N(()=>{let t=x.current;return t?lt(t):""},[]),z=ea()?"plaintext-only":"true";return{inputRef:x,editorProps:{ref:x,contentEditable:z,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":v,"aria-expanded":h,"aria-activedescendant":k,spellCheck:!0,enterKeyHint:"send",onInput:g,onKeyDown:H,onCompositionStart:L,onCompositionEnd:B,onPaste:R,onFocus:$,onBlur:j},getPlainText:Y,focus:G,blur:F}}import{jsx as ce,jsxs as He}from"react/jsx-runtime";function sa(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var la=ta(function({onSubmit:n,onError:o,optionOverrides:r,maskCompletedText:l,className:s,apiConfig:i,columns:u,pillPlacement:h="dropdown",mode:v="auto",optionsPosition:k="below",animations:f=!0,dropdownTrigger:_,closeDropdownOnBlur:P,showNonTappableOptions:W,autoFocus:U=!0,onFocus:J,onBlur:V,value:C,completedParams:x,onChange:p,onParamsChange:Z,products:q,onProductSelect:T,submitButton:E},A){let g=fe(null),L=fe(null),B=fe(()=>{}),R=fe(null),H=fe(null);ut(()=>{let w=g.current;if(w)return R.current?R.current.setMode(v):R.current=new ra(w,v),()=>{R.current?.destroy(),R.current=null}},[v]);let $=Ne(w=>{let te=H.current?.current;te&&(te.focus(),na(te,w))},[]),{completedParams:j,skippedParams:G,suggestionPills:F,setActivePill:Y,segments:z,newParamId:t,clearNewParamId:c,placeholderText:m,isFocused:b,isDropdownOpen:a,isActivePillSelected:I,isLoading:Q,activeIndex:K,listboxId:be,handleTextChange:se,handleKeyDown:Se,setFocused:re,editingParam:ue,editingAnchor:ve,caretOffset:Ae,startEditingParam:xe,handleCaretAfterInput:d,handleCaretMove:S,replaceEditingRange:y,dropdownProps:le,reset:ee}=Fe({onSubmit:w=>B.current(w),onError:o,optionOverrides:r,maskCompletedText:l,apiConfig:i,columns:u,dropdownTrigger:_,optionsPosition:k,closeDropdownOnBlur:P,showNonTappableOptions:W,onFocus:J,onBlur:V,value:C,completedParams:x,onChange:p,onParamsChange:Z,products:q,onProductSelect:T,source:"full-sdk",setCursor:$});ut(()=>{if(!t)return;let w=window.setTimeout(()=>c(),650);return()=>window.clearTimeout(w)},[t,c]);let mt=K>=0?`${be}-option-${K}`:void 0,{inputRef:Ce,editorProps:ht,focus:we,blur:Ge,getPlainText:Ke}=ct({segments:z,newParamId:t,editingParam:ue,editingAnchor:ve,caretOffset:Ae,placeholderText:m,isFocused:b,isDropdownOpen:a,listboxId:be,activeDescendantId:mt,autoFocus:U,handleTextChange:se,handleKeyDown:Se,handleCaretAfterInput:d,handleCaretMove:S,startEditingParam:xe,replaceEditingRange:y,setFocused:re});H.current=Ce,oa(()=>{let w=L.current,te=Ce.current;if(!w||!te)return;let We=()=>{let Ve=w.firstElementChild;if(!Ve)return;let vt=Ve.getBoundingClientRect(),xt=te.getBoundingClientRect();vt.top>=xt.bottom-2?w.setAttribute("data-aia-pill-wrapped",""):w.removeAttribute("data-aia-pill-wrapped")};We();let Ue=new ResizeObserver(We);return Ue.observe(te),()=>Ue.disconnect()},[z,F.length,Q,Ce]),aa(A,()=>({focus:we,blur:Ge,reset:ee,setMode:w=>R.current?.setMode(w)}),[we,Ge,ee]);let ye=!!z.length||j.length>0,Ee=Ne(()=>{if(!ye)return;let w=Ke();n(ia(w,j,G)),ee()},[ye,j,G,n,ee,Ke]);B.current=Ee;let gt=Ne(w=>{w.target?.closest("[data-aia-pill]")||we()},[we]),ft=h==="inline",bt=h==="dropdown";return He("div",{ref:g,className:`magicx-aia ${ne.container} ${s??""}`,"data-pill-placement":h,"data-options-position":k,"data-animations":f?"on":"off","data-mode":sa(v),children:[ce(ze,{...le,showPills:bt}),He("div",{className:ne.inputWrapper,onClick:gt,children:[He("div",{className:ne.editorArea,"data-aia-editor":"",children:[ce("div",{...ht,className:ne.input,"data-aia-input":""}),ft&&(Q||F.length>0)&&ce("span",{ref:L,className:ne.pillListContainer,"data-aia-pill-list-container":"",children:ce(_e,{pills:F,activePillIndex:0,activeSelected:I,onSelectPill:Y,loading:Q})})]}),E===null?null:E===void 0?ce(it,{disabled:!ye,onClick:Ee}):ce("span",{"data-aia-submit":"",className:ne.submitSlot,onClick:w=>{ye&&(w.stopPropagation(),Ee())},children:E})]})]})});export{la as AIAutocomplete,ze as AIAutocompleteDropdown,No as buildSubmitResult,Fe as useAIAutocomplete,Ho as withSkippedParams};
|
|
1386
1449
|
//# sourceMappingURL=index.mjs.map
|