@magicx-eng/ai-autocomplete-react 0.26.1 → 0.27.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +59 -9
- package/dist/index.d.mts +24 -4
- package/dist/index.d.ts +24 -4
- package/dist/index.js +139 -17
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +139 -17
- 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 rt=Object.defineProperty;var Vt=Object.getOwnPropertyDescriptor;var Xt=Object.getOwnPropertyNames;var Jt=Object.prototype.hasOwnProperty;var ea=(e,i)=>{for(var a in i)rt(e,a,{get:i[a],enumerable:!0})},ta=(e,i,a,r)=>{if(i&&typeof i=="object"||typeof i=="function")for(let n of Xt(i))!Jt.call(e,n)&&n!==a&&rt(e,n,{get:()=>i[n],enumerable:!(r=Vt(i,n))||r.enumerable});return e};var aa=e=>ta(rt({},"__esModule",{value:!0}),e);var fa={};ea(fa,{AIAutocomplete:()=>Ht,AIAutocompleteDropdown:()=>Xe,DATE_RANGE_META_END:()=>s.DATE_RANGE_META_END,DATE_RANGE_META_START:()=>s.DATE_RANGE_META_START,DEFAULT_OPTION_COUNT_UNIT:()=>s.DEFAULT_OPTION_COUNT_UNIT,PRODUCT_PATH_PREFIX:()=>s.PRODUCT_PATH_PREFIX,WEEKDAY_LABELS:()=>s.WEEKDAY_LABELS,buildSubmitResult:()=>s.buildSubmitResult,cellDay:()=>s.cellDay,cellIso:()=>s.cellIso,dateCellMarks:()=>s.dateCellMarks,formatDate:()=>s.formatDate,formatDateRange:()=>s.formatDateRange,formatOptionCount:()=>s.formatOptionCount,isoDate:()=>s.isoDate,monthLabel:()=>s.monthLabel,optionCountLabel:()=>s.optionCountLabel,optionHasImage:()=>s.optionHasImage,optionImageSrc:()=>s.optionImageSrc,optionLabel:()=>s.optionLabel,parseDate:()=>s.parseDate,parseLooseDate:()=>s.parseLooseDate,parseLooseDateRange:()=>s.parseLooseDateRange,productFromMatchedItem:()=>s.productFromMatchedItem,productsFromCustomFields:()=>s.productsFromCustomFields,sanitizeOptionIconSvg:()=>s.sanitizeOptionIconSvg,selectedRangeFor:()=>s.selectedRangeFor,useAIAutocomplete:()=>et,visibleDateRange:()=>s.visibleDateRange,withSkippedParams:()=>s.withSkippedParams});module.exports=aa(fa);var s=require("@magicx-eng/ai-autocomplete-vanilla");var z=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-67791514")){let e=document.createElement("style");e.id="ac-style-67791514",e.textContent=`.aia-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
|
|
@@ -167,7 +167,7 @@
|
|
|
167
167
|
border-radius: var(--aia-chip-image-radius, 4px);
|
|
168
168
|
background:
|
|
169
169
|
var(--aia-chip-image, none) center / cover no-repeat,
|
|
170
|
-
var(--aia-chip-image-bg, var(--aia-
|
|
170
|
+
var(--aia-chip-image-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, 0.083)));
|
|
171
171
|
pointer-events: none;
|
|
172
172
|
user-select: none;
|
|
173
173
|
}
|
|
@@ -262,7 +262,7 @@
|
|
|
262
262
|
opacity: 0;
|
|
263
263
|
}
|
|
264
264
|
}
|
|
265
|
-
`,document.head.appendChild(e)}var
|
|
265
|
+
`,document.head.appendChild(e)}var De={container:"aia-container-KKjFU",inputWrapper:"aia-inputWrapper-FLq1b",editorArea:"aia-editorArea-7rBWq",input:"aia-input-IW-P-",pillListContainer:"aia-pillListContainer-h92IA",submitSlot:"aia-submitSlot-GhuCM",aiaPillReveal:"aia-aiaPillReveal-wf05b"};var Be=require("@magicx-eng/ai-autocomplete-vanilla"),X=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-0ae03977")){let e=document.createElement("style");e.id="ac-style-0ae03977",e.textContent=`/*
|
|
266
266
|
* Built-in appearance defaults \u2014 zero specificity via :where().
|
|
267
267
|
* Consumer CSS always wins without !important.
|
|
268
268
|
*
|
|
@@ -427,6 +427,8 @@
|
|
|
427
427
|
--aia-primitive-blue-50: #eef2ff;
|
|
428
428
|
--aia-primitive-neutral-750-a50: rgba(189, 189, 189, 0.51);
|
|
429
429
|
--aia-primitive-neutral-750-a25: rgba(189, 189, 189, 0.25);
|
|
430
|
+
/* One third of a25's alpha: the light-mode skeleton fill. */
|
|
431
|
+
--aia-primitive-neutral-750-a8: rgba(189, 189, 189, 0.083);
|
|
430
432
|
--aia-primitive-neutral-750-a35: rgba(189, 189, 189, 0.35);
|
|
431
433
|
--aia-primitive-neutral-750-a30: rgba(189, 189, 189, 0.3);
|
|
432
434
|
--aia-primitive-neutral-750-a15: rgba(189, 189, 189, 0.15);
|
|
@@ -487,7 +489,7 @@
|
|
|
487
489
|
|
|
488
490
|
/* Loading bars sit at half the contrast of the surrounding chrome so they
|
|
489
491
|
read as a placeholder, not as content (a50 -> a25 over the light surface). */
|
|
490
|
-
--aia-skeleton-bg: var(--aia-primitive-neutral-750-
|
|
492
|
+
--aia-skeleton-bg: var(--aia-primitive-neutral-750-a8);
|
|
491
493
|
|
|
492
494
|
--aia-streak-rgb: 99, 102, 241; /* off shared palette (indigo effect) */
|
|
493
495
|
|
|
@@ -993,6 +995,24 @@
|
|
|
993
995
|
flex-direction: column;
|
|
994
996
|
gap: 20px;
|
|
995
997
|
padding: 7px 8px;
|
|
998
|
+
animation: aia-skeletonBarsIn-BdPrL 100ms ease-out;
|
|
999
|
+
}
|
|
1000
|
+
|
|
1001
|
+
/* Fades out with the option skeleton \u2014 see SuggestionItem.module.css. */
|
|
1002
|
+
.aia-dropdown-yz2KC[data-aia-skeleton-exiting] .aia-skeletonBars-HVr9C {
|
|
1003
|
+
animation: aia-skeletonBarsOut-TqKeD 100ms ease-in forwards;
|
|
1004
|
+
}
|
|
1005
|
+
|
|
1006
|
+
@keyframes aia-skeletonBarsOut-TqKeD {
|
|
1007
|
+
to {
|
|
1008
|
+
opacity: 0;
|
|
1009
|
+
}
|
|
1010
|
+
}
|
|
1011
|
+
|
|
1012
|
+
@keyframes aia-skeletonBarsIn-BdPrL {
|
|
1013
|
+
from {
|
|
1014
|
+
opacity: 0;
|
|
1015
|
+
}
|
|
996
1016
|
}
|
|
997
1017
|
|
|
998
1018
|
.aia-skeletonBar-O3xIx {
|
|
@@ -1021,7 +1041,7 @@
|
|
|
1021
1041
|
opacity: 0.25;
|
|
1022
1042
|
}
|
|
1023
1043
|
}
|
|
1024
|
-
`,document.head.appendChild(e)}var xe={dropdown:"aia-dropdown-yz2KC",visible:"aia-visible-QCoXj",scrollArrow:"aia-scrollArrow-uUzV0","magicx-aia-scroll-arrow-bob":"aia-magicx-aia-scroll-arrow-bob-z-HXC",pillBar:"aia-pillBar-pwTXe",pillScroll:"aia-pillScroll-Tpzus",skip:"aia-skip-7-olS",skeletonBars:"aia-skeletonBars-HVr9C",skeletonBar:"aia-skeletonBar-O3xIx",aiaSkeletonPulse:"aia-aiaSkeletonPulse-G8W7q"};var
|
|
1044
|
+
`,document.head.appendChild(e)}var xe={dropdown:"aia-dropdown-yz2KC",visible:"aia-visible-QCoXj",scrollArrow:"aia-scrollArrow-uUzV0","magicx-aia-scroll-arrow-bob":"aia-magicx-aia-scroll-arrow-bob-z-HXC",pillBar:"aia-pillBar-pwTXe",pillScroll:"aia-pillScroll-Tpzus",skip:"aia-skip-7-olS",skeletonBars:"aia-skeletonBars-HVr9C",skeletonBarsIn:"aia-skeletonBarsIn-BdPrL",skeletonBarsOut:"aia-skeletonBarsOut-TqKeD",skeletonBar:"aia-skeletonBar-O3xIx",aiaSkeletonPulse:"aia-aiaSkeletonPulse-G8W7q"};var M=require("@magicx-eng/ai-autocomplete-vanilla"),vt=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-f687bd03")){let e=document.createElement("style");e.id="ac-style-f687bd03",e.textContent=`/* --- Datepicker (replaces the options grid for date suggestions) ---
|
|
1025
1045
|
|
|
1026
1046
|
One of three hand-maintained copies (vanilla styles.css, this file, Angular's
|
|
1027
1047
|
date-grid.component.css). Only the class-naming layer differs \u2014 the
|
|
@@ -1184,7 +1204,7 @@
|
|
|
1184
1204
|
opacity: 0.8;
|
|
1185
1205
|
background: rgba(var(--aia-streak-rgb, 255, 255, 255), 0.06);
|
|
1186
1206
|
}
|
|
1187
|
-
`,document.head.appendChild(e)}var D={datepicker:"aia-datepicker-6RrTs",header:"aia-header-z4LRk",month:"aia-month-urB2T",nav:"aia-nav-ap4AN",weekdays:"aia-weekdays-3EA3q",grid:"aia-grid-mQCgw",weekday:"aia-weekday-3lF4B",cell:"aia-cell-59k0y",number:"aia-number-aoT01",day:"aia-day-cB3u9",blank:"aia-blank-ivgRC",past:"aia-past-CEZsj",highlighted:"aia-highlighted-YIdtK",today:"aia-today-iI3ME",inRange:"aia-inRange-r9S2q",selected:"aia-selected-28KDn",pressed:"aia-pressed-bEyyN"};var
|
|
1207
|
+
`,document.head.appendChild(e)}var D={datepicker:"aia-datepicker-6RrTs",header:"aia-header-z4LRk",month:"aia-month-urB2T",nav:"aia-nav-ap4AN",weekdays:"aia-weekdays-3EA3q",grid:"aia-grid-mQCgw",weekday:"aia-weekday-3lF4B",cell:"aia-cell-59k0y",number:"aia-number-aoT01",day:"aia-day-cB3u9",blank:"aia-blank-ivgRC",past:"aia-past-CEZsj",highlighted:"aia-highlighted-YIdtK",today:"aia-today-iI3ME",inRange:"aia-inRange-r9S2q",selected:"aia-selected-28KDn",pressed:"aia-pressed-bEyyN"};var W=require("react/jsx-runtime"),ia=["sunday","monday","tuesday","wednesday","thursday","friday","saturday"];function wt({options:e,activeIndex:i,listboxId:a,view:r,selection:n,onSelect:t,onHighlight:l,onPreviousMonth:d,onNextMonth:w}){let x=(0,M.isoDate)(new Date),b=(0,M.visibleDateRange)({pendingStart:n.rangeStart,highlightedIso:(0,M.cellIso)(e[i]),selected:n.selectedRange});return(0,W.jsxs)("div",{className:D.datepicker,"data-aia-datepicker":"",children:[(0,W.jsxs)("div",{className:D.header,children:[(0,W.jsx)("button",{type:"button",tabIndex:-1,className:D.nav,"data-aia-date-prev":"","aria-label":"Previous month",onMouseDown:u=>u.preventDefault(),onClick:d,children:"\u2039"}),(0,W.jsx)("span",{className:D.month,"data-aia-date-month":"","aria-live":"polite",children:(0,M.monthLabel)(r)}),(0,W.jsx)("button",{type:"button",tabIndex:-1,className:D.nav,"data-aia-date-next":"","aria-label":"Next month",onMouseDown:u=>u.preventDefault(),onClick:w,children:"\u203A"})]}),(0,W.jsx)("div",{className:D.weekdays,"aria-hidden":"true",children:M.WEEKDAY_LABELS.map((u,C)=>(0,W.jsx)("span",{className:D.weekday,children:u},ia[C]))}),(0,W.jsx)("div",{className:D.grid,"data-aia-date-grid":"",children:e.map((u,C)=>(0,W.jsx)(oa,{option:u,id:`${a}-option-${C}`,index:C,isHighlighted:C===i&&u.is_tappable,isToday:(0,M.cellIso)(u)===x,isPast:(0,M.cellIso)(u)!=null&&(0,M.cellIso)(u)<x,marks:(0,M.dateCellMarks)((0,M.cellIso)(u),{selectedIso:n.selectedIso,range:b}),onSelect:t,onHighlight:l},(0,M.cellIso)(u)??`pad-${C}`))})]})}function oa({option:e,id:i,index:a,isHighlighted:r,isToday:n,isPast:t,marks:l,onSelect:d,onHighlight:w}){let[x,b]=(0,vt.useState)(!1),u=(0,M.cellDay)(e);if(u==null)return(0,W.jsx)("div",{id:i,role:"option","data-aia-option":"","data-aia-date-cell":"","aria-hidden":"true","aria-selected":!1,tabIndex:-1,className:`${D.cell} ${D.blank}`});let C=()=>{b(!0),d(e),setTimeout(()=>b(!1),170)},T=[D.cell,D.day,t?D.past:"",r?D.highlighted:"",n?D.today:"",l.inRange?D.inRange:"",l.selected?D.selected:"",x?D.pressed:""].filter(Boolean).join(" ");return(0,W.jsx)("div",{id:i,role:"option","data-aia-option":"","data-aia-date-cell":"","aria-selected":r,"aria-label":e.text,tabIndex:0,className:T,onClick:C,onKeyDown:k=>{(k.key==="Enter"||k.key===" ")&&(k.preventDefault(),C())},onMouseEnter:()=>w(a),children:(0,W.jsx)("span",{className:D.number,children:u})})}var ze=require("@magicx-eng/ai-autocomplete-vanilla"),je=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-5259a217")){let e=document.createElement("style");e.id="ac-style-5259a217",e.textContent=`.aia-cluster {
|
|
1188
1208
|
display: flex;
|
|
1189
1209
|
flex-wrap: wrap;
|
|
1190
1210
|
gap: var(--aia-cluster-gap, 0.5rem);
|
|
@@ -1224,7 +1244,7 @@
|
|
|
1224
1244
|
.aia-cluster[data-justify="around"] {
|
|
1225
1245
|
justify-content: space-around;
|
|
1226
1246
|
}
|
|
1227
|
-
`,document.head.appendChild(e)}var
|
|
1247
|
+
`,document.head.appendChild(e)}var st=require("react/jsx-runtime");function We({gap:e,align:i="center",justify:a="start",noWrap:r=!1,inline:n=!1,className:t,children:l,...d}){let w=e?{"--aia-cluster-gap":e}:void 0,x={className:t?`aia-cluster ${t}`:"aia-cluster","data-align":i,"data-justify":a,"data-nowrap":r||void 0,"data-inline":n||void 0,style:w,...d};return n?(0,st.jsx)("span",{...x,children:l}):(0,st.jsx)("div",{...x,children:l})}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
|
|
1228
1248
|
dropdown's rounded edges. The top inset (--aia-footer-gap) adds breathing
|
|
1229
1249
|
room above the hint/branding row so the footer doesn't butt against the last
|
|
1230
1250
|
option row \u2014 additive to the dropdown's 8px section gap. */
|
|
@@ -1358,7 +1378,7 @@
|
|
|
1358
1378
|
justify-content: flex-end;
|
|
1359
1379
|
}
|
|
1360
1380
|
}
|
|
1361
|
-
`,document.head.appendChild(e)}var ye={footer:"aia-footer-qQQ7x",hintGroup:"aia-hintGroup-ZzbPf",brandLink:"aia-brandLink-r4f3R",key:"aia-key-Bz1H-",hint:"aia-hint-GKEOH",brand:"aia-brand-Al-lR",badge:"aia-badge-Fk9vg",row:"aia-row-BgZ6Q"};var
|
|
1381
|
+
`,document.head.appendChild(e)}var ye={footer:"aia-footer-qQQ7x",hintGroup:"aia-hintGroup-ZzbPf",brandLink:"aia-brandLink-r4f3R",key:"aia-key-Bz1H-",hint:"aia-hint-GKEOH",brand:"aia-brand-Al-lR",badge:"aia-badge-Fk9vg",row:"aia-row-BgZ6Q"};var ne=require("react/jsx-runtime");function xt({isOptionHighlighted:e=!1,isInputEmpty:i=!1}){let{key:a,hint:r}=(0,ze.getFooterHint)(e,i),[n,t]=(0,je.useState)(ze.ATTRIBUTION_URL);return(0,je.useEffect)(()=>{t((0,ze.buildAttributionUrl)())},[]),(0,ne.jsx)("footer",{className:ye.footer,"data-aia-footer":"",children:(0,ne.jsxs)(We,{justify:"between",noWrap:!0,className:ye.row,children:[(0,ne.jsxs)(We,{gap:"5px",className:ye.hintGroup,children:[(0,ne.jsx)("kbd",{className:ye.key,children:a}),(0,ne.jsx)("span",{className:ye.hint,children:r})]}),(0,ne.jsxs)("a",{className:ye.brandLink,href:n,target:"_blank",rel:"noopener noreferrer",children:[(0,ne.jsx)("span",{className:ye.brand,children:"AI"}),(0,ne.jsx)("span",{className:ye.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,
|
|
1362
1382
|
no outline. ~28px via 6px padding + 14px text + the 1px border (border-box).
|
|
1363
1383
|
The border is kept as a 1px transparent line so the box stays the same size
|
|
1364
1384
|
as it was when the outline was dashed. */
|
|
@@ -1397,7 +1417,26 @@
|
|
|
1397
1417
|
cursor: default;
|
|
1398
1418
|
color: transparent;
|
|
1399
1419
|
background: var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, 0.25)));
|
|
1400
|
-
animation:
|
|
1420
|
+
animation:
|
|
1421
|
+
aia-skeletonIn-54kMv 100ms ease-out,
|
|
1422
|
+
aia-skeletonPulse-xGcUy 1.4s ease-in-out infinite;
|
|
1423
|
+
}
|
|
1424
|
+
|
|
1425
|
+
/* Fades out with the option skeleton \u2014 see SuggestionItem.module.css. */
|
|
1426
|
+
[data-aia-skeleton-exiting] .aia-skeleton-57P0T {
|
|
1427
|
+
animation: aia-skeletonOut-1sJ-r 100ms ease-in forwards;
|
|
1428
|
+
}
|
|
1429
|
+
|
|
1430
|
+
@keyframes aia-skeletonIn-54kMv {
|
|
1431
|
+
from {
|
|
1432
|
+
opacity: 0;
|
|
1433
|
+
}
|
|
1434
|
+
}
|
|
1435
|
+
|
|
1436
|
+
@keyframes aia-skeletonOut-1sJ-r {
|
|
1437
|
+
to {
|
|
1438
|
+
opacity: 0;
|
|
1439
|
+
}
|
|
1401
1440
|
}
|
|
1402
1441
|
|
|
1403
1442
|
@keyframes aia-skeletonPulse-xGcUy {
|
|
@@ -1415,7 +1454,7 @@
|
|
|
1415
1454
|
opacity: 0;
|
|
1416
1455
|
}
|
|
1417
1456
|
}
|
|
1418
|
-
`,document.head.appendChild(e)}var Ae={pill:"aia-pill-6Ga7S",fadeIn:"aia-fadeIn-Ux4eQ",rounded:"aia-rounded-y7xA9",skeleton:"aia-skeleton-57P0T",skeletonPulse:"aia-skeletonPulse-xGcUy"};var
|
|
1457
|
+
`,document.head.appendChild(e)}var Ae={pill:"aia-pill-6Ga7S",fadeIn:"aia-fadeIn-Ux4eQ",rounded:"aia-rounded-y7xA9",skeleton:"aia-skeleton-57P0T",skeletonIn:"aia-skeletonIn-54kMv",skeletonPulse:"aia-skeletonPulse-xGcUy",skeletonOut:"aia-skeletonOut-1sJ-r"};var kt=require("react/jsx-runtime"),lt={selected:1,first:.7,next:.4,last:.2};function yt({label:e,state:i,rounded:a,loading:r,onClick:n}){let t=[Ae.pill,a?Ae.rounded:"",r?Ae.skeleton:""].filter(Boolean).join(" ");return(0,kt.jsx)("button",{type:"button","data-aia-pill":"","data-aia-loading":r?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:t,style:{opacity:lt[i]},onMouseDown:l=>l.preventDefault(),onClick:r?void 0:n,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=`.aia-list-qvLqO {
|
|
1419
1458
|
position: relative;
|
|
1420
1459
|
z-index: 1;
|
|
1421
1460
|
pointer-events: auto;
|
|
@@ -1425,7 +1464,7 @@
|
|
|
1425
1464
|
align-items: center;
|
|
1426
1465
|
vertical-align: middle;
|
|
1427
1466
|
}
|
|
1428
|
-
`,document.head.appendChild(e)}var
|
|
1467
|
+
`,document.head.appendChild(e)}var dt={list:"aia-list-qvLqO"};var _e=require("react/jsx-runtime"),na=[125,69];function Ct(e){return e===0?"first":e===1?"next":"last"}function Ze({pills:e,activePillIndex:i,onSelectPill:a,activeSelected:r,rounded:n,loading:t}){return t&&e.length===0?(0,_e.jsx)("span",{className:dt.list,"data-aia-pill-list-loading":"",children:na.map((l,d)=>(0,_e.jsx)("span",{"data-aia-pill-skeleton":"",className:`${Ae.pill} ${n?Ae.rounded:""} ${Ae.skeleton}`,style:{width:l,opacity:lt[Ct(d)]}},`skel-${l}`))}):(0,_e.jsx)("span",{className:dt.list,"data-aia-pill-list-loading":t?"":void 0,children:e.map((l,d)=>{let w=!!r&&d===i;return(0,_e.jsx)(yt,{label:l.text,state:w?"selected":Ct(d),selected:w,rounded:n,loading:t,onClick:()=>a(d)},`${l.type}-${l.text}`)})})}var $e=require("@magicx-eng/ai-autocomplete-vanilla"),Ne=require("react");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
|
|
1429
1468
|
(packages/vanilla/src/styles.css). Same tokens, same defaults, so a consumer
|
|
1430
1469
|
theming one package sees the same result in the other.
|
|
1431
1470
|
|
|
@@ -1540,6 +1579,16 @@
|
|
|
1540
1579
|
the same media fill, so a card without art reads as "no photo" instead of
|
|
1541
1580
|
broken. The pictogram is inlined as a data URI so the placeholder needs no
|
|
1542
1581
|
network and no asset pipeline; --aia-product-placeholder-image swaps it. */
|
|
1582
|
+
.aia-media-RrbGe:where([data-aia-product-initial]) {
|
|
1583
|
+
display: flex;
|
|
1584
|
+
align-items: center;
|
|
1585
|
+
justify-content: center;
|
|
1586
|
+
color: var(--aia-product-title-color, var(--aia-option-color-selected, currentColor));
|
|
1587
|
+
font-size: 24px;
|
|
1588
|
+
font-weight: 600;
|
|
1589
|
+
line-height: 1;
|
|
1590
|
+
}
|
|
1591
|
+
|
|
1543
1592
|
.aia-media-RrbGe[data-aia-product-placeholder]::after {
|
|
1544
1593
|
content: "";
|
|
1545
1594
|
position: absolute;
|
|
@@ -1643,7 +1692,7 @@
|
|
|
1643
1692
|
.aia-section-Hugfg[data-aia-products-layout="list"] .aia-body-ly032 {
|
|
1644
1693
|
flex: 1 1 auto;
|
|
1645
1694
|
}
|
|
1646
|
-
`,document.head.appendChild(e)}var
|
|
1695
|
+
`,document.head.appendChild(e)}var V={section:"aia-section-Hugfg",label:"aia-label-nuc93",row:"aia-row-WDVBX",card:"aia-card-JBGYT",media:"aia-media-RrbGe",image:"aia-image-5pNL7",body:"aia-body-ly032",vendor:"aia-vendor-Gvu7G",title:"aia-title-gCNmq",price:"aia-price-gULcE"};var _=require("react/jsx-runtime");function Pt({products:e,listboxId:i,onSelect:a,onFocusChange:r,focusable:n=!0,layout:t="row",imageFallback:l="image"}){let d=e.length>0,w=(0,Ne.useRef)(null);if((0,Ne.useEffect)(()=>{let b=w.current;if(!(!d||!b))return(0,$e.attachProductRowWheel)(b)},[d]),!d)return null;let x=`${i}-products-label`;return(0,_.jsxs)("section",{className:V.section,"data-aia-products":"","data-aia-products-layout":t,role:"group","aria-labelledby":x,children:[(0,_.jsx)("div",{className:V.label,id:x,"data-aia-products-label":"",children:"Products"}),(0,_.jsx)("div",{ref:w,className:V.row,"data-aia-products-row":"",children:e.map((b,u)=>(0,_.jsx)(ra,{product:b,id:`${i}-product-${u}`,onSelect:a,onFocusChange:r,focusable:n,imageFallback:l},b.id))})]})}function ra({product:e,id:i,onSelect:a,onFocusChange:r,focusable:n,imageFallback:t}){let l=d=>{d.metaKey||d.ctrlKey||d.shiftKey||d.altKey||d.button!==0||(d.preventDefault(),a(e))};return(0,_.jsxs)("a",{id:i,className:V.card,"data-aia-product":"",role:"option","aria-selected":!1,href:e.url,tabIndex:n?0:-1,onClick:l,onKeyDown:d=>{d.key!=="Enter"&&d.key!==" "||(d.preventDefault(),a(e))},onFocus:()=>r?.(!0),onBlur:d=>{d.relatedTarget?.closest("[data-aia-dropdown]")||r?.(!1)},children:[(0,_.jsx)(sa,{src:e.imageUrl?.trim(),title:e.title,fallback:t},e.imageUrl?.trim()??""),(0,_.jsxs)("span",{className:V.body,children:[e.vendor?(0,_.jsx)("span",{className:V.vendor,children:e.vendor}):null,(0,_.jsx)("span",{className:V.title,children:e.title}),e.price?(0,_.jsx)("span",{className:V.price,children:e.price}):null]})]})}function sa({src:e,title:i,fallback:a}){let[r,n]=(0,Ne.useState)(!1),t=!!e&&!r,l=!t&&a==="initial";return(0,_.jsxs)("span",{className:V.media,"aria-hidden":"true","data-aia-product-placeholder":!t&&!l?"":void 0,"data-aia-product-initial":l?"":void 0,children:[t?(0,_.jsx)("img",{className:V.image,src:e,alt:"",loading:"lazy",decoding:"async",onError:()=>n(!0)}):null,l?(0,$e.productInitial)(i):null]})}var G=require("@magicx-eng/ai-autocomplete-vanilla"),de=require("react");var St=require("@magicx-eng/ai-autocomplete-vanilla"),Ve=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-948e58da")){let e=document.createElement("style");e.id="ac-style-948e58da",e.textContent=`.aia-grid {
|
|
1647
1696
|
display: grid;
|
|
1648
1697
|
grid-template-columns: repeat(
|
|
1649
1698
|
auto-fit,
|
|
@@ -1676,7 +1725,7 @@
|
|
|
1676
1725
|
background: var(--aia-scrollbar-thumb, rgba(0, 0, 0, 0.3));
|
|
1677
1726
|
border-radius: 3px;
|
|
1678
1727
|
}
|
|
1679
|
-
`,document.head.appendChild(e)}var
|
|
1728
|
+
`,document.head.appendChild(e)}var Et=require("react/jsx-runtime");function It({min:e="16rem",max:i,gap:a,scroll:r=!1,maxHeight:n,scrollResetKey:t,cols:l,template:d,innerRef:w,className:x,children:b,...u}){let C=(0,Ve.useRef)(null);(0,Ve.useLayoutEffect)(()=>{if(t===void 0)return;let k=C.current;k&&(k.scrollTop=0)},[t]);let T={"--aia-grid-min":e};return i&&(T["--aia-grid-max"]=i),a&&(T["--aia-grid-gap"]=a),n&&(T["--aia-grid-max-height"]=n),l&&(T.gridTemplateColumns=(0,St.optionsGridTemplateColumns)(l)),d&&(T.gridTemplateColumns=d),(0,Et.jsx)("div",{ref:k=>{C.current=k,w?.(k)},className:x?`aia-grid ${x}`:"aia-grid","data-scroll":r||void 0,style:T,...u,children:b})}var le=require("@magicx-eng/ai-autocomplete-vanilla"),se=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-82820da7")){let e=document.createElement("style");e.id="ac-style-82820da7",e.textContent=`.aia-item-d4vpD {
|
|
1680
1729
|
position: relative;
|
|
1681
1730
|
/* Clip, not visible: the entrance rise below runs on the inner content,
|
|
1682
1731
|
and a transformed box extends its scroll container's scrollable area.
|
|
@@ -1830,6 +1879,7 @@
|
|
|
1830
1879
|
border-radius: 999px;
|
|
1831
1880
|
-webkit-box-decoration-break: clone;
|
|
1832
1881
|
box-decoration-break: clone;
|
|
1882
|
+
animation: aia-skeletonBarIn-ZlEM0 100ms ease-out;
|
|
1833
1883
|
}
|
|
1834
1884
|
|
|
1835
1885
|
.aia-item-d4vpD[data-aia-loading] .aia-tag-e3Fwe {
|
|
@@ -1902,6 +1952,15 @@
|
|
|
1902
1952
|
min-width: 0;
|
|
1903
1953
|
}
|
|
1904
1954
|
|
|
1955
|
+
/* A skeleton bar hugs its text. The rules above let the text grow to fill a
|
|
1956
|
+
picture / count row (so the count sits at the trailing edge); a loading row
|
|
1957
|
+
hides the count, and a growing text box would paint the bar across the
|
|
1958
|
+
whole column. One compound deeper than those rules, so it wins in every
|
|
1959
|
+
copy regardless of source order. */
|
|
1960
|
+
.aia-item-d4vpD[data-aia-loading] .aia-content-T-Qba .aia-text-yqoh9 {
|
|
1961
|
+
flex: 0 1 auto;
|
|
1962
|
+
}
|
|
1963
|
+
|
|
1905
1964
|
/* The picture: a square tile, centred on the text beside it (a one-line
|
|
1906
1965
|
option reads as the reference row; a wrapped one keeps the tile on its
|
|
1907
1966
|
vertical middle). Sized and rounded by token so a consumer can shrink it
|
|
@@ -1919,7 +1978,7 @@
|
|
|
1919
1978
|
height: var(--aia-option-image-size, 40px);
|
|
1920
1979
|
border-radius: var(--aia-option-image-radius, 12px);
|
|
1921
1980
|
overflow: hidden;
|
|
1922
|
-
background: var(--aia-option-image-bg, var(--aia-
|
|
1981
|
+
background: var(--aia-option-image-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, 0.083)));
|
|
1923
1982
|
}
|
|
1924
1983
|
|
|
1925
1984
|
.aia-image-YZAbO img {
|
|
@@ -1984,6 +2043,36 @@
|
|
|
1984
2043
|
--aia-option-row-height: calc(var(--aia-option-image-size, 40px) + 16px);
|
|
1985
2044
|
}
|
|
1986
2045
|
|
|
2046
|
+
/* A row without a picture, in a grid where other rows have one, lines up
|
|
2047
|
+
with them: it becomes the same centred flex row, its icon sits centred in a
|
|
2048
|
+
tile-sized box, and a row with no icon either is indented by the tile and
|
|
2049
|
+
its gap, so every option's text starts at the same x. Grids with no
|
|
2050
|
+
pictures keep the inline icon and hanging indent above. The text is left
|
|
2051
|
+
to size itself: letting it grow here would out-rank the loading-bar rule
|
|
2052
|
+
that makes a skeleton bar hug its text. */
|
|
2053
|
+
[data-aia-group]:has(.aia-image-YZAbO) .aia-content-T-Qba:not(:has(.aia-image-YZAbO)) {
|
|
2054
|
+
display: flex;
|
|
2055
|
+
flex: 1 1 auto;
|
|
2056
|
+
align-items: center;
|
|
2057
|
+
gap: var(--aia-option-image-gap, 12px);
|
|
2058
|
+
min-width: 0;
|
|
2059
|
+
min-height: var(--aia-option-image-size, 40px);
|
|
2060
|
+
padding-left: 0;
|
|
2061
|
+
text-indent: 0;
|
|
2062
|
+
}
|
|
2063
|
+
|
|
2064
|
+
[data-aia-group]:has(.aia-image-YZAbO) .aia-content-T-Qba:not(:has(.aia-image-YZAbO)) .aia-icon-Qw938 {
|
|
2065
|
+
flex: 0 0 auto;
|
|
2066
|
+
justify-content: center;
|
|
2067
|
+
width: var(--aia-option-image-size, 40px);
|
|
2068
|
+
height: var(--aia-option-image-size, 40px);
|
|
2069
|
+
margin-right: 0;
|
|
2070
|
+
}
|
|
2071
|
+
|
|
2072
|
+
[data-aia-group]:has(.aia-image-YZAbO) .aia-content-T-Qba:not(:has(.aia-image-YZAbO)):not(:has(.aia-icon-Qw938)) {
|
|
2073
|
+
padding-left: calc(var(--aia-option-image-size, 40px) + var(--aia-option-image-gap, 12px));
|
|
2074
|
+
}
|
|
2075
|
+
|
|
1987
2076
|
@keyframes aia-skeletonPulse-plvdD {
|
|
1988
2077
|
0%,
|
|
1989
2078
|
100% {
|
|
@@ -1993,7 +2082,40 @@
|
|
|
1993
2082
|
filter: brightness(0.55);
|
|
1994
2083
|
}
|
|
1995
2084
|
}
|
|
1996
|
-
|
|
2085
|
+
/* --- Loading skeleton fades ---
|
|
2086
|
+
Skeletons ease in and out over 100ms instead of popping. In: an option's
|
|
2087
|
+
text crossfades into its bar (the row element persists in React / Angular
|
|
2088
|
+
and is rebuilt in vanilla \u2014 a keyframe plays either way). Out: while the
|
|
2089
|
+
dropdown carries data-aia-skeleton-exiting (the core holds the skeleton for
|
|
2090
|
+
SKELETON_FADE_MS after the response lands) the skeleton rows and pills fade
|
|
2091
|
+
to nothing before the response's options replace them. Keep 100ms in step
|
|
2092
|
+
with SKELETON_FADE_MS in AIAutocomplete.ts. */
|
|
2093
|
+
/* During the fade-out the skeleton rows play nothing but the fade: no
|
|
2094
|
+
entrance, no text crossfade. Rows keep their identity through it (the core's
|
|
2095
|
+
dropdownSuggestion), but if one were ever remounted here, replaying either
|
|
2096
|
+
animation would bring the previous option's text back on screen. */
|
|
2097
|
+
[data-aia-skeleton-exiting] .aia-item-d4vpD[data-aia-loading] .aia-content-T-Qba,
|
|
2098
|
+
[data-aia-skeleton-exiting] .aia-item-d4vpD[data-aia-loading] .aia-text-yqoh9 {
|
|
2099
|
+
animation: none;
|
|
2100
|
+
}
|
|
2101
|
+
|
|
2102
|
+
[data-aia-skeleton-exiting] .aia-item-d4vpD[data-aia-loading] {
|
|
2103
|
+
animation: aia-skeletonOut-x6NRd 100ms ease-in forwards;
|
|
2104
|
+
}
|
|
2105
|
+
|
|
2106
|
+
@keyframes aia-skeletonBarIn-ZlEM0 {
|
|
2107
|
+
from {
|
|
2108
|
+
background-color: transparent;
|
|
2109
|
+
color: inherit;
|
|
2110
|
+
}
|
|
2111
|
+
}
|
|
2112
|
+
|
|
2113
|
+
@keyframes aia-skeletonOut-x6NRd {
|
|
2114
|
+
to {
|
|
2115
|
+
opacity: 0;
|
|
2116
|
+
}
|
|
2117
|
+
}
|
|
2118
|
+
`,document.head.appendChild(e)}var U={item:"aia-item-d4vpD",content:"aia-content-T-Qba",riseIn:"aia-riseIn-etXZT",fadeIn:"aia-fadeIn-I8u35",tappable:"aia-tappable-70KcX",nonTappable:"aia-nonTappable-xSZM-",highlighted:"aia-highlighted-Hb0SU",tag:"aia-tag-e3Fwe",pressed:"aia-pressed-98o-r",pressCompress:"aia-pressCompress-ICV3q",scrollHint:"aia-scrollHint-xKXPt",skeletonPulse:"aia-skeletonPulse-plvdD",text:"aia-text-yqoh9",skeletonBarIn:"aia-skeletonBarIn-ZlEM0",icon:"aia-icon-Qw938",count:"aia-count-IpYbQ",image:"aia-image-YZAbO",skeletonOut:"aia-skeletonOut-x6NRd"};var re=require("react/jsx-runtime");function Tt({option:e,isHighlighted:i,onSelect:a,onHighlight:r,id:n,loading:t,showIcon:l=!0,showImage:d=!0,showCount:w=!0,scrollHint:x,enterDelayMs:b=0}){let[u]=(0,se.useState)(b),[C,T]=(0,se.useState)(!1),k=d?(0,le.optionImageSrc)(e.image_url):null,[q,H]=(0,se.useState)(null),A=(0,se.useMemo)(()=>!k&&l&&e.icon_svg?(0,le.sanitizeOptionIconSvg)(e.icon_svg):null,[k,l,e.icon_svg]),O=w?(0,le.formatOptionCount)(e.item_count):null,F=(0,se.useRef)(void 0);(0,se.useEffect)(()=>()=>clearTimeout(F.current),[]);let N=()=>{t||!e.is_tappable||C||(T(!0),a(e),clearTimeout(F.current),F.current=setTimeout(()=>T(!1),170))},L=[U.item,i&&!t?U.highlighted:"",e.is_tappable?U.tappable:U.nonTappable,C?U.pressed:"",x?U.scrollHint:""].filter(Boolean).join(" ");return(0,re.jsx)("div",{id:n,role:"option","data-aia-option":"","data-aia-loading":t?"":void 0,"data-aia-icon":A&&e.icon?e.icon:void 0,"data-aia-image":k?"":void 0,"data-aia-item-count":O!==null?e.item_count:void 0,"aria-selected":i,className:L,style:{[le.OPTION_ENTER_DELAY_VAR]:`${u}ms`},tabIndex:t||!e.is_tappable?-1:0,onClick:N,onKeyDown:S=>{!t&&e.is_tappable&&(S.key==="Enter"||S.key===" ")&&(S.preventDefault(),N())},onMouseEnter:!t&&e.is_tappable?r:void 0,children:(0,re.jsxs)("span",{className:U.content,children:[k&&(0,re.jsx)("span",{className:`${U.image} magicx-aia-option-image`,"aria-hidden":"true",children:(0,re.jsx)("img",{src:k,alt:"",loading:"lazy",decoding:"async",referrerPolicy:"no-referrer",draggable:!1,hidden:q===k,onError:()=>H(k)})}),A&&(0,re.jsx)("span",{className:`${U.icon} magicx-aia-option-icon`,"aria-hidden":"true",dangerouslySetInnerHTML:{__html:A}}),(0,re.jsx)("span",{className:U.text,children:(0,le.optionLabel)(e)}),e.tag&&(0,re.jsx)("span",{className:U.tag,children:e.tag}),O!==null&&(0,re.jsx)("span",{className:`${U.count} magicx-aia-option-count`,children:O})]})})}var ct=require("react/jsx-runtime");function la(){let[e,i]=(0,de.useState)(G.isOptionsGridMobileViewport);return(0,de.useEffect)(()=>{if(typeof window>"u"||!window.matchMedia)return;let a=window.matchMedia(G.OPTIONS_GRID_MOBILE_QUERY),r=()=>i(a.matches);return r(),a.addEventListener("change",r),()=>a.removeEventListener("change",r)},[]),e}function At({options:e,activeIndex:i,onSelect:a,onHighlight:r,listboxId:n,loading:t,groupKey:l="",optionsPosition:d="below",showIcons:w=!0,showImages:x=!0,showCounts:b=!0}){let u=la(),C=(0,de.useRef)(null),[T,k]=(0,de.useState)(null),q=(0,de.useRef)(null);(0,de.useLayoutEffect)(()=>{if(t&&(0,G.sameOptionRows)(q.current,e))return;q.current=t?null:e;let A=C.current,F=A&&!t&&(0,G.needsOptionsGridMeasurement)(e.length,u)?(0,G.measureOptionsGrid)(A):null;k(F?(0,G.planOptionsGrid)(e.length,u,F.rowWidths,F.gridWidth):null)},[e,u,t]);let H=T??(0,G.planOptionsGrid)(e.length,u,null,null);return(0,ct.jsx)(It,{min:"250px",max:"1fr",gap:"0",scroll:!0,scrollResetKey:l,template:H.template,maxHeight:H.maxHeight,innerRef:A=>{C.current=A},"data-aia-group":l,children:e.map((A,O)=>(0,ct.jsx)(Tt,{option:A,isHighlighted:O===i,onSelect:a,onHighlight:()=>r(O),id:`${n}-option-${O}`,loading:t,showIcon:w,showImage:x,showCount:b,scrollHint:!t&&H.scrollHintIndices.includes(O),enterDelayMs:t?0:(0,G.optionEnterDelayMs)(O,H.cols,e.length,d)},`${l}\0${A.text}`))})}if(typeof document<"u"&&!document.getElementById("ac-style-8414cd5f")){let e=document.createElement("style");e.id="ac-style-8414cd5f",e.textContent=`.aia-stack {
|
|
1997
2119
|
display: flex;
|
|
1998
2120
|
flex-direction: column;
|
|
1999
2121
|
gap: var(--aia-stack-space, 0.5rem);
|
|
@@ -2008,7 +2130,7 @@
|
|
|
2008
2130
|
align-items: end;
|
|
2009
2131
|
}
|
|
2010
2132
|
/* data-align="stretch" is the flex default \u2014 no rule needed. */
|
|
2011
|
-
`,document.head.appendChild(e)}var
|
|
2133
|
+
`,document.head.appendChild(e)}var Ot=require("react/jsx-runtime");function Rt({space:e,align:i="stretch",className:a,children:r,...n}){let t=e?{"--aia-stack-space":e}:void 0;return(0,Ot.jsx)("div",{className:a?`aia-stack ${a}`:"aia-stack","data-align":i,style:t,...n,children:r})}var K=require("react/jsx-runtime"),da=[159,119,164],ca=()=>{},Dt=()=>{};function pa(e){let i=()=>typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches,[a,r]=(0,X.useState)(i);if((0,X.useEffect)(()=>{if(e!=="auto"||typeof window>"u"||typeof window.matchMedia!="function")return;let n=window.matchMedia("(prefers-color-scheme: dark)"),t=()=>r(n.matches);return n.addEventListener("change",t),()=>n.removeEventListener("change",t)},[e]),e!==void 0)return e==="auto"?a?"dark":"light":e}function ha(e,i){let a=(0,X.useRef)(null);(0,X.useEffect)(()=>{let r=e.current,n=i.current;if(!r||!n)return;let t=r.querySelector(".aia-grid[data-scroll]");if(a.current&&a.current.grid!==t&&(a.current.controller.destroy(),a.current=null),t&&!a.current){a.current={grid:t,controller:(0,Be.attachScrollArrow)({dropdown:r,grid:t,button:n})};return}a.current?.controller.update()}),(0,X.useEffect)(()=>()=>{a.current?.controller.destroy(),a.current=null},[])}function Xe({suggestions:e,activeIndex:i,onSelect:a,onHighlight:r,isOpen:n,id:t,className:l,pills:d,onPillClick:w,showPills:x=!0,onSkip:b,showSkipButton:u=!0,showOptionIcons:C=!0,showOptionImages:T=!0,showOptionCounts:k=!0,skipDisabled:q=!1,activeSelected:H=!1,isLoading:A=!1,skeletonExiting:O=!1,isInputEmpty:F=!1,products:N,onProductSelect:L,onProductFocusChange:S,productsLayout:ee="row",productImageFallback:ke="image",formatType:ce="options",dateView:Ce=null,selectedDateIso:pe=null,selectedDateRange:h=null,dateRangeStart:Re=null,onPreviousMonth:Pe,onNextMonth:Se,optionsPosition:he="below",mode:Ie}){let ue=pa(Ie),te=ue!==void 0,me=(0,X.useRef)(null),ae=(0,X.useRef)(null);ha(me,ae);let ge=e[0]?.options??[],fe=!!(d&&d.length>0&&w),c=!!(N&&N.length>0),m=n&&(ge.length>0||x&&fe||A||c),v={suggestions:e,activeIndex:i,pills:d,showPills:x,showSkipButton:u,showOptionIcons:C,showOptionImages:T,showOptionCounts:k,skipDisabled:q,activeSelected:H,isLoading:A,skeletonExiting:O,isInputEmpty:F,products:N,formatType:ce,dateView:Ce,selectedDateIso:pe,selectedDateRange:h,dateRangeStart:Re},y=(0,X.useRef)(v);m&&(y.current=v);let o=m?v:y.current,E=o.suggestions[0],g=E?.options??[],ie=o.activeIndex>=0&&!!g[o.activeIndex]?.is_tappable,Z=!!(o.pills&&o.pills.length>0&&w),Oe=o.showPills&&Z,p=o.showPills&&!Z&&o.isLoading,be=Oe||p,Ee=Z&&o.showSkipButton&&!o.isInputEmpty&&!!b,ve=o.pills?.[0]?.text,Le=(0,Be.isCalendarFormat)(o.formatType)&&o.dateView!=null,we=g.length>0&&!Le,Me=g.length>0&&Le&&!o.isLoading,oe=o.isLoading&&!we&&!Me,Y=o.products??[];return(0,K.jsxs)("div",{ref:me,id:t,role:"listbox","data-aia-dropdown":"","data-options-position":he,"data-mode":ue,"data-aia-loading":o.isLoading?"":void 0,"data-aia-skeleton-exiting":o.skeletonExiting?"":void 0,"data-aia-has-products":Y.length>0?"":void 0,className:`${te?"magicx-aia ":""}${xe.dropdown} ${m?xe.visible:""} ${l??""}`,onMouseDown:$=>$.preventDefault(),children:[(0,K.jsxs)(Rt,{space:"8px",children:[(be||Ee)&&(0,K.jsxs)(We,{noWrap:!0,className:xe.pillBar,"data-aia-pillbar":"",children:[be&&(0,K.jsx)("span",{className:xe.pillScroll,"data-aia-pill-scroll":"",children:(0,K.jsx)(Ze,{pills:o.pills??[],activePillIndex:0,activeSelected:o.activeSelected,onSelectPill:w??(()=>{}),rounded:!0,loading:o.isLoading})}),Ee&&(0,K.jsx)("button",{type:"button",tabIndex:-1,className:xe.skip,"data-aia-skip":"",disabled:o.isLoading||o.skipDisabled,"aria-label":ve?`Skip ${ve}`:"Skip",onClick:b,children:"skip"})]}),we&&(0,K.jsx)(At,{options:g,activeIndex:o.activeIndex,onSelect:a,onHighlight:r,listboxId:t,loading:o.isLoading,groupKey:E?`${E.type} ${E.text}`:"",optionsPosition:he,showIcons:o.showOptionIcons,showImages:o.showOptionImages,showCounts:o.showOptionCounts}),Me&&o.dateView&&(0,K.jsx)(wt,{options:g,activeIndex:o.activeIndex,listboxId:t,view:o.dateView,selection:{selectedIso:o.selectedDateIso??null,selectedRange:o.selectedDateRange??null,rangeStart:o.dateRangeStart??null},onSelect:a,onHighlight:r,onPreviousMonth:Pe??Dt,onNextMonth:Se??Dt}),oe&&(0,K.jsx)("div",{className:xe.skeletonBars,"data-aia-skeleton-bars":"",children:da.map($=>(0,K.jsx)("span",{className:xe.skeletonBar,style:{width:$}},`bar-${$}`))}),(0,K.jsx)(Pt,{products:Y,listboxId:t,onSelect:L??ca,onFocusChange:S,focusable:m,layout:ee,imageFallback:ke}),(0,K.jsx)(xt,{isOptionHighlighted:ie,isInputEmpty:o.isInputEmpty})]}),(0,K.jsx)("button",{ref:ae,type:"button",tabIndex:-1,className:xe.scrollArrow,"data-aia-scroll-arrow":"","aria-label":Be.SCROLL_ARROW_LABEL,"aria-hidden":"true",children:(0,K.jsx)("svg",{viewBox:"0 0 16 16",width:"18",height:"18",fill:"none",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",focusable:"false",children:(0,K.jsx)("path",{d:"M4 6.5 8 10.5l4-4"})})})]})}var Fe=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=`.aia-submitButton-otz7H {
|
|
2012
2134
|
flex-shrink: 0;
|
|
2013
2135
|
width: 32px;
|
|
2014
2136
|
height: 32px;
|
|
@@ -2061,5 +2183,5 @@
|
|
|
2061
2183
|
);
|
|
2062
2184
|
cursor: default;
|
|
2063
2185
|
}
|
|
2064
|
-
`,document.head.appendChild(e)}var Lt={submitButton:"aia-submitButton-otz7H"};var Ze=require("react/jsx-runtime");function Ot({disabled:e,onClick:o}){return(0,Ze.jsx)("button",{type:"button","data-aia-submit":"",className:Lt.submitButton,disabled:e,onClick:t=>{t.stopPropagation(),o()},"aria-label":"Submit",children:(0,Ze.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,Ze.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var ze=require("@magicx-eng/ai-autocomplete-vanilla"),I=require("react");var dt=require("react");function Mt(e){let o=(0,dt.useRef)(e);o.current=e;let t=Object.keys(e??{}).sort().join("\0"),s=(0,dt.useRef)({key:"",overrides:void 0});if(s.current.key!==t){let n={};for(let i of Object.keys(e??{})){let r=(m,w,g)=>{let x=o.current?.[i];return x?x(m,w,g):[]};n[i]=r}s.current={key:t,overrides:e?n:void 0}}return{overrides:s.current.overrides,key:t}}var ct=require("react");function zt(e){let o=(0,ct.useRef)(e);o.current=e;let t=(0,ct.useRef)(null);t.current===null&&(t.current={fetch:(n,i)=>{let r=o.current;return r?r.fetch(n,i):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?t.current:void 0,enabled:s}}var pa={text:"",completedParams:[],identifiedParams:[],skippedParams:[],pendingSpan:null,suggestions:[],products:[],customFields:null,optionSearch:null,activeDropdownIndex:-1,newParamId:null,isLoading:!0,isReady:!1,error:null,segments:[],actionableSuggestions:[],filteredOptions:[],activeFormatType:"options",dateView:null,dateRangeStart:null,placeholderText:"",optionQuery:"",isSearchingOptions:!1,isDropdownOpen:!1,isActivePillSelected:!1,filterBase:0,filterInProgress:!1,pillTapped:!1,skipNextFetch:!1,lastRawQuery:"",isFocused:!1,editingParam:null,editingIdentified:null,editingAnchor:null,editingTail:null,caretOffset:null,inSelectionAnimation:!1,dateViewMonth:null,pendingRangeStart:null};function Xe({onSubmit:e,onResult:o,onError:t,optionOverrides:s,maskCompletedText:n,apiConfig:i,additionalContext:r,columns:m=2,dropdownTrigger:w,optionsPosition:g,closeDropdownOnBlur:x,showNonTappableOptions:h,showOptionIcons:C,showOptionImages:E,showOptionCounts:k,showSkipButton:K,showProducts:R,onFocus:T,onBlur:N,value:L,completedParams:F,onChange:G,onParamsChange:S,products:se,onProductSelect:le,source:Ce,setCursor:de}){let u=(0,I.useRef)(null),[Y,Pe]=(0,I.useState)(null),ce=(0,I.useRef)(e);ce.current=e;let Se=(0,I.useRef)(o);Se.current=o;let pe=(0,I.useRef)(t);pe.current=t;let Ie=(0,I.useRef)(G);Ie.current=G;let Z=(0,I.useRef)(S);Z.current=S;let he=(0,I.useRef)(T);he.current=T;let ue=(0,I.useRef)(N);ue.current=N;let me=(0,I.useRef)(de);me.current=de;let fe=(0,I.useRef)(le);fe.current=le;let H=zt(se),d=Mt(s);(0,I.useEffect)(()=>{if(typeof document>"u")return;let f=new ze.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:i,additionalContext:r,optionOverrides:d.overrides,maskCompletedText:n,columns:m,dropdownTrigger:w,optionsPosition:g,closeDropdownOnBlur:x,showNonTappableOptions:h,showProducts:R,source:Ce,value:L,completedParams:F,onSubmit:(...z)=>ce.current?.(...z),onResult:(...z)=>Se.current?.(...z),onError:(...z)=>pe.current?.(...z),onChange:(...z)=>Ie.current?.(...z),onParamsChange:(...z)=>Z.current?.(...z),onFocus:()=>he.current?.(),onBlur:()=>ue.current?.(),onProductSelect:z=>fe.current?.(z),setCursor:z=>me.current?.(z),products:H.config});u.current=f,Pe(f.getState());let V=f.subscribe(z=>Pe(z));return()=>{V(),f.destroy(),u.current===f&&(u.current=null)}},[]),(0,I.useEffect)(()=>{L!==void 0&&u.current?.setValue(L)},[L]),(0,I.useEffect)(()=>{F!==void 0&&u.current?.setCompletedParams(F)},[F]);let b=JSON.stringify(i??null),a;try{a=JSON.stringify(r??null)}catch{a="[unstringifiable]"}(0,I.useEffect)(()=>{u.current?.update({apiConfig:i,additionalContext:r,optionOverrides:d.overrides,dropdownTrigger:w,optionsPosition:g,closeDropdownOnBlur:x,showNonTappableOptions:h,showProducts:R})},[b,a,d.key,w,g,x,h,R]);let y=(0,I.useRef)(!1);(0,I.useEffect)(()=>{if(!y.current){y.current=!0;return}u.current?.update({products:H.config})},[H.enabled]);let v=(0,I.useRef)(null);v.current===null&&(v.current={handleTextChange:f=>u.current?.handleTextChange(f),handleKeyDown:f=>{let V="nativeEvent"in f?f.nativeEvent:f;u.current?.handleKeyDown(V)},setFocused:f=>u.current?.setFocused(f),startEditingParam:f=>u.current?.startEditingParam(f),exitEditMode:()=>u.current?.exitEditMode(),handleCaretAfterInput:f=>u.current?.handleCaretAfterInput(f),handleCaretMove:f=>u.current?.handleCaretMove(f),replaceEditingRange:f=>u.current?.replaceEditingRange(f)??!1,setActivePill:f=>u.current?.setActivePill(f),skipActivePill:()=>u.current?.skipActivePill(),removeLastParam:()=>u.current?.removeLastParam(),clearNewParamId:()=>u.current?.clearNewParamId(),reset:()=>u.current?.reset(),selectOption:f=>u.current?.selectOption(f),selectProduct:f=>u.current?.selectProduct(f),setActiveDropdownIndex:f=>u.current?.setActiveDropdownIndex(f),showPreviousMonth:()=>u.current?.showPreviousMonth(),showNextMonth:()=>u.current?.showNextMonth(),handleFocus:()=>u.current?.setFocused(!0),handleBlur:()=>u.current?.setFocused(!1)});let p=v.current,$=(0,I.useCallback)(f=>{let V=f.target.value,tt=V.length>0&&!f.nativeEvent?.isComposing&&V[0]!==V[0].toUpperCase()?V[0].toUpperCase()+V.slice(1):V;u.current?.handleTextChange(tt)},[]),X=(0,I.useCallback)(f=>{u.current?.handleKeyDown(f.nativeEvent)},[]),ge=u.current,c=Y??pa,be=L!==void 0?L:c.text,Ee=F!==void 0?F:c.completedParams,ve=c.actionableSuggestions,De=ve[0],we=ge?.listboxId??"",He=c.activeDropdownIndex>=0&&ge?`${we}-option-${c.activeDropdownIndex}`:void 0,J=c.editingParam,W=c.editingIdentified,Le=J?{type:J.suggestionType,text:J.suggestionPlaceholder,required:!0,options:J.options}:W?{type:W.type,text:(0,ze.identifiedParamLabel)(W.type),required:!0,options:[]}:null,Be=Le??De,et=Le?[Le]:ve,Fe=(0,ze.dateSelectionFor)(c),We=!ge||c.isLoading&&!c.editingParam&&!c.inSelectionAnimation||c.isSearchingOptions;return{completedParams:Ee,skippedParams:c.skippedParams,identifiedParams:c.identifiedParams,suggestionPills:ve,setActivePill:p.setActivePill,skipActivePill:p.skipActivePill,removeLastParam:p.removeLastParam,segments:c.segments,newParamId:c.newParamId,clearNewParamId:p.clearNewParamId,suggestions:c.suggestions,activeIndex:c.activeDropdownIndex,isReady:c.isReady,isLoading:We,isFocused:c.isFocused,isDropdownOpen:c.isDropdownOpen,isActivePillSelected:c.isActivePillSelected,placeholderText:c.placeholderText,listboxId:we,error:c.error,products:c.products,customFields:c.customFields,selectProduct:p.selectProduct,handleTextChange:p.handleTextChange,handleKeyDown:p.handleKeyDown,setFocused:p.setFocused,editingParam:J,editingIdentified:W,editingAnchor:c.editingAnchor,caretOffset:c.caretOffset,startEditingParam:p.startEditingParam,exitEditMode:p.exitEditMode,handleCaretAfterInput:p.handleCaretAfterInput,handleCaretMove:p.handleCaretMove,replaceEditingRange:p.replaceEditingRange,inputProps:{value:be,placeholder:c.placeholderText||void 0,onChange:$,onKeyDown:X,onFocus:p.handleFocus,onBlur:p.handleBlur,role:"combobox","aria-expanded":c.isDropdownOpen,"aria-activedescendant":He,"aria-autocomplete":"list","aria-controls":we},reset:p.reset,dropdownProps:{suggestions:Be?[{...Be,options:c.filteredOptions}]:[],activeIndex:c.activeDropdownIndex,onSelect:p.selectOption,onHighlight:p.setActiveDropdownIndex,isOpen:c.isDropdownOpen,id:we,pills:et,activeSelected:c.isActivePillSelected,onPillClick:p.setActivePill,onSkip:p.skipActivePill,showSkipButton:(K??!0)&&!J&&!W,showOptionIcons:C??!0,showOptionImages:E??!0,showOptionCounts:k??!0,skipDisabled:c.inSelectionAnimation,isLoading:We,isInputEmpty:be.trim().length===0,products:c.products,onProductSelect:p.selectProduct,onProductFocusChange:p.setFocused,formatType:c.activeFormatType,dateView:c.dateView,selectedDateIso:Fe.selectedIso,selectedDateRange:Fe.selectedRange,dateRangeStart:Fe.rangeStart,onPreviousMonth:p.showPreviousMonth,onNextMonth:p.showNextMonth,optionsPosition:g??"below"}}}var Q=require("@magicx-eng/ai-autocomplete-vanilla"),P=require("react"),Je;function ha(){if(Je!==void 0)return Je;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Je=e.contentEditable==="plaintext-only",Je}function Nt(e){let{segments:o,showChipIcons:t=!0,showChipImages:s=!0,newParamId:n,editingParam:i,editingIdentified:r,editingAnchor:m,caretOffset:w,placeholderText:g,isFocused:x,isDropdownOpen:h,listboxId:C,activeDescendantId:E,autoFocus:k,handleTextChange:K,handleKeyDown:R,handleCaretAfterInput:T,handleCaretMove:N,startEditingParam:L,replaceEditingRange:F,setFocused:G}=e,S=(0,P.useRef)(null),se=(0,P.useRef)(!1),le=(0,P.useRef)(""),Ce=(0,P.useRef)(""),de=(0,P.useRef)(null),u=(0,P.useRef)(0);de.current=w,(0,P.useEffect)(()=>{if(!k)return;let d=S.current;if(!d)return;document.activeElement===d?G(!0):d.focus();let b=d.ownerDocument??document,a=b.getSelection(),y=a&&a.rangeCount>0&&d.contains(a.anchorNode);if(a&&!y){let v=b.createRange();v.selectNodeContents(d),v.collapse(!0),a.removeAllRanges(),a.addRange(v)}},[k,G]),(0,P.useEffect)(()=>{let d=S.current;if(!d)return;let b=d.ownerDocument??document,a=()=>{let y=b.getSelection();if(!y||y.rangeCount===0||!y.anchorNode||!d.contains(y.anchorNode))return;let v=y.anchorNode,p=v.nodeType===Node.ELEMENT_NODE?v:v.parentElement,X=(y.isCollapsed?p?.closest("strong[data-param-id]"):null)?.dataset.paramId??null,ge=i?.id??r?.id??null;if(X&&X!==ge){L(X);return}performance.now()-u.current<50||N((0,Q.getCursorOffset)(d))};return b.addEventListener("selectionchange",a),()=>b.removeEventListener("selectionchange",a)},[i,r,L,N]),(0,P.useLayoutEffect)(()=>{let d=S.current;d&&(0,Q.renderEditableContent)({input:d,segments:o,newParamId:n,editingParamId:i?.id??null,placeholderText:g??"",isFocused:x,showChipIcons:t,showChipImages:s})},[o,n,i,g,x,t,s]),(0,P.useLayoutEffect)(()=>{let d=le.current,b=n??"";if(le.current=b,!b||b===d)return;let a=S.current;if(!a)return;a.focus();let y=de.current??(0,Q.plainTextLength)(a);(0,Q.setCursorOffset)(a,y)},[n]),(0,P.useLayoutEffect)(()=>{let d=Ce.current,b=i?.id??"";if(Ce.current=b,!b||b===d||m==null)return;let a=S.current;a&&(0,Q.setCursorOffset)(a,m)},[i,m]);let Y=(0,P.useCallback)(()=>{if(se.current)return;let d=S.current;if(!d)return;let b=(0,Q.extractPlainText)(d),y=b.length>0&&b[0]!==b[0].toUpperCase()?b[0].toUpperCase()+b.slice(1):b;K(y)},[K]),Pe=(0,P.useCallback)(()=>{u.current=performance.now(),Y();let d=S.current;d&&T((0,Q.getCursorOffset)(d))},[Y,T]);(0,P.useEffect)(()=>{let d=S.current;if(!d)return;let b=a=>{let y=a,v=y.inputType;if(v==="insertParagraph"||v==="insertLineBreak"||v==="insertFromDrop"){a.preventDefault();return}if(v.startsWith("insert")||v.startsWith("delete")){let p=v.startsWith("delete")?"":y.data??"";F(p)&&a.preventDefault()}};return d.addEventListener("beforeinput",b),()=>d.removeEventListener("beforeinput",b)},[F]);let ce=(0,P.useCallback)(()=>{se.current=!0},[]),Se=(0,P.useCallback)(()=>{se.current=!1,Y()},[Y]),pe=(0,P.useCallback)(d=>{d.preventDefault();let b=S.current;if(!b)return;let a=(d.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!a)return;let y=b.ownerDocument??document,v=y.getSelection();if(!v||v.rangeCount===0)return;let p=v.getRangeAt(0);if(!b.contains(p.startContainer))return;p.deleteContents();let $=y.createTextNode(a);p.insertNode($),p.setStartAfter($),p.collapse(!0),v.removeAllRanges(),v.addRange(p),Y()},[Y]),Ie=(0,P.useCallback)(d=>R(d),[R]),Z=(0,P.useCallback)(()=>G(!0),[G]),he=(0,P.useCallback)(()=>G(!1),[G]),ue=(0,P.useCallback)(()=>S.current?.focus(),[]),me=(0,P.useCallback)(()=>S.current?.blur(),[]),fe=(0,P.useCallback)(()=>{let d=S.current;return d?(0,Q.extractPlainText)(d):""},[]),H=ha()?"plaintext-only":"true";return{inputRef:S,editorProps:{ref:S,contentEditable:H,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":C,"aria-expanded":h,"aria-activedescendant":E,spellCheck:!0,enterKeyHint:"send",onInput:Pe,onKeyDown:Ie,onCompositionStart:ce,onCompositionEnd:Se,onPaste:pe,onFocus:Z,onBlur:he},getPlainText:fe,focus:ue,blur:me}}var ae=require("react/jsx-runtime");function ua(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var Ht=(0,M.forwardRef)(function({onSubmit:o,onResult:t,onError:s,optionOverrides:n,maskCompletedText:i,className:r,apiConfig:m,additionalContext:w,columns:g,pillPlacement:x="dropdown",mode:h="auto",optionsPosition:C="below",animations:E=!0,dropdownTrigger:k,closeDropdownOnBlur:K,showNonTappableOptions:R,showOptionIcons:T=!0,showChipIcons:N=!0,showChipImages:L=!0,showOptionImages:F=!0,showOptionCounts:G=!0,showSkipButton:S,showProducts:se,productsLayout:le,autoFocus:Ce=!0,onFocus:de,onBlur:u,value:Y,completedParams:Pe,onChange:ce,onParamsChange:Se,products:pe,onProductSelect:Ie,submitButton:Z},he){let ue=(0,M.useRef)(null),me=(0,M.useRef)(null),fe=(0,M.useRef)(()=>{}),H=(0,M.useRef)(null),d=(0,M.useRef)(null);(0,M.useEffect)(()=>{let A=ue.current;if(A)return H.current?H.current.setMode(h):H.current=new Ne.ModeController(A,h),()=>{H.current?.destroy(),H.current=null}},[h]);let b=(0,M.useCallback)(A=>{let Te=d.current?.current;Te&&(Te.focus(),(0,Ne.setCursorOffset)(Te,A))},[]),{completedParams:a,skippedParams:y,identifiedParams:v,isReady:p,customFields:$,suggestionPills:X,setActivePill:ge,skipActivePill:c,segments:be,newParamId:Ee,clearNewParamId:ve,placeholderText:De,isFocused:we,isDropdownOpen:He,isActivePillSelected:J,isLoading:W,activeIndex:Le,listboxId:Be,handleTextChange:et,handleKeyDown:Fe,setFocused:We,editingParam:f,editingIdentified:V,editingAnchor:z,caretOffset:tt,startEditingParam:Bt,handleCaretAfterInput:Ft,handleCaretMove:Kt,replaceEditingRange:Gt,dropdownProps:Wt,reset:_e}=Xe({onSubmit:A=>fe.current(A),onResult:t,onError:s,optionOverrides:n,maskCompletedText:i,apiConfig:m,additionalContext:w,columns:g,dropdownTrigger:k,optionsPosition:C,closeDropdownOnBlur:K,showNonTappableOptions:R,showOptionIcons:T,showOptionImages:F,showOptionCounts:G,showSkipButton:S,showProducts:se,onFocus:de,onBlur:u,value:Y,completedParams:Pe,onChange:ce,onParamsChange:Se,products:pe,onProductSelect:Ie,source:"full-sdk",setCursor:b});(0,M.useEffect)(()=>{if(!Ee)return;let A=window.setTimeout(()=>ve(),650);return()=>window.clearTimeout(A)},[Ee,ve]);let _t=Le>=0?`${Be}-option-${Le}`:void 0,{inputRef:at,editorProps:qt,focus:qe,blur:pt,getPlainText:ht}=Nt({segments:be,newParamId:Ee,editingParam:f,editingIdentified:V,editingAnchor:z,caretOffset:tt,placeholderText:De,isFocused:we,showChipIcons:N,showChipImages:L,isDropdownOpen:He,listboxId:Be,activeDescendantId:_t,autoFocus:Ce,handleTextChange:et,handleKeyDown:Fe,handleCaretAfterInput:Ft,handleCaretMove:Kt,startEditingParam:Bt,replaceEditingRange:Gt,setFocused:We});d.current=at,(0,M.useLayoutEffect)(()=>{let A=me.current,Te=at.current;if(!A||!Te)return;let ut=()=>{let ft=A.firstElementChild;if(!ft)return;let Yt=ft.getBoundingClientRect(),$t=Te.getBoundingClientRect();Yt.top>=$t.bottom-2?A.setAttribute("data-aia-pill-wrapped",""):A.removeAttribute("data-aia-pill-wrapped")};ut();let mt=new ResizeObserver(ut);return mt.observe(Te),()=>mt.disconnect()},[be,X.length,W,at]),(0,M.useImperativeHandle)(he,()=>({focus:qe,blur:pt,reset:_e,setMode:A=>H.current?.setMode(A),skipActivePill:c}),[qe,pt,_e,c]);let Ue=!!be.length||a.length>0,it=(0,M.useCallback)(()=>{if(!Ue)return;let A=ht();o((0,Ne.buildSubmitResult)(A,a,y,{identifiedParams:v,isReady:p,customFields:$})),_e()},[Ue,a,y,v,p,$,o,_e,ht]);fe.current=it;let Ut=(0,M.useCallback)(A=>{A.target?.closest("[data-aia-pill]")||qe()},[qe]),jt=x==="inline",Qt=x==="dropdown";return(0,ae.jsxs)("div",{ref:ue,className:`magicx-aia ${Re.container} ${r??""}`,"data-pill-placement":x,"data-options-position":C,"data-animations":E?"on":"off","data-mode":ua(h),children:[(0,ae.jsx)(Ve,{...Wt,showPills:Qt,productsLayout:le}),(0,ae.jsxs)("div",{className:Re.inputWrapper,"data-aia-input-wrapper":"",onClick:Ut,children:[(0,ae.jsxs)("div",{className:Re.editorArea,"data-aia-editor":"",children:[(0,ae.jsx)("div",{...qt,className:Re.input,"data-aia-input":""}),jt&&(W||X.length>0)&&(0,ae.jsx)("span",{ref:me,className:Re.pillListContainer,"data-aia-pill-list-container":"",children:(0,ae.jsx)(Qe,{pills:X,activePillIndex:0,activeSelected:J,onSelectPill:ge,loading:W})})]}),Z===null?null:Z===void 0?(0,ae.jsx)(Ot,{disabled:!Ue,onClick:it}):(0,ae.jsx)("span",{"data-aia-submit":"","data-aia-submit-slot":"",className:Re.submitSlot,onClick:A=>{Ue&&(A.stopPropagation(),it())},children:Z})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,DATE_RANGE_META_END,DATE_RANGE_META_START,DEFAULT_OPTION_COUNT_UNIT,PRODUCT_PATH_PREFIX,WEEKDAY_LABELS,buildSubmitResult,cellDay,cellIso,dateCellMarks,formatDate,formatDateRange,formatOptionCount,isoDate,monthLabel,optionCountLabel,optionHasImage,optionImageSrc,optionLabel,parseDate,parseLooseDate,parseLooseDateRange,productFromMatchedItem,productsFromCustomFields,sanitizeOptionIconSvg,selectedRangeFor,useAIAutocomplete,visibleDateRange,withSkippedParams});
|
|
2186
|
+
`,document.head.appendChild(e)}var Lt={submitButton:"aia-submitButton-otz7H"};var Je=require("react/jsx-runtime");function Mt({disabled:e,onClick:i}){return(0,Je.jsx)("button",{type:"button","data-aia-submit":"",className:Lt.submitButton,disabled:e,onClick:a=>{a.stopPropagation(),i()},"aria-label":"Submit",children:(0,Je.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,Je.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var He=require("@magicx-eng/ai-autocomplete-vanilla"),I=require("react");var pt=require("react");function zt(e){let i=(0,pt.useRef)(e);i.current=e;let a=Object.keys(e??{}).sort().join("\0"),r=(0,pt.useRef)({key:"",overrides:void 0});if(r.current.key!==a){let n={};for(let t of Object.keys(e??{})){let l=(d,w,x)=>{let b=i.current?.[t];return b?b(d,w,x):[]};n[t]=l}r.current={key:a,overrides:e?n:void 0}}return{overrides:r.current.overrides,key:a}}var ht=require("react");function Nt(e){let i=(0,ht.useRef)(e);i.current=e;let a=(0,ht.useRef)(null);a.current===null&&(a.current={fetch:(n,t)=>{let l=i.current;return l?l.fetch(n,t):Promise.reject(new Error("products config removed"))},transform:n=>i.current?.transform(n)??[],get limit(){return i.current?.limit}});let r=e!==void 0;return{config:r?a.current:void 0,enabled:r}}var ua={text:"",completedParams:[],identifiedParams:[],skippedParams:[],pendingSpan:null,suggestions:[],products:[],customFields:null,optionSearch:null,activeDropdownIndex:-1,newParamId:null,isLoading:!0,isReady:!1,error:null,segments:[],actionableSuggestions:[],filteredOptions:[],dropdownLoading:!0,dropdownOptions:[],skeletonOptions:null,skeletonSuggestion:null,dropdownSuggestion:null,skeletonRequested:!1,skeletonExiting:!1,activeFormatType:"options",dateView:null,dateRangeStart:null,placeholderText:"",optionQuery:"",isSearchingOptions:!1,isDropdownOpen:!1,isActivePillSelected:!1,filterBase:0,filterInProgress:!1,pillTapped:!1,skipNextFetch:!1,lastRawQuery:"",isFocused:!1,editingParam:null,editingIdentified:null,editingAnchor:null,editingTail:null,caretOffset:null,inSelectionAnimation:!1,dateViewMonth:null,pendingRangeStart:null};function et({onSubmit:e,onResult:i,onError:a,optionOverrides:r,maskCompletedText:n,apiConfig:t,additionalContext:l,columns:d=2,dropdownTrigger:w,optionsPosition:x,closeDropdownOnBlur:b,showNonTappableOptions:u,showOptionIcons:C,showOptionImages:T,showOptionCounts:k,showSkipButton:q,showProducts:H,productImageFallback:A="image",onFocus:O,onBlur:F,value:N,completedParams:L,onChange:S,onParamsChange:ee,products:ke,onProductSelect:ce,source:Ce,setCursor:pe}){let h=(0,I.useRef)(null),[Re,Pe]=(0,I.useState)(null),Se=(0,I.useRef)(e);Se.current=e;let he=(0,I.useRef)(i);he.current=i;let Ie=(0,I.useRef)(a);Ie.current=a;let ue=(0,I.useRef)(S);ue.current=S;let te=(0,I.useRef)(ee);te.current=ee;let me=(0,I.useRef)(O);me.current=O;let ae=(0,I.useRef)(F);ae.current=F;let ge=(0,I.useRef)(pe);ge.current=pe;let fe=(0,I.useRef)(ce);fe.current=ce;let c=Nt(ke),m=zt(r);(0,I.useEffect)(()=>{if(typeof document>"u")return;let f=new He.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:t,additionalContext:l,optionOverrides:m.overrides,maskCompletedText:n,columns:d,dropdownTrigger:w,optionsPosition:x,closeDropdownOnBlur:b,showNonTappableOptions:u,showProducts:H,source:Ce,value:N,completedParams:L,onSubmit:(...B)=>Se.current?.(...B),onResult:(...B)=>he.current?.(...B),onError:(...B)=>Ie.current?.(...B),onChange:(...B)=>ue.current?.(...B),onParamsChange:(...B)=>te.current?.(...B),onFocus:()=>me.current?.(),onBlur:()=>ae.current?.(),onProductSelect:B=>fe.current?.(B),setCursor:B=>ge.current?.(B),products:c.config});h.current=f,Pe(f.getState());let j=f.subscribe(B=>Pe(B));return()=>{j(),f.destroy(),h.current===f&&(h.current=null)}},[]),(0,I.useEffect)(()=>{N!==void 0&&h.current?.setValue(N)},[N]),(0,I.useEffect)(()=>{L!==void 0&&h.current?.setCompletedParams(L)},[L]);let v=JSON.stringify(t??null),y;try{y=JSON.stringify(l??null)}catch{y="[unstringifiable]"}(0,I.useEffect)(()=>{h.current?.update({apiConfig:t,additionalContext:l,optionOverrides:m.overrides,dropdownTrigger:w,optionsPosition:x,closeDropdownOnBlur:b,showNonTappableOptions:u,showProducts:H})},[v,y,m.key,w,x,b,u,H]);let o=(0,I.useRef)(!1);(0,I.useEffect)(()=>{if(!o.current){o.current=!0;return}h.current?.update({products:c.config})},[c.enabled]);let E=(0,I.useRef)(null);E.current===null&&(E.current={handleTextChange:f=>h.current?.handleTextChange(f),handleKeyDown:f=>{let j="nativeEvent"in f?f.nativeEvent:f;h.current?.handleKeyDown(j)},setFocused:f=>h.current?.setFocused(f),startEditingParam:f=>h.current?.startEditingParam(f),exitEditMode:()=>h.current?.exitEditMode(),handleCaretAfterInput:f=>h.current?.handleCaretAfterInput(f),handleCaretMove:f=>h.current?.handleCaretMove(f),replaceEditingRange:f=>h.current?.replaceEditingRange(f)??!1,setActivePill:f=>h.current?.setActivePill(f),skipActivePill:()=>h.current?.skipActivePill(),removeLastParam:()=>h.current?.removeLastParam(),clearNewParamId:()=>h.current?.clearNewParamId(),reset:()=>h.current?.reset(),selectOption:f=>h.current?.selectOption(f),selectProduct:f=>h.current?.selectProduct(f),setActiveDropdownIndex:f=>h.current?.setActiveDropdownIndex(f),showPreviousMonth:()=>h.current?.showPreviousMonth(),showNextMonth:()=>h.current?.showNextMonth(),handleFocus:()=>h.current?.setFocused(!0),handleBlur:()=>h.current?.setFocused(!1)});let g=E.current,ie=(0,I.useCallback)(f=>{let j=f.target.value,it=j.length>0&&!f.nativeEvent?.isComposing&&j[0]!==j[0].toUpperCase()?j[0].toUpperCase()+j.slice(1):j;h.current?.handleTextChange(it)},[]),Z=(0,I.useCallback)(f=>{h.current?.handleKeyDown(f.nativeEvent)},[]),Oe=h.current,p=Re??ua,be=N!==void 0?N:p.text,Ee=L!==void 0?L:p.completedParams,ve=p.actionableSuggestions,Le=ve[0],we=Oe?.listboxId??"",Me=p.activeDropdownIndex>=0&&Oe?`${we}-option-${p.activeDropdownIndex}`:void 0,oe=p.editingParam,Y=p.editingIdentified,$=oe?{type:oe.suggestionType,text:oe.suggestionPlaceholder,required:!0,options:oe.options}:Y?{type:Y.type,text:(0,He.identifiedParamLabel)(Y.type),required:!0,options:[]}:null,Ke=p.dropdownSuggestion??$??Le,at=$?[$]:ve,Ge=(0,He.dateSelectionFor)(p),qe=!Oe||p.dropdownLoading;return{completedParams:Ee,skippedParams:p.skippedParams,identifiedParams:p.identifiedParams,suggestionPills:ve,setActivePill:g.setActivePill,skipActivePill:g.skipActivePill,removeLastParam:g.removeLastParam,segments:p.segments,newParamId:p.newParamId,clearNewParamId:g.clearNewParamId,suggestions:p.suggestions,activeIndex:p.activeDropdownIndex,isReady:p.isReady,isLoading:qe,isFocused:p.isFocused,isDropdownOpen:p.isDropdownOpen,isActivePillSelected:p.isActivePillSelected,placeholderText:p.placeholderText,listboxId:we,error:p.error,products:p.products,customFields:p.customFields,selectProduct:g.selectProduct,handleTextChange:g.handleTextChange,handleKeyDown:g.handleKeyDown,setFocused:g.setFocused,editingParam:oe,editingIdentified:Y,editingAnchor:p.editingAnchor,caretOffset:p.caretOffset,startEditingParam:g.startEditingParam,exitEditMode:g.exitEditMode,handleCaretAfterInput:g.handleCaretAfterInput,handleCaretMove:g.handleCaretMove,replaceEditingRange:g.replaceEditingRange,inputProps:{value:be,placeholder:p.placeholderText||void 0,onChange:ie,onKeyDown:Z,onFocus:g.handleFocus,onBlur:g.handleBlur,role:"combobox","aria-expanded":p.isDropdownOpen,"aria-activedescendant":Me,"aria-autocomplete":"list","aria-controls":we},reset:g.reset,dropdownProps:{suggestions:Ke?[{...Ke,options:p.dropdownOptions}]:[],activeIndex:p.activeDropdownIndex,onSelect:g.selectOption,onHighlight:g.setActiveDropdownIndex,isOpen:p.isDropdownOpen,id:we,pills:at,activeSelected:p.isActivePillSelected,onPillClick:g.setActivePill,onSkip:g.skipActivePill,showSkipButton:(q??!0)&&!oe&&!Y,showOptionIcons:C??!0,showOptionImages:T??!0,showOptionCounts:k??!0,skipDisabled:p.inSelectionAnimation,isLoading:qe,skeletonExiting:p.skeletonExiting,isInputEmpty:be.trim().length===0,products:p.products,productImageFallback:A,onProductSelect:g.selectProduct,onProductFocusChange:g.setFocused,formatType:p.activeFormatType,dateView:p.dateView,selectedDateIso:Ge.selectedIso,selectedDateRange:Ge.selectedRange,dateRangeStart:Ge.rangeStart,onPreviousMonth:g.showPreviousMonth,onNextMonth:g.showNextMonth,optionsPosition:x??"below"}}}var Q=require("@magicx-eng/ai-autocomplete-vanilla"),P=require("react"),tt;function ma(){if(tt!==void 0)return tt;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),tt=e.contentEditable==="plaintext-only",tt}function Bt(e){let{segments:i,showChipIcons:a=!0,showChipImages:r=!0,newParamId:n,editingParam:t,editingIdentified:l,editingAnchor:d,caretOffset:w,placeholderText:x,isFocused:b,isDropdownOpen:u,listboxId:C,activeDescendantId:T,autoFocus:k,handleTextChange:q,handleKeyDown:H,handleCaretAfterInput:A,handleCaretMove:O,startEditingParam:F,replaceEditingRange:N,setFocused:L}=e,S=(0,P.useRef)(null),ee=(0,P.useRef)(!1),ke=(0,P.useRef)(""),ce=(0,P.useRef)(""),Ce=(0,P.useRef)(null),pe=(0,P.useRef)(0);Ce.current=w,(0,P.useEffect)(()=>{if(!k)return;let c=S.current;if(!c)return;document.activeElement===c?L(!0):c.focus();let m=c.ownerDocument??document,v=m.getSelection(),y=v&&v.rangeCount>0&&c.contains(v.anchorNode);if(v&&!y){let o=m.createRange();o.selectNodeContents(c),o.collapse(!0),v.removeAllRanges(),v.addRange(o)}},[k,L]),(0,P.useEffect)(()=>{let c=S.current;if(!c)return;let m=c.ownerDocument??document,v=()=>{let y=m.getSelection();if(!y||y.rangeCount===0||!y.anchorNode||!c.contains(y.anchorNode))return;let o=y.anchorNode,E=o.nodeType===Node.ELEMENT_NODE?o:o.parentElement,ie=(y.isCollapsed?E?.closest("strong[data-param-id]"):null)?.dataset.paramId??null,Z=t?.id??l?.id??null;if(ie&&ie!==Z){F(ie);return}performance.now()-pe.current<50||O((0,Q.getCursorOffset)(c))};return m.addEventListener("selectionchange",v),()=>m.removeEventListener("selectionchange",v)},[t,l,F,O]),(0,P.useLayoutEffect)(()=>{let c=S.current;c&&(0,Q.renderEditableContent)({input:c,segments:i,newParamId:n,editingParamId:t?.id??null,placeholderText:x??"",isFocused:b,showChipIcons:a,showChipImages:r})},[i,n,t,x,b,a,r]),(0,P.useLayoutEffect)(()=>{let c=ke.current,m=n??"";if(ke.current=m,!m||m===c)return;let v=S.current;if(!v)return;v.focus();let y=Ce.current??(0,Q.plainTextLength)(v);(0,Q.setCursorOffset)(v,y)},[n]),(0,P.useLayoutEffect)(()=>{let c=ce.current,m=t?.id??"";if(ce.current=m,!m||m===c||d==null)return;let v=S.current;v&&(0,Q.setCursorOffset)(v,d)},[t,d]);let h=(0,P.useCallback)(()=>{if(ee.current)return;let c=S.current;if(!c)return;let m=(0,Q.extractPlainText)(c),y=m.length>0&&m[0]!==m[0].toUpperCase()?m[0].toUpperCase()+m.slice(1):m;q(y)},[q]),Re=(0,P.useCallback)(()=>{pe.current=performance.now(),h();let c=S.current;c&&A((0,Q.getCursorOffset)(c))},[h,A]);(0,P.useEffect)(()=>{let c=S.current;if(!c)return;let m=v=>{let y=v,o=y.inputType;if(o==="insertParagraph"||o==="insertLineBreak"||o==="insertFromDrop"){v.preventDefault();return}if(o.startsWith("insert")||o.startsWith("delete")){let E=o.startsWith("delete")?"":y.data??"";N(E)&&v.preventDefault()}};return c.addEventListener("beforeinput",m),()=>c.removeEventListener("beforeinput",m)},[N]);let Pe=(0,P.useCallback)(()=>{ee.current=!0},[]),Se=(0,P.useCallback)(()=>{ee.current=!1,h()},[h]),he=(0,P.useCallback)(c=>{c.preventDefault();let m=S.current;if(!m)return;let v=(c.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!v)return;let y=m.ownerDocument??document,o=y.getSelection();if(!o||o.rangeCount===0)return;let E=o.getRangeAt(0);if(!m.contains(E.startContainer))return;E.deleteContents();let g=y.createTextNode(v);E.insertNode(g),E.setStartAfter(g),E.collapse(!0),o.removeAllRanges(),o.addRange(E),h()},[h]),Ie=(0,P.useCallback)(c=>H(c),[H]),ue=(0,P.useCallback)(()=>L(!0),[L]),te=(0,P.useCallback)(()=>L(!1),[L]),me=(0,P.useCallback)(()=>S.current?.focus(),[]),ae=(0,P.useCallback)(()=>S.current?.blur(),[]),ge=(0,P.useCallback)(()=>{let c=S.current;return c?(0,Q.extractPlainText)(c):""},[]),fe=ma()?"plaintext-only":"true";return{inputRef:S,editorProps:{ref:S,contentEditable:fe,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":C,"aria-expanded":u,"aria-activedescendant":T,spellCheck:!0,enterKeyHint:"send",onInput:Re,onKeyDown:Ie,onCompositionStart:Pe,onCompositionEnd:Se,onPaste:he,onFocus:ue,onBlur:te},getPlainText:ge,focus:me,blur:ae}}var J=require("react/jsx-runtime");function ga(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var Ht=(0,z.forwardRef)(function({onSubmit:i,onResult:a,onError:r,optionOverrides:n,maskCompletedText:t,className:l,apiConfig:d,additionalContext:w,columns:x,pillPlacement:b="dropdown",mode:u="auto",optionsPosition:C="below",animations:T=!0,dropdownTrigger:k,closeDropdownOnBlur:q,showNonTappableOptions:H,showOptionIcons:A=!0,showChipIcons:O=!0,showChipImages:F=!0,showOptionImages:N=!0,showOptionCounts:L=!0,showSkipButton:S,showProducts:ee,productsLayout:ke,productImageFallback:ce,autoFocus:Ce=!0,onFocus:pe,onBlur:h,value:Re,completedParams:Pe,onChange:Se,onParamsChange:he,products:Ie,onProductSelect:ue,submitButton:te},me){let ae=(0,z.useRef)(null),ge=(0,z.useRef)(null),fe=(0,z.useRef)(()=>{}),c=(0,z.useRef)(null),m=(0,z.useRef)(null);(0,z.useEffect)(()=>{let R=ae.current;if(R)return c.current?c.current.setMode(u):c.current=new Fe.ModeController(R,u),()=>{c.current?.destroy(),c.current=null}},[u]);let v=(0,z.useCallback)(R=>{let Te=m.current?.current;Te&&(Te.focus(),(0,Fe.setCursorOffset)(Te,R))},[]),{completedParams:y,skippedParams:o,identifiedParams:E,isReady:g,customFields:ie,suggestionPills:Z,setActivePill:Oe,skipActivePill:p,segments:be,newParamId:Ee,clearNewParamId:ve,placeholderText:Le,isFocused:we,isDropdownOpen:Me,isActivePillSelected:oe,isLoading:Y,activeIndex:$,listboxId:Ke,handleTextChange:at,handleKeyDown:Ge,setFocused:qe,editingParam:f,editingIdentified:j,editingAnchor:B,caretOffset:it,startEditingParam:Ft,handleCaretAfterInput:Kt,handleCaretMove:Gt,replaceEditingRange:Wt,dropdownProps:_t,reset:Ue}=et({onSubmit:R=>fe.current(R),onResult:a,onError:r,optionOverrides:n,maskCompletedText:t,apiConfig:d,additionalContext:w,columns:x,dropdownTrigger:k,optionsPosition:C,closeDropdownOnBlur:q,showNonTappableOptions:H,showOptionIcons:A,showOptionImages:N,showOptionCounts:L,showSkipButton:S,showProducts:ee,onFocus:pe,onBlur:h,value:Re,completedParams:Pe,onChange:Se,onParamsChange:he,products:Ie,onProductSelect:ue,source:"full-sdk",setCursor:v});(0,z.useEffect)(()=>{if(!Ee)return;let R=window.setTimeout(()=>ve(),650);return()=>window.clearTimeout(R)},[Ee,ve]);let qt=$>=0?`${Ke}-option-${$}`:void 0,{inputRef:ot,editorProps:Ut,focus:Qe,blur:ut,getPlainText:mt}=Bt({segments:be,newParamId:Ee,editingParam:f,editingIdentified:j,editingAnchor:B,caretOffset:it,placeholderText:Le,isFocused:we,showChipIcons:O,showChipImages:F,isDropdownOpen:Me,listboxId:Ke,activeDescendantId:qt,autoFocus:Ce,handleTextChange:at,handleKeyDown:Ge,handleCaretAfterInput:Kt,handleCaretMove:Gt,startEditingParam:Ft,replaceEditingRange:Wt,setFocused:qe});m.current=ot,(0,z.useLayoutEffect)(()=>{let R=ge.current,Te=ot.current;if(!R||!Te)return;let gt=()=>{let bt=R.firstElementChild;if(!bt)return;let Zt=bt.getBoundingClientRect(),$t=Te.getBoundingClientRect();Zt.top>=$t.bottom-2?R.setAttribute("data-aia-pill-wrapped",""):R.removeAttribute("data-aia-pill-wrapped")};gt();let ft=new ResizeObserver(gt);return ft.observe(Te),()=>ft.disconnect()},[be,Z.length,Y,ot]),(0,z.useImperativeHandle)(me,()=>({focus:Qe,blur:ut,reset:Ue,setMode:R=>c.current?.setMode(R),skipActivePill:p}),[Qe,ut,Ue,p]);let Ye=!!be.length||y.length>0,nt=(0,z.useCallback)(()=>{if(!Ye)return;let R=mt();i((0,Fe.buildSubmitResult)(R,y,o,{identifiedParams:E,isReady:g,customFields:ie})),Ue()},[Ye,y,o,E,g,ie,i,Ue,mt]);fe.current=nt;let Qt=(0,z.useCallback)(R=>{R.target?.closest("[data-aia-pill]")||Qe()},[Qe]),Yt=b==="inline",jt=b==="dropdown";return(0,J.jsxs)("div",{ref:ae,className:`magicx-aia ${De.container} ${l??""}`,"data-pill-placement":b,"data-options-position":C,"data-animations":T?"on":"off","data-mode":ga(u),children:[(0,J.jsx)(Xe,{..._t,showPills:jt,productsLayout:ke,productImageFallback:ce}),(0,J.jsxs)("div",{className:De.inputWrapper,"data-aia-input-wrapper":"",onClick:Qt,children:[(0,J.jsxs)("div",{className:De.editorArea,"data-aia-editor":"",children:[(0,J.jsx)("div",{...Ut,className:De.input,"data-aia-input":""}),Yt&&(Y||Z.length>0)&&(0,J.jsx)("span",{ref:ge,className:De.pillListContainer,"data-aia-pill-list-container":"",children:(0,J.jsx)(Ze,{pills:Z,activePillIndex:0,activeSelected:oe,onSelectPill:Oe,loading:Y})})]}),te===null?null:te===void 0?(0,J.jsx)(Mt,{disabled:!Ye,onClick:nt}):(0,J.jsx)("span",{"data-aia-submit":"","data-aia-submit-slot":"",className:De.submitSlot,onClick:R=>{Ye&&(R.stopPropagation(),nt())},children:te})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,DATE_RANGE_META_END,DATE_RANGE_META_START,DEFAULT_OPTION_COUNT_UNIT,PRODUCT_PATH_PREFIX,WEEKDAY_LABELS,buildSubmitResult,cellDay,cellIso,dateCellMarks,formatDate,formatDateRange,formatOptionCount,isoDate,monthLabel,optionCountLabel,optionHasImage,optionImageSrc,optionLabel,parseDate,parseLooseDate,parseLooseDateRange,productFromMatchedItem,productsFromCustomFields,sanitizeOptionIconSvg,selectedRangeFor,useAIAutocomplete,visibleDateRange,withSkippedParams});
|
|
2065
2187
|
//# sourceMappingURL=index.js.map
|