@magicx-eng/ai-autocomplete-react 0.24.1 → 0.25.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 +5 -0
- package/dist/index.d.mts +33 -3
- package/dist/index.d.ts +33 -3
- package/dist/index.js +139 -14
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +139 -14
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{buildSubmitResult as
|
|
1
|
+
import{buildSubmitResult as Zo,cellDay as Xo,cellIso as Jo,DATE_RANGE_META_END as en,DATE_RANGE_META_START as tn,DEFAULT_OPTION_COUNT_UNIT as an,dateCellMarks as on,formatDate as nn,formatDateRange as rn,formatOptionCount as sn,isoDate as ln,monthLabel as dn,optionCountLabel as cn,optionHasImage as pn,optionImageSrc as hn,optionLabel as un,PRODUCT_PATH_PREFIX as mn,parseDate as fn,parseLooseDate as gn,parseLooseDateRange as bn,productFromMatchedItem as vn,productsFromCustomFields as wn,sanitizeOptionIconSvg as xn,selectedRangeFor as yn,visibleDateRange as kn,WEEKDAY_LABELS as Cn,withSkippedParams as Pn}from"@magicx-eng/ai-autocomplete-vanilla";import{forwardRef as Ja,useCallback as at,useEffect as zt,useImperativeHandle as ei,useLayoutEffect as ti,useRef as De}from"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
|
|
@@ -150,6 +150,27 @@ import{buildSubmitResult as jo,cellDay as $o,cellIso as Vo,DATE_RANGE_META_END a
|
|
|
150
150
|
height: 100%;
|
|
151
151
|
}
|
|
152
152
|
|
|
153
|
+
/* The picked option's picture: a small rounded tile inline before the chip
|
|
154
|
+
text, in place of the icon. It is an empty inline span whose left padding
|
|
155
|
+
is the tile's width and whose background is the picture (set inline as
|
|
156
|
+
--aia-chip-image by the renderer) over a placeholder fill \u2014 not an <img>,
|
|
157
|
+
which as an atomic inline would let the line break between it and the
|
|
158
|
+
chip's text. The tile's height is the chip's own content height, so it
|
|
159
|
+
never grows the input's line. The fill shows until the picture paints and
|
|
160
|
+
stays if it never does; contentEditable is off on it (the renderer sets
|
|
161
|
+
that) so it adds no characters to the caret's plain text. */
|
|
162
|
+
:where(.aia-input-IW-P-) span[class~="magicx-aia-segment-image"] {
|
|
163
|
+
display: inline;
|
|
164
|
+
padding-left: var(--aia-chip-image-size, 1.25em);
|
|
165
|
+
margin-right: 5px;
|
|
166
|
+
border-radius: var(--aia-chip-image-radius, 4px);
|
|
167
|
+
background:
|
|
168
|
+
var(--aia-chip-image, none) center / cover no-repeat,
|
|
169
|
+
var(--aia-chip-image-bg, var(--aia-pill-bg, rgba(189, 189, 189, 0.25)));
|
|
170
|
+
pointer-events: none;
|
|
171
|
+
user-select: none;
|
|
172
|
+
}
|
|
173
|
+
|
|
153
174
|
/* Re-edit highlight \u2014 applied to the completed pill being re-edited (after a
|
|
154
175
|
tap). Reuses the exact hover fill so the highlight persists from tap until an
|
|
155
176
|
option is selected. Hides the native caret; cursor switches to text since the
|
|
@@ -240,7 +261,7 @@ import{buildSubmitResult as jo,cellDay as $o,cellIso as Vo,DATE_RANGE_META_END a
|
|
|
240
261
|
opacity: 0;
|
|
241
262
|
}
|
|
242
263
|
}
|
|
243
|
-
`,document.head.appendChild(e)}var
|
|
264
|
+
`,document.head.appendChild(e)}var ve={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"};import{attachScrollArrow as Ha,isCalendarFormat as Ba,SCROLL_ARROW_LABEL as Fa}from"@magicx-eng/ai-autocomplete-vanilla";import{useEffect as Ve,useRef as Be,useState as Ka}from"react";if(typeof document<"u"&&!document.getElementById("ac-style-0ae03977")){let e=document.createElement("style");e.id="ac-style-0ae03977",e.textContent=`/*
|
|
244
265
|
* Built-in appearance defaults \u2014 zero specificity via :where().
|
|
245
266
|
* Consumer CSS always wins without !important.
|
|
246
267
|
*
|
|
@@ -995,7 +1016,7 @@ import{buildSubmitResult as jo,cellDay as $o,cellIso as Vo,DATE_RANGE_META_END a
|
|
|
995
1016
|
opacity: 0.25;
|
|
996
1017
|
}
|
|
997
1018
|
}
|
|
998
|
-
`,document.head.appendChild(e)}var
|
|
1019
|
+
`,document.head.appendChild(e)}var le={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"};import{cellDay as Yt,cellIso as ke,dateCellMarks as $t,isoDate as Vt,monthLabel as Zt,visibleDateRange as Xt,WEEKDAY_LABELS as Jt}from"@magicx-eng/ai-autocomplete-vanilla";import{useState as ea}from"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) ---
|
|
999
1020
|
|
|
1000
1021
|
One of three hand-maintained copies (vanilla styles.css, this file, Angular's
|
|
1001
1022
|
date-grid.component.css). Only the class-naming layer differs \u2014 the
|
|
@@ -1158,7 +1179,7 @@ import{buildSubmitResult as jo,cellDay as $o,cellIso as Vo,DATE_RANGE_META_END a
|
|
|
1158
1179
|
opacity: 0.8;
|
|
1159
1180
|
background: rgba(var(--aia-streak-rgb, 255, 255, 255), 0.06);
|
|
1160
1181
|
}
|
|
1161
|
-
`,document.head.appendChild(e)}var
|
|
1182
|
+
`,document.head.appendChild(e)}var T={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"};import{jsx as Y,jsxs as dt}from"react/jsx-runtime";var ta=["sunday","monday","tuesday","wednesday","thursday","friday","saturday"];function ct({options:e,activeIndex:n,listboxId:i,view:r,selection:s,onSelect:a,onHighlight:o,onPreviousMonth:u,onNextMonth:v}){let f=Vt(new Date),w=Xt({pendingStart:s.rangeStart,highlightedIso:ke(e[n]),selected:s.selectedRange});return dt("div",{className:T.datepicker,"data-aia-datepicker":"",children:[dt("div",{className:T.header,children:[Y("button",{type:"button",tabIndex:-1,className:T.nav,"data-aia-date-prev":"","aria-label":"Previous month",onMouseDown:p=>p.preventDefault(),onClick:u,children:"\u2039"}),Y("span",{className:T.month,"data-aia-date-month":"","aria-live":"polite",children:Zt(r)}),Y("button",{type:"button",tabIndex:-1,className:T.nav,"data-aia-date-next":"","aria-label":"Next month",onMouseDown:p=>p.preventDefault(),onClick:v,children:"\u203A"})]}),Y("div",{className:T.weekdays,"aria-hidden":"true",children:Jt.map((p,k)=>Y("span",{className:T.weekday,children:p},ta[k]))}),Y("div",{className:T.grid,"data-aia-date-grid":"",children:e.map((p,k)=>Y(aa,{option:p,id:`${i}-option-${k}`,index:k,isHighlighted:k===n&&p.is_tappable,isToday:ke(p)===f,isPast:ke(p)!=null&&ke(p)<f,marks:$t(ke(p),{selectedIso:s.selectedIso,range:w}),onSelect:a,onHighlight:o},ke(p)??`pad-${k}`))})]})}function aa({option:e,id:n,index:i,isHighlighted:r,isToday:s,isPast:a,marks:o,onSelect:u,onHighlight:v}){let[f,w]=ea(!1),p=Yt(e);if(p==null)return Y("div",{id:n,role:"option","data-aia-option":"","data-aia-date-cell":"","aria-hidden":"true","aria-selected":!1,tabIndex:-1,className:`${T.cell} ${T.blank}`});let k=()=>{w(!0),u(e),setTimeout(()=>w(!1),170)},P=[T.cell,T.day,a?T.past:"",r?T.highlighted:"",s?T.today:"",o.inRange?T.inRange:"",o.selected?T.selected:"",f?T.pressed:""].filter(Boolean).join(" ");return Y("div",{id:n,role:"option","data-aia-option":"","data-aia-date-cell":"","aria-selected":r,"aria-label":e.text,tabIndex:0,className:P,onClick:k,onKeyDown:y=>{(y.key==="Enter"||y.key===" ")&&(y.preventDefault(),k())},onMouseEnter:()=>v(i),children:Y("span",{className:T.number,children:p})})}import{ATTRIBUTION_URL as ia,buildAttributionUrl as oa,getFooterHint as na}from"@magicx-eng/ai-autocomplete-vanilla";import{useEffect as ra,useState as sa}from"react";if(typeof document<"u"&&!document.getElementById("ac-style-5259a217")){let e=document.createElement("style");e.id="ac-style-5259a217",e.textContent=`.aia-cluster {
|
|
1162
1183
|
display: flex;
|
|
1163
1184
|
flex-wrap: wrap;
|
|
1164
1185
|
gap: var(--aia-cluster-gap, 0.5rem);
|
|
@@ -1198,7 +1219,7 @@ import{buildSubmitResult as jo,cellDay as $o,cellIso as Vo,DATE_RANGE_META_END a
|
|
|
1198
1219
|
.aia-cluster[data-justify="around"] {
|
|
1199
1220
|
justify-content: space-around;
|
|
1200
1221
|
}
|
|
1201
|
-
`,document.head.appendChild(e)}import{jsx as
|
|
1222
|
+
`,document.head.appendChild(e)}import{jsx as pt}from"react/jsx-runtime";function Te({gap:e,align:n="center",justify:i="start",noWrap:r=!1,inline:s=!1,className:a,children:o,...u}){let v=e?{"--aia-cluster-gap":e}:void 0,f={className:a?`aia-cluster ${a}`:"aia-cluster","data-align":n,"data-justify":i,"data-nowrap":r||void 0,"data-inline":s||void 0,style:v,...u};return s?pt("span",{...f,children:o}):pt("div",{...f,children:o})}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
|
|
1202
1223
|
dropdown's rounded edges. The top inset (--aia-footer-gap) adds breathing
|
|
1203
1224
|
room above the hint/branding row so the footer doesn't butt against the last
|
|
1204
1225
|
option row \u2014 additive to the dropdown's 8px section gap. */
|
|
@@ -1332,7 +1353,7 @@ import{buildSubmitResult as jo,cellDay as $o,cellIso as Vo,DATE_RANGE_META_END a
|
|
|
1332
1353
|
justify-content: flex-end;
|
|
1333
1354
|
}
|
|
1334
1355
|
}
|
|
1335
|
-
`,document.head.appendChild(e)}var
|
|
1356
|
+
`,document.head.appendChild(e)}var de={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"};import{jsx as Ae,jsxs as qe}from"react/jsx-runtime";function ht({isOptionHighlighted:e=!1,isInputEmpty:n=!1}){let{key:i,hint:r}=na(e,n),[s,a]=sa(ia);return ra(()=>{a(oa())},[]),Ae("footer",{className:de.footer,"data-aia-footer":"",children:qe(Te,{justify:"between",noWrap:!0,className:de.row,children:[qe(Te,{gap:"5px",className:de.hintGroup,children:[Ae("kbd",{className:de.key,children:i}),Ae("span",{className:de.hint,children:r})]}),qe("a",{className:de.brandLink,href:s,target:"_blank",rel:"noopener noreferrer",children:[Ae("span",{className:de.brand,children:"AI"}),Ae("span",{className:de.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,
|
|
1336
1357
|
no outline. ~28px via 6px padding + 14px text + the 1px border (border-box).
|
|
1337
1358
|
The border is kept as a 1px transparent line so the box stays the same size
|
|
1338
1359
|
as it was when the outline was dashed. */
|
|
@@ -1389,7 +1410,7 @@ import{buildSubmitResult as jo,cellDay as $o,cellIso as Vo,DATE_RANGE_META_END a
|
|
|
1389
1410
|
opacity: 0;
|
|
1390
1411
|
}
|
|
1391
1412
|
}
|
|
1392
|
-
`,document.head.appendChild(e)}var
|
|
1413
|
+
`,document.head.appendChild(e)}var ge={pill:"aia-pill-6Ga7S",fadeIn:"aia-fadeIn-Ux4eQ",rounded:"aia-rounded-y7xA9",skeleton:"aia-skeleton-57P0T",skeletonPulse:"aia-skeletonPulse-xGcUy"};import{jsx as la}from"react/jsx-runtime";var Ue={selected:1,first:.7,next:.4,last:.2};function ut({label:e,state:n,rounded:i,loading:r,onClick:s}){let a=[ge.pill,i?ge.rounded:"",r?ge.skeleton:""].filter(Boolean).join(" ");return la("button",{type:"button","data-aia-pill":"","data-aia-loading":r?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:a,style:{opacity:Ue[n]},onMouseDown:o=>o.preventDefault(),onClick:r?void 0:s,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 {
|
|
1393
1414
|
position: relative;
|
|
1394
1415
|
z-index: 1;
|
|
1395
1416
|
pointer-events: auto;
|
|
@@ -1399,7 +1420,7 @@ import{buildSubmitResult as jo,cellDay as $o,cellIso as Vo,DATE_RANGE_META_END a
|
|
|
1399
1420
|
align-items: center;
|
|
1400
1421
|
vertical-align: middle;
|
|
1401
1422
|
}
|
|
1402
|
-
`,document.head.appendChild(e)}var
|
|
1423
|
+
`,document.head.appendChild(e)}var je={list:"aia-list-qvLqO"};import{jsx as Ne}from"react/jsx-runtime";var da=[125,69];function mt(e){return e===0?"first":e===1?"next":"last"}function He({pills:e,activePillIndex:n,onSelectPill:i,activeSelected:r,rounded:s,loading:a}){return a&&e.length===0?Ne("span",{className:je.list,"data-aia-pill-list-loading":"",children:da.map((o,u)=>Ne("span",{"data-aia-pill-skeleton":"",className:`${ge.pill} ${s?ge.rounded:""} ${ge.skeleton}`,style:{width:o,opacity:Ue[mt(u)]}},`skel-${o}`))}):Ne("span",{className:je.list,"data-aia-pill-list-loading":a?"":void 0,children:e.map((o,u)=>{let v=!!r&&u===n;return Ne(ut,{label:o.text,state:v?"selected":mt(u),selected:v,rounded:s,loading:a,onClick:()=>i(u)},`${o.type}-${o.text}`)})})}import{attachProductRowWheel as ca}from"@magicx-eng/ai-autocomplete-vanilla";import{useEffect as pa,useRef as ha}from"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
|
|
1403
1424
|
(packages/vanilla/src/styles.css). Same tokens, same defaults, so a consumer
|
|
1404
1425
|
theming one package sees the same result in the other.
|
|
1405
1426
|
|
|
@@ -1617,7 +1638,7 @@ import{buildSubmitResult as jo,cellDay as $o,cellIso as Vo,DATE_RANGE_META_END a
|
|
|
1617
1638
|
.aia-section-Hugfg[data-aia-products-layout="list"] .aia-body-ly032 {
|
|
1618
1639
|
flex: 1 1 auto;
|
|
1619
1640
|
}
|
|
1620
|
-
`,document.head.appendChild(e)}var
|
|
1641
|
+
`,document.head.appendChild(e)}var j={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"};import{jsx as be,jsxs as Qe}from"react/jsx-runtime";function ft({products:e,listboxId:n,onSelect:i,onFocusChange:r,focusable:s=!0,layout:a="row"}){let o=e.length>0,u=ha(null);if(pa(()=>{let f=u.current;if(!(!o||!f))return ca(f)},[o]),!o)return null;let v=`${n}-products-label`;return Qe("section",{className:j.section,"data-aia-products":"","data-aia-products-layout":a,role:"group","aria-labelledby":v,children:[be("div",{className:j.label,id:v,"data-aia-products-label":"",children:"Products"}),be("div",{ref:u,className:j.row,"data-aia-products-row":"",children:e.map((f,w)=>be(ua,{product:f,id:`${n}-product-${w}`,onSelect:i,onFocusChange:r,focusable:s},f.id))})]})}function ua({product:e,id:n,onSelect:i,onFocusChange:r,focusable:s}){let a=o=>{o.metaKey||o.ctrlKey||o.shiftKey||o.altKey||o.button!==0||(o.preventDefault(),i(e))};return Qe("a",{id:n,className:j.card,"data-aia-product":"",role:"option","aria-selected":!1,href:e.url,tabIndex:s?0:-1,onClick:a,onKeyDown:o=>{o.key!=="Enter"&&o.key!==" "||(o.preventDefault(),i(e))},onFocus:()=>r?.(!0),onBlur:o=>{o.relatedTarget?.closest("[data-aia-dropdown]")||r?.(!1)},children:[be("span",{className:j.media,"data-aia-product-placeholder":e.imageUrl?void 0:"",children:e.imageUrl?be("img",{className:j.image,src:e.imageUrl,alt:"",loading:"lazy",decoding:"async"}):null}),Qe("span",{className:j.body,children:[e.vendor?be("span",{className:j.vendor,children:e.vendor}):null,be("span",{className:j.title,children:e.title}),e.price?be("span",{className:j.price,children:e.price}):null]})]})}import{isOptionsGridMobileViewport as Ea,measureOptionsGrid as Ta,needsOptionsGridMeasurement as Aa,OPTIONS_GRID_MOBILE_QUERY as Ra,optionEnterDelayMs as Da,planOptionsGrid as vt}from"@magicx-eng/ai-autocomplete-vanilla";import{useEffect as La,useLayoutEffect as Oa,useRef as Ma,useState as xt}from"react";import{optionsGridTemplateColumns as ma}from"@magicx-eng/ai-autocomplete-vanilla";import{useLayoutEffect as fa,useRef as ga}from"react";if(typeof document<"u"&&!document.getElementById("ac-style-948e58da")){let e=document.createElement("style");e.id="ac-style-948e58da",e.textContent=`.aia-grid {
|
|
1621
1642
|
display: grid;
|
|
1622
1643
|
grid-template-columns: repeat(
|
|
1623
1644
|
auto-fit,
|
|
@@ -1650,7 +1671,7 @@ import{buildSubmitResult as jo,cellDay as $o,cellIso as Vo,DATE_RANGE_META_END a
|
|
|
1650
1671
|
background: var(--aia-scrollbar-thumb, rgba(0, 0, 0, 0.3));
|
|
1651
1672
|
border-radius: 3px;
|
|
1652
1673
|
}
|
|
1653
|
-
`,document.head.appendChild(e)}import{jsx as
|
|
1674
|
+
`,document.head.appendChild(e)}import{jsx as ba}from"react/jsx-runtime";function gt({min:e="16rem",max:n,gap:i,scroll:r=!1,maxHeight:s,scrollResetKey:a,cols:o,template:u,innerRef:v,className:f,children:w,...p}){let k=ga(null);fa(()=>{if(a===void 0)return;let y=k.current;y&&(y.scrollTop=0)},[a]);let P={"--aia-grid-min":e};return n&&(P["--aia-grid-max"]=n),i&&(P["--aia-grid-gap"]=i),s&&(P["--aia-grid-max-height"]=s),o&&(P.gridTemplateColumns=ma(o)),u&&(P.gridTemplateColumns=u),ba("div",{ref:y=>{k.current=y,v?.(y)},className:f?`aia-grid ${f}`:"aia-grid","data-scroll":r||void 0,style:P,...p,children:w})}import{formatOptionCount as va,OPTION_ENTER_DELAY_VAR as wa,optionImageSrc as xa,optionLabel as ya,sanitizeOptionIconSvg as ka}from"@magicx-eng/ai-autocomplete-vanilla";import{useEffect as Ca,useMemo as Pa,useRef as Sa,useState as Ye}from"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 {
|
|
1654
1675
|
position: relative;
|
|
1655
1676
|
/* Clip, not visible: the entrance rise below runs on the inner content,
|
|
1656
1677
|
and a transformed box extends its scroll container's scrollable area.
|
|
@@ -1841,11 +1862,115 @@ import{buildSubmitResult as jo,cellDay as $o,cellIso as Vo,DATE_RANGE_META_END a
|
|
|
1841
1862
|
first line's text rather than under the icon. \`.content\` is a flex item
|
|
1842
1863
|
(blockified), so text-indent applies to it directly. Skeleton rows keep
|
|
1843
1864
|
it too: their icon is hidden but still occupies its column. */
|
|
1844
|
-
.aia-content-T-Qba:has(.aia-icon-Qw938) {
|
|
1865
|
+
.aia-content-T-Qba:not(:has(.aia-count-IpYbQ)):has(.aia-icon-Qw938) {
|
|
1845
1866
|
padding-left: calc(1em + 8px);
|
|
1846
1867
|
text-indent: calc(-1em - 8px);
|
|
1847
1868
|
}
|
|
1848
1869
|
|
|
1870
|
+
/* --- Option pictures and counts ---
|
|
1871
|
+
A row that carries a thumbnail (\`image_url\`) or a count (\`item_count\`) lays
|
|
1872
|
+
its content out as a flex row instead of inline flow: the text becomes its
|
|
1873
|
+
own box, so wrapped lines start under the first line without the hanging
|
|
1874
|
+
indent, and the count can sit at the trailing edge. It also fills the row \u2014
|
|
1875
|
+
the content is a flex item of the row that would otherwise shrink to its
|
|
1876
|
+
text, leaving the count's auto margin nothing to push against. The inline
|
|
1877
|
+
flow is kept for every other row, so nothing existing moves. */
|
|
1878
|
+
.aia-content-T-Qba:has(.aia-image-YZAbO),
|
|
1879
|
+
.aia-content-T-Qba:has(.aia-count-IpYbQ) {
|
|
1880
|
+
display: flex;
|
|
1881
|
+
flex: 1 1 auto;
|
|
1882
|
+
align-items: flex-start;
|
|
1883
|
+
min-width: 0;
|
|
1884
|
+
}
|
|
1885
|
+
|
|
1886
|
+
.aia-content-T-Qba:has(.aia-image-YZAbO) .aia-text-yqoh9,
|
|
1887
|
+
.aia-content-T-Qba:has(.aia-count-IpYbQ) .aia-text-yqoh9 {
|
|
1888
|
+
flex: 1 1 auto;
|
|
1889
|
+
min-width: 0;
|
|
1890
|
+
}
|
|
1891
|
+
|
|
1892
|
+
/* The picture: a square tile, centred on the text beside it (a one-line
|
|
1893
|
+
option reads as the reference row; a wrapped one keeps the tile on its
|
|
1894
|
+
vertical middle). Sized and rounded by token so a consumer can shrink it
|
|
1895
|
+
or square it off; the placeholder fill shows through until the picture
|
|
1896
|
+
paints and stays if it never does. */
|
|
1897
|
+
.aia-content-T-Qba:has(.aia-image-YZAbO) {
|
|
1898
|
+
align-items: center;
|
|
1899
|
+
gap: var(--aia-option-image-gap, 12px);
|
|
1900
|
+
}
|
|
1901
|
+
|
|
1902
|
+
.aia-image-YZAbO {
|
|
1903
|
+
flex: 0 0 auto;
|
|
1904
|
+
display: block;
|
|
1905
|
+
width: var(--aia-option-image-size, 40px);
|
|
1906
|
+
height: var(--aia-option-image-size, 40px);
|
|
1907
|
+
border-radius: var(--aia-option-image-radius, 12px);
|
|
1908
|
+
overflow: hidden;
|
|
1909
|
+
background: var(--aia-option-image-bg, var(--aia-pill-bg, rgba(189, 189, 189, 0.25)));
|
|
1910
|
+
}
|
|
1911
|
+
|
|
1912
|
+
.aia-image-YZAbO img {
|
|
1913
|
+
display: block;
|
|
1914
|
+
width: 100%;
|
|
1915
|
+
height: 100%;
|
|
1916
|
+
object-fit: cover;
|
|
1917
|
+
}
|
|
1918
|
+
|
|
1919
|
+
/* A picture that failed to load hides itself with the \`hidden\` attribute.
|
|
1920
|
+
The tile's \`display: block\` above would win over the browser's own
|
|
1921
|
+
\`[hidden] { display: none }\` (an author rule beats a user-agent rule at
|
|
1922
|
+
any specificity), so the attribute is honoured here explicitly. */
|
|
1923
|
+
.aia-image-YZAbO img[hidden] {
|
|
1924
|
+
display: none;
|
|
1925
|
+
}
|
|
1926
|
+
|
|
1927
|
+
/* The count: a muted, tabular label at the trailing edge, on the first
|
|
1928
|
+
line's baseline. Never wraps \u2014 a long option wraps its text instead. */
|
|
1929
|
+
.aia-count-IpYbQ {
|
|
1930
|
+
flex: 0 0 auto;
|
|
1931
|
+
margin-left: auto;
|
|
1932
|
+
padding-left: 12px;
|
|
1933
|
+
font-size: var(--aia-option-count-font-size, 12px);
|
|
1934
|
+
font-weight: 400;
|
|
1935
|
+
line-height: 21px; /* = the option's line-height */
|
|
1936
|
+
font-variant-numeric: tabular-nums;
|
|
1937
|
+
white-space: nowrap;
|
|
1938
|
+
color: var(--aia-option-count-color, inherit);
|
|
1939
|
+
opacity: var(--aia-option-count-opacity, 0.6);
|
|
1940
|
+
}
|
|
1941
|
+
|
|
1942
|
+
/* The unit word after the number is a token, so a consumer names what is
|
|
1943
|
+
being counted ("sneakers", "towels") or blanks it (an empty string) without
|
|
1944
|
+
a render option. A count of one reads the singular token, which falls back
|
|
1945
|
+
to the plural one, so a consumer who sets only \`--aia-option-count-unit\`
|
|
1946
|
+
gets that word for every count. Generated content joins the row's
|
|
1947
|
+
accessible name after the number, the way the word did as text. */
|
|
1948
|
+
.aia-count-IpYbQ::after {
|
|
1949
|
+
content: " " var(--aia-option-count-unit, "items");
|
|
1950
|
+
}
|
|
1951
|
+
|
|
1952
|
+
.aia-item-d4vpD[data-aia-item-count="1"] .aia-count-IpYbQ::after {
|
|
1953
|
+
content: " " var(--aia-option-count-unit-one, var(--aia-option-count-unit, "item"));
|
|
1954
|
+
}
|
|
1955
|
+
|
|
1956
|
+
/* Skeleton rows keep the tile (its placeholder fill pulses with the row)
|
|
1957
|
+
but not the picture, and drop the count like the tag. */
|
|
1958
|
+
.aia-item-d4vpD[data-aia-loading] .aia-image-YZAbO img {
|
|
1959
|
+
visibility: hidden;
|
|
1960
|
+
}
|
|
1961
|
+
|
|
1962
|
+
.aia-item-d4vpD[data-aia-loading] .aia-count-IpYbQ {
|
|
1963
|
+
display: none;
|
|
1964
|
+
}
|
|
1965
|
+
|
|
1966
|
+
/* A grid of picture rows is taller per row: the visible-rows cap
|
|
1967
|
+
(\`--aia-grid-max-height\`, computed from \`--aia-option-row-height\` by
|
|
1968
|
+
planOptionsGrid) follows the tile's height plus the row's padding, so the
|
|
1969
|
+
same number of rows shows before the list scrolls. */
|
|
1970
|
+
[data-aia-group]:has(.aia-image-YZAbO) {
|
|
1971
|
+
--aia-option-row-height: calc(var(--aia-option-image-size, 40px) + 16px);
|
|
1972
|
+
}
|
|
1973
|
+
|
|
1849
1974
|
@keyframes aia-skeletonPulse-plvdD {
|
|
1850
1975
|
0%,
|
|
1851
1976
|
100% {
|
|
@@ -1855,7 +1980,7 @@ import{buildSubmitResult as jo,cellDay as $o,cellIso as Vo,DATE_RANGE_META_END a
|
|
|
1855
1980
|
filter: brightness(0.55);
|
|
1856
1981
|
}
|
|
1857
1982
|
}
|
|
1858
|
-
`,document.head.appendChild(e)}var
|
|
1983
|
+
`,document.head.appendChild(e)}var H={item:"aia-item-d4vpD",fadeIn:"aia-fadeIn-I8u35",content:"aia-content-T-Qba",riseIn:"aia-riseIn-etXZT",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",icon:"aia-icon-Qw938",count:"aia-count-IpYbQ",image:"aia-image-YZAbO"};import{jsx as we,jsxs as Ia}from"react/jsx-runtime";function bt({option:e,isHighlighted:n,onSelect:i,onHighlight:r,id:s,loading:a,showIcon:o=!0,showImage:u=!0,showCount:v=!0,scrollHint:f,enterDelayMs:w=0}){let[p]=Ye(w),[k,P]=Ye(!1),y=u?xa(e.image_url):null,[M,E]=Ye(null),S=Pa(()=>!y&&o&&e.icon_svg?ka(e.icon_svg):null,[y,o,e.icon_svg]),D=v?va(e.item_count):null,A=Sa(void 0);Ca(()=>()=>clearTimeout(A.current),[]);let O=()=>{a||!e.is_tappable||k||(P(!0),i(e),clearTimeout(A.current),A.current=setTimeout(()=>P(!1),170))},z=[H.item,n&&!a?H.highlighted:"",e.is_tappable?H.tappable:H.nonTappable,k?H.pressed:"",f?H.scrollHint:""].filter(Boolean).join(" ");return we("div",{id:s,role:"option","data-aia-option":"","data-aia-loading":a?"":void 0,"data-aia-icon":S&&e.icon?e.icon:void 0,"data-aia-image":y?"":void 0,"data-aia-item-count":D!==null?e.item_count:void 0,"aria-selected":n,className:z,style:{[wa]:`${p}ms`},tabIndex:a||!e.is_tappable?-1:0,onClick:O,onKeyDown:C=>{!a&&e.is_tappable&&(C.key==="Enter"||C.key===" ")&&(C.preventDefault(),O())},onMouseEnter:!a&&e.is_tappable?r:void 0,children:Ia("span",{className:H.content,children:[y&&we("span",{className:`${H.image} magicx-aia-option-image`,"aria-hidden":"true",children:we("img",{src:y,alt:"",loading:"lazy",decoding:"async",referrerPolicy:"no-referrer",draggable:!1,hidden:M===y,onError:()=>E(y)})}),S&&we("span",{className:`${H.icon} magicx-aia-option-icon`,"aria-hidden":"true",dangerouslySetInnerHTML:{__html:S}}),we("span",{className:H.text,children:ya(e)}),e.tag&&we("span",{className:H.tag,children:e.tag}),D!==null&&we("span",{className:`${H.count} magicx-aia-option-count`,children:D})]})})}import{jsx as wt}from"react/jsx-runtime";function za(){let[e,n]=xt(Ea);return La(()=>{if(typeof window>"u"||!window.matchMedia)return;let i=window.matchMedia(Ra),r=()=>n(i.matches);return r(),i.addEventListener("change",r),()=>i.removeEventListener("change",r)},[]),e}function yt({options:e,activeIndex:n,onSelect:i,onHighlight:r,listboxId:s,loading:a,groupKey:o="",optionsPosition:u="below",showIcons:v=!0,showImages:f=!0,showCounts:w=!0}){let p=za(),k=Ma(null),[P,y]=xt(null);Oa(()=>{let E=k.current,D=E&&!a&&Aa(e.length,p)?Ta(E):null;y(D?vt(e.length,p,D.rowWidths,D.gridWidth):null)},[e,p,a]);let M=P??vt(e.length,p,null,null);return wt(gt,{min:"250px",max:"1fr",gap:"0",scroll:!0,scrollResetKey:o,template:M.template,maxHeight:M.maxHeight,innerRef:E=>{k.current=E},"data-aia-group":o,children:e.map((E,S)=>wt(bt,{option:E,isHighlighted:S===n,onSelect:i,onHighlight:()=>r(S),id:`${s}-option-${S}`,loading:a,showIcon:v,showImage:f,showCount:w,scrollHint:!a&&M.scrollHintIndices.includes(S),enterDelayMs:a?0:Da(S,M.cols,e.length,u)},`${o}\0${E.text}`))})}if(typeof document<"u"&&!document.getElementById("ac-style-8414cd5f")){let e=document.createElement("style");e.id="ac-style-8414cd5f",e.textContent=`.aia-stack {
|
|
1859
1984
|
display: flex;
|
|
1860
1985
|
flex-direction: column;
|
|
1861
1986
|
gap: var(--aia-stack-space, 0.5rem);
|
|
@@ -1870,7 +1995,7 @@ import{buildSubmitResult as jo,cellDay as $o,cellIso as Vo,DATE_RANGE_META_END a
|
|
|
1870
1995
|
align-items: end;
|
|
1871
1996
|
}
|
|
1872
1997
|
/* data-align="stretch" is the flex default \u2014 no rule needed. */
|
|
1873
|
-
`,document.head.appendChild(e)}import{jsx as
|
|
1998
|
+
`,document.head.appendChild(e)}import{jsx as Na}from"react/jsx-runtime";function kt({space:e,align:n="stretch",className:i,children:r,...s}){let a=e?{"--aia-stack-space":e}:void 0;return Na("div",{className:i?`aia-stack ${i}`:"aia-stack","data-align":n,style:a,...s,children:r})}import{jsx as W,jsxs as $e}from"react/jsx-runtime";var Wa=[159,119,164],Ga=()=>{},Ct=()=>{};function _a(e){let n=()=>typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches,[i,r]=Ka(n);if(Ve(()=>{if(e!=="auto"||typeof window>"u"||typeof window.matchMedia!="function")return;let s=window.matchMedia("(prefers-color-scheme: dark)"),a=()=>r(s.matches);return s.addEventListener("change",a),()=>s.removeEventListener("change",a)},[e]),e!==void 0)return e==="auto"?i?"dark":"light":e}function qa(e,n){let i=Be(null);Ve(()=>{let r=e.current,s=n.current;if(!r||!s)return;let a=r.querySelector(".aia-grid[data-scroll]");if(i.current&&i.current.grid!==a&&(i.current.controller.destroy(),i.current=null),a&&!i.current){i.current={grid:a,controller:Ha({dropdown:r,grid:a,button:s})};return}i.current?.controller.update()}),Ve(()=>()=>{i.current?.controller.destroy(),i.current=null},[])}function Ze({suggestions:e,activeIndex:n,onSelect:i,onHighlight:r,isOpen:s,id:a,className:o,pills:u,onPillClick:v,showPills:f=!0,onSkip:w,showSkipButton:p=!0,showOptionIcons:k=!0,showOptionImages:P=!0,showOptionCounts:y=!0,skipDisabled:M=!1,activeSelected:E=!1,isLoading:S=!1,isInputEmpty:D=!1,products:A,onProductSelect:O,onProductFocusChange:z,productsLayout:C="row",formatType:$="options",dateView:V=null,selectedDateIso:ce=null,selectedDateRange:Z=null,dateRangeStart:h=null,onPreviousMonth:B,onNextMonth:pe,optionsPosition:X="below",mode:he}){let J=_a(he),ue=J!==void 0,_=Be(null),ee=Be(null);qa(_,ee);let te=e[0]?.options??[],ae=!!(u&&u.length>0&&v),ie=!!(A&&A.length>0),L=s&&(te.length>0||f&&ae||S||ie),l={suggestions:e,activeIndex:n,pills:u,showPills:f,showSkipButton:p,showOptionIcons:k,showOptionImages:P,showOptionCounts:y,skipDisabled:M,activeSelected:E,isLoading:S,isInputEmpty:D,products:A,formatType:$,dateView:V,selectedDateIso:ce,selectedDateRange:Z,dateRangeStart:h},g=Be(l);L&&(g.current=l);let t=L?l:g.current,x=t.suggestions[0],b=x?.options??[],c=t.activeIndex>=0&&!!b[t.activeIndex]?.is_tappable,F=!!(t.pills&&t.pills.length>0&&v),q=t.showPills&&F,oe=t.showPills&&!F&&t.isLoading,d=q||oe,ne=F&&t.showSkipButton&&!t.isInputEmpty&&!!w,me=t.pills?.[0]?.text,re=Ba(t.formatType)&&t.dateView!=null,xe=b.length>0&&!re,se=b.length>0&&re&&!t.isLoading,Se=t.isLoading&&!xe&&!se,U=t.products??[];return $e("div",{ref:_,id:a,role:"listbox","data-aia-dropdown":"","data-options-position":X,"data-mode":J,"data-aia-loading":t.isLoading?"":void 0,"data-aia-has-products":U.length>0?"":void 0,className:`${ue?"magicx-aia ":""}${le.dropdown} ${L?le.visible:""} ${o??""}`,onMouseDown:N=>N.preventDefault(),children:[$e(kt,{space:"8px",children:[(d||ne)&&$e(Te,{noWrap:!0,className:le.pillBar,"data-aia-pillbar":"",children:[d&&W("span",{className:le.pillScroll,"data-aia-pill-scroll":"",children:W(He,{pills:t.pills??[],activePillIndex:0,activeSelected:t.activeSelected,onSelectPill:v??(()=>{}),rounded:!0,loading:t.isLoading})}),ne&&W("button",{type:"button",tabIndex:-1,className:le.skip,"data-aia-skip":"",disabled:t.isLoading||t.skipDisabled,"aria-label":me?`Skip ${me}`:"Skip",onClick:w,children:"skip"})]}),xe&&W(yt,{options:b,activeIndex:t.activeIndex,onSelect:i,onHighlight:r,listboxId:a,loading:t.isLoading,groupKey:x?`${x.type} ${x.text}`:"",optionsPosition:X,showIcons:t.showOptionIcons,showImages:t.showOptionImages,showCounts:t.showOptionCounts}),se&&t.dateView&&W(ct,{options:b,activeIndex:t.activeIndex,listboxId:a,view:t.dateView,selection:{selectedIso:t.selectedDateIso??null,selectedRange:t.selectedDateRange??null,rangeStart:t.dateRangeStart??null},onSelect:i,onHighlight:r,onPreviousMonth:B??Ct,onNextMonth:pe??Ct}),Se&&W("div",{className:le.skeletonBars,"data-aia-skeleton-bars":"",children:Wa.map(N=>W("span",{className:le.skeletonBar,style:{width:N}},`bar-${N}`))}),W(ft,{products:U,listboxId:a,onSelect:O??Ga,onFocusChange:z,focusable:L,layout:C}),W(ht,{isOptionHighlighted:c,isInputEmpty:t.isInputEmpty})]}),W("button",{ref:ee,type:"button",tabIndex:-1,className:le.scrollArrow,"data-aia-scroll-arrow":"","aria-label":Fa,"aria-hidden":"true",children:W("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:W("path",{d:"M4 6.5 8 10.5l4-4"})})})]})}import{buildSubmitResult as ai,ModeController as ii,setCursorOffset as oi}from"@magicx-eng/ai-autocomplete-vanilla";if(typeof document<"u"&&!document.getElementById("ac-style-fdee06e6")){let e=document.createElement("style");e.id="ac-style-fdee06e6",e.textContent=`.aia-submitButton-otz7H {
|
|
1874
1999
|
flex-shrink: 0;
|
|
1875
2000
|
width: 32px;
|
|
1876
2001
|
height: 32px;
|
|
@@ -1923,5 +2048,5 @@ import{buildSubmitResult as jo,cellDay as $o,cellIso as Vo,DATE_RANGE_META_END a
|
|
|
1923
2048
|
);
|
|
1924
2049
|
cursor: default;
|
|
1925
2050
|
}
|
|
1926
|
-
`,document.head.appendChild(e)}var kt={submitButton:"aia-submitButton-otz7H"};import{jsx as Qe}from"react/jsx-runtime";function Ct({disabled:e,onClick:r}){return Qe("button",{type:"button","data-aia-submit":"",className:kt.submitButton,disabled:e,onClick:a=>{a.stopPropagation(),r()},"aria-label":"Submit",children:Qe("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:Qe("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}import{AIAutocomplete as Ka,dateSelectionFor as Wa,identifiedParamLabel as Ga}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as Tt,useEffect as Ee,useRef as W,useState as _a}from"react";import{useRef as Pt}from"react";function St(e){let r=Pt(e);r.current=e;let a=Object.keys(e??{}).sort().join("\0"),n=Pt({key:"",overrides:void 0});if(n.current.key!==a){let s={};for(let i of Object.keys(e??{})){let o=(g,b,p)=>{let x=r.current?.[i];return x?x(g,b,p):[]};s[i]=o}n.current={key:a,overrides:e?s:void 0}}return{overrides:n.current.overrides,key:a}}import{useRef as Et}from"react";function It(e){let r=Et(e);r.current=e;let a=Et(null);a.current===null&&(a.current={fetch:(s,i)=>{let o=r.current;return o?o.fetch(s,i):Promise.reject(new Error("products config removed"))},transform:s=>r.current?.transform(s)??[],get limit(){return r.current?.limit}});let n=e!==void 0;return{config:n?a.current:void 0,enabled:n}}var qa={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 Ze({onSubmit:e,onResult:r,onError:a,optionOverrides:n,maskCompletedText:s,apiConfig:i,additionalContext:o,columns:g=2,dropdownTrigger:b,optionsPosition:p,closeDropdownOnBlur:x,showNonTappableOptions:u,showOptionIcons:y,showSkipButton:k,showProducts:v,onFocus:I,onBlur:A,value:R,completedParams:D,onChange:Z,onParamsChange:L,products:P,onProductSelect:j,source:le,setCursor:Y}){let h=W(null),[de,M]=_a(null),X=W(e);X.current=e;let ce=W(r);ce.current=r;let J=W(a);J.current=a;let $=W(Z);$.current=Z;let ee=W(L);ee.current=L;let V=W(I);V.current=I;let te=W(A);te.current=A;let ae=W(Y);ae.current=Y;let O=W(j);O.current=j;let z=It(P),G=St(n);Ee(()=>{if(typeof document>"u")return;let m=new Ka(document.createElement("div"),{renderMode:"headless",apiConfig:i,additionalContext:o,optionOverrides:G.overrides,maskCompletedText:s,columns:g,dropdownTrigger:b,optionsPosition:p,closeDropdownOnBlur:x,showNonTappableOptions:u,showProducts:v,source:le,value:R,completedParams:D,onSubmit:(...T)=>X.current?.(...T),onResult:(...T)=>ce.current?.(...T),onError:(...T)=>J.current?.(...T),onChange:(...T)=>$.current?.(...T),onParamsChange:(...T)=>ee.current?.(...T),onFocus:()=>V.current?.(),onBlur:()=>te.current?.(),onProductSelect:T=>O.current?.(T),setCursor:T=>ae.current?.(T),products:z.config});h.current=m,M(m.getState());let F=m.subscribe(T=>M(T));return()=>{F(),m.destroy(),h.current===m&&(h.current=null)}},[]),Ee(()=>{R!==void 0&&h.current?.setValue(R)},[R]),Ee(()=>{D!==void 0&&h.current?.setCompletedParams(D)},[D]);let c=JSON.stringify(i??null),t;try{t=JSON.stringify(o??null)}catch{t="[unstringifiable]"}Ee(()=>{h.current?.update({apiConfig:i,additionalContext:o,optionOverrides:G.overrides,dropdownTrigger:b,optionsPosition:p,closeDropdownOnBlur:x,showNonTappableOptions:u,showProducts:v})},[c,t,G.key,b,p,x,u,v]);let f=W(!1);Ee(()=>{if(!f.current){f.current=!0;return}h.current?.update({products:z.config})},[z.enabled]);let w=W(null);w.current===null&&(w.current={handleTextChange:m=>h.current?.handleTextChange(m),handleKeyDown:m=>{let F="nativeEvent"in m?m.nativeEvent:m;h.current?.handleKeyDown(F)},setFocused:m=>h.current?.setFocused(m),startEditingParam:m=>h.current?.startEditingParam(m),exitEditMode:()=>h.current?.exitEditMode(),handleCaretAfterInput:m=>h.current?.handleCaretAfterInput(m),handleCaretMove:m=>h.current?.handleCaretMove(m),replaceEditingRange:m=>h.current?.replaceEditingRange(m)??!1,setActivePill:m=>h.current?.setActivePill(m),skipActivePill:()=>h.current?.skipActivePill(),removeLastParam:()=>h.current?.removeLastParam(),clearNewParamId:()=>h.current?.clearNewParamId(),reset:()=>h.current?.reset(),selectOption:m=>h.current?.selectOption(m),selectProduct:m=>h.current?.selectProduct(m),setActiveDropdownIndex:m=>h.current?.setActiveDropdownIndex(m),showPreviousMonth:()=>h.current?.showPreviousMonth(),showNextMonth:()=>h.current?.showNextMonth(),handleFocus:()=>h.current?.setFocused(!0),handleBlur:()=>h.current?.setFocused(!1)});let l=w.current,S=Tt(m=>{let F=m.target.value,Fe=F.length>0&&!m.nativeEvent?.isComposing&&F[0]!==F[0].toUpperCase()?F[0].toUpperCase()+F.slice(1):F;h.current?.handleTextChange(Fe)},[]),ie=Tt(m=>{h.current?.handleKeyDown(m.nativeEvent)},[]),B=h.current,d=de??qa,oe=R!==void 0?R:d.text,me=D!==void 0?D:d.completedParams,pe=d.actionableSuggestions,be=pe[0],ne=B?.listboxId??"",ke=d.activeDropdownIndex>=0&&B?`${ne}-option-${d.activeDropdownIndex}`:void 0,N=d.editingParam,H=d.editingIdentified,ve=N?{type:N.suggestionType,text:N.suggestionPlaceholder,required:!0,options:N.options}:H?{type:H.type,text:Ga(H.type),required:!0,options:[]}:null,Te=ve??be,Be=ve?[ve]:pe,Ce=Wa(d),Ae=!B||d.isLoading&&!d.editingParam&&!d.inSelectionAnimation||d.isSearchingOptions;return{completedParams:me,skippedParams:d.skippedParams,identifiedParams:d.identifiedParams,suggestionPills:pe,setActivePill:l.setActivePill,skipActivePill:l.skipActivePill,removeLastParam:l.removeLastParam,segments:d.segments,newParamId:d.newParamId,clearNewParamId:l.clearNewParamId,suggestions:d.suggestions,activeIndex:d.activeDropdownIndex,isReady:d.isReady,isLoading:Ae,isFocused:d.isFocused,isDropdownOpen:d.isDropdownOpen,isActivePillSelected:d.isActivePillSelected,placeholderText:d.placeholderText,listboxId:ne,error:d.error,products:d.products,customFields:d.customFields,selectProduct:l.selectProduct,handleTextChange:l.handleTextChange,handleKeyDown:l.handleKeyDown,setFocused:l.setFocused,editingParam:N,editingIdentified:H,editingAnchor:d.editingAnchor,caretOffset:d.caretOffset,startEditingParam:l.startEditingParam,exitEditMode:l.exitEditMode,handleCaretAfterInput:l.handleCaretAfterInput,handleCaretMove:l.handleCaretMove,replaceEditingRange:l.replaceEditingRange,inputProps:{value:oe,placeholder:d.placeholderText||void 0,onChange:S,onKeyDown:ie,onFocus:l.handleFocus,onBlur:l.handleBlur,role:"combobox","aria-expanded":d.isDropdownOpen,"aria-activedescendant":ke,"aria-autocomplete":"list","aria-controls":ne},reset:l.reset,dropdownProps:{suggestions:Te?[{...Te,options:d.filteredOptions}]:[],activeIndex:d.activeDropdownIndex,onSelect:l.selectOption,onHighlight:l.setActiveDropdownIndex,isOpen:d.isDropdownOpen,id:ne,pills:Be,activeSelected:d.isActivePillSelected,onPillClick:l.setActivePill,onSkip:l.skipActivePill,showSkipButton:(k??!0)&&!N&&!H,showOptionIcons:y??!0,skipDisabled:d.inSelectionAnimation,isLoading:Ae,isInputEmpty:oe.trim().length===0,products:d.products,onProductSelect:l.selectProduct,onProductFocusChange:l.setFocused,formatType:d.activeFormatType,dateView:d.dateView,selectedDateIso:Ce.selectedIso,selectedDateRange:Ce.selectedRange,dateRangeStart:Ce.rangeStart,onPreviousMonth:l.showPreviousMonth,onNextMonth:l.showNextMonth,optionsPosition:p??"below"}}}import{extractPlainText as At,getCursorOffset as Rt,plainTextLength as Ua,renderEditableContent as ja,setCursorOffset as Dt}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as U,useEffect as Ye,useLayoutEffect as Xe,useRef as xe}from"react";var He;function $a(){if(He!==void 0)return He;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),He=e.contentEditable==="plaintext-only",He}function Lt(e){let{segments:r,showChipIcons:a=!0,newParamId:n,editingParam:s,editingIdentified:i,editingAnchor:o,caretOffset:g,placeholderText:b,isFocused:p,isDropdownOpen:x,listboxId:u,activeDescendantId:y,autoFocus:k,handleTextChange:v,handleKeyDown:I,handleCaretAfterInput:A,handleCaretMove:R,startEditingParam:D,replaceEditingRange:Z,setFocused:L}=e,P=xe(null),j=xe(!1),le=xe(""),Y=xe(""),h=xe(null),de=xe(0);h.current=g,Ye(()=>{if(!k)return;let c=P.current;if(!c)return;document.activeElement===c?L(!0):c.focus();let t=c.ownerDocument??document,f=t.getSelection(),w=f&&f.rangeCount>0&&c.contains(f.anchorNode);if(f&&!w){let l=t.createRange();l.selectNodeContents(c),l.collapse(!0),f.removeAllRanges(),f.addRange(l)}},[k,L]),Ye(()=>{let c=P.current;if(!c)return;let t=c.ownerDocument??document,f=()=>{let w=t.getSelection();if(!w||w.rangeCount===0||!w.anchorNode||!c.contains(w.anchorNode))return;let l=w.anchorNode,S=l.nodeType===Node.ELEMENT_NODE?l:l.parentElement,B=(w.isCollapsed?S?.closest("strong[data-param-id]"):null)?.dataset.paramId??null,d=s?.id??i?.id??null;if(B&&B!==d){D(B);return}performance.now()-de.current<50||R(Rt(c))};return t.addEventListener("selectionchange",f),()=>t.removeEventListener("selectionchange",f)},[s,i,D,R]),Xe(()=>{let c=P.current;c&&ja({input:c,segments:r,newParamId:n,editingParamId:s?.id??null,placeholderText:b??"",isFocused:p,showChipIcons:a})},[r,n,s,b,p,a]),Xe(()=>{let c=le.current,t=n??"";if(le.current=t,!t||t===c)return;let f=P.current;if(!f)return;f.focus();let w=h.current??Ua(f);Dt(f,w)},[n]),Xe(()=>{let c=Y.current,t=s?.id??"";if(Y.current=t,!t||t===c||o==null)return;let f=P.current;f&&Dt(f,o)},[s,o]);let M=U(()=>{if(j.current)return;let c=P.current;if(!c)return;let t=At(c),w=t.length>0&&t[0]!==t[0].toUpperCase()?t[0].toUpperCase()+t.slice(1):t;v(w)},[v]),X=U(()=>{de.current=performance.now(),M();let c=P.current;c&&A(Rt(c))},[M,A]);Ye(()=>{let c=P.current;if(!c)return;let t=f=>{let w=f,l=w.inputType;if(l==="insertParagraph"||l==="insertLineBreak"||l==="insertFromDrop"){f.preventDefault();return}if(l.startsWith("insert")||l.startsWith("delete")){let S=l.startsWith("delete")?"":w.data??"";Z(S)&&f.preventDefault()}};return c.addEventListener("beforeinput",t),()=>c.removeEventListener("beforeinput",t)},[Z]);let ce=U(()=>{j.current=!0},[]),J=U(()=>{j.current=!1,M()},[M]),$=U(c=>{c.preventDefault();let t=P.current;if(!t)return;let f=(c.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!f)return;let w=t.ownerDocument??document,l=w.getSelection();if(!l||l.rangeCount===0)return;let S=l.getRangeAt(0);if(!t.contains(S.startContainer))return;S.deleteContents();let ie=w.createTextNode(f);S.insertNode(ie),S.setStartAfter(ie),S.collapse(!0),l.removeAllRanges(),l.addRange(S),M()},[M]),ee=U(c=>I(c),[I]),V=U(()=>L(!0),[L]),te=U(()=>L(!1),[L]),ae=U(()=>P.current?.focus(),[]),O=U(()=>P.current?.blur(),[]),z=U(()=>{let c=P.current;return c?At(c):""},[]),G=$a()?"plaintext-only":"true";return{inputRef:P,editorProps:{ref:P,contentEditable:G,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":u,"aria-expanded":x,"aria-activedescendant":y,spellCheck:!0,enterKeyHint:"send",onInput:X,onKeyDown:ee,onCompositionStart:ce,onCompositionEnd:J,onPaste:$,onFocus:V,onBlur:te},getPlainText:z,focus:ae,blur:O}}import{jsx as ye,jsxs as et}from"react/jsx-runtime";function ei(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var ti=Va(function({onSubmit:r,onResult:a,onError:n,optionOverrides:s,maskCompletedText:i,className:o,apiConfig:g,additionalContext:b,columns:p,pillPlacement:x="dropdown",mode:u="auto",optionsPosition:y="below",animations:k=!0,dropdownTrigger:v,closeDropdownOnBlur:I,showNonTappableOptions:A,showOptionIcons:R=!0,showChipIcons:D=!0,showSkipButton:Z,showProducts:L,productsLayout:P,autoFocus:j=!0,onFocus:le,onBlur:Y,value:h,completedParams:de,onChange:M,onParamsChange:X,products:ce,onProductSelect:J,submitButton:$},ee){let V=Ie(null),te=Ie(null),ae=Ie(()=>{}),O=Ie(null),z=Ie(null);Mt(()=>{let C=V.current;if(C)return O.current?O.current.setMode(u):O.current=new Xa(C,u),()=>{O.current?.destroy(),O.current=null}},[u]);let G=Je(C=>{let he=z.current?.current;he&&(he.focus(),Ja(he,C))},[]),{completedParams:c,skippedParams:t,identifiedParams:f,isReady:w,customFields:l,suggestionPills:S,setActivePill:ie,skipActivePill:B,segments:d,newParamId:oe,clearNewParamId:me,placeholderText:pe,isFocused:be,isDropdownOpen:ne,isActivePillSelected:ke,isLoading:N,activeIndex:H,listboxId:ve,handleTextChange:Te,handleKeyDown:Be,setFocused:Ce,editingParam:Ae,editingIdentified:m,editingAnchor:F,caretOffset:T,startEditingParam:Fe,handleCaretAfterInput:Ot,handleCaretMove:zt,replaceEditingRange:Nt,dropdownProps:Ht,reset:Re}=Ze({onSubmit:C=>ae.current(C),onResult:a,onError:n,optionOverrides:s,maskCompletedText:i,apiConfig:g,additionalContext:b,columns:p,dropdownTrigger:v,optionsPosition:y,closeDropdownOnBlur:I,showNonTappableOptions:A,showOptionIcons:R,showSkipButton:Z,showProducts:L,onFocus:le,onBlur:Y,value:h,completedParams:de,onChange:M,onParamsChange:X,products:ce,onProductSelect:J,source:"full-sdk",setCursor:G});Mt(()=>{if(!oe)return;let C=window.setTimeout(()=>me(),650);return()=>window.clearTimeout(C)},[oe,me]);let Bt=H>=0?`${ve}-option-${H}`:void 0,{inputRef:Ke,editorProps:Ft,focus:De,blur:tt,getPlainText:at}=Lt({segments:d,newParamId:oe,editingParam:Ae,editingIdentified:m,editingAnchor:F,caretOffset:T,placeholderText:pe,isFocused:be,showChipIcons:D,isDropdownOpen:ne,listboxId:ve,activeDescendantId:Bt,autoFocus:j,handleTextChange:Te,handleKeyDown:Be,handleCaretAfterInput:Ot,handleCaretMove:zt,startEditingParam:Fe,replaceEditingRange:Nt,setFocused:Ce});z.current=Ke,Za(()=>{let C=te.current,he=Ke.current;if(!C||!he)return;let it=()=>{let nt=C.firstElementChild;if(!nt)return;let _t=nt.getBoundingClientRect(),qt=he.getBoundingClientRect();_t.top>=qt.bottom-2?C.setAttribute("data-aia-pill-wrapped",""):C.removeAttribute("data-aia-pill-wrapped")};it();let ot=new ResizeObserver(it);return ot.observe(he),()=>ot.disconnect()},[d,S.length,N,Ke]),Qa(ee,()=>({focus:De,blur:tt,reset:Re,setMode:C=>O.current?.setMode(C),skipActivePill:B}),[De,tt,Re,B]);let Le=!!d.length||c.length>0,We=Je(()=>{if(!Le)return;let C=at();r(Ya(C,c,t,{identifiedParams:f,isReady:w,customFields:l})),Re()},[Le,c,t,f,w,l,r,Re,at]);ae.current=We;let Kt=Je(C=>{C.target?.closest("[data-aia-pill]")||De()},[De]),Wt=x==="inline",Gt=x==="dropdown";return et("div",{ref:V,className:`magicx-aia ${ge.container} ${o??""}`,"data-pill-placement":x,"data-options-position":y,"data-animations":k?"on":"off","data-mode":ei(u),children:[ye(Ve,{...Ht,showPills:Gt,productsLayout:P}),et("div",{className:ge.inputWrapper,"data-aia-input-wrapper":"",onClick:Kt,children:[et("div",{className:ge.editorArea,"data-aia-editor":"",children:[ye("div",{...Ft,className:ge.input,"data-aia-input":""}),Wt&&(N||S.length>0)&&ye("span",{ref:te,className:ge.pillListContainer,"data-aia-pill-list-container":"",children:ye(Oe,{pills:S,activePillIndex:0,activeSelected:ke,onSelectPill:ie,loading:N})})]}),$===null?null:$===void 0?ye(Ct,{disabled:!Le,onClick:We}):ye("span",{"data-aia-submit":"","data-aia-submit-slot":"",className:ge.submitSlot,onClick:C=>{Le&&(C.stopPropagation(),We())},children:$})]})]})});export{ti as AIAutocomplete,Ve as AIAutocompleteDropdown,Qo as DATE_RANGE_META_END,Zo as DATE_RANGE_META_START,on as PRODUCT_PATH_PREFIX,un as WEEKDAY_LABELS,jo as buildSubmitResult,$o as cellDay,Vo as cellIso,Yo as dateCellMarks,Xo as formatDate,Jo as formatDateRange,en as isoDate,tn as monthLabel,an as optionLabel,nn as parseDate,rn as parseLooseDate,sn as parseLooseDateRange,ln as productFromMatchedItem,dn as productsFromCustomFields,cn as sanitizeOptionIconSvg,pn as selectedRangeFor,Ze as useAIAutocomplete,hn as visibleDateRange,fn as withSkippedParams};
|
|
2051
|
+
`,document.head.appendChild(e)}var Pt={submitButton:"aia-submitButton-otz7H"};import{jsx as Xe}from"react/jsx-runtime";function St({disabled:e,onClick:n}){return Xe("button",{type:"button","data-aia-submit":"",className:Pt.submitButton,disabled:e,onClick:i=>{i.stopPropagation(),n()},"aria-label":"Submit",children:Xe("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:Xe("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}import{AIAutocomplete as Ua,dateSelectionFor as ja,identifiedParamLabel as Qa}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as Rt,useEffect as Re,useRef as G,useState as Ya}from"react";import{useRef as It}from"react";function Et(e){let n=It(e);n.current=e;let i=Object.keys(e??{}).sort().join("\0"),r=It({key:"",overrides:void 0});if(r.current.key!==i){let s={};for(let a of Object.keys(e??{})){let o=(u,v,f)=>{let w=n.current?.[a];return w?w(u,v,f):[]};s[a]=o}r.current={key:i,overrides:e?s:void 0}}return{overrides:r.current.overrides,key:i}}import{useRef as Tt}from"react";function At(e){let n=Tt(e);n.current=e;let i=Tt(null);i.current===null&&(i.current={fetch:(s,a)=>{let o=n.current;return o?o.fetch(s,a):Promise.reject(new Error("products config removed"))},transform:s=>n.current?.transform(s)??[],get limit(){return n.current?.limit}});let r=e!==void 0;return{config:r?i.current:void 0,enabled:r}}var $a={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 Je({onSubmit:e,onResult:n,onError:i,optionOverrides:r,maskCompletedText:s,apiConfig:a,additionalContext:o,columns:u=2,dropdownTrigger:v,optionsPosition:f,closeDropdownOnBlur:w,showNonTappableOptions:p,showOptionIcons:k,showOptionImages:P,showOptionCounts:y,showSkipButton:M,showProducts:E,onFocus:S,onBlur:D,value:A,completedParams:O,onChange:z,onParamsChange:C,products:$,onProductSelect:V,source:ce,setCursor:Z}){let h=G(null),[B,pe]=Ya(null),X=G(e);X.current=e;let he=G(n);he.current=n;let J=G(i);J.current=i;let ue=G(z);ue.current=z;let _=G(C);_.current=C;let ee=G(S);ee.current=S;let te=G(D);te.current=D;let ae=G(Z);ae.current=Z;let ie=G(V);ie.current=V;let L=At($),l=Et(r);Re(()=>{if(typeof document>"u")return;let m=new Ua(document.createElement("div"),{renderMode:"headless",apiConfig:a,additionalContext:o,optionOverrides:l.overrides,maskCompletedText:s,columns:u,dropdownTrigger:v,optionsPosition:f,closeDropdownOnBlur:w,showNonTappableOptions:p,showProducts:E,source:ce,value:A,completedParams:O,onSubmit:(...R)=>X.current?.(...R),onResult:(...R)=>he.current?.(...R),onError:(...R)=>J.current?.(...R),onChange:(...R)=>ue.current?.(...R),onParamsChange:(...R)=>_.current?.(...R),onFocus:()=>ee.current?.(),onBlur:()=>te.current?.(),onProductSelect:R=>ie.current?.(R),setCursor:R=>ae.current?.(R),products:L.config});h.current=m,pe(m.getState());let K=m.subscribe(R=>pe(R));return()=>{K(),m.destroy(),h.current===m&&(h.current=null)}},[]),Re(()=>{A!==void 0&&h.current?.setValue(A)},[A]),Re(()=>{O!==void 0&&h.current?.setCompletedParams(O)},[O]);let g=JSON.stringify(a??null),t;try{t=JSON.stringify(o??null)}catch{t="[unstringifiable]"}Re(()=>{h.current?.update({apiConfig:a,additionalContext:o,optionOverrides:l.overrides,dropdownTrigger:v,optionsPosition:f,closeDropdownOnBlur:w,showNonTappableOptions:p,showProducts:E})},[g,t,l.key,v,f,w,p,E]);let x=G(!1);Re(()=>{if(!x.current){x.current=!0;return}h.current?.update({products:L.config})},[L.enabled]);let b=G(null);b.current===null&&(b.current={handleTextChange:m=>h.current?.handleTextChange(m),handleKeyDown:m=>{let K="nativeEvent"in m?m.nativeEvent:m;h.current?.handleKeyDown(K)},setFocused:m=>h.current?.setFocused(m),startEditingParam:m=>h.current?.startEditingParam(m),exitEditMode:()=>h.current?.exitEditMode(),handleCaretAfterInput:m=>h.current?.handleCaretAfterInput(m),handleCaretMove:m=>h.current?.handleCaretMove(m),replaceEditingRange:m=>h.current?.replaceEditingRange(m)??!1,setActivePill:m=>h.current?.setActivePill(m),skipActivePill:()=>h.current?.skipActivePill(),removeLastParam:()=>h.current?.removeLastParam(),clearNewParamId:()=>h.current?.clearNewParamId(),reset:()=>h.current?.reset(),selectOption:m=>h.current?.selectOption(m),selectProduct:m=>h.current?.selectProduct(m),setActiveDropdownIndex:m=>h.current?.setActiveDropdownIndex(m),showPreviousMonth:()=>h.current?.showPreviousMonth(),showNextMonth:()=>h.current?.showNextMonth(),handleFocus:()=>h.current?.setFocused(!0),handleBlur:()=>h.current?.setFocused(!1)});let c=b.current,F=Rt(m=>{let K=m.target.value,We=K.length>0&&!m.nativeEvent?.isComposing&&K[0]!==K[0].toUpperCase()?K[0].toUpperCase()+K.slice(1):K;h.current?.handleTextChange(We)},[]),q=Rt(m=>{h.current?.handleKeyDown(m.nativeEvent)},[]),oe=h.current,d=B??$a,ne=A!==void 0?A:d.text,me=O!==void 0?O:d.completedParams,re=d.actionableSuggestions,xe=re[0],se=oe?.listboxId??"",Se=d.activeDropdownIndex>=0&&oe?`${se}-option-${d.activeDropdownIndex}`:void 0,U=d.editingParam,N=d.editingIdentified,ye=U?{type:U.suggestionType,text:U.suggestionPlaceholder,required:!0,options:U.options}:N?{type:N.type,text:Qa(N.type),required:!0,options:[]}:null,Ie=ye??xe,Ke=ye?[ye]:re,Ee=ja(d),Le=!oe||d.isLoading&&!d.editingParam&&!d.inSelectionAnimation||d.isSearchingOptions;return{completedParams:me,skippedParams:d.skippedParams,identifiedParams:d.identifiedParams,suggestionPills:re,setActivePill:c.setActivePill,skipActivePill:c.skipActivePill,removeLastParam:c.removeLastParam,segments:d.segments,newParamId:d.newParamId,clearNewParamId:c.clearNewParamId,suggestions:d.suggestions,activeIndex:d.activeDropdownIndex,isReady:d.isReady,isLoading:Le,isFocused:d.isFocused,isDropdownOpen:d.isDropdownOpen,isActivePillSelected:d.isActivePillSelected,placeholderText:d.placeholderText,listboxId:se,error:d.error,products:d.products,customFields:d.customFields,selectProduct:c.selectProduct,handleTextChange:c.handleTextChange,handleKeyDown:c.handleKeyDown,setFocused:c.setFocused,editingParam:U,editingIdentified:N,editingAnchor:d.editingAnchor,caretOffset:d.caretOffset,startEditingParam:c.startEditingParam,exitEditMode:c.exitEditMode,handleCaretAfterInput:c.handleCaretAfterInput,handleCaretMove:c.handleCaretMove,replaceEditingRange:c.replaceEditingRange,inputProps:{value:ne,placeholder:d.placeholderText||void 0,onChange:F,onKeyDown:q,onFocus:c.handleFocus,onBlur:c.handleBlur,role:"combobox","aria-expanded":d.isDropdownOpen,"aria-activedescendant":Se,"aria-autocomplete":"list","aria-controls":se},reset:c.reset,dropdownProps:{suggestions:Ie?[{...Ie,options:d.filteredOptions}]:[],activeIndex:d.activeDropdownIndex,onSelect:c.selectOption,onHighlight:c.setActiveDropdownIndex,isOpen:d.isDropdownOpen,id:se,pills:Ke,activeSelected:d.isActivePillSelected,onPillClick:c.setActivePill,onSkip:c.skipActivePill,showSkipButton:(M??!0)&&!U&&!N,showOptionIcons:k??!0,showOptionImages:P??!0,showOptionCounts:y??!0,skipDisabled:d.inSelectionAnimation,isLoading:Le,isInputEmpty:ne.trim().length===0,products:d.products,onProductSelect:c.selectProduct,onProductFocusChange:c.setFocused,formatType:d.activeFormatType,dateView:d.dateView,selectedDateIso:Ee.selectedIso,selectedDateRange:Ee.selectedRange,dateRangeStart:Ee.rangeStart,onPreviousMonth:c.showPreviousMonth,onNextMonth:c.showNextMonth,optionsPosition:f??"below"}}}import{extractPlainText as Dt,getCursorOffset as Lt,plainTextLength as Va,renderEditableContent as Za,setCursorOffset as Ot}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as Q,useEffect as et,useLayoutEffect as tt,useRef as Ce}from"react";var Fe;function Xa(){if(Fe!==void 0)return Fe;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Fe=e.contentEditable==="plaintext-only",Fe}function Mt(e){let{segments:n,showChipIcons:i=!0,showChipImages:r=!0,newParamId:s,editingParam:a,editingIdentified:o,editingAnchor:u,caretOffset:v,placeholderText:f,isFocused:w,isDropdownOpen:p,listboxId:k,activeDescendantId:P,autoFocus:y,handleTextChange:M,handleKeyDown:E,handleCaretAfterInput:S,handleCaretMove:D,startEditingParam:A,replaceEditingRange:O,setFocused:z}=e,C=Ce(null),$=Ce(!1),V=Ce(""),ce=Ce(""),Z=Ce(null),h=Ce(0);Z.current=v,et(()=>{if(!y)return;let l=C.current;if(!l)return;document.activeElement===l?z(!0):l.focus();let g=l.ownerDocument??document,t=g.getSelection(),x=t&&t.rangeCount>0&&l.contains(t.anchorNode);if(t&&!x){let b=g.createRange();b.selectNodeContents(l),b.collapse(!0),t.removeAllRanges(),t.addRange(b)}},[y,z]),et(()=>{let l=C.current;if(!l)return;let g=l.ownerDocument??document,t=()=>{let x=g.getSelection();if(!x||x.rangeCount===0||!x.anchorNode||!l.contains(x.anchorNode))return;let b=x.anchorNode,c=b.nodeType===Node.ELEMENT_NODE?b:b.parentElement,q=(x.isCollapsed?c?.closest("strong[data-param-id]"):null)?.dataset.paramId??null,oe=a?.id??o?.id??null;if(q&&q!==oe){A(q);return}performance.now()-h.current<50||D(Lt(l))};return g.addEventListener("selectionchange",t),()=>g.removeEventListener("selectionchange",t)},[a,o,A,D]),tt(()=>{let l=C.current;l&&Za({input:l,segments:n,newParamId:s,editingParamId:a?.id??null,placeholderText:f??"",isFocused:w,showChipIcons:i,showChipImages:r})},[n,s,a,f,w,i,r]),tt(()=>{let l=V.current,g=s??"";if(V.current=g,!g||g===l)return;let t=C.current;if(!t)return;t.focus();let x=Z.current??Va(t);Ot(t,x)},[s]),tt(()=>{let l=ce.current,g=a?.id??"";if(ce.current=g,!g||g===l||u==null)return;let t=C.current;t&&Ot(t,u)},[a,u]);let B=Q(()=>{if($.current)return;let l=C.current;if(!l)return;let g=Dt(l),x=g.length>0&&g[0]!==g[0].toUpperCase()?g[0].toUpperCase()+g.slice(1):g;M(x)},[M]),pe=Q(()=>{h.current=performance.now(),B();let l=C.current;l&&S(Lt(l))},[B,S]);et(()=>{let l=C.current;if(!l)return;let g=t=>{let x=t,b=x.inputType;if(b==="insertParagraph"||b==="insertLineBreak"||b==="insertFromDrop"){t.preventDefault();return}if(b.startsWith("insert")||b.startsWith("delete")){let c=b.startsWith("delete")?"":x.data??"";O(c)&&t.preventDefault()}};return l.addEventListener("beforeinput",g),()=>l.removeEventListener("beforeinput",g)},[O]);let X=Q(()=>{$.current=!0},[]),he=Q(()=>{$.current=!1,B()},[B]),J=Q(l=>{l.preventDefault();let g=C.current;if(!g)return;let t=(l.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!t)return;let x=g.ownerDocument??document,b=x.getSelection();if(!b||b.rangeCount===0)return;let c=b.getRangeAt(0);if(!g.contains(c.startContainer))return;c.deleteContents();let F=x.createTextNode(t);c.insertNode(F),c.setStartAfter(F),c.collapse(!0),b.removeAllRanges(),b.addRange(c),B()},[B]),ue=Q(l=>E(l),[E]),_=Q(()=>z(!0),[z]),ee=Q(()=>z(!1),[z]),te=Q(()=>C.current?.focus(),[]),ae=Q(()=>C.current?.blur(),[]),ie=Q(()=>{let l=C.current;return l?Dt(l):""},[]),L=Xa()?"plaintext-only":"true";return{inputRef:C,editorProps:{ref:C,contentEditable:L,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":k,"aria-expanded":p,"aria-activedescendant":P,spellCheck:!0,enterKeyHint:"send",onInput:pe,onKeyDown:ue,onCompositionStart:X,onCompositionEnd:he,onPaste:J,onFocus:_,onBlur:ee},getPlainText:ie,focus:te,blur:ae}}import{jsx as Pe,jsxs as it}from"react/jsx-runtime";function ni(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var ri=Ja(function({onSubmit:n,onResult:i,onError:r,optionOverrides:s,maskCompletedText:a,className:o,apiConfig:u,additionalContext:v,columns:f,pillPlacement:w="dropdown",mode:p="auto",optionsPosition:k="below",animations:P=!0,dropdownTrigger:y,closeDropdownOnBlur:M,showNonTappableOptions:E,showOptionIcons:S=!0,showChipIcons:D=!0,showChipImages:A=!0,showOptionImages:O=!0,showOptionCounts:z=!0,showSkipButton:C,showProducts:$,productsLayout:V,autoFocus:ce=!0,onFocus:Z,onBlur:h,value:B,completedParams:pe,onChange:X,onParamsChange:he,products:J,onProductSelect:ue,submitButton:_},ee){let te=De(null),ae=De(null),ie=De(()=>{}),L=De(null),l=De(null);zt(()=>{let I=te.current;if(I)return L.current?L.current.setMode(p):L.current=new ii(I,p),()=>{L.current?.destroy(),L.current=null}},[p]);let g=at(I=>{let fe=l.current?.current;fe&&(fe.focus(),oi(fe,I))},[]),{completedParams:t,skippedParams:x,identifiedParams:b,isReady:c,customFields:F,suggestionPills:q,setActivePill:oe,skipActivePill:d,segments:ne,newParamId:me,clearNewParamId:re,placeholderText:xe,isFocused:se,isDropdownOpen:Se,isActivePillSelected:U,isLoading:N,activeIndex:ye,listboxId:Ie,handleTextChange:Ke,handleKeyDown:Ee,setFocused:Le,editingParam:m,editingIdentified:K,editingAnchor:R,caretOffset:We,startEditingParam:Nt,handleCaretAfterInput:Ht,handleCaretMove:Bt,replaceEditingRange:Ft,dropdownProps:Kt,reset:Oe}=Je({onSubmit:I=>ie.current(I),onResult:i,onError:r,optionOverrides:s,maskCompletedText:a,apiConfig:u,additionalContext:v,columns:f,dropdownTrigger:y,optionsPosition:k,closeDropdownOnBlur:M,showNonTappableOptions:E,showOptionIcons:S,showOptionImages:O,showOptionCounts:z,showSkipButton:C,showProducts:$,onFocus:Z,onBlur:h,value:B,completedParams:pe,onChange:X,onParamsChange:he,products:J,onProductSelect:ue,source:"full-sdk",setCursor:g});zt(()=>{if(!me)return;let I=window.setTimeout(()=>re(),650);return()=>window.clearTimeout(I)},[me,re]);let Wt=ye>=0?`${Ie}-option-${ye}`:void 0,{inputRef:Ge,editorProps:Gt,focus:Me,blur:ot,getPlainText:nt}=Mt({segments:ne,newParamId:me,editingParam:m,editingIdentified:K,editingAnchor:R,caretOffset:We,placeholderText:xe,isFocused:se,showChipIcons:D,showChipImages:A,isDropdownOpen:Se,listboxId:Ie,activeDescendantId:Wt,autoFocus:ce,handleTextChange:Ke,handleKeyDown:Ee,handleCaretAfterInput:Ht,handleCaretMove:Bt,startEditingParam:Nt,replaceEditingRange:Ft,setFocused:Le});l.current=Ge,ti(()=>{let I=ae.current,fe=Ge.current;if(!I||!fe)return;let rt=()=>{let lt=I.firstElementChild;if(!lt)return;let jt=lt.getBoundingClientRect(),Qt=fe.getBoundingClientRect();jt.top>=Qt.bottom-2?I.setAttribute("data-aia-pill-wrapped",""):I.removeAttribute("data-aia-pill-wrapped")};rt();let st=new ResizeObserver(rt);return st.observe(fe),()=>st.disconnect()},[ne,q.length,N,Ge]),ei(ee,()=>({focus:Me,blur:ot,reset:Oe,setMode:I=>L.current?.setMode(I),skipActivePill:d}),[Me,ot,Oe,d]);let ze=!!ne.length||t.length>0,_e=at(()=>{if(!ze)return;let I=nt();n(ai(I,t,x,{identifiedParams:b,isReady:c,customFields:F})),Oe()},[ze,t,x,b,c,F,n,Oe,nt]);ie.current=_e;let _t=at(I=>{I.target?.closest("[data-aia-pill]")||Me()},[Me]),qt=w==="inline",Ut=w==="dropdown";return it("div",{ref:te,className:`magicx-aia ${ve.container} ${o??""}`,"data-pill-placement":w,"data-options-position":k,"data-animations":P?"on":"off","data-mode":ni(p),children:[Pe(Ze,{...Kt,showPills:Ut,productsLayout:V}),it("div",{className:ve.inputWrapper,"data-aia-input-wrapper":"",onClick:_t,children:[it("div",{className:ve.editorArea,"data-aia-editor":"",children:[Pe("div",{...Gt,className:ve.input,"data-aia-input":""}),qt&&(N||q.length>0)&&Pe("span",{ref:ae,className:ve.pillListContainer,"data-aia-pill-list-container":"",children:Pe(He,{pills:q,activePillIndex:0,activeSelected:U,onSelectPill:oe,loading:N})})]}),_===null?null:_===void 0?Pe(St,{disabled:!ze,onClick:_e}):Pe("span",{"data-aia-submit":"","data-aia-submit-slot":"",className:ve.submitSlot,onClick:I=>{ze&&(I.stopPropagation(),_e())},children:_})]})]})});export{ri as AIAutocomplete,Ze as AIAutocompleteDropdown,en as DATE_RANGE_META_END,tn as DATE_RANGE_META_START,an as DEFAULT_OPTION_COUNT_UNIT,mn as PRODUCT_PATH_PREFIX,Cn as WEEKDAY_LABELS,Zo as buildSubmitResult,Xo as cellDay,Jo as cellIso,on as dateCellMarks,nn as formatDate,rn as formatDateRange,sn as formatOptionCount,ln as isoDate,dn as monthLabel,cn as optionCountLabel,pn as optionHasImage,hn as optionImageSrc,un as optionLabel,fn as parseDate,gn as parseLooseDate,bn as parseLooseDateRange,vn as productFromMatchedItem,wn as productsFromCustomFields,xn as sanitizeOptionIconSvg,yn as selectedRangeFor,Je as useAIAutocomplete,kn as visibleDateRange,Pn as withSkippedParams};
|
|
1927
2052
|
//# sourceMappingURL=index.mjs.map
|