@primereact/headless 11.0.0-rc.3 → 11.0.0-rc.4

package/dialog/index.mjs

@@ -1 +1 @@
-import{withHeadless as Pe}from"@primereact/core/headless";import{useFocusTrap as xe}from"@primereact/headless/focustrap";import{useControlledState as ke}from"@primereact/hooks/use-controlled-state";import{$dt as V}from"@primeuix/styled";import{blockBodyScroll as ye,focus as x,toElement as g,unblockBodyScroll as Ce}from"@primeuix/utils/dom";import{ZIndex as k}from"@primeuix/utils/zindex";import*as t from"react";var A={open:void 0,defaultOpen:void 0,draggable:!1,modal:!0,dismissable:!0,closeOnEscape:!0,blockScroll:!0,keepInViewport:!0,minX:0,minY:0,trapped:!0,baseZIndex:0,autoZIndex:!0,appendTo:"body",position:"center",fullScreen:!1,scrollBehavior:"inside",onOpenChange:void 0,onExitComplete:void 0};var ze=Pe({name:"useDialog",defaultProps:A,setup:({props:e,id:u,$primereact:L})=>{let[o,y]=ke({value:e.open,defaultValue:e.defaultOpen??!1,onChange:e.onOpenChange}),[d,H]=t.useState(e.fullScreen??!1),[F,K]=t.useState(null),[f,N]=t.useState(null),[i,_]=t.useState(null),s=t.useRef(null),C=t.useRef(null),T=t.useRef(null),R=t.useRef(null),b=t.useRef(null),E=t.useRef(null),v=t.useRef(null),S=xe({trapped:!!e.trapped,autoFocus:!1});t.useEffect(()=>{H(e.fullScreen??!1)},[e.fullScreen]);let D=t.useCallback(n=>{let a=g(n)??null;a!==s.current&&(s.current=a,S.containerRef.current=a,K(a))},[]),z=t.useCallback(n=>{let a=g(n)??null;a!==C.current&&(C.current=a,N(a))},[]),B=t.useCallback(n=>{let a=g(n)??null;a!==T.current&&(T.current=a,_(a))},[]),q=t.useCallback(n=>{let a=g(n)??null;a!==R.current&&(R.current=a)},[]),W=t.useCallback(n=>{let a=g(n)??null;a!==b.current&&(b.current=a)},[]);function I(){y([!o,{originalEvent:void 0,value:!o}])}function j(){y([!0,{originalEvent:void 0,value:!0}])}function m(){y([!1,{originalEvent:void 0,value:!1}])}function X(){H(n=>!n)}let G=t.useCallback(()=>{if(!s.current)return;let n=s.current.querySelector("[autoFocus]");n?x(n):b.current?x(b.current):R.current&&x(R.current)},[]),J=t.useCallback(()=>{e.onExitComplete?.()},[e.onExitComplete]);t.useEffect(()=>{o?E.current=document.activeElement:E.current&&(x(E.current),E.current=null)},[o]),t.useEffect(()=>{if(!o||!e.closeOnEscape)return;let n=a=>{a.key==="Escape"&&m()};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[o,e.closeOnEscape]);let Q=t.useCallback(n=>{v.current=n.target},[]),$=t.useCallback(()=>{e.dismissable&&T.current===v.current&&m(),v.current=null},[e.dismissable]),h=t.useRef(null),ee=t.useCallback(n=>{h.current=n.target},[]),te=t.useCallback(()=>{e.dismissable&&C.current===h.current&&m(),h.current=null},[e.dismissable]),r=t.useRef({dragging:!1,startX:0,startY:0,dx:0,dy:0}),ne=t.useCallback(n=>{if(!e.draggable||d||e.scrollBehavior==="outside")return;let a=n.target;if(a.closest('[data-part="close"]')||a.closest('[data-part="maximizable"]'))return;let l=s.current;l&&(r.current.dragging=!0,r.current.startX=n.clientX-r.current.dx,r.current.startY=n.clientY-r.current.dy,l.setPointerCapture(n.pointerId),l.setAttribute("data-dragging",""),l.style.setProperty("user-select","none"))},[e.draggable,d]),ae=t.useCallback(n=>{if(!r.current.dragging)return;let a=s.current;if(!a)return;let l=n.clientX-r.current.startX,p=n.clientY-r.current.startY;if(e.keepInViewport){let c=a.getBoundingClientRect(),Y=window.innerWidth,O=window.innerHeight,M=r.current.dx,w=r.current.dy,Z=c.left+(l-M),U=c.top+(p-w);Z<(e.minX??0)&&(l=M-(c.left-(e.minX??0))),U<(e.minY??0)&&(p=w-(c.top-(e.minY??0))),Z+c.width>Y&&(l=M+(Y-c.left-c.width)),U+c.height>O&&(p=w+(O-c.top-c.height))}r.current.dx=l,r.current.dy=p,a.style.setProperty("--px-drag-x",l+"px"),a.style.setProperty("--px-drag-y",p+"px")},[e.keepInViewport,e.minX,e.minY]),oe=t.useCallback(()=>{r.current.dragging&&(r.current.dragging=!1,s.current?.removeAttribute("data-dragging"),s.current?.style.removeProperty("user-select"))},[]);t.useEffect(()=>{o||(r.current={dragging:!1,startX:0,startY:0,dx:0,dy:0})},[o]),t.useEffect(()=>{if(!(!o||!e.blockScroll))return ye({variableName:V("scrollbar.width").name}),()=>{Ce({variableName:V("scrollbar.width").name})}},[o,e.blockScroll]),t.useEffect(()=>{if(f){if(e.autoZIndex){let n=(e.baseZIndex??0)+(L.config?.zIndex?.modal??1100);i&&k.set("modal",i,n),k.set("modal",f,n)}return()=>{e.autoZIndex&&(i&&k.clear(i),k.clear(f))}}},[f,i,e.autoZIndex,e.baseZIndex,L.config?.zIndex?.modal]);let P=d?{"data-maximized":""}:{},re={id:u,"data-scope":"dialog","data-part":"root",...o?{"data-open":""}:{"data-closed":""},...P},le=e.modal!==!1?{"data-modal":""}:{},ce={"data-scope":"dialog","data-part":"positioner","data-position":e.position,"data-scroll-behavior":e.scrollBehavior,...o?{"data-open":""}:{"data-closed":""},...P,...le,onPointerDown:ee,onPointerUp:te,ref:z},se={type:"button","data-scope":"dialog","data-part":"trigger","aria-haspopup":"dialog","aria-expanded":o,"aria-controls":u,...o?{"data-popup-open":""}:{},onClick:I},ie={"data-scope":"dialog","data-part":"portal"},ue={"data-scope":"dialog","data-part":"backdrop",...o?{"data-open":""}:{"data-closed":""},onPointerDown:Q,onPointerUp:$,ref:B},de={id:u,role:"dialog","aria-labelledby":u+"_header","data-scope":"dialog","data-part":"popup","data-position":e.position,...o?{"data-open":""}:{"data-closed":""},...P,...e.draggable?{"data-draggable":""}:{},onPointerMove:ae,onPointerUp:oe,ref:D},fe={"data-scope":"dialog","data-part":"header",id:u+"_header",...e.draggable?{style:{cursor:"move"}}:{},onPointerDown:ne},me={"data-scope":"dialog","data-part":"header-actions"},pe={"data-scope":"dialog","data-part":"title"},ge={"data-scope":"dialog","data-part":"maximizable",...d?{"data-maximized":""}:{"data-minimized":""},ref:W,onClick:X},Re={"data-scope":"dialog","data-part":"close",ref:q,onClick:m},be={"data-scope":"dialog","data-part":"content",...P},Ee={"data-scope":"dialog","data-part":"footer"};return{state:{open:o,maximized:d,trapped:!!e.trapped,popupElement:F,positionerElement:f,backdropElement:i},focusTrap:S,setPopupRef:D,setPositionerRef:z,setBackdropRef:B,rootProps:re,positionerProps:ce,triggerProps:se,portalProps:ie,backdropProps:ue,popupProps:de,headerProps:fe,headerActionsProps:me,titleProps:pe,maximizableProps:ge,closeProps:Re,contentProps:be,footerProps:Ee,toggle:I,open:j,close:m,toggleMaximized:X,onOpenComplete:G,onCloseComplete:J}}});export{A as defaultProps,ze as useDialog};
+import{withHeadless as xe}from"@primereact/core/headless";import{useFocusTrap as ke}from"@primereact/headless/focustrap";import{useControlledState as Ce}from"@primereact/hooks/use-controlled-state";import{$dt as F}from"@primeuix/styled";import{blockBodyScroll as Te,focus as ye,toElement as u,unblockBodyScroll as ve}from"@primeuix/utils/dom";import{ZIndex as E}from"@primeuix/utils/zindex";import*as t from"react";var V={open:void 0,defaultOpen:void 0,draggable:!1,modal:!0,dismissable:!0,closeOnEscape:!0,blockScroll:!0,keepInViewport:!0,minX:0,minY:0,trapped:!0,baseZIndex:0,autoZIndex:!0,appendTo:"body",position:"center",fullScreen:!1,scrollBehavior:"inside",onOpenChange:void 0,onExitComplete:void 0};var Be=xe({name:"useDialog",defaultProps:V,setup:({props:e,id:d,$primereact:M})=>{let[o,P]=Ce({value:e.open,defaultValue:e.defaultOpen??!1,onChange:e.onOpenChange}),[f,h]=t.useState(e.fullScreen??!1),[w,K]=t.useState(null),[m,N]=t.useState(null),[s,_]=t.useState(null),i=t.useRef(null),x=t.useRef(null),k=t.useRef(null),L=t.useRef(null),H=t.useRef(null),S=t.useRef(null),R=t.useRef(null),C=t.useRef(null),D=ke({trapped:!!e.trapped&&!!w,autoFocus:!0});t.useEffect(()=>{h(e.fullScreen??!1)},[e.fullScreen]);let z=t.useCallback(n=>{let a=u(n)??null;a!==i.current&&(i.current=a,D.containerRef.current=a,K(a))},[]),I=t.useCallback(n=>{let a=u(n)??null;a!==x.current&&(x.current=a,N(a))},[]),B=t.useCallback(n=>{let a=u(n)??null;a!==k.current&&(k.current=a,_(a))},[]),W=t.useCallback(n=>{let a=u(n)??null;a!==H.current&&(H.current=a)},[]),j=t.useCallback(n=>{let a=u(n)??null;a!==S.current&&(S.current=a)},[]),q=t.useCallback(n=>{L.current=u(n)??null},[]);function X(){P([!o,{originalEvent:void 0,value:!o}])}function G(){P([!0,{originalEvent:void 0,value:!0}])}function p(){P([!1,{originalEvent:void 0,value:!1}])}function Y(){h(n=>!n)}let J=t.useCallback(()=>{},[]),Q=t.useCallback(()=>{e.onExitComplete?.()},[e.onExitComplete]);t.useEffect(()=>{if(o)R.current=document.activeElement;else if(R.current){let n=R.current,a=n.isConnected&&n!==document.body?n:L.current;a&&ye(a,{preventScroll:!0}),R.current=null}},[o]),t.useEffect(()=>{if(!o||!e.closeOnEscape)return;let n=a=>{a.key==="Escape"&&p()};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[o,e.closeOnEscape]);let $=t.useCallback(n=>{C.current=n.target},[]),ee=t.useCallback(()=>{e.dismissable&&k.current===C.current&&p(),C.current=null},[e.dismissable]),T=t.useRef(null),te=t.useCallback(n=>{T.current=n.target},[]),ne=t.useCallback(()=>{e.dismissable&&x.current===T.current&&p(),T.current=null},[e.dismissable]),r=t.useRef({dragging:!1,startX:0,startY:0,dx:0,dy:0}),ae=t.useCallback(n=>{if(!e.draggable||f||e.scrollBehavior==="outside")return;let a=n.target;if(a.closest('[data-part="close"]')||a.closest('[data-part="maximizable"]'))return;let l=i.current;l&&(r.current.dragging=!0,r.current.startX=n.clientX-r.current.dx,r.current.startY=n.clientY-r.current.dy,l.setPointerCapture(n.pointerId),l.setAttribute("data-dragging",""),l.style.setProperty("user-select","none"))},[e.draggable,f]),oe=t.useCallback(n=>{if(!r.current.dragging)return;let a=i.current;if(!a)return;let l=n.clientX-r.current.startX,g=n.clientY-r.current.startY;if(e.keepInViewport){let c=a.getBoundingClientRect(),O=window.innerWidth,Z=window.innerHeight,y=r.current.dx,v=r.current.dy,U=c.left+(l-y),A=c.top+(g-v);U<(e.minX??0)&&(l=y-(c.left-(e.minX??0))),A<(e.minY??0)&&(g=v-(c.top-(e.minY??0))),U+c.width>O&&(l=y+(O-c.left-c.width)),A+c.height>Z&&(g=v+(Z-c.top-c.height))}r.current.dx=l,r.current.dy=g,a.style.setProperty("--px-drag-x",l+"px"),a.style.setProperty("--px-drag-y",g+"px")},[e.keepInViewport,e.minX,e.minY]),re=t.useCallback(()=>{r.current.dragging&&(r.current.dragging=!1,i.current?.removeAttribute("data-dragging"),i.current?.style.removeProperty("user-select"))},[]);t.useEffect(()=>{o||(r.current={dragging:!1,startX:0,startY:0,dx:0,dy:0})},[o]),t.useEffect(()=>{if(!(!o||!e.blockScroll))return Te({variableName:F("scrollbar.width").name}),()=>{ve({variableName:F("scrollbar.width").name})}},[o,e.blockScroll]),t.useEffect(()=>{if(m){if(e.autoZIndex){let n=(e.baseZIndex??0)+(M.config?.zIndex?.modal??1100);s&&E.set("modal",s,n),E.set("modal",m,n)}return()=>{e.autoZIndex&&(s&&E.clear(s),E.clear(m))}}},[m,s,e.autoZIndex,e.baseZIndex,M.config?.zIndex?.modal]);let b=f?{"data-maximized":""}:{},le={id:d,"data-scope":"dialog","data-part":"root",...o?{"data-open":""}:{"data-closed":""},...b},ce=e.modal!==!1?{"data-modal":""}:{},se={"data-scope":"dialog","data-part":"positioner","data-position":e.position,"data-scroll-behavior":e.scrollBehavior,...o?{"data-open":""}:{"data-closed":""},...b,...ce,onPointerDown:te,onPointerUp:ne,ref:I},ie={type:"button","data-scope":"dialog","data-part":"trigger","aria-haspopup":"dialog","aria-expanded":o,"aria-controls":d,...o?{"data-popup-open":""}:{},onClick:X,ref:q},ue={"data-scope":"dialog","data-part":"portal"},de={"data-scope":"dialog","data-part":"backdrop",...o?{"data-open":""}:{"data-closed":""},onPointerDown:$,onPointerUp:ee,ref:B},fe={id:d,role:"dialog","aria-labelledby":d+"_header",tabIndex:-1,"data-scope":"dialog","data-part":"popup","data-position":e.position,...o?{"data-open":""}:{"data-closed":""},...b,...e.draggable?{"data-draggable":""}:{},onPointerMove:oe,onPointerUp:re,ref:z},me={"data-scope":"dialog","data-part":"header",id:d+"_header",...e.draggable?{style:{cursor:"move"}}:{},onPointerDown:ae},pe={"data-scope":"dialog","data-part":"header-actions"},ge={"data-scope":"dialog","data-part":"title"},Re={"data-scope":"dialog","data-part":"maximizable",...f?{"data-maximized":""}:{"data-minimized":""},ref:j,onClick:Y},be={"data-scope":"dialog","data-part":"close",ref:W,onClick:p},Ee={"data-scope":"dialog","data-part":"content",...b},Pe={"data-scope":"dialog","data-part":"footer"};return{state:{open:o,maximized:f,trapped:!!e.trapped,popupElement:w,positionerElement:m,backdropElement:s},focusTrap:D,setPopupRef:z,setPositionerRef:I,setBackdropRef:B,rootProps:le,positionerProps:se,triggerProps:ie,portalProps:ue,backdropProps:de,popupProps:fe,headerProps:me,headerActionsProps:pe,titleProps:ge,maximizableProps:Re,closeProps:be,contentProps:Ee,footerProps:Pe,toggle:X,open:G,close:p,toggleMaximized:Y,onOpenComplete:J,onCloseComplete:Q}}});export{V as defaultProps,Be as useDialog};

package/dialog/useDialog.d.ts

@@ -144,6 +144,7 @@ export declare const useDialog: (inProps?: unknown) => import("@primereact/types
     };
     triggerProps: {
         onClick: () => void;
+        ref: (node: HTMLElement | null) => void;
         'data-popup-open'?: "" | undefined;
         type: "button";
         'data-scope': string;
@@ -181,6 +182,7 @@ export declare const useDialog: (inProps?: unknown) => import("@primereact/types
         id: string | undefined;
         role: "dialog";
         'aria-labelledby': string;
+        tabIndex: -1;
         'data-scope': string;
         'data-part': string;
         'data-position': "center" | "top" | "left" | "right" | "bottom" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;
@@ -194,6 +196,7 @@ export declare const useDialog: (inProps?: unknown) => import("@primereact/types
         id: string | undefined;
         role: "dialog";
         'aria-labelledby': string;
+        tabIndex: -1;
         'data-scope': string;
         'data-part': string;
         'data-position': "center" | "top" | "left" | "right" | "bottom" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;
@@ -207,6 +210,7 @@ export declare const useDialog: (inProps?: unknown) => import("@primereact/types
         id: string | undefined;
         role: "dialog";
         'aria-labelledby': string;
+        tabIndex: -1;
         'data-scope': string;
         'data-part': string;
         'data-position': "center" | "top" | "left" | "right" | "bottom" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;
@@ -220,6 +224,7 @@ export declare const useDialog: (inProps?: unknown) => import("@primereact/types
         id: string | undefined;
         role: "dialog";
         'aria-labelledby': string;
+        tabIndex: -1;
         'data-scope': string;
         'data-part': string;
         'data-position': "center" | "top" | "left" | "right" | "bottom" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;

package/drawer/index.mjs

@@ -1 +1 @@
-import{withHeadless as G}from"@primereact/core/headless";import{useFocusTrap as J}from"@primereact/headless/focustrap";import{useEventListener as v,useUnmountEffect as Q}from"@primereact/hooks";import{useControlledState as W}from"@primereact/hooks/use-controlled-state";import{$dt as y}from"@primeuix/styled";import{blockBodyScroll as X,focus as p,toElement as E,unblockBodyScroll as Y,ZIndex as u}from"@primeuix/utils";import*as n from"react";var x={open:void 0,defaultOpen:void 0,trapped:!0,blockScroll:!1,dismissable:!0,baseZIndex:0,autoZIndex:!0,position:"left",onOpenChange:void 0,onExitComplete:void 0};var se=G({name:"useDrawer",defaultProps:x,setup:({props:t,id:d,elementRef:R,$primereact:b})=>{let[a,k]=W({value:t.open,defaultValue:t.defaultOpen,onChange:t.onOpenChange}),[r,H]=n.useState(null),[l,g]=n.useState(null),s=n.useRef(null),m=n.useRef(null),i=n.useRef(null),M=n.useRef(null),f=n.useRef(null),D={open:!!a,trapped:!!t.trapped,popupElement:r,backdropElement:l},w=J({trapped:!!t.trapped&&!!r,autoFocus:!1});Q(()=>{t.autoZIndex&&s.current&&u.clear(s.current)});let O=n.useCallback(e=>{let o=E(e)??null;o!==s.current&&(s.current=o,w.containerRef.current=o,H(o))},[]),S=n.useCallback(e=>{let o=E(e)??null;o!==m.current&&(m.current=o,g(o))},[]),h=n.useCallback(e=>{let o=E(e)??null;o!==i.current&&(i.current=o)},[]),c=()=>{k([!1,{value:!1}])},C=()=>{let e=!a;k([e,{value:e}])},P=n.useCallback(()=>{if(!s.current)return;let e=s.current.querySelector("[autoFocus]");e?p(e):i.current&&p(i.current)},[]),I=n.useCallback(()=>{t.onExitComplete?.()},[t.onExitComplete]),[Z,B]=v({type:"keydown",listener:e=>N(e)}),[K,U]=v({type:"click",listener:e=>{F(e)&&c()}});n.useEffect(()=>{a?(f.current=document.activeElement,Z(),t.dismissable&&K(),t.blockScroll&&X({variableName:y("scrollbar.width").name})):(B(),U(),t.blockScroll&&Y({variableName:y("scrollbar.width").name}),f.current&&(p(f.current),f.current=null))},[a]),n.useEffect(()=>{if(r){if(t.autoZIndex){let e=(t.baseZIndex??0)+(b.config?.zIndex?.modal??1100);l&&u.set("modal",l,e),u.set("modal",r,e)}return()=>{t.autoZIndex&&(l&&u.clear(l),u.clear(r))}}},[r,l,t.autoZIndex,t.baseZIndex,b.config?.zIndex?.modal]);let F=e=>R.current&&!R.current.contains(e.target),N=e=>{e.code==="Escape"&&c()},L=e=>{M.current=e.target},T=()=>{t.dismissable&&m.current===M.current&&c()},j={id:d,"data-scope":"drawer","data-part":"root",...a?{"data-open":""}:{"data-closed":""},"data-position":t.position},z={"data-scope":"drawer","data-part":"trigger",type:"button","aria-expanded":a??!1,"aria-controls":d??"",onClick:C},q={ref:S,onMouseDown:L,onMouseUp:T},V={"data-scope":"drawer","data-part":"close",type:"button",ref:h,onClick:c},_={id:d+"_header","data-scope":"drawer","data-part":"header"},A={id:d,ref:O,role:"complementary","aria-modal":!0,"data-scope":"drawer","data-part":"root","data-position":t.position,...a&&{"data-open":""}};return{state:D,focusTrap:w,triggerProps:z,rootProps:j,backdropProps:q,closeProps:V,headerProps:_,popupProps:A,close:c,onOpenStateChange:C,onMaskMouseDown:L,onMaskMouseUp:T,onOpenComplete:P,onCloseComplete:I}}});export{x as defaultProps,se as useDrawer};
+import{withHeadless as A}from"@primereact/core/headless";import{useFocusTrap as G}from"@primereact/headless/focustrap";import{useEventListener as T,useUnmountEffect as J}from"@primereact/hooks";import{useControlledState as Q}from"@primereact/hooks/use-controlled-state";import{$dt as v}from"@primeuix/styled";import{blockBodyScroll as W,focus as X,toElement as f,unblockBodyScroll as Y,ZIndex as c}from"@primeuix/utils";import*as n from"react";var L={open:void 0,defaultOpen:void 0,trapped:!0,blockScroll:!1,dismissable:!0,baseZIndex:0,autoZIndex:!0,position:"left",onOpenChange:void 0,onExitComplete:void 0};var le=A({name:"useDrawer",defaultProps:L,setup:({props:t,id:u,elementRef:p,$primereact:E})=>{let[a,R]=Q({value:t.open,defaultValue:t.defaultOpen,onChange:t.onOpenChange}),[r,y]=n.useState(null),[s,H]=n.useState(null),d=n.useRef(null),m=n.useRef(null),b=n.useRef(null),k=n.useRef(null),i=n.useRef(null),D={open:!!a,trapped:!!t.trapped,popupElement:r,backdropElement:s},M=G({trapped:!!t.trapped&&!!r,autoFocus:!0});J(()=>{t.autoZIndex&&d.current&&c.clear(d.current)});let g=n.useCallback(e=>{let o=f(e)??null;o!==d.current&&(d.current=o,M.containerRef.current=o,y(o))},[]),O=n.useCallback(e=>{let o=f(e)??null;o!==m.current&&(m.current=o,H(o))},[]),h=n.useCallback(e=>{let o=f(e)??null;o!==b.current&&(b.current=o)},[]),l=()=>{R([!1,{value:!1}])},w=()=>{let e=!a;R([e,{value:e}])},I=n.useCallback(()=>{},[]),P=n.useCallback(()=>{t.onExitComplete?.()},[t.onExitComplete]),[S,Z]=T({type:"keydown",listener:e=>N(e)}),[B,K]=T({type:"click",listener:e=>{U(e)&&l()}});n.useEffect(()=>{a?(i.current=document.activeElement,S(),t.dismissable&&B(),t.blockScroll&&W({variableName:v("scrollbar.width").name})):(Z(),K(),t.blockScroll&&Y({variableName:v("scrollbar.width").name}),i.current&&(X(i.current),i.current=null))},[a]),n.useEffect(()=>{if(r){if(t.autoZIndex){let e=(t.baseZIndex??0)+(E.config?.zIndex?.modal??1100);s&&c.set("modal",s,e),c.set("modal",r,e)}return()=>{t.autoZIndex&&(s&&c.clear(s),c.clear(r))}}},[r,s,t.autoZIndex,t.baseZIndex,E.config?.zIndex?.modal]);let U=e=>p.current&&!p.current.contains(e.target),N=e=>{e.code==="Escape"&&l()},C=e=>{k.current=e.target},x=()=>{t.dismissable&&m.current===k.current&&l()},j={id:u,"data-scope":"drawer","data-part":"root",...a?{"data-open":""}:{"data-closed":""},"data-position":t.position},z={"data-scope":"drawer","data-part":"trigger",type:"button","aria-expanded":a??!1,"aria-controls":u??"",onClick:w},F={ref:O,onMouseDown:C,onMouseUp:x},V={"data-scope":"drawer","data-part":"close",type:"button",ref:h,onClick:l},_={id:u+"_header","data-scope":"drawer","data-part":"header"},q={id:u,ref:g,role:"complementary","aria-modal":!0,tabIndex:-1,"data-scope":"drawer","data-part":"root","data-position":t.position,...a&&{"data-open":""}};return{state:D,focusTrap:M,triggerProps:z,rootProps:j,backdropProps:F,closeProps:V,headerProps:_,popupProps:q,close:l,onOpenStateChange:w,onMaskMouseDown:C,onMaskMouseUp:x,onOpenComplete:I,onCloseComplete:P}}});export{L as defaultProps,le as useDrawer};

package/drawer/useDrawer.d.ts

@@ -71,6 +71,7 @@ export declare const useDrawer: (inProps?: unknown) => import("@primereact/types
         } | null) => void;
         role: "complementary";
         'aria-modal': true;
+        tabIndex: -1;
         'data-scope': string;
         'data-part': string;
         'data-position': "top" | "left" | "right" | "bottom" | "full" | undefined;

package/focustrap/index.mjs

@@ -1 +1 @@
-import{withHeadless as P}from"@primereact/core/headless";import{focus as i,getFirstFocusableElement as d,getLastFocusableElement as S,isFocusableElement as y,toElement as a}from"@primeuix/utils";import{isNotEmpty as w}from"@primeuix/utils/object";import*as s from"react";var k={trapped:!0,autoFocus:!0,initialFocusRef:void 0,onEscape:void 0,onTabFirst:void 0,onTabLast:void 0};var j=P({name:"useFocusTrap",defaultProps:k,setup:({props:h})=>{let{trapped:c,autoFocus:H,initialFocusRef:p,onEscape:R,onTabFirst:E,onTabLast:b}=h,L=s.useRef(null),F=s.useRef(null),f=s.useRef(null),u=s.useRef(null),T=s.useRef(null),r=e=>`:not([data-focus-guard])${e??""}`,x=s.useCallback(e=>{if(!c)return;if(E){E(e);return}let t=a(u),l=e.relatedTarget,n=a(F);if(!t||!n)return;let o=l===n||!t.contains(l)?d(t,r()):n;o&&i(o)},[c,E]),C=s.useCallback(e=>{if(!c)return;if(b){b(e);return}let t=a(u),l=e.relatedTarget,n=a(L);if(!t||!n)return;let o=l===n||!t.contains(l)?S(t,r()):n;o&&i(o)},[c,b]),M=s.useCallback(()=>{if(!H)return;let e=a(u);if(!e)return;if(p?.current){i(a(p));return}let t=d(e,`[autofocus]${r()}, [data-autofocus]${r()}`);t||(t=d(e,r())),t&&i(t)},[H,p]),m=s.useCallback(e=>{e.key==="Escape"&&R?.(e)},[R]),v=s.useCallback(()=>{let e=a(u);!e||!c||!(e instanceof Element)||(T.current=document.activeElement,e.setAttribute("data-focus-trap",""),e.addEventListener("keydown",m),f.current=new MutationObserver(t=>{for(let l of t)if(l.type==="childList"&&!e.contains(document.activeElement)){let n=l.nextSibling,o=null;for(;n&&!(n instanceof Element&&(y(n)?o=y(n,r(""))?n:d(e,r("")):o=d(n,`[autofocus]${r()}, [data-autofocus]${r()}`),w(o)));)n=n.nextSibling;o&&i(o)}}),f.current.observe(e,{childList:!0}))},[c,m]),g=s.useCallback(()=>{let e=a(u);e&&(e.removeAttribute("data-focus-trap"),e.removeEventListener("keydown",m)),f.current&&(f.current.disconnect(),f.current=null);let t=T.current;t?.isConnected&&i(t,{preventScroll:!0}),T.current=null},[m]);return s.useEffect(()=>{if(!(!c||!a(u)))return v(),M(),()=>g()},[c,v,M,g]),{containerRef:u,firstHiddenElementRef:L,lastHiddenElementRef:F,firstHiddenProps:{role:"presentation","aria-hidden":!0,"data-focus-guard":"",onFocus:x},lastHiddenProps:{role:"presentation","aria-hidden":!0,"data-focus-guard":"",onFocus:C}}}});export{k as defaultProps,j as useFocusTrap};
+import{withHeadless as P}from"@primereact/core/headless";import{focus as f,getFirstFocusableElement as m,getLastFocusableElement as w,isFocusableElement as h,toElement as c}from"@primeuix/utils";import{isNotEmpty as A}from"@primeuix/utils/object";import*as s from"react";var k={trapped:!0,autoFocus:!0,initialFocusRef:void 0,onEscape:void 0,onTabFirst:void 0,onTabLast:void 0};var D=P({name:"useFocusTrap",defaultProps:k,setup:({props:S})=>{let{trapped:l,autoFocus:H,initialFocusRef:b,onEscape:R,onTabFirst:p,onTabLast:E}=S,L=s.useRef(null),F=s.useRef(null),i=s.useRef(null),u=s.useRef(null),T=s.useRef(null),a=e=>`:not([data-focus-guard])${e??""}`,C=s.useCallback(e=>{if(!l)return;if(p){p(e);return}let n=c(u),r=e.relatedTarget,t=c(F);if(!n||!t)return;let o=r===t||!n.contains(r)?m(n,a()):t;o&&f(o)},[l,p]),x=s.useCallback(e=>{if(!l)return;if(E){E(e);return}let n=c(u),r=e.relatedTarget,t=c(L);if(!n||!t)return;let o=r===t||!n.contains(r)?w(n,a()):t;o&&f(o)},[l,E]),M=s.useCallback(()=>{let e=c(u);if(!e)return;let n=document.activeElement;if(!!n&&n!==e&&e.contains(n)&&!n.hasAttribute("data-focus-guard"))return;let t=c(b)??e.querySelector(`[autofocus]${a()},[data-autofocus]${a()}`)??m(e,a())??e;f(t,{preventScroll:!0})},[b]),v=s.useCallback(()=>{H&&M()},[H,M]),d=s.useCallback(e=>{e.key==="Escape"&&R?.(e)},[R]),g=s.useCallback(()=>{let e=c(u);!e||!l||!(e instanceof Element)||(T.current=document.activeElement,e.setAttribute("data-focus-trap",""),e.addEventListener("keydown",d),i.current=new MutationObserver(n=>{for(let r of n)if(r.type==="childList"&&!e.contains(document.activeElement)){let t=r.nextSibling,o=null;for(;t&&!(t instanceof Element&&(h(t)?o=h(t,a(""))?t:m(e,a("")):o=m(t,`[autofocus]${a()}, [data-autofocus]${a()}`),A(o)));)t=t.nextSibling;o&&f(o)}}),i.current.observe(e,{childList:!0}))},[l,d]),y=s.useCallback(()=>{let e=c(u);e&&(e.removeAttribute("data-focus-trap"),e.removeEventListener("keydown",d)),i.current&&(i.current.disconnect(),i.current=null);let n=T.current;n?.isConnected&&f(n,{preventScroll:!0}),T.current=null},[d]);return s.useEffect(()=>{if(!(!l||!c(u)))return g(),v(),()=>y()},[l,g,v,y]),{containerRef:u,firstHiddenElementRef:L,lastHiddenElementRef:F,firstHiddenProps:{role:"presentation","aria-hidden":!0,"data-focus-guard":"",onFocus:C},lastHiddenProps:{role:"presentation","aria-hidden":!0,"data-focus-guard":"",onFocus:x}}}});export{k as defaultProps,D as useFocusTrap};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primereact/headless",
-  "version": "11.0.0-rc.3",
+  "version": "11.0.0-rc.4",
   "author": "PrimeTek Informatics",
   "description": "Headless components for PrimeReact.",
   "homepage": "https://primereact.dev",
@@ -28,11 +28,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@primeui/license-manager": "^1.0.0-rc.3",
-    "@primeuix/styled": "^1.0.0-rc.4",
-    "@primeuix/utils": "^0.8.0-rc.3",
-    "@primereact/core": "11.0.0-rc.3",
-    "@primereact/hooks": "11.0.0-rc.3"
+    "@primeui/license-manager": "^1.0.0-rc.4",
+    "@primeuix/styled": "^1.0.0-rc.5",
+    "@primeuix/utils": "^0.8.0-rc.4",
+    "@primereact/core": "11.0.0-rc.4",
+    "@primereact/hooks": "11.0.0-rc.4"
   },
   "repository": {},
   "type": "module"