@magicx-eng/ai-autocomplete-react 0.26.1 → 0.26.2
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 +2 -2
- package/dist/index.d.mts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +99 -17
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +99 -17
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -288,7 +288,7 @@ Skip `<AIAutocompleteDropdown />` and render the suggestions UI yourself. `dropd
|
|
|
288
288
|
|
|
289
289
|
> **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.
|
|
290
290
|
|
|
291
|
-
> **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` while its picture loads; 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
|
|
291
|
+
> **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; 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`).
|
|
292
292
|
|
|
293
293
|
```tsx
|
|
294
294
|
import { useAIAutocomplete } from "@magicx-eng/ai-autocomplete-react";
|
|
@@ -797,7 +797,7 @@ Override on the container (via `className`). The variables are declared with `:w
|
|
|
797
797
|
| `--aia-date-today-ring` | `--aia-option-color` | `--aia-option-color` | Outline drawn around today's date. |
|
|
798
798
|
| `--aia-date-selected-bg` | white at 12% | white at 12% | Fill behind the date a re-edited parameter already holds. |
|
|
799
799
|
| `--aia-date-range-bg` | white at 6% | white at 6% | Band across the days between the two ends of a picked date range. The ends themselves use `--aia-date-selected-bg`. |
|
|
800
|
-
| `--aia-skeleton-bg` | `rgba(189, 189, 189, 0.
|
|
800
|
+
| `--aia-skeleton-bg` | `rgba(189, 189, 189, 0.083)` | `#1a1b1d` | Fill color for the loading skeleton bars and the masked text in cached pills/options, and of the option and chip image tiles while their picture loads (unless `--aia-option-image-bg` / `--aia-chip-image-bg` are set). |
|
|
801
801
|
|
|
802
802
|
Legacy `--aia-color-*` variables are still supported as fallbacks.
|
|
803
803
|
|
package/dist/index.d.mts
CHANGED
|
@@ -439,6 +439,8 @@ interface AIAutocompleteDropdownProps {
|
|
|
439
439
|
activeSelected?: boolean;
|
|
440
440
|
/** True while a fetch for the latest query is in flight. Replaces options/pills with a skeleton. */
|
|
441
441
|
isLoading?: boolean;
|
|
442
|
+
/** True while the loading skeleton fades out before the response's options replace it. Provided by `dropdownProps` from the hook. */
|
|
443
|
+
skeletonExiting?: boolean;
|
|
442
444
|
/** When the input has no typed text, the footer hint reads "tab to select". Provided by `dropdownProps` from the hook. */
|
|
443
445
|
isInputEmpty?: boolean;
|
|
444
446
|
/** Product cards to render below the options grid. Provided by `dropdownProps` from the hook. Empty (the default) renders no strip. */
|
|
@@ -499,7 +501,7 @@ interface AIAutocompleteDropdownProps {
|
|
|
499
501
|
|
|
500
502
|
declare const AIAutocomplete: react.ForwardRefExoticComponent<AIAutocompleteProps & react.RefAttributes<AIAutocompleteHandle>>;
|
|
501
503
|
|
|
502
|
-
declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, isOpen, id, className, pills, onPillClick, showPills, onSkip, showSkipButton, showOptionIcons, showOptionImages, showOptionCounts, skipDisabled, activeSelected, isLoading, isInputEmpty, products, onProductSelect, onProductFocusChange, productsLayout, formatType, dateView, selectedDateIso, selectedDateRange, dateRangeStart, onPreviousMonth, onNextMonth, optionsPosition, mode, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
|
|
504
|
+
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, formatType, dateView, selectedDateIso, selectedDateRange, dateRangeStart, onPreviousMonth, onNextMonth, optionsPosition, mode, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
|
|
503
505
|
|
|
504
506
|
declare function useAIAutocomplete({ onSubmit, onResult, onError, optionOverrides, maskCompletedText, apiConfig, additionalContext, columns, dropdownTrigger, optionsPosition, closeDropdownOnBlur, showNonTappableOptions, showOptionIcons, showOptionImages, showOptionCounts, showSkipButton, showProducts, onFocus, onBlur, value: controlledValue, completedParams: controlledParams, onChange: onChangeProp, onParamsChange, products, onProductSelect, source, setCursor, }: UseAIAutocompleteOptions): UseAIAutocompleteReturn;
|
|
505
507
|
|
package/dist/index.d.ts
CHANGED
|
@@ -439,6 +439,8 @@ interface AIAutocompleteDropdownProps {
|
|
|
439
439
|
activeSelected?: boolean;
|
|
440
440
|
/** True while a fetch for the latest query is in flight. Replaces options/pills with a skeleton. */
|
|
441
441
|
isLoading?: boolean;
|
|
442
|
+
/** True while the loading skeleton fades out before the response's options replace it. Provided by `dropdownProps` from the hook. */
|
|
443
|
+
skeletonExiting?: boolean;
|
|
442
444
|
/** When the input has no typed text, the footer hint reads "tab to select". Provided by `dropdownProps` from the hook. */
|
|
443
445
|
isInputEmpty?: boolean;
|
|
444
446
|
/** Product cards to render below the options grid. Provided by `dropdownProps` from the hook. Empty (the default) renders no strip. */
|
|
@@ -499,7 +501,7 @@ interface AIAutocompleteDropdownProps {
|
|
|
499
501
|
|
|
500
502
|
declare const AIAutocomplete: react.ForwardRefExoticComponent<AIAutocompleteProps & react.RefAttributes<AIAutocompleteHandle>>;
|
|
501
503
|
|
|
502
|
-
declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, isOpen, id, className, pills, onPillClick, showPills, onSkip, showSkipButton, showOptionIcons, showOptionImages, showOptionCounts, skipDisabled, activeSelected, isLoading, isInputEmpty, products, onProductSelect, onProductFocusChange, productsLayout, formatType, dateView, selectedDateIso, selectedDateRange, dateRangeStart, onPreviousMonth, onNextMonth, optionsPosition, mode, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
|
|
504
|
+
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, formatType, dateView, selectedDateIso, selectedDateRange, dateRangeStart, onPreviousMonth, onNextMonth, optionsPosition, mode, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
|
|
503
505
|
|
|
504
506
|
declare function useAIAutocomplete({ onSubmit, onResult, onError, optionOverrides, maskCompletedText, apiConfig, additionalContext, columns, dropdownTrigger, optionsPosition, closeDropdownOnBlur, showNonTappableOptions, showOptionIcons, showOptionImages, showOptionCounts, showSkipButton, showProducts, onFocus, onBlur, value: controlledValue, completedParams: controlledParams, onChange: onChangeProp, onParamsChange, products, onProductSelect, source, setCursor, }: UseAIAutocompleteOptions): UseAIAutocompleteReturn;
|
|
505
507
|
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var ot=Object.defineProperty;var Vt=Object.getOwnPropertyDescriptor;var Zt=Object.getOwnPropertyNames;var Xt=Object.prototype.hasOwnProperty;var Jt=(e,
|
|
1
|
+
"use strict";var ot=Object.defineProperty;var Vt=Object.getOwnPropertyDescriptor;var Zt=Object.getOwnPropertyNames;var Xt=Object.prototype.hasOwnProperty;var Jt=(e,i)=>{for(var a in i)ot(e,a,{get:i[a],enumerable:!0})},ea=(e,i,a,s)=>{if(i&&typeof i=="object"||typeof i=="function")for(let n of Zt(i))!Xt.call(e,n)&&n!==a&&ot(e,n,{get:()=>i[n],enumerable:!(s=Vt(i,n))||s.enumerable});return e};var ta=e=>ea(ot({},"__esModule",{value:!0}),e);var ma={};Jt(ma,{AIAutocomplete:()=>Bt,AIAutocompleteDropdown:()=>Ve,DATE_RANGE_META_END:()=>l.DATE_RANGE_META_END,DATE_RANGE_META_START:()=>l.DATE_RANGE_META_START,DEFAULT_OPTION_COUNT_UNIT:()=>l.DEFAULT_OPTION_COUNT_UNIT,PRODUCT_PATH_PREFIX:()=>l.PRODUCT_PATH_PREFIX,WEEKDAY_LABELS:()=>l.WEEKDAY_LABELS,buildSubmitResult:()=>l.buildSubmitResult,cellDay:()=>l.cellDay,cellIso:()=>l.cellIso,dateCellMarks:()=>l.dateCellMarks,formatDate:()=>l.formatDate,formatDateRange:()=>l.formatDateRange,formatOptionCount:()=>l.formatOptionCount,isoDate:()=>l.isoDate,monthLabel:()=>l.monthLabel,optionCountLabel:()=>l.optionCountLabel,optionHasImage:()=>l.optionHasImage,optionImageSrc:()=>l.optionImageSrc,optionLabel:()=>l.optionLabel,parseDate:()=>l.parseDate,parseLooseDate:()=>l.parseLooseDate,parseLooseDateRange:()=>l.parseLooseDateRange,productFromMatchedItem:()=>l.productFromMatchedItem,productsFromCustomFields:()=>l.productsFromCustomFields,sanitizeOptionIconSvg:()=>l.sanitizeOptionIconSvg,selectedRangeFor:()=>l.selectedRangeFor,useAIAutocomplete:()=>Xe,visibleDateRange:()=>l.visibleDateRange,withSkippedParams:()=>l.withSkippedParams});module.exports=ta(ma);var l=require("@magicx-eng/ai-autocomplete-vanilla");var M=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
|
|
@@ -167,7 +167,7 @@
|
|
|
167
167
|
border-radius: var(--aia-chip-image-radius, 4px);
|
|
168
168
|
background:
|
|
169
169
|
var(--aia-chip-image, none) center / cover no-repeat,
|
|
170
|
-
var(--aia-chip-image-bg, var(--aia-
|
|
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;
|
|
173
173
|
}
|
|
@@ -262,7 +262,7 @@
|
|
|
262
262
|
opacity: 0;
|
|
263
263
|
}
|
|
264
264
|
}
|
|
265
|
-
`,document.head.appendChild(e)}var
|
|
265
|
+
`,document.head.appendChild(e)}var De={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 ze=require("@magicx-eng/ai-autocomplete-vanilla"),J=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
|
*
|
|
@@ -427,6 +427,8 @@
|
|
|
427
427
|
--aia-primitive-blue-50: #eef2ff;
|
|
428
428
|
--aia-primitive-neutral-750-a50: rgba(189, 189, 189, 0.51);
|
|
429
429
|
--aia-primitive-neutral-750-a25: rgba(189, 189, 189, 0.25);
|
|
430
|
+
/* One third of a25's alpha: the light-mode skeleton fill. */
|
|
431
|
+
--aia-primitive-neutral-750-a8: rgba(189, 189, 189, 0.083);
|
|
430
432
|
--aia-primitive-neutral-750-a35: rgba(189, 189, 189, 0.35);
|
|
431
433
|
--aia-primitive-neutral-750-a30: rgba(189, 189, 189, 0.3);
|
|
432
434
|
--aia-primitive-neutral-750-a15: rgba(189, 189, 189, 0.15);
|
|
@@ -487,7 +489,7 @@
|
|
|
487
489
|
|
|
488
490
|
/* Loading bars sit at half the contrast of the surrounding chrome so they
|
|
489
491
|
read as a placeholder, not as content (a50 -> a25 over the light surface). */
|
|
490
|
-
--aia-skeleton-bg: var(--aia-primitive-neutral-750-
|
|
492
|
+
--aia-skeleton-bg: var(--aia-primitive-neutral-750-a8);
|
|
491
493
|
|
|
492
494
|
--aia-streak-rgb: 99, 102, 241; /* off shared palette (indigo effect) */
|
|
493
495
|
|
|
@@ -993,6 +995,24 @@
|
|
|
993
995
|
flex-direction: column;
|
|
994
996
|
gap: 20px;
|
|
995
997
|
padding: 7px 8px;
|
|
998
|
+
animation: aia-skeletonBarsIn-BdPrL 100ms ease-out;
|
|
999
|
+
}
|
|
1000
|
+
|
|
1001
|
+
/* Fades out with the option skeleton \u2014 see SuggestionItem.module.css. */
|
|
1002
|
+
.aia-dropdown-yz2KC[data-aia-skeleton-exiting] .aia-skeletonBars-HVr9C {
|
|
1003
|
+
animation: aia-skeletonBarsOut-TqKeD 100ms ease-in forwards;
|
|
1004
|
+
}
|
|
1005
|
+
|
|
1006
|
+
@keyframes aia-skeletonBarsOut-TqKeD {
|
|
1007
|
+
to {
|
|
1008
|
+
opacity: 0;
|
|
1009
|
+
}
|
|
1010
|
+
}
|
|
1011
|
+
|
|
1012
|
+
@keyframes aia-skeletonBarsIn-BdPrL {
|
|
1013
|
+
from {
|
|
1014
|
+
opacity: 0;
|
|
1015
|
+
}
|
|
996
1016
|
}
|
|
997
1017
|
|
|
998
1018
|
.aia-skeletonBar-O3xIx {
|
|
@@ -1021,7 +1041,7 @@
|
|
|
1021
1041
|
opacity: 0.25;
|
|
1022
1042
|
}
|
|
1023
1043
|
}
|
|
1024
|
-
`,document.head.appendChild(e)}var
|
|
1044
|
+
`,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 L=require("@magicx-eng/ai-autocomplete-vanilla"),gt=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) ---
|
|
1025
1045
|
|
|
1026
1046
|
One of three hand-maintained copies (vanilla styles.css, this file, Angular's
|
|
1027
1047
|
date-grid.component.css). Only the class-naming layer differs \u2014 the
|
|
@@ -1184,7 +1204,7 @@
|
|
|
1184
1204
|
opacity: 0.8;
|
|
1185
1205
|
background: rgba(var(--aia-streak-rgb, 255, 255, 255), 0.06);
|
|
1186
1206
|
}
|
|
1187
|
-
`,document.head.appendChild(e)}var
|
|
1207
|
+
`,document.head.appendChild(e)}var O={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 W=require("react/jsx-runtime"),aa=["sunday","monday","tuesday","wednesday","thursday","friday","saturday"];function bt({options:e,activeIndex:i,listboxId:a,view:s,selection:n,onSelect:t,onHighlight:r,onPreviousMonth:m,onNextMonth:x}){let v=(0,L.isoDate)(new Date),y=(0,L.visibleDateRange)({pendingStart:n.rangeStart,highlightedIso:(0,L.cellIso)(e[i]),selected:n.selectedRange});return(0,W.jsxs)("div",{className:O.datepicker,"data-aia-datepicker":"",children:[(0,W.jsxs)("div",{className:O.header,children:[(0,W.jsx)("button",{type:"button",tabIndex:-1,className:O.nav,"data-aia-date-prev":"","aria-label":"Previous month",onMouseDown:h=>h.preventDefault(),onClick:m,children:"\u2039"}),(0,W.jsx)("span",{className:O.month,"data-aia-date-month":"","aria-live":"polite",children:(0,L.monthLabel)(s)}),(0,W.jsx)("button",{type:"button",tabIndex:-1,className:O.nav,"data-aia-date-next":"","aria-label":"Next month",onMouseDown:h=>h.preventDefault(),onClick:x,children:"\u203A"})]}),(0,W.jsx)("div",{className:O.weekdays,"aria-hidden":"true",children:L.WEEKDAY_LABELS.map((h,C)=>(0,W.jsx)("span",{className:O.weekday,children:h},aa[C]))}),(0,W.jsx)("div",{className:O.grid,"data-aia-date-grid":"",children:e.map((h,C)=>(0,W.jsx)(ia,{option:h,id:`${a}-option-${C}`,index:C,isHighlighted:C===i&&h.is_tappable,isToday:(0,L.cellIso)(h)===v,isPast:(0,L.cellIso)(h)!=null&&(0,L.cellIso)(h)<v,marks:(0,L.dateCellMarks)((0,L.cellIso)(h),{selectedIso:n.selectedIso,range:y}),onSelect:t,onHighlight:r},(0,L.cellIso)(h)??`pad-${C}`))})]})}function ia({option:e,id:i,index:a,isHighlighted:s,isToday:n,isPast:t,marks:r,onSelect:m,onHighlight:x}){let[v,y]=(0,gt.useState)(!1),h=(0,L.cellDay)(e);if(h==null)return(0,W.jsx)("div",{id:i,role:"option","data-aia-option":"","data-aia-date-cell":"","aria-hidden":"true","aria-selected":!1,tabIndex:-1,className:`${O.cell} ${O.blank}`});let C=()=>{y(!0),m(e),setTimeout(()=>y(!1),170)},T=[O.cell,O.day,t?O.past:"",s?O.highlighted:"",n?O.today:"",r.inRange?O.inRange:"",r.selected?O.selected:"",v?O.pressed:""].filter(Boolean).join(" ");return(0,W.jsx)("div",{id:i,role:"option","data-aia-option":"","data-aia-date-cell":"","aria-selected":s,"aria-label":e.text,tabIndex:0,className:T,onClick:C,onKeyDown:k=>{(k.key==="Enter"||k.key===" ")&&(k.preventDefault(),C())},onMouseEnter:()=>x(a),children:(0,W.jsx)("span",{className:O.number,children:h})})}var Me=require("@magicx-eng/ai-autocomplete-vanilla"),je=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 {
|
|
1188
1208
|
display: flex;
|
|
1189
1209
|
flex-wrap: wrap;
|
|
1190
1210
|
gap: var(--aia-cluster-gap, 0.5rem);
|
|
@@ -1224,7 +1244,7 @@
|
|
|
1224
1244
|
.aia-cluster[data-justify="around"] {
|
|
1225
1245
|
justify-content: space-around;
|
|
1226
1246
|
}
|
|
1227
|
-
`,document.head.appendChild(e)}var nt=require("react/jsx-runtime");function Ke({gap:e,align:
|
|
1247
|
+
`,document.head.appendChild(e)}var nt=require("react/jsx-runtime");function Ke({gap:e,align:i="center",justify:a="start",noWrap:s=!1,inline:n=!1,className:t,children:r,...m}){let x=e?{"--aia-cluster-gap":e}:void 0,v={className:t?`aia-cluster ${t}`:"aia-cluster","data-align":i,"data-justify":a,"data-nowrap":s||void 0,"data-inline":n||void 0,style:x,...m};return n?(0,nt.jsx)("span",{...v,children:r}):(0,nt.jsx)("div",{...v,children:r})}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
|
|
1228
1248
|
dropdown's rounded edges. The top inset (--aia-footer-gap) adds breathing
|
|
1229
1249
|
room above the hint/branding row so the footer doesn't butt against the last
|
|
1230
1250
|
option row \u2014 additive to the dropdown's 8px section gap. */
|
|
@@ -1358,7 +1378,7 @@
|
|
|
1358
1378
|
justify-content: flex-end;
|
|
1359
1379
|
}
|
|
1360
1380
|
}
|
|
1361
|
-
`,document.head.appendChild(e)}var
|
|
1381
|
+
`,document.head.appendChild(e)}var Ce={footer:"aia-footer-qQQ7x",hintGroup:"aia-hintGroup-ZzbPf",brandLink:"aia-brandLink-r4f3R",key:"aia-key-Bz1H-",hint:"aia-hint-GKEOH",brand:"aia-brand-Al-lR",badge:"aia-badge-Fk9vg",row:"aia-row-BgZ6Q"};var ne=require("react/jsx-runtime");function vt({isOptionHighlighted:e=!1,isInputEmpty:i=!1}){let{key:a,hint:s}=(0,Me.getFooterHint)(e,i),[n,t]=(0,je.useState)(Me.ATTRIBUTION_URL);return(0,je.useEffect)(()=>{t((0,Me.buildAttributionUrl)())},[]),(0,ne.jsx)("footer",{className:Ce.footer,"data-aia-footer":"",children:(0,ne.jsxs)(Ke,{justify:"between",noWrap:!0,className:Ce.row,children:[(0,ne.jsxs)(Ke,{gap:"5px",className:Ce.hintGroup,children:[(0,ne.jsx)("kbd",{className:Ce.key,children:a}),(0,ne.jsx)("span",{className:Ce.hint,children:s})]}),(0,ne.jsxs)("a",{className:Ce.brandLink,href:n,target:"_blank",rel:"noopener noreferrer",children:[(0,ne.jsx)("span",{className:Ce.brand,children:"AI"}),(0,ne.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,
|
|
1362
1382
|
no outline. ~28px via 6px padding + 14px text + the 1px border (border-box).
|
|
1363
1383
|
The border is kept as a 1px transparent line so the box stays the same size
|
|
1364
1384
|
as it was when the outline was dashed. */
|
|
@@ -1397,7 +1417,26 @@
|
|
|
1397
1417
|
cursor: default;
|
|
1398
1418
|
color: transparent;
|
|
1399
1419
|
background: var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, 0.25)));
|
|
1400
|
-
animation:
|
|
1420
|
+
animation:
|
|
1421
|
+
aia-skeletonIn-54kMv 100ms ease-out,
|
|
1422
|
+
aia-skeletonPulse-xGcUy 1.4s ease-in-out infinite;
|
|
1423
|
+
}
|
|
1424
|
+
|
|
1425
|
+
/* Fades out with the option skeleton \u2014 see SuggestionItem.module.css. */
|
|
1426
|
+
[data-aia-skeleton-exiting] .aia-skeleton-57P0T {
|
|
1427
|
+
animation: aia-skeletonOut-1sJ-r 100ms ease-in forwards;
|
|
1428
|
+
}
|
|
1429
|
+
|
|
1430
|
+
@keyframes aia-skeletonIn-54kMv {
|
|
1431
|
+
from {
|
|
1432
|
+
opacity: 0;
|
|
1433
|
+
}
|
|
1434
|
+
}
|
|
1435
|
+
|
|
1436
|
+
@keyframes aia-skeletonOut-1sJ-r {
|
|
1437
|
+
to {
|
|
1438
|
+
opacity: 0;
|
|
1439
|
+
}
|
|
1401
1440
|
}
|
|
1402
1441
|
|
|
1403
1442
|
@keyframes aia-skeletonPulse-xGcUy {
|
|
@@ -1415,7 +1454,7 @@
|
|
|
1415
1454
|
opacity: 0;
|
|
1416
1455
|
}
|
|
1417
1456
|
}
|
|
1418
|
-
`,document.head.appendChild(e)}var
|
|
1457
|
+
`,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 xt=require("react/jsx-runtime"),rt={selected:1,first:.7,next:.4,last:.2};function wt({label:e,state:i,rounded:a,loading:s,onClick:n}){let t=[Re.pill,a?Re.rounded:"",s?Re.skeleton:""].filter(Boolean).join(" ");return(0,xt.jsx)("button",{type:"button","data-aia-pill":"","data-aia-loading":s?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:t,style:{opacity:rt[i]},onMouseDown:r=>r.preventDefault(),onClick:s?void 0:n,disabled:s,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 {
|
|
1419
1458
|
position: relative;
|
|
1420
1459
|
z-index: 1;
|
|
1421
1460
|
pointer-events: auto;
|
|
@@ -1425,7 +1464,7 @@
|
|
|
1425
1464
|
align-items: center;
|
|
1426
1465
|
vertical-align: middle;
|
|
1427
1466
|
}
|
|
1428
|
-
`,document.head.appendChild(e)}var st={list:"aia-list-qvLqO"};var Ge=require("react/jsx-runtime"),oa=[125,69];function yt(e){return e===0?"first":e===1?"next":"last"}function Qe({pills:e,activePillIndex:
|
|
1467
|
+
`,document.head.appendChild(e)}var st={list:"aia-list-qvLqO"};var Ge=require("react/jsx-runtime"),oa=[125,69];function yt(e){return e===0?"first":e===1?"next":"last"}function Qe({pills:e,activePillIndex:i,onSelectPill:a,activeSelected:s,rounded:n,loading:t}){return t&&e.length===0?(0,Ge.jsx)("span",{className:st.list,"data-aia-pill-list-loading":"",children:oa.map((r,m)=>(0,Ge.jsx)("span",{"data-aia-pill-skeleton":"",className:`${Re.pill} ${n?Re.rounded:""} ${Re.skeleton}`,style:{width:r,opacity:rt[yt(m)]}},`skel-${r}`))}):(0,Ge.jsx)("span",{className:st.list,"data-aia-pill-list-loading":t?"":void 0,children:e.map((r,m)=>{let x=!!s&&m===i;return(0,Ge.jsx)(wt,{label:r.text,state:x?"selected":yt(m),selected:x,rounded:n,loading:t,onClick:()=>a(m)},`${r.type}-${r.text}`)})})}var kt=require("@magicx-eng/ai-autocomplete-vanilla"),Ye=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
|
|
1429
1468
|
(packages/vanilla/src/styles.css). Same tokens, same defaults, so a consumer
|
|
1430
1469
|
theming one package sees the same result in the other.
|
|
1431
1470
|
|
|
@@ -1643,7 +1682,7 @@
|
|
|
1643
1682
|
.aia-section-Hugfg[data-aia-products-layout="list"] .aia-body-ly032 {
|
|
1644
1683
|
flex: 1 1 auto;
|
|
1645
1684
|
}
|
|
1646
|
-
`,document.head.appendChild(e)}var
|
|
1685
|
+
`,document.head.appendChild(e)}var X={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 U=require("react/jsx-runtime");function Ct({products:e,listboxId:i,onSelect:a,onFocusChange:s,focusable:n=!0,layout:t="row"}){let r=e.length>0,m=(0,Ye.useRef)(null);if((0,Ye.useEffect)(()=>{let v=m.current;if(!(!r||!v))return(0,kt.attachProductRowWheel)(v)},[r]),!r)return null;let x=`${i}-products-label`;return(0,U.jsxs)("section",{className:X.section,"data-aia-products":"","data-aia-products-layout":t,role:"group","aria-labelledby":x,children:[(0,U.jsx)("div",{className:X.label,id:x,"data-aia-products-label":"",children:"Products"}),(0,U.jsx)("div",{ref:m,className:X.row,"data-aia-products-row":"",children:e.map((v,y)=>(0,U.jsx)(na,{product:v,id:`${i}-product-${y}`,onSelect:a,onFocusChange:s,focusable:n},v.id))})]})}function na({product:e,id:i,onSelect:a,onFocusChange:s,focusable:n}){let t=r=>{r.metaKey||r.ctrlKey||r.shiftKey||r.altKey||r.button!==0||(r.preventDefault(),a(e))};return(0,U.jsxs)("a",{id:i,className:X.card,"data-aia-product":"",role:"option","aria-selected":!1,href:e.url,tabIndex:n?0:-1,onClick:t,onKeyDown:r=>{r.key!=="Enter"&&r.key!==" "||(r.preventDefault(),a(e))},onFocus:()=>s?.(!0),onBlur:r=>{r.relatedTarget?.closest("[data-aia-dropdown]")||s?.(!1)},children:[(0,U.jsx)("span",{className:X.media,"data-aia-product-placeholder":e.imageUrl?void 0:"",children:e.imageUrl?(0,U.jsx)("img",{className:X.image,src:e.imageUrl,alt:"",loading:"lazy",decoding:"async"}):null}),(0,U.jsxs)("span",{className:X.body,children:[e.vendor?(0,U.jsx)("span",{className:X.vendor,children:e.vendor}):null,(0,U.jsx)("span",{className:X.title,children:e.title}),e.price?(0,U.jsx)("span",{className:X.price,children:e.price}):null]})]})}var K=require("@magicx-eng/ai-autocomplete-vanilla"),de=require("react");var Pt=require("@magicx-eng/ai-autocomplete-vanilla"),$e=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-948e58da")){let e=document.createElement("style");e.id="ac-style-948e58da",e.textContent=`.aia-grid {
|
|
1647
1686
|
display: grid;
|
|
1648
1687
|
grid-template-columns: repeat(
|
|
1649
1688
|
auto-fit,
|
|
@@ -1676,7 +1715,7 @@
|
|
|
1676
1715
|
background: var(--aia-scrollbar-thumb, rgba(0, 0, 0, 0.3));
|
|
1677
1716
|
border-radius: 3px;
|
|
1678
1717
|
}
|
|
1679
|
-
`,document.head.appendChild(e)}var It=require("react/jsx-runtime");function St({min:e="16rem",max:
|
|
1718
|
+
`,document.head.appendChild(e)}var It=require("react/jsx-runtime");function St({min:e="16rem",max:i,gap:a,scroll:s=!1,maxHeight:n,scrollResetKey:t,cols:r,template:m,innerRef:x,className:v,children:y,...h}){let C=(0,$e.useRef)(null);(0,$e.useLayoutEffect)(()=>{if(t===void 0)return;let k=C.current;k&&(k.scrollTop=0)},[t]);let T={"--aia-grid-min":e};return i&&(T["--aia-grid-max"]=i),a&&(T["--aia-grid-gap"]=a),n&&(T["--aia-grid-max-height"]=n),r&&(T.gridTemplateColumns=(0,Pt.optionsGridTemplateColumns)(r)),m&&(T.gridTemplateColumns=m),(0,It.jsx)("div",{ref:k=>{C.current=k,x?.(k)},className:v?`aia-grid ${v}`:"aia-grid","data-scroll":s||void 0,style:T,...h,children:y})}var le=require("@magicx-eng/ai-autocomplete-vanilla"),se=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 {
|
|
1680
1719
|
position: relative;
|
|
1681
1720
|
/* Clip, not visible: the entrance rise below runs on the inner content,
|
|
1682
1721
|
and a transformed box extends its scroll container's scrollable area.
|
|
@@ -1830,6 +1869,7 @@
|
|
|
1830
1869
|
border-radius: 999px;
|
|
1831
1870
|
-webkit-box-decoration-break: clone;
|
|
1832
1871
|
box-decoration-break: clone;
|
|
1872
|
+
animation: aia-skeletonBarIn-ZlEM0 100ms ease-out;
|
|
1833
1873
|
}
|
|
1834
1874
|
|
|
1835
1875
|
.aia-item-d4vpD[data-aia-loading] .aia-tag-e3Fwe {
|
|
@@ -1902,6 +1942,15 @@
|
|
|
1902
1942
|
min-width: 0;
|
|
1903
1943
|
}
|
|
1904
1944
|
|
|
1945
|
+
/* A skeleton bar hugs its text. The rules above let the text grow to fill a
|
|
1946
|
+
picture / count row (so the count sits at the trailing edge); a loading row
|
|
1947
|
+
hides the count, and a growing text box would paint the bar across the
|
|
1948
|
+
whole column. One compound deeper than those rules, so it wins in every
|
|
1949
|
+
copy regardless of source order. */
|
|
1950
|
+
.aia-item-d4vpD[data-aia-loading] .aia-content-T-Qba .aia-text-yqoh9 {
|
|
1951
|
+
flex: 0 1 auto;
|
|
1952
|
+
}
|
|
1953
|
+
|
|
1905
1954
|
/* The picture: a square tile, centred on the text beside it (a one-line
|
|
1906
1955
|
option reads as the reference row; a wrapped one keeps the tile on its
|
|
1907
1956
|
vertical middle). Sized and rounded by token so a consumer can shrink it
|
|
@@ -1919,7 +1968,7 @@
|
|
|
1919
1968
|
height: var(--aia-option-image-size, 40px);
|
|
1920
1969
|
border-radius: var(--aia-option-image-radius, 12px);
|
|
1921
1970
|
overflow: hidden;
|
|
1922
|
-
background: var(--aia-option-image-bg, var(--aia-
|
|
1971
|
+
background: var(--aia-option-image-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, 0.083)));
|
|
1923
1972
|
}
|
|
1924
1973
|
|
|
1925
1974
|
.aia-image-YZAbO img {
|
|
@@ -1993,7 +2042,40 @@
|
|
|
1993
2042
|
filter: brightness(0.55);
|
|
1994
2043
|
}
|
|
1995
2044
|
}
|
|
1996
|
-
|
|
2045
|
+
/* --- Loading skeleton fades ---
|
|
2046
|
+
Skeletons ease in and out over 100ms instead of popping. In: an option's
|
|
2047
|
+
text crossfades into its bar (the row element persists in React / Angular
|
|
2048
|
+
and is rebuilt in vanilla \u2014 a keyframe plays either way). Out: while the
|
|
2049
|
+
dropdown carries data-aia-skeleton-exiting (the core holds the skeleton for
|
|
2050
|
+
SKELETON_FADE_MS after the response lands) the skeleton rows and pills fade
|
|
2051
|
+
to nothing before the response's options replace them. Keep 100ms in step
|
|
2052
|
+
with SKELETON_FADE_MS in AIAutocomplete.ts. */
|
|
2053
|
+
/* During the fade-out the skeleton rows play nothing but the fade: no
|
|
2054
|
+
entrance, no text crossfade. Rows keep their identity through it (the core's
|
|
2055
|
+
dropdownSuggestion), but if one were ever remounted here, replaying either
|
|
2056
|
+
animation would bring the previous option's text back on screen. */
|
|
2057
|
+
[data-aia-skeleton-exiting] .aia-item-d4vpD[data-aia-loading] .aia-content-T-Qba,
|
|
2058
|
+
[data-aia-skeleton-exiting] .aia-item-d4vpD[data-aia-loading] .aia-text-yqoh9 {
|
|
2059
|
+
animation: none;
|
|
2060
|
+
}
|
|
2061
|
+
|
|
2062
|
+
[data-aia-skeleton-exiting] .aia-item-d4vpD[data-aia-loading] {
|
|
2063
|
+
animation: aia-skeletonOut-x6NRd 100ms ease-in forwards;
|
|
2064
|
+
}
|
|
2065
|
+
|
|
2066
|
+
@keyframes aia-skeletonBarIn-ZlEM0 {
|
|
2067
|
+
from {
|
|
2068
|
+
background-color: transparent;
|
|
2069
|
+
color: inherit;
|
|
2070
|
+
}
|
|
2071
|
+
}
|
|
2072
|
+
|
|
2073
|
+
@keyframes aia-skeletonOut-x6NRd {
|
|
2074
|
+
to {
|
|
2075
|
+
opacity: 0;
|
|
2076
|
+
}
|
|
2077
|
+
}
|
|
2078
|
+
`,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 re=require("react/jsx-runtime");function Et({option:e,isHighlighted:i,onSelect:a,onHighlight:s,id:n,loading:t,showIcon:r=!0,showImage:m=!0,showCount:x=!0,scrollHint:v,enterDelayMs:y=0}){let[h]=(0,se.useState)(y),[C,T]=(0,se.useState)(!1),k=m?(0,le.optionImageSrc)(e.image_url):null,[_,B]=(0,se.useState)(null),E=(0,se.useMemo)(()=>!k&&r&&e.icon_svg?(0,le.sanitizeOptionIconSvg)(e.icon_svg):null,[k,r,e.icon_svg]),D=x?(0,le.formatOptionCount)(e.item_count):null,A=(0,se.useRef)(void 0);(0,se.useEffect)(()=>()=>clearTimeout(A.current),[]);let z=()=>{t||!e.is_tappable||C||(T(!0),a(e),clearTimeout(A.current),A.current=setTimeout(()=>T(!1),170))},F=[j.item,i&&!t?j.highlighted:"",e.is_tappable?j.tappable:j.nonTappable,C?j.pressed:"",v?j.scrollHint:""].filter(Boolean).join(" ");return(0,re.jsx)("div",{id:n,role:"option","data-aia-option":"","data-aia-loading":t?"":void 0,"data-aia-icon":E&&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":i,className:F,style:{[le.OPTION_ENTER_DELAY_VAR]:`${h}ms`},tabIndex:t||!e.is_tappable?-1:0,onClick:z,onKeyDown:S=>{!t&&e.is_tappable&&(S.key==="Enter"||S.key===" ")&&(S.preventDefault(),z())},onMouseEnter:!t&&e.is_tappable?s:void 0,children:(0,re.jsxs)("span",{className:j.content,children:[k&&(0,re.jsx)("span",{className:`${j.image} magicx-aia-option-image`,"aria-hidden":"true",children:(0,re.jsx)("img",{src:k,alt:"",loading:"lazy",decoding:"async",referrerPolicy:"no-referrer",draggable:!1,hidden:_===k,onError:()=>B(k)})}),E&&(0,re.jsx)("span",{className:`${j.icon} magicx-aia-option-icon`,"aria-hidden":"true",dangerouslySetInnerHTML:{__html:E}}),(0,re.jsx)("span",{className:j.text,children:(0,le.optionLabel)(e)}),e.tag&&(0,re.jsx)("span",{className:j.tag,children:e.tag}),D!==null&&(0,re.jsx)("span",{className:`${j.count} magicx-aia-option-count`,children:D})]})})}var lt=require("react/jsx-runtime");function ra(){let[e,i]=(0,de.useState)(K.isOptionsGridMobileViewport);return(0,de.useEffect)(()=>{if(typeof window>"u"||!window.matchMedia)return;let a=window.matchMedia(K.OPTIONS_GRID_MOBILE_QUERY),s=()=>i(a.matches);return s(),a.addEventListener("change",s),()=>a.removeEventListener("change",s)},[]),e}function Tt({options:e,activeIndex:i,onSelect:a,onHighlight:s,listboxId:n,loading:t,groupKey:r="",optionsPosition:m="below",showIcons:x=!0,showImages:v=!0,showCounts:y=!0}){let h=ra(),C=(0,de.useRef)(null),[T,k]=(0,de.useState)(null),_=(0,de.useRef)(null);(0,de.useLayoutEffect)(()=>{if(t&&(0,K.sameOptionRows)(_.current,e))return;_.current=t?null:e;let E=C.current,A=E&&!t&&(0,K.needsOptionsGridMeasurement)(e.length,h)?(0,K.measureOptionsGrid)(E):null;k(A?(0,K.planOptionsGrid)(e.length,h,A.rowWidths,A.gridWidth):null)},[e,h,t]);let B=T??(0,K.planOptionsGrid)(e.length,h,null,null);return(0,lt.jsx)(St,{min:"250px",max:"1fr",gap:"0",scroll:!0,scrollResetKey:r,template:B.template,maxHeight:B.maxHeight,innerRef:E=>{C.current=E},"data-aia-group":r,children:e.map((E,D)=>(0,lt.jsx)(Et,{option:E,isHighlighted:D===i,onSelect:a,onHighlight:()=>s(D),id:`${n}-option-${D}`,loading:t,showIcon:x,showImage:v,showCount:y,scrollHint:!t&&B.scrollHintIndices.includes(D),enterDelayMs:t?0:(0,K.optionEnterDelayMs)(D,B.cols,e.length,m)},`${r}\0${E.text}`))})}if(typeof document<"u"&&!document.getElementById("ac-style-8414cd5f")){let e=document.createElement("style");e.id="ac-style-8414cd5f",e.textContent=`.aia-stack {
|
|
1997
2079
|
display: flex;
|
|
1998
2080
|
flex-direction: column;
|
|
1999
2081
|
gap: var(--aia-stack-space, 0.5rem);
|
|
@@ -2008,7 +2090,7 @@
|
|
|
2008
2090
|
align-items: end;
|
|
2009
2091
|
}
|
|
2010
2092
|
/* data-align="stretch" is the flex default \u2014 no rule needed. */
|
|
2011
|
-
`,document.head.appendChild(e)}var Rt=require("react/jsx-runtime");function At({space:e,align:
|
|
2093
|
+
`,document.head.appendChild(e)}var Rt=require("react/jsx-runtime");function At({space:e,align:i="stretch",className:a,children:s,...n}){let t=e?{"--aia-stack-space":e}:void 0;return(0,Rt.jsx)("div",{className:a?`aia-stack ${a}`:"aia-stack","data-align":i,style:t,...n,children:s})}var H=require("react/jsx-runtime"),sa=[159,119,164],la=()=>{},Dt=()=>{};function da(e){let i=()=>typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches,[a,s]=(0,J.useState)(i);if((0,J.useEffect)(()=>{if(e!=="auto"||typeof window>"u"||typeof window.matchMedia!="function")return;let n=window.matchMedia("(prefers-color-scheme: dark)"),t=()=>s(n.matches);return n.addEventListener("change",t),()=>n.removeEventListener("change",t)},[e]),e!==void 0)return e==="auto"?a?"dark":"light":e}function ca(e,i){let a=(0,J.useRef)(null);(0,J.useEffect)(()=>{let s=e.current,n=i.current;if(!s||!n)return;let t=s.querySelector(".aia-grid[data-scroll]");if(a.current&&a.current.grid!==t&&(a.current.controller.destroy(),a.current=null),t&&!a.current){a.current={grid:t,controller:(0,ze.attachScrollArrow)({dropdown:s,grid:t,button:n})};return}a.current?.controller.update()}),(0,J.useEffect)(()=>()=>{a.current?.controller.destroy(),a.current=null},[])}function Ve({suggestions:e,activeIndex:i,onSelect:a,onHighlight:s,isOpen:n,id:t,className:r,pills:m,onPillClick:x,showPills:v=!0,onSkip:y,showSkipButton:h=!0,showOptionIcons:C=!0,showOptionImages:T=!0,showOptionCounts:k=!0,skipDisabled:_=!1,activeSelected:B=!1,isLoading:E=!1,skeletonExiting:D=!1,isInputEmpty:A=!1,products:z,onProductSelect:F,onProductFocusChange:S,productsLayout:ce="row",formatType:pe="options",dateView:Pe=null,selectedDateIso:he=null,selectedDateRange:u=null,dateRangeStart:Y=null,onPreviousMonth:Se,onNextMonth:Ie,optionsPosition:ue="below",mode:Ee}){let me=da(Ee),te=me!==void 0,fe=(0,J.useRef)(null),ae=(0,J.useRef)(null);ca(fe,ae);let ge=e[0]?.options??[],be=!!(m&&m.length>0&&x),G=!!(z&&z.length>0),d=n&&(ge.length>0||v&&be||E||G),f={suggestions:e,activeIndex:i,pills:m,showPills:v,showSkipButton:h,showOptionIcons:C,showOptionImages:T,showOptionCounts:k,skipDisabled:_,activeSelected:B,isLoading:E,skeletonExiting:D,isInputEmpty:A,products:z,formatType:pe,dateView:Pe,selectedDateIso:he,selectedDateRange:u,dateRangeStart:Y},g=(0,J.useRef)(f);d&&(g.current=f);let o=d?f:g.current,w=o.suggestions[0],c=w?.options??[],ie=o.activeIndex>=0&&!!c[o.activeIndex]?.is_tappable,q=!!(o.pills&&o.pills.length>0&&x),ve=o.showPills&&q,p=o.showPills&&!q&&o.isLoading,we=ve||p,Te=q&&o.showSkipButton&&!o.isInputEmpty&&!!y,xe=o.pills?.[0]?.text,Oe=(0,ze.isCalendarFormat)(o.formatType)&&o.dateView!=null,ye=c.length>0&&!Oe,Le=c.length>0&&Oe&&!o.isLoading,oe=o.isLoading&&!ye&&!Le,$=o.products??[];return(0,H.jsxs)("div",{ref:fe,id:t,role:"listbox","data-aia-dropdown":"","data-options-position":ue,"data-mode":me,"data-aia-loading":o.isLoading?"":void 0,"data-aia-skeleton-exiting":o.skeletonExiting?"":void 0,"data-aia-has-products":$.length>0?"":void 0,className:`${te?"magicx-aia ":""}${ke.dropdown} ${d?ke.visible:""} ${r??""}`,onMouseDown:Z=>Z.preventDefault(),children:[(0,H.jsxs)(At,{space:"8px",children:[(we||Te)&&(0,H.jsxs)(Ke,{noWrap:!0,className:ke.pillBar,"data-aia-pillbar":"",children:[we&&(0,H.jsx)("span",{className:ke.pillScroll,"data-aia-pill-scroll":"",children:(0,H.jsx)(Qe,{pills:o.pills??[],activePillIndex:0,activeSelected:o.activeSelected,onSelectPill:x??(()=>{}),rounded:!0,loading:o.isLoading})}),Te&&(0,H.jsx)("button",{type:"button",tabIndex:-1,className:ke.skip,"data-aia-skip":"",disabled:o.isLoading||o.skipDisabled,"aria-label":xe?`Skip ${xe}`:"Skip",onClick:y,children:"skip"})]}),ye&&(0,H.jsx)(Tt,{options:c,activeIndex:o.activeIndex,onSelect:a,onHighlight:s,listboxId:t,loading:o.isLoading,groupKey:w?`${w.type} ${w.text}`:"",optionsPosition:ue,showIcons:o.showOptionIcons,showImages:o.showOptionImages,showCounts:o.showOptionCounts}),Le&&o.dateView&&(0,H.jsx)(bt,{options:c,activeIndex:o.activeIndex,listboxId:t,view:o.dateView,selection:{selectedIso:o.selectedDateIso??null,selectedRange:o.selectedDateRange??null,rangeStart:o.dateRangeStart??null},onSelect:a,onHighlight:s,onPreviousMonth:Se??Dt,onNextMonth:Ie??Dt}),oe&&(0,H.jsx)("div",{className:ke.skeletonBars,"data-aia-skeleton-bars":"",children:sa.map(Z=>(0,H.jsx)("span",{className:ke.skeletonBar,style:{width:Z}},`bar-${Z}`))}),(0,H.jsx)(Ct,{products:$,listboxId:t,onSelect:F??la,onFocusChange:S,focusable:d,layout:ce}),(0,H.jsx)(vt,{isOptionHighlighted:ie,isInputEmpty:o.isInputEmpty})]}),(0,H.jsx)("button",{ref:ae,type:"button",tabIndex:-1,className:ke.scrollArrow,"data-aia-scroll-arrow":"","aria-label":ze.SCROLL_ARROW_LABEL,"aria-hidden":"true",children:(0,H.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,H.jsx)("path",{d:"M4 6.5 8 10.5l4-4"})})})]})}var Be=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 {
|
|
2012
2094
|
flex-shrink: 0;
|
|
2013
2095
|
width: 32px;
|
|
2014
2096
|
height: 32px;
|
|
@@ -2061,5 +2143,5 @@
|
|
|
2061
2143
|
);
|
|
2062
2144
|
cursor: default;
|
|
2063
2145
|
}
|
|
2064
|
-
`,document.head.appendChild(e)}var Lt={submitButton:"aia-submitButton-otz7H"};var Ze=require("react/jsx-runtime");function Ot({disabled:e,onClick:o}){return(0,Ze.jsx)("button",{type:"button","data-aia-submit":"",className:Lt.submitButton,disabled:e,onClick:t=>{t.stopPropagation(),o()},"aria-label":"Submit",children:(0,Ze.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,Ze.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var ze=require("@magicx-eng/ai-autocomplete-vanilla"),I=require("react");var dt=require("react");function Mt(e){let o=(0,dt.useRef)(e);o.current=e;let t=Object.keys(e??{}).sort().join("\0"),s=(0,dt.useRef)({key:"",overrides:void 0});if(s.current.key!==t){let n={};for(let i of Object.keys(e??{})){let r=(m,w,g)=>{let x=o.current?.[i];return x?x(m,w,g):[]};n[i]=r}s.current={key:t,overrides:e?n:void 0}}return{overrides:s.current.overrides,key:t}}var ct=require("react");function zt(e){let o=(0,ct.useRef)(e);o.current=e;let t=(0,ct.useRef)(null);t.current===null&&(t.current={fetch:(n,i)=>{let r=o.current;return r?r.fetch(n,i):Promise.reject(new Error("products config removed"))},transform:n=>o.current?.transform(n)??[],get limit(){return o.current?.limit}});let s=e!==void 0;return{config:s?t.current:void 0,enabled:s}}var pa={text:"",completedParams:[],identifiedParams:[],skippedParams:[],pendingSpan:null,suggestions:[],products:[],customFields:null,optionSearch:null,activeDropdownIndex:-1,newParamId:null,isLoading:!0,isReady:!1,error:null,segments:[],actionableSuggestions:[],filteredOptions:[],activeFormatType:"options",dateView:null,dateRangeStart:null,placeholderText:"",optionQuery:"",isSearchingOptions:!1,isDropdownOpen:!1,isActivePillSelected:!1,filterBase:0,filterInProgress:!1,pillTapped:!1,skipNextFetch:!1,lastRawQuery:"",isFocused:!1,editingParam:null,editingIdentified:null,editingAnchor:null,editingTail:null,caretOffset:null,inSelectionAnimation:!1,dateViewMonth:null,pendingRangeStart:null};function Xe({onSubmit:e,onResult:o,onError:t,optionOverrides:s,maskCompletedText:n,apiConfig:i,additionalContext:r,columns:m=2,dropdownTrigger:w,optionsPosition:g,closeDropdownOnBlur:x,showNonTappableOptions:h,showOptionIcons:C,showOptionImages:E,showOptionCounts:k,showSkipButton:K,showProducts:R,onFocus:T,onBlur:N,value:L,completedParams:F,onChange:G,onParamsChange:S,products:se,onProductSelect:le,source:Ce,setCursor:de}){let u=(0,I.useRef)(null),[Y,Pe]=(0,I.useState)(null),ce=(0,I.useRef)(e);ce.current=e;let Se=(0,I.useRef)(o);Se.current=o;let pe=(0,I.useRef)(t);pe.current=t;let Ie=(0,I.useRef)(G);Ie.current=G;let Z=(0,I.useRef)(S);Z.current=S;let he=(0,I.useRef)(T);he.current=T;let ue=(0,I.useRef)(N);ue.current=N;let me=(0,I.useRef)(de);me.current=de;let fe=(0,I.useRef)(le);fe.current=le;let H=zt(se),d=Mt(s);(0,I.useEffect)(()=>{if(typeof document>"u")return;let f=new ze.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:i,additionalContext:r,optionOverrides:d.overrides,maskCompletedText:n,columns:m,dropdownTrigger:w,optionsPosition:g,closeDropdownOnBlur:x,showNonTappableOptions:h,showProducts:R,source:Ce,value:L,completedParams:F,onSubmit:(...z)=>ce.current?.(...z),onResult:(...z)=>Se.current?.(...z),onError:(...z)=>pe.current?.(...z),onChange:(...z)=>Ie.current?.(...z),onParamsChange:(...z)=>Z.current?.(...z),onFocus:()=>he.current?.(),onBlur:()=>ue.current?.(),onProductSelect:z=>fe.current?.(z),setCursor:z=>me.current?.(z),products:H.config});u.current=f,Pe(f.getState());let V=f.subscribe(z=>Pe(z));return()=>{V(),f.destroy(),u.current===f&&(u.current=null)}},[]),(0,I.useEffect)(()=>{L!==void 0&&u.current?.setValue(L)},[L]),(0,I.useEffect)(()=>{F!==void 0&&u.current?.setCompletedParams(F)},[F]);let b=JSON.stringify(i??null),a;try{a=JSON.stringify(r??null)}catch{a="[unstringifiable]"}(0,I.useEffect)(()=>{u.current?.update({apiConfig:i,additionalContext:r,optionOverrides:d.overrides,dropdownTrigger:w,optionsPosition:g,closeDropdownOnBlur:x,showNonTappableOptions:h,showProducts:R})},[b,a,d.key,w,g,x,h,R]);let y=(0,I.useRef)(!1);(0,I.useEffect)(()=>{if(!y.current){y.current=!0;return}u.current?.update({products:H.config})},[H.enabled]);let v=(0,I.useRef)(null);v.current===null&&(v.current={handleTextChange:f=>u.current?.handleTextChange(f),handleKeyDown:f=>{let V="nativeEvent"in f?f.nativeEvent:f;u.current?.handleKeyDown(V)},setFocused:f=>u.current?.setFocused(f),startEditingParam:f=>u.current?.startEditingParam(f),exitEditMode:()=>u.current?.exitEditMode(),handleCaretAfterInput:f=>u.current?.handleCaretAfterInput(f),handleCaretMove:f=>u.current?.handleCaretMove(f),replaceEditingRange:f=>u.current?.replaceEditingRange(f)??!1,setActivePill:f=>u.current?.setActivePill(f),skipActivePill:()=>u.current?.skipActivePill(),removeLastParam:()=>u.current?.removeLastParam(),clearNewParamId:()=>u.current?.clearNewParamId(),reset:()=>u.current?.reset(),selectOption:f=>u.current?.selectOption(f),selectProduct:f=>u.current?.selectProduct(f),setActiveDropdownIndex:f=>u.current?.setActiveDropdownIndex(f),showPreviousMonth:()=>u.current?.showPreviousMonth(),showNextMonth:()=>u.current?.showNextMonth(),handleFocus:()=>u.current?.setFocused(!0),handleBlur:()=>u.current?.setFocused(!1)});let p=v.current,$=(0,I.useCallback)(f=>{let V=f.target.value,tt=V.length>0&&!f.nativeEvent?.isComposing&&V[0]!==V[0].toUpperCase()?V[0].toUpperCase()+V.slice(1):V;u.current?.handleTextChange(tt)},[]),X=(0,I.useCallback)(f=>{u.current?.handleKeyDown(f.nativeEvent)},[]),ge=u.current,c=Y??pa,be=L!==void 0?L:c.text,Ee=F!==void 0?F:c.completedParams,ve=c.actionableSuggestions,De=ve[0],we=ge?.listboxId??"",He=c.activeDropdownIndex>=0&&ge?`${we}-option-${c.activeDropdownIndex}`:void 0,J=c.editingParam,W=c.editingIdentified,Le=J?{type:J.suggestionType,text:J.suggestionPlaceholder,required:!0,options:J.options}:W?{type:W.type,text:(0,ze.identifiedParamLabel)(W.type),required:!0,options:[]}:null,Be=Le??De,et=Le?[Le]:ve,Fe=(0,ze.dateSelectionFor)(c),We=!ge||c.isLoading&&!c.editingParam&&!c.inSelectionAnimation||c.isSearchingOptions;return{completedParams:Ee,skippedParams:c.skippedParams,identifiedParams:c.identifiedParams,suggestionPills:ve,setActivePill:p.setActivePill,skipActivePill:p.skipActivePill,removeLastParam:p.removeLastParam,segments:c.segments,newParamId:c.newParamId,clearNewParamId:p.clearNewParamId,suggestions:c.suggestions,activeIndex:c.activeDropdownIndex,isReady:c.isReady,isLoading:We,isFocused:c.isFocused,isDropdownOpen:c.isDropdownOpen,isActivePillSelected:c.isActivePillSelected,placeholderText:c.placeholderText,listboxId:we,error:c.error,products:c.products,customFields:c.customFields,selectProduct:p.selectProduct,handleTextChange:p.handleTextChange,handleKeyDown:p.handleKeyDown,setFocused:p.setFocused,editingParam:J,editingIdentified:W,editingAnchor:c.editingAnchor,caretOffset:c.caretOffset,startEditingParam:p.startEditingParam,exitEditMode:p.exitEditMode,handleCaretAfterInput:p.handleCaretAfterInput,handleCaretMove:p.handleCaretMove,replaceEditingRange:p.replaceEditingRange,inputProps:{value:be,placeholder:c.placeholderText||void 0,onChange:$,onKeyDown:X,onFocus:p.handleFocus,onBlur:p.handleBlur,role:"combobox","aria-expanded":c.isDropdownOpen,"aria-activedescendant":He,"aria-autocomplete":"list","aria-controls":we},reset:p.reset,dropdownProps:{suggestions:Be?[{...Be,options:c.filteredOptions}]:[],activeIndex:c.activeDropdownIndex,onSelect:p.selectOption,onHighlight:p.setActiveDropdownIndex,isOpen:c.isDropdownOpen,id:we,pills:et,activeSelected:c.isActivePillSelected,onPillClick:p.setActivePill,onSkip:p.skipActivePill,showSkipButton:(K??!0)&&!J&&!W,showOptionIcons:C??!0,showOptionImages:E??!0,showOptionCounts:k??!0,skipDisabled:c.inSelectionAnimation,isLoading:We,isInputEmpty:be.trim().length===0,products:c.products,onProductSelect:p.selectProduct,onProductFocusChange:p.setFocused,formatType:c.activeFormatType,dateView:c.dateView,selectedDateIso:Fe.selectedIso,selectedDateRange:Fe.selectedRange,dateRangeStart:Fe.rangeStart,onPreviousMonth:p.showPreviousMonth,onNextMonth:p.showNextMonth,optionsPosition:g??"below"}}}var Q=require("@magicx-eng/ai-autocomplete-vanilla"),P=require("react"),Je;function ha(){if(Je!==void 0)return Je;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Je=e.contentEditable==="plaintext-only",Je}function Nt(e){let{segments:o,showChipIcons:t=!0,showChipImages:s=!0,newParamId:n,editingParam:i,editingIdentified:r,editingAnchor:m,caretOffset:w,placeholderText:g,isFocused:x,isDropdownOpen:h,listboxId:C,activeDescendantId:E,autoFocus:k,handleTextChange:K,handleKeyDown:R,handleCaretAfterInput:T,handleCaretMove:N,startEditingParam:L,replaceEditingRange:F,setFocused:G}=e,S=(0,P.useRef)(null),se=(0,P.useRef)(!1),le=(0,P.useRef)(""),Ce=(0,P.useRef)(""),de=(0,P.useRef)(null),u=(0,P.useRef)(0);de.current=w,(0,P.useEffect)(()=>{if(!k)return;let d=S.current;if(!d)return;document.activeElement===d?G(!0):d.focus();let b=d.ownerDocument??document,a=b.getSelection(),y=a&&a.rangeCount>0&&d.contains(a.anchorNode);if(a&&!y){let v=b.createRange();v.selectNodeContents(d),v.collapse(!0),a.removeAllRanges(),a.addRange(v)}},[k,G]),(0,P.useEffect)(()=>{let d=S.current;if(!d)return;let b=d.ownerDocument??document,a=()=>{let y=b.getSelection();if(!y||y.rangeCount===0||!y.anchorNode||!d.contains(y.anchorNode))return;let v=y.anchorNode,p=v.nodeType===Node.ELEMENT_NODE?v:v.parentElement,X=(y.isCollapsed?p?.closest("strong[data-param-id]"):null)?.dataset.paramId??null,ge=i?.id??r?.id??null;if(X&&X!==ge){L(X);return}performance.now()-u.current<50||N((0,Q.getCursorOffset)(d))};return b.addEventListener("selectionchange",a),()=>b.removeEventListener("selectionchange",a)},[i,r,L,N]),(0,P.useLayoutEffect)(()=>{let d=S.current;d&&(0,Q.renderEditableContent)({input:d,segments:o,newParamId:n,editingParamId:i?.id??null,placeholderText:g??"",isFocused:x,showChipIcons:t,showChipImages:s})},[o,n,i,g,x,t,s]),(0,P.useLayoutEffect)(()=>{let d=le.current,b=n??"";if(le.current=b,!b||b===d)return;let a=S.current;if(!a)return;a.focus();let y=de.current??(0,Q.plainTextLength)(a);(0,Q.setCursorOffset)(a,y)},[n]),(0,P.useLayoutEffect)(()=>{let d=Ce.current,b=i?.id??"";if(Ce.current=b,!b||b===d||m==null)return;let a=S.current;a&&(0,Q.setCursorOffset)(a,m)},[i,m]);let Y=(0,P.useCallback)(()=>{if(se.current)return;let d=S.current;if(!d)return;let b=(0,Q.extractPlainText)(d),y=b.length>0&&b[0]!==b[0].toUpperCase()?b[0].toUpperCase()+b.slice(1):b;K(y)},[K]),Pe=(0,P.useCallback)(()=>{u.current=performance.now(),Y();let d=S.current;d&&T((0,Q.getCursorOffset)(d))},[Y,T]);(0,P.useEffect)(()=>{let d=S.current;if(!d)return;let b=a=>{let y=a,v=y.inputType;if(v==="insertParagraph"||v==="insertLineBreak"||v==="insertFromDrop"){a.preventDefault();return}if(v.startsWith("insert")||v.startsWith("delete")){let p=v.startsWith("delete")?"":y.data??"";F(p)&&a.preventDefault()}};return d.addEventListener("beforeinput",b),()=>d.removeEventListener("beforeinput",b)},[F]);let ce=(0,P.useCallback)(()=>{se.current=!0},[]),Se=(0,P.useCallback)(()=>{se.current=!1,Y()},[Y]),pe=(0,P.useCallback)(d=>{d.preventDefault();let b=S.current;if(!b)return;let a=(d.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!a)return;let y=b.ownerDocument??document,v=y.getSelection();if(!v||v.rangeCount===0)return;let p=v.getRangeAt(0);if(!b.contains(p.startContainer))return;p.deleteContents();let $=y.createTextNode(a);p.insertNode($),p.setStartAfter($),p.collapse(!0),v.removeAllRanges(),v.addRange(p),Y()},[Y]),Ie=(0,P.useCallback)(d=>R(d),[R]),Z=(0,P.useCallback)(()=>G(!0),[G]),he=(0,P.useCallback)(()=>G(!1),[G]),ue=(0,P.useCallback)(()=>S.current?.focus(),[]),me=(0,P.useCallback)(()=>S.current?.blur(),[]),fe=(0,P.useCallback)(()=>{let d=S.current;return d?(0,Q.extractPlainText)(d):""},[]),H=ha()?"plaintext-only":"true";return{inputRef:S,editorProps:{ref:S,contentEditable:H,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":C,"aria-expanded":h,"aria-activedescendant":E,spellCheck:!0,enterKeyHint:"send",onInput:Pe,onKeyDown:Ie,onCompositionStart:ce,onCompositionEnd:Se,onPaste:pe,onFocus:Z,onBlur:he},getPlainText:fe,focus:ue,blur:me}}var ae=require("react/jsx-runtime");function ua(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var Ht=(0,M.forwardRef)(function({onSubmit:o,onResult:t,onError:s,optionOverrides:n,maskCompletedText:i,className:r,apiConfig:m,additionalContext:w,columns:g,pillPlacement:x="dropdown",mode:h="auto",optionsPosition:C="below",animations:E=!0,dropdownTrigger:k,closeDropdownOnBlur:K,showNonTappableOptions:R,showOptionIcons:T=!0,showChipIcons:N=!0,showChipImages:L=!0,showOptionImages:F=!0,showOptionCounts:G=!0,showSkipButton:S,showProducts:se,productsLayout:le,autoFocus:Ce=!0,onFocus:de,onBlur:u,value:Y,completedParams:Pe,onChange:ce,onParamsChange:Se,products:pe,onProductSelect:Ie,submitButton:Z},he){let ue=(0,M.useRef)(null),me=(0,M.useRef)(null),fe=(0,M.useRef)(()=>{}),H=(0,M.useRef)(null),d=(0,M.useRef)(null);(0,M.useEffect)(()=>{let A=ue.current;if(A)return H.current?H.current.setMode(h):H.current=new Ne.ModeController(A,h),()=>{H.current?.destroy(),H.current=null}},[h]);let b=(0,M.useCallback)(A=>{let Te=d.current?.current;Te&&(Te.focus(),(0,Ne.setCursorOffset)(Te,A))},[]),{completedParams:a,skippedParams:y,identifiedParams:v,isReady:p,customFields:$,suggestionPills:X,setActivePill:ge,skipActivePill:c,segments:be,newParamId:Ee,clearNewParamId:ve,placeholderText:De,isFocused:we,isDropdownOpen:He,isActivePillSelected:J,isLoading:W,activeIndex:Le,listboxId:Be,handleTextChange:et,handleKeyDown:Fe,setFocused:We,editingParam:f,editingIdentified:V,editingAnchor:z,caretOffset:tt,startEditingParam:Bt,handleCaretAfterInput:Ft,handleCaretMove:Kt,replaceEditingRange:Gt,dropdownProps:Wt,reset:_e}=Xe({onSubmit:A=>fe.current(A),onResult:t,onError:s,optionOverrides:n,maskCompletedText:i,apiConfig:m,additionalContext:w,columns:g,dropdownTrigger:k,optionsPosition:C,closeDropdownOnBlur:K,showNonTappableOptions:R,showOptionIcons:T,showOptionImages:F,showOptionCounts:G,showSkipButton:S,showProducts:se,onFocus:de,onBlur:u,value:Y,completedParams:Pe,onChange:ce,onParamsChange:Se,products:pe,onProductSelect:Ie,source:"full-sdk",setCursor:b});(0,M.useEffect)(()=>{if(!Ee)return;let A=window.setTimeout(()=>ve(),650);return()=>window.clearTimeout(A)},[Ee,ve]);let _t=Le>=0?`${Be}-option-${Le}`:void 0,{inputRef:at,editorProps:qt,focus:qe,blur:pt,getPlainText:ht}=Nt({segments:be,newParamId:Ee,editingParam:f,editingIdentified:V,editingAnchor:z,caretOffset:tt,placeholderText:De,isFocused:we,showChipIcons:N,showChipImages:L,isDropdownOpen:He,listboxId:Be,activeDescendantId:_t,autoFocus:Ce,handleTextChange:et,handleKeyDown:Fe,handleCaretAfterInput:Ft,handleCaretMove:Kt,startEditingParam:Bt,replaceEditingRange:Gt,setFocused:We});d.current=at,(0,M.useLayoutEffect)(()=>{let A=me.current,Te=at.current;if(!A||!Te)return;let ut=()=>{let ft=A.firstElementChild;if(!ft)return;let Yt=ft.getBoundingClientRect(),$t=Te.getBoundingClientRect();Yt.top>=$t.bottom-2?A.setAttribute("data-aia-pill-wrapped",""):A.removeAttribute("data-aia-pill-wrapped")};ut();let mt=new ResizeObserver(ut);return mt.observe(Te),()=>mt.disconnect()},[be,X.length,W,at]),(0,M.useImperativeHandle)(he,()=>({focus:qe,blur:pt,reset:_e,setMode:A=>H.current?.setMode(A),skipActivePill:c}),[qe,pt,_e,c]);let Ue=!!be.length||a.length>0,it=(0,M.useCallback)(()=>{if(!Ue)return;let A=ht();o((0,Ne.buildSubmitResult)(A,a,y,{identifiedParams:v,isReady:p,customFields:$})),_e()},[Ue,a,y,v,p,$,o,_e,ht]);fe.current=it;let Ut=(0,M.useCallback)(A=>{A.target?.closest("[data-aia-pill]")||qe()},[qe]),jt=x==="inline",Qt=x==="dropdown";return(0,ae.jsxs)("div",{ref:ue,className:`magicx-aia ${Re.container} ${r??""}`,"data-pill-placement":x,"data-options-position":C,"data-animations":E?"on":"off","data-mode":ua(h),children:[(0,ae.jsx)(Ve,{...Wt,showPills:Qt,productsLayout:le}),(0,ae.jsxs)("div",{className:Re.inputWrapper,"data-aia-input-wrapper":"",onClick:Ut,children:[(0,ae.jsxs)("div",{className:Re.editorArea,"data-aia-editor":"",children:[(0,ae.jsx)("div",{...qt,className:Re.input,"data-aia-input":""}),jt&&(W||X.length>0)&&(0,ae.jsx)("span",{ref:me,className:Re.pillListContainer,"data-aia-pill-list-container":"",children:(0,ae.jsx)(Qe,{pills:X,activePillIndex:0,activeSelected:J,onSelectPill:ge,loading:W})})]}),Z===null?null:Z===void 0?(0,ae.jsx)(Ot,{disabled:!Ue,onClick:it}):(0,ae.jsx)("span",{"data-aia-submit":"","data-aia-submit-slot":"",className:Re.submitSlot,onClick:A=>{Ue&&(A.stopPropagation(),it())},children:Z})]})]})});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});
|
|
2146
|
+
`,document.head.appendChild(e)}var Ot={submitButton:"aia-submitButton-otz7H"};var Ze=require("react/jsx-runtime");function Lt({disabled:e,onClick:i}){return(0,Ze.jsx)("button",{type:"button","data-aia-submit":"",className:Ot.submitButton,disabled:e,onClick:a=>{a.stopPropagation(),i()},"aria-label":"Submit",children:(0,Ze.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,Ze.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var Ne=require("@magicx-eng/ai-autocomplete-vanilla"),I=require("react");var dt=require("react");function Mt(e){let i=(0,dt.useRef)(e);i.current=e;let a=Object.keys(e??{}).sort().join("\0"),s=(0,dt.useRef)({key:"",overrides:void 0});if(s.current.key!==a){let n={};for(let t of Object.keys(e??{})){let r=(m,x,v)=>{let y=i.current?.[t];return y?y(m,x,v):[]};n[t]=r}s.current={key:a,overrides:e?n:void 0}}return{overrides:s.current.overrides,key:a}}var ct=require("react");function zt(e){let i=(0,ct.useRef)(e);i.current=e;let a=(0,ct.useRef)(null);a.current===null&&(a.current={fetch:(n,t)=>{let r=i.current;return r?r.fetch(n,t):Promise.reject(new Error("products config removed"))},transform:n=>i.current?.transform(n)??[],get limit(){return i.current?.limit}});let s=e!==void 0;return{config:s?a.current:void 0,enabled:s}}var pa={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 Xe({onSubmit:e,onResult:i,onError:a,optionOverrides:s,maskCompletedText:n,apiConfig:t,additionalContext:r,columns:m=2,dropdownTrigger:x,optionsPosition:v,closeDropdownOnBlur:y,showNonTappableOptions:h,showOptionIcons:C,showOptionImages:T,showOptionCounts:k,showSkipButton:_,showProducts:B,onFocus:E,onBlur:D,value:A,completedParams:z,onChange:F,onParamsChange:S,products:ce,onProductSelect:pe,source:Pe,setCursor:he}){let u=(0,I.useRef)(null),[Y,Se]=(0,I.useState)(null),Ie=(0,I.useRef)(e);Ie.current=e;let ue=(0,I.useRef)(i);ue.current=i;let Ee=(0,I.useRef)(a);Ee.current=a;let me=(0,I.useRef)(F);me.current=F;let te=(0,I.useRef)(S);te.current=S;let fe=(0,I.useRef)(E);fe.current=E;let ae=(0,I.useRef)(D);ae.current=D;let ge=(0,I.useRef)(he);ge.current=he;let be=(0,I.useRef)(pe);be.current=pe;let G=zt(ce),d=Mt(s);(0,I.useEffect)(()=>{if(typeof document>"u")return;let b=new Ne.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:t,additionalContext:r,optionOverrides:d.overrides,maskCompletedText:n,columns:m,dropdownTrigger:x,optionsPosition:v,closeDropdownOnBlur:y,showNonTappableOptions:h,showProducts:B,source:Pe,value:A,completedParams:z,onSubmit:(...N)=>Ie.current?.(...N),onResult:(...N)=>ue.current?.(...N),onError:(...N)=>Ee.current?.(...N),onChange:(...N)=>me.current?.(...N),onParamsChange:(...N)=>te.current?.(...N),onFocus:()=>fe.current?.(),onBlur:()=>ae.current?.(),onProductSelect:N=>be.current?.(N),setCursor:N=>ge.current?.(N),products:G.config});u.current=b,Se(b.getState());let V=b.subscribe(N=>Se(N));return()=>{V(),b.destroy(),u.current===b&&(u.current=null)}},[]),(0,I.useEffect)(()=>{A!==void 0&&u.current?.setValue(A)},[A]),(0,I.useEffect)(()=>{z!==void 0&&u.current?.setCompletedParams(z)},[z]);let f=JSON.stringify(t??null),g;try{g=JSON.stringify(r??null)}catch{g="[unstringifiable]"}(0,I.useEffect)(()=>{u.current?.update({apiConfig:t,additionalContext:r,optionOverrides:d.overrides,dropdownTrigger:x,optionsPosition:v,closeDropdownOnBlur:y,showNonTappableOptions:h,showProducts:B})},[f,g,d.key,x,v,y,h,B]);let o=(0,I.useRef)(!1);(0,I.useEffect)(()=>{if(!o.current){o.current=!0;return}u.current?.update({products:G.config})},[G.enabled]);let w=(0,I.useRef)(null);w.current===null&&(w.current={handleTextChange:b=>u.current?.handleTextChange(b),handleKeyDown:b=>{let V="nativeEvent"in b?b.nativeEvent:b;u.current?.handleKeyDown(V)},setFocused:b=>u.current?.setFocused(b),startEditingParam:b=>u.current?.startEditingParam(b),exitEditMode:()=>u.current?.exitEditMode(),handleCaretAfterInput:b=>u.current?.handleCaretAfterInput(b),handleCaretMove:b=>u.current?.handleCaretMove(b),replaceEditingRange:b=>u.current?.replaceEditingRange(b)??!1,setActivePill:b=>u.current?.setActivePill(b),skipActivePill:()=>u.current?.skipActivePill(),removeLastParam:()=>u.current?.removeLastParam(),clearNewParamId:()=>u.current?.clearNewParamId(),reset:()=>u.current?.reset(),selectOption:b=>u.current?.selectOption(b),selectProduct:b=>u.current?.selectProduct(b),setActiveDropdownIndex:b=>u.current?.setActiveDropdownIndex(b),showPreviousMonth:()=>u.current?.showPreviousMonth(),showNextMonth:()=>u.current?.showNextMonth(),handleFocus:()=>u.current?.setFocused(!0),handleBlur:()=>u.current?.setFocused(!1)});let c=w.current,ie=(0,I.useCallback)(b=>{let V=b.target.value,tt=V.length>0&&!b.nativeEvent?.isComposing&&V[0]!==V[0].toUpperCase()?V[0].toUpperCase()+V.slice(1):V;u.current?.handleTextChange(tt)},[]),q=(0,I.useCallback)(b=>{u.current?.handleKeyDown(b.nativeEvent)},[]),ve=u.current,p=Y??pa,we=A!==void 0?A:p.text,Te=z!==void 0?z:p.completedParams,xe=p.actionableSuggestions,Oe=xe[0],ye=ve?.listboxId??"",Le=p.activeDropdownIndex>=0&&ve?`${ye}-option-${p.activeDropdownIndex}`:void 0,oe=p.editingParam,$=p.editingIdentified,Z=oe?{type:oe.suggestionType,text:oe.suggestionPlaceholder,required:!0,options:oe.options}:$?{type:$.type,text:(0,Ne.identifiedParamLabel)($.type),required:!0,options:[]}:null,He=p.dropdownSuggestion??Z??Oe,et=Z?[Z]:xe,Fe=(0,Ne.dateSelectionFor)(p),We=!ve||p.dropdownLoading;return{completedParams:Te,skippedParams:p.skippedParams,identifiedParams:p.identifiedParams,suggestionPills:xe,setActivePill:c.setActivePill,skipActivePill:c.skipActivePill,removeLastParam:c.removeLastParam,segments:p.segments,newParamId:p.newParamId,clearNewParamId:c.clearNewParamId,suggestions:p.suggestions,activeIndex:p.activeDropdownIndex,isReady:p.isReady,isLoading:We,isFocused:p.isFocused,isDropdownOpen:p.isDropdownOpen,isActivePillSelected:p.isActivePillSelected,placeholderText:p.placeholderText,listboxId:ye,error:p.error,products:p.products,customFields:p.customFields,selectProduct:c.selectProduct,handleTextChange:c.handleTextChange,handleKeyDown:c.handleKeyDown,setFocused:c.setFocused,editingParam:oe,editingIdentified:$,editingAnchor:p.editingAnchor,caretOffset:p.caretOffset,startEditingParam:c.startEditingParam,exitEditMode:c.exitEditMode,handleCaretAfterInput:c.handleCaretAfterInput,handleCaretMove:c.handleCaretMove,replaceEditingRange:c.replaceEditingRange,inputProps:{value:we,placeholder:p.placeholderText||void 0,onChange:ie,onKeyDown:q,onFocus:c.handleFocus,onBlur:c.handleBlur,role:"combobox","aria-expanded":p.isDropdownOpen,"aria-activedescendant":Le,"aria-autocomplete":"list","aria-controls":ye},reset:c.reset,dropdownProps:{suggestions:He?[{...He,options:p.dropdownOptions}]:[],activeIndex:p.activeDropdownIndex,onSelect:c.selectOption,onHighlight:c.setActiveDropdownIndex,isOpen:p.isDropdownOpen,id:ye,pills:et,activeSelected:p.isActivePillSelected,onPillClick:c.setActivePill,onSkip:c.skipActivePill,showSkipButton:(_??!0)&&!oe&&!$,showOptionIcons:C??!0,showOptionImages:T??!0,showOptionCounts:k??!0,skipDisabled:p.inSelectionAnimation,isLoading:We,skeletonExiting:p.skeletonExiting,isInputEmpty:we.trim().length===0,products:p.products,onProductSelect:c.selectProduct,onProductFocusChange:c.setFocused,formatType:p.activeFormatType,dateView:p.dateView,selectedDateIso:Fe.selectedIso,selectedDateRange:Fe.selectedRange,dateRangeStart:Fe.rangeStart,onPreviousMonth:c.showPreviousMonth,onNextMonth:c.showNextMonth,optionsPosition:v??"below"}}}var Q=require("@magicx-eng/ai-autocomplete-vanilla"),P=require("react"),Je;function ha(){if(Je!==void 0)return Je;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Je=e.contentEditable==="plaintext-only",Je}function Nt(e){let{segments:i,showChipIcons:a=!0,showChipImages:s=!0,newParamId:n,editingParam:t,editingIdentified:r,editingAnchor:m,caretOffset:x,placeholderText:v,isFocused:y,isDropdownOpen:h,listboxId:C,activeDescendantId:T,autoFocus:k,handleTextChange:_,handleKeyDown:B,handleCaretAfterInput:E,handleCaretMove:D,startEditingParam:A,replaceEditingRange:z,setFocused:F}=e,S=(0,P.useRef)(null),ce=(0,P.useRef)(!1),pe=(0,P.useRef)(""),Pe=(0,P.useRef)(""),he=(0,P.useRef)(null),u=(0,P.useRef)(0);he.current=x,(0,P.useEffect)(()=>{if(!k)return;let d=S.current;if(!d)return;document.activeElement===d?F(!0):d.focus();let f=d.ownerDocument??document,g=f.getSelection(),o=g&&g.rangeCount>0&&d.contains(g.anchorNode);if(g&&!o){let w=f.createRange();w.selectNodeContents(d),w.collapse(!0),g.removeAllRanges(),g.addRange(w)}},[k,F]),(0,P.useEffect)(()=>{let d=S.current;if(!d)return;let f=d.ownerDocument??document,g=()=>{let o=f.getSelection();if(!o||o.rangeCount===0||!o.anchorNode||!d.contains(o.anchorNode))return;let w=o.anchorNode,c=w.nodeType===Node.ELEMENT_NODE?w:w.parentElement,q=(o.isCollapsed?c?.closest("strong[data-param-id]"):null)?.dataset.paramId??null,ve=t?.id??r?.id??null;if(q&&q!==ve){A(q);return}performance.now()-u.current<50||D((0,Q.getCursorOffset)(d))};return f.addEventListener("selectionchange",g),()=>f.removeEventListener("selectionchange",g)},[t,r,A,D]),(0,P.useLayoutEffect)(()=>{let d=S.current;d&&(0,Q.renderEditableContent)({input:d,segments:i,newParamId:n,editingParamId:t?.id??null,placeholderText:v??"",isFocused:y,showChipIcons:a,showChipImages:s})},[i,n,t,v,y,a,s]),(0,P.useLayoutEffect)(()=>{let d=pe.current,f=n??"";if(pe.current=f,!f||f===d)return;let g=S.current;if(!g)return;g.focus();let o=he.current??(0,Q.plainTextLength)(g);(0,Q.setCursorOffset)(g,o)},[n]),(0,P.useLayoutEffect)(()=>{let d=Pe.current,f=t?.id??"";if(Pe.current=f,!f||f===d||m==null)return;let g=S.current;g&&(0,Q.setCursorOffset)(g,m)},[t,m]);let Y=(0,P.useCallback)(()=>{if(ce.current)return;let d=S.current;if(!d)return;let f=(0,Q.extractPlainText)(d),o=f.length>0&&f[0]!==f[0].toUpperCase()?f[0].toUpperCase()+f.slice(1):f;_(o)},[_]),Se=(0,P.useCallback)(()=>{u.current=performance.now(),Y();let d=S.current;d&&E((0,Q.getCursorOffset)(d))},[Y,E]);(0,P.useEffect)(()=>{let d=S.current;if(!d)return;let f=g=>{let o=g,w=o.inputType;if(w==="insertParagraph"||w==="insertLineBreak"||w==="insertFromDrop"){g.preventDefault();return}if(w.startsWith("insert")||w.startsWith("delete")){let c=w.startsWith("delete")?"":o.data??"";z(c)&&g.preventDefault()}};return d.addEventListener("beforeinput",f),()=>d.removeEventListener("beforeinput",f)},[z]);let Ie=(0,P.useCallback)(()=>{ce.current=!0},[]),ue=(0,P.useCallback)(()=>{ce.current=!1,Y()},[Y]),Ee=(0,P.useCallback)(d=>{d.preventDefault();let f=S.current;if(!f)return;let g=(d.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!g)return;let o=f.ownerDocument??document,w=o.getSelection();if(!w||w.rangeCount===0)return;let c=w.getRangeAt(0);if(!f.contains(c.startContainer))return;c.deleteContents();let ie=o.createTextNode(g);c.insertNode(ie),c.setStartAfter(ie),c.collapse(!0),w.removeAllRanges(),w.addRange(c),Y()},[Y]),me=(0,P.useCallback)(d=>B(d),[B]),te=(0,P.useCallback)(()=>F(!0),[F]),fe=(0,P.useCallback)(()=>F(!1),[F]),ae=(0,P.useCallback)(()=>S.current?.focus(),[]),ge=(0,P.useCallback)(()=>S.current?.blur(),[]),be=(0,P.useCallback)(()=>{let d=S.current;return d?(0,Q.extractPlainText)(d):""},[]),G=ha()?"plaintext-only":"true";return{inputRef:S,editorProps:{ref:S,contentEditable:G,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":C,"aria-expanded":h,"aria-activedescendant":T,spellCheck:!0,enterKeyHint:"send",onInput:Se,onKeyDown:me,onCompositionStart:Ie,onCompositionEnd:ue,onPaste:Ee,onFocus:te,onBlur:fe},getPlainText:be,focus:ae,blur:ge}}var ee=require("react/jsx-runtime");function ua(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var Bt=(0,M.forwardRef)(function({onSubmit:i,onResult:a,onError:s,optionOverrides:n,maskCompletedText:t,className:r,apiConfig:m,additionalContext:x,columns:v,pillPlacement:y="dropdown",mode:h="auto",optionsPosition:C="below",animations:T=!0,dropdownTrigger:k,closeDropdownOnBlur:_,showNonTappableOptions:B,showOptionIcons:E=!0,showChipIcons:D=!0,showChipImages:A=!0,showOptionImages:z=!0,showOptionCounts:F=!0,showSkipButton:S,showProducts:ce,productsLayout:pe,autoFocus:Pe=!0,onFocus:he,onBlur:u,value:Y,completedParams:Se,onChange:Ie,onParamsChange:ue,products:Ee,onProductSelect:me,submitButton:te},fe){let ae=(0,M.useRef)(null),ge=(0,M.useRef)(null),be=(0,M.useRef)(()=>{}),G=(0,M.useRef)(null),d=(0,M.useRef)(null);(0,M.useEffect)(()=>{let R=ae.current;if(R)return G.current?G.current.setMode(h):G.current=new Be.ModeController(R,h),()=>{G.current?.destroy(),G.current=null}},[h]);let f=(0,M.useCallback)(R=>{let Ae=d.current?.current;Ae&&(Ae.focus(),(0,Be.setCursorOffset)(Ae,R))},[]),{completedParams:g,skippedParams:o,identifiedParams:w,isReady:c,customFields:ie,suggestionPills:q,setActivePill:ve,skipActivePill:p,segments:we,newParamId:Te,clearNewParamId:xe,placeholderText:Oe,isFocused:ye,isDropdownOpen:Le,isActivePillSelected:oe,isLoading:$,activeIndex:Z,listboxId:He,handleTextChange:et,handleKeyDown:Fe,setFocused:We,editingParam:b,editingIdentified:V,editingAnchor:N,caretOffset:tt,startEditingParam:Ht,handleCaretAfterInput:Ft,handleCaretMove:Kt,replaceEditingRange:Gt,dropdownProps:Wt,reset:_e}=Xe({onSubmit:R=>be.current(R),onResult:a,onError:s,optionOverrides:n,maskCompletedText:t,apiConfig:m,additionalContext:x,columns:v,dropdownTrigger:k,optionsPosition:C,closeDropdownOnBlur:_,showNonTappableOptions:B,showOptionIcons:E,showOptionImages:z,showOptionCounts:F,showSkipButton:S,showProducts:ce,onFocus:he,onBlur:u,value:Y,completedParams:Se,onChange:Ie,onParamsChange:ue,products:Ee,onProductSelect:me,source:"full-sdk",setCursor:f});(0,M.useEffect)(()=>{if(!Te)return;let R=window.setTimeout(()=>xe(),650);return()=>window.clearTimeout(R)},[Te,xe]);let _t=Z>=0?`${He}-option-${Z}`:void 0,{inputRef:at,editorProps:qt,focus:qe,blur:pt,getPlainText:ht}=Nt({segments:we,newParamId:Te,editingParam:b,editingIdentified:V,editingAnchor:N,caretOffset:tt,placeholderText:Oe,isFocused:ye,showChipIcons:D,showChipImages:A,isDropdownOpen:Le,listboxId:He,activeDescendantId:_t,autoFocus:Pe,handleTextChange:et,handleKeyDown:Fe,handleCaretAfterInput:Ft,handleCaretMove:Kt,startEditingParam:Ht,replaceEditingRange:Gt,setFocused:We});d.current=at,(0,M.useLayoutEffect)(()=>{let R=ge.current,Ae=at.current;if(!R||!Ae)return;let ut=()=>{let ft=R.firstElementChild;if(!ft)return;let Yt=ft.getBoundingClientRect(),$t=Ae.getBoundingClientRect();Yt.top>=$t.bottom-2?R.setAttribute("data-aia-pill-wrapped",""):R.removeAttribute("data-aia-pill-wrapped")};ut();let mt=new ResizeObserver(ut);return mt.observe(Ae),()=>mt.disconnect()},[we,q.length,$,at]),(0,M.useImperativeHandle)(fe,()=>({focus:qe,blur:pt,reset:_e,setMode:R=>G.current?.setMode(R),skipActivePill:p}),[qe,pt,_e,p]);let Ue=!!we.length||g.length>0,it=(0,M.useCallback)(()=>{if(!Ue)return;let R=ht();i((0,Be.buildSubmitResult)(R,g,o,{identifiedParams:w,isReady:c,customFields:ie})),_e()},[Ue,g,o,w,c,ie,i,_e,ht]);be.current=it;let Ut=(0,M.useCallback)(R=>{R.target?.closest("[data-aia-pill]")||qe()},[qe]),jt=y==="inline",Qt=y==="dropdown";return(0,ee.jsxs)("div",{ref:ae,className:`magicx-aia ${De.container} ${r??""}`,"data-pill-placement":y,"data-options-position":C,"data-animations":T?"on":"off","data-mode":ua(h),children:[(0,ee.jsx)(Ve,{...Wt,showPills:Qt,productsLayout:pe}),(0,ee.jsxs)("div",{className:De.inputWrapper,"data-aia-input-wrapper":"",onClick:Ut,children:[(0,ee.jsxs)("div",{className:De.editorArea,"data-aia-editor":"",children:[(0,ee.jsx)("div",{...qt,className:De.input,"data-aia-input":""}),jt&&($||q.length>0)&&(0,ee.jsx)("span",{ref:ge,className:De.pillListContainer,"data-aia-pill-list-container":"",children:(0,ee.jsx)(Qe,{pills:q,activePillIndex:0,activeSelected:oe,onSelectPill:ve,loading:$})})]}),te===null?null:te===void 0?(0,ee.jsx)(Lt,{disabled:!Ue,onClick:it}):(0,ee.jsx)("span",{"data-aia-submit":"","data-aia-submit-slot":"",className:De.submitSlot,onClick:R=>{Ue&&(R.stopPropagation(),it())},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});
|
|
2065
2147
|
//# sourceMappingURL=index.js.map
|