@magicx-eng/ai-autocomplete-react 0.39.5 → 0.40.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +17 -14
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +15 -12
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -282,7 +282,7 @@ Skip `<AIAutocompleteDropdown />` and render the suggestions UI yourself. `dropd
|
|
|
282
282
|
|
|
283
283
|
> **Option icons.** An option may carry an icon: `icon_svg` is inline SVG markup and `icon` its name. The built-in dropdown draws the SVG before the option's text, in the text color, and hides it while the row shows its loading skeleton. When rendering options yourself, pass `icon_svg` through the exported `sanitizeOptionIconSvg` before inserting it — it reduces the markup to plain vector drawing and returns `null` for anything else — and use `optionLabel(option)` for the text — it is the option's `text` alone; `icon` is the icon's name and is never shown as text, even when `icon_svg` is missing or fails to draw. A picked option's `icon` / `icon_svg` are copied onto its completed parameter, and the chip in the input draws the glyph before its text. Both surfaces can be switched off: `showOptionIcons: false` renders option rows as text only and `showChipIcons: false` renders chips as text only; either way the icon element is omitted rather than hidden.
|
|
284
284
|
|
|
285
|
-
> **Option pictures and counts.** An option may also carry `image_url` — a picture of the best-matching catalog item offering it — and `item_count`, how many items offer it (each is present only when the server includes it; when it includes counts, the options also arrive ordered by them, most items first; a starting state carries pictures but no counts). The built-in dropdown draws the picture as a square thumbnail before the option's text (in place of its `icon_svg`, so a row never leads with two visuals) and the count as a muted label at the row's trailing edge (`"12 items"`); a skeleton row keeps the tile's placeholder fill and hides the count. The unit word after the number is a token: set `--aia-option-count-unit: "sneakers"` to name what is being counted, `--aia-option-count-unit-one: "sneaker"` for a count of 1 (it falls back to the plural token), or `--aia-option-count-unit: ""` for the number alone. When rendering options yourself, pass `image_url` through the exported `optionImageSrc` before using it as an `<img src>` — it returns the URL only when it is `http(s)` and `null` otherwise — and `formatOptionCount(option.item_count)` gives the number the built-in rows print (`null` when there is no count); `optionCountLabel(count, unit?)` appends a unit for a dropdown that prints the word itself (`"item"` / `"items"` by default; one word, a `{ one, other }` pair, or `""` for none). Both surfaces can be switched off: `showOptionImages: false` renders rows without pictures (an option's icon then draws instead) and `showOptionCounts: false` hides the counts. A picked option's `image_url` is copied onto its completed parameter too, and the chip in the input draws it as a small rounded tile before its text, in place of the icon; `showChipImages: false` renders chips without pictures (the icon then draws instead). The tile is sized by `--aia-option-image-size` (40px), rounded by `--aia-option-image-radius` (12px), spaced by `--aia-option-image-gap` (12px) and filled by `--aia-option-image-bg` (default: `--aia-skeleton-bg`) while its picture loads; in a grid with pictures, an icon row draws its glyph at `--aia-option-tile-icon-size` (1.5em) so it holds the picture column; the count reads `--aia-option-count-font-size` (12px), `--aia-option-count-color` and `--aia-option-count-opacity` (0.6); the chip's tile reads `--aia-chip-image-size` (1.25em of the chip's font), `--aia-chip-image-radius` (4px) and `--aia-chip-image-bg` (default: `--aia-skeleton-bg`).
|
|
285
|
+
> **Option pictures and counts.** An option may also carry `image_url` — a picture of the best-matching catalog item offering it — and `item_count`, how many items offer it (each is present only when the server includes it; when it includes counts, the options also arrive ordered by them, most items first; a starting state carries pictures but no counts). The built-in dropdown draws the picture as a square thumbnail before the option's text (in place of its `icon_svg`, so a row never leads with two visuals) and the count as a muted label at the row's trailing edge (`"12 items"`); a skeleton row keeps the tile's placeholder fill and hides the count. Icons and pictures are all-or-nothing per list: if any tappable option would draw neither, no row draws one, so a list never mixes rows with and without a leading visual (non-tappable rows don't count). A custom dropdown can apply the same rule with the exported `optionsShowLeadingVisuals(options, showIcons, showImages)`. The unit word after the number is a token: set `--aia-option-count-unit: "sneakers"` to name what is being counted, `--aia-option-count-unit-one: "sneaker"` for a count of 1 (it falls back to the plural token), or `--aia-option-count-unit: ""` for the number alone. When rendering options yourself, pass `image_url` through the exported `optionImageSrc` before using it as an `<img src>` — it returns the URL only when it is `http(s)` and `null` otherwise — and `formatOptionCount(option.item_count)` gives the number the built-in rows print (`null` when there is no count); `optionCountLabel(count, unit?)` appends a unit for a dropdown that prints the word itself (`"item"` / `"items"` by default; one word, a `{ one, other }` pair, or `""` for none). Both surfaces can be switched off: `showOptionImages: false` renders rows without pictures (an option's icon then draws instead) and `showOptionCounts: false` hides the counts. A picked option's `image_url` is copied onto its completed parameter too, and the chip in the input draws it as a small rounded tile before its text, in place of the icon; `showChipImages: false` renders chips without pictures (the icon then draws instead). The tile is sized by `--aia-option-image-size` (40px), rounded by `--aia-option-image-radius` (12px), spaced by `--aia-option-image-gap` (12px) and filled by `--aia-option-image-bg` (default: `--aia-skeleton-bg`) while its picture loads; in a grid with pictures, an icon row draws its glyph at `--aia-option-tile-icon-size` (1.5em) so it holds the picture column; the count reads `--aia-option-count-font-size` (12px), `--aia-option-count-color` and `--aia-option-count-opacity` (0.6); the chip's tile reads `--aia-chip-image-size` (1.25em of the chip's font), `--aia-chip-image-radius` (4px) and `--aia-chip-image-bg` (default: `--aia-skeleton-bg`).
|
|
286
286
|
|
|
287
287
|
> **Parameter names under options.** An option that completes the word being typed (the server's `traditional_autocomplete` suggestion) can read the same as an option of another parameter, so the built-in dropdown draws the name of the parameter it answers under its text, muted and smaller (`Flavor`, `Subcategory`); the SDK sets it as `parameterLabel` from the option's `parameter`, and a skeleton row hides it. It reads `--aia-option-parameter-font-size` (12px), `--aia-option-parameter-color` and `--aia-option-parameter-opacity` (0.6).
|
|
288
288
|
|
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { AutocompleteResult, OptionOverrides, APIConfig, AppearanceMode, CompletedParamState, ProductsLayout, ProductImageFallback, ProductsConfig, Product, MatchedItem, Suggestion, SuggestionOption, FormatType, DateMonthView, DateRange, SkippedParamState, IdentifiedParamState, Segment, CustomFieldsReport } from '@magicx-eng/ai-autocomplete-vanilla';
|
|
2
|
-
export { APIConfig, APIKeyConfig, AccessTokenConfig, AccessTokenResult, AppearanceMode, AutocompleteResult, CompletedParam, CompletedParamState, CustomFieldsReport, DATE_RANGE_META_END, DATE_RANGE_META_START, DEFAULT_OPTION_COUNT_UNIT, DateMonthView, DateRange, ExpressedFilter, FilterOp, FormatType, IdentifiedParam, IdentifiedParamState, MatchedItem, MatchedItems, OptionOverrides, PRODUCT_PATH_PREFIX, Product, ProductImageFallback, ProductsConfig, ProductsLayout, Segment, SkippedParamState, SubmitResultExtras, Suggestion, SuggestionOption, TaskKind, WEEKDAY_LABELS, buildSubmitResult, cellDay, cellIso, dateCellMarks, formatDate, formatDateRange, formatOptionCount, isoDate, monthLabel, optionCountLabel, optionHasImage, optionImageSources, optionImageSrc, optionLabel, parseDate, parseLooseDate, parseLooseDateRange, productFromMatchedItem, productImageSources, productsFromCustomFields, sanitizeOptionIconSvg, selectedRangeFor, visibleDateRange, withSkippedParams } from '@magicx-eng/ai-autocomplete-vanilla';
|
|
2
|
+
export { APIConfig, APIKeyConfig, AccessTokenConfig, AccessTokenResult, AppearanceMode, AutocompleteResult, CompletedParam, CompletedParamState, CustomFieldsReport, DATE_RANGE_META_END, DATE_RANGE_META_START, DEFAULT_OPTION_COUNT_UNIT, DateMonthView, DateRange, ExpressedFilter, FilterOp, FormatType, IdentifiedParam, IdentifiedParamState, MatchedItem, MatchedItems, OptionOverrides, PRODUCT_PATH_PREFIX, Product, ProductImageFallback, ProductsConfig, ProductsLayout, Segment, SkippedParamState, SubmitResultExtras, Suggestion, SuggestionOption, TaskKind, WEEKDAY_LABELS, buildSubmitResult, cellDay, cellIso, dateCellMarks, formatDate, formatDateRange, formatOptionCount, isoDate, monthLabel, optionCountLabel, optionHasImage, optionImageSources, optionImageSrc, optionLabel, optionsShowLeadingVisuals, parseDate, parseLooseDate, parseLooseDateRange, productFromMatchedItem, productImageSources, productsFromCustomFields, sanitizeOptionIconSvg, selectedRangeFor, visibleDateRange, withSkippedParams } from '@magicx-eng/ai-autocomplete-vanilla';
|
|
3
3
|
import * as react from 'react';
|
|
4
4
|
import { ReactNode, KeyboardEvent, ChangeEvent } from 'react';
|
|
5
5
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { AutocompleteResult, OptionOverrides, APIConfig, AppearanceMode, CompletedParamState, ProductsLayout, ProductImageFallback, ProductsConfig, Product, MatchedItem, Suggestion, SuggestionOption, FormatType, DateMonthView, DateRange, SkippedParamState, IdentifiedParamState, Segment, CustomFieldsReport } from '@magicx-eng/ai-autocomplete-vanilla';
|
|
2
|
-
export { APIConfig, APIKeyConfig, AccessTokenConfig, AccessTokenResult, AppearanceMode, AutocompleteResult, CompletedParam, CompletedParamState, CustomFieldsReport, DATE_RANGE_META_END, DATE_RANGE_META_START, DEFAULT_OPTION_COUNT_UNIT, DateMonthView, DateRange, ExpressedFilter, FilterOp, FormatType, IdentifiedParam, IdentifiedParamState, MatchedItem, MatchedItems, OptionOverrides, PRODUCT_PATH_PREFIX, Product, ProductImageFallback, ProductsConfig, ProductsLayout, Segment, SkippedParamState, SubmitResultExtras, Suggestion, SuggestionOption, TaskKind, WEEKDAY_LABELS, buildSubmitResult, cellDay, cellIso, dateCellMarks, formatDate, formatDateRange, formatOptionCount, isoDate, monthLabel, optionCountLabel, optionHasImage, optionImageSources, optionImageSrc, optionLabel, parseDate, parseLooseDate, parseLooseDateRange, productFromMatchedItem, productImageSources, productsFromCustomFields, sanitizeOptionIconSvg, selectedRangeFor, visibleDateRange, withSkippedParams } from '@magicx-eng/ai-autocomplete-vanilla';
|
|
2
|
+
export { APIConfig, APIKeyConfig, AccessTokenConfig, AccessTokenResult, AppearanceMode, AutocompleteResult, CompletedParam, CompletedParamState, CustomFieldsReport, DATE_RANGE_META_END, DATE_RANGE_META_START, DEFAULT_OPTION_COUNT_UNIT, DateMonthView, DateRange, ExpressedFilter, FilterOp, FormatType, IdentifiedParam, IdentifiedParamState, MatchedItem, MatchedItems, OptionOverrides, PRODUCT_PATH_PREFIX, Product, ProductImageFallback, ProductsConfig, ProductsLayout, Segment, SkippedParamState, SubmitResultExtras, Suggestion, SuggestionOption, TaskKind, WEEKDAY_LABELS, buildSubmitResult, cellDay, cellIso, dateCellMarks, formatDate, formatDateRange, formatOptionCount, isoDate, monthLabel, optionCountLabel, optionHasImage, optionImageSources, optionImageSrc, optionLabel, optionsShowLeadingVisuals, parseDate, parseLooseDate, parseLooseDateRange, productFromMatchedItem, productImageSources, productsFromCustomFields, sanitizeOptionIconSvg, selectedRangeFor, visibleDateRange, withSkippedParams } from '@magicx-eng/ai-autocomplete-vanilla';
|
|
3
3
|
import * as react from 'react';
|
|
4
4
|
import { ReactNode, KeyboardEvent, ChangeEvent } from 'react';
|
|
5
5
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var bt=Object.defineProperty;var na=Object.getOwnPropertyDescriptor;var ra=Object.getOwnPropertyNames;var sa=Object.prototype.hasOwnProperty;var la=(e,a)=>{for(var t in a)bt(e,t,{get:a[t],enumerable:!0})},da=(e,a,t,i)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of ra(a))!sa.call(e,o)&&o!==t&&bt(e,o,{get:()=>a[o],enumerable:!(i=na(a,o))||i.enumerable});return e};var ca=e=>da(bt({},"__esModule",{value:!0}),e);var Sa={};la(Sa,{AIAutocomplete:()=>$t,AIAutocompleteDropdown:()=>lt,DATE_RANGE_META_END:()=>
|
|
1
|
+
"use strict";var bt=Object.defineProperty;var na=Object.getOwnPropertyDescriptor;var ra=Object.getOwnPropertyNames;var sa=Object.prototype.hasOwnProperty;var la=(e,a)=>{for(var t in a)bt(e,t,{get:a[t],enumerable:!0})},da=(e,a,t,i)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of ra(a))!sa.call(e,o)&&o!==t&&bt(e,o,{get:()=>a[o],enumerable:!(i=na(a,o))||i.enumerable});return e};var ca=e=>da(bt({},"__esModule",{value:!0}),e);var Sa={};la(Sa,{AIAutocomplete:()=>$t,AIAutocompleteDropdown:()=>lt,DATE_RANGE_META_END:()=>r.DATE_RANGE_META_END,DATE_RANGE_META_START:()=>r.DATE_RANGE_META_START,DEFAULT_OPTION_COUNT_UNIT:()=>r.DEFAULT_OPTION_COUNT_UNIT,PRODUCT_PATH_PREFIX:()=>r.PRODUCT_PATH_PREFIX,WEEKDAY_LABELS:()=>r.WEEKDAY_LABELS,buildSubmitResult:()=>r.buildSubmitResult,cellDay:()=>r.cellDay,cellIso:()=>r.cellIso,dateCellMarks:()=>r.dateCellMarks,formatDate:()=>r.formatDate,formatDateRange:()=>r.formatDateRange,formatOptionCount:()=>r.formatOptionCount,isoDate:()=>r.isoDate,monthLabel:()=>r.monthLabel,optionCountLabel:()=>r.optionCountLabel,optionHasImage:()=>r.optionHasImage,optionImageSources:()=>r.optionImageSources,optionImageSrc:()=>r.optionImageSrc,optionLabel:()=>r.optionLabel,optionsShowLeadingVisuals:()=>r.optionsShowLeadingVisuals,parseDate:()=>r.parseDate,parseLooseDate:()=>r.parseLooseDate,parseLooseDateRange:()=>r.parseLooseDateRange,productFromMatchedItem:()=>r.productFromMatchedItem,productImageSources:()=>r.productImageSources,productsFromCustomFields:()=>r.productsFromCustomFields,sanitizeOptionIconSvg:()=>r.sanitizeOptionIconSvg,selectedRangeFor:()=>r.selectedRangeFor,useAIAutocomplete:()=>ct,visibleDateRange:()=>r.visibleDateRange,withSkippedParams:()=>r.withSkippedParams});module.exports=ca(Sa);var r=require("@magicx-eng/ai-autocomplete-vanilla");var B=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
|
|
@@ -166,7 +166,7 @@
|
|
|
166
166
|
margin-right: 5px;
|
|
167
167
|
border-radius: var(--aia-chip-image-radius, 4px);
|
|
168
168
|
background:
|
|
169
|
-
var(--aia-chip-image, none) center /
|
|
169
|
+
var(--aia-chip-image, none) center / contain no-repeat,
|
|
170
170
|
var(--aia-chip-image-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, 0.083)));
|
|
171
171
|
pointer-events: none;
|
|
172
172
|
user-select: none;
|
|
@@ -1114,7 +1114,7 @@
|
|
|
1114
1114
|
opacity: 0.25;
|
|
1115
1115
|
}
|
|
1116
1116
|
}
|
|
1117
|
-
`,document.head.appendChild(e)}var ke={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
|
|
1117
|
+
`,document.head.appendChild(e)}var ke={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 F=require("@magicx-eng/ai-autocomplete-vanilla"),Rt=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) ---
|
|
1118
1118
|
|
|
1119
1119
|
One of three hand-maintained copies (vanilla styles.css, this file, Angular's
|
|
1120
1120
|
date-grid.component.css). Only the class-naming layer differs \u2014 the
|
|
@@ -1277,7 +1277,7 @@
|
|
|
1277
1277
|
opacity: 0.8;
|
|
1278
1278
|
background: rgba(var(--aia-streak-rgb, 255, 255, 255), 0.06);
|
|
1279
1279
|
}
|
|
1280
|
-
`,document.head.appendChild(e)}var
|
|
1280
|
+
`,document.head.appendChild(e)}var N={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 ee=require("react/jsx-runtime"),pa=["sunday","monday","tuesday","wednesday","thursday","friday","saturday"];function Dt({options:e,activeIndex:a,listboxId:t,view:i,selection:o,onSelect:s,onHighlight:n,onUnhighlight:p,onPreviousMonth:d,onNextMonth:w}){let I=(0,F.isoDate)(new Date),T=(0,F.visibleDateRange)({pendingStart:o.rangeStart,highlightedIso:(0,F.cellIso)(e[a]),selected:o.selectedRange});return(0,ee.jsxs)("div",{className:N.datepicker,"data-aia-datepicker":"",children:[(0,ee.jsxs)("div",{className:N.header,children:[(0,ee.jsx)("button",{type:"button",tabIndex:-1,className:N.nav,"data-aia-date-prev":"","aria-label":"Previous month",onMouseDown:m=>m.preventDefault(),onClick:d,children:"\u2039"}),(0,ee.jsx)("span",{className:N.month,"data-aia-date-month":"","aria-live":"polite",children:(0,F.monthLabel)(i)}),(0,ee.jsx)("button",{type:"button",tabIndex:-1,className:N.nav,"data-aia-date-next":"","aria-label":"Next month",onMouseDown:m=>m.preventDefault(),onClick:w,children:"\u203A"})]}),(0,ee.jsx)("div",{className:N.weekdays,"aria-hidden":"true",children:F.WEEKDAY_LABELS.map((m,v)=>(0,ee.jsx)("span",{className:N.weekday,children:m},pa[v]))}),(0,ee.jsx)("div",{className:N.grid,"data-aia-date-grid":"",children:e.map((m,v)=>(0,ee.jsx)(ha,{option:m,id:`${t}-option-${v}`,index:v,isHighlighted:v===a&&m.is_tappable,isToday:(0,F.cellIso)(m)===I,isPast:(0,F.cellIso)(m)!=null&&(0,F.cellIso)(m)<I,marks:(0,F.dateCellMarks)((0,F.cellIso)(m),{selectedIso:o.selectedIso,range:T}),onSelect:s,onHighlight:n,onUnhighlight:p},(0,F.cellIso)(m)??`pad-${v}`))})]})}function ha({option:e,id:a,index:t,isHighlighted:i,isToday:o,isPast:s,marks:n,onSelect:p,onHighlight:d,onUnhighlight:w}){let[I,T]=(0,Rt.useState)(!1),m=(0,F.cellDay)(e);if(m==null)return(0,ee.jsx)("div",{id:a,role:"option","data-aia-option":"","data-aia-date-cell":"","aria-hidden":"true","aria-selected":!1,tabIndex:-1,className:`${N.cell} ${N.blank}`});let v=()=>{T(!0),p(e),setTimeout(()=>T(!1),170)},E=[N.cell,N.day,s?N.past:"",i?N.highlighted:"",o?N.today:"",n.inRange?N.inRange:"",n.selected?N.selected:"",I?N.pressed:""].filter(Boolean).join(" ");return(0,ee.jsx)("div",{id:a,role:"option","data-aia-option":"","data-aia-date-cell":"","aria-selected":i,"aria-label":e.text,tabIndex:0,className:E,onClick:v,onKeyDown:H=>{(H.key==="Enter"||H.key===" ")&&(H.preventDefault(),v())},onMouseEnter:()=>d(t),onMouseLeave:w?()=>w(t):void 0,children:(0,ee.jsx)("span",{className:N.number,children:m})})}var Me=require("@magicx-eng/ai-autocomplete-vanilla"),nt=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 {
|
|
1281
1281
|
display: flex;
|
|
1282
1282
|
flex-wrap: wrap;
|
|
1283
1283
|
gap: var(--aia-cluster-gap, 0.5rem);
|
|
@@ -1317,7 +1317,7 @@
|
|
|
1317
1317
|
.aia-cluster[data-justify="around"] {
|
|
1318
1318
|
justify-content: space-around;
|
|
1319
1319
|
}
|
|
1320
|
-
`,document.head.appendChild(e)}var wt=require("react/jsx-runtime");function $e({gap:e,align:a="center",justify:t="start",noWrap:i=!1,inline:o=!1,className:
|
|
1320
|
+
`,document.head.appendChild(e)}var wt=require("react/jsx-runtime");function $e({gap:e,align:a="center",justify:t="start",noWrap:i=!1,inline:o=!1,className:s,children:n,...p}){let d=e?{"--aia-cluster-gap":e}:void 0,w={className:s?`aia-cluster ${s}`:"aia-cluster","data-align":a,"data-justify":t,"data-nowrap":i||void 0,"data-inline":o||void 0,style:d,...p};return o?(0,wt.jsx)("span",{...w,children:n}):(0,wt.jsx)("div",{...w,children:n})}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
|
|
1321
1321
|
dropdown's rounded edges. The top inset (--aia-footer-gap) adds breathing
|
|
1322
1322
|
room above the hint/branding row so the footer doesn't butt against the last
|
|
1323
1323
|
option row \u2014 additive to the dropdown's 8px section gap. */
|
|
@@ -1464,7 +1464,7 @@
|
|
|
1464
1464
|
justify-content: flex-end;
|
|
1465
1465
|
}
|
|
1466
1466
|
}
|
|
1467
|
-
`,document.head.appendChild(e)}var Ce={footer:"aia-footer-qQQ7x",row:"aia-row-BgZ6Q",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"};var ge=require("react/jsx-runtime");function Ot({isOptionHighlighted:e=!1,isInputEmpty:a=!1,strings:t=(0,Me.uiStringsFor)()}){let{key:i,hint:o}=(0,Me.getFooterHint)(e,a,t),[
|
|
1467
|
+
`,document.head.appendChild(e)}var Ce={footer:"aia-footer-qQQ7x",row:"aia-row-BgZ6Q",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"};var ge=require("react/jsx-runtime");function Ot({isOptionHighlighted:e=!1,isInputEmpty:a=!1,strings:t=(0,Me.uiStringsFor)()}){let{key:i,hint:o}=(0,Me.getFooterHint)(e,a,t),[s,n]=(0,nt.useState)(Me.ATTRIBUTION_URL);return(0,nt.useEffect)(()=>{n((0,Me.buildAttributionUrl)())},[]),(0,ge.jsx)("footer",{className:Ce.footer,"data-aia-footer":"",children:(0,ge.jsxs)($e,{justify:"between",noWrap:!0,className:Ce.row,children:[(0,ge.jsxs)($e,{gap:"5px",className:Ce.hintGroup,children:[(0,ge.jsx)("kbd",{className:Ce.key,children:i}),(0,ge.jsx)("span",{className:Ce.hint,children:o})]}),(0,ge.jsxs)("a",{className:Ce.brandLink,href:s,target:"_blank",rel:"noopener noreferrer",children:[(0,ge.jsx)("span",{className:Ce.brand,children:"AI"}),(0,ge.jsx)("span",{className:Ce.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,
|
|
1468
1468
|
no outline. ~28px via 6px padding + 14px text + the 1px border (border-box).
|
|
1469
1469
|
The border is kept as a 1px transparent line so the box stays the same size
|
|
1470
1470
|
as it was when the outline was dashed. */
|
|
@@ -1540,7 +1540,7 @@
|
|
|
1540
1540
|
opacity: 0;
|
|
1541
1541
|
}
|
|
1542
1542
|
}
|
|
1543
|
-
`,document.head.appendChild(e)}var Ne={pill:"aia-pill-6Ga7S",fadeIn:"aia-fadeIn-Ux4eQ",rounded:"aia-rounded-y7xA9",skeleton:"aia-skeleton-57P0T",skeletonIn:"aia-skeletonIn-54kMv",skeletonPulse:"aia-skeletonPulse-xGcUy",skeletonOut:"aia-skeletonOut-1sJ-r"};var zt=require("react/jsx-runtime"),vt={selected:1,first:.7,next:.4,last:.2};function Lt({label:e,state:a,rounded:t,loading:i,onClick:o}){let
|
|
1543
|
+
`,document.head.appendChild(e)}var Ne={pill:"aia-pill-6Ga7S",fadeIn:"aia-fadeIn-Ux4eQ",rounded:"aia-rounded-y7xA9",skeleton:"aia-skeleton-57P0T",skeletonIn:"aia-skeletonIn-54kMv",skeletonPulse:"aia-skeletonPulse-xGcUy",skeletonOut:"aia-skeletonOut-1sJ-r"};var zt=require("react/jsx-runtime"),vt={selected:1,first:.7,next:.4,last:.2};function Lt({label:e,state:a,rounded:t,loading:i,onClick:o}){let s=[Ne.pill,t?Ne.rounded:"",i?Ne.skeleton:""].filter(Boolean).join(" ");return(0,zt.jsx)("button",{type:"button","data-aia-pill":"","data-aia-loading":i?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:s,style:{opacity:vt[a]},onMouseDown:n=>n.preventDefault(),onClick:i?void 0:o,disabled:i,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 {
|
|
1544
1544
|
position: relative;
|
|
1545
1545
|
z-index: 1;
|
|
1546
1546
|
pointer-events: auto;
|
|
@@ -1550,7 +1550,7 @@
|
|
|
1550
1550
|
align-items: center;
|
|
1551
1551
|
vertical-align: middle;
|
|
1552
1552
|
}
|
|
1553
|
-
`,document.head.appendChild(e)}var xt={list:"aia-list-qvLqO"};var Xe=require("react/jsx-runtime"),ua=[125,69];function Mt(e){return e===0?"first":e===1?"next":"last"}function rt({pills:e,activePillIndex:a,onSelectPill:t,activeSelected:i,rounded:o,loading:
|
|
1553
|
+
`,document.head.appendChild(e)}var xt={list:"aia-list-qvLqO"};var Xe=require("react/jsx-runtime"),ua=[125,69];function Mt(e){return e===0?"first":e===1?"next":"last"}function rt({pills:e,activePillIndex:a,onSelectPill:t,activeSelected:i,rounded:o,loading:s}){return s&&e.length===0?(0,Xe.jsx)("span",{className:xt.list,"data-aia-pill-list-loading":"",children:ua.map((n,p)=>(0,Xe.jsx)("span",{"data-aia-pill-skeleton":"",className:`${Ne.pill} ${o?Ne.rounded:""} ${Ne.skeleton}`,style:{width:n,opacity:vt[Mt(p)]}},`skel-${n}`))}):(0,Xe.jsx)("span",{className:xt.list,"data-aia-pill-list-loading":s?"":void 0,children:e.map((n,p)=>{let d=!!i&&p===a;return(0,Xe.jsx)(Lt,{label:n.text,state:d?"selected":Mt(p),selected:d,rounded:o,loading:s,onClick:()=>t(p)},`${n.parameter}-${n.text}`)})})}var me=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
|
|
1554
1554
|
(packages/vanilla/src/styles.css). Same tokens, same defaults, so a consumer
|
|
1555
1555
|
theming one package sees the same result in the other.
|
|
1556
1556
|
|
|
@@ -1837,7 +1837,7 @@
|
|
|
1837
1837
|
letter-spacing: 0.02em;
|
|
1838
1838
|
text-align: center;
|
|
1839
1839
|
}
|
|
1840
|
-
`,document.head.appendChild(e)}var se={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
|
|
1840
|
+
`,document.head.appendChild(e)}var se={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 V=require("react/jsx-runtime");function Nt({products:e,listboxId:a,onSelect:t,onFocusChange:i,focusable:o=!0,layout:s="row",imageFallback:n="image",strings:p=(0,me.uiStringsFor)()}){let d=e.length>0,w=(0,je.useRef)(null);if((0,je.useEffect)(()=>{let T=w.current;if(!(!d||!T))return(0,me.attachProductRowWheel)(T)},[d]),!d)return null;let I=`${a}-products-label`;return(0,V.jsxs)("section",{className:se.section,"data-aia-products":"","data-aia-products-layout":s,role:"group","aria-labelledby":I,children:[(0,V.jsx)("div",{className:se.label,id:I,"data-aia-products-label":"",children:p.products}),(0,V.jsx)("div",{ref:w,className:se.row,"data-aia-products-row":"",children:e.map((T,m)=>(0,V.jsx)(ga,{product:T,id:`${a}-product-${m}`,onSelect:t,onFocusChange:i,focusable:o,imageFallback:n,soldOut:p.soldOut},T.id))})]})}function ga({product:e,id:a,onSelect:t,onFocusChange:i,focusable:o,imageFallback:s,soldOut:n}){let p=d=>{d.metaKey||d.ctrlKey||d.shiftKey||d.altKey||d.button!==0||(d.preventDefault(),t(e))};return(0,V.jsxs)("a",{id:a,className:se.card,"data-aia-product":"","data-aia-product-sold-out":e.available===!1?"":void 0,role:"option","aria-selected":!1,href:e.url,tabIndex:o?0:-1,onClick:p,onKeyDown:d=>{d.key!=="Enter"&&d.key!==" "||(d.preventDefault(),t(e))},onFocus:()=>i?.(!0),onBlur:d=>{d.relatedTarget?.closest("[data-aia-dropdown]")||i?.(!1)},children:[(0,V.jsx)(ma,{sources:(0,me.productImageSources)(e.imageUrl),title:e.title,fallback:s},(0,me.productImageSrc)(e.imageUrl)??""),(0,V.jsxs)("span",{className:se.body,children:[e.vendor?(0,V.jsx)("span",{className:se.vendor,children:e.vendor}):null,(0,V.jsx)("span",{className:se.title,children:e.title}),e.price?(0,V.jsx)("span",{className:se.price,children:e.price}):null,e.available===!1?(0,V.jsx)("span",{className:se.badge,children:n}):null]})]})}function ma({sources:e,title:a,fallback:t}){let[i,o]=(0,je.useState)(0),s=e[i],n=!!s,p=!n&&t==="initial";return(0,V.jsxs)("span",{className:se.media,"aria-hidden":"true","data-aia-product-placeholder":!n&&!p?"":void 0,"data-aia-product-initial":p?"":void 0,children:[n?(0,V.jsx)("img",{className:se.image,src:s,alt:"",loading:"lazy",decoding:"async",onError:()=>o(d=>d+1)}):null,p?(0,me.productInitial)(a):null]})}var W=require("@magicx-eng/ai-autocomplete-vanilla"),be=require("react");var Ft=require("@magicx-eng/ai-autocomplete-vanilla"),st=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 {
|
|
1841
1841
|
display: grid;
|
|
1842
1842
|
grid-template-columns: repeat(
|
|
1843
1843
|
auto-fit,
|
|
@@ -1873,7 +1873,7 @@
|
|
|
1873
1873
|
.aia-grid[data-scroll]::-webkit-scrollbar {
|
|
1874
1874
|
display: none;
|
|
1875
1875
|
}
|
|
1876
|
-
`,document.head.appendChild(e)}var Ht=require("react/jsx-runtime");function Bt({min:e="16rem",max:a,gap:t,scroll:i=!1,maxHeight:o,scrollResetKey:
|
|
1876
|
+
`,document.head.appendChild(e)}var Ht=require("react/jsx-runtime");function Bt({min:e="16rem",max:a,gap:t,scroll:i=!1,maxHeight:o,scrollResetKey:s,cols:n,template:p,innerRef:d,className:w,children:I,...T}){let m=(0,st.useRef)(null);(0,st.useLayoutEffect)(()=>{if(s===void 0)return;let E=m.current;E&&(E.scrollTop=0)},[s]);let v={"--aia-grid-min":e};return a&&(v["--aia-grid-max"]=a),t&&(v["--aia-grid-gap"]=t),o&&(v["--aia-grid-max-height"]=o),n&&(v.gridTemplateColumns=(0,Ft.optionsGridTemplateColumns)(n)),p&&(v.gridTemplateColumns=p),(0,Ht.jsx)("div",{ref:E=>{m.current=E,d?.(E)},className:w?`aia-grid ${w}`:"aia-grid","data-scroll":i||void 0,style:v,...T,children:I})}var ie=require("@magicx-eng/ai-autocomplete-vanilla"),fe=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 {
|
|
1877
1877
|
position: relative;
|
|
1878
1878
|
/* Clip, not visible: the entrance rise below runs on the inner content,
|
|
1879
1879
|
and a transformed box extends its scroll container's scrollable area.
|
|
@@ -2153,11 +2153,14 @@
|
|
|
2153
2153
|
background: var(--aia-option-image-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, 0.083)));
|
|
2154
2154
|
}
|
|
2155
2155
|
|
|
2156
|
+
/* \`contain\`, not \`cover\`: option pictures come in any aspect ratio, and a
|
|
2157
|
+
square crop cuts the top and bottom off a tall one (a pint bottle). The
|
|
2158
|
+
picture scales by its longer side and the tile's fill shows around it. */
|
|
2156
2159
|
.aia-image-YZAbO img {
|
|
2157
2160
|
display: block;
|
|
2158
2161
|
width: 100%;
|
|
2159
2162
|
height: 100%;
|
|
2160
|
-
object-fit:
|
|
2163
|
+
object-fit: contain;
|
|
2161
2164
|
}
|
|
2162
2165
|
|
|
2163
2166
|
/* A picture that failed to load hides itself with the \`hidden\` attribute.
|
|
@@ -2302,7 +2305,7 @@
|
|
|
2302
2305
|
opacity: 0;
|
|
2303
2306
|
}
|
|
2304
2307
|
}
|
|
2305
|
-
`,document.head.appendChild(e)}var te={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",parameter:"aia-parameter-Dt2zF",icon:"aia-icon-Qw938",count:"aia-count-IpYbQ",image:"aia-image-YZAbO",skeletonOut:"aia-skeletonOut-x6NRd"};var
|
|
2308
|
+
`,document.head.appendChild(e)}var te={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",parameter:"aia-parameter-Dt2zF",icon:"aia-icon-Qw938",count:"aia-count-IpYbQ",image:"aia-image-YZAbO",skeletonOut:"aia-skeletonOut-x6NRd"};var Z=require("react/jsx-runtime");function Kt({option:e,isHighlighted:a,onSelect:t,onHighlight:i,onUnhighlight:o,id:s,loading:n,showIcon:p=!0,showImage:d=!0,showCount:w=!0,scrollHint:I,enterDelayMs:T=0}){let[m]=(0,fe.useState)(T),[v,E]=(0,fe.useState)(!1),H=d?(0,ie.optionImageSources)(e.image_url):[],K=H[0]??null,[Q,$]=(0,fe.useState)([]),A=H.find(O=>!Q.includes(O))??null,M=(0,fe.useMemo)(()=>!K&&p&&e.icon_svg?(0,ie.sanitizeOptionIconSvg)(e.icon_svg):null,[K,p,e.icon_svg]),D=w?(0,ie.formatOptionCount)(e.item_count):null,k=(0,fe.useRef)(void 0);(0,fe.useEffect)(()=>()=>clearTimeout(k.current),[]);let G=()=>{n||!e.is_tappable||v||(E(!0),t(e),clearTimeout(k.current),k.current=setTimeout(()=>E(!1),170))},Y=[te.item,a&&!n?te.highlighted:"",e.is_tappable?te.tappable:te.nonTappable,v?te.pressed:"",I?te.scrollHint:""].filter(Boolean).join(" ");return(0,Z.jsx)("div",{id:s,role:"option","data-aia-option":"","data-aia-loading":n?"":void 0,"data-aia-icon":M&&e.icon?e.icon:void 0,"data-aia-image":K?"":void 0,"data-aia-item-count":D!==null?e.item_count:void 0,"aria-selected":a,className:Y,style:{[ie.OPTION_ENTER_DELAY_VAR]:`${m}ms`},tabIndex:n||!e.is_tappable?-1:0,onClick:G,onKeyDown:O=>{!n&&e.is_tappable&&(O.key==="Enter"||O.key===" ")&&(O.preventDefault(),G())},onMouseEnter:!n&&e.is_tappable?i:void 0,onMouseLeave:o,children:(0,Z.jsxs)("span",{className:te.content,children:[K&&(0,Z.jsx)("span",{className:`${te.image} magicx-aia-option-image`,"aria-hidden":"true",children:(0,Z.jsx)("img",{src:A??K,alt:"",loading:"lazy",decoding:"async",referrerPolicy:"no-referrer",draggable:!1,hidden:A===null,onError:()=>{A!==null&&$(O=>[...O,A])}})}),M&&(0,Z.jsx)("span",{className:`${te.icon} magicx-aia-option-icon`,"aria-hidden":"true",dangerouslySetInnerHTML:{__html:M}}),(0,Z.jsxs)("span",{className:te.text,children:[e.matchedText?(0,ie.highlightParts)((0,ie.optionLabel)(e),e.matchedText).map((O,le)=>O.bold?(0,Z.jsx)("strong",{children:O.text},le):O.text):(0,ie.optionLabel)(e),e.parameterLabel&&(0,Z.jsxs)(Z.Fragment,{children:[" ",(0,Z.jsx)("span",{className:`${te.parameter} magicx-aia-option-parameter`,children:e.parameterLabel})]})]}),e.tag&&(0,Z.jsx)("span",{className:te.tag,children:e.tag}),D!==null&&(0,Z.jsx)("span",{className:`${te.count} magicx-aia-option-count`,children:D})]})})}var yt=require("react/jsx-runtime");function fa(){let[e,a]=(0,be.useState)(W.isOptionsGridMobileViewport);return(0,be.useEffect)(()=>{if(typeof window>"u"||!window.matchMedia)return;let t=window.matchMedia(W.OPTIONS_GRID_MOBILE_QUERY),i=()=>a(t.matches);return i(),t.addEventListener("change",i),()=>t.removeEventListener("change",i)},[]),e}function Gt({options:e,activeIndex:a,onSelect:t,onHighlight:i,onUnhighlight:o,listboxId:s,loading:n,groupKey:p="",optionsPosition:d="below",showIcons:w=!0,showImages:I=!0,showCounts:T=!0}){let m=fa(),v=(0,be.useRef)(null),[E,H]=(0,be.useState)(null),K=(0,be.useRef)(null);(0,be.useLayoutEffect)(()=>{if(n&&(0,W.sameOptionRows)(K.current,e))return;K.current=n?null:e;let A=v.current,D=A&&!n&&(0,W.needsOptionsGridMeasurement)(e.length,m)?(0,W.measureOptionsGrid)(A):null;H(D?(0,W.planOptionsGrid)(e.length,m,D.rowWidths,D.gridWidth):null)},[e,m,n]);let Q=E??(0,W.planOptionsGrid)(e.length,m,null,null),$=(0,W.optionsShowLeadingVisuals)(e,w,I);return(0,yt.jsx)(Bt,{min:"250px",max:"1fr",gap:"0",scroll:!0,scrollResetKey:p,template:Q.template,maxHeight:Q.maxHeight,innerRef:A=>{v.current=A},"data-aia-group":p,children:e.map((A,M)=>(0,yt.jsx)(Kt,{option:A,isHighlighted:M===a,onSelect:t,onHighlight:()=>i(M),onUnhighlight:o?()=>o(M):void 0,id:`${s}-option-${M}`,loading:n,showIcon:w&&$,showImage:I&&$,showCount:T,scrollHint:!n&&Q.scrollHintIndices.includes(M),enterDelayMs:n?0:(0,W.optionEnterDelayMs)(M,Q.cols,e.length,d)},`${p}\0${A.text}`))})}if(typeof document<"u"&&!document.getElementById("ac-style-8414cd5f")){let e=document.createElement("style");e.id="ac-style-8414cd5f",e.textContent=`.aia-stack {
|
|
2306
2309
|
display: flex;
|
|
2307
2310
|
flex-direction: column;
|
|
2308
2311
|
gap: var(--aia-stack-space, 0.5rem);
|
|
@@ -2317,7 +2320,7 @@
|
|
|
2317
2320
|
align-items: end;
|
|
2318
2321
|
}
|
|
2319
2322
|
/* data-align="stretch" is the flex default \u2014 no rule needed. */
|
|
2320
|
-
`,document.head.appendChild(e)}var _t=require("react/jsx-runtime");function Wt({space:e,align:a="stretch",className:t,children:i,...o}){let
|
|
2323
|
+
`,document.head.appendChild(e)}var _t=require("react/jsx-runtime");function Wt({space:e,align:a="stretch",className:t,children:i,...o}){let s=e?{"--aia-stack-space":e}:void 0;return(0,_t.jsx)("div",{className:t?`aia-stack ${t}`:"aia-stack","data-align":a,style:s,...o,children:i})}var _=require("react/jsx-runtime"),ba=[159,119,164],wa=()=>{},qt=()=>{};function va(e){let a=()=>typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches,[t,i]=(0,j.useState)(a);if((0,j.useEffect)(()=>{if(e!=="auto"||typeof window>"u"||typeof window.matchMedia!="function")return;let o=window.matchMedia("(prefers-color-scheme: dark)"),s=()=>i(o.matches);return o.addEventListener("change",s),()=>o.removeEventListener("change",s)},[e]),e!==void 0)return e==="auto"?t?"dark":"light":e}function xa(e,a){let t=(0,j.useRef)(null);(0,j.useEffect)(()=>{let i=e.current,o=a.current;if(!i||!o)return;let s=i.querySelector(".aia-grid[data-scroll]");if(t.current&&t.current.grid!==s&&(t.current.controller.destroy(),t.current=null),s&&!t.current){t.current={grid:s,controller:(0,ae.attachScrollArrow)({dropdown:i,grid:s,button:o})};return}t.current?.controller.update()}),(0,j.useEffect)(()=>()=>{t.current?.controller.destroy(),t.current=null},[])}function ya(e,a){let t=(0,j.useRef)(a);t.current=a;let i=(0,j.useRef)(null);(0,j.useEffect)(()=>{let o=e.current;if(o){if(!i.current){i.current=(0,ae.attachViewportFit)({dropdown:o,isOpen:()=>t.current});return}i.current.update()}}),(0,j.useEffect)(()=>()=>{i.current?.destroy(),i.current=null},[])}function lt({suggestions:e,activeIndex:a,onSelect:t,onHighlight:i,onUnhighlight:o,isOpen:s,id:n,className:p,pills:d,onPillClick:w,showPills:I=!0,onSkip:T,showSkipButton:m=!0,showOptionIcons:v=!0,showOptionImages:E=!0,showOptionCounts:H=!0,skipDisabled:K=!1,activeSelected:Q=!1,isLoading:$=!1,skeletonExiting:A=!1,isInputEmpty:M=!1,language:D,products:k,onProductSelect:G,onProductFocusChange:Y,productsLayout:O="row",productImageFallback:le="image",formatType:Pe="options",dateView:X=null,selectedDateIso:Se=null,selectedDateRange:He=null,dateRangeStart:Ie=null,onPreviousMonth:g,onNextMonth:Ke,optionsPosition:we="below",mode:Te}){let ve=va(Te),Ee=ve!==void 0,oe=(0,j.useRef)(null),de=(0,j.useRef)(null);xa(oe,de),(0,j.useEffect)(()=>{if(oe.current)return(0,ae.containScroll)(oe.current)},[]);let l=e[0]?.options??[],f=!!(d&&d.length>0&&w),b=!!(k&&k.length>0),x=s&&(l.length>0||I&&f||$||b);ya(oe,x);let C={suggestions:e,activeIndex:a,pills:d,showPills:I,showSkipButton:m,showOptionIcons:v,showOptionImages:E,showOptionCounts:H,skipDisabled:K,activeSelected:Q,isLoading:$,skeletonExiting:A,isInputEmpty:M,products:k,formatType:Pe,dateView:X,selectedDateIso:Se,selectedDateRange:He,dateRangeStart:Ie},R=(0,j.useRef)(C);x&&(R.current=C);let h=x?C:R.current,U=(0,ae.uiStringsFor)(D),ne=h.suggestions[0],re=ne?.options??[],Ae=h.activeIndex>=0&&!!re[h.activeIndex]?.is_tappable,xe=(0,ae.labelTraditionalAutocomplete)(h.pills??[],U.keepTyping),pe=!!(xe.length>0&&w),Re=h.showPills&&pe,Ge=h.showPills&&!pe&&h.isLoading,y=Re||Ge,De=pe&&(0,ae.hasSkippablePill)(xe)&&h.showSkipButton&&!h.isInputEmpty&&!!T,Oe=xe[0]?.text,ye=(0,ae.isCalendarFormat)(h.formatType)&&h.dateView!=null,u=re.length>0&&!ye,We=re.length>0&&ye&&!h.isLoading,Qe=h.isLoading&&!u&&!We,Le=h.products??[];return(0,_.jsxs)("div",{ref:oe,id:n,role:"listbox","data-aia-dropdown":"","data-options-position":we,"data-mode":ve,"data-aia-loading":h.isLoading?"":void 0,"data-aia-skeleton-exiting":h.skeletonExiting?"":void 0,"data-aia-has-products":Le.length>0?"":void 0,className:`${Ee?"magicx-aia ":""}${ke.dropdown} ${x?ke.visible:""} ${p??""}`,onMouseDown:he=>he.preventDefault(),children:[(0,_.jsxs)(Wt,{space:"8px",children:[(y||De)&&(0,_.jsxs)($e,{noWrap:!0,className:ke.pillBar,"data-aia-pillbar":"",children:[y&&(0,_.jsx)("span",{className:ke.pillScroll,"data-aia-pill-scroll":"",children:(0,_.jsx)(rt,{pills:xe,activePillIndex:0,activeSelected:h.activeSelected,onSelectPill:w??(()=>{}),rounded:!0,loading:h.isLoading})}),De&&(0,_.jsx)("button",{type:"button",tabIndex:-1,className:ke.skip,"data-aia-skip":"",disabled:h.isLoading||h.skipDisabled,"aria-label":Oe?`${U.skipLabel} ${Oe}`:U.skipLabel,onClick:T,children:U.skip})]}),u&&(0,_.jsx)(Gt,{options:re,activeIndex:h.activeIndex,onSelect:t,onHighlight:i,onUnhighlight:o,listboxId:n,loading:h.isLoading,groupKey:ne?`${ne.parameter} ${ne.text}`:"",optionsPosition:we,showIcons:h.showOptionIcons,showImages:h.showOptionImages,showCounts:h.showOptionCounts}),We&&h.dateView&&(0,_.jsx)(Dt,{options:re,activeIndex:h.activeIndex,listboxId:n,view:h.dateView,selection:{selectedIso:h.selectedDateIso??null,selectedRange:h.selectedDateRange??null,rangeStart:h.dateRangeStart??null},onSelect:t,onHighlight:i,onUnhighlight:o,onPreviousMonth:g??qt,onNextMonth:Ke??qt}),Qe&&(0,_.jsx)("div",{className:ke.skeletonBars,"data-aia-skeleton-bars":"",children:ba.map(he=>(0,_.jsx)("span",{className:ke.skeletonBar,style:{width:he}},`bar-${he}`))}),(0,_.jsx)(Nt,{products:Le,listboxId:n,onSelect:G??wa,onFocusChange:Y,focusable:x,layout:O,imageFallback:le,strings:U}),(0,_.jsx)(Ot,{isOptionHighlighted:Ae,isInputEmpty:h.isInputEmpty,strings:U})]}),(0,_.jsx)("button",{ref:de,type:"button",tabIndex:-1,className:ke.scrollArrow,"data-aia-scroll-arrow":"","aria-label":U.scrollArrow,"aria-hidden":"true",children:(0,_.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,_.jsx)("path",{d:"M4 6.5 8 10.5l4-4"})})})]})}var Be=require("@magicx-eng/ai-autocomplete-vanilla");var jt=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 {
|
|
2321
2324
|
flex-shrink: 0;
|
|
2322
2325
|
width: 32px;
|
|
2323
2326
|
height: 32px;
|
|
@@ -2370,5 +2373,5 @@
|
|
|
2370
2373
|
);
|
|
2371
2374
|
cursor: default;
|
|
2372
2375
|
}
|
|
2373
|
-
`,document.head.appendChild(e)}var Ut={submitButton:"aia-submitButton-otz7H"};var dt=require("react/jsx-runtime");function Qt({disabled:e,onClick:a,label:t=(0,jt.uiStringsFor)().submit}){return(0,dt.jsx)("button",{type:"button","data-aia-submit":"",className:Ut.submitButton,disabled:e,onClick:i=>{i.stopPropagation(),a()},"aria-label":t,children:(0,dt.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":t,children:(0,dt.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var Fe=require("@magicx-eng/ai-autocomplete-vanilla"),P=require("react");var kt=require("react");function Yt(e){let a=(0,kt.useRef)(e);a.current=e;let t=Object.keys(e??{}).sort().join("\0"),i=(0,kt.useRef)({key:"",overrides:void 0});if(i.current.key!==t){let o={};for(let r of Object.keys(e??{})){let n=(p,d,x)=>{let T=a.current?.[r];return T?T(p,d,x):[]};o[r]=n}i.current={key:t,overrides:e?o:void 0}}return{overrides:i.current.overrides,key:t}}var Ct=require("react");function Zt(e){let a=(0,Ct.useRef)(e);a.current=e;let t=(0,Ct.useRef)(null);t.current===null&&(t.current={fetch:(o,r)=>{let n=a.current;return n?n.fetch(o,r):Promise.reject(new Error("products config removed"))},transform:o=>a.current?.transform(o)??[],get limit(){return a.current?.limit}});let i=e!==void 0;return{config:i?t.current:void 0,enabled:i}}var ka={text:"",completedParams:[],identifiedParams:[],skippedParams:[],pendingSpan:null,suggestions:[],products:[],traditionalAutocomplete:!1,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,dropdownHeld:!1,editingParam:null,editingIdentified:null,editingAnchor:null,editingTail:null,caretOffset:null,inSelectionAnimation:!1,dateViewMonth:null,pendingRangeStart:null};function ct({onSubmit:e,onResult:a,onError:t,optionOverrides:i,maskCompletedText:o,apiConfig:r,additionalContext:n,language:p,productId:d,visitorId:x,columns:T=2,dropdownTrigger:I,optionsPosition:m,closeDropdownOnBlur:w,showNonTappableOptions:E,showOptionIcons:B,showOptionImages:H,showOptionCounts:Q,showSkipButton:M,showProducts:A,productImageFallback:q="image",onFocus:K,onBlur:k,value:G,completedParams:Y,onChange:D,onParamsChange:le,products:Pe,mapProducts:X,onProductSelect:Se,source:He,setCursor:Ie}){let g=(0,P.useRef)(null),[Ke,we]=(0,P.useState)(null),Te=(0,P.useRef)(e);Te.current=e;let ve=(0,P.useRef)(a);ve.current=a;let Ee=(0,P.useRef)(t);Ee.current=t;let oe=(0,P.useRef)(D);oe.current=D;let de=(0,P.useRef)(le);de.current=le;let l=(0,P.useRef)(K);l.current=K;let f=(0,P.useRef)(k);f.current=k;let b=(0,P.useRef)(Ie);b.current=Ie;let v=(0,P.useRef)(Se);v.current=Se;let C=(0,P.useRef)(x);C.current=x;let R=(0,P.useRef)(()=>{let c=C.current;return typeof c=="function"?c():c}).current,h=Zt(Pe),U=(0,P.useRef)(X);U.current=X;let ne=(0,P.useRef)((c,J)=>{let O=U.current;return O?O(c,J):c}).current,re=X?ne:void 0,Ae=Yt(i);(0,P.useEffect)(()=>{if(typeof document>"u")return;let c=new Fe.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:r,additionalContext:n,language:p,productId:d,visitorId:R,optionOverrides:Ae.overrides,maskCompletedText:o,columns:T,dropdownTrigger:I,optionsPosition:m,closeDropdownOnBlur:w,showNonTappableOptions:E,showProducts:A,source:He,value:G,completedParams:Y,onSubmit:(...O)=>Te.current?.(...O),onResult:(...O)=>ve.current?.(...O),onError:(...O)=>Ee.current?.(...O),onChange:(...O)=>oe.current?.(...O),onParamsChange:(...O)=>de.current?.(...O),onFocus:()=>l.current?.(),onBlur:()=>f.current?.(),onProductSelect:O=>v.current?.(O),setCursor:O=>b.current?.(O),products:h.config,mapProducts:re});g.current=c,we(c.getState());let J=c.subscribe(O=>we(O));return()=>{J(),c.destroy(),g.current===c&&(g.current=null)}},[]),(0,P.useEffect)(()=>{G!==void 0&&g.current?.setValue(G)},[G]),(0,P.useEffect)(()=>{Y!==void 0&&g.current?.setCompletedParams(Y)},[Y]);let xe=JSON.stringify(r??null),pe;try{pe=JSON.stringify(n??null)}catch{pe="[unstringifiable]"}(0,P.useEffect)(()=>{g.current?.update({apiConfig:r,additionalContext:n,language:p,productId:d,optionOverrides:Ae.overrides,dropdownTrigger:I,optionsPosition:m,closeDropdownOnBlur:w,showNonTappableOptions:E,showProducts:A})},[xe,pe,p,d,Ae.key,I,m,w,E,A]);let Re=(0,P.useRef)(!1);(0,P.useEffect)(()=>{if(!Re.current){Re.current=!0;return}g.current?.update({products:h.config})},[h.enabled]),(0,P.useEffect)(()=>{g.current?.update({mapProducts:re})},[re]);let Ge=(0,P.useRef)(null);Ge.current===null&&(Ge.current={handleTextChange:c=>g.current?.handleTextChange(c),handleKeyDown:c=>{let J="nativeEvent"in c?c.nativeEvent:c;g.current?.handleKeyDown(J)},setFocused:c=>g.current?.setFocused(c),startEditingParam:c=>g.current?.startEditingParam(c),exitEditMode:()=>g.current?.exitEditMode(),handleCaretAfterInput:c=>g.current?.handleCaretAfterInput(c),handleCaretMove:c=>g.current?.handleCaretMove(c),replaceEditingRange:c=>g.current?.replaceEditingRange(c)??!1,setActivePill:c=>g.current?.setActivePill(c),skipActivePill:()=>g.current?.skipActivePill(),removeLastParam:()=>g.current?.removeLastParam(),clearNewParamId:()=>g.current?.clearNewParamId(),reset:()=>g.current?.reset(),refreshProducts:()=>g.current?.refreshProducts(),recordSubmit:c=>g.current?.recordSubmit(c),selectOption:c=>g.current?.selectOption(c),selectProduct:c=>g.current?.selectProduct(c),setActiveDropdownIndex:c=>g.current?.setActiveDropdownIndex(c),clearHighlight:c=>g.current?.clearHighlight(c),showPreviousMonth:()=>g.current?.showPreviousMonth(),showNextMonth:()=>g.current?.showNextMonth(),handleFocus:()=>g.current?.setFocused(!0),handleBlur:()=>g.current?.setFocused(!1)});let y=Ge.current,De=(0,P.useCallback)(c=>{let J=c.target.value,gt=J.length>0&&!c.nativeEvent?.isComposing&&J[0]!==J[0].toUpperCase()?J[0].toUpperCase()+J.slice(1):J;g.current?.handleTextChange(gt)},[]),Oe=(0,P.useCallback)(c=>{g.current?.handleKeyDown(c.nativeEvent)},[]),ye=g.current,u=Ke??ka,We=G!==void 0?G:u.text,Qe=Y!==void 0?Y:u.completedParams,Le=u.actionableSuggestions,he=Le[0],Je=(0,Fe.withoutTraditionalAutocomplete)(Le),_e=ye?.listboxId??"",ht=u.activeDropdownIndex>=0&&ye?`${_e}-option-${u.activeDropdownIndex}`:void 0,ze=u.editingParam,qe=u.editingIdentified,Ye=ze?{parameter:ze.suggestionParameter,text:ze.suggestionPlaceholder,required:!0,options:ze.options}:qe?{parameter:qe.parameter,text:(0,Fe.identifiedParamLabel)(qe.parameter),required:!0,options:[]}:null,et=u.dropdownSuggestion??Ye??he,ut=Ye?[Ye]:Le,Ze=(0,Fe.dateSelectionFor)(u),tt=!ye||u.dropdownLoading;return{completedParams:Qe,skippedParams:u.skippedParams,identifiedParams:u.identifiedParams,suggestionPills:Je,setActivePill:y.setActivePill,skipActivePill:y.skipActivePill,removeLastParam:y.removeLastParam,segments:u.segments,newParamId:u.newParamId,clearNewParamId:y.clearNewParamId,suggestions:u.suggestions,activeIndex:u.activeDropdownIndex,isReady:u.isReady,isLoading:tt,isFocused:u.isFocused,isDropdownOpen:u.isDropdownOpen,isActivePillSelected:u.isActivePillSelected,placeholderText:u.placeholderText,listboxId:_e,error:u.error,products:u.products,customFields:u.customFields,selectProduct:y.selectProduct,handleTextChange:y.handleTextChange,handleKeyDown:y.handleKeyDown,setFocused:y.setFocused,editingParam:ze,editingIdentified:qe,editingAnchor:u.editingAnchor,caretOffset:u.caretOffset,startEditingParam:y.startEditingParam,exitEditMode:y.exitEditMode,handleCaretAfterInput:y.handleCaretAfterInput,handleCaretMove:y.handleCaretMove,replaceEditingRange:y.replaceEditingRange,inputProps:{value:We,placeholder:u.placeholderText||void 0,onChange:De,onKeyDown:Oe,onFocus:y.handleFocus,onBlur:y.handleBlur,role:"combobox","aria-expanded":u.isDropdownOpen,"aria-activedescendant":ht,"aria-autocomplete":"list","aria-controls":_e},reset:y.reset,refreshProducts:y.refreshProducts,recordSubmit:y.recordSubmit,dropdownProps:{suggestions:et?[{...et,options:u.dropdownOptions}]:[],activeIndex:u.activeDropdownIndex,onSelect:y.selectOption,onHighlight:y.setActiveDropdownIndex,onUnhighlight:y.clearHighlight,isOpen:u.isDropdownOpen,id:_e,pills:ut,activeSelected:u.isActivePillSelected,onPillClick:y.setActivePill,onSkip:y.skipActivePill,showSkipButton:(M??!0)&&!ze&&!qe,showOptionIcons:B??!0,showOptionImages:H??!0,showOptionCounts:Q??!0,skipDisabled:u.inSelectionAnimation,isLoading:tt,skeletonExiting:u.skeletonExiting,isInputEmpty:We.trim().length===0,language:p,products:u.products,productImageFallback:q,onProductSelect:y.selectProduct,onProductFocusChange:y.setFocused,formatType:u.activeFormatType,dateView:u.dateView,selectedDateIso:Ze.selectedIso,selectedDateRange:Ze.selectedRange,dateRangeStart:Ze.rangeStart,onPreviousMonth:y.showPreviousMonth,onNextMonth:y.showNextMonth,optionsPosition:m??"below"}}}var _=require("@magicx-eng/ai-autocomplete-vanilla"),S=require("react"),pt;function Ca(){if(pt!==void 0)return pt;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),pt=e.contentEditable==="plaintext-only",pt}function Vt(e){let{segments:a,showChipIcons:t=!0,showChipImages:i=!0,newParamId:o,editingParam:r,editingIdentified:n,editingAnchor:p,caretOffset:d,placeholderText:x,isFocused:T,isDropdownOpen:I,listboxId:m,activeDescendantId:w,autoFocus:E,handleTextChange:B,handleKeyDown:H,handleCaretAfterInput:Q,handleCaretMove:M,startEditingParam:A,replaceEditingRange:q,setFocused:K}=e,k=(0,S.useRef)(null),G=(0,S.useRef)(!1),Y=(0,S.useRef)(""),D=(0,S.useRef)(""),le=(0,S.useRef)(null),Pe=(0,S.useRef)(0);le.current=d,(0,S.useEffect)(()=>{if(!E)return;let l=k.current;if(!l)return;document.activeElement===l?K(!0):l.focus();let f=l.ownerDocument??document,b=f.getSelection(),v=b&&b.rangeCount>0&&l.contains(b.anchorNode);if(b&&!v){let C=f.createRange();C.selectNodeContents(l),C.collapse(!0),b.removeAllRanges(),b.addRange(C)}},[E,K]),(0,S.useEffect)(()=>{let l=k.current;if(!l)return;let f=l.ownerDocument??document,b=()=>{let v=f.getSelection();if(!v||v.rangeCount===0||!v.anchorNode||!l.contains(v.anchorNode))return;let C=v.anchorNode,R=C.nodeType===Node.ELEMENT_NODE?C:C.parentElement,U=(v.isCollapsed?R?.closest("strong[data-param-id]"):null)?.dataset.paramId??null,ne=r?.id??n?.id??null;if(U&&U!==ne){A(U);return}performance.now()-Pe.current<50||M((0,_.getCursorOffset)(l))};return f.addEventListener("selectionchange",b),()=>f.removeEventListener("selectionchange",b)},[r,n,A,M]),(0,S.useEffect)(()=>{let l=k.current;if(!l)return;let f=b=>{let v=(0,_.chipIdFromTap)(l,b.target);v&&(A(v),(0,_.keepCaretOnChip)(l,v))};return l.addEventListener("click",f),()=>l.removeEventListener("click",f)},[A]),(0,S.useLayoutEffect)(()=>{let l=k.current;l&&(0,_.renderEditableContent)({input:l,segments:a,newParamId:o,editingParamId:r?.id??null,placeholderText:x??"",isFocused:T,showChipIcons:t,showChipImages:i})},[a,o,r,x,T,t,i]),(0,S.useLayoutEffect)(()=>{let l=Y.current,f=o??"";if(Y.current=f,!f||f===l)return;let b=k.current;if(!b)return;b.focus();let v=le.current??(0,_.plainTextLength)(b);(0,_.setCursorOffset)(b,v)},[o]),(0,S.useLayoutEffect)(()=>{let l=D.current,f=r?.id??"";if(D.current=f,!f||f===l||p==null)return;let b=k.current;b&&(0,_.setCursorOffset)(b,p)},[r,p]);let X=(0,S.useCallback)(()=>{if(G.current)return;let l=k.current;if(!l)return;let f=(0,_.extractPlainText)(l),v=f.length>0&&f[0]!==f[0].toUpperCase()?f[0].toUpperCase()+f.slice(1):f;B(v)},[B]),Se=(0,S.useCallback)(()=>{Pe.current=performance.now(),X();let l=k.current;l&&Q((0,_.getCursorOffset)(l))},[X,Q]);(0,S.useEffect)(()=>{let l=k.current;if(!l)return;let f=b=>{let v=b,C=v.inputType;if(C==="insertParagraph"||C==="insertLineBreak"||C==="insertFromDrop"){b.preventDefault();return}if(C.startsWith("insert")||C.startsWith("delete")){let R=C.startsWith("delete")?"":v.data??"";q(R)&&b.preventDefault()}};return l.addEventListener("beforeinput",f),()=>l.removeEventListener("beforeinput",f)},[q]);let He=(0,S.useCallback)(()=>{G.current=!0,k.current?.setAttribute("data-aia-composing","true")},[]),Ie=(0,S.useCallback)(()=>{G.current=!1,k.current?.removeAttribute("data-aia-composing"),X()},[X]),g=(0,S.useCallback)(l=>{l.preventDefault();let f=k.current;if(!f)return;let b=(l.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!b)return;let v=f.ownerDocument??document,C=v.getSelection();if(!C||C.rangeCount===0)return;let R=C.getRangeAt(0);if(!f.contains(R.startContainer))return;R.deleteContents();let h=v.createTextNode(b);R.insertNode(h),R.setStartAfter(h),R.collapse(!0),C.removeAllRanges(),C.addRange(R),X()},[X]),Ke=(0,S.useCallback)(l=>H(l),[H]),we=(0,S.useCallback)(()=>K(!0),[K]),Te=(0,S.useCallback)(()=>K(!1),[K]),ve=(0,S.useCallback)(()=>k.current?.focus(),[]),Ee=(0,S.useCallback)(()=>k.current?.blur(),[]),oe=(0,S.useCallback)(()=>{let l=k.current;return l?(0,_.extractPlainText)(l):""},[]),de=Ca()?"plaintext-only":"true";return{inputRef:k,editorProps:{ref:k,contentEditable:de,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":m,"aria-expanded":I,"aria-activedescendant":w,spellCheck:!0,enterKeyHint:"send",onInput:Se,onKeyDown:Ke,onCompositionStart:He,onCompositionEnd:Ie,onPaste:g,onFocus:we,onBlur:Te},getPlainText:oe,focus:ve,blur:Ee}}var ce=require("react/jsx-runtime");function Pa(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var $t=(0,F.forwardRef)(function({onSubmit:a,onResult:t,onError:i,optionOverrides:o,maskCompletedText:r,className:n,apiConfig:p,additionalContext:d,language:x,productId:T,visitorId:I,columns:m,pillPlacement:w="dropdown",mode:E="auto",optionsPosition:B="below",animations:H=!0,dropdownTrigger:Q,closeDropdownOnBlur:M,showNonTappableOptions:A,showOptionIcons:q=!0,showChipIcons:K=!0,showChipImages:k=!0,showOptionImages:G=!0,showOptionCounts:Y=!0,showSkipButton:D,showProducts:le,productsLayout:Pe,productImageFallback:X,autoFocus:Se=!0,onFocus:He,onBlur:Ie,value:g,completedParams:Ke,onChange:we,onParamsChange:Te,products:ve,mapProducts:Ee,onProductSelect:oe,submitButton:de,resetOnSubmit:l=!0},f){let b=(0,F.useRef)(null),v=(0,F.useRef)(null),C=(0,F.useRef)(()=>{}),R=(0,F.useRef)(null),h=(0,F.useRef)(null);(0,F.useEffect)(()=>{let L=b.current;if(L)return R.current?R.current.setMode(E):R.current=new Be.ModeController(L,E),()=>{R.current?.destroy(),R.current=null}},[E]);let U=(0,F.useCallback)(L=>{let ue=h.current?.current;ue&&(ue.focus(),(0,Be.setCursorOffset)(ue,L))},[]),{completedParams:ne,skippedParams:re,identifiedParams:Ae,isReady:xe,customFields:pe,suggestionPills:Re,setActivePill:Ge,skipActivePill:y,segments:De,newParamId:Oe,clearNewParamId:ye,placeholderText:u,isFocused:We,isDropdownOpen:Qe,isActivePillSelected:Le,isLoading:he,activeIndex:Je,listboxId:_e,handleTextChange:ht,handleKeyDown:ze,setFocused:qe,editingParam:Ye,editingIdentified:et,editingAnchor:ut,caretOffset:Ze,startEditingParam:tt,handleCaretAfterInput:c,handleCaretMove:J,replaceEditingRange:O,dropdownProps:gt,reset:at,refreshProducts:Pt,recordSubmit:St}=ct({onSubmit:L=>C.current(L),onResult:t,onError:i,optionOverrides:o,maskCompletedText:r,apiConfig:p,additionalContext:d,language:x,productId:T,visitorId:I,columns:m,dropdownTrigger:Q,optionsPosition:B,closeDropdownOnBlur:M,showNonTappableOptions:A,showOptionIcons:q,showOptionImages:G,showOptionCounts:Y,showSkipButton:D,showProducts:le,onFocus:He,onBlur:Ie,value:g,completedParams:Ke,onChange:we,onParamsChange:Te,products:ve,mapProducts:Ee,onProductSelect:oe,source:"full-sdk",setCursor:U});(0,F.useEffect)(()=>{if(!Oe)return;let L=window.setTimeout(()=>ye(),650);return()=>window.clearTimeout(L)},[Oe,ye]);let Xt=Je>=0?`${_e}-option-${Je}`:void 0,{inputRef:mt,editorProps:Jt,focus:it,blur:It,getPlainText:Tt}=Vt({segments:De,newParamId:Oe,editingParam:Ye,editingIdentified:et,editingAnchor:ut,caretOffset:Ze,placeholderText:u,isFocused:We,showChipIcons:K,showChipImages:k,isDropdownOpen:Qe,listboxId:_e,activeDescendantId:Xt,autoFocus:Se,handleTextChange:ht,handleKeyDown:ze,handleCaretAfterInput:c,handleCaretMove:J,startEditingParam:tt,replaceEditingRange:O,setFocused:qe});h.current=mt,(0,F.useLayoutEffect)(()=>{let L=v.current,ue=mt.current;if(!L||!ue)return;let Ve=()=>{let At=L.firstElementChild;if(!At)return;let ia=At.getBoundingClientRect(),oa=ue.getBoundingClientRect();ia.top>=oa.bottom-2?L.setAttribute("data-aia-pill-wrapped",""):L.removeAttribute("data-aia-pill-wrapped")};Ve();let Et=new ResizeObserver(Ve);return Et.observe(ue),()=>Et.disconnect()},[De,Re.length,he,mt]),(0,F.useImperativeHandle)(f,()=>({focus:it,blur:It,reset:at,refreshProducts:Pt,setMode:L=>R.current?.setMode(L),skipActivePill:y}),[it,It,at,Pt,y]);let ot=!!De.length||ne.length>0,ft=(0,F.useCallback)(L=>{if(!ot)return;let ue=Tt(),Ve=(0,Be.buildSubmitResult)(ue,ne,re,{identifiedParams:Ae,isReady:xe,customFields:pe});L&&St(Ve),a(Ve),l&&at()},[St,l,ot,ne,re,Ae,xe,pe,a,at,Tt]);C.current=()=>ft(!1);let ea=(0,F.useCallback)(L=>{L.target?.closest("[data-aia-pill]")||it()},[it]),ta=w==="inline",aa=w==="dropdown";return(0,ce.jsxs)("div",{ref:b,className:`magicx-aia ${Ue.container} ${n??""}`,"data-pill-placement":w,"data-options-position":B,"data-animations":H?"on":"off","data-mode":Pa(E),children:[(0,ce.jsx)(lt,{...gt,showPills:aa,productsLayout:Pe,productImageFallback:X}),(0,ce.jsxs)("div",{className:Ue.inputWrapper,"data-aia-input-wrapper":"",onClick:ea,children:[(0,ce.jsxs)("div",{className:Ue.editorArea,"data-aia-editor":"",children:[(0,ce.jsx)("div",{...Jt,className:Ue.input,"data-aia-input":""}),ta&&(he||Re.length>0)&&(0,ce.jsx)("span",{ref:v,className:Ue.pillListContainer,"data-aia-pill-list-container":"",children:(0,ce.jsx)(rt,{pills:Re,activePillIndex:0,activeSelected:Le,onSelectPill:Ge,loading:he})})]}),de===null?null:de===void 0?(0,ce.jsx)(Qt,{disabled:!ot,onClick:()=>ft(!0),label:(0,Be.uiStringsFor)(x).submit}):(0,ce.jsx)("span",{"data-aia-submit":"","data-aia-submit-slot":"",className:Ue.submitSlot,onClick:L=>{ot&&(L.stopPropagation(),ft(!0))},children:de})]})]})});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,optionImageSources,optionImageSrc,optionLabel,parseDate,parseLooseDate,parseLooseDateRange,productFromMatchedItem,productImageSources,productsFromCustomFields,sanitizeOptionIconSvg,selectedRangeFor,useAIAutocomplete,visibleDateRange,withSkippedParams});
|
|
2376
|
+
`,document.head.appendChild(e)}var Ut={submitButton:"aia-submitButton-otz7H"};var dt=require("react/jsx-runtime");function Qt({disabled:e,onClick:a,label:t=(0,jt.uiStringsFor)().submit}){return(0,dt.jsx)("button",{type:"button","data-aia-submit":"",className:Ut.submitButton,disabled:e,onClick:i=>{i.stopPropagation(),a()},"aria-label":t,children:(0,dt.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":t,children:(0,dt.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var Fe=require("@magicx-eng/ai-autocomplete-vanilla"),P=require("react");var kt=require("react");function Yt(e){let a=(0,kt.useRef)(e);a.current=e;let t=Object.keys(e??{}).sort().join("\0"),i=(0,kt.useRef)({key:"",overrides:void 0});if(i.current.key!==t){let o={};for(let s of Object.keys(e??{})){let n=(p,d,w)=>{let I=a.current?.[s];return I?I(p,d,w):[]};o[s]=n}i.current={key:t,overrides:e?o:void 0}}return{overrides:i.current.overrides,key:t}}var Ct=require("react");function Vt(e){let a=(0,Ct.useRef)(e);a.current=e;let t=(0,Ct.useRef)(null);t.current===null&&(t.current={fetch:(o,s)=>{let n=a.current;return n?n.fetch(o,s):Promise.reject(new Error("products config removed"))},transform:o=>a.current?.transform(o)??[],get limit(){return a.current?.limit}});let i=e!==void 0;return{config:i?t.current:void 0,enabled:i}}var ka={text:"",completedParams:[],identifiedParams:[],skippedParams:[],pendingSpan:null,suggestions:[],products:[],traditionalAutocomplete:!1,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,dropdownHeld:!1,editingParam:null,editingIdentified:null,editingAnchor:null,editingTail:null,caretOffset:null,inSelectionAnimation:!1,dateViewMonth:null,pendingRangeStart:null};function ct({onSubmit:e,onResult:a,onError:t,optionOverrides:i,maskCompletedText:o,apiConfig:s,additionalContext:n,language:p,productId:d,visitorId:w,columns:I=2,dropdownTrigger:T,optionsPosition:m,closeDropdownOnBlur:v,showNonTappableOptions:E,showOptionIcons:H,showOptionImages:K,showOptionCounts:Q,showSkipButton:$,showProducts:A,productImageFallback:M="image",onFocus:D,onBlur:k,value:G,completedParams:Y,onChange:O,onParamsChange:le,products:Pe,mapProducts:X,onProductSelect:Se,source:He,setCursor:Ie}){let g=(0,P.useRef)(null),[Ke,we]=(0,P.useState)(null),Te=(0,P.useRef)(e);Te.current=e;let ve=(0,P.useRef)(a);ve.current=a;let Ee=(0,P.useRef)(t);Ee.current=t;let oe=(0,P.useRef)(O);oe.current=O;let de=(0,P.useRef)(le);de.current=le;let l=(0,P.useRef)(D);l.current=D;let f=(0,P.useRef)(k);f.current=k;let b=(0,P.useRef)(Ie);b.current=Ie;let x=(0,P.useRef)(Se);x.current=Se;let C=(0,P.useRef)(w);C.current=w;let R=(0,P.useRef)(()=>{let c=C.current;return typeof c=="function"?c():c}).current,h=Vt(Pe),U=(0,P.useRef)(X);U.current=X;let ne=(0,P.useRef)((c,J)=>{let L=U.current;return L?L(c,J):c}).current,re=X?ne:void 0,Ae=Yt(i);(0,P.useEffect)(()=>{if(typeof document>"u")return;let c=new Fe.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:s,additionalContext:n,language:p,productId:d,visitorId:R,optionOverrides:Ae.overrides,maskCompletedText:o,columns:I,dropdownTrigger:T,optionsPosition:m,closeDropdownOnBlur:v,showNonTappableOptions:E,showProducts:A,source:He,value:G,completedParams:Y,onSubmit:(...L)=>Te.current?.(...L),onResult:(...L)=>ve.current?.(...L),onError:(...L)=>Ee.current?.(...L),onChange:(...L)=>oe.current?.(...L),onParamsChange:(...L)=>de.current?.(...L),onFocus:()=>l.current?.(),onBlur:()=>f.current?.(),onProductSelect:L=>x.current?.(L),setCursor:L=>b.current?.(L),products:h.config,mapProducts:re});g.current=c,we(c.getState());let J=c.subscribe(L=>we(L));return()=>{J(),c.destroy(),g.current===c&&(g.current=null)}},[]),(0,P.useEffect)(()=>{G!==void 0&&g.current?.setValue(G)},[G]),(0,P.useEffect)(()=>{Y!==void 0&&g.current?.setCompletedParams(Y)},[Y]);let xe=JSON.stringify(s??null),pe;try{pe=JSON.stringify(n??null)}catch{pe="[unstringifiable]"}(0,P.useEffect)(()=>{g.current?.update({apiConfig:s,additionalContext:n,language:p,productId:d,optionOverrides:Ae.overrides,dropdownTrigger:T,optionsPosition:m,closeDropdownOnBlur:v,showNonTappableOptions:E,showProducts:A})},[xe,pe,p,d,Ae.key,T,m,v,E,A]);let Re=(0,P.useRef)(!1);(0,P.useEffect)(()=>{if(!Re.current){Re.current=!0;return}g.current?.update({products:h.config})},[h.enabled]),(0,P.useEffect)(()=>{g.current?.update({mapProducts:re})},[re]);let Ge=(0,P.useRef)(null);Ge.current===null&&(Ge.current={handleTextChange:c=>g.current?.handleTextChange(c),handleKeyDown:c=>{let J="nativeEvent"in c?c.nativeEvent:c;g.current?.handleKeyDown(J)},setFocused:c=>g.current?.setFocused(c),startEditingParam:c=>g.current?.startEditingParam(c),exitEditMode:()=>g.current?.exitEditMode(),handleCaretAfterInput:c=>g.current?.handleCaretAfterInput(c),handleCaretMove:c=>g.current?.handleCaretMove(c),replaceEditingRange:c=>g.current?.replaceEditingRange(c)??!1,setActivePill:c=>g.current?.setActivePill(c),skipActivePill:()=>g.current?.skipActivePill(),removeLastParam:()=>g.current?.removeLastParam(),clearNewParamId:()=>g.current?.clearNewParamId(),reset:()=>g.current?.reset(),refreshProducts:()=>g.current?.refreshProducts(),recordSubmit:c=>g.current?.recordSubmit(c),selectOption:c=>g.current?.selectOption(c),selectProduct:c=>g.current?.selectProduct(c),setActiveDropdownIndex:c=>g.current?.setActiveDropdownIndex(c),clearHighlight:c=>g.current?.clearHighlight(c),showPreviousMonth:()=>g.current?.showPreviousMonth(),showNextMonth:()=>g.current?.showNextMonth(),handleFocus:()=>g.current?.setFocused(!0),handleBlur:()=>g.current?.setFocused(!1)});let y=Ge.current,De=(0,P.useCallback)(c=>{let J=c.target.value,gt=J.length>0&&!c.nativeEvent?.isComposing&&J[0]!==J[0].toUpperCase()?J[0].toUpperCase()+J.slice(1):J;g.current?.handleTextChange(gt)},[]),Oe=(0,P.useCallback)(c=>{g.current?.handleKeyDown(c.nativeEvent)},[]),ye=g.current,u=Ke??ka,We=G!==void 0?G:u.text,Qe=Y!==void 0?Y:u.completedParams,Le=u.actionableSuggestions,he=Le[0],Je=(0,Fe.withoutTraditionalAutocomplete)(Le),_e=ye?.listboxId??"",ht=u.activeDropdownIndex>=0&&ye?`${_e}-option-${u.activeDropdownIndex}`:void 0,ze=u.editingParam,qe=u.editingIdentified,Ye=ze?{parameter:ze.suggestionParameter,text:ze.suggestionPlaceholder,required:!0,options:ze.options}:qe?{parameter:qe.parameter,text:(0,Fe.identifiedParamLabel)(qe.parameter),required:!0,options:[]}:null,et=u.dropdownSuggestion??Ye??he,ut=Ye?[Ye]:Le,Ve=(0,Fe.dateSelectionFor)(u),tt=!ye||u.dropdownLoading;return{completedParams:Qe,skippedParams:u.skippedParams,identifiedParams:u.identifiedParams,suggestionPills:Je,setActivePill:y.setActivePill,skipActivePill:y.skipActivePill,removeLastParam:y.removeLastParam,segments:u.segments,newParamId:u.newParamId,clearNewParamId:y.clearNewParamId,suggestions:u.suggestions,activeIndex:u.activeDropdownIndex,isReady:u.isReady,isLoading:tt,isFocused:u.isFocused,isDropdownOpen:u.isDropdownOpen,isActivePillSelected:u.isActivePillSelected,placeholderText:u.placeholderText,listboxId:_e,error:u.error,products:u.products,customFields:u.customFields,selectProduct:y.selectProduct,handleTextChange:y.handleTextChange,handleKeyDown:y.handleKeyDown,setFocused:y.setFocused,editingParam:ze,editingIdentified:qe,editingAnchor:u.editingAnchor,caretOffset:u.caretOffset,startEditingParam:y.startEditingParam,exitEditMode:y.exitEditMode,handleCaretAfterInput:y.handleCaretAfterInput,handleCaretMove:y.handleCaretMove,replaceEditingRange:y.replaceEditingRange,inputProps:{value:We,placeholder:u.placeholderText||void 0,onChange:De,onKeyDown:Oe,onFocus:y.handleFocus,onBlur:y.handleBlur,role:"combobox","aria-expanded":u.isDropdownOpen,"aria-activedescendant":ht,"aria-autocomplete":"list","aria-controls":_e},reset:y.reset,refreshProducts:y.refreshProducts,recordSubmit:y.recordSubmit,dropdownProps:{suggestions:et?[{...et,options:u.dropdownOptions}]:[],activeIndex:u.activeDropdownIndex,onSelect:y.selectOption,onHighlight:y.setActiveDropdownIndex,onUnhighlight:y.clearHighlight,isOpen:u.isDropdownOpen,id:_e,pills:ut,activeSelected:u.isActivePillSelected,onPillClick:y.setActivePill,onSkip:y.skipActivePill,showSkipButton:($??!0)&&!ze&&!qe,showOptionIcons:H??!0,showOptionImages:K??!0,showOptionCounts:Q??!0,skipDisabled:u.inSelectionAnimation,isLoading:tt,skeletonExiting:u.skeletonExiting,isInputEmpty:We.trim().length===0,language:p,products:u.products,productImageFallback:M,onProductSelect:y.selectProduct,onProductFocusChange:y.setFocused,formatType:u.activeFormatType,dateView:u.dateView,selectedDateIso:Ve.selectedIso,selectedDateRange:Ve.selectedRange,dateRangeStart:Ve.rangeStart,onPreviousMonth:y.showPreviousMonth,onNextMonth:y.showNextMonth,optionsPosition:m??"below"}}}var q=require("@magicx-eng/ai-autocomplete-vanilla"),S=require("react"),pt;function Ca(){if(pt!==void 0)return pt;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),pt=e.contentEditable==="plaintext-only",pt}function Zt(e){let{segments:a,showChipIcons:t=!0,showChipImages:i=!0,newParamId:o,editingParam:s,editingIdentified:n,editingAnchor:p,caretOffset:d,placeholderText:w,isFocused:I,isDropdownOpen:T,listboxId:m,activeDescendantId:v,autoFocus:E,handleTextChange:H,handleKeyDown:K,handleCaretAfterInput:Q,handleCaretMove:$,startEditingParam:A,replaceEditingRange:M,setFocused:D}=e,k=(0,S.useRef)(null),G=(0,S.useRef)(!1),Y=(0,S.useRef)(""),O=(0,S.useRef)(""),le=(0,S.useRef)(null),Pe=(0,S.useRef)(0);le.current=d,(0,S.useEffect)(()=>{if(!E)return;let l=k.current;if(!l)return;document.activeElement===l?D(!0):l.focus();let f=l.ownerDocument??document,b=f.getSelection(),x=b&&b.rangeCount>0&&l.contains(b.anchorNode);if(b&&!x){let C=f.createRange();C.selectNodeContents(l),C.collapse(!0),b.removeAllRanges(),b.addRange(C)}},[E,D]),(0,S.useEffect)(()=>{let l=k.current;if(!l)return;let f=l.ownerDocument??document,b=()=>{let x=f.getSelection();if(!x||x.rangeCount===0||!x.anchorNode||!l.contains(x.anchorNode))return;let C=x.anchorNode,R=C.nodeType===Node.ELEMENT_NODE?C:C.parentElement,U=(x.isCollapsed?R?.closest("strong[data-param-id]"):null)?.dataset.paramId??null,ne=s?.id??n?.id??null;if(U&&U!==ne){A(U);return}performance.now()-Pe.current<50||$((0,q.getCursorOffset)(l))};return f.addEventListener("selectionchange",b),()=>f.removeEventListener("selectionchange",b)},[s,n,A,$]),(0,S.useEffect)(()=>{let l=k.current;if(!l)return;let f=b=>{let x=(0,q.chipIdFromTap)(l,b.target);x&&(A(x),(0,q.keepCaretOnChip)(l,x))};return l.addEventListener("click",f),()=>l.removeEventListener("click",f)},[A]),(0,S.useLayoutEffect)(()=>{let l=k.current;l&&(0,q.renderEditableContent)({input:l,segments:a,newParamId:o,editingParamId:s?.id??null,placeholderText:w??"",isFocused:I,showChipIcons:t,showChipImages:i})},[a,o,s,w,I,t,i]),(0,S.useLayoutEffect)(()=>{let l=Y.current,f=o??"";if(Y.current=f,!f||f===l)return;let b=k.current;if(!b)return;b.focus();let x=le.current??(0,q.plainTextLength)(b);(0,q.setCursorOffset)(b,x)},[o]),(0,S.useLayoutEffect)(()=>{let l=O.current,f=s?.id??"";if(O.current=f,!f||f===l||p==null)return;let b=k.current;b&&(0,q.setCursorOffset)(b,p)},[s,p]);let X=(0,S.useCallback)(()=>{if(G.current)return;let l=k.current;if(!l)return;let f=(0,q.extractPlainText)(l),x=f.length>0&&f[0]!==f[0].toUpperCase()?f[0].toUpperCase()+f.slice(1):f;H(x)},[H]),Se=(0,S.useCallback)(()=>{Pe.current=performance.now(),X();let l=k.current;l&&Q((0,q.getCursorOffset)(l))},[X,Q]);(0,S.useEffect)(()=>{let l=k.current;if(!l)return;let f=b=>{let x=b,C=x.inputType;if(C==="insertParagraph"||C==="insertLineBreak"||C==="insertFromDrop"){b.preventDefault();return}if(C.startsWith("insert")||C.startsWith("delete")){let R=C.startsWith("delete")?"":x.data??"";M(R)&&b.preventDefault()}};return l.addEventListener("beforeinput",f),()=>l.removeEventListener("beforeinput",f)},[M]);let He=(0,S.useCallback)(()=>{G.current=!0,k.current?.setAttribute("data-aia-composing","true")},[]),Ie=(0,S.useCallback)(()=>{G.current=!1,k.current?.removeAttribute("data-aia-composing"),X()},[X]),g=(0,S.useCallback)(l=>{l.preventDefault();let f=k.current;if(!f)return;let b=(l.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!b)return;let x=f.ownerDocument??document,C=x.getSelection();if(!C||C.rangeCount===0)return;let R=C.getRangeAt(0);if(!f.contains(R.startContainer))return;R.deleteContents();let h=x.createTextNode(b);R.insertNode(h),R.setStartAfter(h),R.collapse(!0),C.removeAllRanges(),C.addRange(R),X()},[X]),Ke=(0,S.useCallback)(l=>K(l),[K]),we=(0,S.useCallback)(()=>D(!0),[D]),Te=(0,S.useCallback)(()=>D(!1),[D]),ve=(0,S.useCallback)(()=>k.current?.focus(),[]),Ee=(0,S.useCallback)(()=>k.current?.blur(),[]),oe=(0,S.useCallback)(()=>{let l=k.current;return l?(0,q.extractPlainText)(l):""},[]),de=Ca()?"plaintext-only":"true";return{inputRef:k,editorProps:{ref:k,contentEditable:de,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":m,"aria-expanded":T,"aria-activedescendant":v,spellCheck:!0,enterKeyHint:"send",onInput:Se,onKeyDown:Ke,onCompositionStart:He,onCompositionEnd:Ie,onPaste:g,onFocus:we,onBlur:Te},getPlainText:oe,focus:ve,blur:Ee}}var ce=require("react/jsx-runtime");function Pa(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var $t=(0,B.forwardRef)(function({onSubmit:a,onResult:t,onError:i,optionOverrides:o,maskCompletedText:s,className:n,apiConfig:p,additionalContext:d,language:w,productId:I,visitorId:T,columns:m,pillPlacement:v="dropdown",mode:E="auto",optionsPosition:H="below",animations:K=!0,dropdownTrigger:Q,closeDropdownOnBlur:$,showNonTappableOptions:A,showOptionIcons:M=!0,showChipIcons:D=!0,showChipImages:k=!0,showOptionImages:G=!0,showOptionCounts:Y=!0,showSkipButton:O,showProducts:le,productsLayout:Pe,productImageFallback:X,autoFocus:Se=!0,onFocus:He,onBlur:Ie,value:g,completedParams:Ke,onChange:we,onParamsChange:Te,products:ve,mapProducts:Ee,onProductSelect:oe,submitButton:de,resetOnSubmit:l=!0},f){let b=(0,B.useRef)(null),x=(0,B.useRef)(null),C=(0,B.useRef)(()=>{}),R=(0,B.useRef)(null),h=(0,B.useRef)(null);(0,B.useEffect)(()=>{let z=b.current;if(z)return R.current?R.current.setMode(E):R.current=new Be.ModeController(z,E),()=>{R.current?.destroy(),R.current=null}},[E]);let U=(0,B.useCallback)(z=>{let ue=h.current?.current;ue&&(ue.focus(),(0,Be.setCursorOffset)(ue,z))},[]),{completedParams:ne,skippedParams:re,identifiedParams:Ae,isReady:xe,customFields:pe,suggestionPills:Re,setActivePill:Ge,skipActivePill:y,segments:De,newParamId:Oe,clearNewParamId:ye,placeholderText:u,isFocused:We,isDropdownOpen:Qe,isActivePillSelected:Le,isLoading:he,activeIndex:Je,listboxId:_e,handleTextChange:ht,handleKeyDown:ze,setFocused:qe,editingParam:Ye,editingIdentified:et,editingAnchor:ut,caretOffset:Ve,startEditingParam:tt,handleCaretAfterInput:c,handleCaretMove:J,replaceEditingRange:L,dropdownProps:gt,reset:at,refreshProducts:Pt,recordSubmit:St}=ct({onSubmit:z=>C.current(z),onResult:t,onError:i,optionOverrides:o,maskCompletedText:s,apiConfig:p,additionalContext:d,language:w,productId:I,visitorId:T,columns:m,dropdownTrigger:Q,optionsPosition:H,closeDropdownOnBlur:$,showNonTappableOptions:A,showOptionIcons:M,showOptionImages:G,showOptionCounts:Y,showSkipButton:O,showProducts:le,onFocus:He,onBlur:Ie,value:g,completedParams:Ke,onChange:we,onParamsChange:Te,products:ve,mapProducts:Ee,onProductSelect:oe,source:"full-sdk",setCursor:U});(0,B.useEffect)(()=>{if(!Oe)return;let z=window.setTimeout(()=>ye(),650);return()=>window.clearTimeout(z)},[Oe,ye]);let Xt=Je>=0?`${_e}-option-${Je}`:void 0,{inputRef:mt,editorProps:Jt,focus:it,blur:It,getPlainText:Tt}=Zt({segments:De,newParamId:Oe,editingParam:Ye,editingIdentified:et,editingAnchor:ut,caretOffset:Ve,placeholderText:u,isFocused:We,showChipIcons:D,showChipImages:k,isDropdownOpen:Qe,listboxId:_e,activeDescendantId:Xt,autoFocus:Se,handleTextChange:ht,handleKeyDown:ze,handleCaretAfterInput:c,handleCaretMove:J,startEditingParam:tt,replaceEditingRange:L,setFocused:qe});h.current=mt,(0,B.useLayoutEffect)(()=>{let z=x.current,ue=mt.current;if(!z||!ue)return;let Ze=()=>{let At=z.firstElementChild;if(!At)return;let ia=At.getBoundingClientRect(),oa=ue.getBoundingClientRect();ia.top>=oa.bottom-2?z.setAttribute("data-aia-pill-wrapped",""):z.removeAttribute("data-aia-pill-wrapped")};Ze();let Et=new ResizeObserver(Ze);return Et.observe(ue),()=>Et.disconnect()},[De,Re.length,he,mt]),(0,B.useImperativeHandle)(f,()=>({focus:it,blur:It,reset:at,refreshProducts:Pt,setMode:z=>R.current?.setMode(z),skipActivePill:y}),[it,It,at,Pt,y]);let ot=!!De.length||ne.length>0,ft=(0,B.useCallback)(z=>{if(!ot)return;let ue=Tt(),Ze=(0,Be.buildSubmitResult)(ue,ne,re,{identifiedParams:Ae,isReady:xe,customFields:pe});z&&St(Ze),a(Ze),l&&at()},[St,l,ot,ne,re,Ae,xe,pe,a,at,Tt]);C.current=()=>ft(!1);let ea=(0,B.useCallback)(z=>{z.target?.closest("[data-aia-pill]")||it()},[it]),ta=v==="inline",aa=v==="dropdown";return(0,ce.jsxs)("div",{ref:b,className:`magicx-aia ${Ue.container} ${n??""}`,"data-pill-placement":v,"data-options-position":H,"data-animations":K?"on":"off","data-mode":Pa(E),children:[(0,ce.jsx)(lt,{...gt,showPills:aa,productsLayout:Pe,productImageFallback:X}),(0,ce.jsxs)("div",{className:Ue.inputWrapper,"data-aia-input-wrapper":"",onClick:ea,children:[(0,ce.jsxs)("div",{className:Ue.editorArea,"data-aia-editor":"",children:[(0,ce.jsx)("div",{...Jt,className:Ue.input,"data-aia-input":""}),ta&&(he||Re.length>0)&&(0,ce.jsx)("span",{ref:x,className:Ue.pillListContainer,"data-aia-pill-list-container":"",children:(0,ce.jsx)(rt,{pills:Re,activePillIndex:0,activeSelected:Le,onSelectPill:Ge,loading:he})})]}),de===null?null:de===void 0?(0,ce.jsx)(Qt,{disabled:!ot,onClick:()=>ft(!0),label:(0,Be.uiStringsFor)(w).submit}):(0,ce.jsx)("span",{"data-aia-submit":"","data-aia-submit-slot":"",className:Ue.submitSlot,onClick:z=>{ot&&(z.stopPropagation(),ft(!0))},children:de})]})]})});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,optionImageSources,optionImageSrc,optionLabel,optionsShowLeadingVisuals,parseDate,parseLooseDate,parseLooseDateRange,productFromMatchedItem,productImageSources,productsFromCustomFields,sanitizeOptionIconSvg,selectedRangeFor,useAIAutocomplete,visibleDateRange,withSkippedParams});
|
|
2374
2377
|
//# sourceMappingURL=index.js.map
|