@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.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var Ge=Object.defineProperty;var _t=Object.getOwnPropertyDescriptor;var Pt=Object.getOwnPropertyNames;var It=Object.prototype.hasOwnProperty;var St=(e,o)=>{for(var a in o)Ge(e,a,{get:o[a],enumerable:!0})},At=(e,o,a,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of Pt(o))!It.call(e,s)&&s!==a&&Ge(e,s,{get:()=>o[s],enumerable:!(n=_t(o,s))||n.enumerable});return e};var Ct=e=>At(Ge({},"__esModule",{value:!0}),e);var Ot={};St(Ot,{AIAutocomplete:()=>gt,AIAutocompleteDropdown:()=>Te,buildSubmitResult:()=>Fe.buildSubmitResult,useAIAutocomplete:()=>ze,withSkippedParams:()=>Fe.withSkippedParams});module.exports=Ct(Ot);var Fe=require("@magicx-eng/ai-autocomplete-vanilla");var _=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-67791514")){let e=document.createElement("style");e.id="ac-style-67791514",e.textContent=`.AIAutocomplete-module_container_KKjFU {
|
|
2
2
|
position: relative;
|
|
3
3
|
/* Inherits the host page's font by default. Consumers can pin a specific
|
|
4
4
|
font on the library via \`--aia-font-family: 'Custom Font'\` without
|
|
@@ -15,7 +15,9 @@
|
|
|
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 @@
|
|
|
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 @@
|
|
|
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 @@
|
|
|
158
179
|
opacity: 0;
|
|
159
180
|
}
|
|
160
181
|
}
|
|
161
|
-
`,document.head.appendChild(e)}var ce={container:"AIAutocomplete-module_container_KKjFU",inputWrapper:"AIAutocomplete-module_inputWrapper_FLq1b",editorArea:"AIAutocomplete-module_editorArea_7rBWq",input:"AIAutocomplete-module_input_IW-P-",pillListContainer:"AIAutocomplete-module_pillListContainer_h92IA",submitSlot:"AIAutocomplete-module_submitSlot_GhuCM",aiaPillReveal:"AIAutocomplete-module_aiaPillReveal_wf05b"};var
|
|
182
|
+
`,document.head.appendChild(e)}var ce={container:"AIAutocomplete-module_container_KKjFU",inputWrapper:"AIAutocomplete-module_inputWrapper_FLq1b",editorArea:"AIAutocomplete-module_editorArea_7rBWq",input:"AIAutocomplete-module_input_IW-P-",pillListContainer:"AIAutocomplete-module_pillListContainer_h92IA",submitSlot:"AIAutocomplete-module_submitSlot_GhuCM",aiaPillReveal:"AIAutocomplete-module_aiaPillReveal_wf05b"};var ve=require("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 @@
|
|
|
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 @@
|
|
|
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 @@
|
|
|
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 @@
|
|
|
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 @@
|
|
|
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
|
|
@@ -555,7 +602,7 @@
|
|
|
555
602
|
opacity: 0.25;
|
|
556
603
|
}
|
|
557
604
|
}
|
|
558
|
-
`,document.head.appendChild(e)}var
|
|
605
|
+
`,document.head.appendChild(e)}var he={dropdown:"AIAutocompleteDropdown-module_dropdown_yz2KC",visible:"AIAutocompleteDropdown-module_visible_QCoXj",pillBar:"AIAutocompleteDropdown-module_pillBar_pwTXe",skeletonBars:"AIAutocompleteDropdown-module_skeletonBars_HVr9C",skeletonBar:"AIAutocompleteDropdown-module_skeletonBar_O3xIx",aiaSkeletonPulse:"AIAutocompleteDropdown-module_aiaSkeletonPulse_G8W7q"};var ge=require("@magicx-eng/ai-autocomplete-vanilla"),Ce=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-5259a217")){let e=document.createElement("style");e.id="ac-style-5259a217",e.textContent=`@layer layout {
|
|
559
606
|
.aia-cluster {
|
|
560
607
|
display: flex;
|
|
561
608
|
flex-wrap: wrap;
|
|
@@ -597,7 +644,7 @@
|
|
|
597
644
|
justify-content: space-around;
|
|
598
645
|
}
|
|
599
646
|
}
|
|
600
|
-
`,document.head.appendChild(e)}var
|
|
647
|
+
`,document.head.appendChild(e)}var Ke=require("react/jsx-runtime");function ye({gap:e,align:o="center",justify:a="start",noWrap:n=!1,inline:s=!1,className:l,children:r,...u}){let g=e?{"--aia-cluster-gap":e}:void 0,w={className:l?`aia-cluster ${l}`:"aia-cluster","data-align":o,"data-justify":a,"data-nowrap":n||void 0,"data-inline":s||void 0,style:g,...u};return s?(0,Ke.jsx)("span",{...w,children:r}):(0,Ke.jsx)("div",{...w,children:r})}if(typeof document<"u"&&!document.getElementById("ac-style-56b0c577")){let e=document.createElement("style");e.id="ac-style-56b0c577",e.textContent=`/* The footer adds its own 8px horizontal inset so it stays clear of the
|
|
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 @@
|
|
|
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 @@
|
|
|
716
774
|
justify-content: flex-end;
|
|
717
775
|
}
|
|
718
776
|
}
|
|
719
|
-
`,document.head.appendChild(e)}var ae={footer:"DropdownFooter-module_footer_qQQ7x",hintGroup:"DropdownFooter-module_hintGroup_ZzbPf",brandLink:"DropdownFooter-module_brandLink_r4f3R",key:"DropdownFooter-module_key_Bz1H-",hint:"DropdownFooter-module_hint_GKEOH",brand:"DropdownFooter-module_brand_Al-lR",badge:"DropdownFooter-module_badge_Fk9vg",row:"DropdownFooter-module_row_BgZ6Q"};var
|
|
720
|
-
|
|
721
|
-
|
|
777
|
+
`,document.head.appendChild(e)}var ae={footer:"DropdownFooter-module_footer_qQQ7x",hintGroup:"DropdownFooter-module_hintGroup_ZzbPf",brandLink:"DropdownFooter-module_brandLink_r4f3R",key:"DropdownFooter-module_key_Bz1H-",hint:"DropdownFooter-module_hint_GKEOH",brand:"DropdownFooter-module_brand_Al-lR",badge:"DropdownFooter-module_badge_Fk9vg",row:"DropdownFooter-module_row_BgZ6Q"};var j=require("react/jsx-runtime");function Ze({isOptionHighlighted:e=!1,isInputEmpty:o=!1}){let{key:a,hint:n}=(0,ge.getFooterHint)(e,o),[s,l]=(0,Ce.useState)(ge.ATTRIBUTION_URL);return(0,Ce.useEffect)(()=>{l((0,ge.buildAttributionUrl)())},[]),(0,j.jsx)("footer",{className:ae.footer,"data-aia-footer":"",children:(0,j.jsxs)(ye,{justify:"between",noWrap:!0,className:ae.row,children:[(0,j.jsxs)(ye,{gap:"5px",className:ae.hintGroup,children:[(0,j.jsx)("kbd",{className:ae.key,children:a}),(0,j.jsx)("span",{className:ae.hint,children:n})]}),(0,j.jsxs)("a",{className:ae.brandLink,href:s,target:"_blank",rel:"noopener noreferrer",children:[(0,j.jsx)("span",{className:ae.brand,children:"AI"}),(0,j.jsx)("span",{className:ae.badge,children:"Autocomplete"})]})]})})}if(typeof document<"u"&&!document.getElementById("ac-style-199d0432")){let e=document.createElement("style");e.id="ac-style-199d0432",e.textContent=`/* ParamPill (Figma "ParamPill") \u2014 unfilled suggestion pill: transparent fill,
|
|
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 @@
|
|
|
768
831
|
opacity: 0;
|
|
769
832
|
}
|
|
770
833
|
}
|
|
771
|
-
`,document.head.appendChild(e)}var le={pill:"ParamPill-module_pill_6Ga7S",fadeIn:"ParamPill-module_fadeIn_Ux4eQ",rounded:"ParamPill-module_rounded_y7xA9",skeleton:"ParamPill-module_skeleton_57P0T",skeletonPulse:"ParamPill-module_skeletonPulse_xGcUy"};var
|
|
834
|
+
`,document.head.appendChild(e)}var le={pill:"ParamPill-module_pill_6Ga7S",fadeIn:"ParamPill-module_fadeIn_Ux4eQ",rounded:"ParamPill-module_rounded_y7xA9",skeleton:"ParamPill-module_skeleton_57P0T",skeletonPulse:"ParamPill-module_skeletonPulse_xGcUy"};var et=require("react/jsx-runtime"),We={selected:1,first:.7,next:.4,last:.2};function Ye({label:e,state:o,rounded:a,loading:n,onClick:s}){let l=[le.pill,a?le.rounded:"",n?le.skeleton:""].filter(Boolean).join(" ");return(0,et.jsx)("button",{type:"button","data-aia-pill":"","data-aia-loading":n?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:l,style:{opacity:We[o]},onMouseDown:r=>r.preventDefault(),onClick:n?void 0:s,disabled:n,children:e})}if(typeof document<"u"&&!document.getElementById("ac-style-0fcb7940")){let e=document.createElement("style");e.id="ac-style-0fcb7940",e.textContent=`.PillList-module_list_qvLqO {
|
|
772
835
|
position: relative;
|
|
773
836
|
z-index: 1;
|
|
774
837
|
pointer-events: auto;
|
|
@@ -778,7 +841,7 @@
|
|
|
778
841
|
align-items: center;
|
|
779
842
|
vertical-align: middle;
|
|
780
843
|
}
|
|
781
|
-
`,document.head.appendChild(e)}var
|
|
844
|
+
`,document.head.appendChild(e)}var Ue={list:"PillList-module_list_qvLqO"};var ke=require("react/jsx-runtime"),Et=[125,69];function tt(e){return e===0?"first":e===1?"next":"last"}function Ee({pills:e,activePillIndex:o,onSelectPill:a,activeSelected:n,rounded:s,loading:l}){return l&&e.length===0?(0,ke.jsx)("span",{className:Ue.list,"data-aia-pill-list-loading":"",children:Et.map((r,u)=>(0,ke.jsx)("span",{"data-aia-pill-skeleton":"",className:`${le.pill} ${s?le.rounded:""} ${le.skeleton}`,style:{width:r,opacity:We[tt(u)]}},`skel-${r}`))}):(0,ke.jsx)("span",{className:Ue.list,"data-aia-pill-list-loading":l?"":void 0,children:e.map((r,u)=>{let g=!!n&&u===o;return(0,ke.jsx)(Ye,{label:r.text,state:g?"selected":tt(u),selected:g,rounded:s,loading:l,onClick:()=>a(u)},`${r.type}-${r.text}`)})})}if(typeof document<"u"&&!document.getElementById("ac-style-fef1688d")){let e=document.createElement("style");e.id="ac-style-fef1688d",e.textContent=`/* Product strip \u2014 the React counterpart of the vanilla core's strip rules
|
|
782
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 @@
|
|
|
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 G={section:"ProductStrip-module_section_Hugfg",label:"ProductStrip-module_label_nuc93",row:"ProductStrip-module_row_WDVBX",card:"ProductStrip-module_card_JBGYT",media:"ProductStrip-module_media_RrbGe",image:"ProductStrip-module_image_5pNL7",body:"ProductStrip-module_body_ly032",vendor:"ProductStrip-module_vendor_Gvu7G",title:"ProductStrip-module_title_gCNmq",price:"ProductStrip-module_price_gULcE"};var z=require("react/jsx-runtime");function at({products:e,listboxId:o,onSelect:a,onFocusChange:n,focusable:s=!0}){if(e.length===0)return null;let l=`${o}-products-label`;return(0,z.jsxs)("section",{className:G.section,"data-aia-products":"",role:"group","aria-labelledby":l,children:[(0,z.jsx)("div",{className:G.label,id:l,children:"Products"}),(0,z.jsx)("div",{className:G.row,"data-aia-products-row":"",children:e.map((r,u)=>(0,z.jsx)(Rt,{product:r,id:`${o}-product-${u}`,onSelect:a,onFocusChange:n,focusable:s},r.id))})]})}function Rt({product:e,id:o,onSelect:a,onFocusChange:n,focusable:s}){let l=r=>{r.metaKey||r.ctrlKey||r.shiftKey||r.altKey||r.button!==0||(r.preventDefault(),a(e))};return(0,z.jsxs)("a",{id:o,className:G.card,"data-aia-product":"",role:"option","aria-selected":!1,href:e.url,tabIndex:s?0:-1,onClick:l,onKeyDown:r=>{r.key!=="Enter"&&r.key!==" "||(r.preventDefault(),a(e))},onFocus:()=>n?.(!0),onBlur:r=>{r.relatedTarget?.closest("[data-aia-dropdown]")||n?.(!1)},children:[(0,z.jsx)("span",{className:G.media,"data-aia-product-placeholder":e.imageUrl?void 0:"",children:e.imageUrl?(0,z.jsx)("img",{className:G.image,src:e.imageUrl,alt:"",loading:"lazy",decoding:"async"}):null}),(0,z.jsxs)("span",{className:G.body,children:[e.vendor?(0,z.jsx)("span",{className:G.vendor,children:e.vendor}):null,(0,z.jsx)("span",{className:G.title,children:e.title}),e.price?(0,z.jsx)("span",{className:G.price,children:e.price}):null]})]})}var be=require("@magicx-eng/ai-autocomplete-vanilla"),De=require("react");var ot=require("@magicx-eng/ai-autocomplete-vanilla"),Re=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-948e58da")){let e=document.createElement("style");e.id="ac-style-948e58da",e.textContent=`@layer layout {
|
|
949
1012
|
.aia-grid {
|
|
950
1013
|
display: grid;
|
|
951
1014
|
grid-template-columns: repeat(
|
|
@@ -980,7 +1043,7 @@
|
|
|
980
1043
|
border-radius: 3px;
|
|
981
1044
|
}
|
|
982
1045
|
}
|
|
983
|
-
`,document.head.appendChild(e)}var
|
|
1046
|
+
`,document.head.appendChild(e)}var rt=require("react/jsx-runtime");function it({min:e="16rem",max:o,gap:a,scroll:n=!1,maxHeight:s,scrollResetKey:l,cols:r,className:u,children:g,...w}){let I=(0,Re.useRef)(null);(0,Re.useLayoutEffect)(()=>{if(l===void 0)return;let S=I.current;S&&(S.scrollTop=0)},[l]);let v={"--aia-grid-min":e};return o&&(v["--aia-grid-max"]=o),a&&(v["--aia-grid-gap"]=a),s&&(v["--aia-grid-max-height"]=s),r&&(v.gridTemplateColumns=(0,ot.optionsGridTemplateColumns)(r)),(0,rt.jsx)("div",{ref:I,className:u?`aia-grid ${u}`:"aia-grid","data-scroll":n||void 0,style:v,...w,children:g})}var fe=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-82820da7")){let e=document.createElement("style");e.id="ac-style-82820da7",e.textContent=`.SuggestionItem-module_item_d4vpD {
|
|
984
1047
|
position: relative;
|
|
985
1048
|
overflow: visible;
|
|
986
1049
|
display: flex;
|
|
@@ -988,16 +1051,16 @@
|
|
|
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 @@
|
|
|
1330
1393
|
filter: brightness(0.55);
|
|
1331
1394
|
}
|
|
1332
1395
|
}
|
|
1333
|
-
`,document.head.appendChild(e)}var
|
|
1396
|
+
`,document.head.appendChild(e)}var K={item:"SuggestionItem-module_item_d4vpD",fadeIn:"SuggestionItem-module_fadeIn_I8u35",content:"SuggestionItem-module_content_T-Qba",tappable:"SuggestionItem-module_tappable_70KcX",nonTappable:"SuggestionItem-module_nonTappable_xSZM-",highlighted:"SuggestionItem-module_highlighted_Hb0SU",tag:"SuggestionItem-module_tag_e3Fwe",pressed:"SuggestionItem-module_pressed_98o-r",glassFade:"SuggestionItem-module_glassFade_oyiSj",tapDown:"SuggestionItem-module_tapDown_G3WGz",streaks:"SuggestionItem-module_streaks_d9PEB",streaksVert:"SuggestionItem-module_streaksVert_ERlV1",streakHorizRight:"SuggestionItem-module_streakHorizRight_aboGz",streakHorizLeft:"SuggestionItem-module_streakHorizLeft_BreWJ",streakVertUp:"SuggestionItem-module_streakVertUp_to1GD",streakVertDown:"SuggestionItem-module_streakVertDown_OrcLh",skeletonPulse:"SuggestionItem-module_skeletonPulse_plvdD",text:"SuggestionItem-module_text_yqoh9"};var de=require("react/jsx-runtime");function nt({option:e,isHighlighted:o,onSelect:a,onHighlight:n,id:s,loading:l}){let[r,u]=(0,fe.useState)(!1),g=(0,fe.useRef)(void 0);(0,fe.useEffect)(()=>()=>clearTimeout(g.current),[]);let w=()=>{l||!e.is_tappable||r||(u(!0),a(e),clearTimeout(g.current),g.current=setTimeout(()=>u(!1),500))},I=[K.item,o&&!l?K.highlighted:"",e.is_tappable?K.tappable:K.nonTappable,r?K.pressed:""].filter(Boolean).join(" ");return(0,de.jsxs)("div",{id:s,role:"option","data-aia-option":"","data-aia-loading":l?"":void 0,"aria-selected":o,className:I,tabIndex:l||!e.is_tappable?-1:0,onClick:w,onKeyDown:v=>{!l&&e.is_tappable&&(v.key==="Enter"||v.key===" ")&&(v.preventDefault(),w())},onMouseEnter:!l&&e.is_tappable?n:void 0,children:[(0,de.jsx)("div",{className:K.streaks}),(0,de.jsx)("div",{className:K.streaksVert}),(0,de.jsxs)("span",{className:K.content,children:[(0,de.jsx)("span",{className:K.text,children:e.icon?`${e.icon} ${e.text}`:e.text}),e.tag&&(0,de.jsx)("span",{className:K.tag,children:e.tag})]})]})}var Ve=require("react/jsx-runtime");function Dt(){let[e,o]=(0,De.useState)(be.isOptionsGridMobileViewport);return(0,De.useEffect)(()=>{if(typeof window>"u"||!window.matchMedia)return;let a=window.matchMedia(be.OPTIONS_GRID_MOBILE_QUERY),n=()=>o(a.matches);return n(),a.addEventListener("change",n),()=>a.removeEventListener("change",n)},[]),e}function st({options:e,activeIndex:o,onSelect:a,onHighlight:n,listboxId:s,loading:l,groupKey:r}){let u=Dt(),{cols:g,maxHeight:w}=(0,be.computeOptionsGridLayout)(e.length,u);return(0,Ve.jsx)(it,{min:"250px",max:"1fr",gap:"0",scroll:!0,scrollResetKey:r,cols:g,maxHeight:w,children:e.map((I,v)=>(0,Ve.jsx)(nt,{option:I,isHighlighted:v===o,onSelect:a,onHighlight:()=>n(v),id:`${s}-option-${v}`,loading:l},I.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 @@
|
|
|
1347
1410
|
}
|
|
1348
1411
|
/* data-align="stretch" is the flex default \u2014 no rule needed. */
|
|
1349
1412
|
}
|
|
1350
|
-
`,document.head.appendChild(e)}var
|
|
1413
|
+
`,document.head.appendChild(e)}var dt=require("react/jsx-runtime");function lt({space:e,align:o="stretch",className:a,children:n,...s}){let l=e?{"--aia-stack-space":e}:void 0;return(0,dt.jsx)("div",{className:a?`aia-stack ${a}`:"aia-stack","data-align":o,style:l,...s,children:n})}var W=require("react/jsx-runtime"),Tt=[159,119,164],Lt=()=>{};function zt(e){let o=()=>typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches,[a,n]=(0,ve.useState)(o);if((0,ve.useEffect)(()=>{if(e!=="auto"||typeof window>"u"||typeof window.matchMedia!="function")return;let s=window.matchMedia("(prefers-color-scheme: dark)"),l=()=>n(s.matches);return s.addEventListener("change",l),()=>s.removeEventListener("change",l)},[e]),e!==void 0)return e==="auto"?a?"dark":"light":e}function Te({suggestions:e,activeIndex:o,onSelect:a,onHighlight:n,isOpen:s,id:l,className:r,pills:u,onPillClick:g,showPills:w=!0,activeSelected:I=!1,isLoading:v=!1,isInputEmpty:S=!1,products:A,onProductSelect:Q,onProductFocusChange:X,optionsPosition:oe="below",mode:J}){let D=zt(J),y=D!==void 0,p=e[0]?.options??[],ie=!!(u&&u.length>0&&g),Z=!!(A&&A.length>0),F=s&&(p.length>0||w&&ie||v||Z),T={suggestions:e,activeIndex:o,pills:u,showPills:w,activeSelected:I,isLoading:v,isInputEmpty:S,products:A},R=(0,ve.useRef)(T);F&&(R.current=T);let f=F?T:R.current,M=f.suggestions[0],N=M?.options??[],L=f.activeIndex>=0&&!!N[f.activeIndex]?.is_tappable,V=!!(f.pills&&f.pills.length>0&&g),Y=f.showPills&&V,ee=f.showPills&&!V&&f.isLoading,q=Y||ee,H=N.length>0,re=f.isLoading&&!H,O=f.products??[];return(0,W.jsx)("div",{id:l,role:"listbox","data-aia-dropdown":"","data-options-position":oe,"data-mode":D,"data-aia-loading":f.isLoading?"":void 0,"data-aia-has-products":O.length>0?"":void 0,className:`${y?"magicx-aia ":""}${he.dropdown} ${F?he.visible:""} ${r??""}`,onMouseDown:t=>t.preventDefault(),children:(0,W.jsxs)(lt,{space:"8px",children:[q&&(0,W.jsx)(ye,{noWrap:!0,className:he.pillBar,"data-aia-pillbar":"",children:(0,W.jsx)(Ee,{pills:f.pills??[],activePillIndex:0,activeSelected:f.activeSelected,onSelectPill:g??(()=>{}),rounded:!0,loading:f.isLoading})}),H&&(0,W.jsx)(st,{options:N,activeIndex:f.activeIndex,onSelect:a,onHighlight:n,listboxId:l,loading:f.isLoading,groupKey:M?`${M.type} ${M.text}`:""}),re&&(0,W.jsx)("div",{className:he.skeletonBars,"data-aia-skeleton-bars":"",children:Tt.map(t=>(0,W.jsx)("span",{className:he.skeletonBar,style:{width:t}},`bar-${t}`))}),(0,W.jsx)(at,{products:O,listboxId:l,onSelect:Q??Lt,onFocusChange:X,focusable:F}),(0,W.jsx)(Ze,{isOptionHighlighted:L,isInputEmpty:f.isInputEmpty})]})})}var xe=require("@magicx-eng/ai-autocomplete-vanilla");if(typeof document<"u"&&!document.getElementById("ac-style-fdee06e6")){let e=document.createElement("style");e.id="ac-style-fdee06e6",e.textContent=`.SubmitButton-module_submitButton_otz7H {
|
|
1351
1414
|
flex-shrink: 0;
|
|
1352
1415
|
width: 32px;
|
|
1353
1416
|
height: 32px;
|
|
@@ -1382,5 +1445,5 @@
|
|
|
1382
1445
|
);
|
|
1383
1446
|
cursor: default;
|
|
1384
1447
|
}
|
|
1385
|
-
`,document.head.appendChild(e)}var st={submitButton:"SubmitButton-module_submitButton_otz7H"};var De=require("react/jsx-runtime");function lt({disabled:e,onClick:o}){return(0,De.jsx)("button",{type:"button","data-aia-submit":"",className:st.submitButton,disabled:e,onClick:i=>{i.stopPropagation(),o()},"aria-label":"Submit",children:(0,De.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,De.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var pt=require("@magicx-eng/ai-autocomplete-vanilla"),b=require("react");var Ue=require("react");function dt(e){let o=(0,Ue.useRef)(e);o.current=e;let i=(0,Ue.useRef)(null);i.current===null&&(i.current={fetch:(n,l)=>{let r=o.current;return r?r.fetch(n,l):Promise.reject(new Error("products config removed"))},transform:n=>o.current?.transform(n)??[],get limit(){return o.current?.limit}});let s=e!==void 0;return{config:s?i.current:void 0,enabled:s}}var Dt={text:"",completedParams:[],identifiedParams:[],skippedParams:[],pendingSpan:null,suggestions:[],products:[],activeDropdownIndex:-1,newParamId:null,isLoading:!0,isReady:!1,error:null,segments:[],actionableSuggestions:[],filteredOptions:[],placeholderText:"",isDropdownOpen:!1,isActivePillSelected:!1,filterBase:0,filterInProgress:!1,pillTapped:!1,skipNextFetch:!1,lastRawQuery:"",isFocused:!1,editingParam:null,editingAnchor:null,editingTail:null,caretOffset:null,inSelectionAnimation:!1};function Te({onSubmit:e,onError:o,optionOverrides:i,maskCompletedText:s,apiConfig:n,columns:l=2,dropdownTrigger:r,optionsPosition:u,closeDropdownOnBlur:g,showNonTappableOptions:x,onFocus:I,onBlur:P,value:R,completedParams:S,onChange:Q,onParamsChange:X,products:oe,onProductSelect:J,source:D,setCursor:w}){let p=(0,b.useRef)(null),[ie,Z]=(0,b.useState)(null),B=(0,b.useRef)(e);B.current=e;let T=(0,b.useRef)(o);T.current=o;let E=(0,b.useRef)(Q);E.current=Q;let f=(0,b.useRef)(X);f.current=X;let N=(0,b.useRef)(I);N.current=I;let H=(0,b.useRef)(P);H.current=P;let L=(0,b.useRef)(w);L.current=w;let V=(0,b.useRef)(J);V.current=J;let Y=dt(oe);(0,b.useEffect)(()=>{if(typeof document>"u")return;let d=new pt.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:n,optionOverrides:i,maskCompletedText:s,columns:l,dropdownTrigger:r,optionsPosition:u,closeDropdownOnBlur:g,showNonTappableOptions:x,source:D,value:R,completedParams:S,onSubmit:(..._)=>B.current?.(..._),onError:(..._)=>T.current?.(..._),onChange:(..._)=>E.current?.(..._),onParamsChange:(..._)=>f.current?.(..._),onFocus:()=>N.current?.(),onBlur:()=>H.current?.(),onProductSelect:_=>V.current?.(_),setCursor:_=>L.current?.(_),products:Y.config});p.current=d,Z(d.getState());let C=d.subscribe(_=>Z(_));return()=>{C(),d.destroy(),p.current===d&&(p.current=null)}},[]),(0,b.useEffect)(()=>{R!==void 0&&p.current?.setValue(R)},[R]),(0,b.useEffect)(()=>{S!==void 0&&p.current?.setCompletedParams(S)},[S]);let ee=JSON.stringify(n??null),$=(0,b.useRef)(i),O=(0,b.useRef)(0);if(i!==$.current){let d=$.current,C=i,_=Object.keys(d??{}),me=Object.keys(C??{});(_.length!==me.length||me.some(ne=>!d?.[ne]||C[ne]!==d[ne]))&&O.current++,$.current=i}(0,b.useEffect)(()=>{p.current?.update({apiConfig:n,optionOverrides:i,dropdownTrigger:r,optionsPosition:u,closeDropdownOnBlur:g,showNonTappableOptions:x})},[ee,O.current,r,u,g,x]);let re=(0,b.useRef)(!1);(0,b.useEffect)(()=>{if(!re.current){re.current=!0;return}p.current?.update({products:Y.config})},[Y.enabled]);let M=(0,b.useRef)(null);M.current===null&&(M.current={handleTextChange:d=>p.current?.handleTextChange(d),handleKeyDown:d=>{let C="nativeEvent"in d?d.nativeEvent:d;p.current?.handleKeyDown(C)},setFocused:d=>p.current?.setFocused(d),startEditingParam:d=>p.current?.startEditingParam(d),exitEditMode:()=>p.current?.exitEditMode(),handleCaretAfterInput:d=>p.current?.handleCaretAfterInput(d),handleCaretMove:d=>p.current?.handleCaretMove(d),replaceEditingRange:d=>p.current?.replaceEditingRange(d)??!1,setActivePill:d=>p.current?.setActivePill(d),removeLastParam:()=>p.current?.removeLastParam(),clearNewParamId:()=>p.current?.clearNewParamId(),reset:()=>p.current?.reset(),selectOption:d=>p.current?.selectOption(d),selectProduct:d=>p.current?.selectProduct(d),setActiveDropdownIndex:d=>p.current?.setActiveDropdownIndex(d),handleFocus:()=>p.current?.setFocused(!0),handleBlur:()=>p.current?.setFocused(!1)});let t=M.current,c=(0,b.useCallback)(d=>{let C=d.target.value,me=C.length>0&&!d.nativeEvent?.isComposing&&C[0]!==C[0].toUpperCase()?C[0].toUpperCase()+C.slice(1):C;p.current?.handleTextChange(me)},[]),m=(0,b.useCallback)(d=>{p.current?.handleKeyDown(d.nativeEvent)},[]),v=p.current,a=ie??Dt,A=R!==void 0?R:a.text,te=S!==void 0?S:a.completedParams,j=a.actionableSuggestions,ke=j[0],ue=v?.listboxId??"",Fe=a.activeDropdownIndex>=0&&v?`${ue}-option-${a.activeDropdownIndex}`:void 0,pe=a.editingParam,xe=pe?{type:pe.suggestionType,text:pe.suggestionPlaceholder,required:!0,options:pe.options}:null,_e=xe??ke,Be=xe?[xe]:j,Pe=!v||a.isLoading&&!a.editingParam&&!a.inSelectionAnimation;return{completedParams:te,skippedParams:a.skippedParams,suggestionPills:j,setActivePill:t.setActivePill,removeLastParam:t.removeLastParam,segments:a.segments,newParamId:a.newParamId,clearNewParamId:t.clearNewParamId,suggestions:a.suggestions,activeIndex:a.activeDropdownIndex,isReady:a.isReady,isLoading:Pe,isFocused:a.isFocused,isDropdownOpen:a.isDropdownOpen,isActivePillSelected:a.isActivePillSelected,placeholderText:a.placeholderText,listboxId:ue,error:a.error,products:a.products,selectProduct:t.selectProduct,handleTextChange:t.handleTextChange,handleKeyDown:t.handleKeyDown,setFocused:t.setFocused,editingParam:pe,editingAnchor:a.editingAnchor,caretOffset:a.caretOffset,startEditingParam:t.startEditingParam,exitEditMode:t.exitEditMode,handleCaretAfterInput:t.handleCaretAfterInput,handleCaretMove:t.handleCaretMove,replaceEditingRange:t.replaceEditingRange,inputProps:{value:A,placeholder:a.placeholderText||void 0,onChange:c,onKeyDown:m,onFocus:t.handleFocus,onBlur:t.handleBlur,role:"combobox","aria-expanded":a.isDropdownOpen,"aria-activedescendant":Fe,"aria-autocomplete":"list","aria-controls":ue},reset:t.reset,dropdownProps:{suggestions:_e?[{..._e,options:a.filteredOptions}]:[],activeIndex:a.activeDropdownIndex,onSelect:t.selectOption,onHighlight:t.setActiveDropdownIndex,isOpen:a.isDropdownOpen,id:ue,pills:Be,activeSelected:a.isActivePillSelected,onPillClick:t.setActivePill,isLoading:Pe,isInputEmpty:A.trim().length===0,products:a.products,onProductSelect:t.selectProduct,onProductFocusChange:t.setFocused,optionsPosition:u??"below"}}}var F=require("@magicx-eng/ai-autocomplete-vanilla"),h=require("react"),Le;function Tt(){if(Le!==void 0)return Le;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Le=e.contentEditable==="plaintext-only",Le}function ct(e){let{segments:o,newParamId:i,editingParam:s,editingAnchor:n,caretOffset:l,placeholderText:r,isFocused:u,isDropdownOpen:g,listboxId:x,activeDescendantId:I,autoFocus:P,handleTextChange:R,handleKeyDown:S,handleCaretAfterInput:Q,handleCaretMove:X,startEditingParam:oe,replaceEditingRange:J,setFocused:D}=e,w=(0,h.useRef)(null),p=(0,h.useRef)(!1),ie=(0,h.useRef)(""),Z=(0,h.useRef)(""),B=(0,h.useRef)(null),T=(0,h.useRef)(0);B.current=l,(0,h.useEffect)(()=>{if(!P)return;let t=w.current;if(!t)return;document.activeElement===t?D(!0):t.focus();let c=t.ownerDocument??document,m=c.getSelection(),v=m&&m.rangeCount>0&&t.contains(m.anchorNode);if(m&&!v){let a=c.createRange();a.selectNodeContents(t),a.collapse(!0),m.removeAllRanges(),m.addRange(a)}},[P,D]),(0,h.useEffect)(()=>{let t=w.current;if(!t)return;let c=t.ownerDocument??document,m=()=>{let v=c.getSelection();if(!v||v.rangeCount===0||!v.anchorNode||!t.contains(v.anchorNode))return;let a=v.anchorNode,A=a.nodeType===Node.ELEMENT_NODE?a:a.parentElement,j=(v.isCollapsed?A?.closest('strong[data-seg="completed"][data-param-id]'):null)?.dataset.paramId??null;if(j&&j!==s?.id){oe(j);return}performance.now()-T.current<50||X((0,F.getCursorOffset)(t))};return c.addEventListener("selectionchange",m),()=>c.removeEventListener("selectionchange",m)},[s,oe,X]),(0,h.useLayoutEffect)(()=>{let t=w.current;t&&(0,F.renderEditableContent)({input:t,segments:o,newParamId:i,editingParamId:s?.id??null,placeholderText:r??"",isFocused:u})},[o,i,s,r,u]),(0,h.useLayoutEffect)(()=>{let t=ie.current,c=i??"";if(ie.current=c,!c||c===t)return;let m=w.current;if(!m)return;m.focus();let v=B.current??(0,F.plainTextLength)(m);(0,F.setCursorOffset)(m,v)},[i]),(0,h.useLayoutEffect)(()=>{let t=Z.current,c=s?.id??"";if(Z.current=c,!c||c===t||n==null)return;let m=w.current;m&&(0,F.setCursorOffset)(m,n)},[s,n]);let E=(0,h.useCallback)(()=>{if(p.current)return;let t=w.current;if(!t)return;let c=(0,F.extractPlainText)(t),v=c.length>0&&c[0]!==c[0].toUpperCase()?c[0].toUpperCase()+c.slice(1):c;R(v)},[R]),f=(0,h.useCallback)(()=>{T.current=performance.now(),E();let t=w.current;t&&Q((0,F.getCursorOffset)(t))},[E,Q]);(0,h.useEffect)(()=>{let t=w.current;if(!t)return;let c=m=>{let v=m,a=v.inputType;if(a==="insertParagraph"||a==="insertLineBreak"||a==="insertFromDrop"){m.preventDefault();return}if(a.startsWith("insert")||a.startsWith("delete")){let A=a.startsWith("delete")?"":v.data??"";J(A)&&m.preventDefault()}};return t.addEventListener("beforeinput",c),()=>t.removeEventListener("beforeinput",c)},[J]);let N=(0,h.useCallback)(()=>{p.current=!0},[]),H=(0,h.useCallback)(()=>{p.current=!1,E()},[E]),L=(0,h.useCallback)(t=>{t.preventDefault();let c=w.current;if(!c)return;let m=(t.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!m)return;let v=c.ownerDocument??document,a=v.getSelection();if(!a||a.rangeCount===0)return;let A=a.getRangeAt(0);if(!c.contains(A.startContainer))return;A.deleteContents();let te=v.createTextNode(m);A.insertNode(te),A.setStartAfter(te),A.collapse(!0),a.removeAllRanges(),a.addRange(A),E()},[E]),V=(0,h.useCallback)(t=>S(t),[S]),Y=(0,h.useCallback)(()=>D(!0),[D]),ee=(0,h.useCallback)(()=>D(!1),[D]),$=(0,h.useCallback)(()=>w.current?.focus(),[]),O=(0,h.useCallback)(()=>w.current?.blur(),[]),re=(0,h.useCallback)(()=>{let t=w.current;return t?(0,F.extractPlainText)(t):""},[]),M=Tt()?"plaintext-only":"true";return{inputRef:w,editorProps:{ref:w,contentEditable:M,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":x,"aria-expanded":g,"aria-activedescendant":I,spellCheck:!0,enterKeyHint:"send",onInput:f,onKeyDown:V,onCompositionStart:N,onCompositionEnd:H,onPaste:L,onFocus:Y,onBlur:ee},getPlainText:re,focus:$,blur:O}}var U=require("react/jsx-runtime");function Lt(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var ut=(0,k.forwardRef)(function({onSubmit:o,onError:i,optionOverrides:s,maskCompletedText:n,className:l,apiConfig:r,columns:u,pillPlacement:g="dropdown",mode:x="auto",optionsPosition:I="below",animations:P=!0,dropdownTrigger:R,closeDropdownOnBlur:S,showNonTappableOptions:Q,autoFocus:X=!0,onFocus:oe,onBlur:J,value:D,completedParams:w,onChange:p,onParamsChange:ie,products:Z,onProductSelect:B,submitButton:T},E){let f=(0,k.useRef)(null),N=(0,k.useRef)(null),H=(0,k.useRef)(()=>{}),L=(0,k.useRef)(null),V=(0,k.useRef)(null);(0,k.useEffect)(()=>{let y=f.current;if(y)return L.current?L.current.setMode(x):L.current=new ve.ModeController(y,x),()=>{L.current?.destroy(),L.current=null}},[x]);let Y=(0,k.useCallback)(y=>{let se=V.current?.current;se&&(se.focus(),(0,ve.setCursorOffset)(se,y))},[]),{completedParams:ee,skippedParams:$,suggestionPills:O,setActivePill:re,segments:M,newParamId:t,clearNewParamId:c,placeholderText:m,isFocused:v,isDropdownOpen:a,isActivePillSelected:A,isLoading:te,activeIndex:j,listboxId:ke,handleTextChange:ue,handleKeyDown:Fe,setFocused:pe,editingParam:xe,editingAnchor:_e,caretOffset:Be,startEditingParam:Pe,handleCaretAfterInput:d,handleCaretMove:C,replaceEditingRange:_,dropdownProps:me,reset:ne}=Te({onSubmit:y=>H.current(y),onError:i,optionOverrides:s,maskCompletedText:n,apiConfig:r,columns:u,dropdownTrigger:R,optionsPosition:I,closeDropdownOnBlur:S,showNonTappableOptions:Q,onFocus:oe,onBlur:J,value:D,completedParams:w,onChange:p,onParamsChange:ie,products:Z,onProductSelect:B,source:"full-sdk",setCursor:Y});(0,k.useEffect)(()=>{if(!t)return;let y=window.setTimeout(()=>c(),650);return()=>window.clearTimeout(y)},[t,c]);let mt=j>=0?`${ke}-option-${j}`:void 0,{inputRef:Ne,editorProps:gt,focus:Ie,blur:Ve,getPlainText:$e}=ct({segments:M,newParamId:t,editingParam:xe,editingAnchor:_e,caretOffset:Be,placeholderText:m,isFocused:v,isDropdownOpen:a,listboxId:ke,activeDescendantId:mt,autoFocus:X,handleTextChange:ue,handleKeyDown:Fe,handleCaretAfterInput:d,handleCaretMove:C,startEditingParam:Pe,replaceEditingRange:_,setFocused:pe});V.current=Ne,(0,k.useLayoutEffect)(()=>{let y=N.current,se=Ne.current;if(!y||!se)return;let je=()=>{let Qe=y.firstElementChild;if(!Qe)return;let vt=Qe.getBoundingClientRect(),xt=se.getBoundingClientRect();vt.top>=xt.bottom-2?y.setAttribute("data-aia-pill-wrapped",""):y.removeAttribute("data-aia-pill-wrapped")};je();let qe=new ResizeObserver(je);return qe.observe(se),()=>qe.disconnect()},[M,O.length,te,Ne]),(0,k.useImperativeHandle)(E,()=>({focus:Ie,blur:Ve,reset:ne,setMode:y=>L.current?.setMode(y)}),[Ie,Ve,ne]);let Se=!!M.length||ee.length>0,Me=(0,k.useCallback)(()=>{if(!Se)return;let y=$e();o((0,ve.buildSubmitResult)(y,ee,$)),ne()},[Se,ee,$,o,ne,$e]);H.current=Me;let ht=(0,k.useCallback)(y=>{y.target?.closest("[data-aia-pill]")||Ie()},[Ie]),ft=g==="inline",bt=g==="dropdown";return(0,U.jsxs)("div",{ref:f,className:`magicx-aia ${ce.container} ${l??""}`,"data-pill-placement":g,"data-options-position":I,"data-animations":P?"on":"off","data-mode":Lt(x),children:[(0,U.jsx)(Re,{...me,showPills:bt}),(0,U.jsxs)("div",{className:ce.inputWrapper,onClick:ht,children:[(0,U.jsxs)("div",{className:ce.editorArea,"data-aia-editor":"",children:[(0,U.jsx)("div",{...gt,className:ce.input,"data-aia-input":""}),ft&&(te||O.length>0)&&(0,U.jsx)("span",{ref:N,className:ce.pillListContainer,"data-aia-pill-list-container":"",children:(0,U.jsx)(Ce,{pills:O,activePillIndex:0,activeSelected:A,onSelectPill:re,loading:te})})]}),T===null?null:T===void 0?(0,U.jsx)(lt,{disabled:!Se,onClick:Me}):(0,U.jsx)("span",{"data-aia-submit":"",className:ce.submitSlot,onClick:y=>{Se&&(y.stopPropagation(),Me())},children:T})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,buildSubmitResult,useAIAutocomplete,withSkippedParams});
|
|
1448
|
+
`,document.head.appendChild(e)}var pt={submitButton:"SubmitButton-module_submitButton_otz7H"};var Le=require("react/jsx-runtime");function ct({disabled:e,onClick:o}){return(0,Le.jsx)("button",{type:"button","data-aia-submit":"",className:pt.submitButton,disabled:e,onClick:a=>{a.stopPropagation(),o()},"aria-label":"Submit",children:(0,Le.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,Le.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var mt=require("@magicx-eng/ai-autocomplete-vanilla"),b=require("react");var qe=require("react");function ut(e){let o=(0,qe.useRef)(e);o.current=e;let a=(0,qe.useRef)(null);a.current===null&&(a.current={fetch:(s,l)=>{let r=o.current;return r?r.fetch(s,l):Promise.reject(new Error("products config removed"))},transform:s=>o.current?.transform(s)??[],get limit(){return o.current?.limit}});let n=e!==void 0;return{config:n?a.current:void 0,enabled:n}}var Bt={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 ze({onSubmit:e,onError:o,optionOverrides:a,maskCompletedText:n,apiConfig:s,columns:l=2,dropdownTrigger:r,optionsPosition:u,closeDropdownOnBlur:g,showNonTappableOptions:w,onFocus:I,onBlur:v,value:S,completedParams:A,onChange:Q,onParamsChange:X,products:oe,onProductSelect:J,source:D,setCursor:y}){let p=(0,b.useRef)(null),[ie,Z]=(0,b.useState)(null),F=(0,b.useRef)(e);F.current=e;let T=(0,b.useRef)(o);T.current=o;let R=(0,b.useRef)(Q);R.current=Q;let f=(0,b.useRef)(X);f.current=X;let M=(0,b.useRef)(I);M.current=I;let N=(0,b.useRef)(v);N.current=v;let L=(0,b.useRef)(y);L.current=y;let V=(0,b.useRef)(J);V.current=J;let Y=ut(oe);(0,b.useEffect)(()=>{if(typeof document>"u")return;let d=new mt.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:s,optionOverrides:a,maskCompletedText:n,columns:l,dropdownTrigger:r,optionsPosition:u,closeDropdownOnBlur:g,showNonTappableOptions:w,source:D,value:S,completedParams:A,onSubmit:(...P)=>F.current?.(...P),onError:(...P)=>T.current?.(...P),onChange:(...P)=>R.current?.(...P),onParamsChange:(...P)=>f.current?.(...P),onFocus:()=>M.current?.(),onBlur:()=>N.current?.(),onProductSelect:P=>V.current?.(P),setCursor:P=>L.current?.(P),products:Y.config});p.current=d,Z(d.getState());let E=d.subscribe(P=>Z(P));return()=>{E(),d.destroy(),p.current===d&&(p.current=null)}},[]),(0,b.useEffect)(()=>{S!==void 0&&p.current?.setValue(S)},[S]),(0,b.useEffect)(()=>{A!==void 0&&p.current?.setCompletedParams(A)},[A]);let ee=JSON.stringify(s??null),q=(0,b.useRef)(a),H=(0,b.useRef)(0);if(a!==q.current){let d=q.current,E=a,P=Object.keys(d??{}),me=Object.keys(E??{});(P.length!==me.length||me.some(ne=>!d?.[ne]||E[ne]!==d[ne]))&&H.current++,q.current=a}(0,b.useEffect)(()=>{p.current?.update({apiConfig:s,optionOverrides:a,dropdownTrigger:r,optionsPosition:u,closeDropdownOnBlur:g,showNonTappableOptions:w})},[ee,H.current,r,u,g,w]);let re=(0,b.useRef)(!1);(0,b.useEffect)(()=>{if(!re.current){re.current=!0;return}p.current?.update({products:Y.config})},[Y.enabled]);let O=(0,b.useRef)(null);O.current===null&&(O.current={handleTextChange:d=>p.current?.handleTextChange(d),handleKeyDown:d=>{let E="nativeEvent"in d?d.nativeEvent:d;p.current?.handleKeyDown(E)},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=O.current,c=(0,b.useCallback)(d=>{let E=d.target.value,me=E.length>0&&!d.nativeEvent?.isComposing&&E[0]!==E[0].toUpperCase()?E[0].toUpperCase()+E.slice(1):E;p.current?.handleTextChange(me)},[]),m=(0,b.useCallback)(d=>{p.current?.handleKeyDown(d.nativeEvent)},[]),x=p.current,i=ie??Bt,C=S!==void 0?S:i.text,te=A!==void 0?A:i.completedParams,$=i.actionableSuggestions,_e=$[0],ue=x?.listboxId??"",Me=i.activeDropdownIndex>=0&&x?`${ue}-option-${i.activeDropdownIndex}`:void 0,pe=i.editingParam,we=pe?{type:pe.suggestionType,text:pe.suggestionPlaceholder,required:!0,options:pe.options}:null,Pe=we??_e,Oe=we?[we]:$,Ie=!x||i.isLoading&&!i.editingParam&&!i.inSelectionAnimation;return{completedParams:te,skippedParams:i.skippedParams,suggestionPills:$,setActivePill:t.setActivePill,removeLastParam:t.removeLastParam,segments:i.segments,newParamId:i.newParamId,clearNewParamId:t.clearNewParamId,suggestions:i.suggestions,activeIndex:i.activeDropdownIndex,isReady:i.isReady,isLoading:Ie,isFocused:i.isFocused,isDropdownOpen:i.isDropdownOpen,isActivePillSelected:i.isActivePillSelected,placeholderText:i.placeholderText,listboxId:ue,error:i.error,products:i.products,selectProduct:t.selectProduct,handleTextChange:t.handleTextChange,handleKeyDown:t.handleKeyDown,setFocused:t.setFocused,editingParam:pe,editingAnchor:i.editingAnchor,caretOffset:i.caretOffset,startEditingParam:t.startEditingParam,exitEditMode:t.exitEditMode,handleCaretAfterInput:t.handleCaretAfterInput,handleCaretMove:t.handleCaretMove,replaceEditingRange:t.replaceEditingRange,inputProps:{value:C,placeholder:i.placeholderText||void 0,onChange:c,onKeyDown:m,onFocus:t.handleFocus,onBlur:t.handleBlur,role:"combobox","aria-expanded":i.isDropdownOpen,"aria-activedescendant":Me,"aria-autocomplete":"list","aria-controls":ue},reset:t.reset,dropdownProps:{suggestions:Pe?[{...Pe,options:i.filteredOptions}]:[],activeIndex:i.activeDropdownIndex,onSelect:t.selectOption,onHighlight:t.setActiveDropdownIndex,isOpen:i.isDropdownOpen,id:ue,pills:Oe,activeSelected:i.isActivePillSelected,onPillClick:t.setActivePill,isLoading:Ie,isInputEmpty:C.trim().length===0,products:i.products,onProductSelect:t.selectProduct,onProductFocusChange:t.setFocused,optionsPosition:u??"below"}}}var B=require("@magicx-eng/ai-autocomplete-vanilla"),h=require("react"),Be;function Ft(){if(Be!==void 0)return Be;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Be=e.contentEditable==="plaintext-only",Be}function ht(e){let{segments:o,newParamId:a,editingParam:n,editingAnchor:s,caretOffset:l,placeholderText:r,isFocused:u,isDropdownOpen:g,listboxId:w,activeDescendantId:I,autoFocus:v,handleTextChange:S,handleKeyDown:A,handleCaretAfterInput:Q,handleCaretMove:X,startEditingParam:oe,replaceEditingRange:J,setFocused:D}=e,y=(0,h.useRef)(null),p=(0,h.useRef)(!1),ie=(0,h.useRef)(""),Z=(0,h.useRef)(""),F=(0,h.useRef)(null),T=(0,h.useRef)(0);F.current=l,(0,h.useEffect)(()=>{if(!v)return;let t=y.current;if(!t)return;document.activeElement===t?D(!0):t.focus();let c=t.ownerDocument??document,m=c.getSelection(),x=m&&m.rangeCount>0&&t.contains(m.anchorNode);if(m&&!x){let i=c.createRange();i.selectNodeContents(t),i.collapse(!0),m.removeAllRanges(),m.addRange(i)}},[v,D]),(0,h.useEffect)(()=>{let t=y.current;if(!t)return;let c=t.ownerDocument??document,m=()=>{let x=c.getSelection();if(!x||x.rangeCount===0||!x.anchorNode||!t.contains(x.anchorNode))return;let i=x.anchorNode,C=i.nodeType===Node.ELEMENT_NODE?i:i.parentElement,$=(x.isCollapsed?C?.closest('strong[data-seg="completed"][data-param-id]'):null)?.dataset.paramId??null;if($&&$!==n?.id){oe($);return}performance.now()-T.current<50||X((0,B.getCursorOffset)(t))};return c.addEventListener("selectionchange",m),()=>c.removeEventListener("selectionchange",m)},[n,oe,X]),(0,h.useLayoutEffect)(()=>{let t=y.current;t&&(0,B.renderEditableContent)({input:t,segments:o,newParamId:a,editingParamId:n?.id??null,placeholderText:r??"",isFocused:u})},[o,a,n,r,u]),(0,h.useLayoutEffect)(()=>{let t=ie.current,c=a??"";if(ie.current=c,!c||c===t)return;let m=y.current;if(!m)return;m.focus();let x=F.current??(0,B.plainTextLength)(m);(0,B.setCursorOffset)(m,x)},[a]),(0,h.useLayoutEffect)(()=>{let t=Z.current,c=n?.id??"";if(Z.current=c,!c||c===t||s==null)return;let m=y.current;m&&(0,B.setCursorOffset)(m,s)},[n,s]);let R=(0,h.useCallback)(()=>{if(p.current)return;let t=y.current;if(!t)return;let c=(0,B.extractPlainText)(t),x=c.length>0&&c[0]!==c[0].toUpperCase()?c[0].toUpperCase()+c.slice(1):c;S(x)},[S]),f=(0,h.useCallback)(()=>{T.current=performance.now(),R();let t=y.current;t&&Q((0,B.getCursorOffset)(t))},[R,Q]);(0,h.useEffect)(()=>{let t=y.current;if(!t)return;let c=m=>{let x=m,i=x.inputType;if(i==="insertParagraph"||i==="insertLineBreak"||i==="insertFromDrop"){m.preventDefault();return}if(i.startsWith("insert")||i.startsWith("delete")){let C=i.startsWith("delete")?"":x.data??"";J(C)&&m.preventDefault()}};return t.addEventListener("beforeinput",c),()=>t.removeEventListener("beforeinput",c)},[J]);let M=(0,h.useCallback)(()=>{p.current=!0},[]),N=(0,h.useCallback)(()=>{p.current=!1,R()},[R]),L=(0,h.useCallback)(t=>{t.preventDefault();let c=y.current;if(!c)return;let m=(t.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!m)return;let x=c.ownerDocument??document,i=x.getSelection();if(!i||i.rangeCount===0)return;let C=i.getRangeAt(0);if(!c.contains(C.startContainer))return;C.deleteContents();let te=x.createTextNode(m);C.insertNode(te),C.setStartAfter(te),C.collapse(!0),i.removeAllRanges(),i.addRange(C),R()},[R]),V=(0,h.useCallback)(t=>A(t),[A]),Y=(0,h.useCallback)(()=>D(!0),[D]),ee=(0,h.useCallback)(()=>D(!1),[D]),q=(0,h.useCallback)(()=>y.current?.focus(),[]),H=(0,h.useCallback)(()=>y.current?.blur(),[]),re=(0,h.useCallback)(()=>{let t=y.current;return t?(0,B.extractPlainText)(t):""},[]),O=Ft()?"plaintext-only":"true";return{inputRef:y,editorProps:{ref:y,contentEditable:O,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":w,"aria-expanded":g,"aria-activedescendant":I,spellCheck:!0,enterKeyHint:"send",onInput:f,onKeyDown:V,onCompositionStart:M,onCompositionEnd:N,onPaste:L,onFocus:Y,onBlur:ee},getPlainText:re,focus:q,blur:H}}var U=require("react/jsx-runtime");function Mt(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var gt=(0,_.forwardRef)(function({onSubmit:o,onError:a,optionOverrides:n,maskCompletedText:s,className:l,apiConfig:r,columns:u,pillPlacement:g="dropdown",mode:w="auto",optionsPosition:I="below",animations:v=!0,dropdownTrigger:S,closeDropdownOnBlur:A,showNonTappableOptions:Q,autoFocus:X=!0,onFocus:oe,onBlur:J,value:D,completedParams:y,onChange:p,onParamsChange:ie,products:Z,onProductSelect:F,submitButton:T},R){let f=(0,_.useRef)(null),M=(0,_.useRef)(null),N=(0,_.useRef)(()=>{}),L=(0,_.useRef)(null),V=(0,_.useRef)(null);(0,_.useEffect)(()=>{let k=f.current;if(k)return L.current?L.current.setMode(w):L.current=new xe.ModeController(k,w),()=>{L.current?.destroy(),L.current=null}},[w]);let Y=(0,_.useCallback)(k=>{let se=V.current?.current;se&&(se.focus(),(0,xe.setCursorOffset)(se,k))},[]),{completedParams:ee,skippedParams:q,suggestionPills:H,setActivePill:re,segments:O,newParamId:t,clearNewParamId:c,placeholderText:m,isFocused:x,isDropdownOpen:i,isActivePillSelected:C,isLoading:te,activeIndex:$,listboxId:_e,handleTextChange:ue,handleKeyDown:Me,setFocused:pe,editingParam:we,editingAnchor:Pe,caretOffset:Oe,startEditingParam:Ie,handleCaretAfterInput:d,handleCaretMove:E,replaceEditingRange:P,dropdownProps:me,reset:ne}=ze({onSubmit:k=>N.current(k),onError:a,optionOverrides:n,maskCompletedText:s,apiConfig:r,columns:u,dropdownTrigger:S,optionsPosition:I,closeDropdownOnBlur:A,showNonTappableOptions:Q,onFocus:oe,onBlur:J,value:D,completedParams:y,onChange:p,onParamsChange:ie,products:Z,onProductSelect:F,source:"full-sdk",setCursor:Y});(0,_.useEffect)(()=>{if(!t)return;let k=window.setTimeout(()=>c(),650);return()=>window.clearTimeout(k)},[t,c]);let ft=$>=0?`${_e}-option-${$}`:void 0,{inputRef:Ne,editorProps:bt,focus:Se,blur:$e,getPlainText:je}=ht({segments:O,newParamId:t,editingParam:we,editingAnchor:Pe,caretOffset:Oe,placeholderText:m,isFocused:x,isDropdownOpen:i,listboxId:_e,activeDescendantId:ft,autoFocus:X,handleTextChange:ue,handleKeyDown:Me,handleCaretAfterInput:d,handleCaretMove:E,startEditingParam:Ie,replaceEditingRange:P,setFocused:pe});V.current=Ne,(0,_.useLayoutEffect)(()=>{let k=M.current,se=Ne.current;if(!k||!se)return;let Qe=()=>{let Je=k.firstElementChild;if(!Je)return;let yt=Je.getBoundingClientRect(),kt=se.getBoundingClientRect();yt.top>=kt.bottom-2?k.setAttribute("data-aia-pill-wrapped",""):k.removeAttribute("data-aia-pill-wrapped")};Qe();let Xe=new ResizeObserver(Qe);return Xe.observe(se),()=>Xe.disconnect()},[O,H.length,te,Ne]),(0,_.useImperativeHandle)(R,()=>({focus:Se,blur:$e,reset:ne,setMode:k=>L.current?.setMode(k)}),[Se,$e,ne]);let Ae=!!O.length||ee.length>0,He=(0,_.useCallback)(()=>{if(!Ae)return;let k=je();o((0,xe.buildSubmitResult)(k,ee,q)),ne()},[Ae,ee,q,o,ne,je]);N.current=He;let vt=(0,_.useCallback)(k=>{k.target?.closest("[data-aia-pill]")||Se()},[Se]),xt=g==="inline",wt=g==="dropdown";return(0,U.jsxs)("div",{ref:f,className:`magicx-aia ${ce.container} ${l??""}`,"data-pill-placement":g,"data-options-position":I,"data-animations":v?"on":"off","data-mode":Mt(w),children:[(0,U.jsx)(Te,{...me,showPills:wt}),(0,U.jsxs)("div",{className:ce.inputWrapper,onClick:vt,children:[(0,U.jsxs)("div",{className:ce.editorArea,"data-aia-editor":"",children:[(0,U.jsx)("div",{...bt,className:ce.input,"data-aia-input":""}),xt&&(te||H.length>0)&&(0,U.jsx)("span",{ref:M,className:ce.pillListContainer,"data-aia-pill-list-container":"",children:(0,U.jsx)(Ee,{pills:H,activePillIndex:0,activeSelected:C,onSelectPill:re,loading:te})})]}),T===null?null:T===void 0?(0,U.jsx)(ct,{disabled:!Ae,onClick:He}):(0,U.jsx)("span",{"data-aia-submit":"",className:ce.submitSlot,onClick:k=>{Ae&&(k.stopPropagation(),He())},children:T})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,buildSubmitResult,useAIAutocomplete,withSkippedParams});
|
|
1386
1449
|
//# sourceMappingURL=index.js.map
|