@magicx-eng/ai-autocomplete-react 0.10.0 → 0.11.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 +2 -1
- package/dist/index.d.mts +20 -3
- package/dist/index.d.ts +20 -3
- package/dist/index.js +12 -12
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +12 -12
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -229,6 +229,7 @@ function App() {
|
|
|
229
229
|
| `onSubmit` | `(result: AutocompleteResult) => void` | **required** | Called on Enter or submit button. |
|
|
230
230
|
| `onError?` | `(error: Error) => void` | — | Called when a fetch fails. |
|
|
231
231
|
| `apiConfig?` | `APIConfig` | — | Runtime API configuration (see below). |
|
|
232
|
+
| `additionalContext?` | `Record<string, unknown>` | — | Optional user context. Include whatever you know about the user (a profile, preferences, workspace, anything) to personalize suggested parameters and options to them. |
|
|
232
233
|
| `optionOverrides?` | `Record<string, (query: string) => SuggestionOption[]>` | — | Override options per suggestion type. |
|
|
233
234
|
| `maskCompletedText?` | `boolean` | `false` | When `true`, omits completed params' literal text from API requests (for masking PII/sensitive values from the server). |
|
|
234
235
|
| `className?` | `string` | — | CSS class applied to the container. |
|
|
@@ -240,7 +241,7 @@ function App() {
|
|
|
240
241
|
| `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
242
|
| `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
243
|
| `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"
|
|
244
|
+
| `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"`, and appears once the input has text (alongside the footer's "→ to skip" hint). Set to `false` to hide it. |
|
|
244
245
|
| `autoFocus?` | `boolean` | `true` | Focus the input on mount. Set to `false` to leave focus to the consumer. |
|
|
245
246
|
| `onFocus?` | `() => void` | — | Called when the input gains focus. |
|
|
246
247
|
| `onBlur?` | `() => void` | — | Called when the input loses focus. |
|
package/dist/index.d.mts
CHANGED
|
@@ -23,6 +23,14 @@ interface AIAutocompleteProps {
|
|
|
23
23
|
maskCompletedText?: boolean;
|
|
24
24
|
className?: string;
|
|
25
25
|
apiConfig?: APIConfig;
|
|
26
|
+
/**
|
|
27
|
+
* Optional user context. Include whatever you know about the user — a
|
|
28
|
+
* profile, preferences, workspace, anything — to personalize suggested
|
|
29
|
+
* parameters and options to them. May be re-created on every render; only
|
|
30
|
+
* a genuinely different value reaches the core (same JSON.stringify
|
|
31
|
+
* comparison used for `apiConfig`).
|
|
32
|
+
*/
|
|
33
|
+
additionalContext?: Record<string, unknown>;
|
|
26
34
|
columns?: number;
|
|
27
35
|
/** Where to render unfilled pills. "dropdown" (default) renders them above the options grid; "inline" renders them in the input. */
|
|
28
36
|
pillPlacement?: "inline" | "dropdown" | "hidden";
|
|
@@ -45,8 +53,9 @@ interface AIAutocompleteProps {
|
|
|
45
53
|
* the dropdown opens below the input, bottom-right when `optionsPosition` is
|
|
46
54
|
* "above". Set to false to hide it. When pills render elsewhere
|
|
47
55
|
* (`pillPlacement: "inline"` / `"hidden"`) the bar renders as a skip-only
|
|
48
|
-
* row holding just the button; it hides during re-edit
|
|
49
|
-
* skeleton
|
|
56
|
+
* row holding just the button; it hides during re-edit, on the loading
|
|
57
|
+
* skeleton, and while the input is empty (appearing alongside the footer's
|
|
58
|
+
* "→ to skip" hint once the user has typed) either way.
|
|
50
59
|
*/
|
|
51
60
|
showSkipButton?: boolean;
|
|
52
61
|
/** Focus the input on mount. Default: true. */
|
|
@@ -98,6 +107,14 @@ interface UseAIAutocompleteOptions {
|
|
|
98
107
|
optionOverrides?: OptionOverrides;
|
|
99
108
|
maskCompletedText?: boolean;
|
|
100
109
|
apiConfig?: APIConfig;
|
|
110
|
+
/**
|
|
111
|
+
* Optional user context. Include whatever you know about the user — a
|
|
112
|
+
* profile, preferences, workspace, anything — to personalize suggested
|
|
113
|
+
* parameters and options to them. May be re-created on every render; only
|
|
114
|
+
* a genuinely different value reaches the core (same JSON.stringify
|
|
115
|
+
* comparison used for `apiConfig`).
|
|
116
|
+
*/
|
|
117
|
+
additionalContext?: Record<string, unknown>;
|
|
101
118
|
columns?: number;
|
|
102
119
|
/**
|
|
103
120
|
* SDK surface identifier for telemetry. Set automatically by the Tier 1
|
|
@@ -329,6 +346,6 @@ declare const AIAutocomplete: react.ForwardRefExoticComponent<AIAutocompleteProp
|
|
|
329
346
|
|
|
330
347
|
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;
|
|
331
348
|
|
|
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;
|
|
349
|
+
declare function useAIAutocomplete({ onSubmit, 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;
|
|
333
350
|
|
|
334
351
|
export { AIAutocomplete, AIAutocompleteDropdown, type AIAutocompleteDropdownProps, type AIAutocompleteHandle, type AIAutocompleteProps, type UseAIAutocompleteOptions, type UseAIAutocompleteReturn, useAIAutocomplete };
|
package/dist/index.d.ts
CHANGED
|
@@ -23,6 +23,14 @@ interface AIAutocompleteProps {
|
|
|
23
23
|
maskCompletedText?: boolean;
|
|
24
24
|
className?: string;
|
|
25
25
|
apiConfig?: APIConfig;
|
|
26
|
+
/**
|
|
27
|
+
* Optional user context. Include whatever you know about the user — a
|
|
28
|
+
* profile, preferences, workspace, anything — to personalize suggested
|
|
29
|
+
* parameters and options to them. May be re-created on every render; only
|
|
30
|
+
* a genuinely different value reaches the core (same JSON.stringify
|
|
31
|
+
* comparison used for `apiConfig`).
|
|
32
|
+
*/
|
|
33
|
+
additionalContext?: Record<string, unknown>;
|
|
26
34
|
columns?: number;
|
|
27
35
|
/** Where to render unfilled pills. "dropdown" (default) renders them above the options grid; "inline" renders them in the input. */
|
|
28
36
|
pillPlacement?: "inline" | "dropdown" | "hidden";
|
|
@@ -45,8 +53,9 @@ interface AIAutocompleteProps {
|
|
|
45
53
|
* the dropdown opens below the input, bottom-right when `optionsPosition` is
|
|
46
54
|
* "above". Set to false to hide it. When pills render elsewhere
|
|
47
55
|
* (`pillPlacement: "inline"` / `"hidden"`) the bar renders as a skip-only
|
|
48
|
-
* row holding just the button; it hides during re-edit
|
|
49
|
-
* skeleton
|
|
56
|
+
* row holding just the button; it hides during re-edit, on the loading
|
|
57
|
+
* skeleton, and while the input is empty (appearing alongside the footer's
|
|
58
|
+
* "→ to skip" hint once the user has typed) either way.
|
|
50
59
|
*/
|
|
51
60
|
showSkipButton?: boolean;
|
|
52
61
|
/** Focus the input on mount. Default: true. */
|
|
@@ -98,6 +107,14 @@ interface UseAIAutocompleteOptions {
|
|
|
98
107
|
optionOverrides?: OptionOverrides;
|
|
99
108
|
maskCompletedText?: boolean;
|
|
100
109
|
apiConfig?: APIConfig;
|
|
110
|
+
/**
|
|
111
|
+
* Optional user context. Include whatever you know about the user — a
|
|
112
|
+
* profile, preferences, workspace, anything — to personalize suggested
|
|
113
|
+
* parameters and options to them. May be re-created on every render; only
|
|
114
|
+
* a genuinely different value reaches the core (same JSON.stringify
|
|
115
|
+
* comparison used for `apiConfig`).
|
|
116
|
+
*/
|
|
117
|
+
additionalContext?: Record<string, unknown>;
|
|
101
118
|
columns?: number;
|
|
102
119
|
/**
|
|
103
120
|
* SDK surface identifier for telemetry. Set automatically by the Tier 1
|
|
@@ -329,6 +346,6 @@ declare const AIAutocomplete: react.ForwardRefExoticComponent<AIAutocompleteProp
|
|
|
329
346
|
|
|
330
347
|
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;
|
|
331
348
|
|
|
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;
|
|
349
|
+
declare function useAIAutocomplete({ onSubmit, 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;
|
|
333
350
|
|
|
334
351
|
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 Ue=Object.defineProperty;var St=Object.getOwnPropertyDescriptor;var At=Object.getOwnPropertyNames;var Ct=Object.prototype.hasOwnProperty;var Et=(e,a)=>{for(var t in a)Ue(e,t,{get:a[t],enumerable:!0})},Dt=(e,a,t,o)=>{if(a&&typeof a=="object"||typeof a=="function")for(let i of At(a))!Ct.call(e,i)&&i!==t&&Ue(e,i,{get:()=>a[i],enumerable:!(o=St(a,i))||o.enumerable});return e};var Rt=e=>Dt(Ue({},"__esModule",{value:!0}),e);var Gt={};Et(Gt,{AIAutocomplete:()=>vt,AIAutocompleteDropdown:()=>Be,buildSubmitResult:()=>Oe.buildSubmitResult,useAIAutocomplete:()=>Me,withSkippedParams:()=>Oe.withSkippedParams});module.exports=Rt(Gt);var Oe=require("@magicx-eng/ai-autocomplete-vanilla");var S=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 ue={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 xe=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
|
*
|
|
@@ -665,7 +665,7 @@
|
|
|
665
665
|
opacity: 0.25;
|
|
666
666
|
}
|
|
667
667
|
}
|
|
668
|
-
`,document.head.appendChild(e)}var
|
|
668
|
+
`,document.head.appendChild(e)}var de={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 fe=require("@magicx-eng/ai-autocomplete-vanilla"),Re=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 {
|
|
669
669
|
.aia-cluster {
|
|
670
670
|
display: flex;
|
|
671
671
|
flex-wrap: wrap;
|
|
@@ -707,7 +707,7 @@
|
|
|
707
707
|
justify-content: space-around;
|
|
708
708
|
}
|
|
709
709
|
}
|
|
710
|
-
`,document.head.appendChild(e)}var
|
|
710
|
+
`,document.head.appendChild(e)}var Ve=require("react/jsx-runtime");function _e({gap:e,align:a="center",justify:t="start",noWrap:o=!1,inline:i=!1,className:s,children:r,...h}){let v=e?{"--aia-cluster-gap":e}:void 0,y={className:s?`aia-cluster ${s}`:"aia-cluster","data-align":a,"data-justify":t,"data-nowrap":o||void 0,"data-inline":i||void 0,style:v,...h};return i?(0,Ve.jsx)("span",{...y,children:r}):(0,Ve.jsx)("div",{...y,children:r})}if(typeof document<"u"&&!document.getElementById("ac-style-56b0c577")){let e=document.createElement("style");e.id="ac-style-56b0c577",e.textContent=`/* The footer adds its own 8px horizontal inset so it stays clear of the
|
|
711
711
|
dropdown's rounded edges. The top inset (--aia-footer-gap) adds breathing
|
|
712
712
|
room above the hint/branding row so the footer doesn't butt against the last
|
|
713
713
|
option row \u2014 additive to the dropdown's 8px section gap. */
|
|
@@ -837,7 +837,7 @@
|
|
|
837
837
|
justify-content: flex-end;
|
|
838
838
|
}
|
|
839
839
|
}
|
|
840
|
-
`,document.head.appendChild(e)}var
|
|
840
|
+
`,document.head.appendChild(e)}var ie={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 J=require("react/jsx-runtime");function tt({isOptionHighlighted:e=!1,isInputEmpty:a=!1}){let{key:t,hint:o}=(0,fe.getFooterHint)(e,a),[i,s]=(0,Re.useState)(fe.ATTRIBUTION_URL);return(0,Re.useEffect)(()=>{s((0,fe.buildAttributionUrl)())},[]),(0,J.jsx)("footer",{className:ie.footer,"data-aia-footer":"",children:(0,J.jsxs)(_e,{justify:"between",noWrap:!0,className:ie.row,children:[(0,J.jsxs)(_e,{gap:"5px",className:ie.hintGroup,children:[(0,J.jsx)("kbd",{className:ie.key,children:t}),(0,J.jsx)("span",{className:ie.hint,children:o})]}),(0,J.jsxs)("a",{className:ie.brandLink,href:i,target:"_blank",rel:"noopener noreferrer",children:[(0,J.jsx)("span",{className:ie.brand,children:"AI"}),(0,J.jsx)("span",{className:ie.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,
|
|
841
841
|
no outline. ~28px via 6px padding + 14px text + the 1px border (border-box).
|
|
842
842
|
The border is kept as a 1px transparent line so the box stays the same size
|
|
843
843
|
as it was when the outline was dashed. */
|
|
@@ -894,7 +894,7 @@
|
|
|
894
894
|
opacity: 0;
|
|
895
895
|
}
|
|
896
896
|
}
|
|
897
|
-
`,document.head.appendChild(e)}var
|
|
897
|
+
`,document.head.appendChild(e)}var pe={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 ot=require("react/jsx-runtime"),qe={selected:1,first:.7,next:.4,last:.2};function at({label:e,state:a,rounded:t,loading:o,onClick:i}){let s=[pe.pill,t?pe.rounded:"",o?pe.skeleton:""].filter(Boolean).join(" ");return(0,ot.jsx)("button",{type:"button","data-aia-pill":"","data-aia-loading":o?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:s,style:{opacity:qe[a]},onMouseDown:r=>r.preventDefault(),onClick:o?void 0:i,disabled:o,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 {
|
|
898
898
|
position: relative;
|
|
899
899
|
z-index: 1;
|
|
900
900
|
pointer-events: auto;
|
|
@@ -904,7 +904,7 @@
|
|
|
904
904
|
align-items: center;
|
|
905
905
|
vertical-align: middle;
|
|
906
906
|
}
|
|
907
|
-
`,document.head.appendChild(e)}var
|
|
907
|
+
`,document.head.appendChild(e)}var $e={list:"PillList-module_list_qvLqO"};var Pe=require("react/jsx-runtime"),Tt=[125,69];function it(e){return e===0?"first":e===1?"next":"last"}function Te({pills:e,activePillIndex:a,onSelectPill:t,activeSelected:o,rounded:i,loading:s}){return s&&e.length===0?(0,Pe.jsx)("span",{className:$e.list,"data-aia-pill-list-loading":"",children:Tt.map((r,h)=>(0,Pe.jsx)("span",{"data-aia-pill-skeleton":"",className:`${pe.pill} ${i?pe.rounded:""} ${pe.skeleton}`,style:{width:r,opacity:qe[it(h)]}},`skel-${r}`))}):(0,Pe.jsx)("span",{className:$e.list,"data-aia-pill-list-loading":s?"":void 0,children:e.map((r,h)=>{let v=!!o&&h===a;return(0,Pe.jsx)(at,{label:r.text,state:v?"selected":it(h),selected:v,rounded:i,loading:s,onClick:()=>t(h)},`${r.type}-${r.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
|
|
908
908
|
(packages/vanilla/src/styles.css). Same tokens, same defaults, so a consumer
|
|
909
909
|
theming one package sees the same result in the other.
|
|
910
910
|
|
|
@@ -1071,7 +1071,7 @@
|
|
|
1071
1071
|
var(--aia-option-color-selected, var(--aia-color-text-default, #fff))
|
|
1072
1072
|
);
|
|
1073
1073
|
}
|
|
1074
|
-
`,document.head.appendChild(e)}var
|
|
1074
|
+
`,document.head.appendChild(e)}var W={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 z=require("react/jsx-runtime");function rt({products:e,listboxId:a,onSelect:t,onFocusChange:o,focusable:i=!0}){if(e.length===0)return null;let s=`${a}-products-label`;return(0,z.jsxs)("section",{className:W.section,"data-aia-products":"",role:"group","aria-labelledby":s,children:[(0,z.jsx)("div",{className:W.label,id:s,children:"Products"}),(0,z.jsx)("div",{className:W.row,"data-aia-products-row":"",children:e.map((r,h)=>(0,z.jsx)(Lt,{product:r,id:`${a}-product-${h}`,onSelect:t,onFocusChange:o,focusable:i},r.id))})]})}function Lt({product:e,id:a,onSelect:t,onFocusChange:o,focusable:i}){let s=r=>{r.metaKey||r.ctrlKey||r.shiftKey||r.altKey||r.button!==0||(r.preventDefault(),t(e))};return(0,z.jsxs)("a",{id:a,className:W.card,"data-aia-product":"",role:"option","aria-selected":!1,href:e.url,tabIndex:i?0:-1,onClick:s,onKeyDown:r=>{r.key!=="Enter"&&r.key!==" "||(r.preventDefault(),t(e))},onFocus:()=>o?.(!0),onBlur:r=>{r.relatedTarget?.closest("[data-aia-dropdown]")||o?.(!1)},children:[(0,z.jsx)("span",{className:W.media,"data-aia-product-placeholder":e.imageUrl?void 0:"",children:e.imageUrl?(0,z.jsx)("img",{className:W.image,src:e.imageUrl,alt:"",loading:"lazy",decoding:"async"}):null}),(0,z.jsxs)("span",{className:W.body,children:[e.vendor?(0,z.jsx)("span",{className:W.vendor,children:e.vendor}):null,(0,z.jsx)("span",{className:W.title,children:e.title}),e.price?(0,z.jsx)("span",{className:W.price,children:e.price}):null]})]})}var ve=require("@magicx-eng/ai-autocomplete-vanilla"),ze=require("react");var nt=require("@magicx-eng/ai-autocomplete-vanilla"),Le=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 {
|
|
1075
1075
|
.aia-grid {
|
|
1076
1076
|
display: grid;
|
|
1077
1077
|
grid-template-columns: repeat(
|
|
@@ -1106,7 +1106,7 @@
|
|
|
1106
1106
|
border-radius: 3px;
|
|
1107
1107
|
}
|
|
1108
1108
|
}
|
|
1109
|
-
`,document.head.appendChild(e)}var
|
|
1109
|
+
`,document.head.appendChild(e)}var lt=require("react/jsx-runtime");function st({min:e="16rem",max:a,gap:t,scroll:o=!1,maxHeight:i,scrollResetKey:s,cols:r,className:h,children:v,...y}){let k=(0,Le.useRef)(null);(0,Le.useLayoutEffect)(()=>{if(s===void 0)return;let M=k.current;M&&(M.scrollTop=0)},[s]);let w={"--aia-grid-min":e};return a&&(w["--aia-grid-max"]=a),t&&(w["--aia-grid-gap"]=t),i&&(w["--aia-grid-max-height"]=i),r&&(w.gridTemplateColumns=(0,nt.optionsGridTemplateColumns)(r)),(0,lt.jsx)("div",{ref:k,className:h?`aia-grid ${h}`:"aia-grid","data-scroll":o||void 0,style:w,...y,children:v})}var be=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 {
|
|
1110
1110
|
position: relative;
|
|
1111
1111
|
overflow: visible;
|
|
1112
1112
|
display: flex;
|
|
@@ -1456,7 +1456,7 @@
|
|
|
1456
1456
|
filter: brightness(0.55);
|
|
1457
1457
|
}
|
|
1458
1458
|
}
|
|
1459
|
-
`,document.head.appendChild(e)}var
|
|
1459
|
+
`,document.head.appendChild(e)}var U={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 ce=require("react/jsx-runtime");function dt({option:e,isHighlighted:a,onSelect:t,onHighlight:o,id:i,loading:s}){let[r,h]=(0,be.useState)(!1),v=(0,be.useRef)(void 0);(0,be.useEffect)(()=>()=>clearTimeout(v.current),[]);let y=()=>{s||!e.is_tappable||r||(h(!0),t(e),clearTimeout(v.current),v.current=setTimeout(()=>h(!1),500))},k=[U.item,a&&!s?U.highlighted:"",e.is_tappable?U.tappable:U.nonTappable,r?U.pressed:""].filter(Boolean).join(" ");return(0,ce.jsxs)("div",{id:i,role:"option","data-aia-option":"","data-aia-loading":s?"":void 0,"aria-selected":a,className:k,tabIndex:s||!e.is_tappable?-1:0,onClick:y,onKeyDown:w=>{!s&&e.is_tappable&&(w.key==="Enter"||w.key===" ")&&(w.preventDefault(),y())},onMouseEnter:!s&&e.is_tappable?o:void 0,children:[(0,ce.jsx)("div",{className:U.streaks}),(0,ce.jsx)("div",{className:U.streaksVert}),(0,ce.jsxs)("span",{className:U.content,children:[(0,ce.jsx)("span",{className:U.text,children:e.icon?`${e.icon} ${e.text}`:e.text}),e.tag&&(0,ce.jsx)("span",{className:U.tag,children:e.tag})]})]})}var je=require("react/jsx-runtime");function zt(){let[e,a]=(0,ze.useState)(ve.isOptionsGridMobileViewport);return(0,ze.useEffect)(()=>{if(typeof window>"u"||!window.matchMedia)return;let t=window.matchMedia(ve.OPTIONS_GRID_MOBILE_QUERY),o=()=>a(t.matches);return o(),t.addEventListener("change",o),()=>t.removeEventListener("change",o)},[]),e}function pt({options:e,activeIndex:a,onSelect:t,onHighlight:o,listboxId:i,loading:s,groupKey:r}){let h=zt(),{cols:v,maxHeight:y}=(0,ve.computeOptionsGridLayout)(e.length,h);return(0,je.jsx)(st,{min:"250px",max:"1fr",gap:"0",scroll:!0,scrollResetKey:r,cols:v,maxHeight:y,children:e.map((k,w)=>(0,je.jsx)(dt,{option:k,isHighlighted:w===a,onSelect:t,onHighlight:()=>o(w),id:`${i}-option-${w}`,loading:s},k.text))})}if(typeof document<"u"&&!document.getElementById("ac-style-8414cd5f")){let e=document.createElement("style");e.id="ac-style-8414cd5f",e.textContent=`@layer layout {
|
|
1460
1460
|
.aia-stack {
|
|
1461
1461
|
display: flex;
|
|
1462
1462
|
flex-direction: column;
|
|
@@ -1473,7 +1473,7 @@
|
|
|
1473
1473
|
}
|
|
1474
1474
|
/* data-align="stretch" is the flex default \u2014 no rule needed. */
|
|
1475
1475
|
}
|
|
1476
|
-
`,document.head.appendChild(e)}var
|
|
1476
|
+
`,document.head.appendChild(e)}var ut=require("react/jsx-runtime");function ct({space:e,align:a="stretch",className:t,children:o,...i}){let s=e?{"--aia-stack-space":e}:void 0;return(0,ut.jsx)("div",{className:t?`aia-stack ${t}`:"aia-stack","data-align":a,style:s,...i,children:o})}var B=require("react/jsx-runtime"),Bt=[159,119,164],Ft=()=>{};function Mt(e){let a=()=>typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches,[t,o]=(0,xe.useState)(a);if((0,xe.useEffect)(()=>{if(e!=="auto"||typeof window>"u"||typeof window.matchMedia!="function")return;let i=window.matchMedia("(prefers-color-scheme: dark)"),s=()=>o(i.matches);return i.addEventListener("change",s),()=>i.removeEventListener("change",s)},[e]),e!==void 0)return e==="auto"?t?"dark":"light":e}function Be({suggestions:e,activeIndex:a,onSelect:t,onHighlight:o,isOpen:i,id:s,className:r,pills:h,onPillClick:v,showPills:y=!0,onSkip:k,showSkipButton:w=!0,skipDisabled:M=!1,activeSelected:X=!1,isLoading:D=!1,isInputEmpty:R=!1,products:G,onProductSelect:Z,onProductFocusChange:N,optionsPosition:_="below",mode:Y}){let q=Mt(Y),m=q!==void 0,re=e[0]?.options??[],ee=!!(h&&h.length>0&&v),T=!!(G&&G.length>0),L=i&&(re.length>0||y&&ee||D||T),$={suggestions:e,activeIndex:a,pills:h,showPills:y,showSkipButton:w,skipDisabled:M,activeSelected:X,isLoading:D,isInputEmpty:R,products:G},j=(0,xe.useRef)($);L&&(j.current=$);let g=L?$:j.current,O=g.suggestions[0],C=O?.options??[],te=g.activeIndex>=0&&!!C[g.activeIndex]?.is_tappable,K=!!(g.pills&&g.pills.length>0&&v),ae=g.showPills&&K,Q=g.showPills&&!K&&g.isLoading,H=ae||Q,l=K&&g.showSkipButton&&!g.isInputEmpty&&!!k,p=g.pills?.[0]?.text,u=C.length>0,n=g.isLoading&&!u,f=g.products??[];return(0,B.jsx)("div",{id:s,role:"listbox","data-aia-dropdown":"","data-options-position":_,"data-mode":q,"data-aia-loading":g.isLoading?"":void 0,"data-aia-has-products":f.length>0?"":void 0,className:`${m?"magicx-aia ":""}${de.dropdown} ${L?de.visible:""} ${r??""}`,onMouseDown:I=>I.preventDefault(),children:(0,B.jsxs)(ct,{space:"8px",children:[(H||l)&&(0,B.jsxs)(_e,{noWrap:!0,className:de.pillBar,"data-aia-pillbar":"",children:[H&&(0,B.jsx)("span",{className:de.pillScroll,"data-aia-pill-scroll":"",children:(0,B.jsx)(Te,{pills:g.pills??[],activePillIndex:0,activeSelected:g.activeSelected,onSelectPill:v??(()=>{}),rounded:!0,loading:g.isLoading})}),l&&(0,B.jsx)("button",{type:"button",tabIndex:-1,className:de.skip,"data-aia-skip":"",disabled:g.isLoading||g.skipDisabled,"aria-label":p?`Skip ${p}`:"Skip",onClick:k,children:"skip"})]}),u&&(0,B.jsx)(pt,{options:C,activeIndex:g.activeIndex,onSelect:t,onHighlight:o,listboxId:s,loading:g.isLoading,groupKey:O?`${O.type} ${O.text}`:""}),n&&(0,B.jsx)("div",{className:de.skeletonBars,"data-aia-skeleton-bars":"",children:Bt.map(I=>(0,B.jsx)("span",{className:de.skeletonBar,style:{width:I}},`bar-${I}`))}),(0,B.jsx)(rt,{products:f,listboxId:s,onSelect:Z??Ft,onFocusChange:N,focusable:L}),(0,B.jsx)(tt,{isOptionHighlighted:te,isInputEmpty:g.isInputEmpty})]})})}var we=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 {
|
|
1477
1477
|
flex-shrink: 0;
|
|
1478
1478
|
width: 32px;
|
|
1479
1479
|
height: 32px;
|
|
@@ -1508,5 +1508,5 @@
|
|
|
1508
1508
|
);
|
|
1509
1509
|
cursor: default;
|
|
1510
1510
|
}
|
|
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});
|
|
1511
|
+
`,document.head.appendChild(e)}var mt={submitButton:"SubmitButton-module_submitButton_otz7H"};var Fe=require("react/jsx-runtime");function ht({disabled:e,onClick:a}){return(0,Fe.jsx)("button",{type:"button","data-aia-submit":"",className:mt.submitButton,disabled:e,onClick:t=>{t.stopPropagation(),a()},"aria-label":"Submit",children:(0,Fe.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,Fe.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var ft=require("@magicx-eng/ai-autocomplete-vanilla"),x=require("react");var Qe=require("react");function gt(e){let a=(0,Qe.useRef)(e);a.current=e;let t=(0,Qe.useRef)(null);t.current===null&&(t.current={fetch:(i,s)=>{let r=a.current;return r?r.fetch(i,s):Promise.reject(new Error("products config removed"))},transform:i=>a.current?.transform(i)??[],get limit(){return a.current?.limit}});let o=e!==void 0;return{config:o?t.current:void 0,enabled:o}}var Nt={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 Me({onSubmit:e,onError:a,optionOverrides:t,maskCompletedText:o,apiConfig:i,additionalContext:s,columns:r=2,dropdownTrigger:h,optionsPosition:v,closeDropdownOnBlur:y,showNonTappableOptions:k,showSkipButton:w,onFocus:M,onBlur:X,value:D,completedParams:R,onChange:G,onParamsChange:Z,products:N,onProductSelect:_,source:Y,setCursor:q}){let m=(0,x.useRef)(null),[re,ee]=(0,x.useState)(null),T=(0,x.useRef)(e);T.current=e;let L=(0,x.useRef)(a);L.current=a;let $=(0,x.useRef)(G);$.current=G;let j=(0,x.useRef)(Z);j.current=Z;let g=(0,x.useRef)(M);g.current=M;let O=(0,x.useRef)(X);O.current=X;let C=(0,x.useRef)(q);C.current=q;let te=(0,x.useRef)(_);te.current=_;let K=gt(N);(0,x.useEffect)(()=>{if(typeof document>"u")return;let d=new ft.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:i,additionalContext:s,optionOverrides:t,maskCompletedText:o,columns:r,dropdownTrigger:h,optionsPosition:v,closeDropdownOnBlur:y,showNonTappableOptions:k,source:Y,value:D,completedParams:R,onSubmit:(...A)=>T.current?.(...A),onError:(...A)=>L.current?.(...A),onChange:(...A)=>$.current?.(...A),onParamsChange:(...A)=>j.current?.(...A),onFocus:()=>g.current?.(),onBlur:()=>O.current?.(),onProductSelect:A=>te.current?.(A),setCursor:A=>C.current?.(A),products:K.config});m.current=d,ee(d.getState());let E=d.subscribe(A=>ee(A));return()=>{E(),d.destroy(),m.current===d&&(m.current=null)}},[]),(0,x.useEffect)(()=>{D!==void 0&&m.current?.setValue(D)},[D]),(0,x.useEffect)(()=>{R!==void 0&&m.current?.setCompletedParams(R)},[R]);let ae=JSON.stringify(i??null),Q;try{Q=JSON.stringify(s??null)}catch{Q="[unstringifiable]"}let H=(0,x.useRef)(t),l=(0,x.useRef)(0);if(t!==H.current){let d=H.current,E=t,A=Object.keys(d??{}),ge=Object.keys(E??{});(A.length!==ge.length||ge.some(se=>!d?.[se]||E[se]!==d[se]))&&l.current++,H.current=t}(0,x.useEffect)(()=>{m.current?.update({apiConfig:i,additionalContext:s,optionOverrides:t,dropdownTrigger:h,optionsPosition:v,closeDropdownOnBlur:y,showNonTappableOptions:k})},[ae,Q,l.current,h,v,y,k]);let p=(0,x.useRef)(!1);(0,x.useEffect)(()=>{if(!p.current){p.current=!0;return}m.current?.update({products:K.config})},[K.enabled]);let u=(0,x.useRef)(null);u.current===null&&(u.current={handleTextChange:d=>m.current?.handleTextChange(d),handleKeyDown:d=>{let E="nativeEvent"in d?d.nativeEvent:d;m.current?.handleKeyDown(E)},setFocused:d=>m.current?.setFocused(d),startEditingParam:d=>m.current?.startEditingParam(d),exitEditMode:()=>m.current?.exitEditMode(),handleCaretAfterInput:d=>m.current?.handleCaretAfterInput(d),handleCaretMove:d=>m.current?.handleCaretMove(d),replaceEditingRange:d=>m.current?.replaceEditingRange(d)??!1,setActivePill:d=>m.current?.setActivePill(d),skipActivePill:()=>m.current?.skipActivePill(),removeLastParam:()=>m.current?.removeLastParam(),clearNewParamId:()=>m.current?.clearNewParamId(),reset:()=>m.current?.reset(),selectOption:d=>m.current?.selectOption(d),selectProduct:d=>m.current?.selectProduct(d),setActiveDropdownIndex:d=>m.current?.setActiveDropdownIndex(d),handleFocus:()=>m.current?.setFocused(!0),handleBlur:()=>m.current?.setFocused(!1)});let n=u.current,f=(0,x.useCallback)(d=>{let E=d.target.value,ge=E.length>0&&!d.nativeEvent?.isComposing&&E[0]!==E[0].toUpperCase()?E[0].toUpperCase()+E.slice(1):E;m.current?.handleTextChange(ge)},[]),I=(0,x.useCallback)(d=>{m.current?.handleKeyDown(d.nativeEvent)},[]),oe=m.current,c=re??Nt,Ie=D!==void 0?D:c.text,ye=R!==void 0?R:c.completedParams,me=c.actionableSuggestions,Se=me[0],he=oe?.listboxId??"",He=c.activeDropdownIndex>=0&&oe?`${he}-option-${c.activeDropdownIndex}`:void 0,ne=c.editingParam,ke=ne?{type:ne.suggestionType,text:ne.suggestionPlaceholder,required:!0,options:ne.options}:null,Ae=ke??Se,Ge=ke?[ke]:me,Ce=!oe||c.isLoading&&!c.editingParam&&!c.inSelectionAnimation;return{completedParams:ye,skippedParams:c.skippedParams,suggestionPills:me,setActivePill:n.setActivePill,skipActivePill:n.skipActivePill,removeLastParam:n.removeLastParam,segments:c.segments,newParamId:c.newParamId,clearNewParamId:n.clearNewParamId,suggestions:c.suggestions,activeIndex:c.activeDropdownIndex,isReady:c.isReady,isLoading:Ce,isFocused:c.isFocused,isDropdownOpen:c.isDropdownOpen,isActivePillSelected:c.isActivePillSelected,placeholderText:c.placeholderText,listboxId:he,error:c.error,products:c.products,selectProduct:n.selectProduct,handleTextChange:n.handleTextChange,handleKeyDown:n.handleKeyDown,setFocused:n.setFocused,editingParam:ne,editingAnchor:c.editingAnchor,caretOffset:c.caretOffset,startEditingParam:n.startEditingParam,exitEditMode:n.exitEditMode,handleCaretAfterInput:n.handleCaretAfterInput,handleCaretMove:n.handleCaretMove,replaceEditingRange:n.replaceEditingRange,inputProps:{value:Ie,placeholder:c.placeholderText||void 0,onChange:f,onKeyDown:I,onFocus:n.handleFocus,onBlur:n.handleBlur,role:"combobox","aria-expanded":c.isDropdownOpen,"aria-activedescendant":He,"aria-autocomplete":"list","aria-controls":he},reset:n.reset,dropdownProps:{suggestions:Ae?[{...Ae,options:c.filteredOptions}]:[],activeIndex:c.activeDropdownIndex,onSelect:n.selectOption,onHighlight:n.setActiveDropdownIndex,isOpen:c.isDropdownOpen,id:he,pills:Ge,activeSelected:c.isActivePillSelected,onPillClick:n.setActivePill,onSkip:n.skipActivePill,showSkipButton:(w??!0)&&!ne,skipDisabled:c.inSelectionAnimation,isLoading:Ce,isInputEmpty:Ie.trim().length===0,products:c.products,onProductSelect:n.selectProduct,onProductFocusChange:n.setFocused,optionsPosition:v??"below"}}}var F=require("@magicx-eng/ai-autocomplete-vanilla"),b=require("react"),Ne;function Ot(){if(Ne!==void 0)return Ne;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Ne=e.contentEditable==="plaintext-only",Ne}function bt(e){let{segments:a,newParamId:t,editingParam:o,editingAnchor:i,caretOffset:s,placeholderText:r,isFocused:h,isDropdownOpen:v,listboxId:y,activeDescendantId:k,autoFocus:w,handleTextChange:M,handleKeyDown:X,handleCaretAfterInput:D,handleCaretMove:R,startEditingParam:G,replaceEditingRange:Z,setFocused:N}=e,_=(0,b.useRef)(null),Y=(0,b.useRef)(!1),q=(0,b.useRef)(""),m=(0,b.useRef)(""),re=(0,b.useRef)(null),ee=(0,b.useRef)(0);re.current=s,(0,b.useEffect)(()=>{if(!w)return;let l=_.current;if(!l)return;document.activeElement===l?N(!0):l.focus();let p=l.ownerDocument??document,u=p.getSelection(),n=u&&u.rangeCount>0&&l.contains(u.anchorNode);if(u&&!n){let f=p.createRange();f.selectNodeContents(l),f.collapse(!0),u.removeAllRanges(),u.addRange(f)}},[w,N]),(0,b.useEffect)(()=>{let l=_.current;if(!l)return;let p=l.ownerDocument??document,u=()=>{let n=p.getSelection();if(!n||n.rangeCount===0||!n.anchorNode||!l.contains(n.anchorNode))return;let f=n.anchorNode,I=f.nodeType===Node.ELEMENT_NODE?f:f.parentElement,c=(n.isCollapsed?I?.closest('strong[data-seg="completed"][data-param-id]'):null)?.dataset.paramId??null;if(c&&c!==o?.id){G(c);return}performance.now()-ee.current<50||R((0,F.getCursorOffset)(l))};return p.addEventListener("selectionchange",u),()=>p.removeEventListener("selectionchange",u)},[o,G,R]),(0,b.useLayoutEffect)(()=>{let l=_.current;l&&(0,F.renderEditableContent)({input:l,segments:a,newParamId:t,editingParamId:o?.id??null,placeholderText:r??"",isFocused:h})},[a,t,o,r,h]),(0,b.useLayoutEffect)(()=>{let l=q.current,p=t??"";if(q.current=p,!p||p===l)return;let u=_.current;if(!u)return;u.focus();let n=re.current??(0,F.plainTextLength)(u);(0,F.setCursorOffset)(u,n)},[t]),(0,b.useLayoutEffect)(()=>{let l=m.current,p=o?.id??"";if(m.current=p,!p||p===l||i==null)return;let u=_.current;u&&(0,F.setCursorOffset)(u,i)},[o,i]);let T=(0,b.useCallback)(()=>{if(Y.current)return;let l=_.current;if(!l)return;let p=(0,F.extractPlainText)(l),n=p.length>0&&p[0]!==p[0].toUpperCase()?p[0].toUpperCase()+p.slice(1):p;M(n)},[M]),L=(0,b.useCallback)(()=>{ee.current=performance.now(),T();let l=_.current;l&&D((0,F.getCursorOffset)(l))},[T,D]);(0,b.useEffect)(()=>{let l=_.current;if(!l)return;let p=u=>{let n=u,f=n.inputType;if(f==="insertParagraph"||f==="insertLineBreak"||f==="insertFromDrop"){u.preventDefault();return}if(f.startsWith("insert")||f.startsWith("delete")){let I=f.startsWith("delete")?"":n.data??"";Z(I)&&u.preventDefault()}};return l.addEventListener("beforeinput",p),()=>l.removeEventListener("beforeinput",p)},[Z]);let $=(0,b.useCallback)(()=>{Y.current=!0},[]),j=(0,b.useCallback)(()=>{Y.current=!1,T()},[T]),g=(0,b.useCallback)(l=>{l.preventDefault();let p=_.current;if(!p)return;let u=(l.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!u)return;let n=p.ownerDocument??document,f=n.getSelection();if(!f||f.rangeCount===0)return;let I=f.getRangeAt(0);if(!p.contains(I.startContainer))return;I.deleteContents();let oe=n.createTextNode(u);I.insertNode(oe),I.setStartAfter(oe),I.collapse(!0),f.removeAllRanges(),f.addRange(I),T()},[T]),O=(0,b.useCallback)(l=>X(l),[X]),C=(0,b.useCallback)(()=>N(!0),[N]),te=(0,b.useCallback)(()=>N(!1),[N]),K=(0,b.useCallback)(()=>_.current?.focus(),[]),ae=(0,b.useCallback)(()=>_.current?.blur(),[]),Q=(0,b.useCallback)(()=>{let l=_.current;return l?(0,F.extractPlainText)(l):""},[]),H=Ot()?"plaintext-only":"true";return{inputRef:_,editorProps:{ref:_,contentEditable:H,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":y,"aria-expanded":v,"aria-activedescendant":k,spellCheck:!0,enterKeyHint:"send",onInput:L,onKeyDown:O,onCompositionStart:$,onCompositionEnd:j,onPaste:g,onFocus:C,onBlur:te},getPlainText:Q,focus:K,blur:ae}}var V=require("react/jsx-runtime");function Ht(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var vt=(0,S.forwardRef)(function({onSubmit:a,onError:t,optionOverrides:o,maskCompletedText:i,className:s,apiConfig:r,additionalContext:h,columns:v,pillPlacement:y="dropdown",mode:k="auto",optionsPosition:w="below",animations:M=!0,dropdownTrigger:X,closeDropdownOnBlur:D,showNonTappableOptions:R,showSkipButton:G,autoFocus:Z=!0,onFocus:N,onBlur:_,value:Y,completedParams:q,onChange:m,onParamsChange:re,products:ee,onProductSelect:T,submitButton:L},$){let j=(0,S.useRef)(null),g=(0,S.useRef)(null),O=(0,S.useRef)(()=>{}),C=(0,S.useRef)(null),te=(0,S.useRef)(null);(0,S.useEffect)(()=>{let P=j.current;if(P)return C.current?C.current.setMode(k):C.current=new we.ModeController(P,k),()=>{C.current?.destroy(),C.current=null}},[k]);let K=(0,S.useCallback)(P=>{let le=te.current?.current;le&&(le.focus(),(0,we.setCursorOffset)(le,P))},[]),{completedParams:ae,skippedParams:Q,suggestionPills:H,setActivePill:l,skipActivePill:p,segments:u,newParamId:n,clearNewParamId:f,placeholderText:I,isFocused:oe,isDropdownOpen:c,isActivePillSelected:Ie,isLoading:ye,activeIndex:me,listboxId:Se,handleTextChange:he,handleKeyDown:He,setFocused:ne,editingParam:ke,editingAnchor:Ae,caretOffset:Ge,startEditingParam:Ce,handleCaretAfterInput:d,handleCaretMove:E,replaceEditingRange:A,dropdownProps:ge,reset:se}=Me({onSubmit:P=>O.current(P),onError:t,optionOverrides:o,maskCompletedText:i,apiConfig:r,additionalContext:h,columns:v,dropdownTrigger:X,optionsPosition:w,closeDropdownOnBlur:D,showNonTappableOptions:R,showSkipButton:G,onFocus:N,onBlur:_,value:Y,completedParams:q,onChange:m,onParamsChange:re,products:ee,onProductSelect:T,source:"full-sdk",setCursor:K});(0,S.useEffect)(()=>{if(!n)return;let P=window.setTimeout(()=>f(),650);return()=>window.clearTimeout(P)},[n,f]);let xt=me>=0?`${Se}-option-${me}`:void 0,{inputRef:Ke,editorProps:wt,focus:Ee,blur:Je,getPlainText:Xe}=bt({segments:u,newParamId:n,editingParam:ke,editingAnchor:Ae,caretOffset:Ge,placeholderText:I,isFocused:oe,isDropdownOpen:c,listboxId:Se,activeDescendantId:xt,autoFocus:Z,handleTextChange:he,handleKeyDown:He,handleCaretAfterInput:d,handleCaretMove:E,startEditingParam:Ce,replaceEditingRange:A,setFocused:ne});te.current=Ke,(0,S.useLayoutEffect)(()=>{let P=g.current,le=Ke.current;if(!P||!le)return;let Ze=()=>{let et=P.firstElementChild;if(!et)return;let Pt=et.getBoundingClientRect(),It=le.getBoundingClientRect();Pt.top>=It.bottom-2?P.setAttribute("data-aia-pill-wrapped",""):P.removeAttribute("data-aia-pill-wrapped")};Ze();let Ye=new ResizeObserver(Ze);return Ye.observe(le),()=>Ye.disconnect()},[u,H.length,ye,Ke]),(0,S.useImperativeHandle)($,()=>({focus:Ee,blur:Je,reset:se,setMode:P=>C.current?.setMode(P),skipActivePill:p}),[Ee,Je,se,p]);let De=!!u.length||ae.length>0,We=(0,S.useCallback)(()=>{if(!De)return;let P=Xe();a((0,we.buildSubmitResult)(P,ae,Q)),se()},[De,ae,Q,a,se,Xe]);O.current=We;let yt=(0,S.useCallback)(P=>{P.target?.closest("[data-aia-pill]")||Ee()},[Ee]),kt=y==="inline",_t=y==="dropdown";return(0,V.jsxs)("div",{ref:j,className:`magicx-aia ${ue.container} ${s??""}`,"data-pill-placement":y,"data-options-position":w,"data-animations":M?"on":"off","data-mode":Ht(k),children:[(0,V.jsx)(Be,{...ge,showPills:_t}),(0,V.jsxs)("div",{className:ue.inputWrapper,onClick:yt,children:[(0,V.jsxs)("div",{className:ue.editorArea,"data-aia-editor":"",children:[(0,V.jsx)("div",{...wt,className:ue.input,"data-aia-input":""}),kt&&(ye||H.length>0)&&(0,V.jsx)("span",{ref:g,className:ue.pillListContainer,"data-aia-pill-list-container":"",children:(0,V.jsx)(Te,{pills:H,activePillIndex:0,activeSelected:Ie,onSelectPill:l,loading:ye})})]}),L===null?null:L===void 0?(0,V.jsx)(ht,{disabled:!De,onClick:We}):(0,V.jsx)("span",{"data-aia-submit":"",className:ue.submitSlot,onClick:P=>{De&&(P.stopPropagation(),We())},children:L})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,buildSubmitResult,useAIAutocomplete,withSkippedParams});
|
|
1512
1512
|
//# sourceMappingURL=index.js.map
|