@magicx-eng/ai-autocomplete-react 0.10.1 → 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 +1 -0
- package/dist/index.d.mts +17 -1
- package/dist/index.d.ts +17 -1
- 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. |
|
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";
|
|
@@ -99,6 +107,14 @@ interface UseAIAutocompleteOptions {
|
|
|
99
107
|
optionOverrides?: OptionOverrides;
|
|
100
108
|
maskCompletedText?: boolean;
|
|
101
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>;
|
|
102
118
|
columns?: number;
|
|
103
119
|
/**
|
|
104
120
|
* SDK surface identifier for telemetry. Set automatically by the Tier 1
|
|
@@ -330,6 +346,6 @@ declare const AIAutocomplete: react.ForwardRefExoticComponent<AIAutocompleteProp
|
|
|
330
346
|
|
|
331
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;
|
|
332
348
|
|
|
333
|
-
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;
|
|
334
350
|
|
|
335
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";
|
|
@@ -99,6 +107,14 @@ interface UseAIAutocompleteOptions {
|
|
|
99
107
|
optionOverrides?: OptionOverrides;
|
|
100
108
|
maskCompletedText?: boolean;
|
|
101
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>;
|
|
102
118
|
columns?: number;
|
|
103
119
|
/**
|
|
104
120
|
* SDK surface identifier for telemetry. Set automatically by the Tier 1
|
|
@@ -330,6 +346,6 @@ declare const AIAutocomplete: react.ForwardRefExoticComponent<AIAutocompleteProp
|
|
|
330
346
|
|
|
331
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;
|
|
332
348
|
|
|
333
|
-
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;
|
|
334
350
|
|
|
335
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
|