@magicx-eng/ai-autocomplete-react 0.21.3 → 0.22.0

package/dist/index.mjs

@@ -8,7 +8,14 @@ import{buildSubmitResult as Ko,cellDay as Go,cellIso as Wo,DATE_RANGE_META_END a
 }
 
 .aia-inputWrapper-FLq1b {
-  padding: 12px 16px;
+  /* The left inset is a token shared with the dropdown (which insets its
+     content by the same amount), so the typed text, the parameter label,
+     the option text and the product strip share one left edge. A host that
+     pads the field to clear its own leading icon sets --aia-content-inset-left
+     and the dropdown follows. Floored at 10px \u2014 the dropdown's sections inset
+     their text by 10px and its own padding can't go below zero, so below
+     10px the two sides would diverge; flooring both keeps them together. */
+  padding: 12px 16px 12px max(10px, var(--aia-content-inset-left, 16px));
   border: 1px solid var(--aia-border, #b0b0b0);
   border-radius: 20px;
   background: var(--aia-surface, #ffffff);
@@ -701,7 +708,15 @@ import{buildSubmitResult as Ko,cellDay as Go,cellIso as Wo,DATE_RANGE_META_END a
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  padding: 10px 8px;
+  /* The left padding derives from --aia-content-inset-left, the token the
+     input wrapper reads for its own left padding. The option text and the
+     parameter label sit 10px inside this padding edge (the option's padding;
+     the pill bar's list wrapper carries the same 10px \u2014 see appearance.css),
+     and the product strip is inset to the same line, so the whole panel's
+     content starts exactly under the typed text. max() keeps the padding at
+     zero (never negative, which CSS would clamp anyway) for a token under
+     10px \u2014 the input wrapper floors the token at 10px to match. */
+  padding: 10px 8px 10px max(0px, calc(var(--aia-content-inset-left, 16px) - 10px));
   overflow: hidden;
   container-type: inline-size;
   z-index: 10;
@@ -770,9 +785,10 @@ import{buildSubmitResult as Ko,cellDay as Go,cellIso as Wo,DATE_RANGE_META_END a
 /* "More below" scroll arrow \u2014 see the core's render/scrollArrow.ts.
    A bare down chevron at the bottom-centre of the option list, shown while
    there is more to scroll to \u2014 no disc, border or shadow around it. It rests
-   just above the grid's reserved band (--aia-scroll-arrow-bottom is measured
-   and set inline by the controller so it tracks the grid's bottom edge in
-   every layout). It never travels with the scroll: the controller toggles
+   just above the grid's reserved band, or \u2014 when a product strip follows the
+   grid \u2014 centred on the strip's "Products" label row, off the last option row
+   (--aia-scroll-arrow-bottom is measured and set inline by the controller so
+   it tracks the layout). It never travels with the scroll: the controller toggles
    data-aia-visible and the only thing that transitions is opacity \u2014 a slow,
    even second in and the same second out. Its one motion is an idle bob, a few
    pixels up and back over a couple of seconds, running all the time so a fade
@@ -1384,9 +1400,11 @@ import{buildSubmitResult as Ko,cellDay as Go,cellIso as Wo,DATE_RANGE_META_END a
   display: flex;
   flex-direction: column;
   gap: 6px;
-  /* Matches the grid's own 8px inline padding so the section label lines up
-     with the option text above it. */
-  padding: 0 8px;
+  /* The option text sits 10px inside the dropdown's padding edge (the
+     option's own padding), so the section carries the same 10px and its
+     label lands on the option text's left edge \u2014 which the dropdown in turn
+     places under the typed text (--aia-content-inset-left). */
+  padding: 0 10px;
   min-width: 0;
 }
 
@@ -1414,6 +1432,10 @@ import{buildSubmitResult as Ko,cellDay as Go,cellIso as Wo,DATE_RANGE_META_END a
   overflow-y: hidden;
   overscroll-behavior-x: contain;
   padding-bottom: 2px;
+  /* Pull the row out by the card's own 6px padding so the first card's
+     image tile \u2014 not its hover fill \u2014 starts on the label's left edge, the
+     same way the option's highlight fill hangs outside its text. */
+  margin-inline: -6px;
   /* Hide the scrollbar chrome across all three engines while leaving the box
      scrollable by trackpad, wheel, touch and keyboard. */
   scrollbar-width: none;
@@ -1542,7 +1564,7 @@ import{buildSubmitResult as Ko,cellDay as Go,cellIso as Wo,DATE_RANGE_META_END a
     var(--aia-option-color-selected, var(--aia-color-text-default, #fff))
   );
 }
-`,document.head.appendChild(e)}var _={section:"aia-section-Hugfg",label:"aia-label-nuc93",row:"aia-row-WDVBX",card:"aia-card-JBGYT",media:"aia-media-RrbGe",image:"aia-image-5pNL7",body:"aia-body-ly032",vendor:"aia-vendor-Gvu7G",title:"aia-title-gCNmq",price:"aia-price-gULcE"};import{jsx as fe,jsxs as Ue}from"react/jsx-runtime";function ht({products:e,listboxId:r,onSelect:i,onFocusChange:n,focusable:s=!0}){if(e.length===0)return null;let a=`${r}-products-label`;return Ue("section",{className:_.section,"data-aia-products":"",role:"group","aria-labelledby":a,children:[fe("div",{className:_.label,id:a,children:"Products"}),fe("div",{className:_.row,"data-aia-products-row":"",children:e.map((o,f)=>fe(ra,{product:o,id:`${r}-product-${f}`,onSelect:i,onFocusChange:n,focusable:s},o.id))})]})}function ra({product:e,id:r,onSelect:i,onFocusChange:n,focusable:s}){let a=o=>{o.metaKey||o.ctrlKey||o.shiftKey||o.altKey||o.button!==0||(o.preventDefault(),i(e))};return Ue("a",{id:r,className:_.card,"data-aia-product":"",role:"option","aria-selected":!1,href:e.url,tabIndex:s?0:-1,onClick:a,onKeyDown:o=>{o.key!=="Enter"&&o.key!==" "||(o.preventDefault(),i(e))},onFocus:()=>n?.(!0),onBlur:o=>{o.relatedTarget?.closest("[data-aia-dropdown]")||n?.(!1)},children:[fe("span",{className:_.media,"data-aia-product-placeholder":e.imageUrl?void 0:"",children:e.imageUrl?fe("img",{className:_.image,src:e.imageUrl,alt:"",loading:"lazy",decoding:"async"}):null}),Ue("span",{className:_.body,children:[e.vendor?fe("span",{className:_.vendor,children:e.vendor}):null,fe("span",{className:_.title,children:e.title}),e.price?fe("span",{className:_.price,children:e.price}):null]})]})}import{isOptionsGridMobileViewport as va,measureOptionsGrid as wa,needsOptionsGridMeasurement as xa,OPTIONS_GRID_MOBILE_QUERY as ya,optionEnterDelayMs as ka,planOptionsGrid as gt}from"@magicx-eng/ai-autocomplete-vanilla";import{useEffect as Ca,useLayoutEffect as Pa,useRef as Sa,useState as vt}from"react";import{optionsGridTemplateColumns as sa}from"@magicx-eng/ai-autocomplete-vanilla";import{useLayoutEffect as la,useRef as da}from"react";if(typeof document<"u"&&!document.getElementById("ac-style-948e58da")){let e=document.createElement("style");e.id="ac-style-948e58da",e.textContent=`.aia-grid {
+`,document.head.appendChild(e)}var _={section:"aia-section-Hugfg",label:"aia-label-nuc93",row:"aia-row-WDVBX",card:"aia-card-JBGYT",media:"aia-media-RrbGe",image:"aia-image-5pNL7",body:"aia-body-ly032",vendor:"aia-vendor-Gvu7G",title:"aia-title-gCNmq",price:"aia-price-gULcE"};import{jsx as fe,jsxs as Ue}from"react/jsx-runtime";function ht({products:e,listboxId:r,onSelect:i,onFocusChange:n,focusable:s=!0}){if(e.length===0)return null;let a=`${r}-products-label`;return Ue("section",{className:_.section,"data-aia-products":"",role:"group","aria-labelledby":a,children:[fe("div",{className:_.label,id:a,"data-aia-products-label":"",children:"Products"}),fe("div",{className:_.row,"data-aia-products-row":"",children:e.map((o,f)=>fe(ra,{product:o,id:`${r}-product-${f}`,onSelect:i,onFocusChange:n,focusable:s},o.id))})]})}function ra({product:e,id:r,onSelect:i,onFocusChange:n,focusable:s}){let a=o=>{o.metaKey||o.ctrlKey||o.shiftKey||o.altKey||o.button!==0||(o.preventDefault(),i(e))};return Ue("a",{id:r,className:_.card,"data-aia-product":"",role:"option","aria-selected":!1,href:e.url,tabIndex:s?0:-1,onClick:a,onKeyDown:o=>{o.key!=="Enter"&&o.key!==" "||(o.preventDefault(),i(e))},onFocus:()=>n?.(!0),onBlur:o=>{o.relatedTarget?.closest("[data-aia-dropdown]")||n?.(!1)},children:[fe("span",{className:_.media,"data-aia-product-placeholder":e.imageUrl?void 0:"",children:e.imageUrl?fe("img",{className:_.image,src:e.imageUrl,alt:"",loading:"lazy",decoding:"async"}):null}),Ue("span",{className:_.body,children:[e.vendor?fe("span",{className:_.vendor,children:e.vendor}):null,fe("span",{className:_.title,children:e.title}),e.price?fe("span",{className:_.price,children:e.price}):null]})]})}import{isOptionsGridMobileViewport as va,measureOptionsGrid as wa,needsOptionsGridMeasurement as xa,OPTIONS_GRID_MOBILE_QUERY as ya,optionEnterDelayMs as ka,planOptionsGrid as gt}from"@magicx-eng/ai-autocomplete-vanilla";import{useEffect as Ca,useLayoutEffect as Pa,useRef as Sa,useState as vt}from"react";import{optionsGridTemplateColumns as sa}from"@magicx-eng/ai-autocomplete-vanilla";import{useLayoutEffect as la,useRef as da}from"react";if(typeof document<"u"&&!document.getElementById("ac-style-948e58da")){let e=document.createElement("style");e.id="ac-style-948e58da",e.textContent=`.aia-grid {
   display: grid;
   grid-template-columns: repeat(
       auto-fit,
@@ -1577,7 +1599,17 @@ import{buildSubmitResult as Ko,cellDay as Go,cellIso as Wo,DATE_RANGE_META_END a
 }
 `,document.head.appendChild(e)}import{jsx as ca}from"react/jsx-runtime";function ut({min:e="16rem",max:r,gap:i,scroll:n=!1,maxHeight:s,scrollResetKey:a,cols:o,template:f,innerRef:v,className:g,children:w,...u}){let x=da(null);la(()=>{if(a===void 0)return;let b=x.current;b&&(b.scrollTop=0)},[a]);let k={"--aia-grid-min":e};return r&&(k["--aia-grid-max"]=r),i&&(k["--aia-grid-gap"]=i),s&&(k["--aia-grid-max-height"]=s),o&&(k.gridTemplateColumns=sa(o)),f&&(k.gridTemplateColumns=f),ca("div",{ref:b=>{x.current=b,v?.(b)},className:g?`aia-grid ${g}`:"aia-grid","data-scroll":n||void 0,style:k,...u,children:w})}import{OPTION_ENTER_DELAY_VAR as pa,optionLabel as ha,sanitizeOptionIconSvg as ua}from"@magicx-eng/ai-autocomplete-vanilla";import{useEffect as ma,useMemo as fa,useRef as ga,useState as mt}from"react";if(typeof document<"u"&&!document.getElementById("ac-style-82820da7")){let e=document.createElement("style");e.id="ac-style-82820da7",e.textContent=`.aia-item-d4vpD {
   position: relative;
-  overflow: visible;
+  /* Clip, not visible: the entrance rise below runs on the inner content,
+     and a transformed box extends its scroll container's scrollable area.
+     Unclipped, the rows rising 16px from below made the option grid overflow
+     for the length of the entrance whenever nothing sat under the grid to
+     absorb it (product strip, optionsPosition="above"), so a scrollbar
+     flashed in and out and the columns shifted sideways by its width. The
+     cell's own children never paint outside it (the streak layer clips
+     itself; press and highlight stay inside the box), so nothing is lost.
+     \`hidden\` first for engines without \`clip\`. */
+  overflow: hidden;
+  overflow: clip;
   display: flex;
   /* Top-align so single-line and multi-line options in the same row share
      the same baseline at the top edge of the cell. */
@@ -1595,11 +1627,10 @@ import{buildSubmitResult as Ko,cellDay as Go,cellIso as Wo,DATE_RANGE_META_END a
   padding: 8px 10px;
   /* Entrance: fade in while rising into place, each row a beat after the one
      before it (--aia-option-enter-delay is set inline per row from the core's
-     optionEnterDelayMs). The durations and distance mirror OPTION_ENTER_* in
-     the core's derive/optionsEntrance.ts \u2014 change both together. */
-  animation:
-    aia-fadeIn-I8u35 150ms ease-out both,
-    aia-riseIn-etXZT 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+     optionEnterDelayMs). The fade is here; the rise is on the inner content
+     (see the overflow note above). The durations and distance mirror
+     OPTION_ENTER_* in the core's derive/optionsEntrance.ts \u2014 change both together. */
+  animation: aia-fadeIn-I8u35 150ms ease-out both;
   animation-delay: var(--aia-option-enter-delay, 0ms);
 }
 
@@ -1616,7 +1647,8 @@ import{buildSubmitResult as Ko,cellDay as Go,cellIso as Wo,DATE_RANGE_META_END a
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .aia-item-d4vpD {
+  .aia-item-d4vpD,
+  .aia-content-T-Qba {
     animation-duration: 0s;
     animation-delay: 0s;
   }
@@ -1625,6 +1657,10 @@ import{buildSubmitResult as Ko,cellDay as Go,cellIso as Wo,DATE_RANGE_META_END a
 .aia-content-T-Qba {
   position: relative;
   z-index: 2;
+  /* The entrance rise (the cell above keeps the fade). Inherits the cell's
+     per-row delay through the custom property. */
+  animation: aia-riseIn-etXZT 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation-delay: var(--aia-option-enter-delay, 0ms);
 }
 
 .aia-tappable-70KcX {
@@ -1766,7 +1802,7 @@ import{buildSubmitResult as Ko,cellDay as Go,cellIso as Wo,DATE_RANGE_META_END a
     filter: brightness(0.55);
   }
 }
-`,document.head.appendChild(e)}var q={item:"aia-item-d4vpD",fadeIn:"aia-fadeIn-I8u35",riseIn:"aia-riseIn-etXZT",content:"aia-content-T-Qba",tappable:"aia-tappable-70KcX",nonTappable:"aia-nonTappable-xSZM-",highlighted:"aia-highlighted-Hb0SU",tag:"aia-tag-e3Fwe",pressed:"aia-pressed-98o-r",pressCompress:"aia-pressCompress-ICV3q",scrollHint:"aia-scrollHint-xKXPt",skeletonPulse:"aia-skeletonPulse-plvdD",text:"aia-text-yqoh9",icon:"aia-icon-Qw938"};import{jsx as ze,jsxs as ba}from"react/jsx-runtime";function ft({option:e,isHighlighted:r,onSelect:i,onHighlight:n,id:s,loading:a,showIcon:o=!0,scrollHint:f,enterDelayMs:v=0}){let[g]=mt(v),[w,u]=mt(!1),x=fa(()=>o&&e.icon_svg?ua(e.icon_svg):null,[o,e.icon_svg]),k=ga(void 0);ma(()=>()=>clearTimeout(k.current),[]);let b=()=>{a||!e.is_tappable||w||(u(!0),i(e),clearTimeout(k.current),k.current=setTimeout(()=>u(!1),170))},E=[q.item,r&&!a?q.highlighted:"",e.is_tappable?q.tappable:q.nonTappable,w?q.pressed:"",f?q.scrollHint:""].filter(Boolean).join(" ");return ze("div",{id:s,role:"option","data-aia-option":"","data-aia-loading":a?"":void 0,"data-aia-icon":x&&e.icon?e.icon:void 0,"aria-selected":r,className:E,style:{[pa]:`${g}ms`},tabIndex:a||!e.is_tappable?-1:0,onClick:b,onKeyDown:T=>{!a&&e.is_tappable&&(T.key==="Enter"||T.key===" ")&&(T.preventDefault(),b())},onMouseEnter:!a&&e.is_tappable?n:void 0,children:ba("span",{className:q.content,children:[x&&ze("span",{className:`${q.icon} magicx-aia-option-icon`,"aria-hidden":"true",dangerouslySetInnerHTML:{__html:x}}),ze("span",{className:q.text,children:ha(e)}),e.tag&&ze("span",{className:q.tag,children:e.tag})]})})}import{jsx as bt}from"react/jsx-runtime";function Ea(){let[e,r]=vt(va);return Ca(()=>{if(typeof window>"u"||!window.matchMedia)return;let i=window.matchMedia(ya),n=()=>r(i.matches);return n(),i.addEventListener("change",n),()=>i.removeEventListener("change",n)},[]),e}function wt({options:e,activeIndex:r,onSelect:i,onHighlight:n,listboxId:s,loading:a,groupKey:o="",optionsPosition:f="below",showIcons:v=!0}){let g=Ea(),w=Sa(null),[u,x]=vt(null);Pa(()=>{let b=w.current,T=b&&!a&&xa(e.length,g)?wa(b):null;x(T?gt(e.length,g,T.rowWidths,T.gridWidth):null)},[e,g,a]);let k=u??gt(e.length,g,null,null);return bt(ut,{min:"250px",max:"1fr",gap:"0",scroll:!0,scrollResetKey:o,template:k.template,maxHeight:k.maxHeight,innerRef:b=>{w.current=b},"data-aia-group":o,children:e.map((b,E)=>bt(ft,{option:b,isHighlighted:E===r,onSelect:i,onHighlight:()=>n(E),id:`${s}-option-${E}`,loading:a,showIcon:v,scrollHint:!a&&k.scrollHintIndices.includes(E),enterDelayMs:a?0:ka(E,k.cols,e.length,f)},`${o}\0${b.text}`))})}if(typeof document<"u"&&!document.getElementById("ac-style-8414cd5f")){let e=document.createElement("style");e.id="ac-style-8414cd5f",e.textContent=`.aia-stack {
+`,document.head.appendChild(e)}var q={item:"aia-item-d4vpD",fadeIn:"aia-fadeIn-I8u35",content:"aia-content-T-Qba",riseIn:"aia-riseIn-etXZT",tappable:"aia-tappable-70KcX",nonTappable:"aia-nonTappable-xSZM-",highlighted:"aia-highlighted-Hb0SU",tag:"aia-tag-e3Fwe",pressed:"aia-pressed-98o-r",pressCompress:"aia-pressCompress-ICV3q",scrollHint:"aia-scrollHint-xKXPt",skeletonPulse:"aia-skeletonPulse-plvdD",text:"aia-text-yqoh9",icon:"aia-icon-Qw938"};import{jsx as ze,jsxs as ba}from"react/jsx-runtime";function ft({option:e,isHighlighted:r,onSelect:i,onHighlight:n,id:s,loading:a,showIcon:o=!0,scrollHint:f,enterDelayMs:v=0}){let[g]=mt(v),[w,u]=mt(!1),x=fa(()=>o&&e.icon_svg?ua(e.icon_svg):null,[o,e.icon_svg]),k=ga(void 0);ma(()=>()=>clearTimeout(k.current),[]);let b=()=>{a||!e.is_tappable||w||(u(!0),i(e),clearTimeout(k.current),k.current=setTimeout(()=>u(!1),170))},E=[q.item,r&&!a?q.highlighted:"",e.is_tappable?q.tappable:q.nonTappable,w?q.pressed:"",f?q.scrollHint:""].filter(Boolean).join(" ");return ze("div",{id:s,role:"option","data-aia-option":"","data-aia-loading":a?"":void 0,"data-aia-icon":x&&e.icon?e.icon:void 0,"aria-selected":r,className:E,style:{[pa]:`${g}ms`},tabIndex:a||!e.is_tappable?-1:0,onClick:b,onKeyDown:T=>{!a&&e.is_tappable&&(T.key==="Enter"||T.key===" ")&&(T.preventDefault(),b())},onMouseEnter:!a&&e.is_tappable?n:void 0,children:ba("span",{className:q.content,children:[x&&ze("span",{className:`${q.icon} magicx-aia-option-icon`,"aria-hidden":"true",dangerouslySetInnerHTML:{__html:x}}),ze("span",{className:q.text,children:ha(e)}),e.tag&&ze("span",{className:q.tag,children:e.tag})]})})}import{jsx as bt}from"react/jsx-runtime";function Ea(){let[e,r]=vt(va);return Ca(()=>{if(typeof window>"u"||!window.matchMedia)return;let i=window.matchMedia(ya),n=()=>r(i.matches);return n(),i.addEventListener("change",n),()=>i.removeEventListener("change",n)},[]),e}function wt({options:e,activeIndex:r,onSelect:i,onHighlight:n,listboxId:s,loading:a,groupKey:o="",optionsPosition:f="below",showIcons:v=!0}){let g=Ea(),w=Sa(null),[u,x]=vt(null);Pa(()=>{let b=w.current,T=b&&!a&&xa(e.length,g)?wa(b):null;x(T?gt(e.length,g,T.rowWidths,T.gridWidth):null)},[e,g,a]);let k=u??gt(e.length,g,null,null);return bt(ut,{min:"250px",max:"1fr",gap:"0",scroll:!0,scrollResetKey:o,template:k.template,maxHeight:k.maxHeight,innerRef:b=>{w.current=b},"data-aia-group":o,children:e.map((b,E)=>bt(ft,{option:b,isHighlighted:E===r,onSelect:i,onHighlight:()=>n(E),id:`${s}-option-${E}`,loading:a,showIcon:v,scrollHint:!a&&k.scrollHintIndices.includes(E),enterDelayMs:a?0:ka(E,k.cols,e.length,f)},`${o}\0${b.text}`))})}if(typeof document<"u"&&!document.getElementById("ac-style-8414cd5f")){let e=document.createElement("style");e.id="ac-style-8414cd5f",e.textContent=`.aia-stack {
   display: flex;
   flex-direction: column;
   gap: var(--aia-stack-space, 0.5rem);