@magicx-eng/ai-autocomplete-react 0.16.0 → 0.17.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -3
- package/dist/index.d.mts +14 -8
- package/dist/index.d.ts +14 -8
- package/dist/index.js +35 -45
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +35 -45
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -16,7 +16,7 @@ A React/TypeScript SDK that provides a guided AI-powered autocomplete experience
|
|
|
16
16
|
- **Keyboard navigation** — arrow keys, enter to submit, tab to autocomplete, backspace to un-bold the last completed param
|
|
17
17
|
- **IME-safe** — composition events are buffered so input text is committed once, after composition ends
|
|
18
18
|
- **Client-side filtering** — instant substring filtering on every keystroke
|
|
19
|
-
- **Datepicker** — date parameters are answered with a calendar instead of an option list. Click a day or navigate with the arrow keys; the date is committed the way it would be written — `Tuesday` for a date inside the next week, `March 23` for one later this year, `March 23 2027` for another year. Tapping a committed date re-opens the calendar on the month that text names now — for a weekday name, that is the next such day, not the one originally picked.
|
|
19
|
+
- **Datepicker** — date parameters are answered with a calendar instead of an option list. Click a day or navigate with the arrow keys; the date is committed the way it would be written — `Tuesday` for a date inside the next week, `March 23` for one later this year, `March 23 2027` for another year. Tapping a committed date re-opens the calendar on the month that text names now — for a weekday name, that is the next such day, not the one originally picked. A parameter whose options are written as spans (`September 11 - October 13`) gets the same calendar answered in two clicks, committed as one range.
|
|
20
20
|
- **Option overrides** — supply the options for a parameter yourself: a fixed list, a computed one, or one fetched from your own search endpoint as the user types
|
|
21
21
|
- **Product strip (opt-in)** — plug in any platform's product search and the dropdown renders a horizontal row of product cards below the options; the SDK owns the UI, your integration owns only `fetch` and `transform`
|
|
22
22
|
- **Controlled & uncontrolled** — works out of the box or integrates with external state
|
|
@@ -207,6 +207,25 @@ say which, and phrases like `next friday`. Those still open the calendar, just
|
|
|
207
207
|
on the current month with nothing marked, so the user picks rather than being
|
|
208
208
|
shown a guess that might be wrong.
|
|
209
209
|
|
|
210
|
+
**Date ranges.** A parameter whose options are written as spans — `September 11
|
|
211
|
+
- October 13`, `September 11 to November 16` — is answered by the same calendar
|
|
212
|
+
in two clicks: the first sets the start, the second the end, and the pair
|
|
213
|
+
commits as one answer. The days between them band as the user moves across the
|
|
214
|
+
calendar, so the span being chosen is visible before it is committed. Paging the
|
|
215
|
+
month between the two clicks is expected — that is how a span crosses months —
|
|
216
|
+
and <kbd>Esc</kbd> drops the start and lets them begin again. Clicking the end
|
|
217
|
+
before the start is fine; the two are ordered on the way in.
|
|
218
|
+
|
|
219
|
+
The span is read off the options the same way a single date is read off its own:
|
|
220
|
+
either separator (`-`, `–`, `—`, `to`, `through`, `until`), either half in any
|
|
221
|
+
date format the SDK reads, and a name that says so (`date_range`, `dateRange`)
|
|
222
|
+
counts too. It commits as one parameter, written the way it was offered —
|
|
223
|
+
`September 11 - October 13`, with the year on whichever end needs it — and both
|
|
224
|
+
ends are also recorded on the completed parameter's `metadata` as `YYYY-MM-DD`,
|
|
225
|
+
under the `DATE_RANGE_META_START` / `DATE_RANGE_META_END` keys this package
|
|
226
|
+
exports (`aiaDateRangeStart` / `aiaDateRangeEnd`), so you never have to parse
|
|
227
|
+
the prose. Re-editing one re-opens the calendar with both ends marked.
|
|
228
|
+
|
|
210
229
|
**Typing** while the calendar is open does not filter it. The text is treated as
|
|
211
230
|
a new query, so suggestions refresh as the user types — useful when someone
|
|
212
231
|
would rather describe what they want than pick a day.
|
|
@@ -264,7 +283,7 @@ function App() {
|
|
|
264
283
|
|
|
265
284
|
Skip `<AIAutocompleteDropdown />` and render the suggestions UI yourself. `dropdownProps` carries the data + actions — the active suggestion's options, the highlighted index, `isOpen`, and `onSelect` / `onHighlight`:
|
|
266
285
|
|
|
267
|
-
> **Datepicker in a custom UI.** For a date parameter, `dropdownProps.formatType` is `"date"` and `suggestions[0].options` holds that month's day cells. Each cell's `text` is the date it commits (`"March 23"`, or `"Tuesday"` inside the next week), so rendering them as a plain list already works — `onSelect` behaves exactly as it does for an option. To draw an actual calendar, read `dateView` for the month on show, `cellDay(option)` for the number to paint, and call `onPreviousMonth` / `onNextMonth` to page. Cells that pad the start and end of the month have `is_tappable: false`.
|
|
286
|
+
> **Datepicker in a custom UI.** For a date parameter, `dropdownProps.formatType` is `"date"` and `suggestions[0].options` holds that month's day cells. Each cell's `text` is the date it commits (`"March 23"`, or `"Tuesday"` inside the next week), so rendering them as a plain list already works — `onSelect` behaves exactly as it does for an option. To draw an actual calendar, read `dateView` for the month on show, `cellDay(option)` for the number to paint, and call `onPreviousMonth` / `onNextMonth` to page. Cells that pad the start and end of the month have `is_tappable: false`. For a **range** parameter `formatType` is `"date-range"` and the same `onSelect` fires twice: the first records the start (`dropdownProps.dateRangeStart` holds it, and nothing is committed yet), the second commits the span. `dateCellMarks` and `visibleDateRange` are exported to paint the two ends and the band between them the way the built-in calendar does.
|
|
268
287
|
|
|
269
288
|
```tsx
|
|
270
289
|
import { useAIAutocomplete } from "@magicx-eng/ai-autocomplete-react";
|
|
@@ -660,7 +679,7 @@ Override on the container (via `className`). All defaults use `:where()` (zero s
|
|
|
660
679
|
| `--aia-product-bg` | `transparent` | `transparent` | Product card background. |
|
|
661
680
|
| `--aia-product-bg-active` | `--aia-option-bg` | `--aia-option-bg` | Product card background on hover. |
|
|
662
681
|
| `--aia-product-media-bg` | `--aia-skeleton-bg` | `--aia-skeleton-bg` | Fill behind the product image, and of the placeholder tile when a product has no image. |
|
|
663
|
-
| `--aia-scroll-arrow-bg` | `--aia-surface` | `--aia-surface` | Fill of the "more below" arrow — the round button that
|
|
682
|
+
| `--aia-scroll-arrow-bg` | `--aia-surface` | `--aia-surface` | Fill of the "more below" arrow — the round button that fades in at the bottom of the option list while there is more to scroll to, and out while it scrolls. |
|
|
664
683
|
| `--aia-scroll-arrow-color` | `--aia-option-color` | `--aia-option-color` | Chevron color of the arrow (`--aia-scroll-arrow-color-hover` on hover). |
|
|
665
684
|
| `--aia-scroll-arrow-border` | `--aia-dropdown-border` | `--aia-dropdown-border` | Hairline around the arrow. |
|
|
666
685
|
| `--aia-scroll-arrow-shadow` | `0 2px 8px rgba(0,0,0,0.12)` | `0 2px 8px rgba(0,0,0,0.12)` | Elevation of the arrow. |
|
|
@@ -683,6 +702,7 @@ Override on the container (via `className`). All defaults use `:where()` (zero s
|
|
|
683
702
|
| `--aia-date-weekday-font-size` | `11px` | `11px` | Font size of the S/M/T/W/T/F/S column letters. |
|
|
684
703
|
| `--aia-date-today-ring` | `--aia-option-color` | `--aia-option-color` | Outline drawn around today's date. |
|
|
685
704
|
| `--aia-date-selected-bg` | white at 12% | white at 12% | Fill behind the date a re-edited parameter already holds. |
|
|
705
|
+
| `--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`. |
|
|
686
706
|
| `--aia-skeleton-bg` | `rgba(189, 189, 189, 0.25)` | `#1a1b1d` | Fill color for the loading skeleton bars and the masked text in cached pills/options. |
|
|
687
707
|
|
|
688
708
|
Legacy `--aia-color-*` variables are still supported as fallbacks.
|
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { AutocompleteResult, OptionOverrides, APIConfig, AppearanceMode, CompletedParamState, ProductsConfig, Product, Suggestion, SuggestionOption, FormatType, DateMonthView, SkippedParamState, IdentifiedParamState, Segment } from '@magicx-eng/ai-autocomplete-vanilla';
|
|
2
|
-
export { APIConfig, APIKeyConfig, AccessTokenConfig, AccessTokenResult, AppearanceMode, AutocompleteResult, CompletedParam, CompletedParamState, DateMonthView, FormatType, IdentifiedParam, IdentifiedParamState, OptionOverrides, Product, ProductsConfig, Segment, SkippedParamState, SubmitResultExtras, Suggestion, SuggestionOption, TaskKind, WEEKDAY_LABELS, buildSubmitResult, cellDay, cellIso, formatDate, isoDate, monthLabel, parseDate, parseLooseDate, withSkippedParams } from '@magicx-eng/ai-autocomplete-vanilla';
|
|
1
|
+
import { AutocompleteResult, OptionOverrides, APIConfig, AppearanceMode, CompletedParamState, ProductsConfig, Product, Suggestion, SuggestionOption, FormatType, DateMonthView, DateRange, SkippedParamState, IdentifiedParamState, Segment } from '@magicx-eng/ai-autocomplete-vanilla';
|
|
2
|
+
export { APIConfig, APIKeyConfig, AccessTokenConfig, AccessTokenResult, AppearanceMode, AutocompleteResult, CompletedParam, CompletedParamState, DATE_RANGE_META_END, DATE_RANGE_META_START, DateMonthView, DateRange, FormatType, IdentifiedParam, IdentifiedParamState, OptionOverrides, Product, ProductsConfig, Segment, SkippedParamState, SubmitResultExtras, Suggestion, SuggestionOption, TaskKind, WEEKDAY_LABELS, buildSubmitResult, cellDay, cellIso, dateCellMarks, formatDate, formatDateRange, isoDate, monthLabel, parseDate, parseLooseDate, parseLooseDateRange, selectedRangeFor, visibleDateRange, withSkippedParams } from '@magicx-eng/ai-autocomplete-vanilla';
|
|
3
3
|
import * as react from 'react';
|
|
4
4
|
import { ReactNode, KeyboardEvent, ChangeEvent } from 'react';
|
|
5
5
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
@@ -370,17 +370,23 @@ interface AIAutocompleteDropdownProps {
|
|
|
370
370
|
*/
|
|
371
371
|
optionsPosition?: "above" | "below";
|
|
372
372
|
/**
|
|
373
|
-
* How the active pill is answered. `"date"`
|
|
374
|
-
* the options grid, and `suggestions[0].options` then
|
|
375
|
-
* cells rather than the parameter's own options — the
|
|
376
|
-
* they reach here.
|
|
373
|
+
* How the active pill is answered. `"date"` and `"date-range"` render a
|
|
374
|
+
* calendar in place of the options grid, and `suggestions[0].options` then
|
|
375
|
+
* carries that month's cells rather than the parameter's own options — the
|
|
376
|
+
* core swaps them before they reach here. A `"date-range"` parameter is
|
|
377
|
+
* answered by two taps of that calendar, a start and an end, committed as one
|
|
378
|
+
* span. Provided by `dropdownProps` from the hook.
|
|
377
379
|
* Default: `"options"`.
|
|
378
380
|
*/
|
|
379
381
|
formatType?: FormatType;
|
|
380
|
-
/** The month the calendar shows. Null unless `formatType` is
|
|
382
|
+
/** The month the calendar shows. Null unless `formatType` is a calendar one. Provided by `dropdownProps` from the hook. */
|
|
381
383
|
dateView?: DateMonthView | null;
|
|
382
384
|
/** `YYYY-MM-DD` already held by the param being re-edited, so its cell reads as the current answer. Provided by `dropdownProps` from the hook. */
|
|
383
385
|
selectedDateIso?: string | null;
|
|
386
|
+
/** Both ends of a range param being re-edited, so both cells read as the current answer. Provided by `dropdownProps` from the hook. */
|
|
387
|
+
selectedDateRange?: DateRange | null;
|
|
388
|
+
/** The first end of a range picked so far, while the user chooses the second. Provided by `dropdownProps` from the hook. */
|
|
389
|
+
dateRangeStart?: string | null;
|
|
384
390
|
/** Page the calendar back a month. Provided by `dropdownProps` from the hook. */
|
|
385
391
|
onPreviousMonth?: () => void;
|
|
386
392
|
/** Page the calendar forward a month. Provided by `dropdownProps` from the hook. */
|
|
@@ -400,7 +406,7 @@ interface AIAutocompleteDropdownProps {
|
|
|
400
406
|
|
|
401
407
|
declare const AIAutocomplete: react.ForwardRefExoticComponent<AIAutocompleteProps & react.RefAttributes<AIAutocompleteHandle>>;
|
|
402
408
|
|
|
403
|
-
declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, isOpen, id, className, pills, onPillClick, showPills, onSkip, showSkipButton, skipDisabled, activeSelected, isLoading, isInputEmpty, products, onProductSelect, onProductFocusChange, formatType, dateView, selectedDateIso, onPreviousMonth, onNextMonth, optionsPosition, mode, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
|
|
409
|
+
declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, isOpen, id, className, pills, onPillClick, showPills, onSkip, showSkipButton, skipDisabled, activeSelected, isLoading, isInputEmpty, products, onProductSelect, onProductFocusChange, formatType, dateView, selectedDateIso, selectedDateRange, dateRangeStart, onPreviousMonth, onNextMonth, optionsPosition, mode, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
|
|
404
410
|
|
|
405
411
|
declare function useAIAutocomplete({ onSubmit, onResult, onError, optionOverrides, maskCompletedText, apiConfig, additionalContext, columns, dropdownTrigger, optionsPosition, closeDropdownOnBlur, showNonTappableOptions, showSkipButton, onFocus, onBlur, value: controlledValue, completedParams: controlledParams, onChange: onChangeProp, onParamsChange, products, onProductSelect, source, setCursor, }: UseAIAutocompleteOptions): UseAIAutocompleteReturn;
|
|
406
412
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { AutocompleteResult, OptionOverrides, APIConfig, AppearanceMode, CompletedParamState, ProductsConfig, Product, Suggestion, SuggestionOption, FormatType, DateMonthView, SkippedParamState, IdentifiedParamState, Segment } from '@magicx-eng/ai-autocomplete-vanilla';
|
|
2
|
-
export { APIConfig, APIKeyConfig, AccessTokenConfig, AccessTokenResult, AppearanceMode, AutocompleteResult, CompletedParam, CompletedParamState, DateMonthView, FormatType, IdentifiedParam, IdentifiedParamState, OptionOverrides, Product, ProductsConfig, Segment, SkippedParamState, SubmitResultExtras, Suggestion, SuggestionOption, TaskKind, WEEKDAY_LABELS, buildSubmitResult, cellDay, cellIso, formatDate, isoDate, monthLabel, parseDate, parseLooseDate, withSkippedParams } from '@magicx-eng/ai-autocomplete-vanilla';
|
|
1
|
+
import { AutocompleteResult, OptionOverrides, APIConfig, AppearanceMode, CompletedParamState, ProductsConfig, Product, Suggestion, SuggestionOption, FormatType, DateMonthView, DateRange, SkippedParamState, IdentifiedParamState, Segment } from '@magicx-eng/ai-autocomplete-vanilla';
|
|
2
|
+
export { APIConfig, APIKeyConfig, AccessTokenConfig, AccessTokenResult, AppearanceMode, AutocompleteResult, CompletedParam, CompletedParamState, DATE_RANGE_META_END, DATE_RANGE_META_START, DateMonthView, DateRange, FormatType, IdentifiedParam, IdentifiedParamState, OptionOverrides, Product, ProductsConfig, Segment, SkippedParamState, SubmitResultExtras, Suggestion, SuggestionOption, TaskKind, WEEKDAY_LABELS, buildSubmitResult, cellDay, cellIso, dateCellMarks, formatDate, formatDateRange, isoDate, monthLabel, parseDate, parseLooseDate, parseLooseDateRange, selectedRangeFor, visibleDateRange, withSkippedParams } from '@magicx-eng/ai-autocomplete-vanilla';
|
|
3
3
|
import * as react from 'react';
|
|
4
4
|
import { ReactNode, KeyboardEvent, ChangeEvent } from 'react';
|
|
5
5
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
@@ -370,17 +370,23 @@ interface AIAutocompleteDropdownProps {
|
|
|
370
370
|
*/
|
|
371
371
|
optionsPosition?: "above" | "below";
|
|
372
372
|
/**
|
|
373
|
-
* How the active pill is answered. `"date"`
|
|
374
|
-
* the options grid, and `suggestions[0].options` then
|
|
375
|
-
* cells rather than the parameter's own options — the
|
|
376
|
-
* they reach here.
|
|
373
|
+
* How the active pill is answered. `"date"` and `"date-range"` render a
|
|
374
|
+
* calendar in place of the options grid, and `suggestions[0].options` then
|
|
375
|
+
* carries that month's cells rather than the parameter's own options — the
|
|
376
|
+
* core swaps them before they reach here. A `"date-range"` parameter is
|
|
377
|
+
* answered by two taps of that calendar, a start and an end, committed as one
|
|
378
|
+
* span. Provided by `dropdownProps` from the hook.
|
|
377
379
|
* Default: `"options"`.
|
|
378
380
|
*/
|
|
379
381
|
formatType?: FormatType;
|
|
380
|
-
/** The month the calendar shows. Null unless `formatType` is
|
|
382
|
+
/** The month the calendar shows. Null unless `formatType` is a calendar one. Provided by `dropdownProps` from the hook. */
|
|
381
383
|
dateView?: DateMonthView | null;
|
|
382
384
|
/** `YYYY-MM-DD` already held by the param being re-edited, so its cell reads as the current answer. Provided by `dropdownProps` from the hook. */
|
|
383
385
|
selectedDateIso?: string | null;
|
|
386
|
+
/** Both ends of a range param being re-edited, so both cells read as the current answer. Provided by `dropdownProps` from the hook. */
|
|
387
|
+
selectedDateRange?: DateRange | null;
|
|
388
|
+
/** The first end of a range picked so far, while the user chooses the second. Provided by `dropdownProps` from the hook. */
|
|
389
|
+
dateRangeStart?: string | null;
|
|
384
390
|
/** Page the calendar back a month. Provided by `dropdownProps` from the hook. */
|
|
385
391
|
onPreviousMonth?: () => void;
|
|
386
392
|
/** Page the calendar forward a month. Provided by `dropdownProps` from the hook. */
|
|
@@ -400,7 +406,7 @@ interface AIAutocompleteDropdownProps {
|
|
|
400
406
|
|
|
401
407
|
declare const AIAutocomplete: react.ForwardRefExoticComponent<AIAutocompleteProps & react.RefAttributes<AIAutocompleteHandle>>;
|
|
402
408
|
|
|
403
|
-
declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, isOpen, id, className, pills, onPillClick, showPills, onSkip, showSkipButton, skipDisabled, activeSelected, isLoading, isInputEmpty, products, onProductSelect, onProductFocusChange, formatType, dateView, selectedDateIso, onPreviousMonth, onNextMonth, optionsPosition, mode, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
|
|
409
|
+
declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, isOpen, id, className, pills, onPillClick, showPills, onSkip, showSkipButton, skipDisabled, activeSelected, isLoading, isInputEmpty, products, onProductSelect, onProductFocusChange, formatType, dateView, selectedDateIso, selectedDateRange, dateRangeStart, onPreviousMonth, onNextMonth, optionsPosition, mode, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
|
|
404
410
|
|
|
405
411
|
declare function useAIAutocomplete({ onSubmit, onResult, onError, optionOverrides, maskCompletedText, apiConfig, additionalContext, columns, dropdownTrigger, optionsPosition, closeDropdownOnBlur, showNonTappableOptions, showSkipButton, onFocus, onBlur, value: controlledValue, completedParams: controlledParams, onChange: onChangeProp, onParamsChange, products, onProductSelect, source, setCursor, }: UseAIAutocompleteOptions): UseAIAutocompleteReturn;
|
|
406
412
|
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var Ze=Object.defineProperty;var Ft=Object.getOwnPropertyDescriptor;var Ht=Object.getOwnPropertyNames;var Kt=Object.prototype.hasOwnProperty;var Wt=(e,o)=>{for(var a in o)Ze(e,a,{get:o[a],enumerable:!0})},qt=(e,o,a,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of Ht(o))!Kt.call(e,r)&&r!==a&&Ze(e,r,{get:()=>o[r],enumerable:!(n=Ft(o,r))||n.enumerable});return e};var Ut=e=>qt(Ze({},"__esModule",{value:!0}),e);var ia={};Wt(ia,{AIAutocomplete:()=>Tt,AIAutocompleteDropdown:()=>qe,DATE_RANGE_META_END:()=>g.DATE_RANGE_META_END,DATE_RANGE_META_START:()=>g.DATE_RANGE_META_START,WEEKDAY_LABELS:()=>g.WEEKDAY_LABELS,buildSubmitResult:()=>g.buildSubmitResult,cellDay:()=>g.cellDay,cellIso:()=>g.cellIso,dateCellMarks:()=>g.dateCellMarks,formatDate:()=>g.formatDate,formatDateRange:()=>g.formatDateRange,isoDate:()=>g.isoDate,monthLabel:()=>g.monthLabel,parseDate:()=>g.parseDate,parseLooseDate:()=>g.parseLooseDate,parseLooseDateRange:()=>g.parseLooseDateRange,selectedRangeFor:()=>g.selectedRangeFor,useAIAutocomplete:()=>je,visibleDateRange:()=>g.visibleDateRange,withSkippedParams:()=>g.withSkippedParams});module.exports=Ut(ia);var g=require("@magicx-eng/ai-autocomplete-vanilla");var E=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-67791514")){let e=document.createElement("style");e.id="ac-style-67791514",e.textContent=`.AIAutocomplete-module_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
|
|
@@ -193,7 +193,7 @@
|
|
|
193
193
|
opacity: 0;
|
|
194
194
|
}
|
|
195
195
|
}
|
|
196
|
-
`,document.head.appendChild(e)}var
|
|
196
|
+
`,document.head.appendChild(e)}var ke={container:"AIAutocomplete-module_container_KKjFU",inputWrapper:"AIAutocomplete-module_inputWrapper_FLq1b",editorArea:"AIAutocomplete-module_editorArea_7rBWq",input:"AIAutocomplete-module_input_IW-P-",pillListContainer:"AIAutocomplete-module_pillListContainer_h92IA",submitSlot:"AIAutocomplete-module_submitSlot_GhuCM",aiaPillReveal:"AIAutocomplete-module_aiaPillReveal_wf05b"};var Ce=require("@magicx-eng/ai-autocomplete-vanilla"),Y=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-0ae03977")){let e=document.createElement("style");e.id="ac-style-0ae03977",e.textContent=`/*
|
|
197
197
|
* Built-in appearance defaults \u2014 zero specificity via :where().
|
|
198
198
|
* Consumer CSS always wins without !important.
|
|
199
199
|
*
|
|
@@ -616,17 +616,17 @@
|
|
|
616
616
|
transform 320ms cubic-bezier(0.22, 1.28, 0.36, 1);
|
|
617
617
|
}
|
|
618
618
|
|
|
619
|
-
/* "More below" scroll arrow \u2014 see the core's render/scrollArrow.ts.
|
|
620
|
-
disc at the bottom-centre of the option list, shown while
|
|
621
|
-
scroll
|
|
622
|
-
(--aia-scroll-arrow-bottom is measured and set inline by the controller so
|
|
623
|
-
tracks the grid's bottom edge in every layout).
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
619
|
+
/* "More below" scroll arrow \u2014 see the core's render/scrollArrow.ts.
|
|
620
|
+
A round disc at the bottom-centre of the option list, shown while there is
|
|
621
|
+
more to scroll to. It rests just above the grid's reserved band
|
|
622
|
+
(--aia-scroll-arrow-bottom is measured and set inline by the controller so
|
|
623
|
+
it tracks the grid's bottom edge in every layout). It never moves: the
|
|
624
|
+
controller toggles data-aia-visible and the only thing that transitions is
|
|
625
|
+
opacity \u2014 a slow, even second in and the same second out. Any travel read as
|
|
626
|
+
the disc sliding with the scroll (2026-09-04). z-index 2 puts it over the
|
|
627
|
+
option rows and under the footer (z-index 3). Declarations mirror vanilla's
|
|
628
|
+
.magicx-aia-scroll-arrow and Angular's copy \u2014 change all three in the same
|
|
629
|
+
commit. */
|
|
630
630
|
.AIAutocompleteDropdown-module_scrollArrow_uUzV0 {
|
|
631
631
|
position: absolute;
|
|
632
632
|
left: 50%;
|
|
@@ -650,32 +650,16 @@
|
|
|
650
650
|
box-shadow: var(--aia-scroll-arrow-shadow, 0 2px 8px rgba(0, 0, 0, 0.12));
|
|
651
651
|
cursor: pointer;
|
|
652
652
|
pointer-events: none;
|
|
653
|
-
/*
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
in on the way up. */
|
|
653
|
+
/* Hidden: transparent, in place. Only opacity ever transitions, so the disc
|
|
654
|
+
cannot travel. One second each way \u2014 SCROLL_ARROW_FADE_MS in
|
|
655
|
+
scrollArrow.ts documents this number; change both together. */
|
|
657
656
|
opacity: 0;
|
|
658
|
-
|
|
659
|
-
transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
657
|
+
transition: opacity 1000ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
660
658
|
}
|
|
661
659
|
|
|
662
660
|
.AIAutocompleteDropdown-module_scrollArrow_uUzV0[data-aia-visible] {
|
|
663
661
|
pointer-events: auto;
|
|
664
662
|
opacity: 1;
|
|
665
|
-
transform: translateY(0);
|
|
666
|
-
}
|
|
667
|
-
|
|
668
|
-
/* Leaving: dissolve where it stands \u2014 no travel. Ease-out so most of the fade
|
|
669
|
-
happens at once and the last of it lingers; the shrink keeps it from reading
|
|
670
|
-
as a flat cut. The controller holds this attribute for SCROLL_ARROW_LEAVE_MS
|
|
671
|
-
(scrollArrow.ts) \u2014 keep the two durations equal. */
|
|
672
|
-
.AIAutocompleteDropdown-module_scrollArrow_uUzV0[data-aia-leaving] {
|
|
673
|
-
pointer-events: none;
|
|
674
|
-
opacity: 0;
|
|
675
|
-
transform: translateY(0) scale(0.86);
|
|
676
|
-
transition:
|
|
677
|
-
opacity 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
|
|
678
|
-
transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
679
663
|
}
|
|
680
664
|
|
|
681
665
|
.AIAutocompleteDropdown-module_scrollArrow_uUzV0:hover {
|
|
@@ -687,7 +671,6 @@
|
|
|
687
671
|
|
|
688
672
|
@media (prefers-reduced-motion: reduce) {
|
|
689
673
|
.AIAutocompleteDropdown-module_scrollArrow_uUzV0,
|
|
690
|
-
.AIAutocompleteDropdown-module_scrollArrow_uUzV0[data-aia-leaving],
|
|
691
674
|
.AIAutocompleteDropdown-module_dropdown_yz2KC {
|
|
692
675
|
transition-duration: 0s;
|
|
693
676
|
}
|
|
@@ -801,7 +784,7 @@
|
|
|
801
784
|
opacity: 0.25;
|
|
802
785
|
}
|
|
803
786
|
}
|
|
804
|
-
`,document.head.appendChild(e)}var
|
|
787
|
+
`,document.head.appendChild(e)}var me={dropdown:"AIAutocompleteDropdown-module_dropdown_yz2KC",visible:"AIAutocompleteDropdown-module_visible_QCoXj",scrollArrow:"AIAutocompleteDropdown-module_scrollArrow_uUzV0",pillBar:"AIAutocompleteDropdown-module_pillBar_pwTXe",pillScroll:"AIAutocompleteDropdown-module_pillScroll_Tpzus",skip:"AIAutocompleteDropdown-module_skip_7-olS",skeletonBars:"AIAutocompleteDropdown-module_skeletonBars_HVr9C",skeletonBar:"AIAutocompleteDropdown-module_skeletonBar_O3xIx",aiaSkeletonPulse:"AIAutocompleteDropdown-module_aiaSkeletonPulse_G8W7q"};var C=require("@magicx-eng/ai-autocomplete-vanilla"),ct=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) ---
|
|
805
788
|
|
|
806
789
|
One of three hand-maintained copies (vanilla styles.css, this file, Angular's
|
|
807
790
|
date-grid.component.css). Only the class-naming layer differs \u2014 the
|
|
@@ -947,6 +930,13 @@
|
|
|
947
930
|
var(--aia-date-today-ring, var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb)));
|
|
948
931
|
}
|
|
949
932
|
|
|
933
|
+
/* Between the two ends of a picked span. The band sits on the CELL, not on the
|
|
934
|
+
number square inside it, so consecutive days join into one continuous strip
|
|
935
|
+
instead of a row of separate pills \u2014 the ends stay the two filled squares. */
|
|
936
|
+
.DateGrid-module_inRange_r9S2q {
|
|
937
|
+
background: var(--aia-date-range-bg, rgba(var(--aia-streak-rgb, 255, 255, 255), 0.06));
|
|
938
|
+
}
|
|
939
|
+
|
|
950
940
|
.DateGrid-module_selected_28KDn .DateGrid-module_number_aoT01 {
|
|
951
941
|
color: var(--aia-option-color-selected, var(--aia-color-text-default, #fff));
|
|
952
942
|
background: var(--aia-date-selected-bg, rgba(var(--aia-streak-rgb, 255, 255, 255), 0.12));
|
|
@@ -957,7 +947,7 @@
|
|
|
957
947
|
opacity: 0.8;
|
|
958
948
|
background: rgba(var(--aia-streak-rgb, 255, 255, 255), 0.06);
|
|
959
949
|
}
|
|
960
|
-
`,document.head.appendChild(e)}var
|
|
950
|
+
`,document.head.appendChild(e)}var D={datepicker:"DateGrid-module_datepicker_6RrTs",header:"DateGrid-module_header_z4LRk",month:"DateGrid-module_month_urB2T",nav:"DateGrid-module_nav_ap4AN",weekdays:"DateGrid-module_weekdays_3EA3q",grid:"DateGrid-module_grid_mQCgw",weekday:"DateGrid-module_weekday_3lF4B",cell:"DateGrid-module_cell_59k0y",number:"DateGrid-module_number_aoT01",day:"DateGrid-module_day_cB3u9",blank:"DateGrid-module_blank_ivgRC",past:"DateGrid-module_past_CEZsj",highlighted:"DateGrid-module_highlighted_YIdtK",today:"DateGrid-module_today_iI3ME",inRange:"DateGrid-module_inRange_r9S2q",selected:"DateGrid-module_selected_28KDn",pressed:"DateGrid-module_pressed_bEyyN"};var B=require("react/jsx-runtime"),jt=["sunday","monday","tuesday","wednesday","thursday","friday","saturday"];function pt({options:e,activeIndex:o,listboxId:a,view:n,selection:r,onSelect:i,onHighlight:s,onPreviousMonth:f,onNextMonth:b}){let w=(0,C.isoDate)(new Date),k=(0,C.visibleDateRange)({pendingStart:r.rangeStart,highlightedIso:(0,C.cellIso)(e[o]),selected:r.selectedRange});return(0,B.jsxs)("div",{className:D.datepicker,"data-aia-datepicker":"",children:[(0,B.jsxs)("div",{className:D.header,children:[(0,B.jsx)("button",{type:"button",tabIndex:-1,className:D.nav,"data-aia-date-prev":"","aria-label":"Previous month",onMouseDown:p=>p.preventDefault(),onClick:f,children:"\u2039"}),(0,B.jsx)("span",{className:D.month,"data-aia-date-month":"","aria-live":"polite",children:(0,C.monthLabel)(n)}),(0,B.jsx)("button",{type:"button",tabIndex:-1,className:D.nav,"data-aia-date-next":"","aria-label":"Next month",onMouseDown:p=>p.preventDefault(),onClick:b,children:"\u203A"})]}),(0,B.jsx)("div",{className:D.weekdays,"aria-hidden":"true",children:C.WEEKDAY_LABELS.map((p,x)=>(0,B.jsx)("span",{className:D.weekday,children:p},jt[x]))}),(0,B.jsx)("div",{className:D.grid,"data-aia-date-grid":"",children:e.map((p,x)=>(0,B.jsx)($t,{option:p,id:`${a}-option-${x}`,index:x,isHighlighted:x===o&&p.is_tappable,isToday:(0,C.cellIso)(p)===w,isPast:(0,C.cellIso)(p)!=null&&(0,C.cellIso)(p)<w,marks:(0,C.dateCellMarks)((0,C.cellIso)(p),{selectedIso:r.selectedIso,range:k}),onSelect:i,onHighlight:s},(0,C.cellIso)(p)??`pad-${x}`))})]})}function $t({option:e,id:o,index:a,isHighlighted:n,isToday:r,isPast:i,marks:s,onSelect:f,onHighlight:b}){let[w,k]=(0,ct.useState)(!1),p=(0,C.cellDay)(e);if(p==null)return(0,B.jsx)("div",{id:o,role:"option","data-aia-option":"","data-aia-date-cell":"","aria-hidden":"true","aria-selected":!1,tabIndex:-1,className:`${D.cell} ${D.blank}`});let x=()=>{k(!0),f(e),setTimeout(()=>k(!1),170)},_=[D.cell,D.day,i?D.past:"",n?D.highlighted:"",r?D.today:"",s.inRange?D.inRange:"",s.selected?D.selected:"",w?D.pressed:""].filter(Boolean).join(" ");return(0,B.jsx)("div",{id:o,role:"option","data-aia-option":"","data-aia-date-cell":"","aria-selected":n,"aria-label":e.text,tabIndex:0,className:_,onClick:x,onKeyDown:v=>{(v.key==="Enter"||v.key===" ")&&(v.preventDefault(),x())},onMouseEnter:()=>b(a),children:(0,B.jsx)("span",{className:D.number,children:p})})}var Se=require("@magicx-eng/ai-autocomplete-vanilla"),He=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-5259a217")){let e=document.createElement("style");e.id="ac-style-5259a217",e.textContent=`@layer layout {
|
|
961
951
|
.aia-cluster {
|
|
962
952
|
display: flex;
|
|
963
953
|
flex-wrap: wrap;
|
|
@@ -999,7 +989,7 @@
|
|
|
999
989
|
justify-content: space-around;
|
|
1000
990
|
}
|
|
1001
991
|
}
|
|
1002
|
-
`,document.head.appendChild(e)}var
|
|
992
|
+
`,document.head.appendChild(e)}var Je=require("react/jsx-runtime");function Oe({gap:e,align:o="center",justify:a="start",noWrap:n=!1,inline:r=!1,className:i,children:s,...f}){let b=e?{"--aia-cluster-gap":e}:void 0,w={className:i?`aia-cluster ${i}`:"aia-cluster","data-align":o,"data-justify":a,"data-nowrap":n||void 0,"data-inline":r||void 0,style:b,...f};return r?(0,Je.jsx)("span",{...w,children:s}):(0,Je.jsx)("div",{...w,children:s})}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
|
|
1003
993
|
dropdown's rounded edges. The top inset (--aia-footer-gap) adds breathing
|
|
1004
994
|
room above the hint/branding row so the footer doesn't butt against the last
|
|
1005
995
|
option row \u2014 additive to the dropdown's 8px section gap. */
|
|
@@ -1133,7 +1123,7 @@
|
|
|
1133
1123
|
justify-content: flex-end;
|
|
1134
1124
|
}
|
|
1135
1125
|
}
|
|
1136
|
-
`,document.head.appendChild(e)}var
|
|
1126
|
+
`,document.head.appendChild(e)}var fe={footer:"DropdownFooter-module_footer_qQQ7x",hintGroup:"DropdownFooter-module_hintGroup_ZzbPf",brandLink:"DropdownFooter-module_brandLink_r4f3R",key:"DropdownFooter-module_key_Bz1H-",hint:"DropdownFooter-module_hint_GKEOH",brand:"DropdownFooter-module_brand_Al-lR",badge:"DropdownFooter-module_badge_Fk9vg",row:"DropdownFooter-module_row_BgZ6Q"};var ae=require("react/jsx-runtime");function ut({isOptionHighlighted:e=!1,isInputEmpty:o=!1}){let{key:a,hint:n}=(0,Se.getFooterHint)(e,o),[r,i]=(0,He.useState)(Se.ATTRIBUTION_URL);return(0,He.useEffect)(()=>{i((0,Se.buildAttributionUrl)())},[]),(0,ae.jsx)("footer",{className:fe.footer,"data-aia-footer":"",children:(0,ae.jsxs)(Oe,{justify:"between",noWrap:!0,className:fe.row,children:[(0,ae.jsxs)(Oe,{gap:"5px",className:fe.hintGroup,children:[(0,ae.jsx)("kbd",{className:fe.key,children:a}),(0,ae.jsx)("span",{className:fe.hint,children:n})]}),(0,ae.jsxs)("a",{className:fe.brandLink,href:r,target:"_blank",rel:"noopener noreferrer",children:[(0,ae.jsx)("span",{className:fe.brand,children:"AI"}),(0,ae.jsx)("span",{className:fe.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,
|
|
1137
1127
|
no outline. ~28px via 6px padding + 14px text + the 1px border (border-box).
|
|
1138
1128
|
The border is kept as a 1px transparent line so the box stays the same size
|
|
1139
1129
|
as it was when the outline was dashed. */
|
|
@@ -1190,7 +1180,7 @@
|
|
|
1190
1180
|
opacity: 0;
|
|
1191
1181
|
}
|
|
1192
1182
|
}
|
|
1193
|
-
`,document.head.appendChild(e)}var _e={pill:"ParamPill-module_pill_6Ga7S",fadeIn:"ParamPill-module_fadeIn_Ux4eQ",rounded:"ParamPill-module_rounded_y7xA9",skeleton:"ParamPill-module_skeleton_57P0T",skeletonPulse:"ParamPill-module_skeletonPulse_xGcUy"};var mt=require("react/jsx-runtime"),
|
|
1183
|
+
`,document.head.appendChild(e)}var _e={pill:"ParamPill-module_pill_6Ga7S",fadeIn:"ParamPill-module_fadeIn_Ux4eQ",rounded:"ParamPill-module_rounded_y7xA9",skeleton:"ParamPill-module_skeleton_57P0T",skeletonPulse:"ParamPill-module_skeletonPulse_xGcUy"};var mt=require("react/jsx-runtime"),et={selected:1,first:.7,next:.4,last:.2};function ht({label:e,state:o,rounded:a,loading:n,onClick:r}){let i=[_e.pill,a?_e.rounded:"",n?_e.skeleton:""].filter(Boolean).join(" ");return(0,mt.jsx)("button",{type:"button","data-aia-pill":"","data-aia-loading":n?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:i,style:{opacity:et[o]},onMouseDown:s=>s.preventDefault(),onClick:n?void 0:r,disabled:n,children:e})}if(typeof document<"u"&&!document.getElementById("ac-style-0fcb7940")){let e=document.createElement("style");e.id="ac-style-0fcb7940",e.textContent=`.PillList-module_list_qvLqO {
|
|
1194
1184
|
position: relative;
|
|
1195
1185
|
z-index: 1;
|
|
1196
1186
|
pointer-events: auto;
|
|
@@ -1200,7 +1190,7 @@
|
|
|
1200
1190
|
align-items: center;
|
|
1201
1191
|
vertical-align: middle;
|
|
1202
1192
|
}
|
|
1203
|
-
`,document.head.appendChild(e)}var
|
|
1193
|
+
`,document.head.appendChild(e)}var tt={list:"PillList-module_list_qvLqO"};var Me=require("react/jsx-runtime"),Vt=[125,69];function ft(e){return e===0?"first":e===1?"next":"last"}function Ke({pills:e,activePillIndex:o,onSelectPill:a,activeSelected:n,rounded:r,loading:i}){return i&&e.length===0?(0,Me.jsx)("span",{className:tt.list,"data-aia-pill-list-loading":"",children:Vt.map((s,f)=>(0,Me.jsx)("span",{"data-aia-pill-skeleton":"",className:`${_e.pill} ${r?_e.rounded:""} ${_e.skeleton}`,style:{width:s,opacity:et[ft(f)]}},`skel-${s}`))}):(0,Me.jsx)("span",{className:tt.list,"data-aia-pill-list-loading":i?"":void 0,children:e.map((s,f)=>{let b=!!n&&f===o;return(0,Me.jsx)(ht,{label:s.text,state:b?"selected":ft(f),selected:b,rounded:r,loading:i,onClick:()=>a(f)},`${s.type}-${s.text}`)})})}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
|
|
1204
1194
|
(packages/vanilla/src/styles.css). Same tokens, same defaults, so a consumer
|
|
1205
1195
|
theming one package sees the same result in the other.
|
|
1206
1196
|
|
|
@@ -1367,7 +1357,7 @@
|
|
|
1367
1357
|
var(--aia-option-color-selected, var(--aia-color-text-default, #fff))
|
|
1368
1358
|
);
|
|
1369
1359
|
}
|
|
1370
|
-
`,document.head.appendChild(e)}var
|
|
1360
|
+
`,document.head.appendChild(e)}var Q={section:"ProductStrip-module_section_Hugfg",label:"ProductStrip-module_label_nuc93",row:"ProductStrip-module_row_WDVBX",card:"ProductStrip-module_card_JBGYT",media:"ProductStrip-module_media_RrbGe",image:"ProductStrip-module_image_5pNL7",body:"ProductStrip-module_body_ly032",vendor:"ProductStrip-module_vendor_Gvu7G",title:"ProductStrip-module_title_gCNmq",price:"ProductStrip-module_price_gULcE"};var F=require("react/jsx-runtime");function gt({products:e,listboxId:o,onSelect:a,onFocusChange:n,focusable:r=!0}){if(e.length===0)return null;let i=`${o}-products-label`;return(0,F.jsxs)("section",{className:Q.section,"data-aia-products":"",role:"group","aria-labelledby":i,children:[(0,F.jsx)("div",{className:Q.label,id:i,children:"Products"}),(0,F.jsx)("div",{className:Q.row,"data-aia-products-row":"",children:e.map((s,f)=>(0,F.jsx)(Qt,{product:s,id:`${o}-product-${f}`,onSelect:a,onFocusChange:n,focusable:r},s.id))})]})}function Qt({product:e,id:o,onSelect:a,onFocusChange:n,focusable:r}){let i=s=>{s.metaKey||s.ctrlKey||s.shiftKey||s.altKey||s.button!==0||(s.preventDefault(),a(e))};return(0,F.jsxs)("a",{id:o,className:Q.card,"data-aia-product":"",role:"option","aria-selected":!1,href:e.url,tabIndex:r?0:-1,onClick:i,onKeyDown:s=>{s.key!=="Enter"&&s.key!==" "||(s.preventDefault(),a(e))},onFocus:()=>n?.(!0),onBlur:s=>{s.relatedTarget?.closest("[data-aia-dropdown]")||n?.(!1)},children:[(0,F.jsx)("span",{className:Q.media,"data-aia-product-placeholder":e.imageUrl?void 0:"",children:e.imageUrl?(0,F.jsx)("img",{className:Q.image,src:e.imageUrl,alt:"",loading:"lazy",decoding:"async"}):null}),(0,F.jsxs)("span",{className:Q.body,children:[e.vendor?(0,F.jsx)("span",{className:Q.vendor,children:e.vendor}):null,(0,F.jsx)("span",{className:Q.title,children:e.title}),e.price?(0,F.jsx)("span",{className:Q.price,children:e.price}):null]})]})}var H=require("@magicx-eng/ai-autocomplete-vanilla"),ge=require("react");var bt=require("@magicx-eng/ai-autocomplete-vanilla"),We=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-948e58da")){let e=document.createElement("style");e.id="ac-style-948e58da",e.textContent=`@layer layout {
|
|
1371
1361
|
.aia-grid {
|
|
1372
1362
|
display: grid;
|
|
1373
1363
|
grid-template-columns: repeat(
|
|
@@ -1402,7 +1392,7 @@
|
|
|
1402
1392
|
border-radius: 3px;
|
|
1403
1393
|
}
|
|
1404
1394
|
}
|
|
1405
|
-
`,document.head.appendChild(e)}var
|
|
1395
|
+
`,document.head.appendChild(e)}var wt=require("react/jsx-runtime");function vt({min:e="16rem",max:o,gap:a,scroll:n=!1,maxHeight:r,scrollResetKey:i,cols:s,template:f,innerRef:b,className:w,children:k,...p}){let x=(0,We.useRef)(null);(0,We.useLayoutEffect)(()=>{if(i===void 0)return;let v=x.current;v&&(v.scrollTop=0)},[i]);let _={"--aia-grid-min":e};return o&&(_["--aia-grid-max"]=o),a&&(_["--aia-grid-gap"]=a),r&&(_["--aia-grid-max-height"]=r),s&&(_.gridTemplateColumns=(0,bt.optionsGridTemplateColumns)(s)),f&&(_.gridTemplateColumns=f),(0,wt.jsx)("div",{ref:v=>{x.current=v,b?.(v)},className:w?`aia-grid ${w}`:"aia-grid","data-scroll":n||void 0,style:_,...p,children:k})}var xt=require("@magicx-eng/ai-autocomplete-vanilla"),Pe=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-82820da7")){let e=document.createElement("style");e.id="ac-style-82820da7",e.textContent=`.SuggestionItem-module_item_d4vpD {
|
|
1406
1396
|
position: relative;
|
|
1407
1397
|
overflow: visible;
|
|
1408
1398
|
display: flex;
|
|
@@ -1549,7 +1539,7 @@
|
|
|
1549
1539
|
filter: brightness(0.55);
|
|
1550
1540
|
}
|
|
1551
1541
|
}
|
|
1552
|
-
`,document.head.appendChild(e)}var
|
|
1542
|
+
`,document.head.appendChild(e)}var oe={item:"SuggestionItem-module_item_d4vpD",fadeIn:"SuggestionItem-module_fadeIn_I8u35",riseIn:"SuggestionItem-module_riseIn_etXZT",content:"SuggestionItem-module_content_T-Qba",tappable:"SuggestionItem-module_tappable_70KcX",nonTappable:"SuggestionItem-module_nonTappable_xSZM-",highlighted:"SuggestionItem-module_highlighted_Hb0SU",tag:"SuggestionItem-module_tag_e3Fwe",pressed:"SuggestionItem-module_pressed_98o-r",pressCompress:"SuggestionItem-module_pressCompress_ICV3q",scrollHint:"SuggestionItem-module_scrollHint_xKXPt",skeletonPulse:"SuggestionItem-module_skeletonPulse_plvdD",text:"SuggestionItem-module_text_yqoh9"};var De=require("react/jsx-runtime");function yt({option:e,isHighlighted:o,onSelect:a,onHighlight:n,id:r,loading:i,scrollHint:s,enterDelayMs:f=0}){let[b]=(0,Pe.useState)(f),[w,k]=(0,Pe.useState)(!1),p=(0,Pe.useRef)(void 0);(0,Pe.useEffect)(()=>()=>clearTimeout(p.current),[]);let x=()=>{i||!e.is_tappable||w||(k(!0),a(e),clearTimeout(p.current),p.current=setTimeout(()=>k(!1),170))},_=[oe.item,o&&!i?oe.highlighted:"",e.is_tappable?oe.tappable:oe.nonTappable,w?oe.pressed:"",s?oe.scrollHint:""].filter(Boolean).join(" ");return(0,De.jsx)("div",{id:r,role:"option","data-aia-option":"","data-aia-loading":i?"":void 0,"aria-selected":o,className:_,style:{[xt.OPTION_ENTER_DELAY_VAR]:`${b}ms`},tabIndex:i||!e.is_tappable?-1:0,onClick:x,onKeyDown:v=>{!i&&e.is_tappable&&(v.key==="Enter"||v.key===" ")&&(v.preventDefault(),x())},onMouseEnter:!i&&e.is_tappable?n:void 0,children:(0,De.jsxs)("span",{className:oe.content,children:[(0,De.jsx)("span",{className:oe.text,children:e.icon?`${e.icon} ${e.text}`:e.text}),e.tag&&(0,De.jsx)("span",{className:oe.tag,children:e.tag})]})})}var at=require("react/jsx-runtime");function Yt(){let[e,o]=(0,ge.useState)(H.isOptionsGridMobileViewport);return(0,ge.useEffect)(()=>{if(typeof window>"u"||!window.matchMedia)return;let a=window.matchMedia(H.OPTIONS_GRID_MOBILE_QUERY),n=()=>o(a.matches);return n(),a.addEventListener("change",n),()=>a.removeEventListener("change",n)},[]),e}function _t({options:e,activeIndex:o,onSelect:a,onHighlight:n,listboxId:r,loading:i,groupKey:s="",optionsPosition:f="below"}){let b=Yt(),w=(0,ge.useRef)(null),[k,p]=(0,ge.useState)(null);(0,ge.useLayoutEffect)(()=>{let _=w.current,L=_&&!i&&(0,H.needsOptionsGridMeasurement)(e.length,b)?(0,H.measureOptionsGrid)(_):null;p(L?(0,H.planOptionsGrid)(e.length,b,L.rowWidths,L.gridWidth):null)},[e,b,i]);let x=k??(0,H.planOptionsGrid)(e.length,b,null,null);return(0,at.jsx)(vt,{min:"250px",max:"1fr",gap:"0",scroll:!0,scrollResetKey:s,template:x.template,maxHeight:x.maxHeight,innerRef:_=>{w.current=_},"data-aia-group":s,children:e.map((_,v)=>(0,at.jsx)(yt,{option:_,isHighlighted:v===o,onSelect:a,onHighlight:()=>n(v),id:`${r}-option-${v}`,loading:i,scrollHint:!i&&x.scrollHintIndices.includes(v),enterDelayMs:i?0:(0,H.optionEnterDelayMs)(v,x.cols,e.length,f)},`${s}\0${_.text}`))})}if(typeof document<"u"&&!document.getElementById("ac-style-8414cd5f")){let e=document.createElement("style");e.id="ac-style-8414cd5f",e.textContent=`@layer layout {
|
|
1553
1543
|
.aia-stack {
|
|
1554
1544
|
display: flex;
|
|
1555
1545
|
flex-direction: column;
|
|
@@ -1566,7 +1556,7 @@
|
|
|
1566
1556
|
}
|
|
1567
1557
|
/* data-align="stretch" is the flex default \u2014 no rule needed. */
|
|
1568
1558
|
}
|
|
1569
|
-
`,document.head.appendChild(e)}var
|
|
1559
|
+
`,document.head.appendChild(e)}var Pt=require("react/jsx-runtime");function kt({space:e,align:o="stretch",className:a,children:n,...r}){let i=e?{"--aia-stack-space":e}:void 0;return(0,Pt.jsx)("div",{className:a?`aia-stack ${a}`:"aia-stack","data-align":o,style:i,...r,children:n})}var O=require("react/jsx-runtime"),Xt=[159,119,164],Zt=()=>{},It=()=>{};function Jt(e){let o=()=>typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches,[a,n]=(0,Y.useState)(o);if((0,Y.useEffect)(()=>{if(e!=="auto"||typeof window>"u"||typeof window.matchMedia!="function")return;let r=window.matchMedia("(prefers-color-scheme: dark)"),i=()=>n(r.matches);return r.addEventListener("change",i),()=>r.removeEventListener("change",i)},[e]),e!==void 0)return e==="auto"?a?"dark":"light":e}function ea(e,o){let a=(0,Y.useRef)(null);(0,Y.useEffect)(()=>{let n=e.current,r=o.current;if(!n||!r)return;let i=n.querySelector(".aia-grid[data-scroll]");if(a.current&&a.current.grid!==i&&(a.current.controller.destroy(),a.current=null),i&&!a.current){a.current={grid:i,controller:(0,Ce.attachScrollArrow)({dropdown:n,grid:i,button:r})};return}a.current?.controller.update()}),(0,Y.useEffect)(()=>()=>{a.current?.controller.destroy(),a.current=null},[])}function qe({suggestions:e,activeIndex:o,onSelect:a,onHighlight:n,isOpen:r,id:i,className:s,pills:f,onPillClick:b,showPills:w=!0,onSkip:k,showSkipButton:p=!0,skipDisabled:x=!1,activeSelected:_=!1,isLoading:v=!1,isInputEmpty:L=!1,products:M,onProductSelect:ie,onProductFocusChange:ne,formatType:W="options",dateView:A=null,selectedDateIso:re=null,selectedDateRange:se=null,dateRangeStart:u=null,onPreviousMonth:be,onNextMonth:le,optionsPosition:N="below",mode:Z}){let de=Jt(Z),ce=de!==void 0,J=(0,Y.useRef)(null),ee=(0,Y.useRef)(null);ea(J,ee);let G=e[0]?.options??[],pe=!!(f&&f.length>0&&b),ve=!!(M&&M.length>0),z=r&&(G.length>0||w&&pe||v||ve),q={suggestions:e,activeIndex:o,pills:f,showPills:w,showSkipButton:p,skipDisabled:x,activeSelected:_,isLoading:v,isInputEmpty:L,products:M,formatType:W,dateView:A,selectedDateIso:re,selectedDateRange:se,dateRangeStart:u},ue=(0,Y.useRef)(q);z&&(ue.current=q);let t=z?q:ue.current,c=t.suggestions[0],h=c?.options??[],l=t.activeIndex>=0&&!!h[t.activeIndex]?.is_tappable,y=!!(t.pills&&t.pills.length>0&&b),T=t.showPills&&y,U=t.showPills&&!y&&t.isLoading,d=T||U,he=y&&t.showSkipButton&&!t.isInputEmpty&&!!k,Ie=t.pills?.[0]?.text,we=(0,Ce.isCalendarFormat)(t.formatType)&&t.dateView!=null,xe=h.length>0&&!we,te=h.length>0&&we,Ae=t.isLoading&&!xe&&!te,V=t.products??[];return(0,O.jsxs)("div",{ref:J,id:i,role:"listbox","data-aia-dropdown":"","data-options-position":N,"data-mode":de,"data-aia-loading":t.isLoading?"":void 0,"data-aia-has-products":V.length>0?"":void 0,className:`${ce?"magicx-aia ":""}${me.dropdown} ${z?me.visible:""} ${s??""}`,onMouseDown:j=>j.preventDefault(),children:[(0,O.jsxs)(kt,{space:"8px",children:[(d||he)&&(0,O.jsxs)(Oe,{noWrap:!0,className:me.pillBar,"data-aia-pillbar":"",children:[d&&(0,O.jsx)("span",{className:me.pillScroll,"data-aia-pill-scroll":"",children:(0,O.jsx)(Ke,{pills:t.pills??[],activePillIndex:0,activeSelected:t.activeSelected,onSelectPill:b??(()=>{}),rounded:!0,loading:t.isLoading})}),he&&(0,O.jsx)("button",{type:"button",tabIndex:-1,className:me.skip,"data-aia-skip":"",disabled:t.isLoading||t.skipDisabled,"aria-label":Ie?`Skip ${Ie}`:"Skip",onClick:k,children:"skip"})]}),xe&&(0,O.jsx)(_t,{options:h,activeIndex:t.activeIndex,onSelect:a,onHighlight:n,listboxId:i,loading:t.isLoading,groupKey:c?`${c.type} ${c.text}`:"",optionsPosition:N}),te&&t.dateView&&(0,O.jsx)(pt,{options:h,activeIndex:t.activeIndex,listboxId:i,view:t.dateView,selection:{selectedIso:t.selectedDateIso??null,selectedRange:t.selectedDateRange??null,rangeStart:t.dateRangeStart??null},onSelect:a,onHighlight:n,onPreviousMonth:be??It,onNextMonth:le??It}),Ae&&(0,O.jsx)("div",{className:me.skeletonBars,"data-aia-skeleton-bars":"",children:Xt.map(j=>(0,O.jsx)("span",{className:me.skeletonBar,style:{width:j}},`bar-${j}`))}),(0,O.jsx)(gt,{products:V,listboxId:i,onSelect:ie??Zt,onFocusChange:ne,focusable:z}),(0,O.jsx)(ut,{isOptionHighlighted:l,isInputEmpty:t.isInputEmpty})]}),(0,O.jsx)("button",{ref:ee,type:"button",tabIndex:-1,className:me.scrollArrow,"data-aia-scroll-arrow":"","aria-label":Ce.SCROLL_ARROW_LABEL,"aria-hidden":"true",children:(0,O.jsx)("svg",{viewBox:"0 0 16 16",width:"14",height:"14",fill:"none",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",focusable:"false",children:(0,O.jsx)("path",{d:"M4 6.5 8 10.5l4-4"})})})]})}var Te=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=`.SubmitButton-module_submitButton_otz7H {
|
|
1570
1560
|
flex-shrink: 0;
|
|
1571
1561
|
width: 32px;
|
|
1572
1562
|
height: 32px;
|
|
@@ -1601,5 +1591,5 @@
|
|
|
1601
1591
|
);
|
|
1602
1592
|
cursor: default;
|
|
1603
1593
|
}
|
|
1604
|
-
`,document.head.appendChild(e)}var It={submitButton:"SubmitButton-module_submitButton_otz7H"};var Ue=require("react/jsx-runtime");function At({disabled:e,onClick:a}){return(0,Ue.jsx)("button",{type:"button","data-aia-submit":"",className:It.submitButton,disabled:e,onClick:t=>{t.stopPropagation(),a()},"aria-label":"Submit",children:(0,Ue.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,Ue.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var De=require("@magicx-eng/ai-autocomplete-vanilla"),P=require("react");var ot=require("react");function St(e){let a=(0,ot.useRef)(e);a.current=e;let t=Object.keys(e??{}).sort().join("\0"),i=(0,ot.useRef)({key:"",overrides:void 0});if(i.current.key!==t){let n={};for(let o of Object.keys(e??{})){let r=(g,b,w)=>{let c=a.current?.[o];return c?c(g,b,w):[]};n[o]=r}i.current={key:t,overrides:e?n:void 0}}return{overrides:i.current.overrides,key:t}}var at=require("react");function Ct(e){let a=(0,at.useRef)(e);a.current=e;let t=(0,at.useRef)(null);t.current===null&&(t.current={fetch:(n,o)=>{let r=a.current;return r?r.fetch(n,o):Promise.reject(new Error("products config removed"))},transform:n=>a.current?.transform(n)??[],get limit(){return a.current?.limit}});let i=e!==void 0;return{config:i?t.current:void 0,enabled:i}}var to={text:"",completedParams:[],identifiedParams:[],skippedParams:[],pendingSpan:null,suggestions:[],products:[],optionSearch:null,activeDropdownIndex:-1,newParamId:null,isLoading:!0,isReady:!1,error:null,segments:[],actionableSuggestions:[],filteredOptions:[],activeFormatType:"options",dateView: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};function qe({onSubmit:e,onResult:a,onError:t,optionOverrides:i,maskCompletedText:n,apiConfig:o,additionalContext:r,columns:g=2,dropdownTrigger:b,optionsPosition:w,closeDropdownOnBlur:c,showNonTappableOptions:x,showSkipButton:I,onFocus:y,onBlur:v,value:L,completedParams:M,onChange:ie,onParamsChange:ne,products:U,onProductSelect:A,source:re,setCursor:se}){let p=(0,P.useRef)(null),[le,de]=(0,P.useState)(null),N=(0,P.useRef)(e);N.current=e;let Z=(0,P.useRef)(a);Z.current=a;let ce=(0,P.useRef)(t);ce.current=t;let J=(0,P.useRef)(ie);J.current=ie;let pe=(0,P.useRef)(ne);pe.current=ne;let ue=(0,P.useRef)(y);ue.current=y;let F=(0,P.useRef)(v);F.current=v;let q=(0,P.useRef)(se);q.current=se;let ee=(0,P.useRef)(A);ee.current=A;let $=Ct(U),u=St(i);(0,P.useEffect)(()=>{if(typeof document>"u")return;let h=new De.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:o,additionalContext:r,optionOverrides:u.overrides,maskCompletedText:n,columns:g,dropdownTrigger:b,optionsPosition:w,closeDropdownOnBlur:c,showNonTappableOptions:x,source:re,value:L,completedParams:M,onSubmit:(...R)=>N.current?.(...R),onResult:(...R)=>Z.current?.(...R),onError:(...R)=>ce.current?.(...R),onChange:(...R)=>J.current?.(...R),onParamsChange:(...R)=>pe.current?.(...R),onFocus:()=>ue.current?.(),onBlur:()=>F.current?.(),onProductSelect:R=>ee.current?.(R),setCursor:R=>q.current?.(R),products:$.config});p.current=h,de(h.getState());let j=h.subscribe(R=>de(R));return()=>{j(),h.destroy(),p.current===h&&(p.current=null)}},[]),(0,P.useEffect)(()=>{L!==void 0&&p.current?.setValue(L)},[L]),(0,P.useEffect)(()=>{M!==void 0&&p.current?.setCompletedParams(M)},[M]);let V=JSON.stringify(o??null),s;try{s=JSON.stringify(r??null)}catch{s="[unstringifiable]"}(0,P.useEffect)(()=>{p.current?.update({apiConfig:o,additionalContext:r,optionOverrides:u.overrides,dropdownTrigger:b,optionsPosition:w,closeDropdownOnBlur:c,showNonTappableOptions:x})},[V,s,u.key,b,w,c,x]);let m=(0,P.useRef)(!1);(0,P.useEffect)(()=>{if(!m.current){m.current=!0;return}p.current?.update({products:$.config})},[$.enabled]);let f=(0,P.useRef)(null);f.current===null&&(f.current={handleTextChange:h=>p.current?.handleTextChange(h),handleKeyDown:h=>{let j="nativeEvent"in h?h.nativeEvent:h;p.current?.handleKeyDown(j)},setFocused:h=>p.current?.setFocused(h),startEditingParam:h=>p.current?.startEditingParam(h),exitEditMode:()=>p.current?.exitEditMode(),handleCaretAfterInput:h=>p.current?.handleCaretAfterInput(h),handleCaretMove:h=>p.current?.handleCaretMove(h),replaceEditingRange:h=>p.current?.replaceEditingRange(h)??!1,setActivePill:h=>p.current?.setActivePill(h),skipActivePill:()=>p.current?.skipActivePill(),removeLastParam:()=>p.current?.removeLastParam(),clearNewParamId:()=>p.current?.clearNewParamId(),reset:()=>p.current?.reset(),selectOption:h=>p.current?.selectOption(h),selectProduct:h=>p.current?.selectProduct(h),setActiveDropdownIndex:h=>p.current?.setActiveDropdownIndex(h),showPreviousMonth:()=>p.current?.showPreviousMonth(),showNextMonth:()=>p.current?.showNextMonth(),handleFocus:()=>p.current?.setFocused(!0),handleBlur:()=>p.current?.setFocused(!1)});let l=f.current,_=(0,P.useCallback)(h=>{let j=h.target.value,Ve=j.length>0&&!h.nativeEvent?.isComposing&&j[0]!==j[0].toUpperCase()?j[0].toUpperCase()+j.slice(1):j;p.current?.handleTextChange(Ve)},[]),D=(0,P.useCallback)(h=>{p.current?.handleKeyDown(h.nativeEvent)},[]),G=p.current,d=le??to,me=L!==void 0?L:d.text,Ae=M!==void 0?M:d.completedParams,xe=d.actionableSuggestions,ke=xe[0],te=G?.listboxId??"",he=d.activeDropdownIndex>=0&&G?`${te}-option-${d.activeDropdownIndex}`:void 0,fe=d.editingParam,ge=d.editingIdentified,Te=fe?{type:fe.suggestionType,text:fe.suggestionPlaceholder,required:!0,options:fe.options}:ge?{type:ge.type,text:(0,De.identifiedParamLabel)(ge.type),required:!0,options:[]}:null,Oe=Te??ke,je=Te?[Te]:xe,Me=!G||d.isLoading&&!d.editingParam&&!d.inSelectionAnimation||d.isSearchingOptions;return{completedParams:Ae,skippedParams:d.skippedParams,identifiedParams:d.identifiedParams,suggestionPills:xe,setActivePill:l.setActivePill,skipActivePill:l.skipActivePill,removeLastParam:l.removeLastParam,segments:d.segments,newParamId:d.newParamId,clearNewParamId:l.clearNewParamId,suggestions:d.suggestions,activeIndex:d.activeDropdownIndex,isReady:d.isReady,isLoading:Me,isFocused:d.isFocused,isDropdownOpen:d.isDropdownOpen,isActivePillSelected:d.isActivePillSelected,placeholderText:d.placeholderText,listboxId:te,error:d.error,products:d.products,selectProduct:l.selectProduct,handleTextChange:l.handleTextChange,handleKeyDown:l.handleKeyDown,setFocused:l.setFocused,editingParam:fe,editingIdentified:ge,editingAnchor:d.editingAnchor,caretOffset:d.caretOffset,startEditingParam:l.startEditingParam,exitEditMode:l.exitEditMode,handleCaretAfterInput:l.handleCaretAfterInput,handleCaretMove:l.handleCaretMove,replaceEditingRange:l.replaceEditingRange,inputProps:{value:me,placeholder:d.placeholderText||void 0,onChange:_,onKeyDown:D,onFocus:l.handleFocus,onBlur:l.handleBlur,role:"combobox","aria-expanded":d.isDropdownOpen,"aria-activedescendant":he,"aria-autocomplete":"list","aria-controls":te},reset:l.reset,dropdownProps:{suggestions:Oe?[{...Oe,options:d.filteredOptions}]:[],activeIndex:d.activeDropdownIndex,onSelect:l.selectOption,onHighlight:l.setActiveDropdownIndex,isOpen:d.isDropdownOpen,id:te,pills:je,activeSelected:d.isActivePillSelected,onPillClick:l.setActivePill,onSkip:l.skipActivePill,showSkipButton:(I??!0)&&!fe&&!ge,skipDisabled:d.inSelectionAnimation,isLoading:Me,isInputEmpty:me.trim().length===0,products:d.products,onProductSelect:l.selectProduct,onProductFocusChange:l.setFocused,formatType:d.activeFormatType,dateView:d.dateView,selectedDateIso:ge?ge.iso:(0,De.selectedIsoFromText)(fe?.text),onPreviousMonth:l.showPreviousMonth,onNextMonth:l.showNextMonth,optionsPosition:w??"below"}}}var W=require("@magicx-eng/ai-autocomplete-vanilla"),k=require("react"),$e;function oo(){if($e!==void 0)return $e;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),$e=e.contentEditable==="plaintext-only",$e}function Dt(e){let{segments:a,newParamId:t,editingParam:i,editingIdentified:n,editingAnchor:o,caretOffset:r,placeholderText:g,isFocused:b,isDropdownOpen:w,listboxId:c,activeDescendantId:x,autoFocus:I,handleTextChange:y,handleKeyDown:v,handleCaretAfterInput:L,handleCaretMove:M,startEditingParam:ie,replaceEditingRange:ne,setFocused:U}=e,A=(0,k.useRef)(null),re=(0,k.useRef)(!1),se=(0,k.useRef)(""),p=(0,k.useRef)(""),le=(0,k.useRef)(null),de=(0,k.useRef)(0);le.current=r,(0,k.useEffect)(()=>{if(!I)return;let s=A.current;if(!s)return;document.activeElement===s?U(!0):s.focus();let m=s.ownerDocument??document,f=m.getSelection(),l=f&&f.rangeCount>0&&s.contains(f.anchorNode);if(f&&!l){let _=m.createRange();_.selectNodeContents(s),_.collapse(!0),f.removeAllRanges(),f.addRange(_)}},[I,U]),(0,k.useEffect)(()=>{let s=A.current;if(!s)return;let m=s.ownerDocument??document,f=()=>{let l=m.getSelection();if(!l||l.rangeCount===0||!l.anchorNode||!s.contains(l.anchorNode))return;let _=l.anchorNode,D=_.nodeType===Node.ELEMENT_NODE?_:_.parentElement,d=(l.isCollapsed?D?.closest("strong[data-param-id]"):null)?.dataset.paramId??null,me=i?.id??n?.id??null;if(d&&d!==me){ie(d);return}performance.now()-de.current<50||M((0,W.getCursorOffset)(s))};return m.addEventListener("selectionchange",f),()=>m.removeEventListener("selectionchange",f)},[i,n,ie,M]),(0,k.useLayoutEffect)(()=>{let s=A.current;s&&(0,W.renderEditableContent)({input:s,segments:a,newParamId:t,editingParamId:i?.id??null,placeholderText:g??"",isFocused:b})},[a,t,i,g,b]),(0,k.useLayoutEffect)(()=>{let s=se.current,m=t??"";if(se.current=m,!m||m===s)return;let f=A.current;if(!f)return;f.focus();let l=le.current??(0,W.plainTextLength)(f);(0,W.setCursorOffset)(f,l)},[t]),(0,k.useLayoutEffect)(()=>{let s=p.current,m=i?.id??"";if(p.current=m,!m||m===s||o==null)return;let f=A.current;f&&(0,W.setCursorOffset)(f,o)},[i,o]);let N=(0,k.useCallback)(()=>{if(re.current)return;let s=A.current;if(!s)return;let m=(0,W.extractPlainText)(s),l=m.length>0&&m[0]!==m[0].toUpperCase()?m[0].toUpperCase()+m.slice(1):m;y(l)},[y]),Z=(0,k.useCallback)(()=>{de.current=performance.now(),N();let s=A.current;s&&L((0,W.getCursorOffset)(s))},[N,L]);(0,k.useEffect)(()=>{let s=A.current;if(!s)return;let m=f=>{let l=f,_=l.inputType;if(_==="insertParagraph"||_==="insertLineBreak"||_==="insertFromDrop"){f.preventDefault();return}if(_.startsWith("insert")||_.startsWith("delete")){let D=_.startsWith("delete")?"":l.data??"";ne(D)&&f.preventDefault()}};return s.addEventListener("beforeinput",m),()=>s.removeEventListener("beforeinput",m)},[ne]);let ce=(0,k.useCallback)(()=>{re.current=!0},[]),J=(0,k.useCallback)(()=>{re.current=!1,N()},[N]),pe=(0,k.useCallback)(s=>{s.preventDefault();let m=A.current;if(!m)return;let f=(s.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!f)return;let l=m.ownerDocument??document,_=l.getSelection();if(!_||_.rangeCount===0)return;let D=_.getRangeAt(0);if(!m.contains(D.startContainer))return;D.deleteContents();let G=l.createTextNode(f);D.insertNode(G),D.setStartAfter(G),D.collapse(!0),_.removeAllRanges(),_.addRange(D),N()},[N]),ue=(0,k.useCallback)(s=>v(s),[v]),F=(0,k.useCallback)(()=>U(!0),[U]),q=(0,k.useCallback)(()=>U(!1),[U]),ee=(0,k.useCallback)(()=>A.current?.focus(),[]),$=(0,k.useCallback)(()=>A.current?.blur(),[]),u=(0,k.useCallback)(()=>{let s=A.current;return s?(0,W.extractPlainText)(s):""},[]),V=oo()?"plaintext-only":"true";return{inputRef:A,editorProps:{ref:A,contentEditable:V,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":c,"aria-expanded":w,"aria-activedescendant":x,spellCheck:!0,enterKeyHint:"send",onInput:Z,onKeyDown:ue,onCompositionStart:ce,onCompositionEnd:J,onPaste:pe,onFocus:F,onBlur:q},getPlainText:u,focus:ee,blur:$}}var X=require("react/jsx-runtime");function ao(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var Et=(0,T.forwardRef)(function({onSubmit:a,onResult:t,onError:i,optionOverrides:n,maskCompletedText:o,className:r,apiConfig:g,additionalContext:b,columns:w,pillPlacement:c="dropdown",mode:x="auto",optionsPosition:I="below",animations:y=!0,dropdownTrigger:v,closeDropdownOnBlur:L,showNonTappableOptions:M,showSkipButton:ie,autoFocus:ne=!0,onFocus:U,onBlur:A,value:re,completedParams:se,onChange:p,onParamsChange:le,products:de,onProductSelect:N,submitButton:Z},ce){let J=(0,T.useRef)(null),pe=(0,T.useRef)(null),ue=(0,T.useRef)(()=>{}),F=(0,T.useRef)(null),q=(0,T.useRef)(null);(0,T.useEffect)(()=>{let S=J.current;if(S)return F.current?F.current.setMode(x):F.current=new Ee.ModeController(S,x),()=>{F.current?.destroy(),F.current=null}},[x]);let ee=(0,T.useCallback)(S=>{let ye=q.current?.current;ye&&(ye.focus(),(0,Ee.setCursorOffset)(ye,S))},[]),{completedParams:$,skippedParams:u,identifiedParams:V,isReady:s,suggestionPills:m,setActivePill:f,skipActivePill:l,segments:_,newParamId:D,clearNewParamId:G,placeholderText:d,isFocused:me,isDropdownOpen:Ae,isActivePillSelected:xe,isLoading:ke,activeIndex:te,listboxId:he,handleTextChange:fe,handleKeyDown:ge,setFocused:Te,editingParam:Oe,editingIdentified:je,editingAnchor:Me,caretOffset:h,startEditingParam:j,handleCaretAfterInput:R,handleCaretMove:Ve,replaceEditingRange:Tt,dropdownProps:Rt,reset:Ne}=qe({onSubmit:S=>ue.current(S),onResult:t,onError:i,optionOverrides:n,maskCompletedText:o,apiConfig:g,additionalContext:b,columns:w,dropdownTrigger:v,optionsPosition:I,closeDropdownOnBlur:L,showNonTappableOptions:M,showSkipButton:ie,onFocus:U,onBlur:A,value:re,completedParams:se,onChange:p,onParamsChange:le,products:de,onProductSelect:N,source:"full-sdk",setCursor:ee});(0,T.useEffect)(()=>{if(!D)return;let S=window.setTimeout(()=>G(),650);return()=>window.clearTimeout(S)},[D,G]);let Lt=te>=0?`${he}-option-${te}`:void 0,{inputRef:Ye,editorProps:Ot,focus:ze,blur:it,getPlainText:nt}=Dt({segments:_,newParamId:D,editingParam:Oe,editingIdentified:je,editingAnchor:Me,caretOffset:h,placeholderText:d,isFocused:me,isDropdownOpen:Ae,listboxId:he,activeDescendantId:Lt,autoFocus:ne,handleTextChange:fe,handleKeyDown:ge,handleCaretAfterInput:R,handleCaretMove:Ve,startEditingParam:j,replaceEditingRange:Tt,setFocused:Te});q.current=Ye,(0,T.useLayoutEffect)(()=>{let S=pe.current,ye=Ye.current;if(!S||!ye)return;let rt=()=>{let lt=S.firstElementChild;if(!lt)return;let Bt=lt.getBoundingClientRect(),Ft=ye.getBoundingClientRect();Bt.top>=Ft.bottom-2?S.setAttribute("data-aia-pill-wrapped",""):S.removeAttribute("data-aia-pill-wrapped")};rt();let st=new ResizeObserver(rt);return st.observe(ye),()=>st.disconnect()},[_,m.length,ke,Ye]),(0,T.useImperativeHandle)(ce,()=>({focus:ze,blur:it,reset:Ne,setMode:S=>F.current?.setMode(S),skipActivePill:l}),[ze,it,Ne,l]);let Be=!!_.length||$.length>0,Qe=(0,T.useCallback)(()=>{if(!Be)return;let S=nt();a((0,Ee.buildSubmitResult)(S,$,u,{identifiedParams:V,isReady:s})),Ne()},[Be,$,u,V,s,a,Ne,nt]);ue.current=Qe;let Mt=(0,T.useCallback)(S=>{S.target?.closest("[data-aia-pill]")||ze()},[ze]),Nt=c==="inline",zt=c==="dropdown";return(0,X.jsxs)("div",{ref:J,className:`magicx-aia ${Pe.container} ${r??""}`,"data-pill-placement":c,"data-options-position":I,"data-animations":y?"on":"off","data-mode":ao(x),children:[(0,X.jsx)(We,{...Rt,showPills:zt}),(0,X.jsxs)("div",{className:Pe.inputWrapper,onClick:Mt,children:[(0,X.jsxs)("div",{className:Pe.editorArea,"data-aia-editor":"",children:[(0,X.jsx)("div",{...Ot,className:Pe.input,"data-aia-input":""}),Nt&&(ke||m.length>0)&&(0,X.jsx)("span",{ref:pe,className:Pe.pillListContainer,"data-aia-pill-list-container":"",children:(0,X.jsx)(Ge,{pills:m,activePillIndex:0,activeSelected:xe,onSelectPill:f,loading:ke})})]}),Z===null?null:Z===void 0?(0,X.jsx)(At,{disabled:!Be,onClick:Qe}):(0,X.jsx)("span",{"data-aia-submit":"",className:Pe.submitSlot,onClick:S=>{Be&&(S.stopPropagation(),Qe())},children:Z})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,WEEKDAY_LABELS,buildSubmitResult,cellDay,cellIso,formatDate,isoDate,monthLabel,parseDate,parseLooseDate,useAIAutocomplete,withSkippedParams});
|
|
1594
|
+
`,document.head.appendChild(e)}var At={submitButton:"SubmitButton-module_submitButton_otz7H"};var Ue=require("react/jsx-runtime");function St({disabled:e,onClick:o}){return(0,Ue.jsx)("button",{type:"button","data-aia-submit":"",className:At.submitButton,disabled:e,onClick:a=>{a.stopPropagation(),o()},"aria-label":"Submit",children:(0,Ue.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,Ue.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var Ee=require("@magicx-eng/ai-autocomplete-vanilla"),I=require("react");var ot=require("react");function Dt(e){let o=(0,ot.useRef)(e);o.current=e;let a=Object.keys(e??{}).sort().join("\0"),n=(0,ot.useRef)({key:"",overrides:void 0});if(n.current.key!==a){let r={};for(let i of Object.keys(e??{})){let s=(f,b,w)=>{let k=o.current?.[i];return k?k(f,b,w):[]};r[i]=s}n.current={key:a,overrides:e?r:void 0}}return{overrides:n.current.overrides,key:a}}var it=require("react");function Ct(e){let o=(0,it.useRef)(e);o.current=e;let a=(0,it.useRef)(null);a.current===null&&(a.current={fetch:(r,i)=>{let s=o.current;return s?s.fetch(r,i):Promise.reject(new Error("products config removed"))},transform:r=>o.current?.transform(r)??[],get limit(){return o.current?.limit}});let n=e!==void 0;return{config:n?a.current:void 0,enabled:n}}var ta={text:"",completedParams:[],identifiedParams:[],skippedParams:[],pendingSpan:null,suggestions:[],products:[],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 je({onSubmit:e,onResult:o,onError:a,optionOverrides:n,maskCompletedText:r,apiConfig:i,additionalContext:s,columns:f=2,dropdownTrigger:b,optionsPosition:w,closeDropdownOnBlur:k,showNonTappableOptions:p,showSkipButton:x,onFocus:_,onBlur:v,value:L,completedParams:M,onChange:ie,onParamsChange:ne,products:W,onProductSelect:A,source:re,setCursor:se}){let u=(0,I.useRef)(null),[be,le]=(0,I.useState)(null),N=(0,I.useRef)(e);N.current=e;let Z=(0,I.useRef)(o);Z.current=o;let de=(0,I.useRef)(a);de.current=a;let ce=(0,I.useRef)(ie);ce.current=ie;let J=(0,I.useRef)(ne);J.current=ne;let ee=(0,I.useRef)(_);ee.current=_;let G=(0,I.useRef)(v);G.current=v;let pe=(0,I.useRef)(se);pe.current=se;let ve=(0,I.useRef)(A);ve.current=A;let z=Ct(W),q=Dt(n);(0,I.useEffect)(()=>{if(typeof document>"u")return;let m=new Ee.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:i,additionalContext:s,optionOverrides:q.overrides,maskCompletedText:r,columns:f,dropdownTrigger:b,optionsPosition:w,closeDropdownOnBlur:k,showNonTappableOptions:p,source:re,value:L,completedParams:M,onSubmit:(...R)=>N.current?.(...R),onResult:(...R)=>Z.current?.(...R),onError:(...R)=>de.current?.(...R),onChange:(...R)=>ce.current?.(...R),onParamsChange:(...R)=>J.current?.(...R),onFocus:()=>ee.current?.(),onBlur:()=>G.current?.(),onProductSelect:R=>ve.current?.(R),setCursor:R=>pe.current?.(R),products:z.config});u.current=m,le(m.getState());let $=m.subscribe(R=>le(R));return()=>{$(),m.destroy(),u.current===m&&(u.current=null)}},[]),(0,I.useEffect)(()=>{L!==void 0&&u.current?.setValue(L)},[L]),(0,I.useEffect)(()=>{M!==void 0&&u.current?.setCompletedParams(M)},[M]);let ue=JSON.stringify(i??null),t;try{t=JSON.stringify(s??null)}catch{t="[unstringifiable]"}(0,I.useEffect)(()=>{u.current?.update({apiConfig:i,additionalContext:s,optionOverrides:q.overrides,dropdownTrigger:b,optionsPosition:w,closeDropdownOnBlur:k,showNonTappableOptions:p})},[ue,t,q.key,b,w,k,p]);let c=(0,I.useRef)(!1);(0,I.useEffect)(()=>{if(!c.current){c.current=!0;return}u.current?.update({products:z.config})},[z.enabled]);let h=(0,I.useRef)(null);h.current===null&&(h.current={handleTextChange:m=>u.current?.handleTextChange(m),handleKeyDown:m=>{let $="nativeEvent"in m?m.nativeEvent:m;u.current?.handleKeyDown($)},setFocused:m=>u.current?.setFocused(m),startEditingParam:m=>u.current?.startEditingParam(m),exitEditMode:()=>u.current?.exitEditMode(),handleCaretAfterInput:m=>u.current?.handleCaretAfterInput(m),handleCaretMove:m=>u.current?.handleCaretMove(m),replaceEditingRange:m=>u.current?.replaceEditingRange(m)??!1,setActivePill:m=>u.current?.setActivePill(m),skipActivePill:()=>u.current?.skipActivePill(),removeLastParam:()=>u.current?.removeLastParam(),clearNewParamId:()=>u.current?.clearNewParamId(),reset:()=>u.current?.reset(),selectOption:m=>u.current?.selectOption(m),selectProduct:m=>u.current?.selectProduct(m),setActiveDropdownIndex:m=>u.current?.setActiveDropdownIndex(m),showPreviousMonth:()=>u.current?.showPreviousMonth(),showNextMonth:()=>u.current?.showNextMonth(),handleFocus:()=>u.current?.setFocused(!0),handleBlur:()=>u.current?.setFocused(!1)});let l=h.current,y=(0,I.useCallback)(m=>{let $=m.target.value,Qe=$.length>0&&!m.nativeEvent?.isComposing&&$[0]!==$[0].toUpperCase()?$[0].toUpperCase()+$.slice(1):$;u.current?.handleTextChange(Qe)},[]),T=(0,I.useCallback)(m=>{u.current?.handleKeyDown(m.nativeEvent)},[]),U=u.current,d=be??ta,he=L!==void 0?L:d.text,Ie=M!==void 0?M:d.completedParams,we=d.actionableSuggestions,xe=we[0],te=U?.listboxId??"",Ae=d.activeDropdownIndex>=0&&U?`${te}-option-${d.activeDropdownIndex}`:void 0,V=d.editingParam,j=d.editingIdentified,Re=V?{type:V.suggestionType,text:V.suggestionPlaceholder,required:!0,options:V.options}:j?{type:j.type,text:(0,Ee.identifiedParamLabel)(j.type),required:!0,options:[]}:null,Ne=Re??xe,Ve=Re?[Re]:we,Le=(0,Ee.dateSelectionFor)(d),ze=!U||d.isLoading&&!d.editingParam&&!d.inSelectionAnimation||d.isSearchingOptions;return{completedParams:Ie,skippedParams:d.skippedParams,identifiedParams:d.identifiedParams,suggestionPills:we,setActivePill:l.setActivePill,skipActivePill:l.skipActivePill,removeLastParam:l.removeLastParam,segments:d.segments,newParamId:d.newParamId,clearNewParamId:l.clearNewParamId,suggestions:d.suggestions,activeIndex:d.activeDropdownIndex,isReady:d.isReady,isLoading:ze,isFocused:d.isFocused,isDropdownOpen:d.isDropdownOpen,isActivePillSelected:d.isActivePillSelected,placeholderText:d.placeholderText,listboxId:te,error:d.error,products:d.products,selectProduct:l.selectProduct,handleTextChange:l.handleTextChange,handleKeyDown:l.handleKeyDown,setFocused:l.setFocused,editingParam:V,editingIdentified:j,editingAnchor:d.editingAnchor,caretOffset:d.caretOffset,startEditingParam:l.startEditingParam,exitEditMode:l.exitEditMode,handleCaretAfterInput:l.handleCaretAfterInput,handleCaretMove:l.handleCaretMove,replaceEditingRange:l.replaceEditingRange,inputProps:{value:he,placeholder:d.placeholderText||void 0,onChange:y,onKeyDown:T,onFocus:l.handleFocus,onBlur:l.handleBlur,role:"combobox","aria-expanded":d.isDropdownOpen,"aria-activedescendant":Ae,"aria-autocomplete":"list","aria-controls":te},reset:l.reset,dropdownProps:{suggestions:Ne?[{...Ne,options:d.filteredOptions}]:[],activeIndex:d.activeDropdownIndex,onSelect:l.selectOption,onHighlight:l.setActiveDropdownIndex,isOpen:d.isDropdownOpen,id:te,pills:Ve,activeSelected:d.isActivePillSelected,onPillClick:l.setActivePill,onSkip:l.skipActivePill,showSkipButton:(x??!0)&&!V&&!j,skipDisabled:d.inSelectionAnimation,isLoading:ze,isInputEmpty:he.trim().length===0,products:d.products,onProductSelect:l.selectProduct,onProductFocusChange:l.setFocused,formatType:d.activeFormatType,dateView:d.dateView,selectedDateIso:Le.selectedIso,selectedDateRange:Le.selectedRange,dateRangeStart:Le.rangeStart,onPreviousMonth:l.showPreviousMonth,onNextMonth:l.showNextMonth,optionsPosition:w??"below"}}}var K=require("@magicx-eng/ai-autocomplete-vanilla"),P=require("react"),$e;function aa(){if($e!==void 0)return $e;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),$e=e.contentEditable==="plaintext-only",$e}function Et(e){let{segments:o,newParamId:a,editingParam:n,editingIdentified:r,editingAnchor:i,caretOffset:s,placeholderText:f,isFocused:b,isDropdownOpen:w,listboxId:k,activeDescendantId:p,autoFocus:x,handleTextChange:_,handleKeyDown:v,handleCaretAfterInput:L,handleCaretMove:M,startEditingParam:ie,replaceEditingRange:ne,setFocused:W}=e,A=(0,P.useRef)(null),re=(0,P.useRef)(!1),se=(0,P.useRef)(""),u=(0,P.useRef)(""),be=(0,P.useRef)(null),le=(0,P.useRef)(0);be.current=s,(0,P.useEffect)(()=>{if(!x)return;let t=A.current;if(!t)return;document.activeElement===t?W(!0):t.focus();let c=t.ownerDocument??document,h=c.getSelection(),l=h&&h.rangeCount>0&&t.contains(h.anchorNode);if(h&&!l){let y=c.createRange();y.selectNodeContents(t),y.collapse(!0),h.removeAllRanges(),h.addRange(y)}},[x,W]),(0,P.useEffect)(()=>{let t=A.current;if(!t)return;let c=t.ownerDocument??document,h=()=>{let l=c.getSelection();if(!l||l.rangeCount===0||!l.anchorNode||!t.contains(l.anchorNode))return;let y=l.anchorNode,T=y.nodeType===Node.ELEMENT_NODE?y:y.parentElement,d=(l.isCollapsed?T?.closest("strong[data-param-id]"):null)?.dataset.paramId??null,he=n?.id??r?.id??null;if(d&&d!==he){ie(d);return}performance.now()-le.current<50||M((0,K.getCursorOffset)(t))};return c.addEventListener("selectionchange",h),()=>c.removeEventListener("selectionchange",h)},[n,r,ie,M]),(0,P.useLayoutEffect)(()=>{let t=A.current;t&&(0,K.renderEditableContent)({input:t,segments:o,newParamId:a,editingParamId:n?.id??null,placeholderText:f??"",isFocused:b})},[o,a,n,f,b]),(0,P.useLayoutEffect)(()=>{let t=se.current,c=a??"";if(se.current=c,!c||c===t)return;let h=A.current;if(!h)return;h.focus();let l=be.current??(0,K.plainTextLength)(h);(0,K.setCursorOffset)(h,l)},[a]),(0,P.useLayoutEffect)(()=>{let t=u.current,c=n?.id??"";if(u.current=c,!c||c===t||i==null)return;let h=A.current;h&&(0,K.setCursorOffset)(h,i)},[n,i]);let N=(0,P.useCallback)(()=>{if(re.current)return;let t=A.current;if(!t)return;let c=(0,K.extractPlainText)(t),l=c.length>0&&c[0]!==c[0].toUpperCase()?c[0].toUpperCase()+c.slice(1):c;_(l)},[_]),Z=(0,P.useCallback)(()=>{le.current=performance.now(),N();let t=A.current;t&&L((0,K.getCursorOffset)(t))},[N,L]);(0,P.useEffect)(()=>{let t=A.current;if(!t)return;let c=h=>{let l=h,y=l.inputType;if(y==="insertParagraph"||y==="insertLineBreak"||y==="insertFromDrop"){h.preventDefault();return}if(y.startsWith("insert")||y.startsWith("delete")){let T=y.startsWith("delete")?"":l.data??"";ne(T)&&h.preventDefault()}};return t.addEventListener("beforeinput",c),()=>t.removeEventListener("beforeinput",c)},[ne]);let de=(0,P.useCallback)(()=>{re.current=!0},[]),ce=(0,P.useCallback)(()=>{re.current=!1,N()},[N]),J=(0,P.useCallback)(t=>{t.preventDefault();let c=A.current;if(!c)return;let h=(t.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!h)return;let l=c.ownerDocument??document,y=l.getSelection();if(!y||y.rangeCount===0)return;let T=y.getRangeAt(0);if(!c.contains(T.startContainer))return;T.deleteContents();let U=l.createTextNode(h);T.insertNode(U),T.setStartAfter(U),T.collapse(!0),y.removeAllRanges(),y.addRange(T),N()},[N]),ee=(0,P.useCallback)(t=>v(t),[v]),G=(0,P.useCallback)(()=>W(!0),[W]),pe=(0,P.useCallback)(()=>W(!1),[W]),ve=(0,P.useCallback)(()=>A.current?.focus(),[]),z=(0,P.useCallback)(()=>A.current?.blur(),[]),q=(0,P.useCallback)(()=>{let t=A.current;return t?(0,K.extractPlainText)(t):""},[]),ue=aa()?"plaintext-only":"true";return{inputRef:A,editorProps:{ref:A,contentEditable:ue,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":k,"aria-expanded":w,"aria-activedescendant":p,spellCheck:!0,enterKeyHint:"send",onInput:Z,onKeyDown:ee,onCompositionStart:de,onCompositionEnd:ce,onPaste:J,onFocus:G,onBlur:pe},getPlainText:q,focus:ve,blur:z}}var X=require("react/jsx-runtime");function oa(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var Tt=(0,E.forwardRef)(function({onSubmit:o,onResult:a,onError:n,optionOverrides:r,maskCompletedText:i,className:s,apiConfig:f,additionalContext:b,columns:w,pillPlacement:k="dropdown",mode:p="auto",optionsPosition:x="below",animations:_=!0,dropdownTrigger:v,closeDropdownOnBlur:L,showNonTappableOptions:M,showSkipButton:ie,autoFocus:ne=!0,onFocus:W,onBlur:A,value:re,completedParams:se,onChange:u,onParamsChange:be,products:le,onProductSelect:N,submitButton:Z},de){let ce=(0,E.useRef)(null),J=(0,E.useRef)(null),ee=(0,E.useRef)(()=>{}),G=(0,E.useRef)(null),pe=(0,E.useRef)(null);(0,E.useEffect)(()=>{let S=ce.current;if(S)return G.current?G.current.setMode(p):G.current=new Te.ModeController(S,p),()=>{G.current?.destroy(),G.current=null}},[p]);let ve=(0,E.useCallback)(S=>{let ye=pe.current?.current;ye&&(ye.focus(),(0,Te.setCursorOffset)(ye,S))},[]),{completedParams:z,skippedParams:q,identifiedParams:ue,isReady:t,suggestionPills:c,setActivePill:h,skipActivePill:l,segments:y,newParamId:T,clearNewParamId:U,placeholderText:d,isFocused:he,isDropdownOpen:Ie,isActivePillSelected:we,isLoading:xe,activeIndex:te,listboxId:Ae,handleTextChange:V,handleKeyDown:j,setFocused:Re,editingParam:Ne,editingIdentified:Ve,editingAnchor:Le,caretOffset:ze,startEditingParam:m,handleCaretAfterInput:$,handleCaretMove:R,replaceEditingRange:Qe,dropdownProps:Rt,reset:Be}=je({onSubmit:S=>ee.current(S),onResult:a,onError:n,optionOverrides:r,maskCompletedText:i,apiConfig:f,additionalContext:b,columns:w,dropdownTrigger:v,optionsPosition:x,closeDropdownOnBlur:L,showNonTappableOptions:M,showSkipButton:ie,onFocus:W,onBlur:A,value:re,completedParams:se,onChange:u,onParamsChange:be,products:le,onProductSelect:N,source:"full-sdk",setCursor:ve});(0,E.useEffect)(()=>{if(!T)return;let S=window.setTimeout(()=>U(),650);return()=>window.clearTimeout(S)},[T,U]);let Lt=te>=0?`${Ae}-option-${te}`:void 0,{inputRef:Ye,editorProps:Ot,focus:Ge,blur:nt,getPlainText:rt}=Et({segments:y,newParamId:T,editingParam:Ne,editingIdentified:Ve,editingAnchor:Le,caretOffset:ze,placeholderText:d,isFocused:he,isDropdownOpen:Ie,listboxId:Ae,activeDescendantId:Lt,autoFocus:ne,handleTextChange:V,handleKeyDown:j,handleCaretAfterInput:$,handleCaretMove:R,startEditingParam:m,replaceEditingRange:Qe,setFocused:Re});pe.current=Ye,(0,E.useLayoutEffect)(()=>{let S=J.current,ye=Ye.current;if(!S||!ye)return;let st=()=>{let dt=S.firstElementChild;if(!dt)return;let Bt=dt.getBoundingClientRect(),Gt=ye.getBoundingClientRect();Bt.top>=Gt.bottom-2?S.setAttribute("data-aia-pill-wrapped",""):S.removeAttribute("data-aia-pill-wrapped")};st();let lt=new ResizeObserver(st);return lt.observe(ye),()=>lt.disconnect()},[y,c.length,xe,Ye]),(0,E.useImperativeHandle)(de,()=>({focus:Ge,blur:nt,reset:Be,setMode:S=>G.current?.setMode(S),skipActivePill:l}),[Ge,nt,Be,l]);let Fe=!!y.length||z.length>0,Xe=(0,E.useCallback)(()=>{if(!Fe)return;let S=rt();o((0,Te.buildSubmitResult)(S,z,q,{identifiedParams:ue,isReady:t})),Be()},[Fe,z,q,ue,t,o,Be,rt]);ee.current=Xe;let Mt=(0,E.useCallback)(S=>{S.target?.closest("[data-aia-pill]")||Ge()},[Ge]),Nt=k==="inline",zt=k==="dropdown";return(0,X.jsxs)("div",{ref:ce,className:`magicx-aia ${ke.container} ${s??""}`,"data-pill-placement":k,"data-options-position":x,"data-animations":_?"on":"off","data-mode":oa(p),children:[(0,X.jsx)(qe,{...Rt,showPills:zt}),(0,X.jsxs)("div",{className:ke.inputWrapper,onClick:Mt,children:[(0,X.jsxs)("div",{className:ke.editorArea,"data-aia-editor":"",children:[(0,X.jsx)("div",{...Ot,className:ke.input,"data-aia-input":""}),Nt&&(xe||c.length>0)&&(0,X.jsx)("span",{ref:J,className:ke.pillListContainer,"data-aia-pill-list-container":"",children:(0,X.jsx)(Ke,{pills:c,activePillIndex:0,activeSelected:we,onSelectPill:h,loading:xe})})]}),Z===null?null:Z===void 0?(0,X.jsx)(St,{disabled:!Fe,onClick:Xe}):(0,X.jsx)("span",{"data-aia-submit":"",className:ke.submitSlot,onClick:S=>{Fe&&(S.stopPropagation(),Xe())},children:Z})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,DATE_RANGE_META_END,DATE_RANGE_META_START,WEEKDAY_LABELS,buildSubmitResult,cellDay,cellIso,dateCellMarks,formatDate,formatDateRange,isoDate,monthLabel,parseDate,parseLooseDate,parseLooseDateRange,selectedRangeFor,useAIAutocomplete,visibleDateRange,withSkippedParams});
|
|
1605
1595
|
//# sourceMappingURL=index.js.map
|