@magicx-eng/ai-autocomplete-react 0.30.1 → 0.32.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 +25 -10
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +64 -8
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +64 -8
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -66,7 +66,7 @@ function App() {
|
|
|
66
66
|
onSubmit={(result) => {
|
|
67
67
|
console.log(result.query); // "Create a email"
|
|
68
68
|
console.log(result.raw_query); // "Create a {{TASK_1}}"
|
|
69
|
-
console.log(result.completed_params); // [{ placeholder: "{{TASK_1}}",
|
|
69
|
+
console.log(result.completed_params); // [{ placeholder: "{{TASK_1}}", parameter: "task", ... }]
|
|
70
70
|
}}
|
|
71
71
|
className="my-autocomplete"
|
|
72
72
|
/>
|
|
@@ -395,7 +395,10 @@ Each server item becomes a `Product` with `id` (the item's stable id), `title`,
|
|
|
395
395
|
currency is yours to add), `vendor`, `imageUrl`, and a `url`: the item's own
|
|
396
396
|
`item_url` when the uploaded catalog named one (absolute or root-relative;
|
|
397
397
|
anything else is ignored), else a **relative** `/products/{handle}` — the right
|
|
398
|
-
link for a Shopify widget running on the storefront itself
|
|
398
|
+
link for a Shopify widget running on the storefront itself — opened on the
|
|
399
|
+
variant the query chose (`?variant=…`, e.g. the blue one for "blue shoes") when
|
|
400
|
+
there is one, whose price and image the card then shows. `available` is carried
|
|
401
|
+
over when the server reports it. An item with
|
|
399
402
|
neither gets no `url`: its card is still activatable and still emits
|
|
400
403
|
`onProductSelect`, it just has nothing for cmd-click to open. `productFromMatchedItem` / `productsFromCustomFields` are
|
|
401
404
|
exported for a hand-rolled strip that wants the same mapping.
|
|
@@ -422,6 +425,17 @@ empty or whitespace-only title shows `?`. The fallback works in both row and
|
|
|
422
425
|
list layouts. Initial tiles are decorative (`aria-hidden="true"`); the card's
|
|
423
426
|
visible title supplies its text.
|
|
424
427
|
|
|
428
|
+
**Sold out.** A product with `available: false` shows a "Sold out" badge over
|
|
429
|
+
the top-left of its image (in the list layout, a smaller banner across the
|
|
430
|
+
bottom of the thumbnail) and its image is desaturated; the card stays
|
|
431
|
+
selectable and keeps its link. Absent or `true` shows no
|
|
432
|
+
badge, so leave `available` out when you don't know. The badge is part of the
|
|
433
|
+
card's text, so screen readers announce it. Theme it with
|
|
434
|
+
`--aia-product-badge-bg`, `--aia-product-badge-color`,
|
|
435
|
+
`--aia-product-badge-font-size` and `--aia-product-badge-inset`, and the list
|
|
436
|
+
banner with `--aia-product-badge-list-bg`, `--aia-product-badge-list-color` and
|
|
437
|
+
`--aia-product-badge-list-font-size`.
|
|
438
|
+
|
|
425
439
|
Pass `productImageFallback="initial"` to `<AIAutocomplete>` or
|
|
426
440
|
`<AIAutocompleteDropdown>`. The hook also accepts the option and carries it
|
|
427
441
|
through `dropdownProps`:
|
|
@@ -473,14 +487,14 @@ const { customFields } = useAIAutocomplete({ ... });
|
|
|
473
487
|
|
|
474
488
|
{report && <p>{report.items.total} results</p>}
|
|
475
489
|
{report?.dropped_filters.length > 0 && (
|
|
476
|
-
// e.g. {
|
|
490
|
+
// e.g. { parameter: "Color", value: "Chartreuse", op: "eq" } — the shopper asked
|
|
477
491
|
// for a colour no item carries, so the results ignore it. Say so.
|
|
478
492
|
<p>No match for {report.dropped_filters.map((f) => f.value).join(", ")}</p>
|
|
479
493
|
)}
|
|
480
494
|
```
|
|
481
495
|
|
|
482
496
|
- `applied_filters` / `dropped_filters` — the constraints the server read out
|
|
483
|
-
of the query as `{
|
|
497
|
+
of the query as `{ parameter, value, op }` (`op` is one of `eq`, `ne`, `lt`,
|
|
484
498
|
`lte`, `gt`, `gte`), split into the ones the catalog answered and the ones it
|
|
485
499
|
could not (a parameter it does not have, a bound that is not a number, a
|
|
486
500
|
value no item carries). The items answer the applied set, so the dropped
|
|
@@ -536,7 +550,7 @@ const products = {
|
|
|
536
550
|
/>;
|
|
537
551
|
```
|
|
538
552
|
|
|
539
|
-
`Product` is exactly
|
|
553
|
+
`Product` is exactly seven fields; only `id` and `title` are required:
|
|
540
554
|
|
|
541
555
|
```ts
|
|
542
556
|
type Product = {
|
|
@@ -546,6 +560,7 @@ type Product = {
|
|
|
546
560
|
imageUrl?: string | null;
|
|
547
561
|
price?: string;
|
|
548
562
|
vendor?: string;
|
|
563
|
+
available?: boolean; // false shows a "Sold out" badge
|
|
549
564
|
};
|
|
550
565
|
```
|
|
551
566
|
|
|
@@ -742,9 +757,9 @@ The structured query as the SDK currently understands it. The same object is pas
|
|
|
742
757
|
| `query` | `string` | Plain text as the user sees it, trimmed. |
|
|
743
758
|
| `raw_query` | `string` | `query` with each completed param replaced by its placeholder token (e.g. `"Create a {{TASK_1}}"`). |
|
|
744
759
|
| `completed_params` | `CompletedParam[]` | Filled parameter values in query order, followed by any the user skipped (see below). |
|
|
745
|
-
| `identified_params` | `IdentifiedParam[]` | Parameters the server recognised in the user's own words, as `{
|
|
760
|
+
| `identified_params` | `IdentifiedParam[]` | Parameters the server recognised in the user's own words, as `{ parameter, text }` — e.g. `{ parameter: "due_date", text: "Friday" }` when the user typed "by Friday" instead of picking a date. They are not tokenized in `raw_query`, and they are tentative: each response replaces the set, and an entry drops out as soon as its text is edited away. |
|
|
746
761
|
| `is_ready` | `boolean` | Whether the server considers the query complete enough to act on. |
|
|
747
|
-
| `custom_fields?` | `CustomFieldsReport` | What catalog grounding did for the latest applied response, when it read a catalog at all — see [Product strip](#product-strip). `applied_filters` and `dropped_filters` list the query's constraints as `{
|
|
762
|
+
| `custom_fields?` | `CustomFieldsReport` | What catalog grounding did for the latest applied response, when it read a catalog at all — see [Product strip](#product-strip). `applied_filters` and `dropped_filters` list the query's constraints as `{ parameter, value, op }`; `items.total` is how many items the applied ones left standing and `items.matched` the ones the strip renders. Absent (no key) when the response carried no report. |
|
|
748
763
|
|
|
749
764
|
#### Reading the query as it's built
|
|
750
765
|
|
|
@@ -776,12 +791,12 @@ What "every successful round-trip" means in practice:
|
|
|
776
791
|
Pressing <kbd>→</kbd> at the end of the input dismisses the active pill. The dismissal is reported to the server — and included in `completed_params` here — as an entry with no placeholder and the sentinel text `"skipped"`:
|
|
777
792
|
|
|
778
793
|
```ts
|
|
779
|
-
{ placeholder: "",
|
|
794
|
+
{ placeholder: "", parameter: "goal", text: "skipped", kind: null }
|
|
780
795
|
```
|
|
781
796
|
|
|
782
797
|
Tier 2 consumers who build their own submit payload get the raw skips from the hook as `skippedParams`, and can fold them in the same way with the exported `buildSubmitResult(text, completedParams, skippedParams, { identifiedParams, isReady })` — the last argument carries the hook's `identifiedParams` and `isReady` so a hand-rolled submit reports the same `identified_params` and `is_ready` the SDK's own results do.
|
|
783
798
|
|
|
784
|
-
> **Reading `skippedParams` directly:** the array is append-only until `reset()`. The "drop a skip whose
|
|
799
|
+
> **Reading `skippedParams` directly:** the array is append-only until `reset()`. The "drop a skip whose parameter got filled" rule is applied when the payload is built, not by pruning the array — so if the user skips `goal` and later fills one, the raw array still holds the `goal` entry. That's deliberate: the filter self-heals if they then delete that param's text, where pruning would discard the signal for good. `buildSubmitResult` applies the rule for you; to apply it elsewhere (say, a "you skipped X" badge), use the exported `withSkippedParams(completedParams, skippedParams)`.
|
|
785
800
|
|
|
786
801
|
---
|
|
787
802
|
|
|
@@ -938,7 +953,7 @@ Submits from Enter and from Tier 1's built-in button are recorded for you. If yo
|
|
|
938
953
|
|
|
939
954
|
## Option Overrides
|
|
940
955
|
|
|
941
|
-
Supply the options for a parameter yourself instead of taking the server's. Each entry is keyed by the suggestion `
|
|
956
|
+
Supply the options for a parameter yourself instead of taking the server's. Each entry is keyed by the suggestion `parameter` and is a function of the phrase the user has typed for that parameter — return an array for a fixed or computed list, or a promise for one that lives behind a request (the dropdown shows its loading skeleton until it settles):
|
|
942
957
|
|
|
943
958
|
```tsx
|
|
944
959
|
import type { OptionOverrides } from "@magicx-eng/ai-autocomplete-react";
|
package/dist/index.d.mts
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -262,7 +262,7 @@
|
|
|
262
262
|
opacity: 0;
|
|
263
263
|
}
|
|
264
264
|
}
|
|
265
|
-
`,document.head.appendChild(e)}var
|
|
265
|
+
`,document.head.appendChild(e)}var ze={container:"aia-container-KKjFU",inputWrapper:"aia-inputWrapper-FLq1b",editorArea:"aia-editorArea-7rBWq",input:"aia-input-IW-P-",pillListContainer:"aia-pillListContainer-h92IA",submitSlot:"aia-submitSlot-GhuCM",aiaPillReveal:"aia-aiaPillReveal-wf05b"};var Re=require("@magicx-eng/ai-autocomplete-vanilla"),te=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-0ae03977")){let e=document.createElement("style");e.id="ac-style-0ae03977",e.textContent=`/*
|
|
266
266
|
* Built-in appearance defaults \u2014 zero specificity via :where().
|
|
267
267
|
* Consumer CSS always wins without !important.
|
|
268
268
|
*
|
|
@@ -1041,7 +1041,7 @@
|
|
|
1041
1041
|
opacity: 0.25;
|
|
1042
1042
|
}
|
|
1043
1043
|
}
|
|
1044
|
-
`,document.head.appendChild(e)}var we={dropdown:"aia-dropdown-yz2KC",visible:"aia-visible-QCoXj",scrollArrow:"aia-scrollArrow-uUzV0","magicx-aia-scroll-arrow-bob":"aia-magicx-aia-scroll-arrow-bob-z-HXC",pillBar:"aia-pillBar-pwTXe",pillScroll:"aia-pillScroll-Tpzus",skip:"aia-skip-7-olS",skeletonBars:"aia-skeletonBars-HVr9C",skeletonBarsIn:"aia-skeletonBarsIn-BdPrL",skeletonBarsOut:"aia-skeletonBarsOut-TqKeD",skeletonBar:"aia-skeletonBar-O3xIx",aiaSkeletonPulse:"aia-aiaSkeletonPulse-G8W7q"};var
|
|
1044
|
+
`,document.head.appendChild(e)}var we={dropdown:"aia-dropdown-yz2KC",visible:"aia-visible-QCoXj",scrollArrow:"aia-scrollArrow-uUzV0","magicx-aia-scroll-arrow-bob":"aia-magicx-aia-scroll-arrow-bob-z-HXC",pillBar:"aia-pillBar-pwTXe",pillScroll:"aia-pillScroll-Tpzus",skip:"aia-skip-7-olS",skeletonBars:"aia-skeletonBars-HVr9C",skeletonBarsIn:"aia-skeletonBarsIn-BdPrL",skeletonBarsOut:"aia-skeletonBarsOut-TqKeD",skeletonBar:"aia-skeletonBar-O3xIx",aiaSkeletonPulse:"aia-aiaSkeletonPulse-G8W7q"};var M=require("@magicx-eng/ai-autocomplete-vanilla"),kt=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) ---
|
|
1045
1045
|
|
|
1046
1046
|
One of three hand-maintained copies (vanilla styles.css, this file, Angular's
|
|
1047
1047
|
date-grid.component.css). Only the class-naming layer differs \u2014 the
|
|
@@ -1204,7 +1204,7 @@
|
|
|
1204
1204
|
opacity: 0.8;
|
|
1205
1205
|
background: rgba(var(--aia-streak-rgb, 255, 255, 255), 0.06);
|
|
1206
1206
|
}
|
|
1207
|
-
`,document.head.appendChild(e)}var
|
|
1207
|
+
`,document.head.appendChild(e)}var z={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 Q=require("react/jsx-runtime"),ra=["sunday","monday","tuesday","wednesday","thursday","friday","saturday"];function Ct({options:e,activeIndex:a,listboxId:t,view:n,selection:i,onSelect:r,onHighlight:o,onUnhighlight:d,onPreviousMonth:k,onNextMonth:w}){let x=(0,M.isoDate)(new Date),E=(0,M.visibleDateRange)({pendingStart:i.rangeStart,highlightedIso:(0,M.cellIso)(e[a]),selected:i.selectedRange});return(0,Q.jsxs)("div",{className:z.datepicker,"data-aia-datepicker":"",children:[(0,Q.jsxs)("div",{className:z.header,children:[(0,Q.jsx)("button",{type:"button",tabIndex:-1,className:z.nav,"data-aia-date-prev":"","aria-label":"Previous month",onMouseDown:m=>m.preventDefault(),onClick:k,children:"\u2039"}),(0,Q.jsx)("span",{className:z.month,"data-aia-date-month":"","aria-live":"polite",children:(0,M.monthLabel)(n)}),(0,Q.jsx)("button",{type:"button",tabIndex:-1,className:z.nav,"data-aia-date-next":"","aria-label":"Next month",onMouseDown:m=>m.preventDefault(),onClick:w,children:"\u203A"})]}),(0,Q.jsx)("div",{className:z.weekdays,"aria-hidden":"true",children:M.WEEKDAY_LABELS.map((m,y)=>(0,Q.jsx)("span",{className:z.weekday,children:m},ra[y]))}),(0,Q.jsx)("div",{className:z.grid,"data-aia-date-grid":"",children:e.map((m,y)=>(0,Q.jsx)(sa,{option:m,id:`${t}-option-${y}`,index:y,isHighlighted:y===a&&m.is_tappable,isToday:(0,M.cellIso)(m)===x,isPast:(0,M.cellIso)(m)!=null&&(0,M.cellIso)(m)<x,marks:(0,M.dateCellMarks)((0,M.cellIso)(m),{selectedIso:i.selectedIso,range:E}),onSelect:r,onHighlight:o,onUnhighlight:d},(0,M.cellIso)(m)??`pad-${y}`))})]})}function sa({option:e,id:a,index:t,isHighlighted:n,isToday:i,isPast:r,marks:o,onSelect:d,onHighlight:k,onUnhighlight:w}){let[x,E]=(0,kt.useState)(!1),m=(0,M.cellDay)(e);if(m==null)return(0,Q.jsx)("div",{id:a,role:"option","data-aia-option":"","data-aia-date-cell":"","aria-hidden":"true","aria-selected":!1,tabIndex:-1,className:`${z.cell} ${z.blank}`});let y=()=>{E(!0),d(e),setTimeout(()=>E(!1),170)},O=[z.cell,z.day,r?z.past:"",n?z.highlighted:"",i?z.today:"",o.inRange?z.inRange:"",o.selected?z.selected:"",x?z.pressed:""].filter(Boolean).join(" ");return(0,Q.jsx)("div",{id:a,role:"option","data-aia-option":"","data-aia-date-cell":"","aria-selected":n,"aria-label":e.text,tabIndex:0,className:O,onClick:y,onKeyDown:A=>{(A.key==="Enter"||A.key===" ")&&(A.preventDefault(),y())},onMouseEnter:()=>k(t),onMouseLeave:w?()=>w(t):void 0,children:(0,Q.jsx)("span",{className:z.number,children:m})})}var He=require("@magicx-eng/ai-autocomplete-vanilla"),Xe=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 {
|
|
1208
1208
|
display: flex;
|
|
1209
1209
|
flex-wrap: wrap;
|
|
1210
1210
|
gap: var(--aia-cluster-gap, 0.5rem);
|
|
@@ -1464,7 +1464,7 @@
|
|
|
1464
1464
|
align-items: center;
|
|
1465
1465
|
vertical-align: middle;
|
|
1466
1466
|
}
|
|
1467
|
-
`,document.head.appendChild(e)}var ut={list:"aia-list-qvLqO"};var
|
|
1467
|
+
`,document.head.appendChild(e)}var ut={list:"aia-list-qvLqO"};var je=require("react/jsx-runtime"),la=[125,69];function Et(e){return e===0?"first":e===1?"next":"last"}function Je({pills:e,activePillIndex:a,onSelectPill:t,activeSelected:n,rounded:i,loading:r}){return r&&e.length===0?(0,je.jsx)("span",{className:ut.list,"data-aia-pill-list-loading":"",children:la.map((o,d)=>(0,je.jsx)("span",{"data-aia-pill-skeleton":"",className:`${Ae.pill} ${i?Ae.rounded:""} ${Ae.skeleton}`,style:{width:o,opacity:ht[Et(d)]}},`skel-${o}`))}):(0,je.jsx)("span",{className:ut.list,"data-aia-pill-list-loading":r?"":void 0,children:e.map((o,d)=>{let k=!!n&&d===a;return(0,je.jsx)(St,{label:o.text,state:k?"selected":Et(d),selected:k,rounded:i,loading:r,onClick:()=>t(d)},`${o.parameter}-${o.text}`)})})}var et=require("@magicx-eng/ai-autocomplete-vanilla"),Fe=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
|
|
1468
1468
|
(packages/vanilla/src/styles.css). Same tokens, same defaults, so a consumer
|
|
1469
1469
|
theming one package sees the same result in the other.
|
|
1470
1470
|
|
|
@@ -1541,6 +1541,8 @@
|
|
|
1541
1541
|
text-decoration: none;
|
|
1542
1542
|
cursor: pointer;
|
|
1543
1543
|
transition: background-color 150ms ease;
|
|
1544
|
+
/* The sold-out badge is positioned against the card. */
|
|
1545
|
+
position: relative;
|
|
1544
1546
|
}
|
|
1545
1547
|
|
|
1546
1548
|
.aia-card-JBGYT:hover {
|
|
@@ -1656,6 +1658,39 @@
|
|
|
1656
1658
|
);
|
|
1657
1659
|
}
|
|
1658
1660
|
|
|
1661
|
+
/* Sold-out badge. It sits last in the text column, so the card's accessible
|
|
1662
|
+
name ends with it, and is lifted over the image's top-left corner: card
|
|
1663
|
+
padding (6px) plus the same again. A light chip with dark, tracked capitals
|
|
1664
|
+
reads on any photo, light or dark, and on either panel surface. */
|
|
1665
|
+
.aia-badge-j9Hcd {
|
|
1666
|
+
position: absolute;
|
|
1667
|
+
top: var(--aia-product-badge-inset, 12px);
|
|
1668
|
+
left: var(--aia-product-badge-inset, 12px);
|
|
1669
|
+
padding: 3px 6px;
|
|
1670
|
+
border-radius: 4px;
|
|
1671
|
+
background: var(--aia-product-badge-bg, rgba(255, 255, 255, 0.94));
|
|
1672
|
+
color: var(--aia-product-badge-color, #1f2328);
|
|
1673
|
+
/* A hairline ring keeps the chip's edge on a pale image or a light panel. */
|
|
1674
|
+
box-shadow:
|
|
1675
|
+
0 0 0 1px rgba(0, 0, 0, 0.08),
|
|
1676
|
+
0 1px 2px rgba(0, 0, 0, 0.18);
|
|
1677
|
+
font-family: inherit;
|
|
1678
|
+
font-size: var(--aia-product-badge-font-size, 9px);
|
|
1679
|
+
font-weight: 600;
|
|
1680
|
+
line-height: 1;
|
|
1681
|
+
letter-spacing: 0.08em;
|
|
1682
|
+
text-transform: uppercase;
|
|
1683
|
+
white-space: nowrap;
|
|
1684
|
+
pointer-events: none;
|
|
1685
|
+
}
|
|
1686
|
+
|
|
1687
|
+
/* A sold-out product's image steps back, so the badge is not the only cue.
|
|
1688
|
+
Desaturated rather than faded: opacity lets the panel show through, which
|
|
1689
|
+
muddies a photo on a dark surface. */
|
|
1690
|
+
.aia-card-JBGYT[data-aia-product-sold-out] .aia-image-5pNL7 {
|
|
1691
|
+
filter: grayscale(0.55);
|
|
1692
|
+
}
|
|
1693
|
+
|
|
1659
1694
|
/* --- List layout (\`productsLayout: "list"\`) ---
|
|
1660
1695
|
The same cards stacked as full-width rows \u2014 thumbnail on the left, text on
|
|
1661
1696
|
the right \u2014 for results that read as a list (courses, listings, documents)
|
|
@@ -1692,7 +1727,28 @@
|
|
|
1692
1727
|
.aia-section-Hugfg[data-aia-products-layout="list"] .aia-body-ly032 {
|
|
1693
1728
|
flex: 1 1 auto;
|
|
1694
1729
|
}
|
|
1695
|
-
|
|
1730
|
+
|
|
1731
|
+
/* In a list the badge is a banner across the bottom of the thumbnail. The
|
|
1732
|
+
thumbnail is centred in the card and the card's top and bottom padding
|
|
1733
|
+
match, so its bottom edge is half a thumbnail below the card's centre; its
|
|
1734
|
+
left edge is the card's 8px inline padding. */
|
|
1735
|
+
.aia-section-Hugfg[data-aia-products-layout="list"] .aia-badge-j9Hcd {
|
|
1736
|
+
top: calc(50% + var(--aia-product-list-media-size, 44px) / 2);
|
|
1737
|
+
left: 8px;
|
|
1738
|
+
width: var(--aia-product-list-media-size, 44px);
|
|
1739
|
+
transform: translateY(-100%);
|
|
1740
|
+
padding: 2px 0;
|
|
1741
|
+
border-radius: 0 0 8px 8px;
|
|
1742
|
+
/* A dark scrim rather than the light chip: a light banner at a tile's edge
|
|
1743
|
+
merges with a light panel and reads as a cropped photo. */
|
|
1744
|
+
background: var(--aia-product-badge-list-bg, rgba(17, 17, 17, 0.72));
|
|
1745
|
+
color: var(--aia-product-badge-list-color, #fff);
|
|
1746
|
+
box-shadow: none;
|
|
1747
|
+
font-size: var(--aia-product-badge-list-font-size, 7px);
|
|
1748
|
+
letter-spacing: 0.02em;
|
|
1749
|
+
text-align: center;
|
|
1750
|
+
}
|
|
1751
|
+
`,document.head.appendChild(e)}var ee={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",badge:"aia-badge-j9Hcd"};var U=require("react/jsx-runtime");function Tt({products:e,listboxId:a,onSelect:t,onFocusChange:n,focusable:i=!0,layout:r="row",imageFallback:o="image"}){let d=e.length>0,k=(0,Fe.useRef)(null);if((0,Fe.useEffect)(()=>{let x=k.current;if(!(!d||!x))return(0,et.attachProductRowWheel)(x)},[d]),!d)return null;let w=`${a}-products-label`;return(0,U.jsxs)("section",{className:ee.section,"data-aia-products":"","data-aia-products-layout":r,role:"group","aria-labelledby":w,children:[(0,U.jsx)("div",{className:ee.label,id:w,"data-aia-products-label":"",children:"Products"}),(0,U.jsx)("div",{ref:k,className:ee.row,"data-aia-products-row":"",children:e.map((x,E)=>(0,U.jsx)(da,{product:x,id:`${a}-product-${E}`,onSelect:t,onFocusChange:n,focusable:i,imageFallback:o},x.id))})]})}function da({product:e,id:a,onSelect:t,onFocusChange:n,focusable:i,imageFallback:r}){let o=d=>{d.metaKey||d.ctrlKey||d.shiftKey||d.altKey||d.button!==0||(d.preventDefault(),t(e))};return(0,U.jsxs)("a",{id:a,className:ee.card,"data-aia-product":"","data-aia-product-sold-out":e.available===!1?"":void 0,role:"option","aria-selected":!1,href:e.url,tabIndex:i?0:-1,onClick:o,onKeyDown:d=>{d.key!=="Enter"&&d.key!==" "||(d.preventDefault(),t(e))},onFocus:()=>n?.(!0),onBlur:d=>{d.relatedTarget?.closest("[data-aia-dropdown]")||n?.(!1)},children:[(0,U.jsx)(ca,{src:e.imageUrl?.trim(),title:e.title,fallback:r},e.imageUrl?.trim()??""),(0,U.jsxs)("span",{className:ee.body,children:[e.vendor?(0,U.jsx)("span",{className:ee.vendor,children:e.vendor}):null,(0,U.jsx)("span",{className:ee.title,children:e.title}),e.price?(0,U.jsx)("span",{className:ee.price,children:e.price}):null,e.available===!1?(0,U.jsx)("span",{className:ee.badge,children:"Sold out"}):null]})]})}function ca({src:e,title:a,fallback:t}){let[n,i]=(0,Fe.useState)(!1),r=!!e&&!n,o=!r&&t==="initial";return(0,U.jsxs)("span",{className:ee.media,"aria-hidden":"true","data-aia-product-placeholder":!r&&!o?"":void 0,"data-aia-product-initial":o?"":void 0,children:[r?(0,U.jsx)("img",{className:ee.image,src:e,alt:"",loading:"lazy",decoding:"async",onError:()=>i(!0)}):null,o?(0,et.productInitial)(a):null]})}var j=require("@magicx-eng/ai-autocomplete-vanilla"),ce=require("react");var At=require("@magicx-eng/ai-autocomplete-vanilla"),tt=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 {
|
|
1696
1752
|
display: grid;
|
|
1697
1753
|
grid-template-columns: repeat(
|
|
1698
1754
|
auto-fit,
|
|
@@ -2125,7 +2181,7 @@
|
|
|
2125
2181
|
opacity: 0;
|
|
2126
2182
|
}
|
|
2127
2183
|
}
|
|
2128
|
-
`,document.head.appendChild(e)}var V={item:"aia-item-d4vpD",content:"aia-content-T-Qba",riseIn:"aia-riseIn-etXZT",fadeIn:"aia-fadeIn-I8u35",tappable:"aia-tappable-70KcX",nonTappable:"aia-nonTappable-xSZM-",highlighted:"aia-highlighted-Hb0SU",tag:"aia-tag-e3Fwe",pressed:"aia-pressed-98o-r",pressCompress:"aia-pressCompress-ICV3q",scrollHint:"aia-scrollHint-xKXPt",skeletonPulse:"aia-skeletonPulse-plvdD",text:"aia-text-yqoh9",skeletonBarIn:"aia-skeletonBarIn-ZlEM0",icon:"aia-icon-Qw938",count:"aia-count-IpYbQ",image:"aia-image-YZAbO",skeletonOut:"aia-skeletonOut-x6NRd"};var se=require("react/jsx-runtime");function Dt({option:e,isHighlighted:a,onSelect:t,onHighlight:n,onUnhighlight:i,id:r,loading:o,showIcon:d=!0,showImage:k=!0,showCount:w=!0,scrollHint:x,enterDelayMs:E=0}){let[m]=(0,le.useState)(E),[y,O]=(0,le.useState)(!1),A=k?(0,de.optionImageSrc)(e.image_url):null,[Z,H]=(0,le.useState)(null),D=(0,le.useMemo)(()=>!A&&d&&e.icon_svg?(0,de.sanitizeOptionIconSvg)(e.icon_svg):null,[A,d,e.icon_svg]),T=w?(0,de.formatOptionCount)(e.item_count):null,F=(0,le.useRef)(void 0);(0,le.useEffect)(()=>()=>clearTimeout(F.current),[]);let R=()=>{o||!e.is_tappable||y||(O(!0),t(e),clearTimeout(F.current),F.current=setTimeout(()=>O(!1),170))},P=[V.item,a&&!o?V.highlighted:"",e.is_tappable?V.tappable:V.nonTappable,y?V.pressed:"",x?V.scrollHint:""].filter(Boolean).join(" ");return(0,se.jsx)("div",{id:r,role:"option","data-aia-option":"","data-aia-loading":o?"":void 0,"data-aia-icon":D&&e.icon?e.icon:void 0,"data-aia-image":A?"":void 0,"data-aia-item-count":T!==null?e.item_count:void 0,"aria-selected":a,className:P,style:{[de.OPTION_ENTER_DELAY_VAR]:`${m}ms`},tabIndex:o||!e.is_tappable?-1:0,onClick:R,onKeyDown:
|
|
2184
|
+
`,document.head.appendChild(e)}var V={item:"aia-item-d4vpD",content:"aia-content-T-Qba",riseIn:"aia-riseIn-etXZT",fadeIn:"aia-fadeIn-I8u35",tappable:"aia-tappable-70KcX",nonTappable:"aia-nonTappable-xSZM-",highlighted:"aia-highlighted-Hb0SU",tag:"aia-tag-e3Fwe",pressed:"aia-pressed-98o-r",pressCompress:"aia-pressCompress-ICV3q",scrollHint:"aia-scrollHint-xKXPt",skeletonPulse:"aia-skeletonPulse-plvdD",text:"aia-text-yqoh9",skeletonBarIn:"aia-skeletonBarIn-ZlEM0",icon:"aia-icon-Qw938",count:"aia-count-IpYbQ",image:"aia-image-YZAbO",skeletonOut:"aia-skeletonOut-x6NRd"};var se=require("react/jsx-runtime");function Dt({option:e,isHighlighted:a,onSelect:t,onHighlight:n,onUnhighlight:i,id:r,loading:o,showIcon:d=!0,showImage:k=!0,showCount:w=!0,scrollHint:x,enterDelayMs:E=0}){let[m]=(0,le.useState)(E),[y,O]=(0,le.useState)(!1),A=k?(0,de.optionImageSrc)(e.image_url):null,[Z,H]=(0,le.useState)(null),D=(0,le.useMemo)(()=>!A&&d&&e.icon_svg?(0,de.sanitizeOptionIconSvg)(e.icon_svg):null,[A,d,e.icon_svg]),T=w?(0,de.formatOptionCount)(e.item_count):null,F=(0,le.useRef)(void 0);(0,le.useEffect)(()=>()=>clearTimeout(F.current),[]);let R=()=>{o||!e.is_tappable||y||(O(!0),t(e),clearTimeout(F.current),F.current=setTimeout(()=>O(!1),170))},P=[V.item,a&&!o?V.highlighted:"",e.is_tappable?V.tappable:V.nonTappable,y?V.pressed:"",x?V.scrollHint:""].filter(Boolean).join(" ");return(0,se.jsx)("div",{id:r,role:"option","data-aia-option":"","data-aia-loading":o?"":void 0,"data-aia-icon":D&&e.icon?e.icon:void 0,"data-aia-image":A?"":void 0,"data-aia-item-count":T!==null?e.item_count:void 0,"aria-selected":a,className:P,style:{[de.OPTION_ENTER_DELAY_VAR]:`${m}ms`},tabIndex:o||!e.is_tappable?-1:0,onClick:R,onKeyDown:Y=>{!o&&e.is_tappable&&(Y.key==="Enter"||Y.key===" ")&&(Y.preventDefault(),R())},onMouseEnter:!o&&e.is_tappable?n:void 0,onMouseLeave:i,children:(0,se.jsxs)("span",{className:V.content,children:[A&&(0,se.jsx)("span",{className:`${V.image} magicx-aia-option-image`,"aria-hidden":"true",children:(0,se.jsx)("img",{src:A,alt:"",loading:"lazy",decoding:"async",referrerPolicy:"no-referrer",draggable:!1,hidden:Z===A,onError:()=>H(A)})}),D&&(0,se.jsx)("span",{className:`${V.icon} magicx-aia-option-icon`,"aria-hidden":"true",dangerouslySetInnerHTML:{__html:D}}),(0,se.jsx)("span",{className:V.text,children:(0,de.optionLabel)(e)}),e.tag&&(0,se.jsx)("span",{className:V.tag,children:e.tag}),T!==null&&(0,se.jsx)("span",{className:`${V.count} magicx-aia-option-count`,children:T})]})})}var mt=require("react/jsx-runtime");function pa(){let[e,a]=(0,ce.useState)(j.isOptionsGridMobileViewport);return(0,ce.useEffect)(()=>{if(typeof window>"u"||!window.matchMedia)return;let t=window.matchMedia(j.OPTIONS_GRID_MOBILE_QUERY),n=()=>a(t.matches);return n(),t.addEventListener("change",n),()=>t.removeEventListener("change",n)},[]),e}function Lt({options:e,activeIndex:a,onSelect:t,onHighlight:n,onUnhighlight:i,listboxId:r,loading:o,groupKey:d="",optionsPosition:k="below",showIcons:w=!0,showImages:x=!0,showCounts:E=!0}){let m=pa(),y=(0,ce.useRef)(null),[O,A]=(0,ce.useState)(null),Z=(0,ce.useRef)(null);(0,ce.useLayoutEffect)(()=>{if(o&&(0,j.sameOptionRows)(Z.current,e))return;Z.current=o?null:e;let D=y.current,F=D&&!o&&(0,j.needsOptionsGridMeasurement)(e.length,m)?(0,j.measureOptionsGrid)(D):null;A(F?(0,j.planOptionsGrid)(e.length,m,F.rowWidths,F.gridWidth):null)},[e,m,o]);let H=O??(0,j.planOptionsGrid)(e.length,m,null,null);return(0,mt.jsx)(Rt,{min:"250px",max:"1fr",gap:"0",scroll:!0,scrollResetKey:d,template:H.template,maxHeight:H.maxHeight,innerRef:D=>{y.current=D},"data-aia-group":d,children:e.map((D,T)=>(0,mt.jsx)(Dt,{option:D,isHighlighted:T===a,onSelect:t,onHighlight:()=>n(T),onUnhighlight:i?()=>i(T):void 0,id:`${r}-option-${T}`,loading:o,showIcon:w,showImage:x,showCount:E,scrollHint:!o&&H.scrollHintIndices.includes(T),enterDelayMs:o?0:(0,j.optionEnterDelayMs)(T,H.cols,e.length,k)},`${d}\0${D.text}`))})}if(typeof document<"u"&&!document.getElementById("ac-style-8414cd5f")){let e=document.createElement("style");e.id="ac-style-8414cd5f",e.textContent=`.aia-stack {
|
|
2129
2185
|
display: flex;
|
|
2130
2186
|
flex-direction: column;
|
|
2131
2187
|
gap: var(--aia-stack-space, 0.5rem);
|
|
@@ -2140,7 +2196,7 @@
|
|
|
2140
2196
|
align-items: end;
|
|
2141
2197
|
}
|
|
2142
2198
|
/* data-align="stretch" is the flex default \u2014 no rule needed. */
|
|
2143
|
-
`,document.head.appendChild(e)}var
|
|
2199
|
+
`,document.head.appendChild(e)}var Mt=require("react/jsx-runtime");function zt({space:e,align:a="stretch",className:t,children:n,...i}){let r=e?{"--aia-stack-space":e}:void 0;return(0,Mt.jsx)("div",{className:t?`aia-stack ${t}`:"aia-stack","data-align":a,style:r,...i,children:n})}var K=require("react/jsx-runtime"),ha=[159,119,164],ua=()=>{},Nt=()=>{};function ma(e){let a=()=>typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches,[t,n]=(0,te.useState)(a);if((0,te.useEffect)(()=>{if(e!=="auto"||typeof window>"u"||typeof window.matchMedia!="function")return;let i=window.matchMedia("(prefers-color-scheme: dark)"),r=()=>n(i.matches);return i.addEventListener("change",r),()=>i.removeEventListener("change",r)},[e]),e!==void 0)return e==="auto"?t?"dark":"light":e}function ga(e,a){let t=(0,te.useRef)(null);(0,te.useEffect)(()=>{let n=e.current,i=a.current;if(!n||!i)return;let r=n.querySelector(".aia-grid[data-scroll]");if(t.current&&t.current.grid!==r&&(t.current.controller.destroy(),t.current=null),r&&!t.current){t.current={grid:r,controller:(0,Re.attachScrollArrow)({dropdown:n,grid:r,button:i})};return}t.current?.controller.update()}),(0,te.useEffect)(()=>()=>{t.current?.controller.destroy(),t.current=null},[])}function at({suggestions:e,activeIndex:a,onSelect:t,onHighlight:n,onUnhighlight:i,isOpen:r,id:o,className:d,pills:k,onPillClick:w,showPills:x=!0,onSkip:E,showSkipButton:m=!0,showOptionIcons:y=!0,showOptionImages:O=!0,showOptionCounts:A=!0,skipDisabled:Z=!1,activeSelected:H=!1,isLoading:D=!1,skeletonExiting:T=!1,isInputEmpty:F=!1,products:R,onProductSelect:P,onProductFocusChange:Y,productsLayout:pe="row",productImageFallback:ye="image",formatType:he="options",dateView:ke=null,selectedDateIso:$=null,selectedDateRange:f=null,dateRangeStart:Oe=null,onPreviousMonth:Ce,onNextMonth:Pe,optionsPosition:ue="below",mode:Se}){let me=ma(Se),ie=me!==void 0,X=(0,te.useRef)(null),ge=(0,te.useRef)(null);ga(X,ge),(0,te.useEffect)(()=>{if(X.current)return(0,Re.containScroll)(X.current)},[]);let fe=e[0]?.options??[],c=!!(k&&k.length>0&&w),g=!!(R&&R.length>0),u=r&&(fe.length>0||x&&c||D||g),b={suggestions:e,activeIndex:a,pills:k,showPills:x,showSkipButton:m,showOptionIcons:y,showOptionImages:O,showOptionCounts:A,skipDisabled:Z,activeSelected:H,isLoading:D,skeletonExiting:T,isInputEmpty:F,products:R,formatType:he,dateView:ke,selectedDateIso:$,selectedDateRange:f,dateRangeStart:Oe},C=(0,te.useRef)(b);u&&(C.current=b);let l=u?b:C.current,W=l.suggestions[0],_=W?.options??[],oe=l.activeIndex>=0&&!!_[l.activeIndex]?.is_tappable,v=!!(l.pills&&l.pills.length>0&&w),De=l.showPills&&v,We=l.showPills&&!v&&l.isLoading,be=De||We,p=v&&l.showSkipButton&&!l.isInputEmpty&&!!E,ve=l.pills?.[0]?.text,Le=(0,Re.isCalendarFormat)(l.formatType)&&l.dateView!=null,Ie=_.length>0&&!Le,Me=_.length>0&&Le&&!l.isLoading,Ee=l.isLoading&&!Ie&&!Me,Ne=l.products??[];return(0,K.jsxs)("div",{ref:X,id:o,role:"listbox","data-aia-dropdown":"","data-options-position":ue,"data-mode":me,"data-aia-loading":l.isLoading?"":void 0,"data-aia-skeleton-exiting":l.skeletonExiting?"":void 0,"data-aia-has-products":Ne.length>0?"":void 0,className:`${ie?"magicx-aia ":""}${we.dropdown} ${u?we.visible:""} ${d??""}`,onMouseDown:q=>q.preventDefault(),children:[(0,K.jsxs)(zt,{space:"8px",children:[(be||p)&&(0,K.jsxs)(Ue,{noWrap:!0,className:we.pillBar,"data-aia-pillbar":"",children:[be&&(0,K.jsx)("span",{className:we.pillScroll,"data-aia-pill-scroll":"",children:(0,K.jsx)(Je,{pills:l.pills??[],activePillIndex:0,activeSelected:l.activeSelected,onSelectPill:w??(()=>{}),rounded:!0,loading:l.isLoading})}),p&&(0,K.jsx)("button",{type:"button",tabIndex:-1,className:we.skip,"data-aia-skip":"",disabled:l.isLoading||l.skipDisabled,"aria-label":ve?`Skip ${ve}`:"Skip",onClick:E,children:"skip"})]}),Ie&&(0,K.jsx)(Lt,{options:_,activeIndex:l.activeIndex,onSelect:t,onHighlight:n,onUnhighlight:i,listboxId:o,loading:l.isLoading,groupKey:W?`${W.parameter} ${W.text}`:"",optionsPosition:ue,showIcons:l.showOptionIcons,showImages:l.showOptionImages,showCounts:l.showOptionCounts}),Me&&l.dateView&&(0,K.jsx)(Ct,{options:_,activeIndex:l.activeIndex,listboxId:o,view:l.dateView,selection:{selectedIso:l.selectedDateIso??null,selectedRange:l.selectedDateRange??null,rangeStart:l.dateRangeStart??null},onSelect:t,onHighlight:n,onUnhighlight:i,onPreviousMonth:Ce??Nt,onNextMonth:Pe??Nt}),Ee&&(0,K.jsx)("div",{className:we.skeletonBars,"data-aia-skeleton-bars":"",children:ha.map(q=>(0,K.jsx)("span",{className:we.skeletonBar,style:{width:q}},`bar-${q}`))}),(0,K.jsx)(Tt,{products:Ne,listboxId:o,onSelect:P??ua,onFocusChange:Y,focusable:u,layout:pe,imageFallback:ye}),(0,K.jsx)(Pt,{isOptionHighlighted:oe,isInputEmpty:l.isInputEmpty})]}),(0,K.jsx)("button",{ref:ge,type:"button",tabIndex:-1,className:we.scrollArrow,"data-aia-scroll-arrow":"","aria-label":Re.SCROLL_ARROW_LABEL,"aria-hidden":"true",children:(0,K.jsx)("svg",{viewBox:"0 0 16 16",width:"18",height:"18",fill:"none",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",focusable:"false",children:(0,K.jsx)("path",{d:"M4 6.5 8 10.5l4-4"})})})]})}var Ge=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 {
|
|
2144
2200
|
flex-shrink: 0;
|
|
2145
2201
|
width: 32px;
|
|
2146
2202
|
height: 32px;
|
|
@@ -2193,5 +2249,5 @@
|
|
|
2193
2249
|
);
|
|
2194
2250
|
cursor: default;
|
|
2195
2251
|
}
|
|
2196
|
-
`,document.head.appendChild(e)}var Bt={submitButton:"aia-submitButton-otz7H"};var it=require("react/jsx-runtime");function Ht({disabled:e,onClick:a}){return(0,it.jsx)("button",{type:"button","data-aia-submit":"",className:Bt.submitButton,disabled:e,onClick:t=>{t.stopPropagation(),a()},"aria-label":"Submit",children:(0,it.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,it.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var Ke=require("@magicx-eng/ai-autocomplete-vanilla"),I=require("react");var gt=require("react");function Ft(e){let a=(0,gt.useRef)(e);a.current=e;let t=Object.keys(e??{}).sort().join("\0"),n=(0,gt.useRef)({key:"",overrides:void 0});if(n.current.key!==t){let i={};for(let r of Object.keys(e??{})){let o=(d,k,w)=>{let x=a.current?.[r];return x?x(d,k,w):[]};i[r]=o}n.current={key:t,overrides:e?i:void 0}}return{overrides:n.current.overrides,key:t}}var ft=require("react");function Kt(e){let a=(0,ft.useRef)(e);a.current=e;let t=(0,ft.useRef)(null);t.current===null&&(t.current={fetch:(i,r)=>{let o=a.current;return o?o.fetch(i,r):Promise.reject(new Error("products config removed"))},transform:i=>a.current?.transform(i)??[],get limit(){return a.current?.limit}});let n=e!==void 0;return{config:n?t.current:void 0,enabled:n}}var fa={text:"",completedParams:[],identifiedParams:[],skippedParams:[],pendingSpan:null,suggestions:[],products:[],customFields:null,optionSearch:null,activeDropdownIndex:-1,newParamId:null,isLoading:!0,isReady:!1,error:null,segments:[],actionableSuggestions:[],filteredOptions:[],dropdownLoading:!0,dropdownOptions:[],skeletonOptions:null,skeletonSuggestion:null,dropdownSuggestion:null,skeletonRequested:!1,skeletonExiting:!1,activeFormatType:"options",dateView:null,dateRangeStart:null,placeholderText:"",optionQuery:"",isSearchingOptions:!1,isDropdownOpen:!1,isActivePillSelected:!1,filterBase:0,filterInProgress:!1,pillTapped:!1,skipNextFetch:!1,lastRawQuery:"",isFocused:!1,editingParam:null,editingIdentified:null,editingAnchor:null,editingTail:null,caretOffset:null,inSelectionAnimation:!1,dateViewMonth:null,pendingRangeStart:null};function ot({onSubmit:e,onResult:a,onError:t,optionOverrides:n,maskCompletedText:i,apiConfig:r,additionalContext:o,visitorId:d,columns:k=2,dropdownTrigger:w,optionsPosition:x,closeDropdownOnBlur:E,showNonTappableOptions:m,showOptionIcons:y,showOptionImages:O,showOptionCounts:A,showSkipButton:Z,showProducts:H,productImageFallback:D="image",onFocus:T,onBlur:F,value:R,completedParams:P,onChange:Q,onParamsChange:pe,products:ye,onProductSelect:he,source:ke,setCursor:$}){let f=(0,I.useRef)(null),[Oe,Ce]=(0,I.useState)(null),Pe=(0,I.useRef)(e);Pe.current=e;let ue=(0,I.useRef)(a);ue.current=a;let Se=(0,I.useRef)(t);Se.current=t;let me=(0,I.useRef)(Q);me.current=Q;let ie=(0,I.useRef)(pe);ie.current=pe;let X=(0,I.useRef)(T);X.current=T;let ge=(0,I.useRef)(F);ge.current=F;let fe=(0,I.useRef)($);fe.current=$;let c=(0,I.useRef)(he);c.current=he;let g=(0,I.useRef)(d);g.current=d;let u=(0,I.useRef)(()=>{let h=g.current;return typeof h=="function"?h():h}).current,b=Kt(ye),C=Ft(n);(0,I.useEffect)(()=>{if(typeof document>"u")return;let h=new Ke.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:r,additionalContext:o,visitorId:u,optionOverrides:C.overrides,maskCompletedText:i,columns:k,dropdownTrigger:w,optionsPosition:x,closeDropdownOnBlur:E,showNonTappableOptions:m,showProducts:H,source:ke,value:R,completedParams:P,onSubmit:(...B)=>Pe.current?.(...B),onResult:(...B)=>ue.current?.(...B),onError:(...B)=>Se.current?.(...B),onChange:(...B)=>me.current?.(...B),onParamsChange:(...B)=>ie.current?.(...B),onFocus:()=>X.current?.(),onBlur:()=>ge.current?.(),onProductSelect:B=>c.current?.(B),setCursor:B=>fe.current?.(B),products:b.config});f.current=h,Ce(h.getState());let J=h.subscribe(B=>Ce(B));return()=>{J(),h.destroy(),f.current===h&&(f.current=null)}},[]),(0,I.useEffect)(()=>{R!==void 0&&f.current?.setValue(R)},[R]),(0,I.useEffect)(()=>{P!==void 0&&f.current?.setCompletedParams(P)},[P]);let l=JSON.stringify(r??null),W;try{W=JSON.stringify(o??null)}catch{W="[unstringifiable]"}(0,I.useEffect)(()=>{f.current?.update({apiConfig:r,additionalContext:o,optionOverrides:C.overrides,dropdownTrigger:w,optionsPosition:x,closeDropdownOnBlur:E,showNonTappableOptions:m,showProducts:H})},[l,W,C.key,w,x,E,m,H]);let _=(0,I.useRef)(!1);(0,I.useEffect)(()=>{if(!_.current){_.current=!0;return}f.current?.update({products:b.config})},[b.enabled]);let oe=(0,I.useRef)(null);oe.current===null&&(oe.current={handleTextChange:h=>f.current?.handleTextChange(h),handleKeyDown:h=>{let J="nativeEvent"in h?h.nativeEvent:h;f.current?.handleKeyDown(J)},setFocused:h=>f.current?.setFocused(h),startEditingParam:h=>f.current?.startEditingParam(h),exitEditMode:()=>f.current?.exitEditMode(),handleCaretAfterInput:h=>f.current?.handleCaretAfterInput(h),handleCaretMove:h=>f.current?.handleCaretMove(h),replaceEditingRange:h=>f.current?.replaceEditingRange(h)??!1,setActivePill:h=>f.current?.setActivePill(h),skipActivePill:()=>f.current?.skipActivePill(),removeLastParam:()=>f.current?.removeLastParam(),clearNewParamId:()=>f.current?.clearNewParamId(),reset:()=>f.current?.reset(),recordSubmit:h=>f.current?.recordSubmit(h),selectOption:h=>f.current?.selectOption(h),selectProduct:h=>f.current?.selectProduct(h),setActiveDropdownIndex:h=>f.current?.setActiveDropdownIndex(h),clearHighlight:h=>f.current?.clearHighlight(h),showPreviousMonth:()=>f.current?.showPreviousMonth(),showNextMonth:()=>f.current?.showNextMonth(),handleFocus:()=>f.current?.setFocused(!0),handleBlur:()=>f.current?.setFocused(!1)});let v=oe.current,De=(0,I.useCallback)(h=>{let J=h.target.value,st=J.length>0&&!h.nativeEvent?.isComposing&&J[0]!==J[0].toUpperCase()?J[0].toUpperCase()+J.slice(1):J;f.current?.handleTextChange(st)},[]),We=(0,I.useCallback)(h=>{f.current?.handleKeyDown(h.nativeEvent)},[]),be=f.current,p=Oe??fa,ve=R!==void 0?R:p.text,Le=P!==void 0?P:p.completedParams,Ie=p.actionableSuggestions,ze=Ie[0],Ee=be?.listboxId??"",Ne=p.activeDropdownIndex>=0&&be?`${Ee}-option-${p.activeDropdownIndex}`:void 0,q=p.editingParam,Te=p.editingIdentified,Be=q?{type:q.suggestionType,text:q.suggestionPlaceholder,required:!0,options:q.options}:Te?{type:Te.type,text:(0,Ke.identifiedParamLabel)(Te.type),required:!0,options:[]}:null,Ye=p.dropdownSuggestion??Be??ze,rt=Be?[Be]:Ie,_e=(0,Ke.dateSelectionFor)(p),je=!be||p.dropdownLoading;return{completedParams:Le,skippedParams:p.skippedParams,identifiedParams:p.identifiedParams,suggestionPills:Ie,setActivePill:v.setActivePill,skipActivePill:v.skipActivePill,removeLastParam:v.removeLastParam,segments:p.segments,newParamId:p.newParamId,clearNewParamId:v.clearNewParamId,suggestions:p.suggestions,activeIndex:p.activeDropdownIndex,isReady:p.isReady,isLoading:je,isFocused:p.isFocused,isDropdownOpen:p.isDropdownOpen,isActivePillSelected:p.isActivePillSelected,placeholderText:p.placeholderText,listboxId:Ee,error:p.error,products:p.products,customFields:p.customFields,selectProduct:v.selectProduct,handleTextChange:v.handleTextChange,handleKeyDown:v.handleKeyDown,setFocused:v.setFocused,editingParam:q,editingIdentified:Te,editingAnchor:p.editingAnchor,caretOffset:p.caretOffset,startEditingParam:v.startEditingParam,exitEditMode:v.exitEditMode,handleCaretAfterInput:v.handleCaretAfterInput,handleCaretMove:v.handleCaretMove,replaceEditingRange:v.replaceEditingRange,inputProps:{value:ve,placeholder:p.placeholderText||void 0,onChange:De,onKeyDown:We,onFocus:v.handleFocus,onBlur:v.handleBlur,role:"combobox","aria-expanded":p.isDropdownOpen,"aria-activedescendant":Ne,"aria-autocomplete":"list","aria-controls":Ee},reset:v.reset,recordSubmit:v.recordSubmit,dropdownProps:{suggestions:Ye?[{...Ye,options:p.dropdownOptions}]:[],activeIndex:p.activeDropdownIndex,onSelect:v.selectOption,onHighlight:v.setActiveDropdownIndex,onUnhighlight:v.clearHighlight,isOpen:p.isDropdownOpen,id:Ee,pills:rt,activeSelected:p.isActivePillSelected,onPillClick:v.setActivePill,onSkip:v.skipActivePill,showSkipButton:(Z??!0)&&!q&&!Te,showOptionIcons:y??!0,showOptionImages:O??!0,showOptionCounts:A??!0,skipDisabled:p.inSelectionAnimation,isLoading:je,skeletonExiting:p.skeletonExiting,isInputEmpty:ve.trim().length===0,products:p.products,productImageFallback:D,onProductSelect:v.selectProduct,onProductFocusChange:v.setFocused,formatType:p.activeFormatType,dateView:p.dateView,selectedDateIso:_e.selectedIso,selectedDateRange:_e.selectedRange,dateRangeStart:_e.rangeStart,onPreviousMonth:v.showPreviousMonth,onNextMonth:v.showNextMonth,optionsPosition:x??"below"}}}var G=require("@magicx-eng/ai-autocomplete-vanilla"),S=require("react"),nt;function ba(){if(nt!==void 0)return nt;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),nt=e.contentEditable==="plaintext-only",nt}function Gt(e){let{segments:a,showChipIcons:t=!0,showChipImages:n=!0,newParamId:i,editingParam:r,editingIdentified:o,editingAnchor:d,caretOffset:k,placeholderText:w,isFocused:x,isDropdownOpen:E,listboxId:m,activeDescendantId:y,autoFocus:O,handleTextChange:A,handleKeyDown:Z,handleCaretAfterInput:H,handleCaretMove:D,startEditingParam:T,replaceEditingRange:F,setFocused:R}=e,P=(0,S.useRef)(null),Q=(0,S.useRef)(!1),pe=(0,S.useRef)(""),ye=(0,S.useRef)(""),he=(0,S.useRef)(null),ke=(0,S.useRef)(0);he.current=k,(0,S.useEffect)(()=>{if(!O)return;let c=P.current;if(!c)return;document.activeElement===c?R(!0):c.focus();let g=c.ownerDocument??document,u=g.getSelection(),b=u&&u.rangeCount>0&&c.contains(u.anchorNode);if(u&&!b){let C=g.createRange();C.selectNodeContents(c),C.collapse(!0),u.removeAllRanges(),u.addRange(C)}},[O,R]),(0,S.useEffect)(()=>{let c=P.current;if(!c)return;let g=c.ownerDocument??document,u=()=>{let b=g.getSelection();if(!b||b.rangeCount===0||!b.anchorNode||!c.contains(b.anchorNode))return;let C=b.anchorNode,l=C.nodeType===Node.ELEMENT_NODE?C:C.parentElement,_=(b.isCollapsed?l?.closest("strong[data-param-id]"):null)?.dataset.paramId??null,oe=r?.id??o?.id??null;if(_&&_!==oe){T(_);return}performance.now()-ke.current<50||D((0,G.getCursorOffset)(c))};return g.addEventListener("selectionchange",u),()=>g.removeEventListener("selectionchange",u)},[r,o,T,D]),(0,S.useEffect)(()=>{let c=P.current;if(!c)return;let g=u=>{let b=(0,G.chipIdFromTap)(c,u.target);b&&(T(b),(0,G.keepCaretOnChip)(c,b))};return c.addEventListener("click",g),()=>c.removeEventListener("click",g)},[T]),(0,S.useLayoutEffect)(()=>{let c=P.current;c&&(0,G.renderEditableContent)({input:c,segments:a,newParamId:i,editingParamId:r?.id??null,placeholderText:w??"",isFocused:x,showChipIcons:t,showChipImages:n})},[a,i,r,w,x,t,n]),(0,S.useLayoutEffect)(()=>{let c=pe.current,g=i??"";if(pe.current=g,!g||g===c)return;let u=P.current;if(!u)return;u.focus();let b=he.current??(0,G.plainTextLength)(u);(0,G.setCursorOffset)(u,b)},[i]),(0,S.useLayoutEffect)(()=>{let c=ye.current,g=r?.id??"";if(ye.current=g,!g||g===c||d==null)return;let u=P.current;u&&(0,G.setCursorOffset)(u,d)},[r,d]);let $=(0,S.useCallback)(()=>{if(Q.current)return;let c=P.current;if(!c)return;let g=(0,G.extractPlainText)(c),b=g.length>0&&g[0]!==g[0].toUpperCase()?g[0].toUpperCase()+g.slice(1):g;A(b)},[A]),f=(0,S.useCallback)(()=>{ke.current=performance.now(),$();let c=P.current;c&&H((0,G.getCursorOffset)(c))},[$,H]);(0,S.useEffect)(()=>{let c=P.current;if(!c)return;let g=u=>{let b=u,C=b.inputType;if(C==="insertParagraph"||C==="insertLineBreak"||C==="insertFromDrop"){u.preventDefault();return}if(C.startsWith("insert")||C.startsWith("delete")){let l=C.startsWith("delete")?"":b.data??"";F(l)&&u.preventDefault()}};return c.addEventListener("beforeinput",g),()=>c.removeEventListener("beforeinput",g)},[F]);let Oe=(0,S.useCallback)(()=>{Q.current=!0},[]),Ce=(0,S.useCallback)(()=>{Q.current=!1,$()},[$]),Pe=(0,S.useCallback)(c=>{c.preventDefault();let g=P.current;if(!g)return;let u=(c.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!u)return;let b=g.ownerDocument??document,C=b.getSelection();if(!C||C.rangeCount===0)return;let l=C.getRangeAt(0);if(!g.contains(l.startContainer))return;l.deleteContents();let W=b.createTextNode(u);l.insertNode(W),l.setStartAfter(W),l.collapse(!0),C.removeAllRanges(),C.addRange(l),$()},[$]),ue=(0,S.useCallback)(c=>Z(c),[Z]),Se=(0,S.useCallback)(()=>R(!0),[R]),me=(0,S.useCallback)(()=>R(!1),[R]),ie=(0,S.useCallback)(()=>P.current?.focus(),[]),X=(0,S.useCallback)(()=>P.current?.blur(),[]),ge=(0,S.useCallback)(()=>{let c=P.current;return c?(0,G.extractPlainText)(c):""},[]),fe=ba()?"plaintext-only":"true";return{inputRef:P,editorProps:{ref:P,contentEditable:fe,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":m,"aria-expanded":E,"aria-activedescendant":y,spellCheck:!0,enterKeyHint:"send",onInput:f,onKeyDown:ue,onCompositionStart:Oe,onCompositionEnd:Ce,onPaste:Pe,onFocus:Se,onBlur:me},getPlainText:ge,focus:ie,blur:X}}var ae=require("react/jsx-runtime");function va(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var Wt=(0,N.forwardRef)(function({onSubmit:a,onResult:t,onError:n,optionOverrides:i,maskCompletedText:r,className:o,apiConfig:d,additionalContext:k,visitorId:w,columns:x,pillPlacement:E="dropdown",mode:m="auto",optionsPosition:y="below",animations:O=!0,dropdownTrigger:A,closeDropdownOnBlur:Z,showNonTappableOptions:H,showOptionIcons:D=!0,showChipIcons:T=!0,showChipImages:F=!0,showOptionImages:R=!0,showOptionCounts:P=!0,showSkipButton:Q,showProducts:pe,productsLayout:ye,productImageFallback:he,autoFocus:ke=!0,onFocus:$,onBlur:f,value:Oe,completedParams:Ce,onChange:Pe,onParamsChange:ue,products:Se,onProductSelect:me,submitButton:ie,resetOnSubmit:X=!0},ge){let fe=(0,N.useRef)(null),c=(0,N.useRef)(null),g=(0,N.useRef)(()=>{}),u=(0,N.useRef)(null),b=(0,N.useRef)(null);(0,N.useEffect)(()=>{let L=fe.current;if(L)return u.current?u.current.setMode(m):u.current=new Ge.ModeController(L,m),()=>{u.current?.destroy(),u.current=null}},[m]);let C=(0,N.useCallback)(L=>{let ne=b.current?.current;ne&&(ne.focus(),(0,Ge.setCursorOffset)(ne,L))},[]),{completedParams:l,skippedParams:W,identifiedParams:_,isReady:oe,customFields:v,suggestionPills:De,setActivePill:We,skipActivePill:be,segments:p,newParamId:ve,clearNewParamId:Le,placeholderText:Ie,isFocused:ze,isDropdownOpen:Ee,isActivePillSelected:Ne,isLoading:q,activeIndex:Te,listboxId:Be,handleTextChange:Ye,handleKeyDown:rt,setFocused:_e,editingParam:je,editingIdentified:h,editingAnchor:J,caretOffset:B,startEditingParam:st,handleCaretAfterInput:_t,handleCaretMove:qt,replaceEditingRange:Ut,dropdownProps:Qt,reset:Ze,recordSubmit:bt}=ot({onSubmit:L=>g.current(L),onResult:t,onError:n,optionOverrides:i,maskCompletedText:r,apiConfig:d,additionalContext:k,visitorId:w,columns:x,dropdownTrigger:A,optionsPosition:y,closeDropdownOnBlur:Z,showNonTappableOptions:H,showOptionIcons:D,showOptionImages:R,showOptionCounts:P,showSkipButton:Q,showProducts:pe,onFocus:$,onBlur:f,value:Oe,completedParams:Ce,onChange:Pe,onParamsChange:ue,products:Se,onProductSelect:me,source:"full-sdk",setCursor:C});(0,N.useEffect)(()=>{if(!ve)return;let L=window.setTimeout(()=>Le(),650);return()=>window.clearTimeout(L)},[ve,Le]);let Yt=Te>=0?`${Be}-option-${Te}`:void 0,{inputRef:lt,editorProps:jt,focus:$e,blur:vt,getPlainText:wt}=Gt({segments:p,newParamId:ve,editingParam:je,editingIdentified:h,editingAnchor:J,caretOffset:B,placeholderText:Ie,isFocused:ze,showChipIcons:T,showChipImages:F,isDropdownOpen:Ee,listboxId:Be,activeDescendantId:Yt,autoFocus:ke,handleTextChange:Ye,handleKeyDown:rt,handleCaretAfterInput:_t,handleCaretMove:qt,startEditingParam:st,replaceEditingRange:Ut,setFocused:_e});b.current=lt,(0,N.useLayoutEffect)(()=>{let L=c.current,ne=lt.current;if(!L||!ne)return;let qe=()=>{let yt=L.firstElementChild;if(!yt)return;let Xt=yt.getBoundingClientRect(),Jt=ne.getBoundingClientRect();Xt.top>=Jt.bottom-2?L.setAttribute("data-aia-pill-wrapped",""):L.removeAttribute("data-aia-pill-wrapped")};qe();let xt=new ResizeObserver(qe);return xt.observe(ne),()=>xt.disconnect()},[p,De.length,q,lt]),(0,N.useImperativeHandle)(ge,()=>({focus:$e,blur:vt,reset:Ze,setMode:L=>u.current?.setMode(L),skipActivePill:be}),[$e,vt,Ze,be]);let Ve=!!p.length||l.length>0,dt=(0,N.useCallback)(L=>{if(!Ve)return;let ne=wt(),qe=(0,Ge.buildSubmitResult)(ne,l,W,{identifiedParams:_,isReady:oe,customFields:v});L&&bt(qe),a(qe),X&&Ze()},[bt,X,Ve,l,W,_,oe,v,a,Ze,wt]);g.current=()=>dt(!1);let Zt=(0,N.useCallback)(L=>{L.target?.closest("[data-aia-pill]")||$e()},[$e]),$t=E==="inline",Vt=E==="dropdown";return(0,ae.jsxs)("div",{ref:fe,className:`magicx-aia ${Me.container} ${o??""}`,"data-pill-placement":E,"data-options-position":y,"data-animations":O?"on":"off","data-mode":va(m),children:[(0,ae.jsx)(at,{...Qt,showPills:Vt,productsLayout:ye,productImageFallback:he}),(0,ae.jsxs)("div",{className:Me.inputWrapper,"data-aia-input-wrapper":"",onClick:Zt,children:[(0,ae.jsxs)("div",{className:Me.editorArea,"data-aia-editor":"",children:[(0,ae.jsx)("div",{...jt,className:Me.input,"data-aia-input":""}),$t&&(q||De.length>0)&&(0,ae.jsx)("span",{ref:c,className:Me.pillListContainer,"data-aia-pill-list-container":"",children:(0,ae.jsx)(Je,{pills:De,activePillIndex:0,activeSelected:Ne,onSelectPill:We,loading:q})})]}),ie===null?null:ie===void 0?(0,ae.jsx)(Ht,{disabled:!Ve,onClick:()=>dt(!0)}):(0,ae.jsx)("span",{"data-aia-submit":"","data-aia-submit-slot":"",className:Me.submitSlot,onClick:L=>{Ve&&(L.stopPropagation(),dt(!0))},children:ie})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,DATE_RANGE_META_END,DATE_RANGE_META_START,DEFAULT_OPTION_COUNT_UNIT,PRODUCT_PATH_PREFIX,WEEKDAY_LABELS,buildSubmitResult,cellDay,cellIso,dateCellMarks,formatDate,formatDateRange,formatOptionCount,isoDate,monthLabel,optionCountLabel,optionHasImage,optionImageSrc,optionLabel,parseDate,parseLooseDate,parseLooseDateRange,productFromMatchedItem,productsFromCustomFields,sanitizeOptionIconSvg,selectedRangeFor,useAIAutocomplete,visibleDateRange,withSkippedParams});
|
|
2252
|
+
`,document.head.appendChild(e)}var Bt={submitButton:"aia-submitButton-otz7H"};var it=require("react/jsx-runtime");function Ht({disabled:e,onClick:a}){return(0,it.jsx)("button",{type:"button","data-aia-submit":"",className:Bt.submitButton,disabled:e,onClick:t=>{t.stopPropagation(),a()},"aria-label":"Submit",children:(0,it.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,it.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var Ke=require("@magicx-eng/ai-autocomplete-vanilla"),I=require("react");var gt=require("react");function Ft(e){let a=(0,gt.useRef)(e);a.current=e;let t=Object.keys(e??{}).sort().join("\0"),n=(0,gt.useRef)({key:"",overrides:void 0});if(n.current.key!==t){let i={};for(let r of Object.keys(e??{})){let o=(d,k,w)=>{let x=a.current?.[r];return x?x(d,k,w):[]};i[r]=o}n.current={key:t,overrides:e?i:void 0}}return{overrides:n.current.overrides,key:t}}var ft=require("react");function Kt(e){let a=(0,ft.useRef)(e);a.current=e;let t=(0,ft.useRef)(null);t.current===null&&(t.current={fetch:(i,r)=>{let o=a.current;return o?o.fetch(i,r):Promise.reject(new Error("products config removed"))},transform:i=>a.current?.transform(i)??[],get limit(){return a.current?.limit}});let n=e!==void 0;return{config:n?t.current:void 0,enabled:n}}var fa={text:"",completedParams:[],identifiedParams:[],skippedParams:[],pendingSpan:null,suggestions:[],products:[],customFields:null,optionSearch:null,activeDropdownIndex:-1,newParamId:null,isLoading:!0,isReady:!1,error:null,segments:[],actionableSuggestions:[],filteredOptions:[],dropdownLoading:!0,dropdownOptions:[],skeletonOptions:null,skeletonSuggestion:null,dropdownSuggestion:null,skeletonRequested:!1,skeletonExiting:!1,activeFormatType:"options",dateView:null,dateRangeStart:null,placeholderText:"",optionQuery:"",isSearchingOptions:!1,isDropdownOpen:!1,isActivePillSelected:!1,filterBase:0,filterInProgress:!1,pillTapped:!1,skipNextFetch:!1,lastRawQuery:"",isFocused:!1,editingParam:null,editingIdentified:null,editingAnchor:null,editingTail:null,caretOffset:null,inSelectionAnimation:!1,dateViewMonth:null,pendingRangeStart:null};function ot({onSubmit:e,onResult:a,onError:t,optionOverrides:n,maskCompletedText:i,apiConfig:r,additionalContext:o,visitorId:d,columns:k=2,dropdownTrigger:w,optionsPosition:x,closeDropdownOnBlur:E,showNonTappableOptions:m,showOptionIcons:y,showOptionImages:O,showOptionCounts:A,showSkipButton:Z,showProducts:H,productImageFallback:D="image",onFocus:T,onBlur:F,value:R,completedParams:P,onChange:Y,onParamsChange:pe,products:ye,onProductSelect:he,source:ke,setCursor:$}){let f=(0,I.useRef)(null),[Oe,Ce]=(0,I.useState)(null),Pe=(0,I.useRef)(e);Pe.current=e;let ue=(0,I.useRef)(a);ue.current=a;let Se=(0,I.useRef)(t);Se.current=t;let me=(0,I.useRef)(Y);me.current=Y;let ie=(0,I.useRef)(pe);ie.current=pe;let X=(0,I.useRef)(T);X.current=T;let ge=(0,I.useRef)(F);ge.current=F;let fe=(0,I.useRef)($);fe.current=$;let c=(0,I.useRef)(he);c.current=he;let g=(0,I.useRef)(d);g.current=d;let u=(0,I.useRef)(()=>{let h=g.current;return typeof h=="function"?h():h}).current,b=Kt(ye),C=Ft(n);(0,I.useEffect)(()=>{if(typeof document>"u")return;let h=new Ke.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:r,additionalContext:o,visitorId:u,optionOverrides:C.overrides,maskCompletedText:i,columns:k,dropdownTrigger:w,optionsPosition:x,closeDropdownOnBlur:E,showNonTappableOptions:m,showProducts:H,source:ke,value:R,completedParams:P,onSubmit:(...B)=>Pe.current?.(...B),onResult:(...B)=>ue.current?.(...B),onError:(...B)=>Se.current?.(...B),onChange:(...B)=>me.current?.(...B),onParamsChange:(...B)=>ie.current?.(...B),onFocus:()=>X.current?.(),onBlur:()=>ge.current?.(),onProductSelect:B=>c.current?.(B),setCursor:B=>fe.current?.(B),products:b.config});f.current=h,Ce(h.getState());let J=h.subscribe(B=>Ce(B));return()=>{J(),h.destroy(),f.current===h&&(f.current=null)}},[]),(0,I.useEffect)(()=>{R!==void 0&&f.current?.setValue(R)},[R]),(0,I.useEffect)(()=>{P!==void 0&&f.current?.setCompletedParams(P)},[P]);let l=JSON.stringify(r??null),W;try{W=JSON.stringify(o??null)}catch{W="[unstringifiable]"}(0,I.useEffect)(()=>{f.current?.update({apiConfig:r,additionalContext:o,optionOverrides:C.overrides,dropdownTrigger:w,optionsPosition:x,closeDropdownOnBlur:E,showNonTappableOptions:m,showProducts:H})},[l,W,C.key,w,x,E,m,H]);let _=(0,I.useRef)(!1);(0,I.useEffect)(()=>{if(!_.current){_.current=!0;return}f.current?.update({products:b.config})},[b.enabled]);let oe=(0,I.useRef)(null);oe.current===null&&(oe.current={handleTextChange:h=>f.current?.handleTextChange(h),handleKeyDown:h=>{let J="nativeEvent"in h?h.nativeEvent:h;f.current?.handleKeyDown(J)},setFocused:h=>f.current?.setFocused(h),startEditingParam:h=>f.current?.startEditingParam(h),exitEditMode:()=>f.current?.exitEditMode(),handleCaretAfterInput:h=>f.current?.handleCaretAfterInput(h),handleCaretMove:h=>f.current?.handleCaretMove(h),replaceEditingRange:h=>f.current?.replaceEditingRange(h)??!1,setActivePill:h=>f.current?.setActivePill(h),skipActivePill:()=>f.current?.skipActivePill(),removeLastParam:()=>f.current?.removeLastParam(),clearNewParamId:()=>f.current?.clearNewParamId(),reset:()=>f.current?.reset(),recordSubmit:h=>f.current?.recordSubmit(h),selectOption:h=>f.current?.selectOption(h),selectProduct:h=>f.current?.selectProduct(h),setActiveDropdownIndex:h=>f.current?.setActiveDropdownIndex(h),clearHighlight:h=>f.current?.clearHighlight(h),showPreviousMonth:()=>f.current?.showPreviousMonth(),showNextMonth:()=>f.current?.showNextMonth(),handleFocus:()=>f.current?.setFocused(!0),handleBlur:()=>f.current?.setFocused(!1)});let v=oe.current,De=(0,I.useCallback)(h=>{let J=h.target.value,st=J.length>0&&!h.nativeEvent?.isComposing&&J[0]!==J[0].toUpperCase()?J[0].toUpperCase()+J.slice(1):J;f.current?.handleTextChange(st)},[]),We=(0,I.useCallback)(h=>{f.current?.handleKeyDown(h.nativeEvent)},[]),be=f.current,p=Oe??fa,ve=R!==void 0?R:p.text,Le=P!==void 0?P:p.completedParams,Ie=p.actionableSuggestions,Me=Ie[0],Ee=be?.listboxId??"",Ne=p.activeDropdownIndex>=0&&be?`${Ee}-option-${p.activeDropdownIndex}`:void 0,q=p.editingParam,Te=p.editingIdentified,Be=q?{parameter:q.suggestionParameter,text:q.suggestionPlaceholder,required:!0,options:q.options}:Te?{parameter:Te.parameter,text:(0,Ke.identifiedParamLabel)(Te.parameter),required:!0,options:[]}:null,Ye=p.dropdownSuggestion??Be??Me,rt=Be?[Be]:Ie,_e=(0,Ke.dateSelectionFor)(p),Qe=!be||p.dropdownLoading;return{completedParams:Le,skippedParams:p.skippedParams,identifiedParams:p.identifiedParams,suggestionPills:Ie,setActivePill:v.setActivePill,skipActivePill:v.skipActivePill,removeLastParam:v.removeLastParam,segments:p.segments,newParamId:p.newParamId,clearNewParamId:v.clearNewParamId,suggestions:p.suggestions,activeIndex:p.activeDropdownIndex,isReady:p.isReady,isLoading:Qe,isFocused:p.isFocused,isDropdownOpen:p.isDropdownOpen,isActivePillSelected:p.isActivePillSelected,placeholderText:p.placeholderText,listboxId:Ee,error:p.error,products:p.products,customFields:p.customFields,selectProduct:v.selectProduct,handleTextChange:v.handleTextChange,handleKeyDown:v.handleKeyDown,setFocused:v.setFocused,editingParam:q,editingIdentified:Te,editingAnchor:p.editingAnchor,caretOffset:p.caretOffset,startEditingParam:v.startEditingParam,exitEditMode:v.exitEditMode,handleCaretAfterInput:v.handleCaretAfterInput,handleCaretMove:v.handleCaretMove,replaceEditingRange:v.replaceEditingRange,inputProps:{value:ve,placeholder:p.placeholderText||void 0,onChange:De,onKeyDown:We,onFocus:v.handleFocus,onBlur:v.handleBlur,role:"combobox","aria-expanded":p.isDropdownOpen,"aria-activedescendant":Ne,"aria-autocomplete":"list","aria-controls":Ee},reset:v.reset,recordSubmit:v.recordSubmit,dropdownProps:{suggestions:Ye?[{...Ye,options:p.dropdownOptions}]:[],activeIndex:p.activeDropdownIndex,onSelect:v.selectOption,onHighlight:v.setActiveDropdownIndex,onUnhighlight:v.clearHighlight,isOpen:p.isDropdownOpen,id:Ee,pills:rt,activeSelected:p.isActivePillSelected,onPillClick:v.setActivePill,onSkip:v.skipActivePill,showSkipButton:(Z??!0)&&!q&&!Te,showOptionIcons:y??!0,showOptionImages:O??!0,showOptionCounts:A??!0,skipDisabled:p.inSelectionAnimation,isLoading:Qe,skeletonExiting:p.skeletonExiting,isInputEmpty:ve.trim().length===0,products:p.products,productImageFallback:D,onProductSelect:v.selectProduct,onProductFocusChange:v.setFocused,formatType:p.activeFormatType,dateView:p.dateView,selectedDateIso:_e.selectedIso,selectedDateRange:_e.selectedRange,dateRangeStart:_e.rangeStart,onPreviousMonth:v.showPreviousMonth,onNextMonth:v.showNextMonth,optionsPosition:x??"below"}}}var G=require("@magicx-eng/ai-autocomplete-vanilla"),S=require("react"),nt;function ba(){if(nt!==void 0)return nt;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),nt=e.contentEditable==="plaintext-only",nt}function Gt(e){let{segments:a,showChipIcons:t=!0,showChipImages:n=!0,newParamId:i,editingParam:r,editingIdentified:o,editingAnchor:d,caretOffset:k,placeholderText:w,isFocused:x,isDropdownOpen:E,listboxId:m,activeDescendantId:y,autoFocus:O,handleTextChange:A,handleKeyDown:Z,handleCaretAfterInput:H,handleCaretMove:D,startEditingParam:T,replaceEditingRange:F,setFocused:R}=e,P=(0,S.useRef)(null),Y=(0,S.useRef)(!1),pe=(0,S.useRef)(""),ye=(0,S.useRef)(""),he=(0,S.useRef)(null),ke=(0,S.useRef)(0);he.current=k,(0,S.useEffect)(()=>{if(!O)return;let c=P.current;if(!c)return;document.activeElement===c?R(!0):c.focus();let g=c.ownerDocument??document,u=g.getSelection(),b=u&&u.rangeCount>0&&c.contains(u.anchorNode);if(u&&!b){let C=g.createRange();C.selectNodeContents(c),C.collapse(!0),u.removeAllRanges(),u.addRange(C)}},[O,R]),(0,S.useEffect)(()=>{let c=P.current;if(!c)return;let g=c.ownerDocument??document,u=()=>{let b=g.getSelection();if(!b||b.rangeCount===0||!b.anchorNode||!c.contains(b.anchorNode))return;let C=b.anchorNode,l=C.nodeType===Node.ELEMENT_NODE?C:C.parentElement,_=(b.isCollapsed?l?.closest("strong[data-param-id]"):null)?.dataset.paramId??null,oe=r?.id??o?.id??null;if(_&&_!==oe){T(_);return}performance.now()-ke.current<50||D((0,G.getCursorOffset)(c))};return g.addEventListener("selectionchange",u),()=>g.removeEventListener("selectionchange",u)},[r,o,T,D]),(0,S.useEffect)(()=>{let c=P.current;if(!c)return;let g=u=>{let b=(0,G.chipIdFromTap)(c,u.target);b&&(T(b),(0,G.keepCaretOnChip)(c,b))};return c.addEventListener("click",g),()=>c.removeEventListener("click",g)},[T]),(0,S.useLayoutEffect)(()=>{let c=P.current;c&&(0,G.renderEditableContent)({input:c,segments:a,newParamId:i,editingParamId:r?.id??null,placeholderText:w??"",isFocused:x,showChipIcons:t,showChipImages:n})},[a,i,r,w,x,t,n]),(0,S.useLayoutEffect)(()=>{let c=pe.current,g=i??"";if(pe.current=g,!g||g===c)return;let u=P.current;if(!u)return;u.focus();let b=he.current??(0,G.plainTextLength)(u);(0,G.setCursorOffset)(u,b)},[i]),(0,S.useLayoutEffect)(()=>{let c=ye.current,g=r?.id??"";if(ye.current=g,!g||g===c||d==null)return;let u=P.current;u&&(0,G.setCursorOffset)(u,d)},[r,d]);let $=(0,S.useCallback)(()=>{if(Y.current)return;let c=P.current;if(!c)return;let g=(0,G.extractPlainText)(c),b=g.length>0&&g[0]!==g[0].toUpperCase()?g[0].toUpperCase()+g.slice(1):g;A(b)},[A]),f=(0,S.useCallback)(()=>{ke.current=performance.now(),$();let c=P.current;c&&H((0,G.getCursorOffset)(c))},[$,H]);(0,S.useEffect)(()=>{let c=P.current;if(!c)return;let g=u=>{let b=u,C=b.inputType;if(C==="insertParagraph"||C==="insertLineBreak"||C==="insertFromDrop"){u.preventDefault();return}if(C.startsWith("insert")||C.startsWith("delete")){let l=C.startsWith("delete")?"":b.data??"";F(l)&&u.preventDefault()}};return c.addEventListener("beforeinput",g),()=>c.removeEventListener("beforeinput",g)},[F]);let Oe=(0,S.useCallback)(()=>{Y.current=!0},[]),Ce=(0,S.useCallback)(()=>{Y.current=!1,$()},[$]),Pe=(0,S.useCallback)(c=>{c.preventDefault();let g=P.current;if(!g)return;let u=(c.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!u)return;let b=g.ownerDocument??document,C=b.getSelection();if(!C||C.rangeCount===0)return;let l=C.getRangeAt(0);if(!g.contains(l.startContainer))return;l.deleteContents();let W=b.createTextNode(u);l.insertNode(W),l.setStartAfter(W),l.collapse(!0),C.removeAllRanges(),C.addRange(l),$()},[$]),ue=(0,S.useCallback)(c=>Z(c),[Z]),Se=(0,S.useCallback)(()=>R(!0),[R]),me=(0,S.useCallback)(()=>R(!1),[R]),ie=(0,S.useCallback)(()=>P.current?.focus(),[]),X=(0,S.useCallback)(()=>P.current?.blur(),[]),ge=(0,S.useCallback)(()=>{let c=P.current;return c?(0,G.extractPlainText)(c):""},[]),fe=ba()?"plaintext-only":"true";return{inputRef:P,editorProps:{ref:P,contentEditable:fe,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":m,"aria-expanded":E,"aria-activedescendant":y,spellCheck:!0,enterKeyHint:"send",onInput:f,onKeyDown:ue,onCompositionStart:Oe,onCompositionEnd:Ce,onPaste:Pe,onFocus:Se,onBlur:me},getPlainText:ge,focus:ie,blur:X}}var ae=require("react/jsx-runtime");function va(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var Wt=(0,N.forwardRef)(function({onSubmit:a,onResult:t,onError:n,optionOverrides:i,maskCompletedText:r,className:o,apiConfig:d,additionalContext:k,visitorId:w,columns:x,pillPlacement:E="dropdown",mode:m="auto",optionsPosition:y="below",animations:O=!0,dropdownTrigger:A,closeDropdownOnBlur:Z,showNonTappableOptions:H,showOptionIcons:D=!0,showChipIcons:T=!0,showChipImages:F=!0,showOptionImages:R=!0,showOptionCounts:P=!0,showSkipButton:Y,showProducts:pe,productsLayout:ye,productImageFallback:he,autoFocus:ke=!0,onFocus:$,onBlur:f,value:Oe,completedParams:Ce,onChange:Pe,onParamsChange:ue,products:Se,onProductSelect:me,submitButton:ie,resetOnSubmit:X=!0},ge){let fe=(0,N.useRef)(null),c=(0,N.useRef)(null),g=(0,N.useRef)(()=>{}),u=(0,N.useRef)(null),b=(0,N.useRef)(null);(0,N.useEffect)(()=>{let L=fe.current;if(L)return u.current?u.current.setMode(m):u.current=new Ge.ModeController(L,m),()=>{u.current?.destroy(),u.current=null}},[m]);let C=(0,N.useCallback)(L=>{let ne=b.current?.current;ne&&(ne.focus(),(0,Ge.setCursorOffset)(ne,L))},[]),{completedParams:l,skippedParams:W,identifiedParams:_,isReady:oe,customFields:v,suggestionPills:De,setActivePill:We,skipActivePill:be,segments:p,newParamId:ve,clearNewParamId:Le,placeholderText:Ie,isFocused:Me,isDropdownOpen:Ee,isActivePillSelected:Ne,isLoading:q,activeIndex:Te,listboxId:Be,handleTextChange:Ye,handleKeyDown:rt,setFocused:_e,editingParam:Qe,editingIdentified:h,editingAnchor:J,caretOffset:B,startEditingParam:st,handleCaretAfterInput:_t,handleCaretMove:qt,replaceEditingRange:Ut,dropdownProps:jt,reset:Ze,recordSubmit:bt}=ot({onSubmit:L=>g.current(L),onResult:t,onError:n,optionOverrides:i,maskCompletedText:r,apiConfig:d,additionalContext:k,visitorId:w,columns:x,dropdownTrigger:A,optionsPosition:y,closeDropdownOnBlur:Z,showNonTappableOptions:H,showOptionIcons:D,showOptionImages:R,showOptionCounts:P,showSkipButton:Y,showProducts:pe,onFocus:$,onBlur:f,value:Oe,completedParams:Ce,onChange:Pe,onParamsChange:ue,products:Se,onProductSelect:me,source:"full-sdk",setCursor:C});(0,N.useEffect)(()=>{if(!ve)return;let L=window.setTimeout(()=>Le(),650);return()=>window.clearTimeout(L)},[ve,Le]);let Yt=Te>=0?`${Be}-option-${Te}`:void 0,{inputRef:lt,editorProps:Qt,focus:$e,blur:vt,getPlainText:wt}=Gt({segments:p,newParamId:ve,editingParam:Qe,editingIdentified:h,editingAnchor:J,caretOffset:B,placeholderText:Ie,isFocused:Me,showChipIcons:T,showChipImages:F,isDropdownOpen:Ee,listboxId:Be,activeDescendantId:Yt,autoFocus:ke,handleTextChange:Ye,handleKeyDown:rt,handleCaretAfterInput:_t,handleCaretMove:qt,startEditingParam:st,replaceEditingRange:Ut,setFocused:_e});b.current=lt,(0,N.useLayoutEffect)(()=>{let L=c.current,ne=lt.current;if(!L||!ne)return;let qe=()=>{let yt=L.firstElementChild;if(!yt)return;let Xt=yt.getBoundingClientRect(),Jt=ne.getBoundingClientRect();Xt.top>=Jt.bottom-2?L.setAttribute("data-aia-pill-wrapped",""):L.removeAttribute("data-aia-pill-wrapped")};qe();let xt=new ResizeObserver(qe);return xt.observe(ne),()=>xt.disconnect()},[p,De.length,q,lt]),(0,N.useImperativeHandle)(ge,()=>({focus:$e,blur:vt,reset:Ze,setMode:L=>u.current?.setMode(L),skipActivePill:be}),[$e,vt,Ze,be]);let Ve=!!p.length||l.length>0,dt=(0,N.useCallback)(L=>{if(!Ve)return;let ne=wt(),qe=(0,Ge.buildSubmitResult)(ne,l,W,{identifiedParams:_,isReady:oe,customFields:v});L&&bt(qe),a(qe),X&&Ze()},[bt,X,Ve,l,W,_,oe,v,a,Ze,wt]);g.current=()=>dt(!1);let Zt=(0,N.useCallback)(L=>{L.target?.closest("[data-aia-pill]")||$e()},[$e]),$t=E==="inline",Vt=E==="dropdown";return(0,ae.jsxs)("div",{ref:fe,className:`magicx-aia ${ze.container} ${o??""}`,"data-pill-placement":E,"data-options-position":y,"data-animations":O?"on":"off","data-mode":va(m),children:[(0,ae.jsx)(at,{...jt,showPills:Vt,productsLayout:ye,productImageFallback:he}),(0,ae.jsxs)("div",{className:ze.inputWrapper,"data-aia-input-wrapper":"",onClick:Zt,children:[(0,ae.jsxs)("div",{className:ze.editorArea,"data-aia-editor":"",children:[(0,ae.jsx)("div",{...Qt,className:ze.input,"data-aia-input":""}),$t&&(q||De.length>0)&&(0,ae.jsx)("span",{ref:c,className:ze.pillListContainer,"data-aia-pill-list-container":"",children:(0,ae.jsx)(Je,{pills:De,activePillIndex:0,activeSelected:Ne,onSelectPill:We,loading:q})})]}),ie===null?null:ie===void 0?(0,ae.jsx)(Ht,{disabled:!Ve,onClick:()=>dt(!0)}):(0,ae.jsx)("span",{"data-aia-submit":"","data-aia-submit-slot":"",className:ze.submitSlot,onClick:L=>{Ve&&(L.stopPropagation(),dt(!0))},children:ie})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,DATE_RANGE_META_END,DATE_RANGE_META_START,DEFAULT_OPTION_COUNT_UNIT,PRODUCT_PATH_PREFIX,WEEKDAY_LABELS,buildSubmitResult,cellDay,cellIso,dateCellMarks,formatDate,formatDateRange,formatOptionCount,isoDate,monthLabel,optionCountLabel,optionHasImage,optionImageSrc,optionLabel,parseDate,parseLooseDate,parseLooseDateRange,productFromMatchedItem,productsFromCustomFields,sanitizeOptionIconSvg,selectedRangeFor,useAIAutocomplete,visibleDateRange,withSkippedParams});
|
|
2197
2253
|
//# sourceMappingURL=index.js.map
|