@magicx-eng/ai-autocomplete-react 0.21.3 → 0.23.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 +7 -5
- package/dist/index.js +67 -28
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +65 -26
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -383,11 +383,12 @@ narrowing.
|
|
|
383
383
|
|
|
384
384
|
Each server item becomes a `Product` with `id` (the item's stable id), `title`,
|
|
385
385
|
`price` (the item's lowest price, verbatim as the catalog spells it — the
|
|
386
|
-
currency is yours to add), `vendor`, `imageUrl`, and a
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
386
|
+
currency is yours to add), `vendor`, `imageUrl`, and a `url`: the item's own
|
|
387
|
+
`item_url` when the uploaded catalog named one (absolute or root-relative;
|
|
388
|
+
anything else is ignored), else a **relative** `/products/{handle}` — the right
|
|
389
|
+
link for a Shopify widget running on the storefront itself. An item with
|
|
390
|
+
neither gets no `url`: its card is still activatable and still emits
|
|
391
|
+
`onProductSelect`, it just has nothing for cmd-click to open. `productFromMatchedItem` / `productsFromCustomFields` are
|
|
391
392
|
exported for a hand-rolled strip that wants the same mapping.
|
|
392
393
|
|
|
393
394
|
Pass `showProducts={false}` to render no strip at all. The catalog report
|
|
@@ -749,6 +750,7 @@ Override on the container (via `className`). The variables are declared with `:w
|
|
|
749
750
|
| `--aia-border` | `rgba(17, 24, 39, 0.14)` | `#505050` | Input container border color |
|
|
750
751
|
| `--aia-shadow` | `inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(16,24,40,0.1), 0 8px 24px rgba(16,24,40,0.16)` | `inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5)` | Input container elevation (box-shadow) |
|
|
751
752
|
| `--aia-dropdown-offset` | `13px` | `13px` | Gap between the input box and the dropdown (the dropdown's margin toward the input). |
|
|
753
|
+
| `--aia-content-inset-left` | `16px` | `16px` | Left inset of the SDK's content: the input wrapper's left padding, and the line the dropdown's content (parameter label, option text, product strip) starts on. Set it when you pad the field to clear a leading icon of your own, so the dropdown's content stays aligned under the typed text. Practical minimum is `10px` (the option text's own inset); both surfaces floor it there. |
|
|
752
754
|
| `--aia-footer-gap` | `8px` | `8px` | Breathing room above the dropdown footer (badge / keyboard hints), additive to the dropdown's 8px section gap. |
|
|
753
755
|
| `--aia-footer-chip-bg` | `--aia-surface` at 65% | `--aia-surface` at 65% | Fill behind the footer's keyboard hint and AI-Autocomplete badge. The option list scrolls under the footer, so this keeps both legible over the row passing behind them. `transparent` on the glass surface. |
|
|
754
756
|
| `--aia-dropdown-bg` | — | — | Optional bg color the dropdown's "glass" rim shadow tints toward. Set this to the page background behind the dropdown so the bottom-corner glow blends seamlessly. |
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var at=Object.defineProperty;var jt=Object.getOwnPropertyDescriptor;var $t=Object.getOwnPropertyNames;var Vt=Object.prototype.hasOwnProperty;var Qt=(e,i)=>{for(var a in i)at(e,a,{get:i[a],enumerable:!0})},Zt=(e,i,a,r)=>{if(i&&typeof i=="object"||typeof i=="function")for(let n of $t(i))!Vt.call(e,n)&&n!==a&&at(e,n,{get:()=>i[n],enumerable:!(r=jt(i,n))||r.enumerable});return e};var Yt=e=>Zt(at({},"__esModule",{value:!0}),e);var ca={};Qt(ca,{AIAutocomplete:()=>zt,AIAutocompleteDropdown:()=>Ve,DATE_RANGE_META_END:()=>c.DATE_RANGE_META_END,DATE_RANGE_META_START:()=>c.DATE_RANGE_META_START,PRODUCT_PATH_PREFIX:()=>c.PRODUCT_PATH_PREFIX,WEEKDAY_LABELS:()=>c.WEEKDAY_LABELS,buildSubmitResult:()=>c.buildSubmitResult,cellDay:()=>c.cellDay,cellIso:()=>c.cellIso,dateCellMarks:()=>c.dateCellMarks,formatDate:()=>c.formatDate,formatDateRange:()=>c.formatDateRange,isoDate:()=>c.isoDate,monthLabel:()=>c.monthLabel,optionLabel:()=>c.optionLabel,parseDate:()=>c.parseDate,parseLooseDate:()=>c.parseLooseDate,parseLooseDateRange:()=>c.parseLooseDateRange,productFromMatchedItem:()=>c.productFromMatchedItem,productsFromCustomFields:()=>c.productsFromCustomFields,sanitizeOptionIconSvg:()=>c.sanitizeOptionIconSvg,selectedRangeFor:()=>c.selectedRangeFor,useAIAutocomplete:()=>Ze,visibleDateRange:()=>c.visibleDateRange,withSkippedParams:()=>c.withSkippedParams});module.exports=Yt(ca);var c=require("@magicx-eng/ai-autocomplete-vanilla");var D=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
|
|
@@ -8,7 +8,14 @@
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.aia-inputWrapper-FLq1b {
|
|
11
|
-
|
|
11
|
+
/* The left inset is a token shared with the dropdown (which insets its
|
|
12
|
+
content by the same amount), so the typed text, the parameter label,
|
|
13
|
+
the option text and the product strip share one left edge. A host that
|
|
14
|
+
pads the field to clear its own leading icon sets --aia-content-inset-left
|
|
15
|
+
and the dropdown follows. Floored at 10px \u2014 the dropdown's sections inset
|
|
16
|
+
their text by 10px and its own padding can't go below zero, so below
|
|
17
|
+
10px the two sides would diverge; flooring both keeps them together. */
|
|
18
|
+
padding: 12px 16px 12px max(10px, var(--aia-content-inset-left, 16px));
|
|
12
19
|
border: 1px solid var(--aia-border, #b0b0b0);
|
|
13
20
|
border-radius: 20px;
|
|
14
21
|
background: var(--aia-surface, #ffffff);
|
|
@@ -701,7 +708,15 @@
|
|
|
701
708
|
display: flex;
|
|
702
709
|
flex-direction: column;
|
|
703
710
|
box-sizing: border-box;
|
|
704
|
-
padding
|
|
711
|
+
/* The left padding derives from --aia-content-inset-left, the token the
|
|
712
|
+
input wrapper reads for its own left padding. The option text and the
|
|
713
|
+
parameter label sit 10px inside this padding edge (the option's padding;
|
|
714
|
+
the pill bar's list wrapper carries the same 10px \u2014 see appearance.css),
|
|
715
|
+
and the product strip is inset to the same line, so the whole panel's
|
|
716
|
+
content starts exactly under the typed text. max() keeps the padding at
|
|
717
|
+
zero (never negative, which CSS would clamp anyway) for a token under
|
|
718
|
+
10px \u2014 the input wrapper floors the token at 10px to match. */
|
|
719
|
+
padding: 10px 8px 10px max(0px, calc(var(--aia-content-inset-left, 16px) - 10px));
|
|
705
720
|
overflow: hidden;
|
|
706
721
|
container-type: inline-size;
|
|
707
722
|
z-index: 10;
|
|
@@ -770,9 +785,10 @@
|
|
|
770
785
|
/* "More below" scroll arrow \u2014 see the core's render/scrollArrow.ts.
|
|
771
786
|
A bare down chevron at the bottom-centre of the option list, shown while
|
|
772
787
|
there is more to scroll to \u2014 no disc, border or shadow around it. It rests
|
|
773
|
-
just above the grid's reserved band
|
|
774
|
-
|
|
775
|
-
|
|
788
|
+
just above the grid's reserved band, or \u2014 when a product strip follows the
|
|
789
|
+
grid \u2014 centred on the strip's "Products" label row, off the last option row
|
|
790
|
+
(--aia-scroll-arrow-bottom is measured and set inline by the controller so
|
|
791
|
+
it tracks the layout). It never travels with the scroll: the controller toggles
|
|
776
792
|
data-aia-visible and the only thing that transitions is opacity \u2014 a slow,
|
|
777
793
|
even second in and the same second out. Its one motion is an idle bob, a few
|
|
778
794
|
pixels up and back over a couple of seconds, running all the time so a fade
|
|
@@ -966,7 +982,7 @@
|
|
|
966
982
|
opacity: 0.25;
|
|
967
983
|
}
|
|
968
984
|
}
|
|
969
|
-
`,document.head.appendChild(e)}var he={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 R=require("@magicx-eng/ai-autocomplete-vanilla"),
|
|
985
|
+
`,document.head.appendChild(e)}var he={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 R=require("@magicx-eng/ai-autocomplete-vanilla"),mt=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) ---
|
|
970
986
|
|
|
971
987
|
One of three hand-maintained copies (vanilla styles.css, this file, Angular's
|
|
972
988
|
date-grid.component.css). Only the class-naming layer differs \u2014 the
|
|
@@ -1129,7 +1145,7 @@
|
|
|
1129
1145
|
opacity: 0.8;
|
|
1130
1146
|
background: rgba(var(--aia-streak-rgb, 255, 255, 255), 0.06);
|
|
1131
1147
|
}
|
|
1132
|
-
`,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"};var K=require("react/jsx-runtime"),
|
|
1148
|
+
`,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"};var K=require("react/jsx-runtime"),Xt=["sunday","monday","tuesday","wednesday","thursday","friday","saturday"];function ft({options:e,activeIndex:i,listboxId:a,view:r,selection:n,onSelect:o,onHighlight:s,onPreviousMonth:b,onNextMonth:g}){let v=(0,R.isoDate)(new Date),x=(0,R.visibleDateRange)({pendingStart:n.rangeStart,highlightedIso:(0,R.cellIso)(e[i]),selected:n.selectedRange});return(0,K.jsxs)("div",{className:T.datepicker,"data-aia-datepicker":"",children:[(0,K.jsxs)("div",{className:T.header,children:[(0,K.jsx)("button",{type:"button",tabIndex:-1,className:T.nav,"data-aia-date-prev":"","aria-label":"Previous month",onMouseDown:m=>m.preventDefault(),onClick:b,children:"\u2039"}),(0,K.jsx)("span",{className:T.month,"data-aia-date-month":"","aria-live":"polite",children:(0,R.monthLabel)(r)}),(0,K.jsx)("button",{type:"button",tabIndex:-1,className:T.nav,"data-aia-date-next":"","aria-label":"Next month",onMouseDown:m=>m.preventDefault(),onClick:g,children:"\u203A"})]}),(0,K.jsx)("div",{className:T.weekdays,"aria-hidden":"true",children:R.WEEKDAY_LABELS.map((m,y)=>(0,K.jsx)("span",{className:T.weekday,children:m},Xt[y]))}),(0,K.jsx)("div",{className:T.grid,"data-aia-date-grid":"",children:e.map((m,y)=>(0,K.jsx)(Jt,{option:m,id:`${a}-option-${y}`,index:y,isHighlighted:y===i&&m.is_tappable,isToday:(0,R.cellIso)(m)===v,isPast:(0,R.cellIso)(m)!=null&&(0,R.cellIso)(m)<v,marks:(0,R.dateCellMarks)((0,R.cellIso)(m),{selectedIso:n.selectedIso,range:x}),onSelect:o,onHighlight:s},(0,R.cellIso)(m)??`pad-${y}`))})]})}function Jt({option:e,id:i,index:a,isHighlighted:r,isToday:n,isPast:o,marks:s,onSelect:b,onHighlight:g}){let[v,x]=(0,mt.useState)(!1),m=(0,R.cellDay)(e);if(m==null)return(0,K.jsx)("div",{id:i,role:"option","data-aia-option":"","data-aia-date-cell":"","aria-hidden":"true","aria-selected":!1,tabIndex:-1,className:`${T.cell} ${T.blank}`});let y=()=>{x(!0),b(e),setTimeout(()=>x(!1),170)},P=[T.cell,T.day,o?T.past:"",r?T.highlighted:"",n?T.today:"",s.inRange?T.inRange:"",s.selected?T.selected:"",v?T.pressed:""].filter(Boolean).join(" ");return(0,K.jsx)("div",{id:i,role:"option","data-aia-option":"","data-aia-date-cell":"","aria-selected":r,"aria-label":e.text,tabIndex:0,className:P,onClick:y,onKeyDown:w=>{(w.key==="Enter"||w.key===" ")&&(w.preventDefault(),y())},onMouseEnter:()=>g(a),children:(0,K.jsx)("span",{className:T.number,children:m})})}var Re=require("@magicx-eng/ai-autocomplete-vanilla"),qe=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 {
|
|
1133
1149
|
display: flex;
|
|
1134
1150
|
flex-wrap: wrap;
|
|
1135
1151
|
gap: var(--aia-cluster-gap, 0.5rem);
|
|
@@ -1169,7 +1185,7 @@
|
|
|
1169
1185
|
.aia-cluster[data-justify="around"] {
|
|
1170
1186
|
justify-content: space-around;
|
|
1171
1187
|
}
|
|
1172
|
-
`,document.head.appendChild(e)}var
|
|
1188
|
+
`,document.head.appendChild(e)}var it=require("react/jsx-runtime");function He({gap:e,align:i="center",justify:a="start",noWrap:r=!1,inline:n=!1,className:o,children:s,...b}){let g=e?{"--aia-cluster-gap":e}:void 0,v={className:o?`aia-cluster ${o}`:"aia-cluster","data-align":i,"data-justify":a,"data-nowrap":r||void 0,"data-inline":n||void 0,style:g,...b};return n?(0,it.jsx)("span",{...v,children:s}):(0,it.jsx)("div",{...v,children:s})}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
|
|
1173
1189
|
dropdown's rounded edges. The top inset (--aia-footer-gap) adds breathing
|
|
1174
1190
|
room above the hint/branding row so the footer doesn't butt against the last
|
|
1175
1191
|
option row \u2014 additive to the dropdown's 8px section gap. */
|
|
@@ -1303,7 +1319,7 @@
|
|
|
1303
1319
|
justify-content: flex-end;
|
|
1304
1320
|
}
|
|
1305
1321
|
}
|
|
1306
|
-
`,document.head.appendChild(e)}var ue={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
|
|
1322
|
+
`,document.head.appendChild(e)}var ue={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 gt({isOptionHighlighted:e=!1,isInputEmpty:i=!1}){let{key:a,hint:r}=(0,Re.getFooterHint)(e,i),[n,o]=(0,qe.useState)(Re.ATTRIBUTION_URL);return(0,qe.useEffect)(()=>{o((0,Re.buildAttributionUrl)())},[]),(0,ne.jsx)("footer",{className:ue.footer,"data-aia-footer":"",children:(0,ne.jsxs)(He,{justify:"between",noWrap:!0,className:ue.row,children:[(0,ne.jsxs)(He,{gap:"5px",className:ue.hintGroup,children:[(0,ne.jsx)("kbd",{className:ue.key,children:a}),(0,ne.jsx)("span",{className:ue.hint,children:r})]}),(0,ne.jsxs)("a",{className:ue.brandLink,href:n,target:"_blank",rel:"noopener noreferrer",children:[(0,ne.jsx)("span",{className:ue.brand,children:"AI"}),(0,ne.jsx)("span",{className:ue.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,
|
|
1307
1323
|
no outline. ~28px via 6px padding + 14px text + the 1px border (border-box).
|
|
1308
1324
|
The border is kept as a 1px transparent line so the box stays the same size
|
|
1309
1325
|
as it was when the outline was dashed. */
|
|
@@ -1360,7 +1376,7 @@
|
|
|
1360
1376
|
opacity: 0;
|
|
1361
1377
|
}
|
|
1362
1378
|
}
|
|
1363
|
-
`,document.head.appendChild(e)}var Se={pill:"aia-pill-6Ga7S",fadeIn:"aia-fadeIn-Ux4eQ",rounded:"aia-rounded-y7xA9",skeleton:"aia-skeleton-57P0T",skeletonPulse:"aia-skeletonPulse-xGcUy"};var
|
|
1379
|
+
`,document.head.appendChild(e)}var Se={pill:"aia-pill-6Ga7S",fadeIn:"aia-fadeIn-Ux4eQ",rounded:"aia-rounded-y7xA9",skeleton:"aia-skeleton-57P0T",skeletonPulse:"aia-skeletonPulse-xGcUy"};var vt=require("react/jsx-runtime"),ot={selected:1,first:.7,next:.4,last:.2};function bt({label:e,state:i,rounded:a,loading:r,onClick:n}){let o=[Se.pill,a?Se.rounded:"",r?Se.skeleton:""].filter(Boolean).join(" ");return(0,vt.jsx)("button",{type:"button","data-aia-pill":"","data-aia-loading":r?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:o,style:{opacity:ot[i]},onMouseDown:s=>s.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 {
|
|
1364
1380
|
position: relative;
|
|
1365
1381
|
z-index: 1;
|
|
1366
1382
|
pointer-events: auto;
|
|
@@ -1370,7 +1386,7 @@
|
|
|
1370
1386
|
align-items: center;
|
|
1371
1387
|
vertical-align: middle;
|
|
1372
1388
|
}
|
|
1373
|
-
`,document.head.appendChild(e)}var
|
|
1389
|
+
`,document.head.appendChild(e)}var nt={list:"aia-list-qvLqO"};var Be=require("react/jsx-runtime"),ea=[125,69];function wt(e){return e===0?"first":e===1?"next":"last"}function Ue({pills:e,activePillIndex:i,onSelectPill:a,activeSelected:r,rounded:n,loading:o}){return o&&e.length===0?(0,Be.jsx)("span",{className:nt.list,"data-aia-pill-list-loading":"",children:ea.map((s,b)=>(0,Be.jsx)("span",{"data-aia-pill-skeleton":"",className:`${Se.pill} ${n?Se.rounded:""} ${Se.skeleton}`,style:{width:s,opacity:ot[wt(b)]}},`skel-${s}`))}):(0,Be.jsx)("span",{className:nt.list,"data-aia-pill-list-loading":o?"":void 0,children:e.map((s,b)=>{let g=!!r&&b===i;return(0,Be.jsx)(bt,{label:s.text,state:g?"selected":wt(b),selected:g,rounded:n,loading:o,onClick:()=>a(b)},`${s.type}-${s.text}`)})})}var xt=require("@magicx-eng/ai-autocomplete-vanilla"),je=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
|
|
1374
1390
|
(packages/vanilla/src/styles.css). Same tokens, same defaults, so a consumer
|
|
1375
1391
|
theming one package sees the same result in the other.
|
|
1376
1392
|
|
|
@@ -1384,9 +1400,11 @@
|
|
|
1384
1400
|
display: flex;
|
|
1385
1401
|
flex-direction: column;
|
|
1386
1402
|
gap: 6px;
|
|
1387
|
-
/*
|
|
1388
|
-
|
|
1389
|
-
|
|
1403
|
+
/* The option text sits 10px inside the dropdown's padding edge (the
|
|
1404
|
+
option's own padding), so the section carries the same 10px and its
|
|
1405
|
+
label lands on the option text's left edge \u2014 which the dropdown in turn
|
|
1406
|
+
places under the typed text (--aia-content-inset-left). */
|
|
1407
|
+
padding: 0 10px;
|
|
1390
1408
|
min-width: 0;
|
|
1391
1409
|
}
|
|
1392
1410
|
|
|
@@ -1414,8 +1432,15 @@
|
|
|
1414
1432
|
overflow-y: hidden;
|
|
1415
1433
|
overscroll-behavior-x: contain;
|
|
1416
1434
|
padding-bottom: 2px;
|
|
1435
|
+
/* Pull the row out by the card's own 6px padding so the first card's
|
|
1436
|
+
image tile \u2014 not its hover fill \u2014 starts on the label's left edge, the
|
|
1437
|
+
same way the option's highlight fill hangs outside its text. */
|
|
1438
|
+
margin-inline: -6px;
|
|
1417
1439
|
/* Hide the scrollbar chrome across all three engines while leaving the box
|
|
1418
|
-
scrollable by trackpad,
|
|
1440
|
+
scrollable by trackpad, touch and keyboard. A mouse wheel is vertical and
|
|
1441
|
+
would otherwise have no way through a row with no scrollbar to grab, so
|
|
1442
|
+
ProductStrip.tsx binds the vanilla package's attachProductRowWheel on the
|
|
1443
|
+
row to turn a wheel over it into sideways travel. */
|
|
1419
1444
|
scrollbar-width: none;
|
|
1420
1445
|
-ms-overflow-style: none;
|
|
1421
1446
|
}
|
|
@@ -1542,7 +1567,7 @@
|
|
|
1542
1567
|
var(--aia-option-color-selected, var(--aia-color-text-default, #fff))
|
|
1543
1568
|
);
|
|
1544
1569
|
}
|
|
1545
|
-
`,document.head.appendChild(e)}var Y={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 q=require("react/jsx-runtime");function
|
|
1570
|
+
`,document.head.appendChild(e)}var Y={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 q=require("react/jsx-runtime");function yt({products:e,listboxId:i,onSelect:a,onFocusChange:r,focusable:n=!0}){let o=e.length>0,s=(0,je.useRef)(null);if((0,je.useEffect)(()=>{let g=s.current;if(!(!o||!g))return(0,xt.attachProductRowWheel)(g)},[o]),!o)return null;let b=`${i}-products-label`;return(0,q.jsxs)("section",{className:Y.section,"data-aia-products":"",role:"group","aria-labelledby":b,children:[(0,q.jsx)("div",{className:Y.label,id:b,"data-aia-products-label":"",children:"Products"}),(0,q.jsx)("div",{ref:s,className:Y.row,"data-aia-products-row":"",children:e.map((g,v)=>(0,q.jsx)(ta,{product:g,id:`${i}-product-${v}`,onSelect:a,onFocusChange:r,focusable:n},g.id))})]})}function ta({product:e,id:i,onSelect:a,onFocusChange:r,focusable:n}){let o=s=>{s.metaKey||s.ctrlKey||s.shiftKey||s.altKey||s.button!==0||(s.preventDefault(),a(e))};return(0,q.jsxs)("a",{id:i,className:Y.card,"data-aia-product":"",role:"option","aria-selected":!1,href:e.url,tabIndex:n?0:-1,onClick:o,onKeyDown:s=>{s.key!=="Enter"&&s.key!==" "||(s.preventDefault(),a(e))},onFocus:()=>r?.(!0),onBlur:s=>{s.relatedTarget?.closest("[data-aia-dropdown]")||r?.(!1)},children:[(0,q.jsx)("span",{className:Y.media,"data-aia-product-placeholder":e.imageUrl?void 0:"",children:e.imageUrl?(0,q.jsx)("img",{className:Y.image,src:e.imageUrl,alt:"",loading:"lazy",decoding:"async"}):null}),(0,q.jsxs)("span",{className:Y.body,children:[e.vendor?(0,q.jsx)("span",{className:Y.vendor,children:e.vendor}):null,(0,q.jsx)("span",{className:Y.title,children:e.title}),e.price?(0,q.jsx)("span",{className:Y.price,children:e.price}):null]})]})}var U=require("@magicx-eng/ai-autocomplete-vanilla"),fe=require("react");var kt=require("@magicx-eng/ai-autocomplete-vanilla"),$e=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 {
|
|
1546
1571
|
display: grid;
|
|
1547
1572
|
grid-template-columns: repeat(
|
|
1548
1573
|
auto-fit,
|
|
@@ -1575,9 +1600,19 @@
|
|
|
1575
1600
|
background: var(--aia-scrollbar-thumb, rgba(0, 0, 0, 0.3));
|
|
1576
1601
|
border-radius: 3px;
|
|
1577
1602
|
}
|
|
1578
|
-
`,document.head.appendChild(e)}var
|
|
1603
|
+
`,document.head.appendChild(e)}var Pt=require("react/jsx-runtime");function Ct({min:e="16rem",max:i,gap:a,scroll:r=!1,maxHeight:n,scrollResetKey:o,cols:s,template:b,innerRef:g,className:v,children:x,...m}){let y=(0,$e.useRef)(null);(0,$e.useLayoutEffect)(()=>{if(o===void 0)return;let w=y.current;w&&(w.scrollTop=0)},[o]);let P={"--aia-grid-min":e};return i&&(P["--aia-grid-max"]=i),a&&(P["--aia-grid-gap"]=a),n&&(P["--aia-grid-max-height"]=n),s&&(P.gridTemplateColumns=(0,kt.optionsGridTemplateColumns)(s)),b&&(P.gridTemplateColumns=b),(0,Pt.jsx)("div",{ref:w=>{y.current=w,g?.(w)},className:v?`aia-grid ${v}`:"aia-grid","data-scroll":r||void 0,style:P,...m,children:x})}var De=require("@magicx-eng/ai-autocomplete-vanilla"),me=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 {
|
|
1579
1604
|
position: relative;
|
|
1580
|
-
|
|
1605
|
+
/* Clip, not visible: the entrance rise below runs on the inner content,
|
|
1606
|
+
and a transformed box extends its scroll container's scrollable area.
|
|
1607
|
+
Unclipped, the rows rising 16px from below made the option grid overflow
|
|
1608
|
+
for the length of the entrance whenever nothing sat under the grid to
|
|
1609
|
+
absorb it (product strip, optionsPosition="above"), so a scrollbar
|
|
1610
|
+
flashed in and out and the columns shifted sideways by its width. The
|
|
1611
|
+
cell's own children never paint outside it (the streak layer clips
|
|
1612
|
+
itself; press and highlight stay inside the box), so nothing is lost.
|
|
1613
|
+
\`hidden\` first for engines without \`clip\`. */
|
|
1614
|
+
overflow: hidden;
|
|
1615
|
+
overflow: clip;
|
|
1581
1616
|
display: flex;
|
|
1582
1617
|
/* Top-align so single-line and multi-line options in the same row share
|
|
1583
1618
|
the same baseline at the top edge of the cell. */
|
|
@@ -1595,11 +1630,10 @@
|
|
|
1595
1630
|
padding: 8px 10px;
|
|
1596
1631
|
/* Entrance: fade in while rising into place, each row a beat after the one
|
|
1597
1632
|
before it (--aia-option-enter-delay is set inline per row from the core's
|
|
1598
|
-
optionEnterDelayMs). The
|
|
1599
|
-
the
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
aia-riseIn-etXZT 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
|
1633
|
+
optionEnterDelayMs). The fade is here; the rise is on the inner content
|
|
1634
|
+
(see the overflow note above). The durations and distance mirror
|
|
1635
|
+
OPTION_ENTER_* in the core's derive/optionsEntrance.ts \u2014 change both together. */
|
|
1636
|
+
animation: aia-fadeIn-I8u35 150ms ease-out both;
|
|
1603
1637
|
animation-delay: var(--aia-option-enter-delay, 0ms);
|
|
1604
1638
|
}
|
|
1605
1639
|
|
|
@@ -1616,7 +1650,8 @@
|
|
|
1616
1650
|
}
|
|
1617
1651
|
|
|
1618
1652
|
@media (prefers-reduced-motion: reduce) {
|
|
1619
|
-
.aia-item-d4vpD
|
|
1653
|
+
.aia-item-d4vpD,
|
|
1654
|
+
.aia-content-T-Qba {
|
|
1620
1655
|
animation-duration: 0s;
|
|
1621
1656
|
animation-delay: 0s;
|
|
1622
1657
|
}
|
|
@@ -1625,6 +1660,10 @@
|
|
|
1625
1660
|
.aia-content-T-Qba {
|
|
1626
1661
|
position: relative;
|
|
1627
1662
|
z-index: 2;
|
|
1663
|
+
/* The entrance rise (the cell above keeps the fade). Inherits the cell's
|
|
1664
|
+
per-row delay through the custom property. */
|
|
1665
|
+
animation: aia-riseIn-etXZT 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
|
1666
|
+
animation-delay: var(--aia-option-enter-delay, 0ms);
|
|
1628
1667
|
}
|
|
1629
1668
|
|
|
1630
1669
|
.aia-tappable-70KcX {
|
|
@@ -1766,7 +1805,7 @@
|
|
|
1766
1805
|
filter: brightness(0.55);
|
|
1767
1806
|
}
|
|
1768
1807
|
}
|
|
1769
|
-
`,document.head.appendChild(e)}var X={item:"aia-item-d4vpD",fadeIn:"aia-fadeIn-I8u35",
|
|
1808
|
+
`,document.head.appendChild(e)}var X={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"};var Ie=require("react/jsx-runtime");function St({option:e,isHighlighted:i,onSelect:a,onHighlight:r,id:n,loading:o,showIcon:s=!0,scrollHint:b,enterDelayMs:g=0}){let[v]=(0,me.useState)(g),[x,m]=(0,me.useState)(!1),y=(0,me.useMemo)(()=>s&&e.icon_svg?(0,De.sanitizeOptionIconSvg)(e.icon_svg):null,[s,e.icon_svg]),P=(0,me.useRef)(void 0);(0,me.useEffect)(()=>()=>clearTimeout(P.current),[]);let w=()=>{o||!e.is_tappable||x||(m(!0),a(e),clearTimeout(P.current),P.current=setTimeout(()=>m(!1),170))},A=[X.item,i&&!o?X.highlighted:"",e.is_tappable?X.tappable:X.nonTappable,x?X.pressed:"",b?X.scrollHint:""].filter(Boolean).join(" ");return(0,Ie.jsx)("div",{id:n,role:"option","data-aia-option":"","data-aia-loading":o?"":void 0,"data-aia-icon":y&&e.icon?e.icon:void 0,"aria-selected":i,className:A,style:{[De.OPTION_ENTER_DELAY_VAR]:`${v}ms`},tabIndex:o||!e.is_tappable?-1:0,onClick:w,onKeyDown:M=>{!o&&e.is_tappable&&(M.key==="Enter"||M.key===" ")&&(M.preventDefault(),w())},onMouseEnter:!o&&e.is_tappable?r:void 0,children:(0,Ie.jsxs)("span",{className:X.content,children:[y&&(0,Ie.jsx)("span",{className:`${X.icon} magicx-aia-option-icon`,"aria-hidden":"true",dangerouslySetInnerHTML:{__html:y}}),(0,Ie.jsx)("span",{className:X.text,children:(0,De.optionLabel)(e)}),e.tag&&(0,Ie.jsx)("span",{className:X.tag,children:e.tag})]})})}var rt=require("react/jsx-runtime");function aa(){let[e,i]=(0,fe.useState)(U.isOptionsGridMobileViewport);return(0,fe.useEffect)(()=>{if(typeof window>"u"||!window.matchMedia)return;let a=window.matchMedia(U.OPTIONS_GRID_MOBILE_QUERY),r=()=>i(a.matches);return r(),a.addEventListener("change",r),()=>a.removeEventListener("change",r)},[]),e}function Et({options:e,activeIndex:i,onSelect:a,onHighlight:r,listboxId:n,loading:o,groupKey:s="",optionsPosition:b="below",showIcons:g=!0}){let v=aa(),x=(0,fe.useRef)(null),[m,y]=(0,fe.useState)(null);(0,fe.useLayoutEffect)(()=>{let w=x.current,M=w&&!o&&(0,U.needsOptionsGridMeasurement)(e.length,v)?(0,U.measureOptionsGrid)(w):null;y(M?(0,U.planOptionsGrid)(e.length,v,M.rowWidths,M.gridWidth):null)},[e,v,o]);let P=m??(0,U.planOptionsGrid)(e.length,v,null,null);return(0,rt.jsx)(Ct,{min:"250px",max:"1fr",gap:"0",scroll:!0,scrollResetKey:s,template:P.template,maxHeight:P.maxHeight,innerRef:w=>{x.current=w},"data-aia-group":s,children:e.map((w,A)=>(0,rt.jsx)(St,{option:w,isHighlighted:A===i,onSelect:a,onHighlight:()=>r(A),id:`${n}-option-${A}`,loading:o,showIcon:g,scrollHint:!o&&P.scrollHintIndices.includes(A),enterDelayMs:o?0:(0,U.optionEnterDelayMs)(A,P.cols,e.length,b)},`${s}\0${w.text}`))})}if(typeof document<"u"&&!document.getElementById("ac-style-8414cd5f")){let e=document.createElement("style");e.id="ac-style-8414cd5f",e.textContent=`.aia-stack {
|
|
1770
1809
|
display: flex;
|
|
1771
1810
|
flex-direction: column;
|
|
1772
1811
|
gap: var(--aia-stack-space, 0.5rem);
|
|
@@ -1781,7 +1820,7 @@
|
|
|
1781
1820
|
align-items: end;
|
|
1782
1821
|
}
|
|
1783
1822
|
/* data-align="stretch" is the flex default \u2014 no rule needed. */
|
|
1784
|
-
`,document.head.appendChild(e)}var
|
|
1823
|
+
`,document.head.appendChild(e)}var Tt=require("react/jsx-runtime");function It({space:e,align:i="stretch",className:a,children:r,...n}){let o=e?{"--aia-stack-space":e}:void 0;return(0,Tt.jsx)("div",{className:a?`aia-stack ${a}`:"aia-stack","data-align":i,style:o,...n,children:r})}var O=require("react/jsx-runtime"),ia=[159,119,164],oa=()=>{},At=()=>{};function na(e){let i=()=>typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches,[a,r]=(0,J.useState)(i);if((0,J.useEffect)(()=>{if(e!=="auto"||typeof window>"u"||typeof window.matchMedia!="function")return;let n=window.matchMedia("(prefers-color-scheme: dark)"),o=()=>r(n.matches);return n.addEventListener("change",o),()=>n.removeEventListener("change",o)},[e]),e!==void 0)return e==="auto"?a?"dark":"light":e}function ra(e,i){let a=(0,J.useRef)(null);(0,J.useEffect)(()=>{let r=e.current,n=i.current;if(!r||!n)return;let o=r.querySelector(".aia-grid[data-scroll]");if(a.current&&a.current.grid!==o&&(a.current.controller.destroy(),a.current=null),o&&!a.current){a.current={grid:o,controller:(0,Le.attachScrollArrow)({dropdown:r,grid:o,button:n})};return}a.current?.controller.update()}),(0,J.useEffect)(()=>()=>{a.current?.controller.destroy(),a.current=null},[])}function Ve({suggestions:e,activeIndex:i,onSelect:a,onHighlight:r,isOpen:n,id:o,className:s,pills:b,onPillClick:g,showPills:v=!0,onSkip:x,showSkipButton:m=!0,showOptionIcons:y=!0,skipDisabled:P=!1,activeSelected:w=!1,isLoading:A=!1,isInputEmpty:M=!1,products:N,onProductSelect:G,onProductFocusChange:re,formatType:W="options",dateView:I=null,selectedDateIso:te=null,selectedDateRange:ge=null,dateRangeStart:se=null,onPreviousMonth:h,onNextMonth:be,optionsPosition:H="below",mode:ve}){let le=na(ve),ae=le!==void 0,de=(0,J.useRef)(null),ie=(0,J.useRef)(null);ra(de,ie);let ce=e[0]?.options??[],pe=!!(b&&b.length>0&&g),_=!!(N&&N.length>0),$=n&&(ce.length>0||v&&pe||A||_),Z={suggestions:e,activeIndex:i,pills:b,showPills:v,showSkipButton:m,showOptionIcons:y,skipDisabled:P,activeSelected:w,isLoading:A,isInputEmpty:M,products:N,formatType:W,dateView:I,selectedDateIso:te,selectedDateRange:ge,dateRangeStart:se},V=(0,J.useRef)(Z);$&&(V.current=Z);let t=$?Z:V.current,p=t.suggestions[0],u=p?.options??[],k=t.activeIndex>=0&&!!u[t.activeIndex]?.is_tappable,l=!!(t.pills&&t.pills.length>0&&g),z=t.showPills&&l,oe=t.showPills&&!l&&t.isLoading,B=z||oe,d=l&&t.showSkipButton&&!t.isInputEmpty&&!!x,we=t.pills?.[0]?.text,Te=(0,Le.isCalendarFormat)(t.formatType)&&t.dateView!=null,xe=u.length>0&&!Te,Ae=u.length>0&&Te&&!t.isLoading,ye=t.isLoading&&!xe&&!Ae,ke=t.products??[];return(0,O.jsxs)("div",{ref:de,id:o,role:"listbox","data-aia-dropdown":"","data-options-position":H,"data-mode":le,"data-aia-loading":t.isLoading?"":void 0,"data-aia-has-products":ke.length>0?"":void 0,className:`${ae?"magicx-aia ":""}${he.dropdown} ${$?he.visible:""} ${s??""}`,onMouseDown:F=>F.preventDefault(),children:[(0,O.jsxs)(It,{space:"8px",children:[(B||d)&&(0,O.jsxs)(He,{noWrap:!0,className:he.pillBar,"data-aia-pillbar":"",children:[B&&(0,O.jsx)("span",{className:he.pillScroll,"data-aia-pill-scroll":"",children:(0,O.jsx)(Ue,{pills:t.pills??[],activePillIndex:0,activeSelected:t.activeSelected,onSelectPill:g??(()=>{}),rounded:!0,loading:t.isLoading})}),d&&(0,O.jsx)("button",{type:"button",tabIndex:-1,className:he.skip,"data-aia-skip":"",disabled:t.isLoading||t.skipDisabled,"aria-label":we?`Skip ${we}`:"Skip",onClick:x,children:"skip"})]}),xe&&(0,O.jsx)(Et,{options:u,activeIndex:t.activeIndex,onSelect:a,onHighlight:r,listboxId:o,loading:t.isLoading,groupKey:p?`${p.type} ${p.text}`:"",optionsPosition:H,showIcons:t.showOptionIcons}),Ae&&t.dateView&&(0,O.jsx)(ft,{options:u,activeIndex:t.activeIndex,listboxId:o,view:t.dateView,selection:{selectedIso:t.selectedDateIso??null,selectedRange:t.selectedDateRange??null,rangeStart:t.dateRangeStart??null},onSelect:a,onHighlight:r,onPreviousMonth:h??At,onNextMonth:be??At}),ye&&(0,O.jsx)("div",{className:he.skeletonBars,"data-aia-skeleton-bars":"",children:ia.map(F=>(0,O.jsx)("span",{className:he.skeletonBar,style:{width:F}},`bar-${F}`))}),(0,O.jsx)(yt,{products:ke,listboxId:o,onSelect:G??oa,onFocusChange:re,focusable:$}),(0,O.jsx)(gt,{isOptionHighlighted:k,isInputEmpty:t.isInputEmpty})]}),(0,O.jsx)("button",{ref:ie,type:"button",tabIndex:-1,className:he.scrollArrow,"data-aia-scroll-arrow":"","aria-label":Le.SCROLL_ARROW_LABEL,"aria-hidden":"true",children:(0,O.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,O.jsx)("path",{d:"M4 6.5 8 10.5l4-4"})})})]})}var Oe=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 {
|
|
1785
1824
|
flex-shrink: 0;
|
|
1786
1825
|
width: 32px;
|
|
1787
1826
|
height: 32px;
|
|
@@ -1834,5 +1873,5 @@
|
|
|
1834
1873
|
);
|
|
1835
1874
|
cursor: default;
|
|
1836
1875
|
}
|
|
1837
|
-
`,document.head.appendChild(e)}var Tt={submitButton:"aia-submitButton-otz7H"};var Ve=require("react/jsx-runtime");function At({disabled:e,onClick:i}){return(0,Ve.jsx)("button",{type:"button","data-aia-submit":"",className:Tt.submitButton,disabled:e,onClick:a=>{a.stopPropagation(),i()},"aria-label":"Submit",children:(0,Ve.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,Ve.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var Me=require("@magicx-eng/ai-autocomplete-vanilla"),S=require("react");var rt=require("react");function Rt(e){let i=(0,rt.useRef)(e);i.current=e;let a=Object.keys(e??{}).sort().join("\0"),r=(0,rt.useRef)({key:"",overrides:void 0});if(r.current.key!==a){let n={};for(let o of Object.keys(e??{})){let s=(g,w,b)=>{let x=i.current?.[o];return x?x(g,w,b):[]};n[o]=s}r.current={key:a,overrides:e?n:void 0}}return{overrides:r.current.overrides,key:a}}var st=require("react");function Dt(e){let i=(0,st.useRef)(e);i.current=e;let a=(0,st.useRef)(null);a.current===null&&(a.current={fetch:(n,o)=>{let s=i.current;return s?s.fetch(n,o):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 na={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 Qe({onSubmit:e,onResult:i,onError:a,optionOverrides:r,maskCompletedText:n,apiConfig:o,additionalContext:s,columns:g=2,dropdownTrigger:w,optionsPosition:b,closeDropdownOnBlur:x,showNonTappableOptions:m,showOptionIcons:y,showSkipButton:P,showProducts:v,onFocus:A,onBlur:M,value:N,completedParams:G,onChange:re,onParamsChange:W,products:I,onProductSelect:te,source:ge,setCursor:se}){let h=(0,S.useRef)(null),[be,H]=(0,S.useState)(null),ve=(0,S.useRef)(e);ve.current=e;let le=(0,S.useRef)(i);le.current=i;let ae=(0,S.useRef)(a);ae.current=a;let de=(0,S.useRef)(re);de.current=re;let ie=(0,S.useRef)(W);ie.current=W;let ce=(0,S.useRef)(A);ce.current=A;let pe=(0,S.useRef)(M);pe.current=M;let _=(0,S.useRef)(se);_.current=se;let $=(0,S.useRef)(te);$.current=te;let Z=Dt(I),V=Rt(r);(0,S.useEffect)(()=>{if(typeof document>"u")return;let f=new Me.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:o,additionalContext:s,optionOverrides:V.overrides,maskCompletedText:n,columns:g,dropdownTrigger:w,optionsPosition:b,closeDropdownOnBlur:x,showNonTappableOptions:m,showProducts:v,source:ge,value:N,completedParams:G,onSubmit:(...L)=>ve.current?.(...L),onResult:(...L)=>le.current?.(...L),onError:(...L)=>ae.current?.(...L),onChange:(...L)=>de.current?.(...L),onParamsChange:(...L)=>ie.current?.(...L),onFocus:()=>ce.current?.(),onBlur:()=>pe.current?.(),onProductSelect:L=>$.current?.(L),setCursor:L=>_.current?.(L),products:Z.config});h.current=f,H(f.getState());let Q=f.subscribe(L=>H(L));return()=>{Q(),f.destroy(),h.current===f&&(h.current=null)}},[]),(0,S.useEffect)(()=>{N!==void 0&&h.current?.setValue(N)},[N]),(0,S.useEffect)(()=>{G!==void 0&&h.current?.setCompletedParams(G)},[G]);let t=JSON.stringify(o??null),p;try{p=JSON.stringify(s??null)}catch{p="[unstringifiable]"}(0,S.useEffect)(()=>{h.current?.update({apiConfig:o,additionalContext:s,optionOverrides:V.overrides,dropdownTrigger:w,optionsPosition:b,closeDropdownOnBlur:x,showNonTappableOptions:m,showProducts:v})},[t,p,V.key,w,b,x,m,v]);let u=(0,S.useRef)(!1);(0,S.useEffect)(()=>{if(!u.current){u.current=!0;return}h.current?.update({products:Z.config})},[Z.enabled]);let k=(0,S.useRef)(null);k.current===null&&(k.current={handleTextChange:f=>h.current?.handleTextChange(f),handleKeyDown:f=>{let Q="nativeEvent"in f?f.nativeEvent:f;h.current?.handleKeyDown(Q)},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 l=k.current,z=(0,S.useCallback)(f=>{let Q=f.target.value,Xe=Q.length>0&&!f.nativeEvent?.isComposing&&Q[0]!==Q[0].toUpperCase()?Q[0].toUpperCase()+Q.slice(1):Q;h.current?.handleTextChange(Xe)},[]),oe=(0,S.useCallback)(f=>{h.current?.handleKeyDown(f.nativeEvent)},[]),B=h.current,d=be??na,we=N!==void 0?N:d.text,Te=G!==void 0?G:d.completedParams,xe=d.actionableSuggestions,Ae=xe[0],ye=B?.listboxId??"",ke=d.activeDropdownIndex>=0&&B?`${ye}-option-${d.activeDropdownIndex}`:void 0,F=d.editingParam,Ce=d.editingIdentified,ze=F?{type:F.suggestionType,text:F.suggestionPlaceholder,required:!0,options:F.options}:Ce?{type:Ce.type,text:(0,Me.identifiedParamLabel)(Ce.type),required:!0,options:[]}:null,Fe=ze??Ae,Ye=ze?[ze]:xe,Ne=(0,Me.dateSelectionFor)(d),Ke=!B||d.isLoading&&!d.editingParam&&!d.inSelectionAnimation||d.isSearchingOptions;return{completedParams:Te,skippedParams:d.skippedParams,identifiedParams:d.identifiedParams,suggestionPills:xe,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:Ke,isFocused:d.isFocused,isDropdownOpen:d.isDropdownOpen,isActivePillSelected:d.isActivePillSelected,placeholderText:d.placeholderText,listboxId:ye,error:d.error,products:d.products,customFields:d.customFields,selectProduct:l.selectProduct,handleTextChange:l.handleTextChange,handleKeyDown:l.handleKeyDown,setFocused:l.setFocused,editingParam:F,editingIdentified:Ce,editingAnchor:d.editingAnchor,caretOffset:d.caretOffset,startEditingParam:l.startEditingParam,exitEditMode:l.exitEditMode,handleCaretAfterInput:l.handleCaretAfterInput,handleCaretMove:l.handleCaretMove,replaceEditingRange:l.replaceEditingRange,inputProps:{value:we,placeholder:d.placeholderText||void 0,onChange:z,onKeyDown:oe,onFocus:l.handleFocus,onBlur:l.handleBlur,role:"combobox","aria-expanded":d.isDropdownOpen,"aria-activedescendant":ke,"aria-autocomplete":"list","aria-controls":ye},reset:l.reset,dropdownProps:{suggestions:Fe?[{...Fe,options:d.filteredOptions}]:[],activeIndex:d.activeDropdownIndex,onSelect:l.selectOption,onHighlight:l.setActiveDropdownIndex,isOpen:d.isDropdownOpen,id:ye,pills:Ye,activeSelected:d.isActivePillSelected,onPillClick:l.setActivePill,onSkip:l.skipActivePill,showSkipButton:(P??!0)&&!F&&!Ce,showOptionIcons:y??!0,skipDisabled:d.inSelectionAnimation,isLoading:Ke,isInputEmpty:we.trim().length===0,products:d.products,onProductSelect:l.selectProduct,onProductFocusChange:l.setFocused,formatType:d.activeFormatType,dateView:d.dateView,selectedDateIso:Ne.selectedIso,selectedDateRange:Ne.selectedRange,dateRangeStart:Ne.rangeStart,onPreviousMonth:l.showPreviousMonth,onNextMonth:l.showNextMonth,optionsPosition:b??"below"}}}var j=require("@magicx-eng/ai-autocomplete-vanilla"),C=require("react"),Ze;function ra(){if(Ze!==void 0)return Ze;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Ze=e.contentEditable==="plaintext-only",Ze}function Lt(e){let{segments:i,showChipIcons:a=!0,newParamId:r,editingParam:n,editingIdentified:o,editingAnchor:s,caretOffset:g,placeholderText:w,isFocused:b,isDropdownOpen:x,listboxId:m,activeDescendantId:y,autoFocus:P,handleTextChange:v,handleKeyDown:A,handleCaretAfterInput:M,handleCaretMove:N,startEditingParam:G,replaceEditingRange:re,setFocused:W}=e,I=(0,C.useRef)(null),te=(0,C.useRef)(!1),ge=(0,C.useRef)(""),se=(0,C.useRef)(""),h=(0,C.useRef)(null),be=(0,C.useRef)(0);h.current=g,(0,C.useEffect)(()=>{if(!P)return;let t=I.current;if(!t)return;document.activeElement===t?W(!0):t.focus();let p=t.ownerDocument??document,u=p.getSelection(),k=u&&u.rangeCount>0&&t.contains(u.anchorNode);if(u&&!k){let l=p.createRange();l.selectNodeContents(t),l.collapse(!0),u.removeAllRanges(),u.addRange(l)}},[P,W]),(0,C.useEffect)(()=>{let t=I.current;if(!t)return;let p=t.ownerDocument??document,u=()=>{let k=p.getSelection();if(!k||k.rangeCount===0||!k.anchorNode||!t.contains(k.anchorNode))return;let l=k.anchorNode,z=l.nodeType===Node.ELEMENT_NODE?l:l.parentElement,B=(k.isCollapsed?z?.closest("strong[data-param-id]"):null)?.dataset.paramId??null,d=n?.id??o?.id??null;if(B&&B!==d){G(B);return}performance.now()-be.current<50||N((0,j.getCursorOffset)(t))};return p.addEventListener("selectionchange",u),()=>p.removeEventListener("selectionchange",u)},[n,o,G,N]),(0,C.useLayoutEffect)(()=>{let t=I.current;t&&(0,j.renderEditableContent)({input:t,segments:i,newParamId:r,editingParamId:n?.id??null,placeholderText:w??"",isFocused:b,showChipIcons:a})},[i,r,n,w,b,a]),(0,C.useLayoutEffect)(()=>{let t=ge.current,p=r??"";if(ge.current=p,!p||p===t)return;let u=I.current;if(!u)return;u.focus();let k=h.current??(0,j.plainTextLength)(u);(0,j.setCursorOffset)(u,k)},[r]),(0,C.useLayoutEffect)(()=>{let t=se.current,p=n?.id??"";if(se.current=p,!p||p===t||s==null)return;let u=I.current;u&&(0,j.setCursorOffset)(u,s)},[n,s]);let H=(0,C.useCallback)(()=>{if(te.current)return;let t=I.current;if(!t)return;let p=(0,j.extractPlainText)(t),k=p.length>0&&p[0]!==p[0].toUpperCase()?p[0].toUpperCase()+p.slice(1):p;v(k)},[v]),ve=(0,C.useCallback)(()=>{be.current=performance.now(),H();let t=I.current;t&&M((0,j.getCursorOffset)(t))},[H,M]);(0,C.useEffect)(()=>{let t=I.current;if(!t)return;let p=u=>{let k=u,l=k.inputType;if(l==="insertParagraph"||l==="insertLineBreak"||l==="insertFromDrop"){u.preventDefault();return}if(l.startsWith("insert")||l.startsWith("delete")){let z=l.startsWith("delete")?"":k.data??"";re(z)&&u.preventDefault()}};return t.addEventListener("beforeinput",p),()=>t.removeEventListener("beforeinput",p)},[re]);let le=(0,C.useCallback)(()=>{te.current=!0},[]),ae=(0,C.useCallback)(()=>{te.current=!1,H()},[H]),de=(0,C.useCallback)(t=>{t.preventDefault();let p=I.current;if(!p)return;let u=(t.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!u)return;let k=p.ownerDocument??document,l=k.getSelection();if(!l||l.rangeCount===0)return;let z=l.getRangeAt(0);if(!p.contains(z.startContainer))return;z.deleteContents();let oe=k.createTextNode(u);z.insertNode(oe),z.setStartAfter(oe),z.collapse(!0),l.removeAllRanges(),l.addRange(z),H()},[H]),ie=(0,C.useCallback)(t=>A(t),[A]),ce=(0,C.useCallback)(()=>W(!0),[W]),pe=(0,C.useCallback)(()=>W(!1),[W]),_=(0,C.useCallback)(()=>I.current?.focus(),[]),$=(0,C.useCallback)(()=>I.current?.blur(),[]),Z=(0,C.useCallback)(()=>{let t=I.current;return t?(0,j.extractPlainText)(t):""},[]),V=ra()?"plaintext-only":"true";return{inputRef:I,editorProps:{ref:I,contentEditable:V,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":m,"aria-expanded":x,"aria-activedescendant":y,spellCheck:!0,enterKeyHint:"send",onInput:ve,onKeyDown:ie,onCompositionStart:le,onCompositionEnd:ae,onPaste:de,onFocus:ce,onBlur:pe},getPlainText:Z,focus:_,blur:$}}var ee=require("react/jsx-runtime");function sa(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var Mt=(0,D.forwardRef)(function({onSubmit:i,onResult:a,onError:r,optionOverrides:n,maskCompletedText:o,className:s,apiConfig:g,additionalContext:w,columns:b,pillPlacement:x="dropdown",mode:m="auto",optionsPosition:y="below",animations:P=!0,dropdownTrigger:v,closeDropdownOnBlur:A,showNonTappableOptions:M,showOptionIcons:N=!0,showChipIcons:G=!0,showSkipButton:re,showProducts:W,autoFocus:I=!0,onFocus:te,onBlur:ge,value:se,completedParams:h,onChange:be,onParamsChange:H,products:ve,onProductSelect:le,submitButton:ae},de){let ie=(0,D.useRef)(null),ce=(0,D.useRef)(null),pe=(0,D.useRef)(()=>{}),_=(0,D.useRef)(null),$=(0,D.useRef)(null);(0,D.useEffect)(()=>{let E=ie.current;if(E)return _.current?_.current.setMode(m):_.current=new Oe.ModeController(E,m),()=>{_.current?.destroy(),_.current=null}},[m]);let Z=(0,D.useCallback)(E=>{let Pe=$.current?.current;Pe&&(Pe.focus(),(0,Oe.setCursorOffset)(Pe,E))},[]),{completedParams:V,skippedParams:t,identifiedParams:p,isReady:u,customFields:k,suggestionPills:l,setActivePill:z,skipActivePill:oe,segments:B,newParamId:d,clearNewParamId:we,placeholderText:Te,isFocused:xe,isDropdownOpen:Ae,isActivePillSelected:ye,isLoading:ke,activeIndex:F,listboxId:Ce,handleTextChange:ze,handleKeyDown:Fe,setFocused:Ye,editingParam:Ne,editingIdentified:Ke,editingAnchor:f,caretOffset:Q,startEditingParam:L,handleCaretAfterInput:Xe,handleCaretMove:Ot,replaceEditingRange:zt,dropdownProps:Nt,reset:Ge}=Qe({onSubmit:E=>pe.current(E),onResult:a,onError:r,optionOverrides:n,maskCompletedText:o,apiConfig:g,additionalContext:w,columns:b,dropdownTrigger:v,optionsPosition:y,closeDropdownOnBlur:A,showNonTappableOptions:M,showOptionIcons:N,showSkipButton:re,showProducts:W,onFocus:te,onBlur:ge,value:se,completedParams:h,onChange:be,onParamsChange:H,products:ve,onProductSelect:le,source:"full-sdk",setCursor:Z});(0,D.useEffect)(()=>{if(!d)return;let E=window.setTimeout(()=>we(),650);return()=>window.clearTimeout(E)},[d,we]);let Ht=F>=0?`${Ce}-option-${F}`:void 0,{inputRef:Je,editorProps:Bt,focus:We,blur:lt,getPlainText:dt}=Lt({segments:B,newParamId:d,editingParam:Ne,editingIdentified:Ke,editingAnchor:f,caretOffset:Q,placeholderText:Te,isFocused:xe,showChipIcons:G,isDropdownOpen:Ae,listboxId:Ce,activeDescendantId:Ht,autoFocus:I,handleTextChange:ze,handleKeyDown:Fe,handleCaretAfterInput:Xe,handleCaretMove:Ot,startEditingParam:L,replaceEditingRange:zt,setFocused:Ye});$.current=Je,(0,D.useLayoutEffect)(()=>{let E=ce.current,Pe=Je.current;if(!E||!Pe)return;let ct=()=>{let ht=E.firstElementChild;if(!ht)return;let Wt=ht.getBoundingClientRect(),_t=Pe.getBoundingClientRect();Wt.top>=_t.bottom-2?E.setAttribute("data-aia-pill-wrapped",""):E.removeAttribute("data-aia-pill-wrapped")};ct();let pt=new ResizeObserver(ct);return pt.observe(Pe),()=>pt.disconnect()},[B,l.length,ke,Je]),(0,D.useImperativeHandle)(de,()=>({focus:We,blur:lt,reset:Ge,setMode:E=>_.current?.setMode(E),skipActivePill:oe}),[We,lt,Ge,oe]);let _e=!!B.length||V.length>0,et=(0,D.useCallback)(()=>{if(!_e)return;let E=dt();i((0,Oe.buildSubmitResult)(E,V,t,{identifiedParams:p,isReady:u,customFields:k})),Ge()},[_e,V,t,p,u,k,i,Ge,dt]);pe.current=et;let Ft=(0,D.useCallback)(E=>{E.target?.closest("[data-aia-pill]")||We()},[We]),Kt=x==="inline",Gt=x==="dropdown";return(0,ee.jsxs)("div",{ref:ie,className:`magicx-aia ${Ee.container} ${s??""}`,"data-pill-placement":x,"data-options-position":y,"data-animations":P?"on":"off","data-mode":sa(m),children:[(0,ee.jsx)($e,{...Nt,showPills:Gt}),(0,ee.jsxs)("div",{className:Ee.inputWrapper,"data-aia-input-wrapper":"",onClick:Ft,children:[(0,ee.jsxs)("div",{className:Ee.editorArea,"data-aia-editor":"",children:[(0,ee.jsx)("div",{...Bt,className:Ee.input,"data-aia-input":""}),Kt&&(ke||l.length>0)&&(0,ee.jsx)("span",{ref:ce,className:Ee.pillListContainer,"data-aia-pill-list-container":"",children:(0,ee.jsx)(Ue,{pills:l,activePillIndex:0,activeSelected:ye,onSelectPill:z,loading:ke})})]}),ae===null?null:ae===void 0?(0,ee.jsx)(At,{disabled:!_e,onClick:et}):(0,ee.jsx)("span",{"data-aia-submit":"","data-aia-submit-slot":"",className:Ee.submitSlot,onClick:E=>{_e&&(E.stopPropagation(),et())},children:ae})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,DATE_RANGE_META_END,DATE_RANGE_META_START,PRODUCT_PATH_PREFIX,WEEKDAY_LABELS,buildSubmitResult,cellDay,cellIso,dateCellMarks,formatDate,formatDateRange,isoDate,monthLabel,optionLabel,parseDate,parseLooseDate,parseLooseDateRange,productFromMatchedItem,productsFromCustomFields,sanitizeOptionIconSvg,selectedRangeFor,useAIAutocomplete,visibleDateRange,withSkippedParams});
|
|
1876
|
+
`,document.head.appendChild(e)}var Rt={submitButton:"aia-submitButton-otz7H"};var Qe=require("react/jsx-runtime");function Dt({disabled:e,onClick:i}){return(0,Qe.jsx)("button",{type:"button","data-aia-submit":"",className:Rt.submitButton,disabled:e,onClick:a=>{a.stopPropagation(),i()},"aria-label":"Submit",children:(0,Qe.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,Qe.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var Me=require("@magicx-eng/ai-autocomplete-vanilla"),S=require("react");var st=require("react");function Lt(e){let i=(0,st.useRef)(e);i.current=e;let a=Object.keys(e??{}).sort().join("\0"),r=(0,st.useRef)({key:"",overrides:void 0});if(r.current.key!==a){let n={};for(let o of Object.keys(e??{})){let s=(b,g,v)=>{let x=i.current?.[o];return x?x(b,g,v):[]};n[o]=s}r.current={key:a,overrides:e?n:void 0}}return{overrides:r.current.overrides,key:a}}var lt=require("react");function Mt(e){let i=(0,lt.useRef)(e);i.current=e;let a=(0,lt.useRef)(null);a.current===null&&(a.current={fetch:(n,o)=>{let s=i.current;return s?s.fetch(n,o):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 sa={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:i,onError:a,optionOverrides:r,maskCompletedText:n,apiConfig:o,additionalContext:s,columns:b=2,dropdownTrigger:g,optionsPosition:v,closeDropdownOnBlur:x,showNonTappableOptions:m,showOptionIcons:y,showSkipButton:P,showProducts:w,onFocus:A,onBlur:M,value:N,completedParams:G,onChange:re,onParamsChange:W,products:I,onProductSelect:te,source:ge,setCursor:se}){let h=(0,S.useRef)(null),[be,H]=(0,S.useState)(null),ve=(0,S.useRef)(e);ve.current=e;let le=(0,S.useRef)(i);le.current=i;let ae=(0,S.useRef)(a);ae.current=a;let de=(0,S.useRef)(re);de.current=re;let ie=(0,S.useRef)(W);ie.current=W;let ce=(0,S.useRef)(A);ce.current=A;let pe=(0,S.useRef)(M);pe.current=M;let _=(0,S.useRef)(se);_.current=se;let $=(0,S.useRef)(te);$.current=te;let Z=Mt(I),V=Lt(r);(0,S.useEffect)(()=>{if(typeof document>"u")return;let f=new Me.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:o,additionalContext:s,optionOverrides:V.overrides,maskCompletedText:n,columns:b,dropdownTrigger:g,optionsPosition:v,closeDropdownOnBlur:x,showNonTappableOptions:m,showProducts:w,source:ge,value:N,completedParams:G,onSubmit:(...L)=>ve.current?.(...L),onResult:(...L)=>le.current?.(...L),onError:(...L)=>ae.current?.(...L),onChange:(...L)=>de.current?.(...L),onParamsChange:(...L)=>ie.current?.(...L),onFocus:()=>ce.current?.(),onBlur:()=>pe.current?.(),onProductSelect:L=>$.current?.(L),setCursor:L=>_.current?.(L),products:Z.config});h.current=f,H(f.getState());let Q=f.subscribe(L=>H(L));return()=>{Q(),f.destroy(),h.current===f&&(h.current=null)}},[]),(0,S.useEffect)(()=>{N!==void 0&&h.current?.setValue(N)},[N]),(0,S.useEffect)(()=>{G!==void 0&&h.current?.setCompletedParams(G)},[G]);let t=JSON.stringify(o??null),p;try{p=JSON.stringify(s??null)}catch{p="[unstringifiable]"}(0,S.useEffect)(()=>{h.current?.update({apiConfig:o,additionalContext:s,optionOverrides:V.overrides,dropdownTrigger:g,optionsPosition:v,closeDropdownOnBlur:x,showNonTappableOptions:m,showProducts:w})},[t,p,V.key,g,v,x,m,w]);let u=(0,S.useRef)(!1);(0,S.useEffect)(()=>{if(!u.current){u.current=!0;return}h.current?.update({products:Z.config})},[Z.enabled]);let k=(0,S.useRef)(null);k.current===null&&(k.current={handleTextChange:f=>h.current?.handleTextChange(f),handleKeyDown:f=>{let Q="nativeEvent"in f?f.nativeEvent:f;h.current?.handleKeyDown(Q)},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 l=k.current,z=(0,S.useCallback)(f=>{let Q=f.target.value,Je=Q.length>0&&!f.nativeEvent?.isComposing&&Q[0]!==Q[0].toUpperCase()?Q[0].toUpperCase()+Q.slice(1):Q;h.current?.handleTextChange(Je)},[]),oe=(0,S.useCallback)(f=>{h.current?.handleKeyDown(f.nativeEvent)},[]),B=h.current,d=be??sa,we=N!==void 0?N:d.text,Te=G!==void 0?G:d.completedParams,xe=d.actionableSuggestions,Ae=xe[0],ye=B?.listboxId??"",ke=d.activeDropdownIndex>=0&&B?`${ye}-option-${d.activeDropdownIndex}`:void 0,F=d.editingParam,Ce=d.editingIdentified,ze=F?{type:F.suggestionType,text:F.suggestionPlaceholder,required:!0,options:F.options}:Ce?{type:Ce.type,text:(0,Me.identifiedParamLabel)(Ce.type),required:!0,options:[]}:null,Fe=ze??Ae,Xe=ze?[ze]:xe,Ne=(0,Me.dateSelectionFor)(d),Ke=!B||d.isLoading&&!d.editingParam&&!d.inSelectionAnimation||d.isSearchingOptions;return{completedParams:Te,skippedParams:d.skippedParams,identifiedParams:d.identifiedParams,suggestionPills:xe,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:Ke,isFocused:d.isFocused,isDropdownOpen:d.isDropdownOpen,isActivePillSelected:d.isActivePillSelected,placeholderText:d.placeholderText,listboxId:ye,error:d.error,products:d.products,customFields:d.customFields,selectProduct:l.selectProduct,handleTextChange:l.handleTextChange,handleKeyDown:l.handleKeyDown,setFocused:l.setFocused,editingParam:F,editingIdentified:Ce,editingAnchor:d.editingAnchor,caretOffset:d.caretOffset,startEditingParam:l.startEditingParam,exitEditMode:l.exitEditMode,handleCaretAfterInput:l.handleCaretAfterInput,handleCaretMove:l.handleCaretMove,replaceEditingRange:l.replaceEditingRange,inputProps:{value:we,placeholder:d.placeholderText||void 0,onChange:z,onKeyDown:oe,onFocus:l.handleFocus,onBlur:l.handleBlur,role:"combobox","aria-expanded":d.isDropdownOpen,"aria-activedescendant":ke,"aria-autocomplete":"list","aria-controls":ye},reset:l.reset,dropdownProps:{suggestions:Fe?[{...Fe,options:d.filteredOptions}]:[],activeIndex:d.activeDropdownIndex,onSelect:l.selectOption,onHighlight:l.setActiveDropdownIndex,isOpen:d.isDropdownOpen,id:ye,pills:Xe,activeSelected:d.isActivePillSelected,onPillClick:l.setActivePill,onSkip:l.skipActivePill,showSkipButton:(P??!0)&&!F&&!Ce,showOptionIcons:y??!0,skipDisabled:d.inSelectionAnimation,isLoading:Ke,isInputEmpty:we.trim().length===0,products:d.products,onProductSelect:l.selectProduct,onProductFocusChange:l.setFocused,formatType:d.activeFormatType,dateView:d.dateView,selectedDateIso:Ne.selectedIso,selectedDateRange:Ne.selectedRange,dateRangeStart:Ne.rangeStart,onPreviousMonth:l.showPreviousMonth,onNextMonth:l.showNextMonth,optionsPosition:v??"below"}}}var j=require("@magicx-eng/ai-autocomplete-vanilla"),C=require("react"),Ye;function la(){if(Ye!==void 0)return Ye;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Ye=e.contentEditable==="plaintext-only",Ye}function Ot(e){let{segments:i,showChipIcons:a=!0,newParamId:r,editingParam:n,editingIdentified:o,editingAnchor:s,caretOffset:b,placeholderText:g,isFocused:v,isDropdownOpen:x,listboxId:m,activeDescendantId:y,autoFocus:P,handleTextChange:w,handleKeyDown:A,handleCaretAfterInput:M,handleCaretMove:N,startEditingParam:G,replaceEditingRange:re,setFocused:W}=e,I=(0,C.useRef)(null),te=(0,C.useRef)(!1),ge=(0,C.useRef)(""),se=(0,C.useRef)(""),h=(0,C.useRef)(null),be=(0,C.useRef)(0);h.current=b,(0,C.useEffect)(()=>{if(!P)return;let t=I.current;if(!t)return;document.activeElement===t?W(!0):t.focus();let p=t.ownerDocument??document,u=p.getSelection(),k=u&&u.rangeCount>0&&t.contains(u.anchorNode);if(u&&!k){let l=p.createRange();l.selectNodeContents(t),l.collapse(!0),u.removeAllRanges(),u.addRange(l)}},[P,W]),(0,C.useEffect)(()=>{let t=I.current;if(!t)return;let p=t.ownerDocument??document,u=()=>{let k=p.getSelection();if(!k||k.rangeCount===0||!k.anchorNode||!t.contains(k.anchorNode))return;let l=k.anchorNode,z=l.nodeType===Node.ELEMENT_NODE?l:l.parentElement,B=(k.isCollapsed?z?.closest("strong[data-param-id]"):null)?.dataset.paramId??null,d=n?.id??o?.id??null;if(B&&B!==d){G(B);return}performance.now()-be.current<50||N((0,j.getCursorOffset)(t))};return p.addEventListener("selectionchange",u),()=>p.removeEventListener("selectionchange",u)},[n,o,G,N]),(0,C.useLayoutEffect)(()=>{let t=I.current;t&&(0,j.renderEditableContent)({input:t,segments:i,newParamId:r,editingParamId:n?.id??null,placeholderText:g??"",isFocused:v,showChipIcons:a})},[i,r,n,g,v,a]),(0,C.useLayoutEffect)(()=>{let t=ge.current,p=r??"";if(ge.current=p,!p||p===t)return;let u=I.current;if(!u)return;u.focus();let k=h.current??(0,j.plainTextLength)(u);(0,j.setCursorOffset)(u,k)},[r]),(0,C.useLayoutEffect)(()=>{let t=se.current,p=n?.id??"";if(se.current=p,!p||p===t||s==null)return;let u=I.current;u&&(0,j.setCursorOffset)(u,s)},[n,s]);let H=(0,C.useCallback)(()=>{if(te.current)return;let t=I.current;if(!t)return;let p=(0,j.extractPlainText)(t),k=p.length>0&&p[0]!==p[0].toUpperCase()?p[0].toUpperCase()+p.slice(1):p;w(k)},[w]),ve=(0,C.useCallback)(()=>{be.current=performance.now(),H();let t=I.current;t&&M((0,j.getCursorOffset)(t))},[H,M]);(0,C.useEffect)(()=>{let t=I.current;if(!t)return;let p=u=>{let k=u,l=k.inputType;if(l==="insertParagraph"||l==="insertLineBreak"||l==="insertFromDrop"){u.preventDefault();return}if(l.startsWith("insert")||l.startsWith("delete")){let z=l.startsWith("delete")?"":k.data??"";re(z)&&u.preventDefault()}};return t.addEventListener("beforeinput",p),()=>t.removeEventListener("beforeinput",p)},[re]);let le=(0,C.useCallback)(()=>{te.current=!0},[]),ae=(0,C.useCallback)(()=>{te.current=!1,H()},[H]),de=(0,C.useCallback)(t=>{t.preventDefault();let p=I.current;if(!p)return;let u=(t.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!u)return;let k=p.ownerDocument??document,l=k.getSelection();if(!l||l.rangeCount===0)return;let z=l.getRangeAt(0);if(!p.contains(z.startContainer))return;z.deleteContents();let oe=k.createTextNode(u);z.insertNode(oe),z.setStartAfter(oe),z.collapse(!0),l.removeAllRanges(),l.addRange(z),H()},[H]),ie=(0,C.useCallback)(t=>A(t),[A]),ce=(0,C.useCallback)(()=>W(!0),[W]),pe=(0,C.useCallback)(()=>W(!1),[W]),_=(0,C.useCallback)(()=>I.current?.focus(),[]),$=(0,C.useCallback)(()=>I.current?.blur(),[]),Z=(0,C.useCallback)(()=>{let t=I.current;return t?(0,j.extractPlainText)(t):""},[]),V=la()?"plaintext-only":"true";return{inputRef:I,editorProps:{ref:I,contentEditable:V,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":m,"aria-expanded":x,"aria-activedescendant":y,spellCheck:!0,enterKeyHint:"send",onInput:ve,onKeyDown:ie,onCompositionStart:le,onCompositionEnd:ae,onPaste:de,onFocus:ce,onBlur:pe},getPlainText:Z,focus:_,blur:$}}var ee=require("react/jsx-runtime");function da(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var zt=(0,D.forwardRef)(function({onSubmit:i,onResult:a,onError:r,optionOverrides:n,maskCompletedText:o,className:s,apiConfig:b,additionalContext:g,columns:v,pillPlacement:x="dropdown",mode:m="auto",optionsPosition:y="below",animations:P=!0,dropdownTrigger:w,closeDropdownOnBlur:A,showNonTappableOptions:M,showOptionIcons:N=!0,showChipIcons:G=!0,showSkipButton:re,showProducts:W,autoFocus:I=!0,onFocus:te,onBlur:ge,value:se,completedParams:h,onChange:be,onParamsChange:H,products:ve,onProductSelect:le,submitButton:ae},de){let ie=(0,D.useRef)(null),ce=(0,D.useRef)(null),pe=(0,D.useRef)(()=>{}),_=(0,D.useRef)(null),$=(0,D.useRef)(null);(0,D.useEffect)(()=>{let E=ie.current;if(E)return _.current?_.current.setMode(m):_.current=new Oe.ModeController(E,m),()=>{_.current?.destroy(),_.current=null}},[m]);let Z=(0,D.useCallback)(E=>{let Pe=$.current?.current;Pe&&(Pe.focus(),(0,Oe.setCursorOffset)(Pe,E))},[]),{completedParams:V,skippedParams:t,identifiedParams:p,isReady:u,customFields:k,suggestionPills:l,setActivePill:z,skipActivePill:oe,segments:B,newParamId:d,clearNewParamId:we,placeholderText:Te,isFocused:xe,isDropdownOpen:Ae,isActivePillSelected:ye,isLoading:ke,activeIndex:F,listboxId:Ce,handleTextChange:ze,handleKeyDown:Fe,setFocused:Xe,editingParam:Ne,editingIdentified:Ke,editingAnchor:f,caretOffset:Q,startEditingParam:L,handleCaretAfterInput:Je,handleCaretMove:Nt,replaceEditingRange:Ht,dropdownProps:Bt,reset:Ge}=Ze({onSubmit:E=>pe.current(E),onResult:a,onError:r,optionOverrides:n,maskCompletedText:o,apiConfig:b,additionalContext:g,columns:v,dropdownTrigger:w,optionsPosition:y,closeDropdownOnBlur:A,showNonTappableOptions:M,showOptionIcons:N,showSkipButton:re,showProducts:W,onFocus:te,onBlur:ge,value:se,completedParams:h,onChange:be,onParamsChange:H,products:ve,onProductSelect:le,source:"full-sdk",setCursor:Z});(0,D.useEffect)(()=>{if(!d)return;let E=window.setTimeout(()=>we(),650);return()=>window.clearTimeout(E)},[d,we]);let Ft=F>=0?`${Ce}-option-${F}`:void 0,{inputRef:et,editorProps:Kt,focus:We,blur:dt,getPlainText:ct}=Ot({segments:B,newParamId:d,editingParam:Ne,editingIdentified:Ke,editingAnchor:f,caretOffset:Q,placeholderText:Te,isFocused:xe,showChipIcons:G,isDropdownOpen:Ae,listboxId:Ce,activeDescendantId:Ft,autoFocus:I,handleTextChange:ze,handleKeyDown:Fe,handleCaretAfterInput:Je,handleCaretMove:Nt,startEditingParam:L,replaceEditingRange:Ht,setFocused:Xe});$.current=et,(0,D.useLayoutEffect)(()=>{let E=ce.current,Pe=et.current;if(!E||!Pe)return;let pt=()=>{let ut=E.firstElementChild;if(!ut)return;let qt=ut.getBoundingClientRect(),Ut=Pe.getBoundingClientRect();qt.top>=Ut.bottom-2?E.setAttribute("data-aia-pill-wrapped",""):E.removeAttribute("data-aia-pill-wrapped")};pt();let ht=new ResizeObserver(pt);return ht.observe(Pe),()=>ht.disconnect()},[B,l.length,ke,et]),(0,D.useImperativeHandle)(de,()=>({focus:We,blur:dt,reset:Ge,setMode:E=>_.current?.setMode(E),skipActivePill:oe}),[We,dt,Ge,oe]);let _e=!!B.length||V.length>0,tt=(0,D.useCallback)(()=>{if(!_e)return;let E=ct();i((0,Oe.buildSubmitResult)(E,V,t,{identifiedParams:p,isReady:u,customFields:k})),Ge()},[_e,V,t,p,u,k,i,Ge,ct]);pe.current=tt;let Gt=(0,D.useCallback)(E=>{E.target?.closest("[data-aia-pill]")||We()},[We]),Wt=x==="inline",_t=x==="dropdown";return(0,ee.jsxs)("div",{ref:ie,className:`magicx-aia ${Ee.container} ${s??""}`,"data-pill-placement":x,"data-options-position":y,"data-animations":P?"on":"off","data-mode":da(m),children:[(0,ee.jsx)(Ve,{...Bt,showPills:_t}),(0,ee.jsxs)("div",{className:Ee.inputWrapper,"data-aia-input-wrapper":"",onClick:Gt,children:[(0,ee.jsxs)("div",{className:Ee.editorArea,"data-aia-editor":"",children:[(0,ee.jsx)("div",{...Kt,className:Ee.input,"data-aia-input":""}),Wt&&(ke||l.length>0)&&(0,ee.jsx)("span",{ref:ce,className:Ee.pillListContainer,"data-aia-pill-list-container":"",children:(0,ee.jsx)(Ue,{pills:l,activePillIndex:0,activeSelected:ye,onSelectPill:z,loading:ke})})]}),ae===null?null:ae===void 0?(0,ee.jsx)(Dt,{disabled:!_e,onClick:tt}):(0,ee.jsx)("span",{"data-aia-submit":"","data-aia-submit-slot":"",className:Ee.submitSlot,onClick:E=>{_e&&(E.stopPropagation(),tt())},children:ae})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,DATE_RANGE_META_END,DATE_RANGE_META_START,PRODUCT_PATH_PREFIX,WEEKDAY_LABELS,buildSubmitResult,cellDay,cellIso,dateCellMarks,formatDate,formatDateRange,isoDate,monthLabel,optionLabel,parseDate,parseLooseDate,parseLooseDateRange,productFromMatchedItem,productsFromCustomFields,sanitizeOptionIconSvg,selectedRangeFor,useAIAutocomplete,visibleDateRange,withSkippedParams});
|
|
1838
1877
|
//# sourceMappingURL=index.js.map
|