@magicx-eng/ai-autocomplete-react 0.27.0 → 0.29.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 +1 -0
- package/dist/index.d.mts +16 -1
- package/dist/index.d.ts +16 -1
- package/dist/index.js +31 -25
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +31 -25
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -368,6 +368,7 @@ function App() {
|
|
|
368
368
|
| `productImageFallback?` | `"image" \| "initial"` | `"image"` | Fallback for a missing or blank product image URL, or an image load error. `"image"` shows the placeholder pictogram; `"initial"` shows the title initial. A working image still takes priority. See [Product strip](#product-strip). |
|
|
369
369
|
| `products?` | `ProductsConfig` | — | Custom source for the product strip — see [Your own product search](#your-own-product-search-products). Omit it and the strip shows the items the `/suggest` response reports. |
|
|
370
370
|
| `onProductSelect?` | `(product: Product) => void` | — | Called when a product card is activated. The SDK never navigates. |
|
|
371
|
+
| `resetOnSubmit?` | `boolean` | `true` | Clear the input and start a new session after `onSubmit` runs. Set to `false` to keep the query in place — e.g. when `onSubmit` navigates away — and call the handle's `reset()` yourself. |
|
|
371
372
|
| `submitButton?` | `ReactNode` | — | Custom submit button. Pass any `ReactNode` to replace the default arrow button. Pass `null` to render no button. Clicks bubble up and trigger submit, so consumer-supplied buttons work without re-wiring `onClick`. |
|
|
372
373
|
| `ref?` | `Ref<AIAutocompleteHandle>` | — | Imperative handle with `focus()`, `blur()`, `reset()`, and `setMode()`. |
|
|
373
374
|
|
package/dist/index.d.mts
CHANGED
|
@@ -149,6 +149,14 @@ interface AIAutocompleteProps {
|
|
|
149
149
|
* arrow button. The library wraps the node so clicks bubble up and trigger submit.
|
|
150
150
|
*/
|
|
151
151
|
submitButton?: ReactNode;
|
|
152
|
+
/**
|
|
153
|
+
* When true (default), the input is cleared and a new session starts after
|
|
154
|
+
* `onSubmit` runs — on Enter and on the submit button. Set to false to leave
|
|
155
|
+
* the query in place: when `onSubmit` navigates away, a cleared field
|
|
156
|
+
* flashes empty until the next page paints. Call the handle's `reset()`
|
|
157
|
+
* yourself when you want a fresh session.
|
|
158
|
+
*/
|
|
159
|
+
resetOnSubmit?: boolean;
|
|
152
160
|
}
|
|
153
161
|
interface UseAIAutocompleteOptions {
|
|
154
162
|
/** Called on Enter with the final structured query. */
|
|
@@ -399,6 +407,13 @@ interface AIAutocompleteDropdownProps {
|
|
|
399
407
|
activeIndex: number;
|
|
400
408
|
onSelect: (option: SuggestionOption) => void;
|
|
401
409
|
onHighlight: (index: number) => void;
|
|
410
|
+
/**
|
|
411
|
+
* The pointer left option `index`. Clear the highlight if it is still on
|
|
412
|
+
* that option (the hook wires the core's `clearHighlight`): a hover
|
|
413
|
+
* highlight that outlived the hover made Enter pick an option the pointer
|
|
414
|
+
* was no longer on instead of submitting the search.
|
|
415
|
+
*/
|
|
416
|
+
onUnhighlight?: (index: number) => void;
|
|
402
417
|
isOpen: boolean;
|
|
403
418
|
id: string;
|
|
404
419
|
className?: string;
|
|
@@ -519,7 +534,7 @@ interface AIAutocompleteDropdownProps {
|
|
|
519
534
|
|
|
520
535
|
declare const AIAutocomplete: react.ForwardRefExoticComponent<AIAutocompleteProps & react.RefAttributes<AIAutocompleteHandle>>;
|
|
521
536
|
|
|
522
|
-
declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, isOpen, id, className, pills, onPillClick, showPills, onSkip, showSkipButton, showOptionIcons, showOptionImages, showOptionCounts, skipDisabled, activeSelected, isLoading, skeletonExiting, isInputEmpty, products, onProductSelect, onProductFocusChange, productsLayout, productImageFallback, formatType, dateView, selectedDateIso, selectedDateRange, dateRangeStart, onPreviousMonth, onNextMonth, optionsPosition, mode, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
|
|
537
|
+
declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, onUnhighlight, isOpen, id, className, pills, onPillClick, showPills, onSkip, showSkipButton, showOptionIcons, showOptionImages, showOptionCounts, skipDisabled, activeSelected, isLoading, skeletonExiting, isInputEmpty, products, onProductSelect, onProductFocusChange, productsLayout, productImageFallback, formatType, dateView, selectedDateIso, selectedDateRange, dateRangeStart, onPreviousMonth, onNextMonth, optionsPosition, mode, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
|
|
523
538
|
|
|
524
539
|
declare function useAIAutocomplete({ onSubmit, onResult, onError, optionOverrides, maskCompletedText, apiConfig, additionalContext, columns, dropdownTrigger, optionsPosition, closeDropdownOnBlur, showNonTappableOptions, showOptionIcons, showOptionImages, showOptionCounts, showSkipButton, showProducts, productImageFallback, onFocus, onBlur, value: controlledValue, completedParams: controlledParams, onChange: onChangeProp, onParamsChange, products, onProductSelect, source, setCursor, }: UseAIAutocompleteOptions): UseAIAutocompleteReturn;
|
|
525
540
|
|
package/dist/index.d.ts
CHANGED
|
@@ -149,6 +149,14 @@ interface AIAutocompleteProps {
|
|
|
149
149
|
* arrow button. The library wraps the node so clicks bubble up and trigger submit.
|
|
150
150
|
*/
|
|
151
151
|
submitButton?: ReactNode;
|
|
152
|
+
/**
|
|
153
|
+
* When true (default), the input is cleared and a new session starts after
|
|
154
|
+
* `onSubmit` runs — on Enter and on the submit button. Set to false to leave
|
|
155
|
+
* the query in place: when `onSubmit` navigates away, a cleared field
|
|
156
|
+
* flashes empty until the next page paints. Call the handle's `reset()`
|
|
157
|
+
* yourself when you want a fresh session.
|
|
158
|
+
*/
|
|
159
|
+
resetOnSubmit?: boolean;
|
|
152
160
|
}
|
|
153
161
|
interface UseAIAutocompleteOptions {
|
|
154
162
|
/** Called on Enter with the final structured query. */
|
|
@@ -399,6 +407,13 @@ interface AIAutocompleteDropdownProps {
|
|
|
399
407
|
activeIndex: number;
|
|
400
408
|
onSelect: (option: SuggestionOption) => void;
|
|
401
409
|
onHighlight: (index: number) => void;
|
|
410
|
+
/**
|
|
411
|
+
* The pointer left option `index`. Clear the highlight if it is still on
|
|
412
|
+
* that option (the hook wires the core's `clearHighlight`): a hover
|
|
413
|
+
* highlight that outlived the hover made Enter pick an option the pointer
|
|
414
|
+
* was no longer on instead of submitting the search.
|
|
415
|
+
*/
|
|
416
|
+
onUnhighlight?: (index: number) => void;
|
|
402
417
|
isOpen: boolean;
|
|
403
418
|
id: string;
|
|
404
419
|
className?: string;
|
|
@@ -519,7 +534,7 @@ interface AIAutocompleteDropdownProps {
|
|
|
519
534
|
|
|
520
535
|
declare const AIAutocomplete: react.ForwardRefExoticComponent<AIAutocompleteProps & react.RefAttributes<AIAutocompleteHandle>>;
|
|
521
536
|
|
|
522
|
-
declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, isOpen, id, className, pills, onPillClick, showPills, onSkip, showSkipButton, showOptionIcons, showOptionImages, showOptionCounts, skipDisabled, activeSelected, isLoading, skeletonExiting, isInputEmpty, products, onProductSelect, onProductFocusChange, productsLayout, productImageFallback, formatType, dateView, selectedDateIso, selectedDateRange, dateRangeStart, onPreviousMonth, onNextMonth, optionsPosition, mode, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
|
|
537
|
+
declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, onUnhighlight, isOpen, id, className, pills, onPillClick, showPills, onSkip, showSkipButton, showOptionIcons, showOptionImages, showOptionCounts, skipDisabled, activeSelected, isLoading, skeletonExiting, isInputEmpty, products, onProductSelect, onProductFocusChange, productsLayout, productImageFallback, formatType, dateView, selectedDateIso, selectedDateRange, dateRangeStart, onPreviousMonth, onNextMonth, optionsPosition, mode, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
|
|
523
538
|
|
|
524
539
|
declare function useAIAutocomplete({ onSubmit, onResult, onError, optionOverrides, maskCompletedText, apiConfig, additionalContext, columns, dropdownTrigger, optionsPosition, closeDropdownOnBlur, showNonTappableOptions, showOptionIcons, showOptionImages, showOptionCounts, showSkipButton, showProducts, productImageFallback, onFocus, onBlur, value: controlledValue, completedParams: controlledParams, onChange: onChangeProp, onParamsChange, products, onProductSelect, source, setCursor, }: UseAIAutocompleteOptions): UseAIAutocompleteReturn;
|
|
525
540
|
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var rt=Object.defineProperty;var
|
|
1
|
+
"use strict";var rt=Object.defineProperty;var Xt=Object.getOwnPropertyDescriptor;var Jt=Object.getOwnPropertyNames;var ea=Object.prototype.hasOwnProperty;var ta=(e,a)=>{for(var t in a)rt(e,t,{get:a[t],enumerable:!0})},aa=(e,a,t,n)=>{if(a&&typeof a=="object"||typeof a=="function")for(let i of Jt(a))!ea.call(e,i)&&i!==t&&rt(e,i,{get:()=>a[i],enumerable:!(n=Xt(a,i))||n.enumerable});return e};var ia=e=>aa(rt({},"__esModule",{value:!0}),e);var ba={};ta(ba,{AIAutocomplete:()=>Ht,AIAutocompleteDropdown:()=>Je,DATE_RANGE_META_END:()=>s.DATE_RANGE_META_END,DATE_RANGE_META_START:()=>s.DATE_RANGE_META_START,DEFAULT_OPTION_COUNT_UNIT:()=>s.DEFAULT_OPTION_COUNT_UNIT,PRODUCT_PATH_PREFIX:()=>s.PRODUCT_PATH_PREFIX,WEEKDAY_LABELS:()=>s.WEEKDAY_LABELS,buildSubmitResult:()=>s.buildSubmitResult,cellDay:()=>s.cellDay,cellIso:()=>s.cellIso,dateCellMarks:()=>s.dateCellMarks,formatDate:()=>s.formatDate,formatDateRange:()=>s.formatDateRange,formatOptionCount:()=>s.formatOptionCount,isoDate:()=>s.isoDate,monthLabel:()=>s.monthLabel,optionCountLabel:()=>s.optionCountLabel,optionHasImage:()=>s.optionHasImage,optionImageSrc:()=>s.optionImageSrc,optionLabel:()=>s.optionLabel,parseDate:()=>s.parseDate,parseLooseDate:()=>s.parseLooseDate,parseLooseDateRange:()=>s.parseLooseDateRange,productFromMatchedItem:()=>s.productFromMatchedItem,productsFromCustomFields:()=>s.productsFromCustomFields,sanitizeOptionIconSvg:()=>s.sanitizeOptionIconSvg,selectedRangeFor:()=>s.selectedRangeFor,useAIAutocomplete:()=>tt,visibleDateRange:()=>s.visibleDateRange,withSkippedParams:()=>s.withSkippedParams});module.exports=ia(ba);var s=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
|
|
@@ -262,7 +262,7 @@
|
|
|
262
262
|
opacity: 0;
|
|
263
263
|
}
|
|
264
264
|
}
|
|
265
|
-
`,document.head.appendChild(e)}var
|
|
265
|
+
`,document.head.appendChild(e)}var Me={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 He=require("@magicx-eng/ai-autocomplete-vanilla"),ee=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
|
|
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 N=require("@magicx-eng/ai-autocomplete-vanilla"),vt=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-f687bd03")){let e=document.createElement("style");e.id="ac-style-f687bd03",e.textContent=`/* --- Datepicker (replaces the options grid for date suggestions) ---
|
|
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 U=require("react/jsx-runtime"),oa=["sunday","monday","tuesday","wednesday","thursday","friday","saturday"];function wt({options:e,activeIndex:a,listboxId:t,view:n,selection:i,onSelect:r,onHighlight:o,onUnhighlight:d,onPreviousMonth:x,onNextMonth:v}){let w=(0,N.isoDate)(new Date),S=(0,N.visibleDateRange)({pendingStart:i.rangeStart,highlightedIso:(0,N.cellIso)(e[a]),selected:i.selectedRange});return(0,U.jsxs)("div",{className:z.datepicker,"data-aia-datepicker":"",children:[(0,U.jsxs)("div",{className:z.header,children:[(0,U.jsx)("button",{type:"button",tabIndex:-1,className:z.nav,"data-aia-date-prev":"","aria-label":"Previous month",onMouseDown:f=>f.preventDefault(),onClick:x,children:"\u2039"}),(0,U.jsx)("span",{className:z.month,"data-aia-date-month":"","aria-live":"polite",children:(0,N.monthLabel)(n)}),(0,U.jsx)("button",{type:"button",tabIndex:-1,className:z.nav,"data-aia-date-next":"","aria-label":"Next month",onMouseDown:f=>f.preventDefault(),onClick:v,children:"\u203A"})]}),(0,U.jsx)("div",{className:z.weekdays,"aria-hidden":"true",children:N.WEEKDAY_LABELS.map((f,y)=>(0,U.jsx)("span",{className:z.weekday,children:f},oa[y]))}),(0,U.jsx)("div",{className:z.grid,"data-aia-date-grid":"",children:e.map((f,y)=>(0,U.jsx)(na,{option:f,id:`${t}-option-${y}`,index:y,isHighlighted:y===a&&f.is_tappable,isToday:(0,N.cellIso)(f)===w,isPast:(0,N.cellIso)(f)!=null&&(0,N.cellIso)(f)<w,marks:(0,N.dateCellMarks)((0,N.cellIso)(f),{selectedIso:i.selectedIso,range:S}),onSelect:r,onHighlight:o,onUnhighlight:d},(0,N.cellIso)(f)??`pad-${y}`))})]})}function na({option:e,id:a,index:t,isHighlighted:n,isToday:i,isPast:r,marks:o,onSelect:d,onHighlight:x,onUnhighlight:v}){let[w,S]=(0,vt.useState)(!1),f=(0,N.cellDay)(e);if(f==null)return(0,U.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=()=>{S(!0),d(e),setTimeout(()=>S(!1),170)},D=[z.cell,z.day,r?z.past:"",n?z.highlighted:"",i?z.today:"",o.inRange?z.inRange:"",o.selected?z.selected:"",w?z.pressed:""].filter(Boolean).join(" ");return(0,U.jsx)("div",{id:a,role:"option","data-aia-option":"","data-aia-date-cell":"","aria-selected":n,"aria-label":e.text,tabIndex:0,className:D,onClick:y,onKeyDown:T=>{(T.key==="Enter"||T.key===" ")&&(T.preventDefault(),y())},onMouseEnter:()=>x(t),onMouseLeave:v?()=>v(t):void 0,children:(0,U.jsx)("span",{className:z.number,children:f})})}var Ne=require("@magicx-eng/ai-autocomplete-vanilla"),Ze=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);
|
|
@@ -1244,7 +1244,7 @@
|
|
|
1244
1244
|
.aia-cluster[data-justify="around"] {
|
|
1245
1245
|
justify-content: space-around;
|
|
1246
1246
|
}
|
|
1247
|
-
`,document.head.appendChild(e)}var st=require("react/jsx-runtime");function We({gap:e,align:
|
|
1247
|
+
`,document.head.appendChild(e)}var st=require("react/jsx-runtime");function We({gap:e,align:a="center",justify:t="start",noWrap:n=!1,inline:i=!1,className:r,children:o,...d}){let x=e?{"--aia-cluster-gap":e}:void 0,v={className:r?`aia-cluster ${r}`:"aia-cluster","data-align":a,"data-justify":t,"data-nowrap":n||void 0,"data-inline":i||void 0,style:x,...d};return i?(0,st.jsx)("span",{...v,children:o}):(0,st.jsx)("div",{...v,children:o})}if(typeof document<"u"&&!document.getElementById("ac-style-56b0c577")){let e=document.createElement("style");e.id="ac-style-56b0c577",e.textContent=`/* The footer adds its own 8px horizontal inset so it stays clear of the
|
|
1248
1248
|
dropdown's rounded edges. The top inset (--aia-footer-gap) adds breathing
|
|
1249
1249
|
room above the hint/branding row so the footer doesn't butt against the last
|
|
1250
1250
|
option row \u2014 additive to the dropdown's 8px section gap. */
|
|
@@ -1286,7 +1286,6 @@
|
|
|
1286
1286
|
gap: 2px;
|
|
1287
1287
|
text-decoration: none;
|
|
1288
1288
|
cursor: pointer;
|
|
1289
|
-
transition: opacity 150ms ease-out;
|
|
1290
1289
|
}
|
|
1291
1290
|
|
|
1292
1291
|
/* The two content groups carry a solid surface fill so the keyboard hint and
|
|
@@ -1321,7 +1320,17 @@
|
|
|
1321
1320
|
gap: 4px;
|
|
1322
1321
|
}
|
|
1323
1322
|
|
|
1324
|
-
|
|
1323
|
+
/* Hover dims the brand's text and badge rather than the link itself: the
|
|
1324
|
+
link's opacity is pinned inline so a stylesheet can't fade the attribution
|
|
1325
|
+
out (vanilla guardAttribution.ts), and its pill fill is the dropdown's own
|
|
1326
|
+
surface, so dimming it never showed anyway. */
|
|
1327
|
+
.aia-brand-Al-lR,
|
|
1328
|
+
.aia-badge-Fk9vg {
|
|
1329
|
+
transition: opacity 150ms ease-out;
|
|
1330
|
+
}
|
|
1331
|
+
|
|
1332
|
+
.aia-brandLink-r4f3R:hover .aia-brand-Al-lR,
|
|
1333
|
+
.aia-brandLink-r4f3R:hover .aia-badge-Fk9vg {
|
|
1325
1334
|
opacity: 0.7;
|
|
1326
1335
|
}
|
|
1327
1336
|
|
|
@@ -1378,7 +1387,7 @@
|
|
|
1378
1387
|
justify-content: flex-end;
|
|
1379
1388
|
}
|
|
1380
1389
|
}
|
|
1381
|
-
`,document.head.appendChild(e)}var
|
|
1390
|
+
`,document.head.appendChild(e)}var xe={footer:"aia-footer-qQQ7x",hintGroup:"aia-hintGroup-ZzbPf",brandLink:"aia-brandLink-r4f3R",brand:"aia-brand-Al-lR",badge:"aia-badge-Fk9vg",key:"aia-key-Bz1H-",hint:"aia-hint-GKEOH",row:"aia-row-BgZ6Q"};var re=require("react/jsx-runtime");function xt({isOptionHighlighted:e=!1,isInputEmpty:a=!1}){let{key:t,hint:n}=(0,Ne.getFooterHint)(e,a),[i,r]=(0,Ze.useState)(Ne.ATTRIBUTION_URL);return(0,Ze.useEffect)(()=>{r((0,Ne.buildAttributionUrl)())},[]),(0,re.jsx)("footer",{className:xe.footer,"data-aia-footer":"",children:(0,re.jsxs)(We,{justify:"between",noWrap:!0,className:xe.row,children:[(0,re.jsxs)(We,{gap:"5px",className:xe.hintGroup,children:[(0,re.jsx)("kbd",{className:xe.key,children:t}),(0,re.jsx)("span",{className:xe.hint,children:n})]}),(0,re.jsxs)("a",{className:xe.brandLink,href:i,target:"_blank",rel:"noopener noreferrer",children:[(0,re.jsx)("span",{className:xe.brand,children:"AI"}),(0,re.jsx)("span",{className:xe.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,
|
|
1382
1391
|
no outline. ~28px via 6px padding + 14px text + the 1px border (border-box).
|
|
1383
1392
|
The border is kept as a 1px transparent line so the box stays the same size
|
|
1384
1393
|
as it was when the outline was dashed. */
|
|
@@ -1454,7 +1463,7 @@
|
|
|
1454
1463
|
opacity: 0;
|
|
1455
1464
|
}
|
|
1456
1465
|
}
|
|
1457
|
-
`,document.head.appendChild(e)}var
|
|
1466
|
+
`,document.head.appendChild(e)}var Re={pill:"aia-pill-6Ga7S",fadeIn:"aia-fadeIn-Ux4eQ",rounded:"aia-rounded-y7xA9",skeleton:"aia-skeleton-57P0T",skeletonIn:"aia-skeletonIn-54kMv",skeletonPulse:"aia-skeletonPulse-xGcUy",skeletonOut:"aia-skeletonOut-1sJ-r"};var kt=require("react/jsx-runtime"),lt={selected:1,first:.7,next:.4,last:.2};function yt({label:e,state:a,rounded:t,loading:n,onClick:i}){let r=[Re.pill,t?Re.rounded:"",n?Re.skeleton:""].filter(Boolean).join(" ");return(0,kt.jsx)("button",{type:"button","data-aia-pill":"","data-aia-loading":n?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:r,style:{opacity:lt[a]},onMouseDown:o=>o.preventDefault(),onClick:n?void 0:i,disabled:n,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 {
|
|
1458
1467
|
position: relative;
|
|
1459
1468
|
z-index: 1;
|
|
1460
1469
|
pointer-events: auto;
|
|
@@ -1464,7 +1473,7 @@
|
|
|
1464
1473
|
align-items: center;
|
|
1465
1474
|
vertical-align: middle;
|
|
1466
1475
|
}
|
|
1467
|
-
`,document.head.appendChild(e)}var dt={list:"aia-list-qvLqO"};var _e=require("react/jsx-runtime"),
|
|
1476
|
+
`,document.head.appendChild(e)}var dt={list:"aia-list-qvLqO"};var _e=require("react/jsx-runtime"),ra=[125,69];function Ct(e){return e===0?"first":e===1?"next":"last"}function $e({pills:e,activePillIndex:a,onSelectPill:t,activeSelected:n,rounded:i,loading:r}){return r&&e.length===0?(0,_e.jsx)("span",{className:dt.list,"data-aia-pill-list-loading":"",children:ra.map((o,d)=>(0,_e.jsx)("span",{"data-aia-pill-skeleton":"",className:`${Re.pill} ${i?Re.rounded:""} ${Re.skeleton}`,style:{width:o,opacity:lt[Ct(d)]}},`skel-${o}`))}):(0,_e.jsx)("span",{className:dt.list,"data-aia-pill-list-loading":r?"":void 0,children:e.map((o,d)=>{let x=!!n&&d===a;return(0,_e.jsx)(yt,{label:o.text,state:x?"selected":Ct(d),selected:x,rounded:i,loading:r,onClick:()=>t(d)},`${o.type}-${o.text}`)})})}var Ve=require("@magicx-eng/ai-autocomplete-vanilla"),Be=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
1477
|
(packages/vanilla/src/styles.css). Same tokens, same defaults, so a consumer
|
|
1469
1478
|
theming one package sees the same result in the other.
|
|
1470
1479
|
|
|
@@ -1692,7 +1701,7 @@
|
|
|
1692
1701
|
.aia-section-Hugfg[data-aia-products-layout="list"] .aia-body-ly032 {
|
|
1693
1702
|
flex: 1 1 auto;
|
|
1694
1703
|
}
|
|
1695
|
-
`,document.head.appendChild(e)}var
|
|
1704
|
+
`,document.head.appendChild(e)}var J={section:"aia-section-Hugfg",label:"aia-label-nuc93",row:"aia-row-WDVBX",card:"aia-card-JBGYT",media:"aia-media-RrbGe",image:"aia-image-5pNL7",body:"aia-body-ly032",vendor:"aia-vendor-Gvu7G",title:"aia-title-gCNmq",price:"aia-price-gULcE"};var Q=require("react/jsx-runtime");function Pt({products:e,listboxId:a,onSelect:t,onFocusChange:n,focusable:i=!0,layout:r="row",imageFallback:o="image"}){let d=e.length>0,x=(0,Be.useRef)(null);if((0,Be.useEffect)(()=>{let w=x.current;if(!(!d||!w))return(0,Ve.attachProductRowWheel)(w)},[d]),!d)return null;let v=`${a}-products-label`;return(0,Q.jsxs)("section",{className:J.section,"data-aia-products":"","data-aia-products-layout":r,role:"group","aria-labelledby":v,children:[(0,Q.jsx)("div",{className:J.label,id:v,"data-aia-products-label":"",children:"Products"}),(0,Q.jsx)("div",{ref:x,className:J.row,"data-aia-products-row":"",children:e.map((w,S)=>(0,Q.jsx)(sa,{product:w,id:`${a}-product-${S}`,onSelect:t,onFocusChange:n,focusable:i,imageFallback:o},w.id))})]})}function sa({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,Q.jsxs)("a",{id:a,className:J.card,"data-aia-product":"",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,Q.jsx)(la,{src:e.imageUrl?.trim(),title:e.title,fallback:r},e.imageUrl?.trim()??""),(0,Q.jsxs)("span",{className:J.body,children:[e.vendor?(0,Q.jsx)("span",{className:J.vendor,children:e.vendor}):null,(0,Q.jsx)("span",{className:J.title,children:e.title}),e.price?(0,Q.jsx)("span",{className:J.price,children:e.price}):null]})]})}function la({src:e,title:a,fallback:t}){let[n,i]=(0,Be.useState)(!1),r=!!e&&!n,o=!r&&t==="initial";return(0,Q.jsxs)("span",{className:J.media,"aria-hidden":"true","data-aia-product-placeholder":!r&&!o?"":void 0,"data-aia-product-initial":o?"":void 0,children:[r?(0,Q.jsx)("img",{className:J.image,src:e,alt:"",loading:"lazy",decoding:"async",onError:()=>i(!0)}):null,o?(0,Ve.productInitial)(a):null]})}var W=require("@magicx-eng/ai-autocomplete-vanilla"),ce=require("react");var St=require("@magicx-eng/ai-autocomplete-vanilla"),Xe=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
1705
|
display: grid;
|
|
1697
1706
|
grid-template-columns: repeat(
|
|
1698
1707
|
auto-fit,
|
|
@@ -1725,7 +1734,7 @@
|
|
|
1725
1734
|
background: var(--aia-scrollbar-thumb, rgba(0, 0, 0, 0.3));
|
|
1726
1735
|
border-radius: 3px;
|
|
1727
1736
|
}
|
|
1728
|
-
`,document.head.appendChild(e)}var Et=require("react/jsx-runtime");function It({min:e="16rem",max:
|
|
1737
|
+
`,document.head.appendChild(e)}var Et=require("react/jsx-runtime");function It({min:e="16rem",max:a,gap:t,scroll:n=!1,maxHeight:i,scrollResetKey:r,cols:o,template:d,innerRef:x,className:v,children:w,...S}){let f=(0,Xe.useRef)(null);(0,Xe.useLayoutEffect)(()=>{if(r===void 0)return;let D=f.current;D&&(D.scrollTop=0)},[r]);let y={"--aia-grid-min":e};return a&&(y["--aia-grid-max"]=a),t&&(y["--aia-grid-gap"]=t),i&&(y["--aia-grid-max-height"]=i),o&&(y.gridTemplateColumns=(0,St.optionsGridTemplateColumns)(o)),d&&(y.gridTemplateColumns=d),(0,Et.jsx)("div",{ref:D=>{f.current=D,x?.(D)},className:v?`aia-grid ${v}`:"aia-grid","data-scroll":n||void 0,style:y,...S,children:w})}var de=require("@magicx-eng/ai-autocomplete-vanilla"),le=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 {
|
|
1729
1738
|
position: relative;
|
|
1730
1739
|
/* Clip, not visible: the entrance rise below runs on the inner content,
|
|
1731
1740
|
and a transformed box extends its scroll container's scrollable area.
|
|
@@ -2044,12 +2053,13 @@
|
|
|
2044
2053
|
}
|
|
2045
2054
|
|
|
2046
2055
|
/* A row without a picture, in a grid where other rows have one, lines up
|
|
2047
|
-
with them: it becomes the same centred flex row, its icon sits centred
|
|
2048
|
-
tile-sized box,
|
|
2049
|
-
|
|
2050
|
-
|
|
2051
|
-
|
|
2052
|
-
|
|
2056
|
+
with them: it becomes the same centred flex row, and its icon sits centred
|
|
2057
|
+
in a tile-sized box, so an icon row's text starts where a picture row's
|
|
2058
|
+
does. A row with neither a picture nor an icon is not indented to match:
|
|
2059
|
+
its text sits flush left, as it would in a grid with no pictures. Grids
|
|
2060
|
+
with no pictures keep the inline icon and hanging indent above. The text
|
|
2061
|
+
is left to size itself: letting it grow here would out-rank the
|
|
2062
|
+
loading-bar rule that makes a skeleton bar hug its text. */
|
|
2053
2063
|
[data-aia-group]:has(.aia-image-YZAbO) .aia-content-T-Qba:not(:has(.aia-image-YZAbO)) {
|
|
2054
2064
|
display: flex;
|
|
2055
2065
|
flex: 1 1 auto;
|
|
@@ -2069,10 +2079,6 @@
|
|
|
2069
2079
|
margin-right: 0;
|
|
2070
2080
|
}
|
|
2071
2081
|
|
|
2072
|
-
[data-aia-group]:has(.aia-image-YZAbO) .aia-content-T-Qba:not(:has(.aia-image-YZAbO)):not(:has(.aia-icon-Qw938)) {
|
|
2073
|
-
padding-left: calc(var(--aia-option-image-size, 40px) + var(--aia-option-image-gap, 12px));
|
|
2074
|
-
}
|
|
2075
|
-
|
|
2076
2082
|
@keyframes aia-skeletonPulse-plvdD {
|
|
2077
2083
|
0%,
|
|
2078
2084
|
100% {
|
|
@@ -2115,7 +2121,7 @@
|
|
|
2115
2121
|
opacity: 0;
|
|
2116
2122
|
}
|
|
2117
2123
|
}
|
|
2118
|
-
`,document.head.appendChild(e)}var
|
|
2124
|
+
`,document.head.appendChild(e)}var j={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 Tt({option:e,isHighlighted:a,onSelect:t,onHighlight:n,onUnhighlight:i,id:r,loading:o,showIcon:d=!0,showImage:x=!0,showCount:v=!0,scrollHint:w,enterDelayMs:S=0}){let[f]=(0,le.useState)(S),[y,D]=(0,le.useState)(!1),T=x?(0,de.optionImageSrc)(e.image_url):null,[K,G]=(0,le.useState)(null),A=(0,le.useMemo)(()=>!T&&d&&e.icon_svg?(0,de.sanitizeOptionIconSvg)(e.icon_svg):null,[T,d,e.icon_svg]),O=v?(0,de.formatOptionCount)(e.item_count):null,L=(0,le.useRef)(void 0);(0,le.useEffect)(()=>()=>clearTimeout(L.current),[]);let R=()=>{o||!e.is_tappable||y||(D(!0),t(e),clearTimeout(L.current),L.current=setTimeout(()=>D(!1),170))},E=[j.item,a&&!o?j.highlighted:"",e.is_tappable?j.tappable:j.nonTappable,y?j.pressed:"",w?j.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":A&&e.icon?e.icon:void 0,"data-aia-image":T?"":void 0,"data-aia-item-count":O!==null?e.item_count:void 0,"aria-selected":a,className:E,style:{[de.OPTION_ENTER_DELAY_VAR]:`${f}ms`},tabIndex:o||!e.is_tappable?-1:0,onClick:R,onKeyDown:_=>{!o&&e.is_tappable&&(_.key==="Enter"||_.key===" ")&&(_.preventDefault(),R())},onMouseEnter:!o&&e.is_tappable?n:void 0,onMouseLeave:i,children:(0,se.jsxs)("span",{className:j.content,children:[T&&(0,se.jsx)("span",{className:`${j.image} magicx-aia-option-image`,"aria-hidden":"true",children:(0,se.jsx)("img",{src:T,alt:"",loading:"lazy",decoding:"async",referrerPolicy:"no-referrer",draggable:!1,hidden:K===T,onError:()=>G(T)})}),A&&(0,se.jsx)("span",{className:`${j.icon} magicx-aia-option-icon`,"aria-hidden":"true",dangerouslySetInnerHTML:{__html:A}}),(0,se.jsx)("span",{className:j.text,children:(0,de.optionLabel)(e)}),e.tag&&(0,se.jsx)("span",{className:j.tag,children:e.tag}),O!==null&&(0,se.jsx)("span",{className:`${j.count} magicx-aia-option-count`,children:O})]})})}var ct=require("react/jsx-runtime");function da(){let[e,a]=(0,ce.useState)(W.isOptionsGridMobileViewport);return(0,ce.useEffect)(()=>{if(typeof window>"u"||!window.matchMedia)return;let t=window.matchMedia(W.OPTIONS_GRID_MOBILE_QUERY),n=()=>a(t.matches);return n(),t.addEventListener("change",n),()=>t.removeEventListener("change",n)},[]),e}function At({options:e,activeIndex:a,onSelect:t,onHighlight:n,onUnhighlight:i,listboxId:r,loading:o,groupKey:d="",optionsPosition:x="below",showIcons:v=!0,showImages:w=!0,showCounts:S=!0}){let f=da(),y=(0,ce.useRef)(null),[D,T]=(0,ce.useState)(null),K=(0,ce.useRef)(null);(0,ce.useLayoutEffect)(()=>{if(o&&(0,W.sameOptionRows)(K.current,e))return;K.current=o?null:e;let A=y.current,L=A&&!o&&(0,W.needsOptionsGridMeasurement)(e.length,f)?(0,W.measureOptionsGrid)(A):null;T(L?(0,W.planOptionsGrid)(e.length,f,L.rowWidths,L.gridWidth):null)},[e,f,o]);let G=D??(0,W.planOptionsGrid)(e.length,f,null,null);return(0,ct.jsx)(It,{min:"250px",max:"1fr",gap:"0",scroll:!0,scrollResetKey:d,template:G.template,maxHeight:G.maxHeight,innerRef:A=>{y.current=A},"data-aia-group":d,children:e.map((A,O)=>(0,ct.jsx)(Tt,{option:A,isHighlighted:O===a,onSelect:t,onHighlight:()=>n(O),onUnhighlight:i?()=>i(O):void 0,id:`${r}-option-${O}`,loading:o,showIcon:v,showImage:w,showCount:S,scrollHint:!o&&G.scrollHintIndices.includes(O),enterDelayMs:o?0:(0,W.optionEnterDelayMs)(O,G.cols,e.length,x)},`${d}\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 {
|
|
2119
2125
|
display: flex;
|
|
2120
2126
|
flex-direction: column;
|
|
2121
2127
|
gap: var(--aia-stack-space, 0.5rem);
|
|
@@ -2130,7 +2136,7 @@
|
|
|
2130
2136
|
align-items: end;
|
|
2131
2137
|
}
|
|
2132
2138
|
/* data-align="stretch" is the flex default \u2014 no rule needed. */
|
|
2133
|
-
`,document.head.appendChild(e)}var
|
|
2139
|
+
`,document.head.appendChild(e)}var Dt=require("react/jsx-runtime");function Rt({space:e,align:a="stretch",className:t,children:n,...i}){let r=e?{"--aia-stack-space":e}:void 0;return(0,Dt.jsx)("div",{className:t?`aia-stack ${t}`:"aia-stack","data-align":a,style:r,...i,children:n})}var F=require("react/jsx-runtime"),ca=[159,119,164],pa=()=>{},Ot=()=>{};function ha(e){let a=()=>typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches,[t,n]=(0,ee.useState)(a);if((0,ee.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 ua(e,a){let t=(0,ee.useRef)(null);(0,ee.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,He.attachScrollArrow)({dropdown:n,grid:r,button:i})};return}t.current?.controller.update()}),(0,ee.useEffect)(()=>()=>{t.current?.controller.destroy(),t.current=null},[])}function Je({suggestions:e,activeIndex:a,onSelect:t,onHighlight:n,onUnhighlight:i,isOpen:r,id:o,className:d,pills:x,onPillClick:v,showPills:w=!0,onSkip:S,showSkipButton:f=!0,showOptionIcons:y=!0,showOptionImages:D=!0,showOptionCounts:T=!0,skipDisabled:K=!1,activeSelected:G=!1,isLoading:A=!1,skeletonExiting:O=!1,isInputEmpty:L=!1,products:R,onProductSelect:E,onProductFocusChange:_,productsLayout:ye="row",productImageFallback:pe="image",formatType:ke="options",dateView:he=null,selectedDateIso:p=null,selectedDateRange:De=null,dateRangeStart:Ce=null,onPreviousMonth:Pe,onNextMonth:Se,optionsPosition:ue="below",mode:Ie}){let $=ha(Ie),me=$!==void 0,ge=(0,ee.useRef)(null),ae=(0,ee.useRef)(null);ua(ge,ae);let fe=e[0]?.options??[],c=!!(x&&x.length>0&&v),h=!!(R&&R.length>0),b=r&&(fe.length>0||w&&c||A||h),C={suggestions:e,activeIndex:a,pills:x,showPills:w,showSkipButton:f,showOptionIcons:y,showOptionImages:D,showOptionCounts:T,skipDisabled:K,activeSelected:G,isLoading:A,skeletonExiting:O,isInputEmpty:L,products:R,formatType:ke,dateView:he,selectedDateIso:p,selectedDateRange:De,dateRangeStart:Ce},k=(0,ee.useRef)(C);b&&(k.current=C);let l=b?C:k.current,g=l.suggestions[0],q=g?.options??[],Ee=l.activeIndex>=0&&!!q[l.activeIndex]?.is_tappable,V=!!(l.pills&&l.pills.length>0&&v),u=l.showPills&&V,Oe=l.showPills&&!V&&l.isLoading,Te=u||Oe,ie=V&&l.showSkipButton&&!l.isInputEmpty&&!!S,Le=l.pills?.[0]?.text,be=(0,He.isCalendarFormat)(l.formatType)&&l.dateView!=null,ze=q.length>0&&!be,X=q.length>0&&be&&!l.isLoading,ve=l.isLoading&&!ze&&!X,oe=l.products??[];return(0,F.jsxs)("div",{ref:ge,id:o,role:"listbox","data-aia-dropdown":"","data-options-position":ue,"data-mode":$,"data-aia-loading":l.isLoading?"":void 0,"data-aia-skeleton-exiting":l.skeletonExiting?"":void 0,"data-aia-has-products":oe.length>0?"":void 0,className:`${me?"magicx-aia ":""}${we.dropdown} ${b?we.visible:""} ${d??""}`,onMouseDown:ne=>ne.preventDefault(),children:[(0,F.jsxs)(Rt,{space:"8px",children:[(Te||ie)&&(0,F.jsxs)(We,{noWrap:!0,className:we.pillBar,"data-aia-pillbar":"",children:[Te&&(0,F.jsx)("span",{className:we.pillScroll,"data-aia-pill-scroll":"",children:(0,F.jsx)($e,{pills:l.pills??[],activePillIndex:0,activeSelected:l.activeSelected,onSelectPill:v??(()=>{}),rounded:!0,loading:l.isLoading})}),ie&&(0,F.jsx)("button",{type:"button",tabIndex:-1,className:we.skip,"data-aia-skip":"",disabled:l.isLoading||l.skipDisabled,"aria-label":Le?`Skip ${Le}`:"Skip",onClick:S,children:"skip"})]}),ze&&(0,F.jsx)(At,{options:q,activeIndex:l.activeIndex,onSelect:t,onHighlight:n,onUnhighlight:i,listboxId:o,loading:l.isLoading,groupKey:g?`${g.type} ${g.text}`:"",optionsPosition:ue,showIcons:l.showOptionIcons,showImages:l.showOptionImages,showCounts:l.showOptionCounts}),X&&l.dateView&&(0,F.jsx)(wt,{options:q,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:Pe??Ot,onNextMonth:Se??Ot}),ve&&(0,F.jsx)("div",{className:we.skeletonBars,"data-aia-skeleton-bars":"",children:ca.map(ne=>(0,F.jsx)("span",{className:we.skeletonBar,style:{width:ne}},`bar-${ne}`))}),(0,F.jsx)(Pt,{products:oe,listboxId:o,onSelect:E??pa,onFocusChange:_,focusable:b,layout:ye,imageFallback:pe}),(0,F.jsx)(xt,{isOptionHighlighted:Ee,isInputEmpty:l.isInputEmpty})]}),(0,F.jsx)("button",{ref:ae,type:"button",tabIndex:-1,className:we.scrollArrow,"data-aia-scroll-arrow":"","aria-label":He.SCROLL_ARROW_LABEL,"aria-hidden":"true",children:(0,F.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,F.jsx)("path",{d:"M4 6.5 8 10.5l4-4"})})})]})}var Ke=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 {
|
|
2134
2140
|
flex-shrink: 0;
|
|
2135
2141
|
width: 32px;
|
|
2136
2142
|
height: 32px;
|
|
@@ -2183,5 +2189,5 @@
|
|
|
2183
2189
|
);
|
|
2184
2190
|
cursor: default;
|
|
2185
2191
|
}
|
|
2186
|
-
`,document.head.appendChild(e)}var Lt={submitButton:"aia-submitButton-otz7H"};var Je=require("react/jsx-runtime");function Mt({disabled:e,onClick:i}){return(0,Je.jsx)("button",{type:"button","data-aia-submit":"",className:Lt.submitButton,disabled:e,onClick:a=>{a.stopPropagation(),i()},"aria-label":"Submit",children:(0,Je.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,Je.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var He=require("@magicx-eng/ai-autocomplete-vanilla"),I=require("react");var pt=require("react");function zt(e){let i=(0,pt.useRef)(e);i.current=e;let a=Object.keys(e??{}).sort().join("\0"),r=(0,pt.useRef)({key:"",overrides:void 0});if(r.current.key!==a){let n={};for(let t of Object.keys(e??{})){let l=(d,w,x)=>{let b=i.current?.[t];return b?b(d,w,x):[]};n[t]=l}r.current={key:a,overrides:e?n:void 0}}return{overrides:r.current.overrides,key:a}}var ht=require("react");function Nt(e){let i=(0,ht.useRef)(e);i.current=e;let a=(0,ht.useRef)(null);a.current===null&&(a.current={fetch:(n,t)=>{let l=i.current;return l?l.fetch(n,t):Promise.reject(new Error("products config removed"))},transform:n=>i.current?.transform(n)??[],get limit(){return i.current?.limit}});let r=e!==void 0;return{config:r?a.current:void 0,enabled:r}}var ua={text:"",completedParams:[],identifiedParams:[],skippedParams:[],pendingSpan:null,suggestions:[],products:[],customFields:null,optionSearch:null,activeDropdownIndex:-1,newParamId:null,isLoading:!0,isReady:!1,error:null,segments:[],actionableSuggestions:[],filteredOptions:[],dropdownLoading:!0,dropdownOptions:[],skeletonOptions:null,skeletonSuggestion:null,dropdownSuggestion:null,skeletonRequested:!1,skeletonExiting:!1,activeFormatType:"options",dateView:null,dateRangeStart:null,placeholderText:"",optionQuery:"",isSearchingOptions:!1,isDropdownOpen:!1,isActivePillSelected:!1,filterBase:0,filterInProgress:!1,pillTapped:!1,skipNextFetch:!1,lastRawQuery:"",isFocused:!1,editingParam:null,editingIdentified:null,editingAnchor:null,editingTail:null,caretOffset:null,inSelectionAnimation:!1,dateViewMonth:null,pendingRangeStart:null};function et({onSubmit:e,onResult:i,onError:a,optionOverrides:r,maskCompletedText:n,apiConfig:t,additionalContext:l,columns:d=2,dropdownTrigger:w,optionsPosition:x,closeDropdownOnBlur:b,showNonTappableOptions:u,showOptionIcons:C,showOptionImages:T,showOptionCounts:k,showSkipButton:q,showProducts:H,productImageFallback:A="image",onFocus:O,onBlur:F,value:N,completedParams:L,onChange:S,onParamsChange:ee,products:ke,onProductSelect:ce,source:Ce,setCursor:pe}){let h=(0,I.useRef)(null),[Re,Pe]=(0,I.useState)(null),Se=(0,I.useRef)(e);Se.current=e;let he=(0,I.useRef)(i);he.current=i;let Ie=(0,I.useRef)(a);Ie.current=a;let ue=(0,I.useRef)(S);ue.current=S;let te=(0,I.useRef)(ee);te.current=ee;let me=(0,I.useRef)(O);me.current=O;let ae=(0,I.useRef)(F);ae.current=F;let ge=(0,I.useRef)(pe);ge.current=pe;let fe=(0,I.useRef)(ce);fe.current=ce;let c=Nt(ke),m=zt(r);(0,I.useEffect)(()=>{if(typeof document>"u")return;let f=new He.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:t,additionalContext:l,optionOverrides:m.overrides,maskCompletedText:n,columns:d,dropdownTrigger:w,optionsPosition:x,closeDropdownOnBlur:b,showNonTappableOptions:u,showProducts:H,source:Ce,value:N,completedParams:L,onSubmit:(...B)=>Se.current?.(...B),onResult:(...B)=>he.current?.(...B),onError:(...B)=>Ie.current?.(...B),onChange:(...B)=>ue.current?.(...B),onParamsChange:(...B)=>te.current?.(...B),onFocus:()=>me.current?.(),onBlur:()=>ae.current?.(),onProductSelect:B=>fe.current?.(B),setCursor:B=>ge.current?.(B),products:c.config});h.current=f,Pe(f.getState());let j=f.subscribe(B=>Pe(B));return()=>{j(),f.destroy(),h.current===f&&(h.current=null)}},[]),(0,I.useEffect)(()=>{N!==void 0&&h.current?.setValue(N)},[N]),(0,I.useEffect)(()=>{L!==void 0&&h.current?.setCompletedParams(L)},[L]);let v=JSON.stringify(t??null),y;try{y=JSON.stringify(l??null)}catch{y="[unstringifiable]"}(0,I.useEffect)(()=>{h.current?.update({apiConfig:t,additionalContext:l,optionOverrides:m.overrides,dropdownTrigger:w,optionsPosition:x,closeDropdownOnBlur:b,showNonTappableOptions:u,showProducts:H})},[v,y,m.key,w,x,b,u,H]);let o=(0,I.useRef)(!1);(0,I.useEffect)(()=>{if(!o.current){o.current=!0;return}h.current?.update({products:c.config})},[c.enabled]);let E=(0,I.useRef)(null);E.current===null&&(E.current={handleTextChange:f=>h.current?.handleTextChange(f),handleKeyDown:f=>{let j="nativeEvent"in f?f.nativeEvent:f;h.current?.handleKeyDown(j)},setFocused:f=>h.current?.setFocused(f),startEditingParam:f=>h.current?.startEditingParam(f),exitEditMode:()=>h.current?.exitEditMode(),handleCaretAfterInput:f=>h.current?.handleCaretAfterInput(f),handleCaretMove:f=>h.current?.handleCaretMove(f),replaceEditingRange:f=>h.current?.replaceEditingRange(f)??!1,setActivePill:f=>h.current?.setActivePill(f),skipActivePill:()=>h.current?.skipActivePill(),removeLastParam:()=>h.current?.removeLastParam(),clearNewParamId:()=>h.current?.clearNewParamId(),reset:()=>h.current?.reset(),selectOption:f=>h.current?.selectOption(f),selectProduct:f=>h.current?.selectProduct(f),setActiveDropdownIndex:f=>h.current?.setActiveDropdownIndex(f),showPreviousMonth:()=>h.current?.showPreviousMonth(),showNextMonth:()=>h.current?.showNextMonth(),handleFocus:()=>h.current?.setFocused(!0),handleBlur:()=>h.current?.setFocused(!1)});let g=E.current,ie=(0,I.useCallback)(f=>{let j=f.target.value,it=j.length>0&&!f.nativeEvent?.isComposing&&j[0]!==j[0].toUpperCase()?j[0].toUpperCase()+j.slice(1):j;h.current?.handleTextChange(it)},[]),Z=(0,I.useCallback)(f=>{h.current?.handleKeyDown(f.nativeEvent)},[]),Oe=h.current,p=Re??ua,be=N!==void 0?N:p.text,Ee=L!==void 0?L:p.completedParams,ve=p.actionableSuggestions,Le=ve[0],we=Oe?.listboxId??"",Me=p.activeDropdownIndex>=0&&Oe?`${we}-option-${p.activeDropdownIndex}`:void 0,oe=p.editingParam,Y=p.editingIdentified,$=oe?{type:oe.suggestionType,text:oe.suggestionPlaceholder,required:!0,options:oe.options}:Y?{type:Y.type,text:(0,He.identifiedParamLabel)(Y.type),required:!0,options:[]}:null,Ke=p.dropdownSuggestion??$??Le,at=$?[$]:ve,Ge=(0,He.dateSelectionFor)(p),qe=!Oe||p.dropdownLoading;return{completedParams:Ee,skippedParams:p.skippedParams,identifiedParams:p.identifiedParams,suggestionPills:ve,setActivePill:g.setActivePill,skipActivePill:g.skipActivePill,removeLastParam:g.removeLastParam,segments:p.segments,newParamId:p.newParamId,clearNewParamId:g.clearNewParamId,suggestions:p.suggestions,activeIndex:p.activeDropdownIndex,isReady:p.isReady,isLoading:qe,isFocused:p.isFocused,isDropdownOpen:p.isDropdownOpen,isActivePillSelected:p.isActivePillSelected,placeholderText:p.placeholderText,listboxId:we,error:p.error,products:p.products,customFields:p.customFields,selectProduct:g.selectProduct,handleTextChange:g.handleTextChange,handleKeyDown:g.handleKeyDown,setFocused:g.setFocused,editingParam:oe,editingIdentified:Y,editingAnchor:p.editingAnchor,caretOffset:p.caretOffset,startEditingParam:g.startEditingParam,exitEditMode:g.exitEditMode,handleCaretAfterInput:g.handleCaretAfterInput,handleCaretMove:g.handleCaretMove,replaceEditingRange:g.replaceEditingRange,inputProps:{value:be,placeholder:p.placeholderText||void 0,onChange:ie,onKeyDown:Z,onFocus:g.handleFocus,onBlur:g.handleBlur,role:"combobox","aria-expanded":p.isDropdownOpen,"aria-activedescendant":Me,"aria-autocomplete":"list","aria-controls":we},reset:g.reset,dropdownProps:{suggestions:Ke?[{...Ke,options:p.dropdownOptions}]:[],activeIndex:p.activeDropdownIndex,onSelect:g.selectOption,onHighlight:g.setActiveDropdownIndex,isOpen:p.isDropdownOpen,id:we,pills:at,activeSelected:p.isActivePillSelected,onPillClick:g.setActivePill,onSkip:g.skipActivePill,showSkipButton:(q??!0)&&!oe&&!Y,showOptionIcons:C??!0,showOptionImages:T??!0,showOptionCounts:k??!0,skipDisabled:p.inSelectionAnimation,isLoading:qe,skeletonExiting:p.skeletonExiting,isInputEmpty:be.trim().length===0,products:p.products,productImageFallback:A,onProductSelect:g.selectProduct,onProductFocusChange:g.setFocused,formatType:p.activeFormatType,dateView:p.dateView,selectedDateIso:Ge.selectedIso,selectedDateRange:Ge.selectedRange,dateRangeStart:Ge.rangeStart,onPreviousMonth:g.showPreviousMonth,onNextMonth:g.showNextMonth,optionsPosition:x??"below"}}}var Q=require("@magicx-eng/ai-autocomplete-vanilla"),P=require("react"),tt;function ma(){if(tt!==void 0)return tt;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),tt=e.contentEditable==="plaintext-only",tt}function Bt(e){let{segments:i,showChipIcons:a=!0,showChipImages:r=!0,newParamId:n,editingParam:t,editingIdentified:l,editingAnchor:d,caretOffset:w,placeholderText:x,isFocused:b,isDropdownOpen:u,listboxId:C,activeDescendantId:T,autoFocus:k,handleTextChange:q,handleKeyDown:H,handleCaretAfterInput:A,handleCaretMove:O,startEditingParam:F,replaceEditingRange:N,setFocused:L}=e,S=(0,P.useRef)(null),ee=(0,P.useRef)(!1),ke=(0,P.useRef)(""),ce=(0,P.useRef)(""),Ce=(0,P.useRef)(null),pe=(0,P.useRef)(0);Ce.current=w,(0,P.useEffect)(()=>{if(!k)return;let c=S.current;if(!c)return;document.activeElement===c?L(!0):c.focus();let m=c.ownerDocument??document,v=m.getSelection(),y=v&&v.rangeCount>0&&c.contains(v.anchorNode);if(v&&!y){let o=m.createRange();o.selectNodeContents(c),o.collapse(!0),v.removeAllRanges(),v.addRange(o)}},[k,L]),(0,P.useEffect)(()=>{let c=S.current;if(!c)return;let m=c.ownerDocument??document,v=()=>{let y=m.getSelection();if(!y||y.rangeCount===0||!y.anchorNode||!c.contains(y.anchorNode))return;let o=y.anchorNode,E=o.nodeType===Node.ELEMENT_NODE?o:o.parentElement,ie=(y.isCollapsed?E?.closest("strong[data-param-id]"):null)?.dataset.paramId??null,Z=t?.id??l?.id??null;if(ie&&ie!==Z){F(ie);return}performance.now()-pe.current<50||O((0,Q.getCursorOffset)(c))};return m.addEventListener("selectionchange",v),()=>m.removeEventListener("selectionchange",v)},[t,l,F,O]),(0,P.useLayoutEffect)(()=>{let c=S.current;c&&(0,Q.renderEditableContent)({input:c,segments:i,newParamId:n,editingParamId:t?.id??null,placeholderText:x??"",isFocused:b,showChipIcons:a,showChipImages:r})},[i,n,t,x,b,a,r]),(0,P.useLayoutEffect)(()=>{let c=ke.current,m=n??"";if(ke.current=m,!m||m===c)return;let v=S.current;if(!v)return;v.focus();let y=Ce.current??(0,Q.plainTextLength)(v);(0,Q.setCursorOffset)(v,y)},[n]),(0,P.useLayoutEffect)(()=>{let c=ce.current,m=t?.id??"";if(ce.current=m,!m||m===c||d==null)return;let v=S.current;v&&(0,Q.setCursorOffset)(v,d)},[t,d]);let h=(0,P.useCallback)(()=>{if(ee.current)return;let c=S.current;if(!c)return;let m=(0,Q.extractPlainText)(c),y=m.length>0&&m[0]!==m[0].toUpperCase()?m[0].toUpperCase()+m.slice(1):m;q(y)},[q]),Re=(0,P.useCallback)(()=>{pe.current=performance.now(),h();let c=S.current;c&&A((0,Q.getCursorOffset)(c))},[h,A]);(0,P.useEffect)(()=>{let c=S.current;if(!c)return;let m=v=>{let y=v,o=y.inputType;if(o==="insertParagraph"||o==="insertLineBreak"||o==="insertFromDrop"){v.preventDefault();return}if(o.startsWith("insert")||o.startsWith("delete")){let E=o.startsWith("delete")?"":y.data??"";N(E)&&v.preventDefault()}};return c.addEventListener("beforeinput",m),()=>c.removeEventListener("beforeinput",m)},[N]);let Pe=(0,P.useCallback)(()=>{ee.current=!0},[]),Se=(0,P.useCallback)(()=>{ee.current=!1,h()},[h]),he=(0,P.useCallback)(c=>{c.preventDefault();let m=S.current;if(!m)return;let v=(c.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!v)return;let y=m.ownerDocument??document,o=y.getSelection();if(!o||o.rangeCount===0)return;let E=o.getRangeAt(0);if(!m.contains(E.startContainer))return;E.deleteContents();let g=y.createTextNode(v);E.insertNode(g),E.setStartAfter(g),E.collapse(!0),o.removeAllRanges(),o.addRange(E),h()},[h]),Ie=(0,P.useCallback)(c=>H(c),[H]),ue=(0,P.useCallback)(()=>L(!0),[L]),te=(0,P.useCallback)(()=>L(!1),[L]),me=(0,P.useCallback)(()=>S.current?.focus(),[]),ae=(0,P.useCallback)(()=>S.current?.blur(),[]),ge=(0,P.useCallback)(()=>{let c=S.current;return c?(0,Q.extractPlainText)(c):""},[]),fe=ma()?"plaintext-only":"true";return{inputRef:S,editorProps:{ref:S,contentEditable:fe,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":C,"aria-expanded":u,"aria-activedescendant":T,spellCheck:!0,enterKeyHint:"send",onInput:Re,onKeyDown:Ie,onCompositionStart:Pe,onCompositionEnd:Se,onPaste:he,onFocus:ue,onBlur:te},getPlainText:ge,focus:me,blur:ae}}var J=require("react/jsx-runtime");function ga(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var Ht=(0,z.forwardRef)(function({onSubmit:i,onResult:a,onError:r,optionOverrides:n,maskCompletedText:t,className:l,apiConfig:d,additionalContext:w,columns:x,pillPlacement:b="dropdown",mode:u="auto",optionsPosition:C="below",animations:T=!0,dropdownTrigger:k,closeDropdownOnBlur:q,showNonTappableOptions:H,showOptionIcons:A=!0,showChipIcons:O=!0,showChipImages:F=!0,showOptionImages:N=!0,showOptionCounts:L=!0,showSkipButton:S,showProducts:ee,productsLayout:ke,productImageFallback:ce,autoFocus:Ce=!0,onFocus:pe,onBlur:h,value:Re,completedParams:Pe,onChange:Se,onParamsChange:he,products:Ie,onProductSelect:ue,submitButton:te},me){let ae=(0,z.useRef)(null),ge=(0,z.useRef)(null),fe=(0,z.useRef)(()=>{}),c=(0,z.useRef)(null),m=(0,z.useRef)(null);(0,z.useEffect)(()=>{let R=ae.current;if(R)return c.current?c.current.setMode(u):c.current=new Fe.ModeController(R,u),()=>{c.current?.destroy(),c.current=null}},[u]);let v=(0,z.useCallback)(R=>{let Te=m.current?.current;Te&&(Te.focus(),(0,Fe.setCursorOffset)(Te,R))},[]),{completedParams:y,skippedParams:o,identifiedParams:E,isReady:g,customFields:ie,suggestionPills:Z,setActivePill:Oe,skipActivePill:p,segments:be,newParamId:Ee,clearNewParamId:ve,placeholderText:Le,isFocused:we,isDropdownOpen:Me,isActivePillSelected:oe,isLoading:Y,activeIndex:$,listboxId:Ke,handleTextChange:at,handleKeyDown:Ge,setFocused:qe,editingParam:f,editingIdentified:j,editingAnchor:B,caretOffset:it,startEditingParam:Ft,handleCaretAfterInput:Kt,handleCaretMove:Gt,replaceEditingRange:Wt,dropdownProps:_t,reset:Ue}=et({onSubmit:R=>fe.current(R),onResult:a,onError:r,optionOverrides:n,maskCompletedText:t,apiConfig:d,additionalContext:w,columns:x,dropdownTrigger:k,optionsPosition:C,closeDropdownOnBlur:q,showNonTappableOptions:H,showOptionIcons:A,showOptionImages:N,showOptionCounts:L,showSkipButton:S,showProducts:ee,onFocus:pe,onBlur:h,value:Re,completedParams:Pe,onChange:Se,onParamsChange:he,products:Ie,onProductSelect:ue,source:"full-sdk",setCursor:v});(0,z.useEffect)(()=>{if(!Ee)return;let R=window.setTimeout(()=>ve(),650);return()=>window.clearTimeout(R)},[Ee,ve]);let qt=$>=0?`${Ke}-option-${$}`:void 0,{inputRef:ot,editorProps:Ut,focus:Qe,blur:ut,getPlainText:mt}=Bt({segments:be,newParamId:Ee,editingParam:f,editingIdentified:j,editingAnchor:B,caretOffset:it,placeholderText:Le,isFocused:we,showChipIcons:O,showChipImages:F,isDropdownOpen:Me,listboxId:Ke,activeDescendantId:qt,autoFocus:Ce,handleTextChange:at,handleKeyDown:Ge,handleCaretAfterInput:Kt,handleCaretMove:Gt,startEditingParam:Ft,replaceEditingRange:Wt,setFocused:qe});m.current=ot,(0,z.useLayoutEffect)(()=>{let R=ge.current,Te=ot.current;if(!R||!Te)return;let gt=()=>{let bt=R.firstElementChild;if(!bt)return;let Zt=bt.getBoundingClientRect(),$t=Te.getBoundingClientRect();Zt.top>=$t.bottom-2?R.setAttribute("data-aia-pill-wrapped",""):R.removeAttribute("data-aia-pill-wrapped")};gt();let ft=new ResizeObserver(gt);return ft.observe(Te),()=>ft.disconnect()},[be,Z.length,Y,ot]),(0,z.useImperativeHandle)(me,()=>({focus:Qe,blur:ut,reset:Ue,setMode:R=>c.current?.setMode(R),skipActivePill:p}),[Qe,ut,Ue,p]);let Ye=!!be.length||y.length>0,nt=(0,z.useCallback)(()=>{if(!Ye)return;let R=mt();i((0,Fe.buildSubmitResult)(R,y,o,{identifiedParams:E,isReady:g,customFields:ie})),Ue()},[Ye,y,o,E,g,ie,i,Ue,mt]);fe.current=nt;let Qt=(0,z.useCallback)(R=>{R.target?.closest("[data-aia-pill]")||Qe()},[Qe]),Yt=b==="inline",jt=b==="dropdown";return(0,J.jsxs)("div",{ref:ae,className:`magicx-aia ${De.container} ${l??""}`,"data-pill-placement":b,"data-options-position":C,"data-animations":T?"on":"off","data-mode":ga(u),children:[(0,J.jsx)(Xe,{..._t,showPills:jt,productsLayout:ke,productImageFallback:ce}),(0,J.jsxs)("div",{className:De.inputWrapper,"data-aia-input-wrapper":"",onClick:Qt,children:[(0,J.jsxs)("div",{className:De.editorArea,"data-aia-editor":"",children:[(0,J.jsx)("div",{...Ut,className:De.input,"data-aia-input":""}),Yt&&(Y||Z.length>0)&&(0,J.jsx)("span",{ref:ge,className:De.pillListContainer,"data-aia-pill-list-container":"",children:(0,J.jsx)(Ze,{pills:Z,activePillIndex:0,activeSelected:oe,onSelectPill:Oe,loading:Y})})]}),te===null?null:te===void 0?(0,J.jsx)(Mt,{disabled:!Ye,onClick:nt}):(0,J.jsx)("span",{"data-aia-submit":"","data-aia-submit-slot":"",className:De.submitSlot,onClick:R=>{Ye&&(R.stopPropagation(),nt())},children:te})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,DATE_RANGE_META_END,DATE_RANGE_META_START,DEFAULT_OPTION_COUNT_UNIT,PRODUCT_PATH_PREFIX,WEEKDAY_LABELS,buildSubmitResult,cellDay,cellIso,dateCellMarks,formatDate,formatDateRange,formatOptionCount,isoDate,monthLabel,optionCountLabel,optionHasImage,optionImageSrc,optionLabel,parseDate,parseLooseDate,parseLooseDateRange,productFromMatchedItem,productsFromCustomFields,sanitizeOptionIconSvg,selectedRangeFor,useAIAutocomplete,visibleDateRange,withSkippedParams});
|
|
2192
|
+
`,document.head.appendChild(e)}var Lt={submitButton:"aia-submitButton-otz7H"};var et=require("react/jsx-runtime");function Mt({disabled:e,onClick:a}){return(0,et.jsx)("button",{type:"button","data-aia-submit":"",className:Lt.submitButton,disabled:e,onClick:t=>{t.stopPropagation(),a()},"aria-label":"Submit",children:(0,et.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,et.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"),I=require("react");var pt=require("react");function zt(e){let a=(0,pt.useRef)(e);a.current=e;let t=Object.keys(e??{}).sort().join("\0"),n=(0,pt.useRef)({key:"",overrides:void 0});if(n.current.key!==t){let i={};for(let r of Object.keys(e??{})){let o=(d,x,v)=>{let w=a.current?.[r];return w?w(d,x,v):[]};i[r]=o}n.current={key:t,overrides:e?i:void 0}}return{overrides:n.current.overrides,key:t}}var ht=require("react");function Nt(e){let a=(0,ht.useRef)(e);a.current=e;let t=(0,ht.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 ma={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 tt({onSubmit:e,onResult:a,onError:t,optionOverrides:n,maskCompletedText:i,apiConfig:r,additionalContext:o,columns:d=2,dropdownTrigger:x,optionsPosition:v,closeDropdownOnBlur:w,showNonTappableOptions:S,showOptionIcons:f,showOptionImages:y,showOptionCounts:D,showSkipButton:T,showProducts:K,productImageFallback:G="image",onFocus:A,onBlur:O,value:L,completedParams:R,onChange:E,onParamsChange:_,products:ye,onProductSelect:pe,source:ke,setCursor:he}){let p=(0,I.useRef)(null),[De,Ce]=(0,I.useState)(null),Pe=(0,I.useRef)(e);Pe.current=e;let Se=(0,I.useRef)(a);Se.current=a;let ue=(0,I.useRef)(t);ue.current=t;let Ie=(0,I.useRef)(E);Ie.current=E;let $=(0,I.useRef)(_);$.current=_;let me=(0,I.useRef)(A);me.current=A;let ge=(0,I.useRef)(O);ge.current=O;let ae=(0,I.useRef)(he);ae.current=he;let fe=(0,I.useRef)(pe);fe.current=pe;let c=Nt(ye),h=zt(n);(0,I.useEffect)(()=>{if(typeof document>"u")return;let m=new Fe.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:r,additionalContext:o,optionOverrides:h.overrides,maskCompletedText:i,columns:d,dropdownTrigger:x,optionsPosition:v,closeDropdownOnBlur:w,showNonTappableOptions:S,showProducts:K,source:ke,value:L,completedParams:R,onSubmit:(...H)=>Pe.current?.(...H),onResult:(...H)=>Se.current?.(...H),onError:(...H)=>ue.current?.(...H),onChange:(...H)=>Ie.current?.(...H),onParamsChange:(...H)=>$.current?.(...H),onFocus:()=>me.current?.(),onBlur:()=>ge.current?.(),onProductSelect:H=>fe.current?.(H),setCursor:H=>ae.current?.(H),products:c.config});p.current=m,Ce(m.getState());let Z=m.subscribe(H=>Ce(H));return()=>{Z(),m.destroy(),p.current===m&&(p.current=null)}},[]),(0,I.useEffect)(()=>{L!==void 0&&p.current?.setValue(L)},[L]),(0,I.useEffect)(()=>{R!==void 0&&p.current?.setCompletedParams(R)},[R]);let b=JSON.stringify(r??null),C;try{C=JSON.stringify(o??null)}catch{C="[unstringifiable]"}(0,I.useEffect)(()=>{p.current?.update({apiConfig:r,additionalContext:o,optionOverrides:h.overrides,dropdownTrigger:x,optionsPosition:v,closeDropdownOnBlur:w,showNonTappableOptions:S,showProducts:K})},[b,C,h.key,x,v,w,S,K]);let k=(0,I.useRef)(!1);(0,I.useEffect)(()=>{if(!k.current){k.current=!0;return}p.current?.update({products:c.config})},[c.enabled]);let l=(0,I.useRef)(null);l.current===null&&(l.current={handleTextChange:m=>p.current?.handleTextChange(m),handleKeyDown:m=>{let Z="nativeEvent"in m?m.nativeEvent:m;p.current?.handleKeyDown(Z)},setFocused:m=>p.current?.setFocused(m),startEditingParam:m=>p.current?.startEditingParam(m),exitEditMode:()=>p.current?.exitEditMode(),handleCaretAfterInput:m=>p.current?.handleCaretAfterInput(m),handleCaretMove:m=>p.current?.handleCaretMove(m),replaceEditingRange:m=>p.current?.replaceEditingRange(m)??!1,setActivePill:m=>p.current?.setActivePill(m),skipActivePill:()=>p.current?.skipActivePill(),removeLastParam:()=>p.current?.removeLastParam(),clearNewParamId:()=>p.current?.clearNewParamId(),reset:()=>p.current?.reset(),selectOption:m=>p.current?.selectOption(m),selectProduct:m=>p.current?.selectProduct(m),setActiveDropdownIndex:m=>p.current?.setActiveDropdownIndex(m),clearHighlight:m=>p.current?.clearHighlight(m),showPreviousMonth:()=>p.current?.showPreviousMonth(),showNextMonth:()=>p.current?.showNextMonth(),handleFocus:()=>p.current?.setFocused(!0),handleBlur:()=>p.current?.setFocused(!1)});let g=l.current,q=(0,I.useCallback)(m=>{let Z=m.target.value,it=Z.length>0&&!m.nativeEvent?.isComposing&&Z[0]!==Z[0].toUpperCase()?Z[0].toUpperCase()+Z.slice(1):Z;p.current?.handleTextChange(it)},[]),Ee=(0,I.useCallback)(m=>{p.current?.handleKeyDown(m.nativeEvent)},[]),V=p.current,u=De??ma,Oe=L!==void 0?L:u.text,Te=R!==void 0?R:u.completedParams,ie=u.actionableSuggestions,Le=ie[0],be=V?.listboxId??"",ze=u.activeDropdownIndex>=0&&V?`${be}-option-${u.activeDropdownIndex}`:void 0,X=u.editingParam,ve=u.editingIdentified,oe=X?{type:X.suggestionType,text:X.suggestionPlaceholder,required:!0,options:X.options}:ve?{type:ve.type,text:(0,Fe.identifiedParamLabel)(ve.type),required:!0,options:[]}:null,ne=u.dropdownSuggestion??oe??Le,qe=oe?[oe]:ie,Ge=(0,Fe.dateSelectionFor)(u),Ue=!V||u.dropdownLoading;return{completedParams:Te,skippedParams:u.skippedParams,identifiedParams:u.identifiedParams,suggestionPills:ie,setActivePill:g.setActivePill,skipActivePill:g.skipActivePill,removeLastParam:g.removeLastParam,segments:u.segments,newParamId:u.newParamId,clearNewParamId:g.clearNewParamId,suggestions:u.suggestions,activeIndex:u.activeDropdownIndex,isReady:u.isReady,isLoading:Ue,isFocused:u.isFocused,isDropdownOpen:u.isDropdownOpen,isActivePillSelected:u.isActivePillSelected,placeholderText:u.placeholderText,listboxId:be,error:u.error,products:u.products,customFields:u.customFields,selectProduct:g.selectProduct,handleTextChange:g.handleTextChange,handleKeyDown:g.handleKeyDown,setFocused:g.setFocused,editingParam:X,editingIdentified:ve,editingAnchor:u.editingAnchor,caretOffset:u.caretOffset,startEditingParam:g.startEditingParam,exitEditMode:g.exitEditMode,handleCaretAfterInput:g.handleCaretAfterInput,handleCaretMove:g.handleCaretMove,replaceEditingRange:g.replaceEditingRange,inputProps:{value:Oe,placeholder:u.placeholderText||void 0,onChange:q,onKeyDown:Ee,onFocus:g.handleFocus,onBlur:g.handleBlur,role:"combobox","aria-expanded":u.isDropdownOpen,"aria-activedescendant":ze,"aria-autocomplete":"list","aria-controls":be},reset:g.reset,dropdownProps:{suggestions:ne?[{...ne,options:u.dropdownOptions}]:[],activeIndex:u.activeDropdownIndex,onSelect:g.selectOption,onHighlight:g.setActiveDropdownIndex,onUnhighlight:g.clearHighlight,isOpen:u.isDropdownOpen,id:be,pills:qe,activeSelected:u.isActivePillSelected,onPillClick:g.setActivePill,onSkip:g.skipActivePill,showSkipButton:(T??!0)&&!X&&!ve,showOptionIcons:f??!0,showOptionImages:y??!0,showOptionCounts:D??!0,skipDisabled:u.inSelectionAnimation,isLoading:Ue,skeletonExiting:u.skeletonExiting,isInputEmpty:Oe.trim().length===0,products:u.products,productImageFallback:G,onProductSelect:g.selectProduct,onProductFocusChange:g.setFocused,formatType:u.activeFormatType,dateView:u.dateView,selectedDateIso:Ge.selectedIso,selectedDateRange:Ge.selectedRange,dateRangeStart:Ge.rangeStart,onPreviousMonth:g.showPreviousMonth,onNextMonth:g.showNextMonth,optionsPosition:v??"below"}}}var Y=require("@magicx-eng/ai-autocomplete-vanilla"),P=require("react"),at;function ga(){if(at!==void 0)return at;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),at=e.contentEditable==="plaintext-only",at}function Bt(e){let{segments:a,showChipIcons:t=!0,showChipImages:n=!0,newParamId:i,editingParam:r,editingIdentified:o,editingAnchor:d,caretOffset:x,placeholderText:v,isFocused:w,isDropdownOpen:S,listboxId:f,activeDescendantId:y,autoFocus:D,handleTextChange:T,handleKeyDown:K,handleCaretAfterInput:G,handleCaretMove:A,startEditingParam:O,replaceEditingRange:L,setFocused:R}=e,E=(0,P.useRef)(null),_=(0,P.useRef)(!1),ye=(0,P.useRef)(""),pe=(0,P.useRef)(""),ke=(0,P.useRef)(null),he=(0,P.useRef)(0);ke.current=x,(0,P.useEffect)(()=>{if(!D)return;let c=E.current;if(!c)return;document.activeElement===c?R(!0):c.focus();let h=c.ownerDocument??document,b=h.getSelection(),C=b&&b.rangeCount>0&&c.contains(b.anchorNode);if(b&&!C){let k=h.createRange();k.selectNodeContents(c),k.collapse(!0),b.removeAllRanges(),b.addRange(k)}},[D,R]),(0,P.useEffect)(()=>{let c=E.current;if(!c)return;let h=c.ownerDocument??document,b=()=>{let C=h.getSelection();if(!C||C.rangeCount===0||!C.anchorNode||!c.contains(C.anchorNode))return;let k=C.anchorNode,l=k.nodeType===Node.ELEMENT_NODE?k:k.parentElement,q=(C.isCollapsed?l?.closest("strong[data-param-id]"):null)?.dataset.paramId??null,Ee=r?.id??o?.id??null;if(q&&q!==Ee){O(q);return}performance.now()-he.current<50||A((0,Y.getCursorOffset)(c))};return h.addEventListener("selectionchange",b),()=>h.removeEventListener("selectionchange",b)},[r,o,O,A]),(0,P.useLayoutEffect)(()=>{let c=E.current;c&&(0,Y.renderEditableContent)({input:c,segments:a,newParamId:i,editingParamId:r?.id??null,placeholderText:v??"",isFocused:w,showChipIcons:t,showChipImages:n})},[a,i,r,v,w,t,n]),(0,P.useLayoutEffect)(()=>{let c=ye.current,h=i??"";if(ye.current=h,!h||h===c)return;let b=E.current;if(!b)return;b.focus();let C=ke.current??(0,Y.plainTextLength)(b);(0,Y.setCursorOffset)(b,C)},[i]),(0,P.useLayoutEffect)(()=>{let c=pe.current,h=r?.id??"";if(pe.current=h,!h||h===c||d==null)return;let b=E.current;b&&(0,Y.setCursorOffset)(b,d)},[r,d]);let p=(0,P.useCallback)(()=>{if(_.current)return;let c=E.current;if(!c)return;let h=(0,Y.extractPlainText)(c),C=h.length>0&&h[0]!==h[0].toUpperCase()?h[0].toUpperCase()+h.slice(1):h;T(C)},[T]),De=(0,P.useCallback)(()=>{he.current=performance.now(),p();let c=E.current;c&&G((0,Y.getCursorOffset)(c))},[p,G]);(0,P.useEffect)(()=>{let c=E.current;if(!c)return;let h=b=>{let C=b,k=C.inputType;if(k==="insertParagraph"||k==="insertLineBreak"||k==="insertFromDrop"){b.preventDefault();return}if(k.startsWith("insert")||k.startsWith("delete")){let l=k.startsWith("delete")?"":C.data??"";L(l)&&b.preventDefault()}};return c.addEventListener("beforeinput",h),()=>c.removeEventListener("beforeinput",h)},[L]);let Ce=(0,P.useCallback)(()=>{_.current=!0},[]),Pe=(0,P.useCallback)(()=>{_.current=!1,p()},[p]),Se=(0,P.useCallback)(c=>{c.preventDefault();let h=E.current;if(!h)return;let b=(c.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!b)return;let C=h.ownerDocument??document,k=C.getSelection();if(!k||k.rangeCount===0)return;let l=k.getRangeAt(0);if(!h.contains(l.startContainer))return;l.deleteContents();let g=C.createTextNode(b);l.insertNode(g),l.setStartAfter(g),l.collapse(!0),k.removeAllRanges(),k.addRange(l),p()},[p]),ue=(0,P.useCallback)(c=>K(c),[K]),Ie=(0,P.useCallback)(()=>R(!0),[R]),$=(0,P.useCallback)(()=>R(!1),[R]),me=(0,P.useCallback)(()=>E.current?.focus(),[]),ge=(0,P.useCallback)(()=>E.current?.blur(),[]),ae=(0,P.useCallback)(()=>{let c=E.current;return c?(0,Y.extractPlainText)(c):""},[]),fe=ga()?"plaintext-only":"true";return{inputRef:E,editorProps:{ref:E,contentEditable:fe,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":f,"aria-expanded":S,"aria-activedescendant":y,spellCheck:!0,enterKeyHint:"send",onInput:De,onKeyDown:ue,onCompositionStart:Ce,onCompositionEnd:Pe,onPaste:Se,onFocus:Ie,onBlur:$},getPlainText:ae,focus:me,blur:ge}}var te=require("react/jsx-runtime");function fa(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var Ht=(0,B.forwardRef)(function({onSubmit:a,onResult:t,onError:n,optionOverrides:i,maskCompletedText:r,className:o,apiConfig:d,additionalContext:x,columns:v,pillPlacement:w="dropdown",mode:S="auto",optionsPosition:f="below",animations:y=!0,dropdownTrigger:D,closeDropdownOnBlur:T,showNonTappableOptions:K,showOptionIcons:G=!0,showChipIcons:A=!0,showChipImages:O=!0,showOptionImages:L=!0,showOptionCounts:R=!0,showSkipButton:E,showProducts:_,productsLayout:ye,productImageFallback:pe,autoFocus:ke=!0,onFocus:he,onBlur:p,value:De,completedParams:Ce,onChange:Pe,onParamsChange:Se,products:ue,onProductSelect:Ie,submitButton:$,resetOnSubmit:me=!0},ge){let ae=(0,B.useRef)(null),fe=(0,B.useRef)(null),c=(0,B.useRef)(()=>{}),h=(0,B.useRef)(null),b=(0,B.useRef)(null);(0,B.useEffect)(()=>{let M=ae.current;if(M)return h.current?h.current.setMode(S):h.current=new Ke.ModeController(M,S),()=>{h.current?.destroy(),h.current=null}},[S]);let C=(0,B.useCallback)(M=>{let Ae=b.current?.current;Ae&&(Ae.focus(),(0,Ke.setCursorOffset)(Ae,M))},[]),{completedParams:k,skippedParams:l,identifiedParams:g,isReady:q,customFields:Ee,suggestionPills:V,setActivePill:u,skipActivePill:Oe,segments:Te,newParamId:ie,clearNewParamId:Le,placeholderText:be,isFocused:ze,isDropdownOpen:X,isActivePillSelected:ve,isLoading:oe,activeIndex:ne,listboxId:qe,handleTextChange:Ge,handleKeyDown:Ue,setFocused:m,editingParam:Z,editingIdentified:H,editingAnchor:it,caretOffset:Ft,startEditingParam:Kt,handleCaretAfterInput:Gt,handleCaretMove:Wt,replaceEditingRange:_t,dropdownProps:qt,reset:Qe}=tt({onSubmit:M=>c.current(M),onResult:t,onError:n,optionOverrides:i,maskCompletedText:r,apiConfig:d,additionalContext:x,columns:v,dropdownTrigger:D,optionsPosition:f,closeDropdownOnBlur:T,showNonTappableOptions:K,showOptionIcons:G,showOptionImages:L,showOptionCounts:R,showSkipButton:E,showProducts:_,onFocus:he,onBlur:p,value:De,completedParams:Ce,onChange:Pe,onParamsChange:Se,products:ue,onProductSelect:Ie,source:"full-sdk",setCursor:C});(0,B.useEffect)(()=>{if(!ie)return;let M=window.setTimeout(()=>Le(),650);return()=>window.clearTimeout(M)},[ie,Le]);let Ut=ne>=0?`${qe}-option-${ne}`:void 0,{inputRef:ot,editorProps:Qt,focus:je,blur:ut,getPlainText:mt}=Bt({segments:Te,newParamId:ie,editingParam:Z,editingIdentified:H,editingAnchor:it,caretOffset:Ft,placeholderText:be,isFocused:ze,showChipIcons:A,showChipImages:O,isDropdownOpen:X,listboxId:qe,activeDescendantId:Ut,autoFocus:ke,handleTextChange:Ge,handleKeyDown:Ue,handleCaretAfterInput:Gt,handleCaretMove:Wt,startEditingParam:Kt,replaceEditingRange:_t,setFocused:m});b.current=ot,(0,B.useLayoutEffect)(()=>{let M=fe.current,Ae=ot.current;if(!M||!Ae)return;let gt=()=>{let bt=M.firstElementChild;if(!bt)return;let $t=bt.getBoundingClientRect(),Vt=Ae.getBoundingClientRect();$t.top>=Vt.bottom-2?M.setAttribute("data-aia-pill-wrapped",""):M.removeAttribute("data-aia-pill-wrapped")};gt();let ft=new ResizeObserver(gt);return ft.observe(Ae),()=>ft.disconnect()},[Te,V.length,oe,ot]),(0,B.useImperativeHandle)(ge,()=>({focus:je,blur:ut,reset:Qe,setMode:M=>h.current?.setMode(M),skipActivePill:Oe}),[je,ut,Qe,Oe]);let Ye=!!Te.length||k.length>0,nt=(0,B.useCallback)(()=>{if(!Ye)return;let M=mt();a((0,Ke.buildSubmitResult)(M,k,l,{identifiedParams:g,isReady:q,customFields:Ee})),me&&Qe()},[me,Ye,k,l,g,q,Ee,a,Qe,mt]);c.current=nt;let jt=(0,B.useCallback)(M=>{M.target?.closest("[data-aia-pill]")||je()},[je]),Yt=w==="inline",Zt=w==="dropdown";return(0,te.jsxs)("div",{ref:ae,className:`magicx-aia ${Me.container} ${o??""}`,"data-pill-placement":w,"data-options-position":f,"data-animations":y?"on":"off","data-mode":fa(S),children:[(0,te.jsx)(Je,{...qt,showPills:Zt,productsLayout:ye,productImageFallback:pe}),(0,te.jsxs)("div",{className:Me.inputWrapper,"data-aia-input-wrapper":"",onClick:jt,children:[(0,te.jsxs)("div",{className:Me.editorArea,"data-aia-editor":"",children:[(0,te.jsx)("div",{...Qt,className:Me.input,"data-aia-input":""}),Yt&&(oe||V.length>0)&&(0,te.jsx)("span",{ref:fe,className:Me.pillListContainer,"data-aia-pill-list-container":"",children:(0,te.jsx)($e,{pills:V,activePillIndex:0,activeSelected:ve,onSelectPill:u,loading:oe})})]}),$===null?null:$===void 0?(0,te.jsx)(Mt,{disabled:!Ye,onClick:nt}):(0,te.jsx)("span",{"data-aia-submit":"","data-aia-submit-slot":"",className:Me.submitSlot,onClick:M=>{Ye&&(M.stopPropagation(),nt())},children:$})]})]})});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});
|
|
2187
2193
|
//# sourceMappingURL=index.js.map
|