@magicx-eng/ai-autocomplete-react 0.26.0 → 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 +106 -17
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +106 -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
|
|
|
@@ -877,6 +879,13 @@
|
|
|
877
879
|
opacity: 1;
|
|
878
880
|
}
|
|
879
881
|
|
|
882
|
+
/* Visible but not yet armed: the arrow is disabled for the length of its
|
|
883
|
+
fade-in (scrollArrow.ts \u2014 a native button appearing clickable cancels an
|
|
884
|
+
iOS tap in flight). No pointer cursor over a button that takes no click. */
|
|
885
|
+
.aia-scrollArrow-uUzV0:disabled {
|
|
886
|
+
cursor: default;
|
|
887
|
+
}
|
|
888
|
+
|
|
880
889
|
/* The chevron's size and paint by class \u2014 a page's \`svg { \u2026 }\` type rule
|
|
881
890
|
would otherwise beat its presentation attributes. */
|
|
882
891
|
.aia-scrollArrow-uUzV0 svg {
|
|
@@ -986,6 +995,24 @@
|
|
|
986
995
|
flex-direction: column;
|
|
987
996
|
gap: 20px;
|
|
988
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
|
+
}
|
|
989
1016
|
}
|
|
990
1017
|
|
|
991
1018
|
.aia-skeletonBar-O3xIx {
|
|
@@ -1014,7 +1041,7 @@
|
|
|
1014
1041
|
opacity: 0.25;
|
|
1015
1042
|
}
|
|
1016
1043
|
}
|
|
1017
|
-
`,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) ---
|
|
1018
1045
|
|
|
1019
1046
|
One of three hand-maintained copies (vanilla styles.css, this file, Angular's
|
|
1020
1047
|
date-grid.component.css). Only the class-naming layer differs \u2014 the
|
|
@@ -1177,7 +1204,7 @@
|
|
|
1177
1204
|
opacity: 0.8;
|
|
1178
1205
|
background: rgba(var(--aia-streak-rgb, 255, 255, 255), 0.06);
|
|
1179
1206
|
}
|
|
1180
|
-
`,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 {
|
|
1181
1208
|
display: flex;
|
|
1182
1209
|
flex-wrap: wrap;
|
|
1183
1210
|
gap: var(--aia-cluster-gap, 0.5rem);
|
|
@@ -1217,7 +1244,7 @@
|
|
|
1217
1244
|
.aia-cluster[data-justify="around"] {
|
|
1218
1245
|
justify-content: space-around;
|
|
1219
1246
|
}
|
|
1220
|
-
`,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
|
|
1221
1248
|
dropdown's rounded edges. The top inset (--aia-footer-gap) adds breathing
|
|
1222
1249
|
room above the hint/branding row so the footer doesn't butt against the last
|
|
1223
1250
|
option row \u2014 additive to the dropdown's 8px section gap. */
|
|
@@ -1351,7 +1378,7 @@
|
|
|
1351
1378
|
justify-content: flex-end;
|
|
1352
1379
|
}
|
|
1353
1380
|
}
|
|
1354
|
-
`,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,
|
|
1355
1382
|
no outline. ~28px via 6px padding + 14px text + the 1px border (border-box).
|
|
1356
1383
|
The border is kept as a 1px transparent line so the box stays the same size
|
|
1357
1384
|
as it was when the outline was dashed. */
|
|
@@ -1390,7 +1417,26 @@
|
|
|
1390
1417
|
cursor: default;
|
|
1391
1418
|
color: transparent;
|
|
1392
1419
|
background: var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, 0.25)));
|
|
1393
|
-
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
|
+
}
|
|
1394
1440
|
}
|
|
1395
1441
|
|
|
1396
1442
|
@keyframes aia-skeletonPulse-xGcUy {
|
|
@@ -1408,7 +1454,7 @@
|
|
|
1408
1454
|
opacity: 0;
|
|
1409
1455
|
}
|
|
1410
1456
|
}
|
|
1411
|
-
`,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 {
|
|
1412
1458
|
position: relative;
|
|
1413
1459
|
z-index: 1;
|
|
1414
1460
|
pointer-events: auto;
|
|
@@ -1418,7 +1464,7 @@
|
|
|
1418
1464
|
align-items: center;
|
|
1419
1465
|
vertical-align: middle;
|
|
1420
1466
|
}
|
|
1421
|
-
`,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
|
|
1422
1468
|
(packages/vanilla/src/styles.css). Same tokens, same defaults, so a consumer
|
|
1423
1469
|
theming one package sees the same result in the other.
|
|
1424
1470
|
|
|
@@ -1636,7 +1682,7 @@
|
|
|
1636
1682
|
.aia-section-Hugfg[data-aia-products-layout="list"] .aia-body-ly032 {
|
|
1637
1683
|
flex: 1 1 auto;
|
|
1638
1684
|
}
|
|
1639
|
-
`,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 {
|
|
1640
1686
|
display: grid;
|
|
1641
1687
|
grid-template-columns: repeat(
|
|
1642
1688
|
auto-fit,
|
|
@@ -1669,7 +1715,7 @@
|
|
|
1669
1715
|
background: var(--aia-scrollbar-thumb, rgba(0, 0, 0, 0.3));
|
|
1670
1716
|
border-radius: 3px;
|
|
1671
1717
|
}
|
|
1672
|
-
`,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 {
|
|
1673
1719
|
position: relative;
|
|
1674
1720
|
/* Clip, not visible: the entrance rise below runs on the inner content,
|
|
1675
1721
|
and a transformed box extends its scroll container's scrollable area.
|
|
@@ -1823,6 +1869,7 @@
|
|
|
1823
1869
|
border-radius: 999px;
|
|
1824
1870
|
-webkit-box-decoration-break: clone;
|
|
1825
1871
|
box-decoration-break: clone;
|
|
1872
|
+
animation: aia-skeletonBarIn-ZlEM0 100ms ease-out;
|
|
1826
1873
|
}
|
|
1827
1874
|
|
|
1828
1875
|
.aia-item-d4vpD[data-aia-loading] .aia-tag-e3Fwe {
|
|
@@ -1895,6 +1942,15 @@
|
|
|
1895
1942
|
min-width: 0;
|
|
1896
1943
|
}
|
|
1897
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
|
+
|
|
1898
1954
|
/* The picture: a square tile, centred on the text beside it (a one-line
|
|
1899
1955
|
option reads as the reference row; a wrapped one keeps the tile on its
|
|
1900
1956
|
vertical middle). Sized and rounded by token so a consumer can shrink it
|
|
@@ -1912,7 +1968,7 @@
|
|
|
1912
1968
|
height: var(--aia-option-image-size, 40px);
|
|
1913
1969
|
border-radius: var(--aia-option-image-radius, 12px);
|
|
1914
1970
|
overflow: hidden;
|
|
1915
|
-
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)));
|
|
1916
1972
|
}
|
|
1917
1973
|
|
|
1918
1974
|
.aia-image-YZAbO img {
|
|
@@ -1986,7 +2042,40 @@
|
|
|
1986
2042
|
filter: brightness(0.55);
|
|
1987
2043
|
}
|
|
1988
2044
|
}
|
|
1989
|
-
|
|
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 {
|
|
1990
2079
|
display: flex;
|
|
1991
2080
|
flex-direction: column;
|
|
1992
2081
|
gap: var(--aia-stack-space, 0.5rem);
|
|
@@ -2001,7 +2090,7 @@
|
|
|
2001
2090
|
align-items: end;
|
|
2002
2091
|
}
|
|
2003
2092
|
/* data-align="stretch" is the flex default \u2014 no rule needed. */
|
|
2004
|
-
`,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 {
|
|
2005
2094
|
flex-shrink: 0;
|
|
2006
2095
|
width: 32px;
|
|
2007
2096
|
height: 32px;
|
|
@@ -2054,5 +2143,5 @@
|
|
|
2054
2143
|
);
|
|
2055
2144
|
cursor: default;
|
|
2056
2145
|
}
|
|
2057
|
-
`,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});
|
|
2058
2147
|
//# sourceMappingURL=index.js.map
|