@magicx-eng/ai-autocomplete-react 0.9.1 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -0
- package/dist/index.d.mts +54 -2
- package/dist/index.d.ts +54 -2
- package/dist/index.js +84 -21
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +84 -21
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -240,6 +240,7 @@ function App() {
|
|
|
240
240
|
| `dropdownTrigger?` | `"auto" \| "manual" \| "hidden"` | `"auto"` | When the dropdown appears. `"auto"` = when options available. `"manual"` = only on pill tap, closes after selection. `"hidden"` = never shows. |
|
|
241
241
|
| `closeDropdownOnBlur?` | `boolean` | `true` | When `true`, the dropdown closes if the input loses focus. Set to `false` to keep it open whenever options are available, regardless of focus. |
|
|
242
242
|
| `showNonTappableOptions?` | `boolean` | `true` | When `true`, non-tappable options are rendered alongside tappable ones in the dropdown. Set to `false` to hide non-tappable options entirely. |
|
|
243
|
+
| `showSkipButton?` | `boolean` | `true` | When `true`, the dropdown's pill bar ends in a small "skip" button that dismisses the active pill — same action as pressing <kbd>→</kbd> at the end of the input. It sits top-right when the dropdown opens below the input, bottom-right when `optionsPosition` is `"above"`. Set to `false` to hide it. |
|
|
243
244
|
| `autoFocus?` | `boolean` | `true` | Focus the input on mount. Set to `false` to leave focus to the consumer. |
|
|
244
245
|
| `onFocus?` | `() => void` | — | Called when the input gains focus. |
|
|
245
246
|
| `onBlur?` | `() => void` | — | Called when the input loses focus. |
|
|
@@ -438,6 +439,7 @@ The headless hook for Tier 2 and Tier 3. Accepts the same options as `<AIAutocom
|
|
|
438
439
|
| Field | Type | Description |
|
|
439
440
|
|---|---|---|
|
|
440
441
|
| `setActivePill` | `(index: number) => void` | Move pill at `index` to front (active). |
|
|
442
|
+
| `skipActivePill` | `() => void` | Skip the active pill — same action as → / the dropdown's skip button. Records it in `skippedParams`; no-ops during re-edit and the post-selection window. Already wired into `dropdownProps.onSkip`; call it directly for a custom skip affordance (e.g. with `showSkipButton: false`). Also exposed on the Tier 1 imperative handle. |
|
|
441
443
|
| `removeLastParam` | `() => void` | Remove the last completed param from state. The text stays in the input as plain text. |
|
|
442
444
|
| `clearNewParamId` | `() => void` | Clear shimmer animation state. |
|
|
443
445
|
| `reset` | `() => void` | Clear all state, re-fetch, and start a new session (rotates `session_id`). Call this after handling submit. |
|
|
@@ -580,6 +582,8 @@ For styling beyond the CSS variables, target these stable `data-aia-*` attribute
|
|
|
580
582
|
| `[data-aia-submit]` | Submit button |
|
|
581
583
|
| `[data-aia-pill]` | Each unfilled-suggestion pill |
|
|
582
584
|
| `[data-aia-pillbar]` | Pill bar container inside the dropdown |
|
|
585
|
+
| `[data-aia-pill-scroll]` | Scrollable pill region inside the bar — carries the horizontal scroll and right-edge fade mask |
|
|
586
|
+
| `[data-aia-skip]` | The pill bar's trailing "skip" button. Tune via `--aia-skip-font-size` / `--aia-skip-color` / `--aia-skip-color-hover` / `--aia-skip-hover-bg` |
|
|
583
587
|
| `[data-aia-option]` | Each suggestion option |
|
|
584
588
|
| `[data-aia-dropdown]` | The dropdown root (listbox). Carries `data-aia-has-products` while the product strip has cards. |
|
|
585
589
|
| `[data-aia-products]` | Product strip section (label + row) |
|
package/dist/index.d.mts
CHANGED
|
@@ -9,6 +9,12 @@ interface AIAutocompleteHandle {
|
|
|
9
9
|
blur: () => void;
|
|
10
10
|
reset: () => void;
|
|
11
11
|
setMode: (mode: AppearanceMode) => void;
|
|
12
|
+
/**
|
|
13
|
+
* Skip the active pill — same action as the dropdown's skip button / →.
|
|
14
|
+
* Lets a consumer who hides the built-in button (`showSkipButton={false}`)
|
|
15
|
+
* drive skipping from their own UI without dropping to Tier 2.
|
|
16
|
+
*/
|
|
17
|
+
skipActivePill: () => void;
|
|
12
18
|
}
|
|
13
19
|
interface AIAutocompleteProps {
|
|
14
20
|
onSubmit: (result: AutocompleteResult) => void;
|
|
@@ -32,6 +38,17 @@ interface AIAutocompleteProps {
|
|
|
32
38
|
closeDropdownOnBlur?: boolean;
|
|
33
39
|
/** When true (default), non-tappable options are rendered in the dropdown alongside tappable ones. Set to false to hide them entirely. */
|
|
34
40
|
showNonTappableOptions?: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* When true (default), the dropdown's pill bar ends in a small "skip" button
|
|
43
|
+
* that dismisses the active pill — same action as pressing → at the end of
|
|
44
|
+
* the input. It sits at the trailing edge of the bar: visually top-right when
|
|
45
|
+
* the dropdown opens below the input, bottom-right when `optionsPosition` is
|
|
46
|
+
* "above". Set to false to hide it. When pills render elsewhere
|
|
47
|
+
* (`pillPlacement: "inline"` / `"hidden"`) the bar renders as a skip-only
|
|
48
|
+
* row holding just the button; it hides during re-edit and on the loading
|
|
49
|
+
* skeleton either way.
|
|
50
|
+
*/
|
|
51
|
+
showSkipButton?: boolean;
|
|
35
52
|
/** Focus the input on mount. Default: true. */
|
|
36
53
|
autoFocus?: boolean;
|
|
37
54
|
/** Called when the input gains focus. */
|
|
@@ -97,6 +114,12 @@ interface UseAIAutocompleteOptions {
|
|
|
97
114
|
closeDropdownOnBlur?: boolean;
|
|
98
115
|
/** When true (default), non-tappable options are rendered in the dropdown alongside tappable ones. Set to false to hide them entirely. */
|
|
99
116
|
showNonTappableOptions?: boolean;
|
|
117
|
+
/**
|
|
118
|
+
* When true (default), `dropdownProps` asks the dropdown to render its
|
|
119
|
+
* trailing "skip" button (see `AIAutocompleteProps.showSkipButton`). Set to
|
|
120
|
+
* false to hide it.
|
|
121
|
+
*/
|
|
122
|
+
showSkipButton?: boolean;
|
|
100
123
|
/** Called when the input gains focus. */
|
|
101
124
|
onFocus?: () => void;
|
|
102
125
|
/** Called when the input loses focus. */
|
|
@@ -151,6 +174,13 @@ interface UseAIAutocompleteReturn {
|
|
|
151
174
|
skippedParams: SkippedParamState[];
|
|
152
175
|
suggestionPills: Suggestion[];
|
|
153
176
|
setActivePill: (index: number) => void;
|
|
177
|
+
/**
|
|
178
|
+
* Skip the active pill — same action as pressing → at the end of the input.
|
|
179
|
+
* The built-in dropdown's skip button calls this; hand-rolled skip
|
|
180
|
+
* affordances call it directly. The skipped suggestion joins
|
|
181
|
+
* `skippedParams`.
|
|
182
|
+
*/
|
|
183
|
+
skipActivePill: () => void;
|
|
154
184
|
removeLastParam: () => void;
|
|
155
185
|
reset: () => void;
|
|
156
186
|
segments: Segment[];
|
|
@@ -235,6 +265,28 @@ interface AIAutocompleteDropdownProps {
|
|
|
235
265
|
onPillClick?: (index: number) => void;
|
|
236
266
|
/** Whether to render pills inside the dropdown. Default: true. Tier 2 consumers who render their own pills should set this to false. */
|
|
237
267
|
showPills?: boolean;
|
|
268
|
+
/**
|
|
269
|
+
* Skip the active pill — the pill bar's trailing "skip" button routes here.
|
|
270
|
+
* Provided by `dropdownProps` from the hook (wired to `skipActivePill`).
|
|
271
|
+
* The button only renders when this is set.
|
|
272
|
+
*/
|
|
273
|
+
onSkip?: () => void;
|
|
274
|
+
/**
|
|
275
|
+
* Whether the pill bar ends in the "skip" trailing button. Default: true
|
|
276
|
+
* (the hook's `dropdownProps` already folds in the `showSkipButton` option
|
|
277
|
+
* and hides the button during re-edit). Requires `onSkip` and real `pills`;
|
|
278
|
+
* with `showPills` false the bar renders as a skip-only row holding just
|
|
279
|
+
* the button.
|
|
280
|
+
*/
|
|
281
|
+
showSkipButton?: boolean;
|
|
282
|
+
/**
|
|
283
|
+
* Extra disabled gate for the skip button beyond `isLoading`. Provided by
|
|
284
|
+
* `dropdownProps` from the hook (wired to `inSelectionAnimation`): the
|
|
285
|
+
* UI-facing loading flag is deliberately suppressed during the ~500ms
|
|
286
|
+
* post-selection window, but `skipActivePill` no-ops in it — the button
|
|
287
|
+
* renders disabled instead of swallowing clicks silently. Default: false.
|
|
288
|
+
*/
|
|
289
|
+
skipDisabled?: boolean;
|
|
238
290
|
/** Whether the active pill renders selected (full opacity) vs. the `first` tier. Provided by `dropdownProps` from the hook. Default: false. */
|
|
239
291
|
activeSelected?: boolean;
|
|
240
292
|
/** True while a fetch for the latest query is in flight. Replaces options/pills with a skeleton. */
|
|
@@ -275,8 +327,8 @@ interface AIAutocompleteDropdownProps {
|
|
|
275
327
|
|
|
276
328
|
declare const AIAutocomplete: react.ForwardRefExoticComponent<AIAutocompleteProps & react.RefAttributes<AIAutocompleteHandle>>;
|
|
277
329
|
|
|
278
|
-
declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, isOpen, id, className, pills, onPillClick, showPills, activeSelected, isLoading, isInputEmpty, products, onProductSelect, onProductFocusChange, optionsPosition, mode, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
|
|
330
|
+
declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, isOpen, id, className, pills, onPillClick, showPills, onSkip, showSkipButton, skipDisabled, activeSelected, isLoading, isInputEmpty, products, onProductSelect, onProductFocusChange, optionsPosition, mode, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
|
|
279
331
|
|
|
280
|
-
declare function useAIAutocomplete({ onSubmit, onError, optionOverrides, maskCompletedText, apiConfig, columns, dropdownTrigger, optionsPosition, closeDropdownOnBlur, showNonTappableOptions, onFocus, onBlur, value: controlledValue, completedParams: controlledParams, onChange: onChangeProp, onParamsChange, products, onProductSelect, source, setCursor, }: UseAIAutocompleteOptions): UseAIAutocompleteReturn;
|
|
332
|
+
declare function useAIAutocomplete({ onSubmit, onError, optionOverrides, maskCompletedText, apiConfig, columns, dropdownTrigger, optionsPosition, closeDropdownOnBlur, showNonTappableOptions, showSkipButton, onFocus, onBlur, value: controlledValue, completedParams: controlledParams, onChange: onChangeProp, onParamsChange, products, onProductSelect, source, setCursor, }: UseAIAutocompleteOptions): UseAIAutocompleteReturn;
|
|
281
333
|
|
|
282
334
|
export { AIAutocomplete, AIAutocompleteDropdown, type AIAutocompleteDropdownProps, type AIAutocompleteHandle, type AIAutocompleteProps, type UseAIAutocompleteOptions, type UseAIAutocompleteReturn, useAIAutocomplete };
|
package/dist/index.d.ts
CHANGED
|
@@ -9,6 +9,12 @@ interface AIAutocompleteHandle {
|
|
|
9
9
|
blur: () => void;
|
|
10
10
|
reset: () => void;
|
|
11
11
|
setMode: (mode: AppearanceMode) => void;
|
|
12
|
+
/**
|
|
13
|
+
* Skip the active pill — same action as the dropdown's skip button / →.
|
|
14
|
+
* Lets a consumer who hides the built-in button (`showSkipButton={false}`)
|
|
15
|
+
* drive skipping from their own UI without dropping to Tier 2.
|
|
16
|
+
*/
|
|
17
|
+
skipActivePill: () => void;
|
|
12
18
|
}
|
|
13
19
|
interface AIAutocompleteProps {
|
|
14
20
|
onSubmit: (result: AutocompleteResult) => void;
|
|
@@ -32,6 +38,17 @@ interface AIAutocompleteProps {
|
|
|
32
38
|
closeDropdownOnBlur?: boolean;
|
|
33
39
|
/** When true (default), non-tappable options are rendered in the dropdown alongside tappable ones. Set to false to hide them entirely. */
|
|
34
40
|
showNonTappableOptions?: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* When true (default), the dropdown's pill bar ends in a small "skip" button
|
|
43
|
+
* that dismisses the active pill — same action as pressing → at the end of
|
|
44
|
+
* the input. It sits at the trailing edge of the bar: visually top-right when
|
|
45
|
+
* the dropdown opens below the input, bottom-right when `optionsPosition` is
|
|
46
|
+
* "above". Set to false to hide it. When pills render elsewhere
|
|
47
|
+
* (`pillPlacement: "inline"` / `"hidden"`) the bar renders as a skip-only
|
|
48
|
+
* row holding just the button; it hides during re-edit and on the loading
|
|
49
|
+
* skeleton either way.
|
|
50
|
+
*/
|
|
51
|
+
showSkipButton?: boolean;
|
|
35
52
|
/** Focus the input on mount. Default: true. */
|
|
36
53
|
autoFocus?: boolean;
|
|
37
54
|
/** Called when the input gains focus. */
|
|
@@ -97,6 +114,12 @@ interface UseAIAutocompleteOptions {
|
|
|
97
114
|
closeDropdownOnBlur?: boolean;
|
|
98
115
|
/** When true (default), non-tappable options are rendered in the dropdown alongside tappable ones. Set to false to hide them entirely. */
|
|
99
116
|
showNonTappableOptions?: boolean;
|
|
117
|
+
/**
|
|
118
|
+
* When true (default), `dropdownProps` asks the dropdown to render its
|
|
119
|
+
* trailing "skip" button (see `AIAutocompleteProps.showSkipButton`). Set to
|
|
120
|
+
* false to hide it.
|
|
121
|
+
*/
|
|
122
|
+
showSkipButton?: boolean;
|
|
100
123
|
/** Called when the input gains focus. */
|
|
101
124
|
onFocus?: () => void;
|
|
102
125
|
/** Called when the input loses focus. */
|
|
@@ -151,6 +174,13 @@ interface UseAIAutocompleteReturn {
|
|
|
151
174
|
skippedParams: SkippedParamState[];
|
|
152
175
|
suggestionPills: Suggestion[];
|
|
153
176
|
setActivePill: (index: number) => void;
|
|
177
|
+
/**
|
|
178
|
+
* Skip the active pill — same action as pressing → at the end of the input.
|
|
179
|
+
* The built-in dropdown's skip button calls this; hand-rolled skip
|
|
180
|
+
* affordances call it directly. The skipped suggestion joins
|
|
181
|
+
* `skippedParams`.
|
|
182
|
+
*/
|
|
183
|
+
skipActivePill: () => void;
|
|
154
184
|
removeLastParam: () => void;
|
|
155
185
|
reset: () => void;
|
|
156
186
|
segments: Segment[];
|
|
@@ -235,6 +265,28 @@ interface AIAutocompleteDropdownProps {
|
|
|
235
265
|
onPillClick?: (index: number) => void;
|
|
236
266
|
/** Whether to render pills inside the dropdown. Default: true. Tier 2 consumers who render their own pills should set this to false. */
|
|
237
267
|
showPills?: boolean;
|
|
268
|
+
/**
|
|
269
|
+
* Skip the active pill — the pill bar's trailing "skip" button routes here.
|
|
270
|
+
* Provided by `dropdownProps` from the hook (wired to `skipActivePill`).
|
|
271
|
+
* The button only renders when this is set.
|
|
272
|
+
*/
|
|
273
|
+
onSkip?: () => void;
|
|
274
|
+
/**
|
|
275
|
+
* Whether the pill bar ends in the "skip" trailing button. Default: true
|
|
276
|
+
* (the hook's `dropdownProps` already folds in the `showSkipButton` option
|
|
277
|
+
* and hides the button during re-edit). Requires `onSkip` and real `pills`;
|
|
278
|
+
* with `showPills` false the bar renders as a skip-only row holding just
|
|
279
|
+
* the button.
|
|
280
|
+
*/
|
|
281
|
+
showSkipButton?: boolean;
|
|
282
|
+
/**
|
|
283
|
+
* Extra disabled gate for the skip button beyond `isLoading`. Provided by
|
|
284
|
+
* `dropdownProps` from the hook (wired to `inSelectionAnimation`): the
|
|
285
|
+
* UI-facing loading flag is deliberately suppressed during the ~500ms
|
|
286
|
+
* post-selection window, but `skipActivePill` no-ops in it — the button
|
|
287
|
+
* renders disabled instead of swallowing clicks silently. Default: false.
|
|
288
|
+
*/
|
|
289
|
+
skipDisabled?: boolean;
|
|
238
290
|
/** Whether the active pill renders selected (full opacity) vs. the `first` tier. Provided by `dropdownProps` from the hook. Default: false. */
|
|
239
291
|
activeSelected?: boolean;
|
|
240
292
|
/** True while a fetch for the latest query is in flight. Replaces options/pills with a skeleton. */
|
|
@@ -275,8 +327,8 @@ interface AIAutocompleteDropdownProps {
|
|
|
275
327
|
|
|
276
328
|
declare const AIAutocomplete: react.ForwardRefExoticComponent<AIAutocompleteProps & react.RefAttributes<AIAutocompleteHandle>>;
|
|
277
329
|
|
|
278
|
-
declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, isOpen, id, className, pills, onPillClick, showPills, activeSelected, isLoading, isInputEmpty, products, onProductSelect, onProductFocusChange, optionsPosition, mode, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
|
|
330
|
+
declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, isOpen, id, className, pills, onPillClick, showPills, onSkip, showSkipButton, skipDisabled, activeSelected, isLoading, isInputEmpty, products, onProductSelect, onProductFocusChange, optionsPosition, mode, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
|
|
279
331
|
|
|
280
|
-
declare function useAIAutocomplete({ onSubmit, onError, optionOverrides, maskCompletedText, apiConfig, columns, dropdownTrigger, optionsPosition, closeDropdownOnBlur, showNonTappableOptions, onFocus, onBlur, value: controlledValue, completedParams: controlledParams, onChange: onChangeProp, onParamsChange, products, onProductSelect, source, setCursor, }: UseAIAutocompleteOptions): UseAIAutocompleteReturn;
|
|
332
|
+
declare function useAIAutocomplete({ onSubmit, onError, optionOverrides, maskCompletedText, apiConfig, columns, dropdownTrigger, optionsPosition, closeDropdownOnBlur, showNonTappableOptions, showSkipButton, onFocus, onBlur, value: controlledValue, completedParams: controlledParams, onChange: onChangeProp, onParamsChange, products, onProductSelect, source, setCursor, }: UseAIAutocompleteOptions): UseAIAutocompleteReturn;
|
|
281
333
|
|
|
282
334
|
export { AIAutocomplete, AIAutocompleteDropdown, type AIAutocompleteDropdownProps, type AIAutocompleteHandle, type AIAutocompleteProps, type UseAIAutocompleteOptions, type UseAIAutocompleteReturn, useAIAutocomplete };
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var We=Object.defineProperty;var It=Object.getOwnPropertyDescriptor;var St=Object.getOwnPropertyNames;var At=Object.prototype.hasOwnProperty;var Ct=(e,o)=>{for(var a in o)We(e,a,{get:o[a],enumerable:!0})},Et=(e,o,a,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of St(o))!At.call(e,s)&&s!==a&&We(e,s,{get:()=>o[s],enumerable:!(n=It(o,s))||n.enumerable});return e};var Dt=e=>Et(We({},"__esModule",{value:!0}),e);var Ht={};Ct(Ht,{AIAutocomplete:()=>bt,AIAutocompleteDropdown:()=>ze,buildSubmitResult:()=>Ne.buildSubmitResult,useAIAutocomplete:()=>Fe,withSkippedParams:()=>Ne.withSkippedParams});module.exports=Dt(Ht);var Ne=require("@magicx-eng/ai-autocomplete-vanilla");var P=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
|
|
@@ -179,7 +179,7 @@
|
|
|
179
179
|
opacity: 0;
|
|
180
180
|
}
|
|
181
181
|
}
|
|
182
|
-
`,document.head.appendChild(e)}var
|
|
182
|
+
`,document.head.appendChild(e)}var me={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 ve=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-0ae03977")){let e=document.createElement("style");e.id="ac-style-0ae03977",e.textContent=`/*
|
|
183
183
|
* Built-in appearance defaults \u2014 zero specificity via :where().
|
|
184
184
|
* Consumer CSS always wins without !important.
|
|
185
185
|
*
|
|
@@ -380,13 +380,16 @@
|
|
|
380
380
|
text's left edge.
|
|
381
381
|
|
|
382
382
|
Selector shape differs from the vanilla/Angular copies (which target the
|
|
383
|
-
\`.aia-pill-list\` / \`.aia-pill\` class names):
|
|
384
|
-
hash-scoped
|
|
385
|
-
|
|
386
|
-
pill-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
383
|
+
\`.aia-pill-list\` / \`.aia-pill\` class names): the module classes here are
|
|
384
|
+
hash-scoped locals, unreachable from this global stylesheet. The bar's
|
|
385
|
+
direct \`> span\` child is the masked scroll wrapper (\`.pillScroll\`, tagged
|
|
386
|
+
\`data-aia-pill-scroll\`) that holds PillList, so the 10px indent lands on
|
|
387
|
+
the wrapper and the module zeroes PillList's own base padding underneath
|
|
388
|
+
(\`.pillScroll > span\` in AIAutocompleteDropdown.module.css \u2014 remove one
|
|
389
|
+
only with the other). Pills are matched via \`[data-aia-pill]\` (unique to
|
|
390
|
+
ParamPill). Like the sibling structural \`[data-aia-dropdown]\` rules below,
|
|
391
|
+
this is deliberately NOT \`:where()\`-wrapped \u2014 it must win over ParamPill's
|
|
392
|
+
own \`.pill\` base rule. */
|
|
390
393
|
[data-aia-dropdown] [data-aia-pillbar] > span {
|
|
391
394
|
padding-inline: 10px;
|
|
392
395
|
}
|
|
@@ -555,8 +558,23 @@
|
|
|
555
558
|
}
|
|
556
559
|
|
|
557
560
|
/* The dropdown container owns the 10px/8px edge padding and the 8px section
|
|
558
|
-
gaps (matching Figma); the pill row adds none
|
|
561
|
+
gaps (matching Figma); the pill row adds none. The horizontal scroll + fade
|
|
562
|
+
live on the inner .pillScroll wrapper, NOT the bar itself: the trailing skip
|
|
563
|
+
button is the bar's other child, and a mask on the bar would fade it out
|
|
564
|
+
along with the overflowing pills it's meant to sit beside. */
|
|
559
565
|
.AIAutocompleteDropdown-module_pillBar_pwTXe {
|
|
566
|
+
overflow: hidden;
|
|
567
|
+
}
|
|
568
|
+
|
|
569
|
+
/* Scrollable region for the pills. The appearance layer's
|
|
570
|
+
\`[data-aia-pillbar] > span\` rule lands here (10px inline padding aligning
|
|
571
|
+
the param label with the option text), so the inner PillList span must not
|
|
572
|
+
add its own base padding on top \u2014 see the child rule below. */
|
|
573
|
+
.AIAutocompleteDropdown-module_pillScroll_Tpzus {
|
|
574
|
+
display: inline-flex;
|
|
575
|
+
align-items: center;
|
|
576
|
+
flex: 1 1 auto;
|
|
577
|
+
min-width: 0;
|
|
560
578
|
overflow-x: auto;
|
|
561
579
|
overflow-y: hidden;
|
|
562
580
|
scrollbar-width: none;
|
|
@@ -564,10 +582,55 @@
|
|
|
564
582
|
-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 48px), transparent 100%);
|
|
565
583
|
}
|
|
566
584
|
|
|
567
|
-
.AIAutocompleteDropdown-
|
|
585
|
+
.AIAutocompleteDropdown-module_pillScroll_Tpzus > span {
|
|
586
|
+
padding-inline: 0;
|
|
587
|
+
}
|
|
588
|
+
|
|
589
|
+
.AIAutocompleteDropdown-module_pillScroll_Tpzus::-webkit-scrollbar {
|
|
568
590
|
display: none;
|
|
569
591
|
}
|
|
570
592
|
|
|
593
|
+
/* Trailing "skip" button \u2014 dismisses the active pill, same action as pressing
|
|
594
|
+
\u2192 at the end of the input. Pinned at the bar's far edge (auto inline-start
|
|
595
|
+
margin), outside the masked scroller. Typography follows the footer hint
|
|
596
|
+
(quiet chrome), not the pills. Declarations mirror \`.magicx-aia-skip\` in the
|
|
597
|
+
vanilla stylesheet \u2014 change both in the same commit. */
|
|
598
|
+
.AIAutocompleteDropdown-module_skip_7-olS {
|
|
599
|
+
display: inline-flex;
|
|
600
|
+
align-items: center;
|
|
601
|
+
margin-inline-start: auto;
|
|
602
|
+
flex-shrink: 0;
|
|
603
|
+
padding: 5px 8px;
|
|
604
|
+
border: none;
|
|
605
|
+
/* Matches the completed-param chip radius, so the hover fill reads as a
|
|
606
|
+
soft rectangle rather than a capsule. */
|
|
607
|
+
border-radius: 6px;
|
|
608
|
+
background: transparent;
|
|
609
|
+
font-family: inherit;
|
|
610
|
+
font-size: var(--aia-skip-font-size, 10px);
|
|
611
|
+
line-height: 18px;
|
|
612
|
+
color: var(--aia-skip-color, var(--aia-footer-hint-color, #505050));
|
|
613
|
+
cursor: pointer;
|
|
614
|
+
white-space: nowrap;
|
|
615
|
+
transition:
|
|
616
|
+
color 150ms ease-out,
|
|
617
|
+
background-color 150ms ease-out;
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
.AIAutocompleteDropdown-module_skip_7-olS:hover {
|
|
621
|
+
color: var(--aia-skip-color-hover, var(--aia-pill-color, var(--aia-color-text-muted, #c1c4cb)));
|
|
622
|
+
/* Same fill as a highlighted option row (--aia-option-bg), so the hover
|
|
623
|
+
reads with the dropdown's own hover language and stays visible on both
|
|
624
|
+
mode surfaces. */
|
|
625
|
+
background: var(--aia-skip-hover-bg, var(--aia-option-bg, transparent));
|
|
626
|
+
}
|
|
627
|
+
|
|
628
|
+
.AIAutocompleteDropdown-module_skip_7-olS:disabled {
|
|
629
|
+
pointer-events: none;
|
|
630
|
+
cursor: default;
|
|
631
|
+
opacity: 0.5;
|
|
632
|
+
}
|
|
633
|
+
|
|
571
634
|
/* --- Fallback loading skeleton (only when no pills/options are cached) --- */
|
|
572
635
|
.AIAutocompleteDropdown-module_skeletonBars_HVr9C {
|
|
573
636
|
display: flex;
|
|
@@ -602,7 +665,7 @@
|
|
|
602
665
|
opacity: 0.25;
|
|
603
666
|
}
|
|
604
667
|
}
|
|
605
|
-
`,document.head.appendChild(e)}var
|
|
668
|
+
`,document.head.appendChild(e)}var se={dropdown:"AIAutocompleteDropdown-module_dropdown_yz2KC",visible:"AIAutocompleteDropdown-module_visible_QCoXj",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 ge=require("@magicx-eng/ai-autocomplete-vanilla"),De=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 {
|
|
606
669
|
.aia-cluster {
|
|
607
670
|
display: flex;
|
|
608
671
|
flex-wrap: wrap;
|
|
@@ -644,7 +707,7 @@
|
|
|
644
707
|
justify-content: space-around;
|
|
645
708
|
}
|
|
646
709
|
}
|
|
647
|
-
`,document.head.appendChild(e)}var
|
|
710
|
+
`,document.head.appendChild(e)}var Ue=require("react/jsx-runtime");function ke({gap:e,align:o="center",justify:a="start",noWrap:n=!1,inline:s=!1,className:d,children:i,...m}){let b=e?{"--aia-cluster-gap":e}:void 0,w={className:d?`aia-cluster ${d}`:"aia-cluster","data-align":o,"data-justify":a,"data-nowrap":n||void 0,"data-inline":s||void 0,style:b,...m};return s?(0,Ue.jsx)("span",{...w,children:i}):(0,Ue.jsx)("div",{...w,children:i})}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
|
|
648
711
|
dropdown's rounded edges. The top inset (--aia-footer-gap) adds breathing
|
|
649
712
|
room above the hint/branding row so the footer doesn't butt against the last
|
|
650
713
|
option row \u2014 additive to the dropdown's 8px section gap. */
|
|
@@ -774,7 +837,7 @@
|
|
|
774
837
|
justify-content: flex-end;
|
|
775
838
|
}
|
|
776
839
|
}
|
|
777
|
-
`,document.head.appendChild(e)}var
|
|
840
|
+
`,document.head.appendChild(e)}var te={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 Q=require("react/jsx-runtime");function et({isOptionHighlighted:e=!1,isInputEmpty:o=!1}){let{key:a,hint:n}=(0,ge.getFooterHint)(e,o),[s,d]=(0,De.useState)(ge.ATTRIBUTION_URL);return(0,De.useEffect)(()=>{d((0,ge.buildAttributionUrl)())},[]),(0,Q.jsx)("footer",{className:te.footer,"data-aia-footer":"",children:(0,Q.jsxs)(ke,{justify:"between",noWrap:!0,className:te.row,children:[(0,Q.jsxs)(ke,{gap:"5px",className:te.hintGroup,children:[(0,Q.jsx)("kbd",{className:te.key,children:a}),(0,Q.jsx)("span",{className:te.hint,children:n})]}),(0,Q.jsxs)("a",{className:te.brandLink,href:s,target:"_blank",rel:"noopener noreferrer",children:[(0,Q.jsx)("span",{className:te.brand,children:"AI"}),(0,Q.jsx)("span",{className:te.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,
|
|
778
841
|
no outline. ~28px via 6px padding + 14px text + the 1px border (border-box).
|
|
779
842
|
The border is kept as a 1px transparent line so the box stays the same size
|
|
780
843
|
as it was when the outline was dashed. */
|
|
@@ -831,7 +894,7 @@
|
|
|
831
894
|
opacity: 0;
|
|
832
895
|
}
|
|
833
896
|
}
|
|
834
|
-
`,document.head.appendChild(e)}var le={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
|
|
897
|
+
`,document.head.appendChild(e)}var le={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 at=require("react/jsx-runtime"),Ve={selected:1,first:.7,next:.4,last:.2};function tt({label:e,state:o,rounded:a,loading:n,onClick:s}){let d=[le.pill,a?le.rounded:"",n?le.skeleton:""].filter(Boolean).join(" ");return(0,at.jsx)("button",{type:"button","data-aia-pill":"","data-aia-loading":n?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:d,style:{opacity:Ve[o]},onMouseDown:i=>i.preventDefault(),onClick:n?void 0:s,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 {
|
|
835
898
|
position: relative;
|
|
836
899
|
z-index: 1;
|
|
837
900
|
pointer-events: auto;
|
|
@@ -841,7 +904,7 @@
|
|
|
841
904
|
align-items: center;
|
|
842
905
|
vertical-align: middle;
|
|
843
906
|
}
|
|
844
|
-
`,document.head.appendChild(e)}var
|
|
907
|
+
`,document.head.appendChild(e)}var qe={list:"PillList-module_list_qvLqO"};var _e=require("react/jsx-runtime"),Rt=[125,69];function ot(e){return e===0?"first":e===1?"next":"last"}function Re({pills:e,activePillIndex:o,onSelectPill:a,activeSelected:n,rounded:s,loading:d}){return d&&e.length===0?(0,_e.jsx)("span",{className:qe.list,"data-aia-pill-list-loading":"",children:Rt.map((i,m)=>(0,_e.jsx)("span",{"data-aia-pill-skeleton":"",className:`${le.pill} ${s?le.rounded:""} ${le.skeleton}`,style:{width:i,opacity:Ve[ot(m)]}},`skel-${i}`))}):(0,_e.jsx)("span",{className:qe.list,"data-aia-pill-list-loading":d?"":void 0,children:e.map((i,m)=>{let b=!!n&&m===o;return(0,_e.jsx)(tt,{label:i.text,state:b?"selected":ot(m),selected:b,rounded:s,loading:d,onClick:()=>a(m)},`${i.type}-${i.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
|
|
845
908
|
(packages/vanilla/src/styles.css). Same tokens, same defaults, so a consumer
|
|
846
909
|
theming one package sees the same result in the other.
|
|
847
910
|
|
|
@@ -1008,7 +1071,7 @@
|
|
|
1008
1071
|
var(--aia-option-color-selected, var(--aia-color-text-default, #fff))
|
|
1009
1072
|
);
|
|
1010
1073
|
}
|
|
1011
|
-
`,document.head.appendChild(e)}var
|
|
1074
|
+
`,document.head.appendChild(e)}var K={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 L=require("react/jsx-runtime");function it({products:e,listboxId:o,onSelect:a,onFocusChange:n,focusable:s=!0}){if(e.length===0)return null;let d=`${o}-products-label`;return(0,L.jsxs)("section",{className:K.section,"data-aia-products":"",role:"group","aria-labelledby":d,children:[(0,L.jsx)("div",{className:K.label,id:d,children:"Products"}),(0,L.jsx)("div",{className:K.row,"data-aia-products-row":"",children:e.map((i,m)=>(0,L.jsx)(Tt,{product:i,id:`${o}-product-${m}`,onSelect:a,onFocusChange:n,focusable:s},i.id))})]})}function Tt({product:e,id:o,onSelect:a,onFocusChange:n,focusable:s}){let d=i=>{i.metaKey||i.ctrlKey||i.shiftKey||i.altKey||i.button!==0||(i.preventDefault(),a(e))};return(0,L.jsxs)("a",{id:o,className:K.card,"data-aia-product":"",role:"option","aria-selected":!1,href:e.url,tabIndex:s?0:-1,onClick:d,onKeyDown:i=>{i.key!=="Enter"&&i.key!==" "||(i.preventDefault(),a(e))},onFocus:()=>n?.(!0),onBlur:i=>{i.relatedTarget?.closest("[data-aia-dropdown]")||n?.(!1)},children:[(0,L.jsx)("span",{className:K.media,"data-aia-product-placeholder":e.imageUrl?void 0:"",children:e.imageUrl?(0,L.jsx)("img",{className:K.image,src:e.imageUrl,alt:"",loading:"lazy",decoding:"async"}):null}),(0,L.jsxs)("span",{className:K.body,children:[e.vendor?(0,L.jsx)("span",{className:K.vendor,children:e.vendor}):null,(0,L.jsx)("span",{className:K.title,children:e.title}),e.price?(0,L.jsx)("span",{className:K.price,children:e.price}):null]})]})}var be=require("@magicx-eng/ai-autocomplete-vanilla"),Le=require("react");var rt=require("@magicx-eng/ai-autocomplete-vanilla"),Te=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 {
|
|
1012
1075
|
.aia-grid {
|
|
1013
1076
|
display: grid;
|
|
1014
1077
|
grid-template-columns: repeat(
|
|
@@ -1043,7 +1106,7 @@
|
|
|
1043
1106
|
border-radius: 3px;
|
|
1044
1107
|
}
|
|
1045
1108
|
}
|
|
1046
|
-
`,document.head.appendChild(e)}var
|
|
1109
|
+
`,document.head.appendChild(e)}var st=require("react/jsx-runtime");function nt({min:e="16rem",max:o,gap:a,scroll:n=!1,maxHeight:s,scrollResetKey:d,cols:i,className:m,children:b,...w}){let S=(0,Te.useRef)(null);(0,Te.useLayoutEffect)(()=>{if(d===void 0)return;let F=S.current;F&&(F.scrollTop=0)},[d]);let y={"--aia-grid-min":e};return o&&(y["--aia-grid-max"]=o),a&&(y["--aia-grid-gap"]=a),s&&(y["--aia-grid-max-height"]=s),i&&(y.gridTemplateColumns=(0,rt.optionsGridTemplateColumns)(i)),(0,st.jsx)("div",{ref:S,className:m?`aia-grid ${m}`:"aia-grid","data-scroll":n||void 0,style:y,...w,children:b})}var fe=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 {
|
|
1047
1110
|
position: relative;
|
|
1048
1111
|
overflow: visible;
|
|
1049
1112
|
display: flex;
|
|
@@ -1393,7 +1456,7 @@
|
|
|
1393
1456
|
filter: brightness(0.55);
|
|
1394
1457
|
}
|
|
1395
1458
|
}
|
|
1396
|
-
`,document.head.appendChild(e)}var
|
|
1459
|
+
`,document.head.appendChild(e)}var W={item:"SuggestionItem-module_item_d4vpD",fadeIn:"SuggestionItem-module_fadeIn_I8u35",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",glassFade:"SuggestionItem-module_glassFade_oyiSj",tapDown:"SuggestionItem-module_tapDown_G3WGz",streaks:"SuggestionItem-module_streaks_d9PEB",streaksVert:"SuggestionItem-module_streaksVert_ERlV1",streakHorizRight:"SuggestionItem-module_streakHorizRight_aboGz",streakHorizLeft:"SuggestionItem-module_streakHorizLeft_BreWJ",streakVertUp:"SuggestionItem-module_streakVertUp_to1GD",streakVertDown:"SuggestionItem-module_streakVertDown_OrcLh",skeletonPulse:"SuggestionItem-module_skeletonPulse_plvdD",text:"SuggestionItem-module_text_yqoh9"};var de=require("react/jsx-runtime");function lt({option:e,isHighlighted:o,onSelect:a,onHighlight:n,id:s,loading:d}){let[i,m]=(0,fe.useState)(!1),b=(0,fe.useRef)(void 0);(0,fe.useEffect)(()=>()=>clearTimeout(b.current),[]);let w=()=>{d||!e.is_tappable||i||(m(!0),a(e),clearTimeout(b.current),b.current=setTimeout(()=>m(!1),500))},S=[W.item,o&&!d?W.highlighted:"",e.is_tappable?W.tappable:W.nonTappable,i?W.pressed:""].filter(Boolean).join(" ");return(0,de.jsxs)("div",{id:s,role:"option","data-aia-option":"","data-aia-loading":d?"":void 0,"aria-selected":o,className:S,tabIndex:d||!e.is_tappable?-1:0,onClick:w,onKeyDown:y=>{!d&&e.is_tappable&&(y.key==="Enter"||y.key===" ")&&(y.preventDefault(),w())},onMouseEnter:!d&&e.is_tappable?n:void 0,children:[(0,de.jsx)("div",{className:W.streaks}),(0,de.jsx)("div",{className:W.streaksVert}),(0,de.jsxs)("span",{className:W.content,children:[(0,de.jsx)("span",{className:W.text,children:e.icon?`${e.icon} ${e.text}`:e.text}),e.tag&&(0,de.jsx)("span",{className:W.tag,children:e.tag})]})]})}var $e=require("react/jsx-runtime");function Lt(){let[e,o]=(0,Le.useState)(be.isOptionsGridMobileViewport);return(0,Le.useEffect)(()=>{if(typeof window>"u"||!window.matchMedia)return;let a=window.matchMedia(be.OPTIONS_GRID_MOBILE_QUERY),n=()=>o(a.matches);return n(),a.addEventListener("change",n),()=>a.removeEventListener("change",n)},[]),e}function dt({options:e,activeIndex:o,onSelect:a,onHighlight:n,listboxId:s,loading:d,groupKey:i}){let m=Lt(),{cols:b,maxHeight:w}=(0,be.computeOptionsGridLayout)(e.length,m);return(0,$e.jsx)(nt,{min:"250px",max:"1fr",gap:"0",scroll:!0,scrollResetKey:i,cols:b,maxHeight:w,children:e.map((S,y)=>(0,$e.jsx)(lt,{option:S,isHighlighted:y===o,onSelect:a,onHighlight:()=>n(y),id:`${s}-option-${y}`,loading:d},S.text))})}if(typeof document<"u"&&!document.getElementById("ac-style-8414cd5f")){let e=document.createElement("style");e.id="ac-style-8414cd5f",e.textContent=`@layer layout {
|
|
1397
1460
|
.aia-stack {
|
|
1398
1461
|
display: flex;
|
|
1399
1462
|
flex-direction: column;
|
|
@@ -1410,7 +1473,7 @@
|
|
|
1410
1473
|
}
|
|
1411
1474
|
/* data-align="stretch" is the flex default \u2014 no rule needed. */
|
|
1412
1475
|
}
|
|
1413
|
-
`,document.head.appendChild(e)}var
|
|
1476
|
+
`,document.head.appendChild(e)}var ct=require("react/jsx-runtime");function pt({space:e,align:o="stretch",className:a,children:n,...s}){let d=e?{"--aia-stack-space":e}:void 0;return(0,ct.jsx)("div",{className:a?`aia-stack ${a}`:"aia-stack","data-align":o,style:d,...s,children:n})}var z=require("react/jsx-runtime"),zt=[159,119,164],Bt=()=>{};function Ft(e){let o=()=>typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches,[a,n]=(0,ve.useState)(o);if((0,ve.useEffect)(()=>{if(e!=="auto"||typeof window>"u"||typeof window.matchMedia!="function")return;let s=window.matchMedia("(prefers-color-scheme: dark)"),d=()=>n(s.matches);return s.addEventListener("change",d),()=>s.removeEventListener("change",d)},[e]),e!==void 0)return e==="auto"?a?"dark":"light":e}function ze({suggestions:e,activeIndex:o,onSelect:a,onHighlight:n,isOpen:s,id:d,className:i,pills:m,onPillClick:b,showPills:w=!0,onSkip:S,showSkipButton:y=!0,skipDisabled:F=!1,activeSelected:R=!1,isLoading:D=!1,isInputEmpty:J=!1,products:M,onProductSelect:ae,onProductFocusChange:T,optionsPosition:_="below",mode:V}){let c=Ft(V),oe=c!==void 0,X=e[0]?.options??[],Z=!!(m&&m.length>0&&b),C=!!(M&&M.length>0),N=s&&(X.length>0||w&&Z||D||C),O={suggestions:e,activeIndex:o,pills:m,showPills:w,showSkipButton:y,skipDisabled:F,activeSelected:R,isLoading:D,isInputEmpty:J,products:M},q=(0,ve.useRef)(O);N&&(q.current=O);let h=N?O:q.current,A=h.suggestions[0],H=A?.options??[],Y=h.activeIndex>=0&&!!H[h.activeIndex]?.is_tappable,G=!!(h.pills&&h.pills.length>0&&b),$=h.showPills&&G,j=h.showPills&&!G&&h.isLoading,ee=$||j,l=G&&h.showSkipButton&&!!S,t=h.pills?.[0]?.text,u=H.length>0,v=h.isLoading&&!u,g=h.products??[];return(0,z.jsx)("div",{id:d,role:"listbox","data-aia-dropdown":"","data-options-position":_,"data-mode":c,"data-aia-loading":h.isLoading?"":void 0,"data-aia-has-products":g.length>0?"":void 0,className:`${oe?"magicx-aia ":""}${se.dropdown} ${N?se.visible:""} ${i??""}`,onMouseDown:r=>r.preventDefault(),children:(0,z.jsxs)(pt,{space:"8px",children:[(ee||l)&&(0,z.jsxs)(ke,{noWrap:!0,className:se.pillBar,"data-aia-pillbar":"",children:[ee&&(0,z.jsx)("span",{className:se.pillScroll,"data-aia-pill-scroll":"",children:(0,z.jsx)(Re,{pills:h.pills??[],activePillIndex:0,activeSelected:h.activeSelected,onSelectPill:b??(()=>{}),rounded:!0,loading:h.isLoading})}),l&&(0,z.jsx)("button",{type:"button",tabIndex:-1,className:se.skip,"data-aia-skip":"",disabled:h.isLoading||h.skipDisabled,"aria-label":t?`Skip ${t}`:"Skip",onClick:S,children:"skip"})]}),u&&(0,z.jsx)(dt,{options:H,activeIndex:h.activeIndex,onSelect:a,onHighlight:n,listboxId:d,loading:h.isLoading,groupKey:A?`${A.type} ${A.text}`:""}),v&&(0,z.jsx)("div",{className:se.skeletonBars,"data-aia-skeleton-bars":"",children:zt.map(r=>(0,z.jsx)("span",{className:se.skeletonBar,style:{width:r}},`bar-${r}`))}),(0,z.jsx)(it,{products:g,listboxId:d,onSelect:ae??Bt,onFocusChange:T,focusable:N}),(0,z.jsx)(et,{isOptionHighlighted:Y,isInputEmpty:h.isInputEmpty})]})})}var xe=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 {
|
|
1414
1477
|
flex-shrink: 0;
|
|
1415
1478
|
width: 32px;
|
|
1416
1479
|
height: 32px;
|
|
@@ -1445,5 +1508,5 @@
|
|
|
1445
1508
|
);
|
|
1446
1509
|
cursor: default;
|
|
1447
1510
|
}
|
|
1448
|
-
`,document.head.appendChild(e)}var pt={submitButton:"SubmitButton-module_submitButton_otz7H"};var Le=require("react/jsx-runtime");function ct({disabled:e,onClick:o}){return(0,Le.jsx)("button",{type:"button","data-aia-submit":"",className:pt.submitButton,disabled:e,onClick:a=>{a.stopPropagation(),o()},"aria-label":"Submit",children:(0,Le.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,Le.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var mt=require("@magicx-eng/ai-autocomplete-vanilla"),b=require("react");var qe=require("react");function ut(e){let o=(0,qe.useRef)(e);o.current=e;let a=(0,qe.useRef)(null);a.current===null&&(a.current={fetch:(s,l)=>{let r=o.current;return r?r.fetch(s,l):Promise.reject(new Error("products config removed"))},transform:s=>o.current?.transform(s)??[],get limit(){return o.current?.limit}});let n=e!==void 0;return{config:n?a.current:void 0,enabled:n}}var Bt={text:"",completedParams:[],identifiedParams:[],skippedParams:[],pendingSpan:null,suggestions:[],products:[],activeDropdownIndex:-1,newParamId:null,isLoading:!0,isReady:!1,error:null,segments:[],actionableSuggestions:[],filteredOptions:[],placeholderText:"",isDropdownOpen:!1,isActivePillSelected:!1,filterBase:0,filterInProgress:!1,pillTapped:!1,skipNextFetch:!1,lastRawQuery:"",isFocused:!1,editingParam:null,editingAnchor:null,editingTail:null,caretOffset:null,inSelectionAnimation:!1};function ze({onSubmit:e,onError:o,optionOverrides:a,maskCompletedText:n,apiConfig:s,columns:l=2,dropdownTrigger:r,optionsPosition:u,closeDropdownOnBlur:g,showNonTappableOptions:w,onFocus:I,onBlur:v,value:S,completedParams:A,onChange:Q,onParamsChange:X,products:oe,onProductSelect:J,source:D,setCursor:y}){let p=(0,b.useRef)(null),[ie,Z]=(0,b.useState)(null),F=(0,b.useRef)(e);F.current=e;let T=(0,b.useRef)(o);T.current=o;let R=(0,b.useRef)(Q);R.current=Q;let f=(0,b.useRef)(X);f.current=X;let M=(0,b.useRef)(I);M.current=I;let N=(0,b.useRef)(v);N.current=v;let L=(0,b.useRef)(y);L.current=y;let V=(0,b.useRef)(J);V.current=J;let Y=ut(oe);(0,b.useEffect)(()=>{if(typeof document>"u")return;let d=new mt.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:s,optionOverrides:a,maskCompletedText:n,columns:l,dropdownTrigger:r,optionsPosition:u,closeDropdownOnBlur:g,showNonTappableOptions:w,source:D,value:S,completedParams:A,onSubmit:(...P)=>F.current?.(...P),onError:(...P)=>T.current?.(...P),onChange:(...P)=>R.current?.(...P),onParamsChange:(...P)=>f.current?.(...P),onFocus:()=>M.current?.(),onBlur:()=>N.current?.(),onProductSelect:P=>V.current?.(P),setCursor:P=>L.current?.(P),products:Y.config});p.current=d,Z(d.getState());let E=d.subscribe(P=>Z(P));return()=>{E(),d.destroy(),p.current===d&&(p.current=null)}},[]),(0,b.useEffect)(()=>{S!==void 0&&p.current?.setValue(S)},[S]),(0,b.useEffect)(()=>{A!==void 0&&p.current?.setCompletedParams(A)},[A]);let ee=JSON.stringify(s??null),q=(0,b.useRef)(a),H=(0,b.useRef)(0);if(a!==q.current){let d=q.current,E=a,P=Object.keys(d??{}),me=Object.keys(E??{});(P.length!==me.length||me.some(ne=>!d?.[ne]||E[ne]!==d[ne]))&&H.current++,q.current=a}(0,b.useEffect)(()=>{p.current?.update({apiConfig:s,optionOverrides:a,dropdownTrigger:r,optionsPosition:u,closeDropdownOnBlur:g,showNonTappableOptions:w})},[ee,H.current,r,u,g,w]);let re=(0,b.useRef)(!1);(0,b.useEffect)(()=>{if(!re.current){re.current=!0;return}p.current?.update({products:Y.config})},[Y.enabled]);let O=(0,b.useRef)(null);O.current===null&&(O.current={handleTextChange:d=>p.current?.handleTextChange(d),handleKeyDown:d=>{let E="nativeEvent"in d?d.nativeEvent:d;p.current?.handleKeyDown(E)},setFocused:d=>p.current?.setFocused(d),startEditingParam:d=>p.current?.startEditingParam(d),exitEditMode:()=>p.current?.exitEditMode(),handleCaretAfterInput:d=>p.current?.handleCaretAfterInput(d),handleCaretMove:d=>p.current?.handleCaretMove(d),replaceEditingRange:d=>p.current?.replaceEditingRange(d)??!1,setActivePill:d=>p.current?.setActivePill(d),removeLastParam:()=>p.current?.removeLastParam(),clearNewParamId:()=>p.current?.clearNewParamId(),reset:()=>p.current?.reset(),selectOption:d=>p.current?.selectOption(d),selectProduct:d=>p.current?.selectProduct(d),setActiveDropdownIndex:d=>p.current?.setActiveDropdownIndex(d),handleFocus:()=>p.current?.setFocused(!0),handleBlur:()=>p.current?.setFocused(!1)});let t=O.current,c=(0,b.useCallback)(d=>{let E=d.target.value,me=E.length>0&&!d.nativeEvent?.isComposing&&E[0]!==E[0].toUpperCase()?E[0].toUpperCase()+E.slice(1):E;p.current?.handleTextChange(me)},[]),m=(0,b.useCallback)(d=>{p.current?.handleKeyDown(d.nativeEvent)},[]),x=p.current,i=ie??Bt,C=S!==void 0?S:i.text,te=A!==void 0?A:i.completedParams,$=i.actionableSuggestions,_e=$[0],ue=x?.listboxId??"",Me=i.activeDropdownIndex>=0&&x?`${ue}-option-${i.activeDropdownIndex}`:void 0,pe=i.editingParam,we=pe?{type:pe.suggestionType,text:pe.suggestionPlaceholder,required:!0,options:pe.options}:null,Pe=we??_e,Oe=we?[we]:$,Ie=!x||i.isLoading&&!i.editingParam&&!i.inSelectionAnimation;return{completedParams:te,skippedParams:i.skippedParams,suggestionPills:$,setActivePill:t.setActivePill,removeLastParam:t.removeLastParam,segments:i.segments,newParamId:i.newParamId,clearNewParamId:t.clearNewParamId,suggestions:i.suggestions,activeIndex:i.activeDropdownIndex,isReady:i.isReady,isLoading:Ie,isFocused:i.isFocused,isDropdownOpen:i.isDropdownOpen,isActivePillSelected:i.isActivePillSelected,placeholderText:i.placeholderText,listboxId:ue,error:i.error,products:i.products,selectProduct:t.selectProduct,handleTextChange:t.handleTextChange,handleKeyDown:t.handleKeyDown,setFocused:t.setFocused,editingParam:pe,editingAnchor:i.editingAnchor,caretOffset:i.caretOffset,startEditingParam:t.startEditingParam,exitEditMode:t.exitEditMode,handleCaretAfterInput:t.handleCaretAfterInput,handleCaretMove:t.handleCaretMove,replaceEditingRange:t.replaceEditingRange,inputProps:{value:C,placeholder:i.placeholderText||void 0,onChange:c,onKeyDown:m,onFocus:t.handleFocus,onBlur:t.handleBlur,role:"combobox","aria-expanded":i.isDropdownOpen,"aria-activedescendant":Me,"aria-autocomplete":"list","aria-controls":ue},reset:t.reset,dropdownProps:{suggestions:Pe?[{...Pe,options:i.filteredOptions}]:[],activeIndex:i.activeDropdownIndex,onSelect:t.selectOption,onHighlight:t.setActiveDropdownIndex,isOpen:i.isDropdownOpen,id:ue,pills:Oe,activeSelected:i.isActivePillSelected,onPillClick:t.setActivePill,isLoading:Ie,isInputEmpty:C.trim().length===0,products:i.products,onProductSelect:t.selectProduct,onProductFocusChange:t.setFocused,optionsPosition:u??"below"}}}var B=require("@magicx-eng/ai-autocomplete-vanilla"),h=require("react"),Be;function Ft(){if(Be!==void 0)return Be;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Be=e.contentEditable==="plaintext-only",Be}function ht(e){let{segments:o,newParamId:a,editingParam:n,editingAnchor:s,caretOffset:l,placeholderText:r,isFocused:u,isDropdownOpen:g,listboxId:w,activeDescendantId:I,autoFocus:v,handleTextChange:S,handleKeyDown:A,handleCaretAfterInput:Q,handleCaretMove:X,startEditingParam:oe,replaceEditingRange:J,setFocused:D}=e,y=(0,h.useRef)(null),p=(0,h.useRef)(!1),ie=(0,h.useRef)(""),Z=(0,h.useRef)(""),F=(0,h.useRef)(null),T=(0,h.useRef)(0);F.current=l,(0,h.useEffect)(()=>{if(!v)return;let t=y.current;if(!t)return;document.activeElement===t?D(!0):t.focus();let c=t.ownerDocument??document,m=c.getSelection(),x=m&&m.rangeCount>0&&t.contains(m.anchorNode);if(m&&!x){let i=c.createRange();i.selectNodeContents(t),i.collapse(!0),m.removeAllRanges(),m.addRange(i)}},[v,D]),(0,h.useEffect)(()=>{let t=y.current;if(!t)return;let c=t.ownerDocument??document,m=()=>{let x=c.getSelection();if(!x||x.rangeCount===0||!x.anchorNode||!t.contains(x.anchorNode))return;let i=x.anchorNode,C=i.nodeType===Node.ELEMENT_NODE?i:i.parentElement,$=(x.isCollapsed?C?.closest('strong[data-seg="completed"][data-param-id]'):null)?.dataset.paramId??null;if($&&$!==n?.id){oe($);return}performance.now()-T.current<50||X((0,B.getCursorOffset)(t))};return c.addEventListener("selectionchange",m),()=>c.removeEventListener("selectionchange",m)},[n,oe,X]),(0,h.useLayoutEffect)(()=>{let t=y.current;t&&(0,B.renderEditableContent)({input:t,segments:o,newParamId:a,editingParamId:n?.id??null,placeholderText:r??"",isFocused:u})},[o,a,n,r,u]),(0,h.useLayoutEffect)(()=>{let t=ie.current,c=a??"";if(ie.current=c,!c||c===t)return;let m=y.current;if(!m)return;m.focus();let x=F.current??(0,B.plainTextLength)(m);(0,B.setCursorOffset)(m,x)},[a]),(0,h.useLayoutEffect)(()=>{let t=Z.current,c=n?.id??"";if(Z.current=c,!c||c===t||s==null)return;let m=y.current;m&&(0,B.setCursorOffset)(m,s)},[n,s]);let R=(0,h.useCallback)(()=>{if(p.current)return;let t=y.current;if(!t)return;let c=(0,B.extractPlainText)(t),x=c.length>0&&c[0]!==c[0].toUpperCase()?c[0].toUpperCase()+c.slice(1):c;S(x)},[S]),f=(0,h.useCallback)(()=>{T.current=performance.now(),R();let t=y.current;t&&Q((0,B.getCursorOffset)(t))},[R,Q]);(0,h.useEffect)(()=>{let t=y.current;if(!t)return;let c=m=>{let x=m,i=x.inputType;if(i==="insertParagraph"||i==="insertLineBreak"||i==="insertFromDrop"){m.preventDefault();return}if(i.startsWith("insert")||i.startsWith("delete")){let C=i.startsWith("delete")?"":x.data??"";J(C)&&m.preventDefault()}};return t.addEventListener("beforeinput",c),()=>t.removeEventListener("beforeinput",c)},[J]);let M=(0,h.useCallback)(()=>{p.current=!0},[]),N=(0,h.useCallback)(()=>{p.current=!1,R()},[R]),L=(0,h.useCallback)(t=>{t.preventDefault();let c=y.current;if(!c)return;let m=(t.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!m)return;let x=c.ownerDocument??document,i=x.getSelection();if(!i||i.rangeCount===0)return;let C=i.getRangeAt(0);if(!c.contains(C.startContainer))return;C.deleteContents();let te=x.createTextNode(m);C.insertNode(te),C.setStartAfter(te),C.collapse(!0),i.removeAllRanges(),i.addRange(C),R()},[R]),V=(0,h.useCallback)(t=>A(t),[A]),Y=(0,h.useCallback)(()=>D(!0),[D]),ee=(0,h.useCallback)(()=>D(!1),[D]),q=(0,h.useCallback)(()=>y.current?.focus(),[]),H=(0,h.useCallback)(()=>y.current?.blur(),[]),re=(0,h.useCallback)(()=>{let t=y.current;return t?(0,B.extractPlainText)(t):""},[]),O=Ft()?"plaintext-only":"true";return{inputRef:y,editorProps:{ref:y,contentEditable:O,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":w,"aria-expanded":g,"aria-activedescendant":I,spellCheck:!0,enterKeyHint:"send",onInput:f,onKeyDown:V,onCompositionStart:M,onCompositionEnd:N,onPaste:L,onFocus:Y,onBlur:ee},getPlainText:re,focus:q,blur:H}}var U=require("react/jsx-runtime");function Mt(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var gt=(0,_.forwardRef)(function({onSubmit:o,onError:a,optionOverrides:n,maskCompletedText:s,className:l,apiConfig:r,columns:u,pillPlacement:g="dropdown",mode:w="auto",optionsPosition:I="below",animations:v=!0,dropdownTrigger:S,closeDropdownOnBlur:A,showNonTappableOptions:Q,autoFocus:X=!0,onFocus:oe,onBlur:J,value:D,completedParams:y,onChange:p,onParamsChange:ie,products:Z,onProductSelect:F,submitButton:T},R){let f=(0,_.useRef)(null),M=(0,_.useRef)(null),N=(0,_.useRef)(()=>{}),L=(0,_.useRef)(null),V=(0,_.useRef)(null);(0,_.useEffect)(()=>{let k=f.current;if(k)return L.current?L.current.setMode(w):L.current=new xe.ModeController(k,w),()=>{L.current?.destroy(),L.current=null}},[w]);let Y=(0,_.useCallback)(k=>{let se=V.current?.current;se&&(se.focus(),(0,xe.setCursorOffset)(se,k))},[]),{completedParams:ee,skippedParams:q,suggestionPills:H,setActivePill:re,segments:O,newParamId:t,clearNewParamId:c,placeholderText:m,isFocused:x,isDropdownOpen:i,isActivePillSelected:C,isLoading:te,activeIndex:$,listboxId:_e,handleTextChange:ue,handleKeyDown:Me,setFocused:pe,editingParam:we,editingAnchor:Pe,caretOffset:Oe,startEditingParam:Ie,handleCaretAfterInput:d,handleCaretMove:E,replaceEditingRange:P,dropdownProps:me,reset:ne}=ze({onSubmit:k=>N.current(k),onError:a,optionOverrides:n,maskCompletedText:s,apiConfig:r,columns:u,dropdownTrigger:S,optionsPosition:I,closeDropdownOnBlur:A,showNonTappableOptions:Q,onFocus:oe,onBlur:J,value:D,completedParams:y,onChange:p,onParamsChange:ie,products:Z,onProductSelect:F,source:"full-sdk",setCursor:Y});(0,_.useEffect)(()=>{if(!t)return;let k=window.setTimeout(()=>c(),650);return()=>window.clearTimeout(k)},[t,c]);let ft=$>=0?`${_e}-option-${$}`:void 0,{inputRef:Ne,editorProps:bt,focus:Se,blur:$e,getPlainText:je}=ht({segments:O,newParamId:t,editingParam:we,editingAnchor:Pe,caretOffset:Oe,placeholderText:m,isFocused:x,isDropdownOpen:i,listboxId:_e,activeDescendantId:ft,autoFocus:X,handleTextChange:ue,handleKeyDown:Me,handleCaretAfterInput:d,handleCaretMove:E,startEditingParam:Ie,replaceEditingRange:P,setFocused:pe});V.current=Ne,(0,_.useLayoutEffect)(()=>{let k=M.current,se=Ne.current;if(!k||!se)return;let Qe=()=>{let Je=k.firstElementChild;if(!Je)return;let yt=Je.getBoundingClientRect(),kt=se.getBoundingClientRect();yt.top>=kt.bottom-2?k.setAttribute("data-aia-pill-wrapped",""):k.removeAttribute("data-aia-pill-wrapped")};Qe();let Xe=new ResizeObserver(Qe);return Xe.observe(se),()=>Xe.disconnect()},[O,H.length,te,Ne]),(0,_.useImperativeHandle)(R,()=>({focus:Se,blur:$e,reset:ne,setMode:k=>L.current?.setMode(k)}),[Se,$e,ne]);let Ae=!!O.length||ee.length>0,He=(0,_.useCallback)(()=>{if(!Ae)return;let k=je();o((0,xe.buildSubmitResult)(k,ee,q)),ne()},[Ae,ee,q,o,ne,je]);N.current=He;let vt=(0,_.useCallback)(k=>{k.target?.closest("[data-aia-pill]")||Se()},[Se]),xt=g==="inline",wt=g==="dropdown";return(0,U.jsxs)("div",{ref:f,className:`magicx-aia ${ce.container} ${l??""}`,"data-pill-placement":g,"data-options-position":I,"data-animations":v?"on":"off","data-mode":Mt(w),children:[(0,U.jsx)(Te,{...me,showPills:wt}),(0,U.jsxs)("div",{className:ce.inputWrapper,onClick:vt,children:[(0,U.jsxs)("div",{className:ce.editorArea,"data-aia-editor":"",children:[(0,U.jsx)("div",{...bt,className:ce.input,"data-aia-input":""}),xt&&(te||H.length>0)&&(0,U.jsx)("span",{ref:M,className:ce.pillListContainer,"data-aia-pill-list-container":"",children:(0,U.jsx)(Ee,{pills:H,activePillIndex:0,activeSelected:C,onSelectPill:re,loading:te})})]}),T===null?null:T===void 0?(0,U.jsx)(ct,{disabled:!Ae,onClick:He}):(0,U.jsx)("span",{"data-aia-submit":"",className:ce.submitSlot,onClick:k=>{Ae&&(k.stopPropagation(),He())},children:T})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,buildSubmitResult,useAIAutocomplete,withSkippedParams});
|
|
1511
|
+
`,document.head.appendChild(e)}var ut={submitButton:"SubmitButton-module_submitButton_otz7H"};var Be=require("react/jsx-runtime");function mt({disabled:e,onClick:o}){return(0,Be.jsx)("button",{type:"button","data-aia-submit":"",className:ut.submitButton,disabled:e,onClick:a=>{a.stopPropagation(),o()},"aria-label":"Submit",children:(0,Be.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,Be.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var gt=require("@magicx-eng/ai-autocomplete-vanilla"),x=require("react");var je=require("react");function ht(e){let o=(0,je.useRef)(e);o.current=e;let a=(0,je.useRef)(null);a.current===null&&(a.current={fetch:(s,d)=>{let i=o.current;return i?i.fetch(s,d):Promise.reject(new Error("products config removed"))},transform:s=>o.current?.transform(s)??[],get limit(){return o.current?.limit}});let n=e!==void 0;return{config:n?a.current:void 0,enabled:n}}var Mt={text:"",completedParams:[],identifiedParams:[],skippedParams:[],pendingSpan:null,suggestions:[],products:[],activeDropdownIndex:-1,newParamId:null,isLoading:!0,isReady:!1,error:null,segments:[],actionableSuggestions:[],filteredOptions:[],placeholderText:"",isDropdownOpen:!1,isActivePillSelected:!1,filterBase:0,filterInProgress:!1,pillTapped:!1,skipNextFetch:!1,lastRawQuery:"",isFocused:!1,editingParam:null,editingAnchor:null,editingTail:null,caretOffset:null,inSelectionAnimation:!1};function Fe({onSubmit:e,onError:o,optionOverrides:a,maskCompletedText:n,apiConfig:s,columns:d=2,dropdownTrigger:i,optionsPosition:m,closeDropdownOnBlur:b,showNonTappableOptions:w,showSkipButton:S,onFocus:y,onBlur:F,value:R,completedParams:D,onChange:J,onParamsChange:M,products:ae,onProductSelect:T,source:_,setCursor:V}){let c=(0,x.useRef)(null),[oe,X]=(0,x.useState)(null),Z=(0,x.useRef)(e);Z.current=e;let C=(0,x.useRef)(o);C.current=o;let N=(0,x.useRef)(J);N.current=J;let O=(0,x.useRef)(M);O.current=M;let q=(0,x.useRef)(y);q.current=y;let h=(0,x.useRef)(F);h.current=F;let A=(0,x.useRef)(V);A.current=V;let H=(0,x.useRef)(T);H.current=T;let Y=ht(ae);(0,x.useEffect)(()=>{if(typeof document>"u")return;let p=new gt.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:s,optionOverrides:a,maskCompletedText:n,columns:d,dropdownTrigger:i,optionsPosition:m,closeDropdownOnBlur:b,showNonTappableOptions:w,source:_,value:R,completedParams:D,onSubmit:(...I)=>Z.current?.(...I),onError:(...I)=>C.current?.(...I),onChange:(...I)=>N.current?.(...I),onParamsChange:(...I)=>O.current?.(...I),onFocus:()=>q.current?.(),onBlur:()=>h.current?.(),onProductSelect:I=>H.current?.(I),setCursor:I=>A.current?.(I),products:Y.config});c.current=p,X(p.getState());let E=p.subscribe(I=>X(I));return()=>{E(),p.destroy(),c.current===p&&(c.current=null)}},[]),(0,x.useEffect)(()=>{R!==void 0&&c.current?.setValue(R)},[R]),(0,x.useEffect)(()=>{D!==void 0&&c.current?.setCompletedParams(D)},[D]);let G=JSON.stringify(s??null),$=(0,x.useRef)(a),j=(0,x.useRef)(0);if(a!==$.current){let p=$.current,E=a,I=Object.keys(p??{}),he=Object.keys(E??{});(I.length!==he.length||he.some(ye=>!p?.[ye]||E[ye]!==p[ye]))&&j.current++,$.current=a}(0,x.useEffect)(()=>{c.current?.update({apiConfig:s,optionOverrides:a,dropdownTrigger:i,optionsPosition:m,closeDropdownOnBlur:b,showNonTappableOptions:w})},[G,j.current,i,m,b,w]);let ee=(0,x.useRef)(!1);(0,x.useEffect)(()=>{if(!ee.current){ee.current=!0;return}c.current?.update({products:Y.config})},[Y.enabled]);let l=(0,x.useRef)(null);l.current===null&&(l.current={handleTextChange:p=>c.current?.handleTextChange(p),handleKeyDown:p=>{let E="nativeEvent"in p?p.nativeEvent:p;c.current?.handleKeyDown(E)},setFocused:p=>c.current?.setFocused(p),startEditingParam:p=>c.current?.startEditingParam(p),exitEditMode:()=>c.current?.exitEditMode(),handleCaretAfterInput:p=>c.current?.handleCaretAfterInput(p),handleCaretMove:p=>c.current?.handleCaretMove(p),replaceEditingRange:p=>c.current?.replaceEditingRange(p)??!1,setActivePill:p=>c.current?.setActivePill(p),skipActivePill:()=>c.current?.skipActivePill(),removeLastParam:()=>c.current?.removeLastParam(),clearNewParamId:()=>c.current?.clearNewParamId(),reset:()=>c.current?.reset(),selectOption:p=>c.current?.selectOption(p),selectProduct:p=>c.current?.selectProduct(p),setActiveDropdownIndex:p=>c.current?.setActiveDropdownIndex(p),handleFocus:()=>c.current?.setFocused(!0),handleBlur:()=>c.current?.setFocused(!1)});let t=l.current,u=(0,x.useCallback)(p=>{let E=p.target.value,he=E.length>0&&!p.nativeEvent?.isComposing&&E[0]!==E[0].toUpperCase()?E[0].toUpperCase()+E.slice(1):E;c.current?.handleTextChange(he)},[]),v=(0,x.useCallback)(p=>{c.current?.handleKeyDown(p.nativeEvent)},[]),g=c.current,r=oe??Mt,ie=R!==void 0?R:r.text,pe=D!==void 0?D:r.completedParams,ce=r.actionableSuggestions,Pe=ce[0],ue=g?.listboxId??"",Oe=r.activeDropdownIndex>=0&&g?`${ue}-option-${r.activeDropdownIndex}`:void 0,re=r.editingParam,we=re?{type:re.suggestionType,text:re.suggestionPlaceholder,required:!0,options:re.options}:null,Ie=we??Pe,He=we?[we]:ce,Se=!g||r.isLoading&&!r.editingParam&&!r.inSelectionAnimation;return{completedParams:pe,skippedParams:r.skippedParams,suggestionPills:ce,setActivePill:t.setActivePill,skipActivePill:t.skipActivePill,removeLastParam:t.removeLastParam,segments:r.segments,newParamId:r.newParamId,clearNewParamId:t.clearNewParamId,suggestions:r.suggestions,activeIndex:r.activeDropdownIndex,isReady:r.isReady,isLoading:Se,isFocused:r.isFocused,isDropdownOpen:r.isDropdownOpen,isActivePillSelected:r.isActivePillSelected,placeholderText:r.placeholderText,listboxId:ue,error:r.error,products:r.products,selectProduct:t.selectProduct,handleTextChange:t.handleTextChange,handleKeyDown:t.handleKeyDown,setFocused:t.setFocused,editingParam:re,editingAnchor:r.editingAnchor,caretOffset:r.caretOffset,startEditingParam:t.startEditingParam,exitEditMode:t.exitEditMode,handleCaretAfterInput:t.handleCaretAfterInput,handleCaretMove:t.handleCaretMove,replaceEditingRange:t.replaceEditingRange,inputProps:{value:ie,placeholder:r.placeholderText||void 0,onChange:u,onKeyDown:v,onFocus:t.handleFocus,onBlur:t.handleBlur,role:"combobox","aria-expanded":r.isDropdownOpen,"aria-activedescendant":Oe,"aria-autocomplete":"list","aria-controls":ue},reset:t.reset,dropdownProps:{suggestions:Ie?[{...Ie,options:r.filteredOptions}]:[],activeIndex:r.activeDropdownIndex,onSelect:t.selectOption,onHighlight:t.setActiveDropdownIndex,isOpen:r.isDropdownOpen,id:ue,pills:He,activeSelected:r.isActivePillSelected,onPillClick:t.setActivePill,onSkip:t.skipActivePill,showSkipButton:(S??!0)&&!re,skipDisabled:r.inSelectionAnimation,isLoading:Se,isInputEmpty:ie.trim().length===0,products:r.products,onProductSelect:t.selectProduct,onProductFocusChange:t.setFocused,optionsPosition:m??"below"}}}var B=require("@magicx-eng/ai-autocomplete-vanilla"),f=require("react"),Me;function Nt(){if(Me!==void 0)return Me;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Me=e.contentEditable==="plaintext-only",Me}function ft(e){let{segments:o,newParamId:a,editingParam:n,editingAnchor:s,caretOffset:d,placeholderText:i,isFocused:m,isDropdownOpen:b,listboxId:w,activeDescendantId:S,autoFocus:y,handleTextChange:F,handleKeyDown:R,handleCaretAfterInput:D,handleCaretMove:J,startEditingParam:M,replaceEditingRange:ae,setFocused:T}=e,_=(0,f.useRef)(null),V=(0,f.useRef)(!1),c=(0,f.useRef)(""),oe=(0,f.useRef)(""),X=(0,f.useRef)(null),Z=(0,f.useRef)(0);X.current=d,(0,f.useEffect)(()=>{if(!y)return;let l=_.current;if(!l)return;document.activeElement===l?T(!0):l.focus();let t=l.ownerDocument??document,u=t.getSelection(),v=u&&u.rangeCount>0&&l.contains(u.anchorNode);if(u&&!v){let g=t.createRange();g.selectNodeContents(l),g.collapse(!0),u.removeAllRanges(),u.addRange(g)}},[y,T]),(0,f.useEffect)(()=>{let l=_.current;if(!l)return;let t=l.ownerDocument??document,u=()=>{let v=t.getSelection();if(!v||v.rangeCount===0||!v.anchorNode||!l.contains(v.anchorNode))return;let g=v.anchorNode,r=g.nodeType===Node.ELEMENT_NODE?g:g.parentElement,pe=(v.isCollapsed?r?.closest('strong[data-seg="completed"][data-param-id]'):null)?.dataset.paramId??null;if(pe&&pe!==n?.id){M(pe);return}performance.now()-Z.current<50||J((0,B.getCursorOffset)(l))};return t.addEventListener("selectionchange",u),()=>t.removeEventListener("selectionchange",u)},[n,M,J]),(0,f.useLayoutEffect)(()=>{let l=_.current;l&&(0,B.renderEditableContent)({input:l,segments:o,newParamId:a,editingParamId:n?.id??null,placeholderText:i??"",isFocused:m})},[o,a,n,i,m]),(0,f.useLayoutEffect)(()=>{let l=c.current,t=a??"";if(c.current=t,!t||t===l)return;let u=_.current;if(!u)return;u.focus();let v=X.current??(0,B.plainTextLength)(u);(0,B.setCursorOffset)(u,v)},[a]),(0,f.useLayoutEffect)(()=>{let l=oe.current,t=n?.id??"";if(oe.current=t,!t||t===l||s==null)return;let u=_.current;u&&(0,B.setCursorOffset)(u,s)},[n,s]);let C=(0,f.useCallback)(()=>{if(V.current)return;let l=_.current;if(!l)return;let t=(0,B.extractPlainText)(l),v=t.length>0&&t[0]!==t[0].toUpperCase()?t[0].toUpperCase()+t.slice(1):t;F(v)},[F]),N=(0,f.useCallback)(()=>{Z.current=performance.now(),C();let l=_.current;l&&D((0,B.getCursorOffset)(l))},[C,D]);(0,f.useEffect)(()=>{let l=_.current;if(!l)return;let t=u=>{let v=u,g=v.inputType;if(g==="insertParagraph"||g==="insertLineBreak"||g==="insertFromDrop"){u.preventDefault();return}if(g.startsWith("insert")||g.startsWith("delete")){let r=g.startsWith("delete")?"":v.data??"";ae(r)&&u.preventDefault()}};return l.addEventListener("beforeinput",t),()=>l.removeEventListener("beforeinput",t)},[ae]);let O=(0,f.useCallback)(()=>{V.current=!0},[]),q=(0,f.useCallback)(()=>{V.current=!1,C()},[C]),h=(0,f.useCallback)(l=>{l.preventDefault();let t=_.current;if(!t)return;let u=(l.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!u)return;let v=t.ownerDocument??document,g=v.getSelection();if(!g||g.rangeCount===0)return;let r=g.getRangeAt(0);if(!t.contains(r.startContainer))return;r.deleteContents();let ie=v.createTextNode(u);r.insertNode(ie),r.setStartAfter(ie),r.collapse(!0),g.removeAllRanges(),g.addRange(r),C()},[C]),A=(0,f.useCallback)(l=>R(l),[R]),H=(0,f.useCallback)(()=>T(!0),[T]),Y=(0,f.useCallback)(()=>T(!1),[T]),G=(0,f.useCallback)(()=>_.current?.focus(),[]),$=(0,f.useCallback)(()=>_.current?.blur(),[]),j=(0,f.useCallback)(()=>{let l=_.current;return l?(0,B.extractPlainText)(l):""},[]),ee=Nt()?"plaintext-only":"true";return{inputRef:_,editorProps:{ref:_,contentEditable:ee,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":w,"aria-expanded":b,"aria-activedescendant":S,spellCheck:!0,enterKeyHint:"send",onInput:N,onKeyDown:A,onCompositionStart:O,onCompositionEnd:q,onPaste:h,onFocus:H,onBlur:Y},getPlainText:j,focus:G,blur:$}}var U=require("react/jsx-runtime");function Ot(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var bt=(0,P.forwardRef)(function({onSubmit:o,onError:a,optionOverrides:n,maskCompletedText:s,className:d,apiConfig:i,columns:m,pillPlacement:b="dropdown",mode:w="auto",optionsPosition:S="below",animations:y=!0,dropdownTrigger:F,closeDropdownOnBlur:R,showNonTappableOptions:D,showSkipButton:J,autoFocus:M=!0,onFocus:ae,onBlur:T,value:_,completedParams:V,onChange:c,onParamsChange:oe,products:X,onProductSelect:Z,submitButton:C},N){let O=(0,P.useRef)(null),q=(0,P.useRef)(null),h=(0,P.useRef)(()=>{}),A=(0,P.useRef)(null),H=(0,P.useRef)(null);(0,P.useEffect)(()=>{let k=O.current;if(k)return A.current?A.current.setMode(w):A.current=new xe.ModeController(k,w),()=>{A.current?.destroy(),A.current=null}},[w]);let Y=(0,P.useCallback)(k=>{let ne=H.current?.current;ne&&(ne.focus(),(0,xe.setCursorOffset)(ne,k))},[]),{completedParams:G,skippedParams:$,suggestionPills:j,setActivePill:ee,skipActivePill:l,segments:t,newParamId:u,clearNewParamId:v,placeholderText:g,isFocused:r,isDropdownOpen:ie,isActivePillSelected:pe,isLoading:ce,activeIndex:Pe,listboxId:ue,handleTextChange:Oe,handleKeyDown:re,setFocused:we,editingParam:Ie,editingAnchor:He,caretOffset:Se,startEditingParam:p,handleCaretAfterInput:E,handleCaretMove:I,replaceEditingRange:he,dropdownProps:ye,reset:Ae}=Fe({onSubmit:k=>h.current(k),onError:a,optionOverrides:n,maskCompletedText:s,apiConfig:i,columns:m,dropdownTrigger:F,optionsPosition:S,closeDropdownOnBlur:R,showNonTappableOptions:D,showSkipButton:J,onFocus:ae,onBlur:T,value:_,completedParams:V,onChange:c,onParamsChange:oe,products:X,onProductSelect:Z,source:"full-sdk",setCursor:Y});(0,P.useEffect)(()=>{if(!u)return;let k=window.setTimeout(()=>v(),650);return()=>window.clearTimeout(k)},[u,v]);let vt=Pe>=0?`${ue}-option-${Pe}`:void 0,{inputRef:Ge,editorProps:xt,focus:Ce,blur:Qe,getPlainText:Je}=ft({segments:t,newParamId:u,editingParam:Ie,editingAnchor:He,caretOffset:Se,placeholderText:g,isFocused:r,isDropdownOpen:ie,listboxId:ue,activeDescendantId:vt,autoFocus:M,handleTextChange:Oe,handleKeyDown:re,handleCaretAfterInput:E,handleCaretMove:I,startEditingParam:p,replaceEditingRange:he,setFocused:we});H.current=Ge,(0,P.useLayoutEffect)(()=>{let k=q.current,ne=Ge.current;if(!k||!ne)return;let Xe=()=>{let Ye=k.firstElementChild;if(!Ye)return;let _t=Ye.getBoundingClientRect(),Pt=ne.getBoundingClientRect();_t.top>=Pt.bottom-2?k.setAttribute("data-aia-pill-wrapped",""):k.removeAttribute("data-aia-pill-wrapped")};Xe();let Ze=new ResizeObserver(Xe);return Ze.observe(ne),()=>Ze.disconnect()},[t,j.length,ce,Ge]),(0,P.useImperativeHandle)(N,()=>({focus:Ce,blur:Qe,reset:Ae,setMode:k=>A.current?.setMode(k),skipActivePill:l}),[Ce,Qe,Ae,l]);let Ee=!!t.length||G.length>0,Ke=(0,P.useCallback)(()=>{if(!Ee)return;let k=Je();o((0,xe.buildSubmitResult)(k,G,$)),Ae()},[Ee,G,$,o,Ae,Je]);h.current=Ke;let wt=(0,P.useCallback)(k=>{k.target?.closest("[data-aia-pill]")||Ce()},[Ce]),yt=b==="inline",kt=b==="dropdown";return(0,U.jsxs)("div",{ref:O,className:`magicx-aia ${me.container} ${d??""}`,"data-pill-placement":b,"data-options-position":S,"data-animations":y?"on":"off","data-mode":Ot(w),children:[(0,U.jsx)(ze,{...ye,showPills:kt}),(0,U.jsxs)("div",{className:me.inputWrapper,onClick:wt,children:[(0,U.jsxs)("div",{className:me.editorArea,"data-aia-editor":"",children:[(0,U.jsx)("div",{...xt,className:me.input,"data-aia-input":""}),yt&&(ce||j.length>0)&&(0,U.jsx)("span",{ref:q,className:me.pillListContainer,"data-aia-pill-list-container":"",children:(0,U.jsx)(Re,{pills:j,activePillIndex:0,activeSelected:pe,onSelectPill:ee,loading:ce})})]}),C===null?null:C===void 0?(0,U.jsx)(mt,{disabled:!Ee,onClick:Ke}):(0,U.jsx)("span",{"data-aia-submit":"",className:me.submitSlot,onClick:k=>{Ee&&(k.stopPropagation(),Ke())},children:C})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,buildSubmitResult,useAIAutocomplete,withSkippedParams});
|
|
1449
1512
|
//# sourceMappingURL=index.js.map
|