@enonic/ui 0.47.2 → 0.47.4

package/dist/enonic-ui.es.js

@@ -8,7 +8,7 @@ return N("div",{className:"flex w-fit flex-col gap-1",children:[
 /* @__PURE__ */N("input",{ref:e=>{"function"==typeof h?h(e):h&&(h.current=e),e&&(e.indeterminate=D)},...v,id:y,type:"checkbox",className:"peer sr-only",checked:S,disabled:c??l,required:d,name:n,value:u,"aria-checked":D?"mixed":S,"aria-disabled":l,"aria-invalid":s,"aria-readonly":c,"data-state":D?"indeterminate":S?"checked":"unchecked","data-disabled":l??void 0,onChange:e=>{if(!x)return;let t;t=!D&&e.currentTarget.checked,C(t)}}),
 /* @__PURE__ */N("span",{className:Tr({labeled:I}),"aria-hidden":"true",children:D?/* @__PURE__ */N(Pr,{className:cn("size-4 rounded-sm transition-highlight",!x&&"opacity-30","error"===w?"text-error":"text-main group-data-[tone=inverse]:text-alt"),"data-slot":"checkbox-indicator"}):S?/* @__PURE__ */N(Rr,{className:cn("size-4 rounded-sm transition-highlight",!x&&"opacity-30","error"===w?"text-error":"text-main group-data-[tone=inverse]:text-alt"),"data-slot":"checkbox-indicator"}):/* @__PURE__ */N(Wn,{className:cn("size-4 rounded-sm transition-highlight focus:outline-none",!x&&"opacity-30","error"===w?"text-error":"text-main group-data-[tone=inverse]:text-alt"),"data-slot":"checkbox-indicator"})}),r&&/* @__PURE__ */N("span",{className:cn("text-main group-data-[tone=inverse]:text-alt",l&&"opacity-30"),children:r})]}),"error"===w&&f&&/* @__PURE__ */N("div",{className:cn("flex items-center gap-2 text-error leading-5",l&&"opacity-30"),children:[
 /* @__PURE__ */N(Mr,{size:14}),f]})]})});Er.displayName="Checkbox";const Lr=M(["p-0"],{variants:{size:{sm:"size-9",md:"size-10",lg:"h-11.5 w-11.5"},shape:{square:"rounded-sm",round:"rounded-full"}},defaultVariants:{size:"md",shape:"square"}}),$r=a(({className:e,variant:t="text",size:n="md",shape:r="square",icon:o,iconClassName:i,...a},s)=>/* @__PURE__ */N(In,{ref:s,className:cn(Lr({size:n,shape:r}),e),variant:t,size:n,startIcon:o,startIconClassName:i,label:"",...a}));$r.displayName="IconButton";const Vr=[],Fr=({baseId:e,selection:t,defaultSelection:n=Vr,onSelectionChange:r,active:o,defaultActive:a,setActive:d,selectionMode:u="single",focusMode:m="roving-tabindex",disabled:f,children:g,keyHandler:p,registerItem:b,unregisterItem:v,getItems:h,isItemDisabled:y})=>{const w=ee(),x=e??w,[I,k]=s(()=>new Set(n)),C=void 0!==t,D=l(()=>C?new Set(t):I,[C,t,I]),[S,M]=Xn(o,a,d),A=tr(),R=b??A.registerItem,O=v??A.unregisterItem,P=h??A.getItems,z=y??A.isItemDisabled;c(()=>{if(void 0===S&&!f){const e=P();if(0===e.length)return;const t=e.find(e=>D.has(e)&&!z(e));if(t)return void M(t);const n=e.find(e=>!z(e));n&&M(n)}},[S,f,P,z,D,M]);const T=i(e=>{const t=D.has(e),n=new Set(D);"single"===u?(n.clear(),t||n.add(e)):t?n.delete(e):n.add(e),C||k(n),r?.(Array.from(n)),M(e)},[D,u,C,r,M]),E=l(()=>({active:S,selection:D,selectionMode:u,focusMode:m,disabled:f,setActive:M,toggleValue:T,baseId:x,keyHandler:p,registerItem:R,unregisterItem:O,getItems:P,isItemDisabled:z}),[S,D,u,m,f,M,T,x,p,R,O,P,z]);/* @__PURE__ */
-return N(ne,{value:E,children:g})};Fr.displayName="ListboxRoot";const Kr=a(({className:e,label:t,children:n,...r},o)=>{const a=u(null),{active:s,disabled:l,setActive:c,toggleValue:d,baseId:m,selectionMode:f,keyHandler:g,focusMode:p="roving-tabindex",getItems:b,isItemDisabled:v}=re(),{handleKeyDown:h}=rr({getItems:b,isItemDisabled:v,active:s,setActive:c,loop:!1,orientation:"vertical",onSelect:e=>{d(e)}}),y=g??h,w=i(()=>{if("activedescendant"===p&&!s&&!l){const e=b().find(e=>!v(e));e&&c(e)}},[p,s,l,c,b,v]),x=i(()=>{if("roving-tabindex"===p){const e=a.current?.contains(document.activeElement);e||c(void 0)}},[p,c]);return ur({containerRef:a,activeId:s??void 0,orientation:"vertical",buildElementId:e=>`${m}-listbox-option-${e}`}),
+return N(ne,{value:E,children:g})};Fr.displayName="ListboxRoot";const Kr=a(({className:e,label:t,children:n,...r},o)=>{const a=u(null),{active:s,disabled:l,setActive:c,toggleValue:d,baseId:m,selectionMode:f,keyHandler:g,focusMode:p="roving-tabindex",getItems:b,isItemDisabled:v}=re(),{handleKeyDown:h}=rr({getItems:b,isItemDisabled:v,active:s,setActive:c,loop:!1,orientation:"vertical",onSelect:e=>{d(e)}}),y=g??h,w=i(()=>{if("activedescendant"===p&&!s&&!l){const e=b().find(e=>!v(e));e&&c(e)}},[p,s,l,c,b,v]),x=i(()=>{if("roving-tabindex"===p){const e=a.current?.contains(document.activeElement);e||c(void 0)}},[p,c]),I=i(e=>`${m}-listbox-option-${e}`,[m]);return ur({containerRef:a,activeId:s??void 0,orientation:"vertical",buildElementId:I}),
 /* @__PURE__ */N("div",{ref:gn(o,a),id:`${m}-listbox`,className:cn("flex flex-col items-start gap-y-1 p-1","overflow-y-auto","outline-none","transition-highlight",l&&"pointer-events-none select-none opacity-30",e),role:"listbox","aria-disabled":l,"aria-label":t,"aria-multiselectable":"multiple"===f||void 0,"aria-activedescendant":"activedescendant"===p&&s?`${m}-listbox-option-${s}`:void 0,tabIndex:"activedescendant"!==p||l?void 0:0,onFocus:"activedescendant"===p?w:void 0,onPointerLeave:"roving-tabindex"===p?x:void 0,onKeyDown:y,...r,children:n})});Kr.displayName="ListboxContent";const Hr=M(["group relative z-0 flex w-full cursor-pointer items-center gap-x-2.5 px-4.5 py-1 outline-none transition-highlight",'after:-inset-y-0.5 after:-z-10 after:pointer-events-auto after:absolute after:inset-x-0 after:rounded-sm after:content-[""]'],{variants:{selected:{true:"bg-surface-selected text-alt hover:bg-surface-selected-hover",false:"hover:bg-surface-neutral-hover data-[active=true]:bg-surface-neutral-hover"},disabled:{true:"pointer-events-none cursor-not-allowed opacity-30",false:""},focusMode:{"roving-tabindex":["focus-visible:ring-3 focus-visible:ring-ring-offset focus-visible:ring-inset","focus-visible:ring-offset-3 focus-visible:ring-offset-ring"],activedescendant:""}},compoundVariants:[{selected:!0,disabled:!1,class:"data-[active=true]:bg-surface-selected-hover"}],defaultVariants:{selected:!1,disabled:!1,focusMode:"roving-tabindex"}}),Br=({value:e,disabled:t=!1,children:n,className:r,...o})=>{const a=re(),{disabled:s,toggleValue:l,baseId:d,active:m,setActive:f,focusMode:g="roving-tabindex",registerItem:p,unregisterItem:b,getItems:v,isItemDisabled:h}=a,y=a.selection.has(e),w=m===e,x=t||!!s,I=u(null);c(()=>(p(e,x,I.current),()=>b(e)),[e,x,p,b]);const{tabIndex:k}=dr({id:e,active:m,disabled:x,getItems:v,isItemDisabled:h,focusMode:g});_n({ref:I,isActive:w,disabled:x,focusMode:g,checkFocusWithin:{enabled:!0,containerRole:"listbox"}});const C=i(()=>{x||l(e)},[x,l,e]),D=i(()=>{w||x||f(e)},[w,f,e,x]),S=i(()=>{x||f(e)},[x,f,e]);
 /* @__PURE__ */
 return N("div",{ref:I,id:`${d}-listbox-option-${e}`,className:cn(Hr({selected:y,disabled:x,focusMode:g}),r),role:"option","aria-selected":y,"aria-disabled":x||void 0,tabIndex:"roving-tabindex"===g?k:void 0,"data-value":e,"data-active":w||void 0,"data-tone":y?"inverse":void 0,onClick:C,onPointerMove:"roving-tabindex"===g?D:void 0,onFocus:"roving-tabindex"===g?S:void 0,...o,children:n})};Br.displayName="ListboxItem";const jr=Object.assign(Fr,{Root:Fr,Content:Kr,Item:Br}),Gr=({id:e,value:t,defaultValue:n="",onChange:r,placeholder:o="Search",clearLabel:i="Clear",disabled:a,readOnly:c,children:d,className:m,...f})=>{const g=ee(pn(e)),[p,b]=s(g),v=u(null),[h,y]=Zn(t,n,r),w=l(()=>({id:p,setId:b,value:h,setValue:y,disabled:a,readOnly:c,placeholder:o,clearLabel:i,inputRef:v}),[p,h,y,a,c,o,i]);/* @__PURE__ */
@@ -17,7 +17,7 @@ return N("input",{ref:gn(r,m),id:o,className:cn("h-5.5 w-full border-0 text-base
 return N($r,{className:cn("-mx-1.5 flex size-7 shrink-0 items-center justify-center text-subtle",e),icon:Yn,title:i,onClick:()=>{a(""),s.current?.focus()},disabled:r,iconSize:28,iconStrokeWidth:1.25,...t})};Yr.displayName="SearchFieldClear";const _r=Object.assign(Gr,{Root:Gr,Icon:qr,Input:Wr,Clear:Yr});function Ur(e,t,n="any"){if(e===t)return!0;if(null==e||null==t)return!1;if(e.length!==t.length)return!1;const r="any"===n?[...e].sort():e,o="any"===n?[...t].sort():t;for(let i=0;i<r.length;i+=1)if(r[i]!==o[i])return!1;return!0}const Zr=[],Xr=e=>t=>Ur(t,e)?t:e,Jr=({children:e,open:t,defaultOpen:n=!1,onOpenChange:r,closeOnBlur:o=!0,value:a,defaultValue:d="",onChange:m,disabled:f=!1,error:g=!1,selectionMode:p="single",selection:b,defaultSelection:v=Zr,onSelectionChange:h,active:y,defaultActive:w,setActive:x,contentType:I="auto"})=>{const k=ee(),C=u(null),[D,S]=Zn(t,n,r),[M,A]=Zn(a,d,m),R="single"!==p,O="staged"===p,[P,T]=s(()=>new Set(v)),E=void 0!==b,L=l(()=>E?new Set(b):P,[E,b,P]),$=l(()=>Array.from(L),[L]),[V,F]=s($);c(()=>{F(O?Xr($):$)},[$,O]);const K=O?V:$,H=l(()=>new Set(K),[K]),B=l(()=>O&&!Ur(V,$),[O,V,$]),j=i(()=>{O&&F(Xr($))},[O,$]),[G,q]=Xn(y,w,x),{registerItem:W,unregisterItem:Y,getItems:_,isItemDisabled:U}=tr(),[Z,X]=s(!1),J=i(e=>{A(e),S(!0)},[A,S]),Q=i(e=>{S(e),e||j()},[S,j]),te=i(e=>{const t=new Set(e);E||T(t),h?.(e),"single"===p&&S(!1)},[E,h,p,S]),ne=i(e=>{O?F(e):te(e)},[O,te]),re=i(()=>{O&&(Ur(V,$)||te(V),S(!1))},[O,V,$,te,S]),{handleKeyDown:oe}=rr({getItems:_,isItemDisabled:U,active:G,setActive:q,loop:!1,orientation:"vertical",onSelect:e=>{let t;t=R?K.includes(e)?K.filter(t=>t!==e):[...K,e]:[e],ne(t)}}),ie=i(()=>{requestAnimationFrame(()=>{const e=document.getElementById(`${k}-tree`),t=e?.querySelector('[role="tree"]');t?.focus({focusVisible:!0})})},[k]),ae=i(e=>{if(!f){if((e.metaKey||e.ctrlKey)&&"Enter"===e.key&&O)return e.preventDefault(),void re();if("ArrowDown"===e.key||"ArrowUp"===e.key){if(!D)return e.preventDefault(),S(!0),void("tree"===I&&ie());if("tree"===I)return e.preventDefault(),void ie()}if("Escape"===e.key)return e.preventDefault(),void Q(!1);"tree"!==I&&" "!==e.key&&oe(e)}},[f,D,S,Q,oe,I,ie,O,re]);c(()=>{if(D&&void 0===G){const e=_();e.length>0&&q(e[0])}},[D,G,_,q]);const se=l(()=>({open:D,setOpen:Q,inputValue:M,setInputValue:J,baseId:k,controlRef:C,active:G,setActive:q,disabled:f,error:g,closeOnBlur:o,keyHandler:ae,selection:H,appliedSelection:$,stagedSelection:V,stagingEnabled:O,hasStagedChanges:B,applyStagedSelection:re,resetStagedSelection:j,contentType:I,selectionMode:R?"multiple":"single",onSelectionChange:ne,registerItem:W,unregisterItem:Y,getItems:_,isItemDisabled:U,hasValue:Z,setHasValue:X}),[D,Q,o,ae,M,J,G,q,k,f,g,H,$,V,O,B,re,j,I,R,ne,W,Y,_,U,Z]);/* @__PURE__ */
 return N(z,"tree"===I||"listbox"===I?{value:se,children:e}:{value:se,children:/* @__PURE__ */N(jr.Root,{selectionMode:R?"multiple":"single",selection:K,onSelectionChange:ne,disabled:f,active:G,focusMode:"activedescendant",baseId:k,setActive:q,keyHandler:ae,registerItem:W,unregisterItem:Y,getItems:_,isItemDisabled:U,children:e})})};Jr.displayName="Combobox.Root";const Qr=a(({className:e,children:t,...n},r)=>{const o=u(null),{setOpen:a,closeOnBlur:s}=T(),l=i(e=>{if(!s)return;const{relatedTarget:t}=e;t instanceof Node&&o.current?.contains(t)||t instanceof Element&&t.closest("[data-combobox-popup]")||a(!1)},[a,s]);
 /* @__PURE__ */
-return N("div",{ref:gn(r,o),className:e,onBlur:l,...n,children:t})});Qr.displayName="Combobox.Content";const eo=M(["flex items-center gap-2.5","h-12 rounded-sm border bg-surface-neutral","focus-within:outline-none focus-within:ring-3 focus-within:ring-ring focus-within:ring-offset-3 focus-within:ring-offset-ring-offset","transition-highlight"],{variants:{error:{true:"border-error focus-within:border-error focus-within:ring-error",false:"border-bdr-subtle"},open:{true:"border-bdr-strong",false:null},disabled:{true:"pointer-events-none select-none opacity-30",false:null}},defaultVariants:{error:!1,open:!1,disabled:!1}}),to=({className:e,children:t,...n})=>{const{open:r,disabled:o,error:i,controlRef:a}=T();/* @__PURE__ */
+return N("div",{ref:gn(r,o),className:e,onBlur:l,...n,children:t})});Qr.displayName="Combobox.Content";const eo=M(["flex items-center gap-2.5","h-12 rounded-sm border bg-surface-neutral","focus-within:outline-none focus-within:ring-3 focus-within:ring-ring focus-within:ring-offset-3 focus-within:ring-offset-ring-offset","transition-highlight"],{variants:{error:{true:"border-error focus-within:border-error focus-within:ring-error",false:"border-bdr-subtle"},open:{true:"border-bdr-strong",false:null},disabled:{true:"pointer-events-none select-none opacity-30",false:null}},compoundVariants:[{error:!0,open:!0,class:"border-error"}],defaultVariants:{error:!1,open:!1,disabled:!1}}),to=({className:e,children:t,...n})=>{const{open:r,disabled:o,error:i,controlRef:a}=T();/* @__PURE__ */
 return N("div",{ref:a,className:cn(eo({error:i,open:r,disabled:o}),e),"data-open":r?"true":void 0,...n,children:t})};to.displayName="Combobox.Control";const no=a((e,t)=>{const n=u(null),r=gn(t,n),{open:o,keyHandler:i,baseId:a,active:s,disabled:l,error:d,contentType:m,hasValue:f}=T();return c(()=>{o&&!l&&n.current?.focus()},[o,l]),f&&!o?null:/* @__PURE__ */N(_r.Input,{ref:r,id:`${a}-input`,onKeyDown:i,"aria-disabled":l,"aria-invalid":d??void 0,role:"combobox","aria-autocomplete":"list","aria-expanded":o,"aria-haspopup":"tree"===m?"tree":"listbox","aria-controls":`${a}-${"tree"===m?"tree":"listbox"}`,"aria-activedescendant":"tree"===m?void 0:s?`${a}-listbox-option-${s}`:void 0,...e})});no.displayName="Combobox.Input";const ro=({children:e,className:t,...n})=>{const{inputValue:r,setInputValue:o,error:i}=T();/* @__PURE__ */
 return N(_r.Root,{value:r,onChange:o,className:cn("w-full pr-0","border-0 focus-within:border-0 focus-within:ring-0 focus-within:ring-offset-0",i&&"hover:outline-error",t),...n,children:e})};ro.displayName="Combobox.Search";const oo=({className:e,...t})=>{const{open:n,hasValue:r}=T();return r&&!n?null:/* @__PURE__ */N(_r.Icon,{className:e,...t})};oo.displayName="Combobox.SearchIcon";const io=({className:e,...t})=>{const{open:n,setOpen:r,disabled:o}=T();/* @__PURE__ */
 return N($r,{type:"button",variant:"text",size:"sm",iconSize:"lg",icon:Pn,"aria-label":"Toggle",onClick:()=>{o||r(!n)},disabled:o,tabIndex:-1,iconClassName:cn("transition-transform duration-150",n&&"rotate-180"),className:cn("mr-1.25 shrink-0 rounded-[0.1875rem] text-subtle hover:bg-surface-neutral-hover",'after:-inset-1 after:-z-10 relative z-0 overflow-visible after:pointer-events-auto after:absolute after:rounded-sm after:content-[""]',e),...t})};io.displayName="Combobox.Toggle";const ao=({className:e,children:t,...n})=>{const{open:r,setOpen:o,disabled:a,setHasValue:s}=T(),l=u(null),d=u(r);m(()=>(s(!0),()=>s(!1)),[s]),c(()=>{d.current&&!r&&l.current?.focus(),d.current=r},[r]);const f=i(()=>{a||o(!0)},[a,o]),g=i(e=>{"Enter"!==e.key&&" "!==e.key&&"ArrowDown"!==e.key&&"ArrowUp"!==e.key||(e.preventDefault(),o(!0))},[o]);return r?null:/* @__PURE__ */N("button",{ref:l,type:"button",onClick:f,onKeyDown:g,disabled:a,className:cn("flex flex-1 items-center gap-2 truncate text-left","-mx-4.5 -my-3 h-11.5 px-4.5","cursor-pointer select-none","focus-visible:outline-none",a&&"pointer-events-none cursor-not-allowed",e),...n,children:t})};ao.displayName="Combobox.Value";const so=({className:e,label:t="Apply",...n})=>{const{stagingEnabled:r,hasStagedChanges:o,applyStagedSelection:i}=T();return r&&o?/* @__PURE__ */N(In,{className:cn("h-7 min-w-14 gap-2 px-2.5 text-xs",e),type:"button",label:t,variant:"outline",onClick:i,...n}):null};so.displayName="Combobox.Apply";const lo=({container:e,forceMount:t,children:n})=>{const{open:r}=T(),[o,i]=s(!1);return c(()=>{i(!0)},[]),o&&(t||r)?h(n,e??document.body):null};lo.displayName="Combobox.Portal";const co=a(({children:e,className:t,style:n,...r},o)=>{const{open:i,setOpen:a,controlRef:l,closeOnBlur:c}=T(),d=u(null),f=gn(o,d),[g,p]=s(!1);m(()=>{if(!i||!d.current)return;const e=d.current.parentElement;p(e===document.body)},[i]),lr(d,g);const b=Jn({enabled:i&&g,anchorRef:l,contentRef:d,align:"start"});if(Un({enabled:i&&g&&c,contentRef:d,excludeRefs:l?[l]:void 0,onClose:()=>a(!1)}),!i)return null;const v=g&&l?.current?l.current.offsetWidth:void 0,h=g&&!b,y=g?{position:"fixed",top:b?`${b.top}px`:"0",left:void 0!==b?.left?`${b.left}px`:void 0,right:void 0!==b?.right?`${b.right}px`:void 0,width:v,...n??{}}:n??{};/* @__PURE__ */
@@ -38,7 +38,7 @@ return N(xo,{ref:n,active:r,setActive:o,registerItem:i,unregisterItem:a,getItems
 return N(Ie,{value:V,children:e})};To.displayName="Selector.Root";const Eo=M(["flex w-full items-center justify-between gap-2.5","h-12 rounded-sm border bg-surface-neutral px-4","cursor-pointer select-none text-left","hover:-outline-offset-1 hover:outline-2","focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring","focus-visible:ring-offset-3 focus-visible:ring-offset-ring-offset","transition-highlight"],{variants:{error:{true:"border-error hover:outline-error focus-visible:border-error focus-visible:ring-error",false:"border-bdr-subtle hover:outline-bdr-subtle"},open:{true:"",false:null},disabled:{true:"pointer-events-none cursor-not-allowed select-none opacity-30 hover:outline-none focus-visible:outline-none",false:null}},defaultVariants:{error:!1,open:!1,disabled:!1}}),Lo=a(({className:e,children:t,onClick:n,...r},o)=>{const{baseId:a,open:s,setOpen:l,active:c,disabled:d,error:u,keyHandler:m,triggerRef:f}=Ne(),g=`${a}-content`,p=i(e=>{n?.(e),d||l(!s)},[n,d,l,s]);/* @__PURE__ */
 return N("button",{ref:gn(o,f),type:"button",id:`${a}-trigger`,role:"combobox","aria-controls":g,"aria-expanded":s,"aria-haspopup":"listbox","aria-activedescendant":s&&c?`${a}-option-${c}`:void 0,"aria-disabled":d||void 0,"aria-invalid":u||void 0,disabled:d,"data-state":s?"open":"closed",className:cn(Eo({error:u,open:s,disabled:d}),e),onClick:p,onKeyDown:m,...r,children:t})});Lo.displayName="Selector.Trigger";const $o=a(({className:e,placeholder:t,children:n,...r},o)=>{const{value:i}=Ne();let a=null;i&&(a=function(e){return"function"==typeof e}(n)?n(i):n??i);const s=!a&&t;/* @__PURE__ */
 return N("span",{ref:o,className:cn("flex-1 truncate",s&&"text-subtle",e),"data-placeholder":s||void 0,...r,children:a??t})});$o.displayName="Selector.Value";const Vo=a(({className:e,children:t,...n},r)=>{const{open:o}=Ne();/* @__PURE__ */
-return N("span",{ref:r,"aria-hidden":"true",className:cn("shrink-0 text-subtle transition-transform",o&&"rotate-180",e),...n,children:t??/* @__PURE__ */N(Pn,{className:"size-5"})})});Vo.displayName="Selector.Icon";const Fo=a(({className:e,children:t,align:n="start",portal:r=!0,onEscapeKeyDown:o,onPointerDownOutside:i,onInteractOutside:a,...l},d)=>{const{baseId:f,open:g,setOpen:p,active:b,triggerRef:v}=Ne(),y=u(null),w=gn(d,y),[x,I]=s(!1),[k,C]=s(!1),D=Jn({enabled:g,anchorRef:v,contentRef:y,align:n});if(c(()=>{I(!0)},[]),m(()=>{r&&g&&y.current&&C(y.current.parentElement===document.body)},[r,g]),lr(y,r&&k),Un({enabled:g,contentRef:y,excludeRefs:[v],onPointerDownOutside:i,onInteractOutside:a,onClose:()=>p(!1)}),ur({containerRef:y,activeId:b,orientation:"vertical",buildElementId:e=>`${f}-option-${e}`}),!x||!g)return null;const{side:S,...M}=D??{side:"bottom"},A=/* @__PURE__ */N("div",{ref:w,id:`${f}-content`,role:"listbox","aria-labelledby":`${f}-trigger`,tabIndex:-1,"data-state":"open","data-side":D?.side,className:cn("fixed z-50 flex w-fit min-w-(--trigger-width) flex-col overflow-hidden","data-[side=top]:-mt-2 data-[side=bottom]:mt-2","rounded-sm border border-bdr-subtle bg-surface-neutral shadow-lg outline-none","data-[state=closed]:animate-out data-[state=open]:animate-in","data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0","data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",!D&&"pointer-events-none opacity-0",e),style:{...M,"--trigger-width":v.current?`${v.current.offsetWidth}px`:void 0},...l,children:t});return r?h(A,document.body):A});Fo.displayName="Selector.Content";const Ko=a(({className:e,children:t,...n},r)=>/* @__PURE__ */N("div",{ref:r,className:cn("flex max-h-80 flex-col gap-y-1 overflow-y-auto p-1",e),...n,children:t}));Ko.displayName="Selector.Viewport";const Ho=M(["group relative z-0 flex w-full cursor-pointer items-center gap-x-2.5 px-4.5 py-2 outline-none transition-highlight",'after:-inset-y-0.5 after:-z-10 after:pointer-events-auto after:absolute after:inset-x-0 after:rounded-sm after:content-[""]'],{variants:{selected:{true:"bg-surface-selected text-alt",false:"hover:bg-surface-neutral-hover"},active:{true:null,false:null},disabled:{true:"pointer-events-none cursor-not-allowed opacity-30",false:""}},compoundVariants:[{active:!0,selected:!1,disabled:!1,class:"bg-surface-neutral-hover"},{active:!0,selected:!0,disabled:!1,class:"bg-surface-selected-hover"}],defaultVariants:{selected:!1,active:!1,disabled:!1}}),Bo=a(({value:e,disabled:t=!1,textValue:n,className:r,children:o,onClick:a,onPointerMove:s,...l},d)=>{const{baseId:m,value:f,setValue:g,setOpen:p,active:b,setActive:v,disabled:h,registerItem:y,registerItemText:w}=Ne(),x=f===e,I=b===e,k=t||h,C=u(null),D=gn(d,C);c(()=>{y(e,k,C.current);const t=n??("string"==typeof o?o:void 0);t&&w(e,t)},[e,k,n,o,y,w]);const S=i(t=>{a?.(t),k||(g(e),p(!1))},[a,k,g,e,p]),M=i(t=>{s?.(t),I||k||v(e)},[s,I,k,v,e]);
+return N("span",{ref:r,"aria-hidden":"true",className:cn("shrink-0 text-subtle transition-transform",o&&"rotate-180",e),...n,children:t??/* @__PURE__ */N(Pn,{className:"size-5"})})});Vo.displayName="Selector.Icon";const Fo=a(({className:e,children:t,align:n="start",portal:r=!0,onEscapeKeyDown:o,onPointerDownOutside:a,onInteractOutside:l,...d},f)=>{const{baseId:g,open:p,setOpen:b,active:v,triggerRef:y}=Ne(),w=u(null),x=gn(f,w),[I,k]=s(!1),[C,D]=s(!1),S=Jn({enabled:p,anchorRef:y,contentRef:w,align:n});c(()=>{k(!0)},[]),m(()=>{r&&p&&w.current&&D(w.current.parentElement===document.body)},[r,p]),lr(w,r&&C),Un({enabled:p,contentRef:w,excludeRefs:[y],onPointerDownOutside:a,onInteractOutside:l,onClose:()=>b(!1)});const M=i(e=>`${g}-option-${e}`,[g]);if(ur({containerRef:w,activeId:v,orientation:"vertical",buildElementId:M}),!I||!p)return null;const{side:A,...R}=S??{side:"bottom"},O=/* @__PURE__ */N("div",{ref:x,id:`${g}-content`,role:"listbox","aria-labelledby":`${g}-trigger`,tabIndex:-1,"data-state":"open","data-side":S?.side,className:cn("fixed z-50 flex w-fit min-w-(--trigger-width) flex-col overflow-hidden","data-[side=top]:-mt-2 data-[side=bottom]:mt-2","rounded-sm border border-bdr-subtle bg-surface-neutral shadow-lg outline-none","data-[state=closed]:animate-out data-[state=open]:animate-in","data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0","data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",!S&&"pointer-events-none opacity-0",e),style:{...R,"--trigger-width":y.current?`${y.current.offsetWidth}px`:void 0},...d,children:t});return r?h(O,document.body):O});Fo.displayName="Selector.Content";const Ko=a(({className:e,children:t,...n},r)=>/* @__PURE__ */N("div",{ref:r,className:cn("flex max-h-80 flex-col gap-y-1 overflow-y-auto p-1",e),...n,children:t}));Ko.displayName="Selector.Viewport";const Ho=M(["group relative z-0 flex w-full cursor-pointer items-center gap-x-2.5 px-4.5 py-2 outline-none transition-highlight",'after:-inset-y-0.5 after:-z-10 after:pointer-events-auto after:absolute after:inset-x-0 after:rounded-sm after:content-[""]'],{variants:{selected:{true:"bg-surface-selected text-alt",false:"hover:bg-surface-neutral-hover"},active:{true:null,false:null},disabled:{true:"pointer-events-none cursor-not-allowed opacity-30",false:""}},compoundVariants:[{active:!0,selected:!1,disabled:!1,class:"bg-surface-neutral-hover"},{active:!0,selected:!0,disabled:!1,class:"bg-surface-selected-hover"}],defaultVariants:{selected:!1,active:!1,disabled:!1}}),Bo=a(({value:e,disabled:t=!1,textValue:n,className:r,children:o,onClick:a,onPointerMove:s,...l},d)=>{const{baseId:m,value:f,setValue:g,setOpen:p,active:b,setActive:v,disabled:h,registerItem:y,registerItemText:w}=Ne(),x=f===e,I=b===e,k=t||h,C=u(null),D=gn(d,C);c(()=>{y(e,k,C.current);const t=n??("string"==typeof o?o:void 0);t&&w(e,t)},[e,k,n,o,y,w]);const S=i(t=>{a?.(t),k||(g(e),p(!1))},[a,k,g,e,p]),M=i(t=>{s?.(t),I||k||v(e)},[s,I,k,v,e]);
 /* @__PURE__ */
 return N("div",{ref:D,id:`${m}-option-${e}`,role:"option","aria-selected":x,"aria-disabled":k||void 0,"data-value":e,"data-active":I||void 0,"data-disabled":k||void 0,"data-state":x?"selected":void 0,"data-tone":x?"inverse":void 0,className:cn(Ho({selected:x,active:I,disabled:k}),r),onClick:S,onPointerMove:M,...l,children:o})});Bo.displayName="Selector.Item";const jo=a(({className:e,children:t,...n},r)=>/* @__PURE__ */N("span",{ref:r,className:cn("flex-1",e),...n,children:t}));jo.displayName="Selector.ItemText";const Go=a(({className:e,children:t,...n},r)=>/* @__PURE__ */N("span",{ref:r,className:cn("inline-flex shrink-0 items-center justify-center","opacity-0 [[data-state=selected]>&]:opacity-100",e),...n,children:t??/* @__PURE__ */N(On,{className:"size-4"})}));Go.displayName="Selector.ItemIndicator";const qo=a(({className:e,children:t,...n},r)=>/* @__PURE__ */N("div",{ref:r,role:"group","aria-labelledby":`${ee(void 0,"selector-group")}-label`,className:cn("w-full",e),...n,children:t}));qo.displayName="Selector.Group";const Wo=a(({className:e,children:t,...n},r)=>/* @__PURE__ */N("div",{ref:r,className:cn("px-4.5 py-1.5 font-semibold text-subtle text-xs",e),...n,children:t}));Wo.displayName="Selector.Label";const Yo=a(({className:e,...t},n)=>/* @__PURE__ */N("div",{ref:n,role:"separator","aria-orientation":"horizontal",className:cn("my-1 h-px bg-bdr-subtle",e),...t}));Yo.displayName="Selector.Separator";const _o=a(({className:e,...t},n)=>{const{value:r,disabled:o,required:i,name:a,form:s,getItems:l,getItemText:c}=Ne(),d=l();/* @__PURE__ */
 return N("select",{ref:n,name:a,form:s,disabled:o,required:i,value:r??"",onChange:()=>{},tabIndex:-1,"aria-hidden":"true",className:cn("absolute h-px w-px overflow-hidden whitespace-nowrap border-0 p-0","[clip:rect(0,0,0,0)]",e),style:{margin:"-1px"},...t,children:[

package/dist/types/hooks/use-scroll-active-into-view.d.ts

@@ -69,11 +69,14 @@ export type UseScrollActiveIntoViewConfig = {
  *   const contentRef = useRef<HTMLDivElement>(null);
  *   const { active } = useListbox();
  *
+ *   // Memoize to keep the effect dependency stable across re-renders
+ *   const buildElementId = useCallback((id: string) => `${baseId}-listbox-option-${id}`, [baseId]);
+ *
  *   useScrollActiveIntoView({
  *     containerRef: contentRef,
  *     activeId: active,
  *     orientation: 'vertical',
- *     buildElementId: (id) => `${baseId}-listbox-option-${id}`,
+ *     buildElementId,
  *   });
  *
  *   return <div ref={contentRef}>...</div>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enonic/ui",
-  "version": "0.47.2",
+  "version": "0.47.4",
   "description": "Enonic UI Component Library",
   "author": "Enonic",
   "license": "MIT",