@magicx-eng/ai-autocomplete-react 0.15.0 → 0.16.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 +31 -16
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +42 -21
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +42 -21
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -17,7 +17,7 @@ A React/TypeScript SDK that provides a guided AI-powered autocomplete experience
|
|
|
17
17
|
- **IME-safe** — composition events are buffered so input text is committed once, after composition ends
|
|
18
18
|
- **Client-side filtering** — instant substring filtering on every keystroke
|
|
19
19
|
- **Datepicker** — date parameters are answered with a calendar instead of an option list. Click a day or navigate with the arrow keys; the date is committed the way it would be written — `Tuesday` for a date inside the next week, `March 23` for one later this year, `March 23 2027` for another year. Tapping a committed date re-opens the calendar on the month that text names now — for a weekday name, that is the next such day, not the one originally picked.
|
|
20
|
-
- **Option overrides** —
|
|
20
|
+
- **Option overrides** — supply the options for a parameter yourself: a fixed list, a computed one, or one fetched from your own search endpoint as the user types
|
|
21
21
|
- **Product strip (opt-in)** — plug in any platform's product search and the dropdown renders a horizontal row of product cards below the options; the SDK owns the UI, your integration owns only `fetch` and `transform`
|
|
22
22
|
- **Controlled & uncontrolled** — works out of the box or integrates with external state
|
|
23
23
|
- **Ref forwarding** — imperative `focus()`, `blur()`, `reset()`, and `setMode()` via ref
|
|
@@ -315,7 +315,7 @@ function App() {
|
|
|
315
315
|
| `onError?` | `(error: Error) => void` | — | Called when a fetch fails. |
|
|
316
316
|
| `apiConfig?` | `APIConfig` | — | Runtime API configuration (see below). |
|
|
317
317
|
| `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. |
|
|
318
|
-
| `optionOverrides?` | `
|
|
318
|
+
| `optionOverrides?` | `OptionOverrides` | — | Supply the options for a parameter yourself, per suggestion type — fixed, computed, or fetched as the user types. See [Option Overrides](#option-overrides). |
|
|
319
319
|
| `maskCompletedText?` | `boolean` | `false` | When `true`, omits completed params' literal text from API requests (for masking PII/sensitive values from the server). |
|
|
320
320
|
| `className?` | `string` | — | CSS class applied to the container. |
|
|
321
321
|
| `columns?` | `number` | `2` | Number of columns in the dropdown grid. |
|
|
@@ -764,23 +764,38 @@ correlate a user's report with the query that produced it.
|
|
|
764
764
|
|
|
765
765
|
## Option Overrides
|
|
766
766
|
|
|
767
|
+
Supply the options for a parameter yourself instead of taking the server's. Each entry is keyed by the suggestion `type` and is a function of the phrase the user has typed for that parameter — return an array for a fixed or computed list, or a promise for one that lives behind a request (the dropdown shows its loading skeleton until it settles):
|
|
768
|
+
|
|
767
769
|
```tsx
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
770
|
+
import type { OptionOverrides } from "@magicx-eng/ai-autocomplete-react";
|
|
771
|
+
|
|
772
|
+
// Inline is fine: the functions are read live on each call, so a fresh object
|
|
773
|
+
// per render is not a swap. Only the set of overridden types has to change
|
|
774
|
+
// for the core to be told.
|
|
775
|
+
const overrides: OptionOverrides = {
|
|
776
|
+
account: () => [
|
|
777
|
+
{ text: "Savings", is_tappable: true, kind: null },
|
|
778
|
+
{ text: "Checking", is_tappable: true, kind: null },
|
|
779
|
+
],
|
|
780
|
+
location: async (query, signal) => {
|
|
781
|
+
const res = await fetch(`/api/locations?q=${encodeURIComponent(query)}`, { signal });
|
|
782
|
+
const places = await res.json();
|
|
783
|
+
return places.map((p) => ({ text: p.name, is_tappable: true, kind: null }));
|
|
784
|
+
},
|
|
785
|
+
};
|
|
786
|
+
|
|
787
|
+
<AIAutocomplete optionOverrides={overrides} onSubmit={handleSubmit} />;
|
|
782
788
|
```
|
|
783
789
|
|
|
790
|
+
How it behaves:
|
|
791
|
+
|
|
792
|
+
- **Called** once the moment the parameter becomes active, with whatever the user has already typed for it (usually `""`, the request for the default list), and again on the SDK's typing debounce with each new phrase — so you can search or page a larger list. Return the same list again if the phrase is already covered.
|
|
793
|
+
- **Shown as-is.** The answer is not filtered again by the phrase it was produced for, so a fuzzy match survives. Between two calls the previous answer is filtered locally by what the user types. Typing an option's full text completes the parameter, as it does for a server option.
|
|
794
|
+
- **The server steps back.** Its own options for an overridden type are never shown, and it is not asked for suggestions while an override owns the active parameter — it is asked again when the parameter is answered or skipped. Return an empty list for a typed phrase and the SDK falls back to the server for that phrase (once), the way it does for a parameter with no matching options. An empty list for `""` leaves the parameter on screen with no options.
|
|
795
|
+
- **Honour `signal`** — it is aborted when a newer phrase supersedes the call, when the parameter stops being active, and on unmount. A throw or a rejection is logged once and treated as an empty answer, never as a fetch error.
|
|
796
|
+
|
|
797
|
+
The hook's `isLoading` is true while an answer is pending, the same flag it raises for a suggest request.
|
|
798
|
+
|
|
784
799
|
## License
|
|
785
800
|
|
|
786
801
|
Private package. All rights reserved.
|
package/dist/index.d.mts
CHANGED
|
@@ -339,7 +339,7 @@ interface AIAutocompleteDropdownProps {
|
|
|
339
339
|
/**
|
|
340
340
|
* Extra disabled gate for the skip button beyond `isLoading`. Provided by
|
|
341
341
|
* `dropdownProps` from the hook (wired to `inSelectionAnimation`): the
|
|
342
|
-
* UI-facing loading flag is deliberately suppressed during the ~
|
|
342
|
+
* UI-facing loading flag is deliberately suppressed during the ~170ms
|
|
343
343
|
* post-selection window, but `skipActivePill` no-ops in it — the button
|
|
344
344
|
* renders disabled instead of swallowing clicks silently. Default: false.
|
|
345
345
|
*/
|
package/dist/index.d.ts
CHANGED
|
@@ -339,7 +339,7 @@ interface AIAutocompleteDropdownProps {
|
|
|
339
339
|
/**
|
|
340
340
|
* Extra disabled gate for the skip button beyond `isLoading`. Provided by
|
|
341
341
|
* `dropdownProps` from the hook (wired to `inSelectionAnimation`): the
|
|
342
|
-
* UI-facing loading flag is deliberately suppressed during the ~
|
|
342
|
+
* UI-facing loading flag is deliberately suppressed during the ~170ms
|
|
343
343
|
* post-selection window, but `skipActivePill` no-ops in it — the button
|
|
344
344
|
* renders disabled instead of swallowing clicks silently. Default: false.
|
|
345
345
|
*/
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var Xe=Object.defineProperty;var Gt=Object.getOwnPropertyDescriptor;var Ht=Object.getOwnPropertyNames;var Kt=Object.prototype.hasOwnProperty;var Wt=(e,a)=>{for(var t in a)Xe(e,t,{get:a[t],enumerable:!0})},Ut=(e,a,t,i)=>{if(a&&typeof a=="object"||typeof a=="function")for(let n of Ht(a))!Kt.call(e,n)&&n!==t&&Xe(e,n,{get:()=>a[n],enumerable:!(i=Gt(a,n))||i.enumerable});return e};var qt=e=>Ut(Xe({},"__esModule",{value:!0}),e);var io={};Wt(io,{AIAutocomplete:()=>Et,AIAutocompleteDropdown:()=>We,WEEKDAY_LABELS:()=>C.WEEKDAY_LABELS,buildSubmitResult:()=>C.buildSubmitResult,cellDay:()=>C.cellDay,cellIso:()=>C.cellIso,formatDate:()=>C.formatDate,isoDate:()=>C.isoDate,monthLabel:()=>C.monthLabel,parseDate:()=>C.parseDate,parseLooseDate:()=>C.parseLooseDate,useAIAutocomplete:()=>qe,withSkippedParams:()=>C.withSkippedParams});module.exports=qt(io);var C=require("@magicx-eng/ai-autocomplete-vanilla");var T=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-67791514")){let e=document.createElement("style");e.id="ac-style-67791514",e.textContent=`.AIAutocomplete-module_container_KKjFU {
|
|
2
2
|
position: relative;
|
|
3
3
|
/* Inherits the host page's font by default. Consumers can pin a specific
|
|
4
4
|
font on the library via \`--aia-font-family: 'Custom Font'\` without
|
|
@@ -193,7 +193,7 @@
|
|
|
193
193
|
opacity: 0;
|
|
194
194
|
}
|
|
195
195
|
}
|
|
196
|
-
`,document.head.appendChild(e)}var Pe={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
|
|
196
|
+
`,document.head.appendChild(e)}var Pe={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 Ke=require("@magicx-eng/ai-autocomplete-vanilla"),Q=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-0ae03977")){let e=document.createElement("style");e.id="ac-style-0ae03977",e.textContent=`/*
|
|
197
197
|
* Built-in appearance defaults \u2014 zero specificity via :where().
|
|
198
198
|
* Consumer CSS always wins without !important.
|
|
199
199
|
*
|
|
@@ -620,12 +620,13 @@
|
|
|
620
620
|
disc at the bottom-centre of the option list, shown while the list can still
|
|
621
621
|
scroll down. It rests just above the grid's reserved band
|
|
622
622
|
(--aia-scroll-arrow-bottom is measured and set inline by the controller so it
|
|
623
|
-
tracks the grid's bottom edge in every layout)
|
|
624
|
-
the dropdown's lower edge, where the
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
623
|
+
tracks the grid's bottom edge in every layout). Its two moves differ on
|
|
624
|
+
purpose: it ENTERS by rising from below the dropdown's lower edge, where the
|
|
625
|
+
dropdown's overflow clips it \u2014 so it emerges from behind the footer \u2014 and it
|
|
626
|
+
LEAVES by dissolving in place under data-aia-leaving (see below). z-index 2
|
|
627
|
+
puts it over the option rows and under the footer (z-index 3). Declarations
|
|
628
|
+
mirror vanilla's .magicx-aia-scroll-arrow and Angular's copy \u2014 change all
|
|
629
|
+
three in the same commit. */
|
|
629
630
|
.AIAutocompleteDropdown-module_scrollArrow_uUzV0 {
|
|
630
631
|
position: absolute;
|
|
631
632
|
left: 50%;
|
|
@@ -649,15 +650,34 @@
|
|
|
649
650
|
box-shadow: var(--aia-scroll-arrow-shadow, 0 2px 8px rgba(0, 0, 0, 0.12));
|
|
650
651
|
cursor: pointer;
|
|
651
652
|
pointer-events: none;
|
|
653
|
+
/* Parked: below the panel's edge (clipped), and transparent so the re-park
|
|
654
|
+
after a fade \u2014 scale back out to here \u2014 never shows. Only the transform
|
|
655
|
+
transitions here, so the disc rises at full strength instead of fading
|
|
656
|
+
in on the way up. */
|
|
657
|
+
opacity: 0;
|
|
652
658
|
transform: translateY(calc(100% + var(--aia-scroll-arrow-bottom, 8px) + 4px));
|
|
653
659
|
transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
654
660
|
}
|
|
655
661
|
|
|
656
662
|
.AIAutocompleteDropdown-module_scrollArrow_uUzV0[data-aia-visible] {
|
|
657
663
|
pointer-events: auto;
|
|
664
|
+
opacity: 1;
|
|
658
665
|
transform: translateY(0);
|
|
659
666
|
}
|
|
660
667
|
|
|
668
|
+
/* Leaving: dissolve where it stands \u2014 no travel. Ease-out so most of the fade
|
|
669
|
+
happens at once and the last of it lingers; the shrink keeps it from reading
|
|
670
|
+
as a flat cut. The controller holds this attribute for SCROLL_ARROW_LEAVE_MS
|
|
671
|
+
(scrollArrow.ts) \u2014 keep the two durations equal. */
|
|
672
|
+
.AIAutocompleteDropdown-module_scrollArrow_uUzV0[data-aia-leaving] {
|
|
673
|
+
pointer-events: none;
|
|
674
|
+
opacity: 0;
|
|
675
|
+
transform: translateY(0) scale(0.86);
|
|
676
|
+
transition:
|
|
677
|
+
opacity 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
|
|
678
|
+
transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
679
|
+
}
|
|
680
|
+
|
|
661
681
|
.AIAutocompleteDropdown-module_scrollArrow_uUzV0:hover {
|
|
662
682
|
color: var(
|
|
663
683
|
--aia-scroll-arrow-color-hover,
|
|
@@ -667,6 +687,7 @@
|
|
|
667
687
|
|
|
668
688
|
@media (prefers-reduced-motion: reduce) {
|
|
669
689
|
.AIAutocompleteDropdown-module_scrollArrow_uUzV0,
|
|
690
|
+
.AIAutocompleteDropdown-module_scrollArrow_uUzV0[data-aia-leaving],
|
|
670
691
|
.AIAutocompleteDropdown-module_dropdown_yz2KC {
|
|
671
692
|
transition-duration: 0s;
|
|
672
693
|
}
|
|
@@ -780,7 +801,7 @@
|
|
|
780
801
|
opacity: 0.25;
|
|
781
802
|
}
|
|
782
803
|
}
|
|
783
|
-
`,document.head.appendChild(e)}var be={dropdown:"AIAutocompleteDropdown-module_dropdown_yz2KC",visible:"AIAutocompleteDropdown-module_visible_QCoXj",scrollArrow:"AIAutocompleteDropdown-module_scrollArrow_uUzV0",pillBar:"AIAutocompleteDropdown-module_pillBar_pwTXe",pillScroll:"AIAutocompleteDropdown-module_pillScroll_Tpzus",skip:"AIAutocompleteDropdown-module_skip_7-olS",skeletonBars:"AIAutocompleteDropdown-module_skeletonBars_HVr9C",skeletonBar:"AIAutocompleteDropdown-module_skeletonBar_O3xIx",aiaSkeletonPulse:"AIAutocompleteDropdown-module_aiaSkeletonPulse_G8W7q"};var
|
|
804
|
+
`,document.head.appendChild(e)}var be={dropdown:"AIAutocompleteDropdown-module_dropdown_yz2KC",visible:"AIAutocompleteDropdown-module_visible_QCoXj",scrollArrow:"AIAutocompleteDropdown-module_scrollArrow_uUzV0",pillBar:"AIAutocompleteDropdown-module_pillBar_pwTXe",pillScroll:"AIAutocompleteDropdown-module_pillScroll_Tpzus",skip:"AIAutocompleteDropdown-module_skip_7-olS",skeletonBars:"AIAutocompleteDropdown-module_skeletonBars_HVr9C",skeletonBar:"AIAutocompleteDropdown-module_skeletonBar_O3xIx",aiaSkeletonPulse:"AIAutocompleteDropdown-module_aiaSkeletonPulse_G8W7q"};var B=require("@magicx-eng/ai-autocomplete-vanilla"),dt=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-f687bd03")){let e=document.createElement("style");e.id="ac-style-f687bd03",e.textContent=`/* --- Datepicker (replaces the options grid for date suggestions) ---
|
|
784
805
|
|
|
785
806
|
One of three hand-maintained copies (vanilla styles.css, this file, Angular's
|
|
786
807
|
date-grid.component.css). Only the class-naming layer differs \u2014 the
|
|
@@ -936,7 +957,7 @@
|
|
|
936
957
|
opacity: 0.8;
|
|
937
958
|
background: rgba(var(--aia-streak-rgb, 255, 255, 255), 0.06);
|
|
938
959
|
}
|
|
939
|
-
`,document.head.appendChild(e)}var
|
|
960
|
+
`,document.head.appendChild(e)}var E={datepicker:"DateGrid-module_datepicker_6RrTs",header:"DateGrid-module_header_z4LRk",month:"DateGrid-module_month_urB2T",nav:"DateGrid-module_nav_ap4AN",weekdays:"DateGrid-module_weekdays_3EA3q",grid:"DateGrid-module_grid_mQCgw",weekday:"DateGrid-module_weekday_3lF4B",cell:"DateGrid-module_cell_59k0y",number:"DateGrid-module_number_aoT01",day:"DateGrid-module_day_cB3u9",blank:"DateGrid-module_blank_ivgRC",past:"DateGrid-module_past_CEZsj",highlighted:"DateGrid-module_highlighted_YIdtK",today:"DateGrid-module_today_iI3ME",selected:"DateGrid-module_selected_28KDn",pressed:"DateGrid-module_pressed_bEyyN"};var z=require("react/jsx-runtime"),$t=["sunday","monday","tuesday","wednesday","thursday","friday","saturday"];function ct({options:e,activeIndex:a,listboxId:t,view:i,selectedIso:n,onSelect:o,onHighlight:r,onPreviousMonth:g,onNextMonth:b}){let w=(0,B.isoDate)(new Date);return(0,z.jsxs)("div",{className:E.datepicker,"data-aia-datepicker":"",children:[(0,z.jsxs)("div",{className:E.header,children:[(0,z.jsx)("button",{type:"button",tabIndex:-1,className:E.nav,"data-aia-date-prev":"","aria-label":"Previous month",onMouseDown:c=>c.preventDefault(),onClick:g,children:"\u2039"}),(0,z.jsx)("span",{className:E.month,"data-aia-date-month":"","aria-live":"polite",children:(0,B.monthLabel)(i)}),(0,z.jsx)("button",{type:"button",tabIndex:-1,className:E.nav,"data-aia-date-next":"","aria-label":"Next month",onMouseDown:c=>c.preventDefault(),onClick:b,children:"\u203A"})]}),(0,z.jsx)("div",{className:E.weekdays,"aria-hidden":"true",children:B.WEEKDAY_LABELS.map((c,x)=>(0,z.jsx)("span",{className:E.weekday,children:c},$t[x]))}),(0,z.jsx)("div",{className:E.grid,"data-aia-date-grid":"",children:e.map((c,x)=>(0,z.jsx)(jt,{option:c,id:`${t}-option-${x}`,index:x,isHighlighted:x===a&&c.is_tappable,isToday:(0,B.cellIso)(c)===w,isPast:(0,B.cellIso)(c)!=null&&(0,B.cellIso)(c)<w,isSelected:n!=null&&(0,B.cellIso)(c)===n,onSelect:o,onHighlight:r},(0,B.cellIso)(c)??`pad-${x}`))})]})}function jt({option:e,id:a,index:t,isHighlighted:i,isToday:n,isPast:o,isSelected:r,onSelect:g,onHighlight:b}){let[w,c]=(0,dt.useState)(!1),x=(0,B.cellDay)(e);if(x==null)return(0,z.jsx)("div",{id:a,role:"option","data-aia-option":"","data-aia-date-cell":"","aria-hidden":"true","aria-selected":!1,tabIndex:-1,className:`${E.cell} ${E.blank}`});let I=()=>{c(!0),g(e),setTimeout(()=>c(!1),170)},y=[E.cell,E.day,o?E.past:"",i?E.highlighted:"",n?E.today:"",r?E.selected:"",w?E.pressed:""].filter(Boolean).join(" ");return(0,z.jsx)("div",{id:a,role:"option","data-aia-option":"","data-aia-date-cell":"","aria-selected":i,"aria-label":e.text,tabIndex:0,className:y,onClick:I,onKeyDown:v=>{(v.key==="Enter"||v.key===" ")&&(v.preventDefault(),I())},onMouseEnter:()=>b(t),children:(0,z.jsx)("span",{className:E.number,children:x})})}var Se=require("@magicx-eng/ai-autocomplete-vanilla"),Fe=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 {
|
|
940
961
|
.aia-cluster {
|
|
941
962
|
display: flex;
|
|
942
963
|
flex-wrap: wrap;
|
|
@@ -978,7 +999,7 @@
|
|
|
978
999
|
justify-content: space-around;
|
|
979
1000
|
}
|
|
980
1001
|
}
|
|
981
|
-
`,document.head.appendChild(e)}var
|
|
1002
|
+
`,document.head.appendChild(e)}var Ze=require("react/jsx-runtime");function Re({gap:e,align:a="center",justify:t="start",noWrap:i=!1,inline:n=!1,className:o,children:r,...g}){let b=e?{"--aia-cluster-gap":e}:void 0,w={className:o?`aia-cluster ${o}`:"aia-cluster","data-align":a,"data-justify":t,"data-nowrap":i||void 0,"data-inline":n||void 0,style:b,...g};return n?(0,Ze.jsx)("span",{...w,children:r}):(0,Ze.jsx)("div",{...w,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
|
|
982
1003
|
dropdown's rounded edges. The top inset (--aia-footer-gap) adds breathing
|
|
983
1004
|
room above the hint/branding row so the footer doesn't butt against the last
|
|
984
1005
|
option row \u2014 additive to the dropdown's 8px section gap. */
|
|
@@ -1112,7 +1133,7 @@
|
|
|
1112
1133
|
justify-content: flex-end;
|
|
1113
1134
|
}
|
|
1114
1135
|
}
|
|
1115
|
-
`,document.head.appendChild(e)}var ve={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 oe=require("react/jsx-runtime");function
|
|
1136
|
+
`,document.head.appendChild(e)}var ve={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 oe=require("react/jsx-runtime");function pt({isOptionHighlighted:e=!1,isInputEmpty:a=!1}){let{key:t,hint:i}=(0,Se.getFooterHint)(e,a),[n,o]=(0,Fe.useState)(Se.ATTRIBUTION_URL);return(0,Fe.useEffect)(()=>{o((0,Se.buildAttributionUrl)())},[]),(0,oe.jsx)("footer",{className:ve.footer,"data-aia-footer":"",children:(0,oe.jsxs)(Re,{justify:"between",noWrap:!0,className:ve.row,children:[(0,oe.jsxs)(Re,{gap:"5px",className:ve.hintGroup,children:[(0,oe.jsx)("kbd",{className:ve.key,children:t}),(0,oe.jsx)("span",{className:ve.hint,children:i})]}),(0,oe.jsxs)("a",{className:ve.brandLink,href:n,target:"_blank",rel:"noopener noreferrer",children:[(0,oe.jsx)("span",{className:ve.brand,children:"AI"}),(0,oe.jsx)("span",{className:ve.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,
|
|
1116
1137
|
no outline. ~28px via 6px padding + 14px text + the 1px border (border-box).
|
|
1117
1138
|
The border is kept as a 1px transparent line so the box stays the same size
|
|
1118
1139
|
as it was when the outline was dashed. */
|
|
@@ -1169,7 +1190,7 @@
|
|
|
1169
1190
|
opacity: 0;
|
|
1170
1191
|
}
|
|
1171
1192
|
}
|
|
1172
|
-
`,document.head.appendChild(e)}var
|
|
1193
|
+
`,document.head.appendChild(e)}var _e={pill:"ParamPill-module_pill_6Ga7S",fadeIn:"ParamPill-module_fadeIn_Ux4eQ",rounded:"ParamPill-module_rounded_y7xA9",skeleton:"ParamPill-module_skeleton_57P0T",skeletonPulse:"ParamPill-module_skeletonPulse_xGcUy"};var mt=require("react/jsx-runtime"),Je={selected:1,first:.7,next:.4,last:.2};function ut({label:e,state:a,rounded:t,loading:i,onClick:n}){let o=[_e.pill,t?_e.rounded:"",i?_e.skeleton:""].filter(Boolean).join(" ");return(0,mt.jsx)("button",{type:"button","data-aia-pill":"","data-aia-loading":i?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:o,style:{opacity:Je[a]},onMouseDown:r=>r.preventDefault(),onClick:i?void 0:n,disabled:i,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 {
|
|
1173
1194
|
position: relative;
|
|
1174
1195
|
z-index: 1;
|
|
1175
1196
|
pointer-events: auto;
|
|
@@ -1179,7 +1200,7 @@
|
|
|
1179
1200
|
align-items: center;
|
|
1180
1201
|
vertical-align: middle;
|
|
1181
1202
|
}
|
|
1182
|
-
`,document.head.appendChild(e)}var
|
|
1203
|
+
`,document.head.appendChild(e)}var et={list:"PillList-module_list_qvLqO"};var Le=require("react/jsx-runtime"),Vt=[125,69];function ht(e){return e===0?"first":e===1?"next":"last"}function Ge({pills:e,activePillIndex:a,onSelectPill:t,activeSelected:i,rounded:n,loading:o}){return o&&e.length===0?(0,Le.jsx)("span",{className:et.list,"data-aia-pill-list-loading":"",children:Vt.map((r,g)=>(0,Le.jsx)("span",{"data-aia-pill-skeleton":"",className:`${_e.pill} ${n?_e.rounded:""} ${_e.skeleton}`,style:{width:r,opacity:Je[ht(g)]}},`skel-${r}`))}):(0,Le.jsx)("span",{className:et.list,"data-aia-pill-list-loading":o?"":void 0,children:e.map((r,g)=>{let b=!!i&&g===a;return(0,Le.jsx)(ut,{label:r.text,state:b?"selected":ht(g),selected:b,rounded:n,loading:o,onClick:()=>t(g)},`${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
|
|
1183
1204
|
(packages/vanilla/src/styles.css). Same tokens, same defaults, so a consumer
|
|
1184
1205
|
theming one package sees the same result in the other.
|
|
1185
1206
|
|
|
@@ -1346,7 +1367,7 @@
|
|
|
1346
1367
|
var(--aia-option-color-selected, var(--aia-color-text-default, #fff))
|
|
1347
1368
|
);
|
|
1348
1369
|
}
|
|
1349
|
-
`,document.head.appendChild(e)}var
|
|
1370
|
+
`,document.head.appendChild(e)}var Y={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 H=require("react/jsx-runtime");function ft({products:e,listboxId:a,onSelect:t,onFocusChange:i,focusable:n=!0}){if(e.length===0)return null;let o=`${a}-products-label`;return(0,H.jsxs)("section",{className:Y.section,"data-aia-products":"",role:"group","aria-labelledby":o,children:[(0,H.jsx)("div",{className:Y.label,id:o,children:"Products"}),(0,H.jsx)("div",{className:Y.row,"data-aia-products-row":"",children:e.map((r,g)=>(0,H.jsx)(Yt,{product:r,id:`${a}-product-${g}`,onSelect:t,onFocusChange:i,focusable:n},r.id))})]})}function Yt({product:e,id:a,onSelect:t,onFocusChange:i,focusable:n}){let o=r=>{r.metaKey||r.ctrlKey||r.shiftKey||r.altKey||r.button!==0||(r.preventDefault(),t(e))};return(0,H.jsxs)("a",{id:a,className:Y.card,"data-aia-product":"",role:"option","aria-selected":!1,href:e.url,tabIndex:n?0:-1,onClick:o,onKeyDown:r=>{r.key!=="Enter"&&r.key!==" "||(r.preventDefault(),t(e))},onFocus:()=>i?.(!0),onBlur:r=>{r.relatedTarget?.closest("[data-aia-dropdown]")||i?.(!1)},children:[(0,H.jsx)("span",{className:Y.media,"data-aia-product-placeholder":e.imageUrl?void 0:"",children:e.imageUrl?(0,H.jsx)("img",{className:Y.image,src:e.imageUrl,alt:"",loading:"lazy",decoding:"async"}):null}),(0,H.jsxs)("span",{className:Y.body,children:[e.vendor?(0,H.jsx)("span",{className:Y.vendor,children:e.vendor}):null,(0,H.jsx)("span",{className:Y.title,children:e.title}),e.price?(0,H.jsx)("span",{className:Y.price,children:e.price}):null]})]})}var K=require("@magicx-eng/ai-autocomplete-vanilla"),we=require("react");var gt=require("@magicx-eng/ai-autocomplete-vanilla"),He=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 {
|
|
1350
1371
|
.aia-grid {
|
|
1351
1372
|
display: grid;
|
|
1352
1373
|
grid-template-columns: repeat(
|
|
@@ -1381,7 +1402,7 @@
|
|
|
1381
1402
|
border-radius: 3px;
|
|
1382
1403
|
}
|
|
1383
1404
|
}
|
|
1384
|
-
`,document.head.appendChild(e)}var
|
|
1405
|
+
`,document.head.appendChild(e)}var vt=require("react/jsx-runtime");function bt({min:e="16rem",max:a,gap:t,scroll:i=!1,maxHeight:n,scrollResetKey:o,cols:r,template:g,innerRef:b,className:w,children:c,...x}){let I=(0,He.useRef)(null);(0,He.useLayoutEffect)(()=>{if(o===void 0)return;let v=I.current;v&&(v.scrollTop=0)},[o]);let y={"--aia-grid-min":e};return a&&(y["--aia-grid-max"]=a),t&&(y["--aia-grid-gap"]=t),n&&(y["--aia-grid-max-height"]=n),r&&(y.gridTemplateColumns=(0,gt.optionsGridTemplateColumns)(r)),g&&(y.gridTemplateColumns=g),(0,vt.jsx)("div",{ref:v=>{I.current=v,b?.(v)},className:w?`aia-grid ${w}`:"aia-grid","data-scroll":i||void 0,style:y,...x,children:c})}var wt=require("@magicx-eng/ai-autocomplete-vanilla"),Ie=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 {
|
|
1385
1406
|
position: relative;
|
|
1386
1407
|
overflow: visible;
|
|
1387
1408
|
display: flex;
|
|
@@ -1461,12 +1482,12 @@
|
|
|
1461
1482
|
option steps back in opacity \u2014 no fill, no glow, the hierarchy carries it. */
|
|
1462
1483
|
.SuggestionItem-module_pressed_98o-r {
|
|
1463
1484
|
color: var(--aia-option-color-selected, var(--aia-color-text-default, #fff));
|
|
1464
|
-
animation: SuggestionItem-module_pressCompress_ICV3q
|
|
1485
|
+
animation: SuggestionItem-module_pressCompress_ICV3q 170ms ease forwards;
|
|
1465
1486
|
}
|
|
1466
1487
|
|
|
1467
1488
|
[role="listbox"]:has(.SuggestionItem-module_pressed_98o-r) .SuggestionItem-module_item_d4vpD:not(.SuggestionItem-module_pressed_98o-r) {
|
|
1468
1489
|
opacity: 0.35;
|
|
1469
|
-
transition: opacity
|
|
1490
|
+
transition: opacity 60ms ease;
|
|
1470
1491
|
}
|
|
1471
1492
|
|
|
1472
1493
|
@keyframes SuggestionItem-module_pressCompress_ICV3q {
|
|
@@ -1528,7 +1549,7 @@
|
|
|
1528
1549
|
filter: brightness(0.55);
|
|
1529
1550
|
}
|
|
1530
1551
|
}
|
|
1531
|
-
`,document.head.appendChild(e)}var
|
|
1552
|
+
`,document.head.appendChild(e)}var ae={item:"SuggestionItem-module_item_d4vpD",fadeIn:"SuggestionItem-module_fadeIn_I8u35",riseIn:"SuggestionItem-module_riseIn_etXZT",content:"SuggestionItem-module_content_T-Qba",tappable:"SuggestionItem-module_tappable_70KcX",nonTappable:"SuggestionItem-module_nonTappable_xSZM-",highlighted:"SuggestionItem-module_highlighted_Hb0SU",tag:"SuggestionItem-module_tag_e3Fwe",pressed:"SuggestionItem-module_pressed_98o-r",pressCompress:"SuggestionItem-module_pressCompress_ICV3q",scrollHint:"SuggestionItem-module_scrollHint_xKXPt",skeletonPulse:"SuggestionItem-module_skeletonPulse_plvdD",text:"SuggestionItem-module_text_yqoh9"};var Ce=require("react/jsx-runtime");function xt({option:e,isHighlighted:a,onSelect:t,onHighlight:i,id:n,loading:o,scrollHint:r,enterDelayMs:g=0}){let[b]=(0,Ie.useState)(g),[w,c]=(0,Ie.useState)(!1),x=(0,Ie.useRef)(void 0);(0,Ie.useEffect)(()=>()=>clearTimeout(x.current),[]);let I=()=>{o||!e.is_tappable||w||(c(!0),t(e),clearTimeout(x.current),x.current=setTimeout(()=>c(!1),170))},y=[ae.item,a&&!o?ae.highlighted:"",e.is_tappable?ae.tappable:ae.nonTappable,w?ae.pressed:"",r?ae.scrollHint:""].filter(Boolean).join(" ");return(0,Ce.jsx)("div",{id:n,role:"option","data-aia-option":"","data-aia-loading":o?"":void 0,"aria-selected":a,className:y,style:{[wt.OPTION_ENTER_DELAY_VAR]:`${b}ms`},tabIndex:o||!e.is_tappable?-1:0,onClick:I,onKeyDown:v=>{!o&&e.is_tappable&&(v.key==="Enter"||v.key===" ")&&(v.preventDefault(),I())},onMouseEnter:!o&&e.is_tappable?i:void 0,children:(0,Ce.jsxs)("span",{className:ae.content,children:[(0,Ce.jsx)("span",{className:ae.text,children:e.icon?`${e.icon} ${e.text}`:e.text}),e.tag&&(0,Ce.jsx)("span",{className:ae.tag,children:e.tag})]})})}var tt=require("react/jsx-runtime");function Qt(){let[e,a]=(0,we.useState)(K.isOptionsGridMobileViewport);return(0,we.useEffect)(()=>{if(typeof window>"u"||!window.matchMedia)return;let t=window.matchMedia(K.OPTIONS_GRID_MOBILE_QUERY),i=()=>a(t.matches);return i(),t.addEventListener("change",i),()=>t.removeEventListener("change",i)},[]),e}function yt({options:e,activeIndex:a,onSelect:t,onHighlight:i,listboxId:n,loading:o,groupKey:r="",optionsPosition:g="below"}){let b=Qt(),w=(0,we.useRef)(null),[c,x]=(0,we.useState)(null);(0,we.useLayoutEffect)(()=>{let y=w.current,L=y&&!o&&(0,K.needsOptionsGridMeasurement)(e.length,b)?(0,K.measureOptionsGrid)(y):null;x(L?(0,K.planOptionsGrid)(e.length,b,L.rowWidths,L.gridWidth):null)},[e,b,o]);let I=c??(0,K.planOptionsGrid)(e.length,b,null,null);return(0,tt.jsx)(bt,{min:"250px",max:"1fr",gap:"0",scroll:!0,scrollResetKey:r,template:I.template,maxHeight:I.maxHeight,innerRef:y=>{w.current=y},"data-aia-group":r,children:e.map((y,v)=>(0,tt.jsx)(xt,{option:y,isHighlighted:v===a,onSelect:t,onHighlight:()=>i(v),id:`${n}-option-${v}`,loading:o,scrollHint:!o&&I.scrollHintIndices.includes(v),enterDelayMs:o?0:(0,K.optionEnterDelayMs)(v,I.cols,e.length,g)},`${r}\0${y.text}`))})}if(typeof document<"u"&&!document.getElementById("ac-style-8414cd5f")){let e=document.createElement("style");e.id="ac-style-8414cd5f",e.textContent=`@layer layout {
|
|
1532
1553
|
.aia-stack {
|
|
1533
1554
|
display: flex;
|
|
1534
1555
|
flex-direction: column;
|
|
@@ -1545,7 +1566,7 @@
|
|
|
1545
1566
|
}
|
|
1546
1567
|
/* data-align="stretch" is the flex default \u2014 no rule needed. */
|
|
1547
1568
|
}
|
|
1548
|
-
`,document.head.appendChild(e)}var
|
|
1569
|
+
`,document.head.appendChild(e)}var kt=require("react/jsx-runtime");function _t({space:e,align:a="stretch",className:t,children:i,...n}){let o=e?{"--aia-stack-space":e}:void 0;return(0,kt.jsx)("div",{className:t?`aia-stack ${t}`:"aia-stack","data-align":a,style:o,...n,children:i})}var O=require("react/jsx-runtime"),Xt=[159,119,164],Zt=()=>{},Pt=()=>{};function Jt(e){let a=()=>typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches,[t,i]=(0,Q.useState)(a);if((0,Q.useEffect)(()=>{if(e!=="auto"||typeof window>"u"||typeof window.matchMedia!="function")return;let n=window.matchMedia("(prefers-color-scheme: dark)"),o=()=>i(n.matches);return n.addEventListener("change",o),()=>n.removeEventListener("change",o)},[e]),e!==void 0)return e==="auto"?t?"dark":"light":e}function eo(e,a){let t=(0,Q.useRef)(null);(0,Q.useEffect)(()=>{let i=e.current,n=a.current;if(!i||!n)return;let o=i.querySelector(".aia-grid[data-scroll]");if(t.current&&t.current.grid!==o&&(t.current.controller.destroy(),t.current=null),o&&!t.current){t.current={grid:o,controller:(0,Ke.attachScrollArrow)({dropdown:i,grid:o,button:n})};return}t.current?.controller.update()}),(0,Q.useEffect)(()=>()=>{t.current?.controller.destroy(),t.current=null},[])}function We({suggestions:e,activeIndex:a,onSelect:t,onHighlight:i,isOpen:n,id:o,className:r,pills:g,onPillClick:b,showPills:w=!0,onSkip:c,showSkipButton:x=!0,skipDisabled:I=!1,activeSelected:y=!1,isLoading:v=!1,isInputEmpty:L=!1,products:M,onProductSelect:ie,onProductFocusChange:ne,formatType:U="options",dateView:A=null,selectedDateIso:re=null,onPreviousMonth:se,onNextMonth:p,optionsPosition:le="below",mode:de}){let N=Jt(de),Z=N!==void 0,ce=(0,Q.useRef)(null),J=(0,Q.useRef)(null);eo(ce,J);let pe=e[0]?.options??[],ue=!!(g&&g.length>0&&b),F=!!(M&&M.length>0),q=n&&(pe.length>0||w&&ue||v||F),ee={suggestions:e,activeIndex:a,pills:g,showPills:w,showSkipButton:x,skipDisabled:I,activeSelected:y,isLoading:v,isInputEmpty:L,products:M,formatType:U,dateView:A,selectedDateIso:re},$=(0,Q.useRef)(ee);q&&($.current=ee);let u=q?ee:$.current,V=u.suggestions[0],s=V?.options??[],m=u.activeIndex>=0&&!!s[u.activeIndex]?.is_tappable,f=!!(u.pills&&u.pills.length>0&&b),l=u.showPills&&f,_=u.showPills&&!f&&u.isLoading,D=l||_,G=f&&u.showSkipButton&&!u.isInputEmpty&&!!c,d=u.pills?.[0]?.text,me=u.formatType==="date"&&u.dateView!=null,Ae=s.length>0&&!me,xe=s.length>0&&me,ke=u.isLoading&&!Ae&&!xe,te=u.products??[];return(0,O.jsxs)("div",{ref:ce,id:o,role:"listbox","data-aia-dropdown":"","data-options-position":le,"data-mode":N,"data-aia-loading":u.isLoading?"":void 0,"data-aia-has-products":te.length>0?"":void 0,className:`${Z?"magicx-aia ":""}${be.dropdown} ${q?be.visible:""} ${r??""}`,onMouseDown:he=>he.preventDefault(),children:[(0,O.jsxs)(_t,{space:"8px",children:[(D||G)&&(0,O.jsxs)(Re,{noWrap:!0,className:be.pillBar,"data-aia-pillbar":"",children:[D&&(0,O.jsx)("span",{className:be.pillScroll,"data-aia-pill-scroll":"",children:(0,O.jsx)(Ge,{pills:u.pills??[],activePillIndex:0,activeSelected:u.activeSelected,onSelectPill:b??(()=>{}),rounded:!0,loading:u.isLoading})}),G&&(0,O.jsx)("button",{type:"button",tabIndex:-1,className:be.skip,"data-aia-skip":"",disabled:u.isLoading||u.skipDisabled,"aria-label":d?`Skip ${d}`:"Skip",onClick:c,children:"skip"})]}),Ae&&(0,O.jsx)(yt,{options:s,activeIndex:u.activeIndex,onSelect:t,onHighlight:i,listboxId:o,loading:u.isLoading,groupKey:V?`${V.type} ${V.text}`:"",optionsPosition:le}),xe&&u.dateView&&(0,O.jsx)(ct,{options:s,activeIndex:u.activeIndex,listboxId:o,view:u.dateView,selectedIso:u.selectedDateIso??null,onSelect:t,onHighlight:i,onPreviousMonth:se??Pt,onNextMonth:p??Pt}),ke&&(0,O.jsx)("div",{className:be.skeletonBars,"data-aia-skeleton-bars":"",children:Xt.map(he=>(0,O.jsx)("span",{className:be.skeletonBar,style:{width:he}},`bar-${he}`))}),(0,O.jsx)(ft,{products:te,listboxId:o,onSelect:ie??Zt,onFocusChange:ne,focusable:q}),(0,O.jsx)(pt,{isOptionHighlighted:m,isInputEmpty:u.isInputEmpty})]}),(0,O.jsx)("button",{ref:J,type:"button",tabIndex:-1,className:be.scrollArrow,"data-aia-scroll-arrow":"","aria-label":Ke.SCROLL_ARROW_LABEL,"aria-hidden":"true",children:(0,O.jsx)("svg",{viewBox:"0 0 16 16",width:"14",height:"14",fill:"none",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",focusable:"false",children:(0,O.jsx)("path",{d:"M4 6.5 8 10.5l4-4"})})})]})}var Ee=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 {
|
|
1549
1570
|
flex-shrink: 0;
|
|
1550
1571
|
width: 32px;
|
|
1551
1572
|
height: 32px;
|
|
@@ -1580,5 +1601,5 @@
|
|
|
1580
1601
|
);
|
|
1581
1602
|
cursor: default;
|
|
1582
1603
|
}
|
|
1583
|
-
`,document.head.appendChild(e)}var At={submitButton:"SubmitButton-module_submitButton_otz7H"};var $e=require("react/jsx-runtime");function St({disabled:e,onClick:i}){return(0,$e.jsx)("button",{type:"button","data-aia-submit":"",className:At.submitButton,disabled:e,onClick:t=>{t.stopPropagation(),i()},"aria-label":"Submit",children:(0,$e.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,$e.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var Ee=require("@magicx-eng/ai-autocomplete-vanilla"),P=require("react");var it=require("react");function Ct(e){let i=(0,it.useRef)(e);i.current=e;let t=(0,it.useRef)(null);t.current===null&&(t.current={fetch:(n,o)=>{let r=i.current;return r?r.fetch(n,o):Promise.reject(new Error("products config removed"))},transform:n=>i.current?.transform(n)??[],get limit(){return i.current?.limit}});let a=e!==void 0;return{config:a?t.current:void 0,enabled:a}}var Jt={text:"",completedParams:[],identifiedParams:[],skippedParams:[],pendingSpan:null,suggestions:[],products:[],activeDropdownIndex:-1,newParamId:null,isLoading:!0,isReady:!1,error:null,segments:[],actionableSuggestions:[],filteredOptions:[],activeFormatType:"options",dateView:null,placeholderText:"",isDropdownOpen:!1,isActivePillSelected:!1,filterBase:0,filterInProgress:!1,pillTapped:!1,skipNextFetch:!1,lastRawQuery:"",isFocused:!1,editingParam:null,editingIdentified:null,editingAnchor:null,editingTail:null,caretOffset:null,inSelectionAnimation:!1,dateViewMonth:null};function je({onSubmit:e,onResult:i,onError:t,optionOverrides:a,maskCompletedText:n,apiConfig:o,additionalContext:r,columns:g=2,dropdownTrigger:v,optionsPosition:x,closeDropdownOnBlur:m,showNonTappableOptions:w,showSkipButton:I,onFocus:y,onBlur:b,value:L,completedParams:N,onChange:ne,onParamsChange:re,products:q,onProductSelect:A,source:se,setCursor:le}){let p=(0,P.useRef)(null),[de,ce]=(0,P.useState)(null),O=(0,P.useRef)(e);O.current=e;let ee=(0,P.useRef)(i);ee.current=i;let pe=(0,P.useRef)(t);pe.current=t;let te=(0,P.useRef)(ne);te.current=ne;let ue=(0,P.useRef)(re);ue.current=re;let me=(0,P.useRef)(y);me.current=y;let G=(0,P.useRef)(b);G.current=b;let $=(0,P.useRef)(le);$.current=le;let ae=(0,P.useRef)(A);ae.current=A;let j=Ct(q);(0,P.useEffect)(()=>{if(typeof document>"u")return;let c=new Ee.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:o,additionalContext:r,optionOverrides:a,maskCompletedText:n,columns:g,dropdownTrigger:v,optionsPosition:x,closeDropdownOnBlur:m,showNonTappableOptions:w,source:se,value:L,completedParams:N,onSubmit:(...C)=>O.current?.(...C),onResult:(...C)=>ee.current?.(...C),onError:(...C)=>pe.current?.(...C),onChange:(...C)=>te.current?.(...C),onParamsChange:(...C)=>ue.current?.(...C),onFocus:()=>me.current?.(),onBlur:()=>G.current?.(),onProductSelect:C=>ae.current?.(C),setCursor:C=>$.current?.(C),products:j.config});p.current=c,ce(c.getState());let z=c.subscribe(C=>ce(C));return()=>{z(),c.destroy(),p.current===c&&(p.current=null)}},[]),(0,P.useEffect)(()=>{L!==void 0&&p.current?.setValue(L)},[L]),(0,P.useEffect)(()=>{N!==void 0&&p.current?.setCompletedParams(N)},[N]);let h=JSON.stringify(o??null),H;try{H=JSON.stringify(r??null)}catch{H="[unstringifiable]"}let l=(0,P.useRef)(a),u=(0,P.useRef)(0);if(a!==l.current){let c=l.current,z=a,C=Object.keys(c??{}),Se=Object.keys(z??{});(C.length!==Se.length||Se.some(Le=>!c?.[Le]||z[Le]!==c[Le]))&&u.current++,l.current=a}(0,P.useEffect)(()=>{p.current?.update({apiConfig:o,additionalContext:r,optionOverrides:a,dropdownTrigger:v,optionsPosition:x,closeDropdownOnBlur:m,showNonTappableOptions:w})},[h,H,u.current,v,x,m,w]);let f=(0,P.useRef)(!1);(0,P.useEffect)(()=>{if(!f.current){f.current=!0;return}p.current?.update({products:j.config})},[j.enabled]);let _=(0,P.useRef)(null);_.current===null&&(_.current={handleTextChange:c=>p.current?.handleTextChange(c),handleKeyDown:c=>{let z="nativeEvent"in c?c.nativeEvent:c;p.current?.handleKeyDown(z)},setFocused:c=>p.current?.setFocused(c),startEditingParam:c=>p.current?.startEditingParam(c),exitEditMode:()=>p.current?.exitEditMode(),handleCaretAfterInput:c=>p.current?.handleCaretAfterInput(c),handleCaretMove:c=>p.current?.handleCaretMove(c),replaceEditingRange:c=>p.current?.replaceEditingRange(c)??!1,setActivePill:c=>p.current?.setActivePill(c),skipActivePill:()=>p.current?.skipActivePill(),removeLastParam:()=>p.current?.removeLastParam(),clearNewParamId:()=>p.current?.clearNewParamId(),reset:()=>p.current?.reset(),selectOption:c=>p.current?.selectOption(c),selectProduct:c=>p.current?.selectProduct(c),setActiveDropdownIndex:c=>p.current?.setActiveDropdownIndex(c),showPreviousMonth:()=>p.current?.showPreviousMonth(),showNextMonth:()=>p.current?.showNextMonth(),handleFocus:()=>p.current?.setFocused(!0),handleBlur:()=>p.current?.setFocused(!1)});let s=_.current,E=(0,P.useCallback)(c=>{let z=c.target.value,Se=z.length>0&&!c.nativeEvent?.isComposing&&z[0]!==z[0].toUpperCase()?z[0].toUpperCase()+z.slice(1):z;p.current?.handleTextChange(Se)},[]),Q=(0,P.useCallback)(c=>{p.current?.handleKeyDown(c.nativeEvent)},[]),V=p.current,d=de??Jt,_e=L!==void 0?L:d.text,Ae=N!==void 0?N:d.completedParams,he=d.actionableSuggestions,ke=he[0],Y=V?.listboxId??"",Ye=d.activeDropdownIndex>=0&&V?`${Y}-option-${d.activeDropdownIndex}`:void 0,fe=d.editingParam,ge=d.editingIdentified,Re=fe?{type:fe.suggestionType,text:fe.suggestionPlaceholder,required:!0,options:fe.options}:ge?{type:ge.type,text:(0,Ee.identifiedParamLabel)(ge.type),required:!0,options:[]}:null,ze=Re??ke,Qe=Re?[Re]:he,Oe=!V||d.isLoading&&!d.editingParam&&!d.inSelectionAnimation;return{completedParams:Ae,skippedParams:d.skippedParams,identifiedParams:d.identifiedParams,suggestionPills:he,setActivePill:s.setActivePill,skipActivePill:s.skipActivePill,removeLastParam:s.removeLastParam,segments:d.segments,newParamId:d.newParamId,clearNewParamId:s.clearNewParamId,suggestions:d.suggestions,activeIndex:d.activeDropdownIndex,isReady:d.isReady,isLoading:Oe,isFocused:d.isFocused,isDropdownOpen:d.isDropdownOpen,isActivePillSelected:d.isActivePillSelected,placeholderText:d.placeholderText,listboxId:Y,error:d.error,products:d.products,selectProduct:s.selectProduct,handleTextChange:s.handleTextChange,handleKeyDown:s.handleKeyDown,setFocused:s.setFocused,editingParam:fe,editingIdentified:ge,editingAnchor:d.editingAnchor,caretOffset:d.caretOffset,startEditingParam:s.startEditingParam,exitEditMode:s.exitEditMode,handleCaretAfterInput:s.handleCaretAfterInput,handleCaretMove:s.handleCaretMove,replaceEditingRange:s.replaceEditingRange,inputProps:{value:_e,placeholder:d.placeholderText||void 0,onChange:E,onKeyDown:Q,onFocus:s.handleFocus,onBlur:s.handleBlur,role:"combobox","aria-expanded":d.isDropdownOpen,"aria-activedescendant":Ye,"aria-autocomplete":"list","aria-controls":Y},reset:s.reset,dropdownProps:{suggestions:ze?[{...ze,options:d.filteredOptions}]:[],activeIndex:d.activeDropdownIndex,onSelect:s.selectOption,onHighlight:s.setActiveDropdownIndex,isOpen:d.isDropdownOpen,id:Y,pills:Qe,activeSelected:d.isActivePillSelected,onPillClick:s.setActivePill,onSkip:s.skipActivePill,showSkipButton:(I??!0)&&!fe&&!ge,skipDisabled:d.inSelectionAnimation,isLoading:Oe,isInputEmpty:_e.trim().length===0,products:d.products,onProductSelect:s.selectProduct,onProductFocusChange:s.setFocused,formatType:d.activeFormatType,dateView:d.dateView,selectedDateIso:ge?ge.iso:(0,Ee.selectedIsoFromText)(fe?.text),onPreviousMonth:s.showPreviousMonth,onNextMonth:s.showNextMonth,optionsPosition:x??"below"}}}var U=require("@magicx-eng/ai-autocomplete-vanilla"),k=require("react"),Ve;function ea(){if(Ve!==void 0)return Ve;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Ve=e.contentEditable==="plaintext-only",Ve}function Dt(e){let{segments:i,newParamId:t,editingParam:a,editingIdentified:n,editingAnchor:o,caretOffset:r,placeholderText:g,isFocused:v,isDropdownOpen:x,listboxId:m,activeDescendantId:w,autoFocus:I,handleTextChange:y,handleKeyDown:b,handleCaretAfterInput:L,handleCaretMove:N,startEditingParam:ne,replaceEditingRange:re,setFocused:q}=e,A=(0,k.useRef)(null),se=(0,k.useRef)(!1),le=(0,k.useRef)(""),p=(0,k.useRef)(""),de=(0,k.useRef)(null),ce=(0,k.useRef)(0);de.current=r,(0,k.useEffect)(()=>{if(!I)return;let l=A.current;if(!l)return;document.activeElement===l?q(!0):l.focus();let u=l.ownerDocument??document,f=u.getSelection(),_=f&&f.rangeCount>0&&l.contains(f.anchorNode);if(f&&!_){let s=u.createRange();s.selectNodeContents(l),s.collapse(!0),f.removeAllRanges(),f.addRange(s)}},[I,q]),(0,k.useEffect)(()=>{let l=A.current;if(!l)return;let u=l.ownerDocument??document,f=()=>{let _=u.getSelection();if(!_||_.rangeCount===0||!_.anchorNode||!l.contains(_.anchorNode))return;let s=_.anchorNode,E=s.nodeType===Node.ELEMENT_NODE?s:s.parentElement,V=(_.isCollapsed?E?.closest("strong[data-param-id]"):null)?.dataset.paramId??null,d=a?.id??n?.id??null;if(V&&V!==d){ne(V);return}performance.now()-ce.current<50||N((0,U.getCursorOffset)(l))};return u.addEventListener("selectionchange",f),()=>u.removeEventListener("selectionchange",f)},[a,n,ne,N]),(0,k.useLayoutEffect)(()=>{let l=A.current;l&&(0,U.renderEditableContent)({input:l,segments:i,newParamId:t,editingParamId:a?.id??null,placeholderText:g??"",isFocused:v})},[i,t,a,g,v]),(0,k.useLayoutEffect)(()=>{let l=le.current,u=t??"";if(le.current=u,!u||u===l)return;let f=A.current;if(!f)return;f.focus();let _=de.current??(0,U.plainTextLength)(f);(0,U.setCursorOffset)(f,_)},[t]),(0,k.useLayoutEffect)(()=>{let l=p.current,u=a?.id??"";if(p.current=u,!u||u===l||o==null)return;let f=A.current;f&&(0,U.setCursorOffset)(f,o)},[a,o]);let O=(0,k.useCallback)(()=>{if(se.current)return;let l=A.current;if(!l)return;let u=(0,U.extractPlainText)(l),_=u.length>0&&u[0]!==u[0].toUpperCase()?u[0].toUpperCase()+u.slice(1):u;y(_)},[y]),ee=(0,k.useCallback)(()=>{ce.current=performance.now(),O();let l=A.current;l&&L((0,U.getCursorOffset)(l))},[O,L]);(0,k.useEffect)(()=>{let l=A.current;if(!l)return;let u=f=>{let _=f,s=_.inputType;if(s==="insertParagraph"||s==="insertLineBreak"||s==="insertFromDrop"){f.preventDefault();return}if(s.startsWith("insert")||s.startsWith("delete")){let E=s.startsWith("delete")?"":_.data??"";re(E)&&f.preventDefault()}};return l.addEventListener("beforeinput",u),()=>l.removeEventListener("beforeinput",u)},[re]);let pe=(0,k.useCallback)(()=>{se.current=!0},[]),te=(0,k.useCallback)(()=>{se.current=!1,O()},[O]),ue=(0,k.useCallback)(l=>{l.preventDefault();let u=A.current;if(!u)return;let f=(l.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!f)return;let _=u.ownerDocument??document,s=_.getSelection();if(!s||s.rangeCount===0)return;let E=s.getRangeAt(0);if(!u.contains(E.startContainer))return;E.deleteContents();let Q=_.createTextNode(f);E.insertNode(Q),E.setStartAfter(Q),E.collapse(!0),s.removeAllRanges(),s.addRange(E),O()},[O]),me=(0,k.useCallback)(l=>b(l),[b]),G=(0,k.useCallback)(()=>q(!0),[q]),$=(0,k.useCallback)(()=>q(!1),[q]),ae=(0,k.useCallback)(()=>A.current?.focus(),[]),j=(0,k.useCallback)(()=>A.current?.blur(),[]),h=(0,k.useCallback)(()=>{let l=A.current;return l?(0,U.extractPlainText)(l):""},[]),H=ea()?"plaintext-only":"true";return{inputRef:A,editorProps:{ref:A,contentEditable:H,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":m,"aria-expanded":x,"aria-activedescendant":w,spellCheck:!0,enterKeyHint:"send",onInput:ee,onKeyDown:me,onCompositionStart:pe,onCompositionEnd:te,onPaste:ue,onFocus:G,onBlur:$},getPlainText:h,focus:ae,blur:j}}var J=require("react/jsx-runtime");function ta(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var Et=(0,R.forwardRef)(function({onSubmit:i,onResult:t,onError:a,optionOverrides:n,maskCompletedText:o,className:r,apiConfig:g,additionalContext:v,columns:x,pillPlacement:m="dropdown",mode:w="auto",optionsPosition:I="below",animations:y=!0,dropdownTrigger:b,closeDropdownOnBlur:L,showNonTappableOptions:N,showSkipButton:ne,autoFocus:re=!0,onFocus:q,onBlur:A,value:se,completedParams:le,onChange:p,onParamsChange:de,products:ce,onProductSelect:O,submitButton:ee},pe){let te=(0,R.useRef)(null),ue=(0,R.useRef)(null),me=(0,R.useRef)(()=>{}),G=(0,R.useRef)(null),$=(0,R.useRef)(null);(0,R.useEffect)(()=>{let S=te.current;if(S)return G.current?G.current.setMode(w):G.current=new Te.ModeController(S,w),()=>{G.current?.destroy(),G.current=null}},[w]);let ae=(0,R.useCallback)(S=>{let xe=$.current?.current;xe&&(xe.focus(),(0,Te.setCursorOffset)(xe,S))},[]),{completedParams:j,skippedParams:h,identifiedParams:H,isReady:l,suggestionPills:u,setActivePill:f,skipActivePill:_,segments:s,newParamId:E,clearNewParamId:Q,placeholderText:V,isFocused:d,isDropdownOpen:_e,isActivePillSelected:Ae,isLoading:he,activeIndex:ke,listboxId:Y,handleTextChange:Ye,handleKeyDown:fe,setFocused:ge,editingParam:Re,editingIdentified:ze,editingAnchor:Qe,caretOffset:Oe,startEditingParam:c,handleCaretAfterInput:z,handleCaretMove:C,replaceEditingRange:Se,dropdownProps:Le,reset:Be}=je({onSubmit:S=>me.current(S),onResult:t,onError:a,optionOverrides:n,maskCompletedText:o,apiConfig:g,additionalContext:v,columns:x,dropdownTrigger:b,optionsPosition:I,closeDropdownOnBlur:L,showNonTappableOptions:N,showSkipButton:ne,onFocus:q,onBlur:A,value:se,completedParams:le,onChange:p,onParamsChange:de,products:ce,onProductSelect:O,source:"full-sdk",setCursor:ae});(0,R.useEffect)(()=>{if(!E)return;let S=window.setTimeout(()=>Q(),650);return()=>window.clearTimeout(S)},[E,Q]);let Tt=ke>=0?`${Y}-option-${ke}`:void 0,{inputRef:Xe,editorProps:Rt,focus:Fe,blur:nt,getPlainText:rt}=Dt({segments:s,newParamId:E,editingParam:Re,editingIdentified:ze,editingAnchor:Qe,caretOffset:Oe,placeholderText:V,isFocused:d,isDropdownOpen:_e,listboxId:Y,activeDescendantId:Tt,autoFocus:re,handleTextChange:Ye,handleKeyDown:fe,handleCaretAfterInput:z,handleCaretMove:C,startEditingParam:c,replaceEditingRange:Se,setFocused:ge});$.current=Xe,(0,R.useLayoutEffect)(()=>{let S=ue.current,xe=Xe.current;if(!S||!xe)return;let st=()=>{let dt=S.firstElementChild;if(!dt)return;let zt=dt.getBoundingClientRect(),Ot=xe.getBoundingClientRect();zt.top>=Ot.bottom-2?S.setAttribute("data-aia-pill-wrapped",""):S.removeAttribute("data-aia-pill-wrapped")};st();let lt=new ResizeObserver(st);return lt.observe(xe),()=>lt.disconnect()},[s,u.length,he,Xe]),(0,R.useImperativeHandle)(pe,()=>({focus:Fe,blur:nt,reset:Be,setMode:S=>G.current?.setMode(S),skipActivePill:_}),[Fe,nt,Be,_]);let Ge=!!s.length||j.length>0,Ze=(0,R.useCallback)(()=>{if(!Ge)return;let S=rt();i((0,Te.buildSubmitResult)(S,j,h,{identifiedParams:H,isReady:l})),Be()},[Ge,j,h,H,l,i,Be,rt]);me.current=Ze;let Lt=(0,R.useCallback)(S=>{S.target?.closest("[data-aia-pill]")||Fe()},[Fe]),Mt=m==="inline",Nt=m==="dropdown";return(0,J.jsxs)("div",{ref:te,className:`magicx-aia ${Pe.container} ${r??""}`,"data-pill-placement":m,"data-options-position":I,"data-animations":y?"on":"off","data-mode":ta(w),children:[(0,J.jsx)(qe,{...Le,showPills:Nt}),(0,J.jsxs)("div",{className:Pe.inputWrapper,onClick:Lt,children:[(0,J.jsxs)("div",{className:Pe.editorArea,"data-aia-editor":"",children:[(0,J.jsx)("div",{...Rt,className:Pe.input,"data-aia-input":""}),Mt&&(he||u.length>0)&&(0,J.jsx)("span",{ref:ue,className:Pe.pillListContainer,"data-aia-pill-list-container":"",children:(0,J.jsx)(Ke,{pills:u,activePillIndex:0,activeSelected:Ae,onSelectPill:f,loading:he})})]}),ee===null?null:ee===void 0?(0,J.jsx)(St,{disabled:!Ge,onClick:Ze}):(0,J.jsx)("span",{"data-aia-submit":"",className:Pe.submitSlot,onClick:S=>{Ge&&(S.stopPropagation(),Ze())},children:ee})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,WEEKDAY_LABELS,buildSubmitResult,cellDay,cellIso,formatDate,isoDate,monthLabel,parseDate,parseLooseDate,useAIAutocomplete,withSkippedParams});
|
|
1604
|
+
`,document.head.appendChild(e)}var It={submitButton:"SubmitButton-module_submitButton_otz7H"};var Ue=require("react/jsx-runtime");function At({disabled:e,onClick:a}){return(0,Ue.jsx)("button",{type:"button","data-aia-submit":"",className:It.submitButton,disabled:e,onClick:t=>{t.stopPropagation(),a()},"aria-label":"Submit",children:(0,Ue.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,Ue.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var De=require("@magicx-eng/ai-autocomplete-vanilla"),P=require("react");var ot=require("react");function St(e){let a=(0,ot.useRef)(e);a.current=e;let t=Object.keys(e??{}).sort().join("\0"),i=(0,ot.useRef)({key:"",overrides:void 0});if(i.current.key!==t){let n={};for(let o of Object.keys(e??{})){let r=(g,b,w)=>{let c=a.current?.[o];return c?c(g,b,w):[]};n[o]=r}i.current={key:t,overrides:e?n:void 0}}return{overrides:i.current.overrides,key:t}}var at=require("react");function Ct(e){let a=(0,at.useRef)(e);a.current=e;let t=(0,at.useRef)(null);t.current===null&&(t.current={fetch:(n,o)=>{let r=a.current;return r?r.fetch(n,o):Promise.reject(new Error("products config removed"))},transform:n=>a.current?.transform(n)??[],get limit(){return a.current?.limit}});let i=e!==void 0;return{config:i?t.current:void 0,enabled:i}}var to={text:"",completedParams:[],identifiedParams:[],skippedParams:[],pendingSpan:null,suggestions:[],products:[],optionSearch:null,activeDropdownIndex:-1,newParamId:null,isLoading:!0,isReady:!1,error:null,segments:[],actionableSuggestions:[],filteredOptions:[],activeFormatType:"options",dateView:null,placeholderText:"",optionQuery:"",isSearchingOptions:!1,isDropdownOpen:!1,isActivePillSelected:!1,filterBase:0,filterInProgress:!1,pillTapped:!1,skipNextFetch:!1,lastRawQuery:"",isFocused:!1,editingParam:null,editingIdentified:null,editingAnchor:null,editingTail:null,caretOffset:null,inSelectionAnimation:!1,dateViewMonth:null};function qe({onSubmit:e,onResult:a,onError:t,optionOverrides:i,maskCompletedText:n,apiConfig:o,additionalContext:r,columns:g=2,dropdownTrigger:b,optionsPosition:w,closeDropdownOnBlur:c,showNonTappableOptions:x,showSkipButton:I,onFocus:y,onBlur:v,value:L,completedParams:M,onChange:ie,onParamsChange:ne,products:U,onProductSelect:A,source:re,setCursor:se}){let p=(0,P.useRef)(null),[le,de]=(0,P.useState)(null),N=(0,P.useRef)(e);N.current=e;let Z=(0,P.useRef)(a);Z.current=a;let ce=(0,P.useRef)(t);ce.current=t;let J=(0,P.useRef)(ie);J.current=ie;let pe=(0,P.useRef)(ne);pe.current=ne;let ue=(0,P.useRef)(y);ue.current=y;let F=(0,P.useRef)(v);F.current=v;let q=(0,P.useRef)(se);q.current=se;let ee=(0,P.useRef)(A);ee.current=A;let $=Ct(U),u=St(i);(0,P.useEffect)(()=>{if(typeof document>"u")return;let h=new De.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:o,additionalContext:r,optionOverrides:u.overrides,maskCompletedText:n,columns:g,dropdownTrigger:b,optionsPosition:w,closeDropdownOnBlur:c,showNonTappableOptions:x,source:re,value:L,completedParams:M,onSubmit:(...R)=>N.current?.(...R),onResult:(...R)=>Z.current?.(...R),onError:(...R)=>ce.current?.(...R),onChange:(...R)=>J.current?.(...R),onParamsChange:(...R)=>pe.current?.(...R),onFocus:()=>ue.current?.(),onBlur:()=>F.current?.(),onProductSelect:R=>ee.current?.(R),setCursor:R=>q.current?.(R),products:$.config});p.current=h,de(h.getState());let j=h.subscribe(R=>de(R));return()=>{j(),h.destroy(),p.current===h&&(p.current=null)}},[]),(0,P.useEffect)(()=>{L!==void 0&&p.current?.setValue(L)},[L]),(0,P.useEffect)(()=>{M!==void 0&&p.current?.setCompletedParams(M)},[M]);let V=JSON.stringify(o??null),s;try{s=JSON.stringify(r??null)}catch{s="[unstringifiable]"}(0,P.useEffect)(()=>{p.current?.update({apiConfig:o,additionalContext:r,optionOverrides:u.overrides,dropdownTrigger:b,optionsPosition:w,closeDropdownOnBlur:c,showNonTappableOptions:x})},[V,s,u.key,b,w,c,x]);let m=(0,P.useRef)(!1);(0,P.useEffect)(()=>{if(!m.current){m.current=!0;return}p.current?.update({products:$.config})},[$.enabled]);let f=(0,P.useRef)(null);f.current===null&&(f.current={handleTextChange:h=>p.current?.handleTextChange(h),handleKeyDown:h=>{let j="nativeEvent"in h?h.nativeEvent:h;p.current?.handleKeyDown(j)},setFocused:h=>p.current?.setFocused(h),startEditingParam:h=>p.current?.startEditingParam(h),exitEditMode:()=>p.current?.exitEditMode(),handleCaretAfterInput:h=>p.current?.handleCaretAfterInput(h),handleCaretMove:h=>p.current?.handleCaretMove(h),replaceEditingRange:h=>p.current?.replaceEditingRange(h)??!1,setActivePill:h=>p.current?.setActivePill(h),skipActivePill:()=>p.current?.skipActivePill(),removeLastParam:()=>p.current?.removeLastParam(),clearNewParamId:()=>p.current?.clearNewParamId(),reset:()=>p.current?.reset(),selectOption:h=>p.current?.selectOption(h),selectProduct:h=>p.current?.selectProduct(h),setActiveDropdownIndex:h=>p.current?.setActiveDropdownIndex(h),showPreviousMonth:()=>p.current?.showPreviousMonth(),showNextMonth:()=>p.current?.showNextMonth(),handleFocus:()=>p.current?.setFocused(!0),handleBlur:()=>p.current?.setFocused(!1)});let l=f.current,_=(0,P.useCallback)(h=>{let j=h.target.value,Ve=j.length>0&&!h.nativeEvent?.isComposing&&j[0]!==j[0].toUpperCase()?j[0].toUpperCase()+j.slice(1):j;p.current?.handleTextChange(Ve)},[]),D=(0,P.useCallback)(h=>{p.current?.handleKeyDown(h.nativeEvent)},[]),G=p.current,d=le??to,me=L!==void 0?L:d.text,Ae=M!==void 0?M:d.completedParams,xe=d.actionableSuggestions,ke=xe[0],te=G?.listboxId??"",he=d.activeDropdownIndex>=0&&G?`${te}-option-${d.activeDropdownIndex}`:void 0,fe=d.editingParam,ge=d.editingIdentified,Te=fe?{type:fe.suggestionType,text:fe.suggestionPlaceholder,required:!0,options:fe.options}:ge?{type:ge.type,text:(0,De.identifiedParamLabel)(ge.type),required:!0,options:[]}:null,Oe=Te??ke,je=Te?[Te]:xe,Me=!G||d.isLoading&&!d.editingParam&&!d.inSelectionAnimation||d.isSearchingOptions;return{completedParams:Ae,skippedParams:d.skippedParams,identifiedParams:d.identifiedParams,suggestionPills:xe,setActivePill:l.setActivePill,skipActivePill:l.skipActivePill,removeLastParam:l.removeLastParam,segments:d.segments,newParamId:d.newParamId,clearNewParamId:l.clearNewParamId,suggestions:d.suggestions,activeIndex:d.activeDropdownIndex,isReady:d.isReady,isLoading:Me,isFocused:d.isFocused,isDropdownOpen:d.isDropdownOpen,isActivePillSelected:d.isActivePillSelected,placeholderText:d.placeholderText,listboxId:te,error:d.error,products:d.products,selectProduct:l.selectProduct,handleTextChange:l.handleTextChange,handleKeyDown:l.handleKeyDown,setFocused:l.setFocused,editingParam:fe,editingIdentified:ge,editingAnchor:d.editingAnchor,caretOffset:d.caretOffset,startEditingParam:l.startEditingParam,exitEditMode:l.exitEditMode,handleCaretAfterInput:l.handleCaretAfterInput,handleCaretMove:l.handleCaretMove,replaceEditingRange:l.replaceEditingRange,inputProps:{value:me,placeholder:d.placeholderText||void 0,onChange:_,onKeyDown:D,onFocus:l.handleFocus,onBlur:l.handleBlur,role:"combobox","aria-expanded":d.isDropdownOpen,"aria-activedescendant":he,"aria-autocomplete":"list","aria-controls":te},reset:l.reset,dropdownProps:{suggestions:Oe?[{...Oe,options:d.filteredOptions}]:[],activeIndex:d.activeDropdownIndex,onSelect:l.selectOption,onHighlight:l.setActiveDropdownIndex,isOpen:d.isDropdownOpen,id:te,pills:je,activeSelected:d.isActivePillSelected,onPillClick:l.setActivePill,onSkip:l.skipActivePill,showSkipButton:(I??!0)&&!fe&&!ge,skipDisabled:d.inSelectionAnimation,isLoading:Me,isInputEmpty:me.trim().length===0,products:d.products,onProductSelect:l.selectProduct,onProductFocusChange:l.setFocused,formatType:d.activeFormatType,dateView:d.dateView,selectedDateIso:ge?ge.iso:(0,De.selectedIsoFromText)(fe?.text),onPreviousMonth:l.showPreviousMonth,onNextMonth:l.showNextMonth,optionsPosition:w??"below"}}}var W=require("@magicx-eng/ai-autocomplete-vanilla"),k=require("react"),$e;function oo(){if($e!==void 0)return $e;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),$e=e.contentEditable==="plaintext-only",$e}function Dt(e){let{segments:a,newParamId:t,editingParam:i,editingIdentified:n,editingAnchor:o,caretOffset:r,placeholderText:g,isFocused:b,isDropdownOpen:w,listboxId:c,activeDescendantId:x,autoFocus:I,handleTextChange:y,handleKeyDown:v,handleCaretAfterInput:L,handleCaretMove:M,startEditingParam:ie,replaceEditingRange:ne,setFocused:U}=e,A=(0,k.useRef)(null),re=(0,k.useRef)(!1),se=(0,k.useRef)(""),p=(0,k.useRef)(""),le=(0,k.useRef)(null),de=(0,k.useRef)(0);le.current=r,(0,k.useEffect)(()=>{if(!I)return;let s=A.current;if(!s)return;document.activeElement===s?U(!0):s.focus();let m=s.ownerDocument??document,f=m.getSelection(),l=f&&f.rangeCount>0&&s.contains(f.anchorNode);if(f&&!l){let _=m.createRange();_.selectNodeContents(s),_.collapse(!0),f.removeAllRanges(),f.addRange(_)}},[I,U]),(0,k.useEffect)(()=>{let s=A.current;if(!s)return;let m=s.ownerDocument??document,f=()=>{let l=m.getSelection();if(!l||l.rangeCount===0||!l.anchorNode||!s.contains(l.anchorNode))return;let _=l.anchorNode,D=_.nodeType===Node.ELEMENT_NODE?_:_.parentElement,d=(l.isCollapsed?D?.closest("strong[data-param-id]"):null)?.dataset.paramId??null,me=i?.id??n?.id??null;if(d&&d!==me){ie(d);return}performance.now()-de.current<50||M((0,W.getCursorOffset)(s))};return m.addEventListener("selectionchange",f),()=>m.removeEventListener("selectionchange",f)},[i,n,ie,M]),(0,k.useLayoutEffect)(()=>{let s=A.current;s&&(0,W.renderEditableContent)({input:s,segments:a,newParamId:t,editingParamId:i?.id??null,placeholderText:g??"",isFocused:b})},[a,t,i,g,b]),(0,k.useLayoutEffect)(()=>{let s=se.current,m=t??"";if(se.current=m,!m||m===s)return;let f=A.current;if(!f)return;f.focus();let l=le.current??(0,W.plainTextLength)(f);(0,W.setCursorOffset)(f,l)},[t]),(0,k.useLayoutEffect)(()=>{let s=p.current,m=i?.id??"";if(p.current=m,!m||m===s||o==null)return;let f=A.current;f&&(0,W.setCursorOffset)(f,o)},[i,o]);let N=(0,k.useCallback)(()=>{if(re.current)return;let s=A.current;if(!s)return;let m=(0,W.extractPlainText)(s),l=m.length>0&&m[0]!==m[0].toUpperCase()?m[0].toUpperCase()+m.slice(1):m;y(l)},[y]),Z=(0,k.useCallback)(()=>{de.current=performance.now(),N();let s=A.current;s&&L((0,W.getCursorOffset)(s))},[N,L]);(0,k.useEffect)(()=>{let s=A.current;if(!s)return;let m=f=>{let l=f,_=l.inputType;if(_==="insertParagraph"||_==="insertLineBreak"||_==="insertFromDrop"){f.preventDefault();return}if(_.startsWith("insert")||_.startsWith("delete")){let D=_.startsWith("delete")?"":l.data??"";ne(D)&&f.preventDefault()}};return s.addEventListener("beforeinput",m),()=>s.removeEventListener("beforeinput",m)},[ne]);let ce=(0,k.useCallback)(()=>{re.current=!0},[]),J=(0,k.useCallback)(()=>{re.current=!1,N()},[N]),pe=(0,k.useCallback)(s=>{s.preventDefault();let m=A.current;if(!m)return;let f=(s.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!f)return;let l=m.ownerDocument??document,_=l.getSelection();if(!_||_.rangeCount===0)return;let D=_.getRangeAt(0);if(!m.contains(D.startContainer))return;D.deleteContents();let G=l.createTextNode(f);D.insertNode(G),D.setStartAfter(G),D.collapse(!0),_.removeAllRanges(),_.addRange(D),N()},[N]),ue=(0,k.useCallback)(s=>v(s),[v]),F=(0,k.useCallback)(()=>U(!0),[U]),q=(0,k.useCallback)(()=>U(!1),[U]),ee=(0,k.useCallback)(()=>A.current?.focus(),[]),$=(0,k.useCallback)(()=>A.current?.blur(),[]),u=(0,k.useCallback)(()=>{let s=A.current;return s?(0,W.extractPlainText)(s):""},[]),V=oo()?"plaintext-only":"true";return{inputRef:A,editorProps:{ref:A,contentEditable:V,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":c,"aria-expanded":w,"aria-activedescendant":x,spellCheck:!0,enterKeyHint:"send",onInput:Z,onKeyDown:ue,onCompositionStart:ce,onCompositionEnd:J,onPaste:pe,onFocus:F,onBlur:q},getPlainText:u,focus:ee,blur:$}}var X=require("react/jsx-runtime");function ao(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var Et=(0,T.forwardRef)(function({onSubmit:a,onResult:t,onError:i,optionOverrides:n,maskCompletedText:o,className:r,apiConfig:g,additionalContext:b,columns:w,pillPlacement:c="dropdown",mode:x="auto",optionsPosition:I="below",animations:y=!0,dropdownTrigger:v,closeDropdownOnBlur:L,showNonTappableOptions:M,showSkipButton:ie,autoFocus:ne=!0,onFocus:U,onBlur:A,value:re,completedParams:se,onChange:p,onParamsChange:le,products:de,onProductSelect:N,submitButton:Z},ce){let J=(0,T.useRef)(null),pe=(0,T.useRef)(null),ue=(0,T.useRef)(()=>{}),F=(0,T.useRef)(null),q=(0,T.useRef)(null);(0,T.useEffect)(()=>{let S=J.current;if(S)return F.current?F.current.setMode(x):F.current=new Ee.ModeController(S,x),()=>{F.current?.destroy(),F.current=null}},[x]);let ee=(0,T.useCallback)(S=>{let ye=q.current?.current;ye&&(ye.focus(),(0,Ee.setCursorOffset)(ye,S))},[]),{completedParams:$,skippedParams:u,identifiedParams:V,isReady:s,suggestionPills:m,setActivePill:f,skipActivePill:l,segments:_,newParamId:D,clearNewParamId:G,placeholderText:d,isFocused:me,isDropdownOpen:Ae,isActivePillSelected:xe,isLoading:ke,activeIndex:te,listboxId:he,handleTextChange:fe,handleKeyDown:ge,setFocused:Te,editingParam:Oe,editingIdentified:je,editingAnchor:Me,caretOffset:h,startEditingParam:j,handleCaretAfterInput:R,handleCaretMove:Ve,replaceEditingRange:Tt,dropdownProps:Rt,reset:Ne}=qe({onSubmit:S=>ue.current(S),onResult:t,onError:i,optionOverrides:n,maskCompletedText:o,apiConfig:g,additionalContext:b,columns:w,dropdownTrigger:v,optionsPosition:I,closeDropdownOnBlur:L,showNonTappableOptions:M,showSkipButton:ie,onFocus:U,onBlur:A,value:re,completedParams:se,onChange:p,onParamsChange:le,products:de,onProductSelect:N,source:"full-sdk",setCursor:ee});(0,T.useEffect)(()=>{if(!D)return;let S=window.setTimeout(()=>G(),650);return()=>window.clearTimeout(S)},[D,G]);let Lt=te>=0?`${he}-option-${te}`:void 0,{inputRef:Ye,editorProps:Ot,focus:ze,blur:it,getPlainText:nt}=Dt({segments:_,newParamId:D,editingParam:Oe,editingIdentified:je,editingAnchor:Me,caretOffset:h,placeholderText:d,isFocused:me,isDropdownOpen:Ae,listboxId:he,activeDescendantId:Lt,autoFocus:ne,handleTextChange:fe,handleKeyDown:ge,handleCaretAfterInput:R,handleCaretMove:Ve,startEditingParam:j,replaceEditingRange:Tt,setFocused:Te});q.current=Ye,(0,T.useLayoutEffect)(()=>{let S=pe.current,ye=Ye.current;if(!S||!ye)return;let rt=()=>{let lt=S.firstElementChild;if(!lt)return;let Bt=lt.getBoundingClientRect(),Ft=ye.getBoundingClientRect();Bt.top>=Ft.bottom-2?S.setAttribute("data-aia-pill-wrapped",""):S.removeAttribute("data-aia-pill-wrapped")};rt();let st=new ResizeObserver(rt);return st.observe(ye),()=>st.disconnect()},[_,m.length,ke,Ye]),(0,T.useImperativeHandle)(ce,()=>({focus:ze,blur:it,reset:Ne,setMode:S=>F.current?.setMode(S),skipActivePill:l}),[ze,it,Ne,l]);let Be=!!_.length||$.length>0,Qe=(0,T.useCallback)(()=>{if(!Be)return;let S=nt();a((0,Ee.buildSubmitResult)(S,$,u,{identifiedParams:V,isReady:s})),Ne()},[Be,$,u,V,s,a,Ne,nt]);ue.current=Qe;let Mt=(0,T.useCallback)(S=>{S.target?.closest("[data-aia-pill]")||ze()},[ze]),Nt=c==="inline",zt=c==="dropdown";return(0,X.jsxs)("div",{ref:J,className:`magicx-aia ${Pe.container} ${r??""}`,"data-pill-placement":c,"data-options-position":I,"data-animations":y?"on":"off","data-mode":ao(x),children:[(0,X.jsx)(We,{...Rt,showPills:zt}),(0,X.jsxs)("div",{className:Pe.inputWrapper,onClick:Mt,children:[(0,X.jsxs)("div",{className:Pe.editorArea,"data-aia-editor":"",children:[(0,X.jsx)("div",{...Ot,className:Pe.input,"data-aia-input":""}),Nt&&(ke||m.length>0)&&(0,X.jsx)("span",{ref:pe,className:Pe.pillListContainer,"data-aia-pill-list-container":"",children:(0,X.jsx)(Ge,{pills:m,activePillIndex:0,activeSelected:xe,onSelectPill:f,loading:ke})})]}),Z===null?null:Z===void 0?(0,X.jsx)(At,{disabled:!Be,onClick:Qe}):(0,X.jsx)("span",{"data-aia-submit":"",className:Pe.submitSlot,onClick:S=>{Be&&(S.stopPropagation(),Qe())},children:Z})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,WEEKDAY_LABELS,buildSubmitResult,cellDay,cellIso,formatDate,isoDate,monthLabel,parseDate,parseLooseDate,useAIAutocomplete,withSkippedParams});
|
|
1584
1605
|
//# sourceMappingURL=index.js.map
|