@enonic/ui 0.47.3 → 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__ */
@@ -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.3",
+  "version": "0.47.4",
   "description": "Enonic UI Component Library",
   "author": "Enonic",
   "license": "MIT",