@primereact/headless 11.0.0-rc.4 → 11.1.0

package/README.md

@@ -1,35 +1,41 @@
-# PrimeReact Headless
+[![Cover](https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/common.images/npm/primereact-npm.jpg)](https://primereact.dev)
 
-Unstyled, behavior-only React hooks for 80+ components. Each hook handles accessibility, keyboard navigation, focus management, state, and ARIA attributes — with no CSS or visual assumptions attached.
+# @primereact/headless
 
-## What's inside
+Behavior-only React hooks. State, keyboard navigation, focus management, selection logic, overlay positioning and ARIA wiring for the full PrimeReact component set, with no markup and no CSS attached.
 
-Every component has its own hook that returns prop getters and internal state handlers:
+```bash
+npm install @primereact/headless
+```
+
+## Usage
+
+Each hook lives in its own subpath and returns prop getters that are spread onto plain elements. Every getter carries `data-scope` and `data-part` markers for CSS to target, plus whatever event handlers, ARIA attributes and state flags the component needs.
 
 ```tsx
+'use client';
 import { useButton } from '@primereact/headless/button';
 
-const { rootProps, labelProps, iconProps, loadingIconProps } = useButton({
-    label: 'Submit',
-    loading: isPending,
-    onClick: handleSubmit
-});
-
-return (
-    <button {...rootProps}>
-        {loadingIconProps && <span {...loadingIconProps} />}
-        <span {...labelProps} />
-    </button>
-);
+export function MyButton({ children, ...props }) {
+    const { rootProps } = useButton(props);
+
+    return (
+        <button {...rootProps} className="rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-white">
+            {children}
+        </button>
+    );
+}
 ```
 
-Prop getters include `data-scope` / `data-part` attributes so CSS can target elements without class-name coupling. Interaction behavior — keyboard shortcuts, focus trapping, selection logic, virtual scrolling, typeahead — is all handled inside the hook.
+Larger components return one getter per element, along with the state and handlers behind them. `useSelect`, for example, exposes `triggerProps`, `popupProps`, `listProps` and `indicatorProps` next to `rootProps`.
 
-## Available hooks
+The application is wrapped once with `PrimeReactProvider` from `@primereact/core`. No theme or preset is needed.
 
-Covers the full PrimeReact component set: `useButton`, `useAccordion`, `useAutocomplete`, `useSelect`, `useDatePicker`, `useDataTable`, `useDialog`, `useTree`, `useListbox`, `useCarousel`, `useTabView`, `useSteps`, and more.
+## Documentation
 
-Each hook lives in its own subpath (`@primereact/headless/button`, `@primereact/headless/datatable`) so only the hooks in use are included in the bundle.
+- [Installation](https://primereact.dev/docs/headless/guides/installation)
+- [Hooks](https://primereact.dev/docs/headless/components/autocomplete)
+- [MCP server](https://www.npmjs.com/package/@primereact/mcp)
 
 ## License
 

package/dialog/index.mjs

@@ -1 +1 @@
-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};
+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{useEscapeListener as Te}from"@primereact/hooks/use-escape-listener";import{$dt as F}from"@primeuix/styled";import{blockBodyScroll as Me,focus as he,toElement as d,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 Ye=xe({name:"useDialog",defaultProps:V,setup:({props:e,id:s,$primereact:v})=>{let[o,P]=Ce({value:e.open,defaultValue:e.defaultOpen??!1,onChange:e.onOpenChange}),[f,y]=t.useState(e.fullScreen??!1),[H,N]=t.useState(null),[m,_]=t.useState(null),[i,W]=t.useState(null),u=t.useRef(null),x=t.useRef(null),k=t.useRef(null),L=t.useRef(null),w=t.useRef(null),S=t.useRef(null),R=t.useRef(null),C=t.useRef(null),D=ke({trapped:!!e.trapped&&!!H,autoFocus:!0});t.useEffect(()=>{y(e.fullScreen??!1)},[e.fullScreen]);let z=t.useCallback(n=>{let a=d(n)??null;a!==u.current&&(u.current=a,D.containerRef.current=a,N(a))},[]),I=t.useCallback(n=>{let a=d(n)??null;a!==x.current&&(x.current=a,_(a))},[]),B=t.useCallback(n=>{let a=d(n)??null;a!==k.current&&(k.current=a,W(a))},[]),j=t.useCallback(n=>{let a=d(n)??null;a!==w.current&&(w.current=a)},[]),q=t.useCallback(n=>{let a=d(n)??null;a!==S.current&&(S.current=a)},[]),G=t.useCallback(n=>{L.current=d(n)??null},[]);function X(){P([!o,{originalEvent:void 0,value:!o}])}function J(){P([!0,{originalEvent:void 0,value:!0}])}function p(){P([!1,{originalEvent:void 0,value:!1}])}function Y(){y(n=>!n)}let K=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&&he(a,{preventScroll:!0}),R.current=null}},[o]),Te({id:s,open:o,closeOnEscape:e.closeOnEscape,onEscape:()=>p()});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=u.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=u.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,M=r.current.dx,h=r.current.dy,U=c.left+(l-M),A=c.top+(g-h);U<(e.minX??0)&&(l=M-(c.left-(e.minX??0))),A<(e.minY??0)&&(g=h-(c.top-(e.minY??0))),U+c.width>O&&(l=M+(O-c.left-c.width)),A+c.height>Z&&(g=h+(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,u.current?.removeAttribute("data-dragging"),u.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 Me({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)+(v.config?.zIndex?.modal??1100);i&&E.set("modal",i,n),E.set("modal",m,n)}return()=>{e.autoZIndex&&(i&&E.clear(i),E.clear(m))}}},[m,i,e.autoZIndex,e.baseZIndex,v.config?.zIndex?.modal]);let b=f?{"data-maximized":""}:{},le={id:s,"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":s,...o?{"data-popup-open":""}:{},onClick:X,ref:G},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:s,role:"dialog","aria-labelledby":s+"_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:s+"_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:q,onClick:Y},be={"data-scope":"dialog","data-part":"close",ref:j,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:H,positionerElement:m,backdropElement:i},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:J,close:p,toggleMaximized:Y,onOpenComplete:K,onCloseComplete:Q}}});export{V as defaultProps,Ye as useDialog};

package/dialog/useDialog.d.ts

@@ -62,7 +62,7 @@ export declare const useDialog: (inProps?: unknown) => import("@primereact/types
         'data-open': "";
         'data-scope': string;
         'data-part': string;
-        'data-position': "center" | "top" | "left" | "right" | "bottom" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;
+        'data-position': "center" | "top" | "left" | "bottom" | "right" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;
         'data-scroll-behavior': "inside" | "outside" | undefined;
     } | {
         onPointerDown: (event: React.PointerEvent) => void;
@@ -73,7 +73,7 @@ export declare const useDialog: (inProps?: unknown) => import("@primereact/types
         'data-open': "";
         'data-scope': string;
         'data-part': string;
-        'data-position': "center" | "top" | "left" | "right" | "bottom" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;
+        'data-position': "center" | "top" | "left" | "bottom" | "right" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;
         'data-scroll-behavior': "inside" | "outside" | undefined;
     } | {
         onPointerDown: (event: React.PointerEvent) => void;
@@ -84,7 +84,7 @@ export declare const useDialog: (inProps?: unknown) => import("@primereact/types
         'data-open': "";
         'data-scope': string;
         'data-part': string;
-        'data-position': "center" | "top" | "left" | "right" | "bottom" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;
+        'data-position': "center" | "top" | "left" | "bottom" | "right" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;
         'data-scroll-behavior': "inside" | "outside" | undefined;
     } | {
         onPointerDown: (event: React.PointerEvent) => void;
@@ -95,7 +95,7 @@ export declare const useDialog: (inProps?: unknown) => import("@primereact/types
         'data-open': "";
         'data-scope': string;
         'data-part': string;
-        'data-position': "center" | "top" | "left" | "right" | "bottom" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;
+        'data-position': "center" | "top" | "left" | "bottom" | "right" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;
         'data-scroll-behavior': "inside" | "outside" | undefined;
     } | {
         onPointerDown: (event: React.PointerEvent) => void;
@@ -106,7 +106,7 @@ export declare const useDialog: (inProps?: unknown) => import("@primereact/types
         'data-closed': "";
         'data-scope': string;
         'data-part': string;
-        'data-position': "center" | "top" | "left" | "right" | "bottom" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;
+        'data-position': "center" | "top" | "left" | "bottom" | "right" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;
         'data-scroll-behavior': "inside" | "outside" | undefined;
     } | {
         onPointerDown: (event: React.PointerEvent) => void;
@@ -117,7 +117,7 @@ export declare const useDialog: (inProps?: unknown) => import("@primereact/types
         'data-closed': "";
         'data-scope': string;
         'data-part': string;
-        'data-position': "center" | "top" | "left" | "right" | "bottom" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;
+        'data-position': "center" | "top" | "left" | "bottom" | "right" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;
         'data-scroll-behavior': "inside" | "outside" | undefined;
     } | {
         onPointerDown: (event: React.PointerEvent) => void;
@@ -128,7 +128,7 @@ export declare const useDialog: (inProps?: unknown) => import("@primereact/types
         'data-closed': "";
         'data-scope': string;
         'data-part': string;
-        'data-position': "center" | "top" | "left" | "right" | "bottom" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;
+        'data-position': "center" | "top" | "left" | "bottom" | "right" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;
         'data-scroll-behavior': "inside" | "outside" | undefined;
     } | {
         onPointerDown: (event: React.PointerEvent) => void;
@@ -139,7 +139,7 @@ export declare const useDialog: (inProps?: unknown) => import("@primereact/types
         'data-closed': "";
         'data-scope': string;
         'data-part': string;
-        'data-position': "center" | "top" | "left" | "right" | "bottom" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;
+        'data-position': "center" | "top" | "left" | "bottom" | "right" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;
         'data-scroll-behavior': "inside" | "outside" | undefined;
     };
     triggerProps: {
@@ -185,7 +185,7 @@ export declare const useDialog: (inProps?: unknown) => import("@primereact/types
         tabIndex: -1;
         'data-scope': string;
         'data-part': string;
-        'data-position': "center" | "top" | "left" | "right" | "bottom" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;
+        'data-position': "center" | "top" | "left" | "bottom" | "right" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;
     } | {
         onPointerMove: (event: React.PointerEvent) => void;
         onPointerUp: () => void;
@@ -199,7 +199,7 @@ export declare const useDialog: (inProps?: unknown) => import("@primereact/types
         tabIndex: -1;
         'data-scope': string;
         'data-part': string;
-        'data-position': "center" | "top" | "left" | "right" | "bottom" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;
+        'data-position': "center" | "top" | "left" | "bottom" | "right" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;
     } | {
         onPointerMove: (event: React.PointerEvent) => void;
         onPointerUp: () => void;
@@ -213,7 +213,7 @@ export declare const useDialog: (inProps?: unknown) => import("@primereact/types
         tabIndex: -1;
         'data-scope': string;
         'data-part': string;
-        'data-position': "center" | "top" | "left" | "right" | "bottom" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;
+        'data-position': "center" | "top" | "left" | "bottom" | "right" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;
     } | {
         onPointerMove: (event: React.PointerEvent) => void;
         onPointerUp: () => void;
@@ -227,7 +227,7 @@ export declare const useDialog: (inProps?: unknown) => import("@primereact/types
         tabIndex: -1;
         'data-scope': string;
         'data-part': string;
-        'data-position': "center" | "top" | "left" | "right" | "bottom" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;
+        'data-position': "center" | "top" | "left" | "bottom" | "right" | "topleft" | "topright" | "bottomleft" | "bottomright" | undefined;
     };
     headerProps: {
         onPointerDown: (event: React.PointerEvent) => void;

package/divider/useDivider.d.ts

@@ -5,7 +5,7 @@ export declare const useDivider: (inProps?: unknown) => import("@primereact/type
         role: "separator";
         'aria-orientation': "horizontal" | "vertical" | undefined;
         'data-orientation': "horizontal" | "vertical" | undefined;
-        'data-align': "center" | "top" | "left" | "right" | "bottom" | undefined;
+        'data-align': "center" | "top" | "left" | "bottom" | "right" | undefined;
     };
     contentProps: {
         'data-scope': string;

package/drawer/useDrawer.d.ts

@@ -32,13 +32,13 @@ export declare const useDrawer: (inProps?: unknown) => import("@primereact/types
         onClick: () => void;
     };
     rootProps: {
-        'data-position': "top" | "left" | "right" | "bottom" | "full" | undefined;
+        'data-position': "top" | "left" | "bottom" | "right" | "full" | undefined;
         'data-open': "";
         id: string | undefined;
         'data-scope': string;
         'data-part': string;
     } | {
-        'data-position': "top" | "left" | "right" | "bottom" | "full" | undefined;
+        'data-position': "top" | "left" | "bottom" | "right" | "full" | undefined;
         'data-closed': "";
         id: string | undefined;
         'data-scope': string;
@@ -74,7 +74,7 @@ export declare const useDrawer: (inProps?: unknown) => import("@primereact/types
         tabIndex: -1;
         'data-scope': string;
         'data-part': string;
-        'data-position': "top" | "left" | "right" | "bottom" | "full" | undefined;
+        'data-position': "top" | "left" | "bottom" | "right" | "full" | undefined;
     };
     close: () => void;
     onOpenStateChange: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primereact/headless",
-  "version": "11.0.0-rc.4",
+  "version": "11.1.0",
   "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.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"
+    "@primeui/license-manager": "^1.0.0",
+    "@primeuix/styled": "^1.0.0",
+    "@primeuix/utils": "^0.8.0",
+    "@primereact/core": "11.1.0",
+    "@primereact/hooks": "11.1.0"
   },
   "repository": {},
   "type": "module"

package/popover/index.mjs

@@ -1 +1 @@
-import{withHeadless as ee}from"@primereact/core/headless";import{OverlayEventBus as x}from"@primereact/core/utils";import{useFocusTrap as te}from"@primereact/headless/focustrap";import{useControlledState as ne}from"@primereact/hooks/use-controlled-state";import{useEventListener as D}from"@primereact/hooks/use-event-listener";import{focus as C,getFirstFocusableElement as re,toElement as p}from"@primeuix/utils/dom";import*as n from"react";var w={anchor:void 0,defaultOpen:void 0,open:void 0,trapped:!1,autoFocus:!0,closeOnEscape:!0,onOpenChange:void 0,onExitComplete:void 0};var de=ee({name:"usePopover",defaultProps:w,setup:({props:r})=>{let[o,A,L]=ne({value:r.open,defaultValue:r.defaultOpen,onChange:r.onOpenChange}),[U,T]=n.useState(!!o),[B,d]=n.useState(r.anchor??null),[I,K]=n.useState(null),[h,V]=n.useState(null),[j,q]=n.useState(null),z={open:o,rendered:U,trapped:!!r.trapped,anchorElement:B,positionerElement:I,popupElement:h,arrowElement:j},c=n.useRef(null),a=n.useRef(null),u=n.useRef(null),m=n.useRef(null),b=n.useRef(null),k=te({trapped:!!r.trapped&&!!h,autoFocus:!1}),M=n.useCallback(t=>{let e=p(t)??null;!e||e===c.current||(c.current=e,d(e||a.current))},[]),G=n.useCallback(t=>{let e=p(t)??null;if(e!==a.current){if(a.current=e,!e){c.current&&!c.current.isConnected&&(c.current=null,d(null));return}c.current||(c.current=e,d(e))}},[]),H=n.useCallback(t=>{let e=p(t)??null;e!==u.current&&(u.current=e,K(e))},[]),P=n.useCallback(t=>{let e=p(t)??null;e!==m.current&&(m.current=e,k.containerRef.current=e,V(e))},[]),g=n.useCallback(t=>{let e=p(t)??null;e!==b.current&&(b.current=e,q(e))},[]),E=n.useRef(!1);function i(t,e){A([t,{originalEvent:e,value:t}])}let R=t=>{if(E.current)return;let e=t.relatedTarget;!e||u.current?.contains(e)||c.current?.contains(e)||a.current?.contains(e)||i(!1,t)},J=t=>{i(!o,t.nativeEvent)},Q=t=>{i(!1,t.nativeEvent)},W=n.useCallback(()=>{if(r.autoFocus===!1)return;let t=m.current;if(!t)return;let e=document.activeElement,l=c.current||a.current;if(e&&l?.contains(e)&&l!==e)return;E.current=!0;let s=re(t);s?C(s,{preventScroll:!0}):C(t,{preventScroll:!0}),E.current=!1},[r.autoFocus]),X=n.useCallback(()=>{r.onExitComplete?.()},[r.onExitComplete]),v=n.useRef(!1),[F,y]=D({type:"pointerdown",listener:t=>{let e=t.target;if(!e||!document.documentElement.contains(e)||t.button===2)return;if(v.current){v.current=!1;return}let l=u.current,s=c.current,f=a.current;o&&l&&!l.contains(e)&&(!s||!s.contains(e))&&(!f||!f.contains(e))&&i(!1,t)}});n.useEffect(()=>{if(!o)return;let t=e=>{let l=e?.target??null;if(!l)return;let s=u.current,f=c.current,S=a.current;(s&&s.contains(l)||f&&f.contains(l)||S&&S.contains(l))&&(v.current=!0)};return x.on("overlay-click",t),()=>{x.off("overlay-click",t)}},[o]);let[O,N]=D({type:"keydown",listener:t=>{t.key==="Escape"&&(i(!1,t),C(c.current||a.current,{preventScroll:!0}))}});n.useEffect(()=>{r.anchor!==void 0&&(c.current=r.anchor,d(r.anchor))},[r.anchor]),n.useEffect(()=>{o&&T(!0)},[o]),n.useEffect(()=>{o?(F(),r.closeOnEscape&&O()):(y(),N())},[o,r.closeOnEscape,F,y,O,N]),n.useEffect(()=>{let t=u.current;if(!(!o||!t||r.trapped||L))return t.addEventListener("focusout",R),()=>{t.removeEventListener("focusout",R)}},[o,r.trapped,L,R]);let Y={"data-scope":"popover","data-part":"trigger",ref:M,onClick:J,...o?{"data-positioner-open":""}:{}},Z={"data-scope":"popover","data-part":"positioner",ref:H},_={"data-scope":"popover","data-part":"arrow",ref:g},$={"data-scope":"popover","data-part":"popup",ref:P,tabIndex:-1,...o?{"data-open":""}:{}};return{state:z,focusTrap:k,setArrowRef:g,setAnchorRef:M,setAnchorFallbackRef:G,setPopupRef:P,setPositionerRef:H,triggerProps:Y,popupProps:$,closeProps:{"data-scope":"popover","data-part":"close",type:"button",onClick:Q},positionerProps:Z,arrowProps:_,setOpen:i,setRendered:T,onOpenComplete:W,onCloseComplete:X}}});export{w as defaultProps,de as usePopover};
+import{withHeadless as X}from"@primereact/core/headless";import{OVERLAY_OWNER_ATTR as Z,OVERLAY_OWNER_KEY as ee,OverlayEventBus as F,setOverlayOwner as S}from"@primereact/core/utils";import{useFocusTrap as te}from"@primereact/headless/focustrap";import{useControlledState as ne}from"@primereact/hooks/use-controlled-state";import{useEscapeListener as re}from"@primereact/hooks/use-escape-listener";import{useEventListener as oe}from"@primereact/hooks/use-event-listener";import{focus as L,getFirstFocusableElement as le,toElement as f}from"@primeuix/utils/dom";import*as n from"react";var N={anchor:void 0,defaultOpen:void 0,open:void 0,trapped:!1,autoFocus:!0,closeOnEscape:!0,onOpenChange:void 0,onExitComplete:void 0};var Re=X({name:"usePopover",defaultProps:N,setup:({props:r,id:x})=>{let[o,A,O]=ne({value:r.open,defaultValue:r.defaultOpen,onChange:r.onOpenChange}),[D,h]=n.useState(!!o),[d,p]=n.useState(r.anchor??null),[_,V]=n.useState(null),[m,Y]=n.useState(null),[U,W]=n.useState(null),B={open:o,rendered:D,trapped:!!r.trapped,anchorElement:d,positionerElement:_,popupElement:m,arrowElement:U},l=n.useRef(null),u=n.useRef(null),a=n.useRef(null),E=n.useRef(null),M=n.useRef(null),k=te({trapped:!!r.trapped&&!!m,autoFocus:!1}),H=n.useCallback(e=>{let t=f(e)??null;!t||t===l.current||(l.current=t,p(t||u.current))},[]),I=n.useCallback(e=>{let t=f(e)??null;if(t!==u.current){if(u.current=t,!t){l.current&&!l.current.isConnected&&(l.current=null,p(null));return}l.current||(l.current=t,p(t))}},[]),P=n.useCallback(e=>{let t=f(e)??null;t!==a.current&&(a.current=t,V(t))},[]),b=n.useCallback(e=>{let t=f(e)??null;t!==E.current&&(E.current=t,k.containerRef.current=t,Y(t))},[]),g=n.useCallback(e=>{let t=f(e)??null;t!==M.current&&(M.current=t,W(t))},[]),R=n.useRef(!1);function i(e,t){A([e,{originalEvent:t,value:e}])}let v=e=>{if(!e)return!1;if(a.current?.contains(e)||l.current?.contains(e)||u.current?.contains(e))return!0;let t=e.nodeType===1?e:e.parentElement;for(;t;){let c=t.closest(`[${Z}]`)?.[ee];if(!c?.isConnected)return!1;if(a.current?.contains(c)||l.current?.contains(c)||u.current?.contains(c))return!0;t=c}return!1},C=e=>{if(R.current)return;let t=e.relatedTarget;!t||v(t)||i(!1,e)},K=e=>{i(!o,e.nativeEvent)},$=e=>{i(!1,e.nativeEvent)},j=n.useCallback(()=>{if(r.autoFocus===!1)return;let e=E.current;if(!e)return;let t=document.activeElement,s=l.current||u.current;if(t&&s?.contains(t)&&s!==t)return;R.current=!0;let c=le(e);c?L(c,{preventScroll:!0}):L(e,{preventScroll:!0}),R.current=!1},[r.autoFocus]),q=n.useCallback(()=>{r.onExitComplete?.()},[r.onExitComplete]),T=n.useRef(!1),[w,y]=oe({type:"pointerdown",listener:e=>{let t=e.target;if(!t||!document.documentElement.contains(t)||e.button===2)return;let s=T.current;T.current=!1,!s&&o&&a.current&&!v(t)&&i(!1,e)}});n.useEffect(()=>{if(!o)return;let e=t=>{let s=t?.target??null;v(s)&&(T.current=!0)};return F.on("overlay-click",e),()=>{F.off("overlay-click",e)}},[o]),re({id:x,open:o,closeOnEscape:r.closeOnEscape,onEscape:e=>{i(!1,e),L(l.current||u.current,{preventScroll:!0})}}),n.useEffect(()=>{r.anchor!==void 0&&(l.current=r.anchor,p(r.anchor))},[r.anchor]),n.useEffect(()=>{o&&h(!0)},[o]),n.useEffect(()=>{let e=m;if(e)return S(e,d),()=>{S(e,null)}},[m,d]),n.useEffect(()=>{o?w():y()},[o,w,y]),n.useEffect(()=>{let e=a.current;if(!(!o||!e||r.trapped||O))return e.addEventListener("focusout",C),()=>{e.removeEventListener("focusout",C)}},[o,r.trapped,O,C]);let z={"data-scope":"popover","data-part":"trigger",ref:H,onClick:K,...o?{"data-positioner-open":""}:{}},G={"data-scope":"popover","data-part":"positioner",ref:P},J={"data-scope":"popover","data-part":"arrow",ref:g},Q={"data-scope":"popover","data-part":"popup",ref:b,tabIndex:-1,...o?{"data-open":""}:{}};return{state:B,focusTrap:k,setArrowRef:g,setAnchorRef:H,setAnchorFallbackRef:I,setPopupRef:b,setPositionerRef:P,triggerProps:z,popupProps:Q,closeProps:{"data-scope":"popover","data-part":"close",type:"button",onClick:$},positionerProps:G,arrowProps:J,setOpen:i,setRendered:h,onOpenComplete:j,onCloseComplete:q}}});export{N as defaultProps,Re as usePopover};

package/sidebar/index.mjs

@@ -1 +1 @@
-import{withHeadless as B}from"@primereact/core/headless";import{$t as F}from"@primereact/core/locale";import{useFocusTrap as N}from"@primereact/headless/focustrap";import{useControlledState as W}from"@primereact/hooks/use-controlled-state";import{$dt as S}from"@primeuix/styled";import{blockBodyScroll as $,unblockBodyScroll as z}from"@primeuix/utils";import*as s from"react";var R={layout:void 0,id:void 0,side:"left",variant:"sidebar",collapsible:"icon",overlay:!1,open:void 0,defaultOpen:!0,onOpenChange:void 0,openOnHover:!1,hoverOpenDelay:50,hoverCloseDelay:100,closeOnEscape:!0,dismissable:!0,hideOnOutsideClick:!0,width:"16rem",iconWidth:"3rem"};var ee=B({name:"useSidebar",defaultProps:R,setup({props:e}){let[n,d]=W({value:e.open,defaultValue:e.defaultOpen??!0,onChange:e.onOpenChange}),t=n?"expanded":"collapsed",r=!!e.overlay&&!!n,f=s.useRef(null),v=N({trapped:r,autoFocus:!1}),h=s.useCallback(i=>{f.current=i,v.containerRef.current=i},[]),O={open:!!n,displayState:t},m=i=>{e.collapsible!=="none"&&d([!n,{originalEvent:i,value:!n}])},g=i=>{d([!0,{originalEvent:i,value:!0}])},y=i=>{e.collapsible!=="none"&&d([!1,{originalEvent:i,value:!1}])},a=s.useRef(null),l=()=>{a.current&&(clearTimeout(a.current),a.current=null)},o=s.useCallback(i=>{e.openOnHover&&(l(),a.current=setTimeout(()=>g(i),e.hoverOpenDelay??50))},[e.openOnHover,e.hoverOpenDelay]),b=s.useCallback(i=>{e.openOnHover&&(l(),a.current=setTimeout(()=>y(i),e.hoverCloseDelay??100))},[e.openOnHover,e.hoverCloseDelay]);s.useEffect(()=>l,[]),s.useEffect(()=>{if(r)return $({variableName:S("scrollbar.width").name}),()=>z({variableName:S("scrollbar.width").name})},[r]);let p=i=>{r&&i.code==="Escape"&&e.closeOnEscape!==!1&&y(i)},u=e.layout?.setSidebar;s.useEffect(()=>{if(!(!u||!e.id))return()=>u(e.id,null)},[u,e.id]),s.useEffect(()=>{!u||!e.id||u(e.id,{toggle:m,collapse:y,open:!!n,state:n?"expanded":"collapsed",overlay:!!e.overlay,hideOnOutsideClick:e.hideOnOutsideClick!==!1})},[u,e.id,n,e.overlay,e.hideOnOutsideClick]);let P=F("aria.toggleSidebar"),E={ref:h,...e.id?{id:e.id}:void 0,"data-scope":"sidebar","data-part":"root","data-state":t,"data-collapsible":t==="collapsed"?e.collapsible:"","data-collapsible-mode":e.collapsible,"data-variant":e.variant,"data-side":e.side,...e.overlay?{"data-overlay":""}:void 0,...e.overlay?{role:"dialog","aria-modal":!!n||void 0}:void 0,onKeyDown:p,...e.openOnHover?{onPointerEnter:o,onPointerLeave:b}:void 0,style:{"--px-sidebar-width":e.width,"--px-sidebar-width-icon":e.iconWidth}},x={"data-scope":"sidebar","data-part":"spacer","data-state":t,"data-collapsible":t==="collapsed"?e.collapsible:"","data-variant":e.variant,"data-side":e.side,...e.overlay?{"data-overlay":""}:void 0},M={"data-scope":"sidebar","data-part":"aside","data-state":t,"data-collapsible":t==="collapsed"?e.collapsible:"","data-variant":e.variant,"data-side":e.side,...e.overlay?{"data-overlay":""}:void 0},H={"data-scope":"sidebar","data-part":"panel","data-state":t,"data-collapsible":t==="collapsed"?e.collapsible:"","data-variant":e.variant,"data-side":e.side,...e.overlay?{"data-overlay":""}:void 0},w={"data-scope":"sidebar","data-part":"content","data-state":t,"data-collapsible":t==="collapsed"?e.collapsible:"","data-variant":e.variant,"data-side":e.side,...e.overlay?{"data-overlay":""}:void 0},T={"data-scope":"sidebar","data-part":"header","data-state":t,"data-collapsible":t==="collapsed"?e.collapsible:"","data-variant":e.variant,"data-side":e.side,...e.overlay?{"data-overlay":""}:void 0},L={"data-scope":"sidebar","data-part":"footer","data-state":t,"data-collapsible":t==="collapsed"?e.collapsible:"","data-variant":e.variant,"data-side":e.side,...e.overlay?{"data-overlay":""}:void 0},D={"data-scope":"sidebar","data-part":"trigger","data-state":t,"data-collapsible":t==="collapsed"?e.collapsible:"","data-variant":e.variant,"data-side":e.side,"aria-expanded":!!n,...e.id?{"aria-controls":e.id}:void 0,onClick:m,...e.overlay?{"data-overlay":""}:void 0},I={"data-scope":"sidebar","data-part":"rail","aria-label":P,onClick:m,title:P,"data-state":t,"data-collapsible":t==="collapsed"?e.collapsible:"","data-variant":e.variant,"data-side":e.side,...e.overlay?{"data-overlay":""}:void 0},U={"data-scope":"sidebar","data-part":"main","data-state":t,"data-collapsible":t==="collapsed"?e.collapsible:"","data-variant":e.variant,"data-side":e.side,...e.overlay?{"data-overlay":""}:void 0},K={"data-scope":"sidebar","data-part":"backdrop",...e.dismissable?{onClick:y}:{}};return{state:O,focusTrap:v,isModal:r,toggle:m,expand:g,collapse:y,rootProps:E,spacerProps:x,asideProps:M,panelProps:H,contentProps:w,headerProps:T,footerProps:L,triggerProps:D,railProps:I,mainProps:U,backdropProps:K,variant:e.variant,collapsible:e.collapsible,side:e.side,overlay:e.overlay,openOnHover:e.openOnHover}}});import{withHeadless as V}from"@primereact/core/headless";import*as c from"react";var C={};var le=V({name:"useSidebarLayout",defaultProps:C,setup(){let[e,n]=c.useState(()=>new Map),d=c.useCallback((a,l)=>{n(o=>{if(l===null){if(!o.has(a))return o;let u=new Map(o);return u.delete(a),u}let b=o.get(a);if(b&&b.open===l.open&&b.state===l.state&&b.overlay===l.overlay&&b.hideOnOutsideClick===l.hideOnOutsideClick)return o;let p=new Map(o);return p.set(a,l),p})},[]),t=c.useCallback((a,l)=>{if(a){e.get(a)?.toggle(l);return}e.size===1&&e.values().next().value?.toggle(l)},[e]),r=c.useCallback((a,l)=>{if(a){let o=e.get(a);o?.open&&o.toggle(l);return}e.forEach(o=>{o.open&&o.toggle(l)})},[e]),f=c.useMemo(()=>{for(let a of e.values())if(a.open)return!0;return!1},[e]),v=c.useMemo(()=>{for(let a of e.values())if(a.open&&a.overlay&&a.hideOnOutsideClick)return!0;return!1},[e]),h=c.useMemo(()=>{for(let a of e.values())if(a.open&&a.overlay)return!0;return!1},[e]),m={...v?{onClick:a=>{a.target?.closest('[data-scope="sidebar"][data-part="trigger"]')||e.forEach(o=>{o.open&&o.overlay&&o.hideOnOutsideClick&&o.collapse(a)})}}:void 0,...h?{inert:!0,"aria-hidden":!0}:void 0};return{state:{open:f},setSidebar:d,toggle:t,collapse:r,backdropProps:{"data-scope":"sidebar","data-part":"backdrop",onClick:()=>r(),"data-state":f?"open":"closed"},backdropMotionProps:{visible:f},mainProps:m}}});import{withHeadless as j}from"@primereact/core/headless";import{useCollapsible as q}from"@primereact/headless/collapsible";var k={collapsible:!1,open:void 0,defaultOpen:!0,disabled:!1,onOpenChange:void 0};var ue=j({name:"useSidebarMenuItem",defaultProps:k,setup({props:e}){let n=!!e.collapsible,d=q({open:n?e.open:void 0,defaultOpen:n?e.defaultOpen??!0:!0,onOpenChange:n?e.onOpenChange:void 0,disabled:e.disabled}),t={isCollapsible:n,open:d.state.open},r=n?d.triggerProps:{},f=n?d.contentProps:{},v=n?{...d.rootProps,"data-collapsible":!0}:{};return{state:t,toggle:d.toggle,triggerProps:r,contentProps:f,rootProps:v}}});export{C as defaultLayoutProps,k as defaultMenuItemProps,R as defaultProps,ee as useSidebar,le as useSidebarLayout,ue as useSidebarMenuItem};
+import{withHeadless as J}from"@primereact/core/headless";import{$t as Q}from"@primereact/core/locale";import{useFocusTrap as X}from"@primereact/headless/focustrap";import{useControlledState as Z}from"@primereact/hooks/use-controlled-state";import{$dt as S}from"@primeuix/styled";import{blockBodyScroll as ee,focus as te,unblockBodyScroll as ae}from"@primeuix/utils";import*as u from"react";var R={layout:void 0,id:void 0,side:"left",variant:"sidebar",collapsible:"icon",overlay:!1,open:void 0,defaultOpen:!0,onOpenChange:void 0,openOnHover:!1,hoverOpenDelay:50,hoverCloseDelay:100,closeOnEscape:!0,dismissable:!0,hideOnOutsideClick:!0,width:"16rem",iconWidth:"3rem"};var O="[data-menu-item]",ne=e=>e.hasAttribute("disabled")||e.getAttribute("aria-disabled")==="true",k=e=>e.hasAttribute("data-content-open")||e.hasAttribute("data-content-closed"),C=e=>e.hasAttribute("data-content-open"),oe=(e,a)=>{let n=e;for(;n&&n!==a;){if(n.getAttribute("aria-hidden")==="true")return!1;let{display:t,visibility:r}=getComputedStyle(n);if(t==="none"||r==="hidden")return!1;n=n.parentElement}return!0},E=(e,a)=>{let n=0,t=e.parentElement;for(;t&&a.contains(t);)t.tagName==="UL"&&n++,t=t.parentElement;return n},re=e=>Array.from(e.querySelectorAll(O)).filter(a=>!ne(a)&&oe(a,e)),se=(e,a)=>{te(a,{preventScroll:!0}),le(a,e)},le=(e,a)=>{let n=e.parentElement;for(;n&&n!==a;){let t=getComputedStyle(n);if(/(auto|scroll|overlay)/.test(t.overflowY)&&n.scrollHeight>n.clientHeight){let i=e.getBoundingClientRect(),d=n.getBoundingClientRect();i.top<d.top?n.scrollTop-=d.top-i.top:i.bottom>d.bottom&&(n.scrollTop+=i.bottom-d.bottom);return}n=n.parentElement}},ie=e=>{let a=e.currentTarget,n=e.target;if(!a||!n?.closest)return;let t=n.closest(O);if(!t||!a.contains(t)||t.hasAttribute("aria-haspopup"))return;let r=re(a),i=r.indexOf(t);if(i===-1)return;let d=b=>{!b||b===t||(e.preventDefault(),se(a,b))};switch(e.code){case"ArrowDown":d(r[i+1]);break;case"ArrowUp":d(r[i-1]);break;case"Home":d(r[0]);break;case"End":d(r[r.length-1]);break;case"ArrowRight":{if(!k(t))break;if(!C(t))e.preventDefault(),t.click();else{let b=r[i+1];b&&E(b,a)>E(t,a)&&d(b)}break}case"ArrowLeft":{if(k(t)&&C(t)){e.preventDefault(),t.click();break}let b=E(t,a)-1;for(let p=i-1;b>=1&&p>=0;p--)if(E(r[p],a)===b){d(r[p]);break}break}default:break}},Se=J({name:"useSidebar",defaultProps:R,setup({props:e}){let[a,n]=Z({value:e.open,defaultValue:e.defaultOpen??!0,onChange:e.onOpenChange}),t=a?"expanded":"collapsed",r=!!e.overlay&&!!a,i=u.useRef(null),d=X({trapped:r,autoFocus:!1}),b=u.useCallback(s=>{i.current=s,d.containerRef.current=s},[]),p={open:!!a,displayState:t},g=s=>{e.collapsible!=="none"&&n([!a,{originalEvent:s,value:!a}])},M=s=>{n([!0,{originalEvent:s,value:!0}])},y=s=>{e.collapsible!=="none"&&n([!1,{originalEvent:s,value:!1}])},o=u.useRef(null),c=()=>{o.current&&(clearTimeout(o.current),o.current=null)},l=u.useCallback(s=>{e.openOnHover&&(c(),o.current=setTimeout(()=>M(s),e.hoverOpenDelay??50))},[e.openOnHover,e.hoverOpenDelay]),v=u.useCallback(s=>{e.openOnHover&&(c(),o.current=setTimeout(()=>y(s),e.hoverCloseDelay??100))},[e.openOnHover,e.hoverCloseDelay]);u.useEffect(()=>c,[]),u.useEffect(()=>{if(r)return ee({variableName:S("scrollbar.width").name}),()=>ae({variableName:S("scrollbar.width").name})},[r]);let h=s=>{r&&s.code==="Escape"&&e.closeOnEscape!==!1&&y(s),ie(s)},m=e.layout?.setSidebar;u.useEffect(()=>{if(!(!m||!e.id))return()=>m(e.id,null)},[m,e.id]),u.useEffect(()=>{!m||!e.id||m(e.id,{toggle:g,collapse:y,open:!!a,state:a?"expanded":"collapsed",overlay:!!e.overlay,hideOnOutsideClick:e.hideOnOutsideClick!==!1})},[m,e.id,a,e.overlay,e.hideOnOutsideClick]);let P=Q("aria.toggleSidebar"),L={ref:b,...e.id?{id:e.id}:void 0,"data-scope":"sidebar","data-part":"root","data-state":t,"data-collapsible":t==="collapsed"?e.collapsible:"","data-collapsible-mode":e.collapsible,"data-variant":e.variant,"data-side":e.side,...e.overlay?{"data-overlay":""}:void 0,...e.overlay?{role:"dialog","aria-modal":!!a||void 0}:void 0,onKeyDown:h,...e.openOnHover?{onPointerEnter:l,onPointerLeave:v}:void 0,style:{"--px-sidebar-width":e.width,"--px-sidebar-width-icon":e.iconWidth}},w={"data-scope":"sidebar","data-part":"spacer","data-state":t,"data-collapsible":t==="collapsed"?e.collapsible:"","data-variant":e.variant,"data-side":e.side,...e.overlay?{"data-overlay":""}:void 0},x={"data-scope":"sidebar","data-part":"aside","data-state":t,"data-collapsible":t==="collapsed"?e.collapsible:"","data-variant":e.variant,"data-side":e.side,...e.overlay?{"data-overlay":""}:void 0},I={"data-scope":"sidebar","data-part":"panel","data-state":t,"data-collapsible":t==="collapsed"?e.collapsible:"","data-variant":e.variant,"data-side":e.side,...e.overlay?{"data-overlay":""}:void 0},D={"data-scope":"sidebar","data-part":"content","data-state":t,"data-collapsible":t==="collapsed"?e.collapsible:"","data-variant":e.variant,"data-side":e.side,...e.overlay?{"data-overlay":""}:void 0},A={"data-scope":"sidebar","data-part":"header","data-state":t,"data-collapsible":t==="collapsed"?e.collapsible:"","data-variant":e.variant,"data-side":e.side,...e.overlay?{"data-overlay":""}:void 0},U={"data-scope":"sidebar","data-part":"footer","data-state":t,"data-collapsible":t==="collapsed"?e.collapsible:"","data-variant":e.variant,"data-side":e.side,...e.overlay?{"data-overlay":""}:void 0},B={"data-scope":"sidebar","data-part":"trigger","data-state":t,"data-collapsible":t==="collapsed"?e.collapsible:"","data-variant":e.variant,"data-side":e.side,"aria-expanded":!!a,...e.id?{"aria-controls":e.id}:void 0,onClick:g,...e.overlay?{"data-overlay":""}:void 0},K={"data-scope":"sidebar","data-part":"rail","aria-label":P,onClick:g,title:P,"data-state":t,"data-collapsible":t==="collapsed"?e.collapsible:"","data-variant":e.variant,"data-side":e.side,...e.overlay?{"data-overlay":""}:void 0},N={"data-scope":"sidebar","data-part":"main","data-state":t,"data-collapsible":t==="collapsed"?e.collapsible:"","data-variant":e.variant,"data-side":e.side,...e.overlay?{"data-overlay":""}:void 0},z={"data-scope":"sidebar","data-part":"backdrop",...e.dismissable?{onClick:y}:{}},F={"data-scope":"sidebar","data-part":"menu"},V={"data-scope":"sidebar","data-part":"menu-item"},W=u.useCallback(s=>({"data-scope":"sidebar","data-part":"menu-button","data-menu-item":"",...s?{"data-active":!0}:{}}),[]),_=u.useCallback(s=>({"data-scope":"sidebar","data-part":"menu-action",...s?{"data-show-on-hover":""}:{}}),[]),$={"data-scope":"sidebar","data-part":"menu-badge"},q={"data-scope":"sidebar","data-part":"menu-sub"},Y={"data-scope":"sidebar","data-part":"menu-sub-item"},j=u.useCallback((s,G)=>({"data-scope":"sidebar","data-part":"menu-sub-button","data-menu-item":"","data-size":G,...s?{"data-active":!0}:{}}),[]);return{state:p,focusTrap:d,isModal:r,toggle:g,expand:M,collapse:y,rootProps:L,spacerProps:w,asideProps:x,panelProps:I,contentProps:D,headerProps:A,footerProps:U,triggerProps:B,railProps:K,mainProps:N,backdropProps:z,menuProps:F,menuItemProps:V,getMenuButtonProps:W,getMenuActionProps:_,menuBadgeProps:$,menuSubProps:q,menuSubItemProps:Y,getMenuSubButtonProps:j,groupProps:{"data-scope":"sidebar","data-part":"group"},groupLabelProps:{"data-scope":"sidebar","data-part":"group-label"},groupContentProps:{"data-scope":"sidebar","data-part":"group-content"},groupActionProps:{"data-scope":"sidebar","data-part":"group-action"},variant:e.variant,collapsible:e.collapsible,side:e.side,overlay:e.overlay,openOnHover:e.openOnHover}}});import{withHeadless as de}from"@primereact/core/headless";import*as f from"react";var H={};var Te=de({name:"useSidebarLayout",defaultProps:H,setup(){let[e,a]=f.useState(()=>new Map),n=f.useCallback((o,c)=>{a(l=>{if(c===null){if(!l.has(o))return l;let m=new Map(l);return m.delete(o),m}let v=l.get(o);if(v&&v.open===c.open&&v.state===c.state&&v.overlay===c.overlay&&v.hideOnOutsideClick===c.hideOnOutsideClick)return l;let h=new Map(l);return h.set(o,c),h})},[]),t=f.useCallback((o,c)=>{if(o){e.get(o)?.toggle(c);return}e.size===1&&e.values().next().value?.toggle(c)},[e]),r=f.useCallback((o,c)=>{if(o){let l=e.get(o);l?.open&&l.toggle(c);return}e.forEach(l=>{l.open&&l.toggle(c)})},[e]),i=f.useMemo(()=>{for(let o of e.values())if(o.open)return!0;return!1},[e]),d=f.useMemo(()=>{for(let o of e.values())if(o.open&&o.overlay&&o.hideOnOutsideClick)return!0;return!1},[e]),b=f.useMemo(()=>{for(let o of e.values())if(o.open&&o.overlay)return!0;return!1},[e]),g={...d?{onClick:o=>{o.target?.closest('[data-scope="sidebar"][data-part="trigger"]')||e.forEach(l=>{l.open&&l.overlay&&l.hideOnOutsideClick&&l.collapse(o)})}}:void 0,...b?{inert:!0,"aria-hidden":!0}:void 0};return{state:{open:i},setSidebar:n,toggle:t,collapse:r,backdropProps:{"data-scope":"sidebar","data-part":"backdrop",onClick:()=>r(),"data-state":i?"open":"closed"},backdropMotionProps:{visible:i},mainProps:g}}});import{withHeadless as ce}from"@primereact/core/headless";import{useCollapsible as ue}from"@primereact/headless/collapsible";var T={collapsible:!1,open:void 0,defaultOpen:!0,disabled:!1,onOpenChange:void 0};var Ae=ce({name:"useSidebarMenuItem",defaultProps:T,setup({props:e}){let a=!!e.collapsible,n=ue({open:a?e.open:void 0,defaultOpen:a?e.defaultOpen??!0:!0,onOpenChange:a?e.onOpenChange:void 0,disabled:e.disabled}),t={isCollapsible:a,open:n.state.open},r=a?n.triggerProps:{},i=a?n.contentProps:{},d=a?{...n.rootProps,"data-collapsible":!0}:{};return{state:t,toggle:n.toggle,triggerProps:r,contentProps:i,rootProps:d}}});export{H as defaultLayoutProps,T as defaultMenuItemProps,R as defaultProps,Se as useSidebar,Te as useSidebarLayout,Ae as useSidebarMenuItem};

package/sidebar/useSidebar.d.ts

@@ -29,7 +29,7 @@ export declare const useSidebar: (inProps?: unknown) => import("@primereact/type
         style: React.CSSProperties;
         onPointerEnter?: ((event?: React.SyntheticEvent) => void) | undefined;
         onPointerLeave?: ((event?: React.SyntheticEvent) => void) | undefined;
-        onKeyDown: (event: React.KeyboardEvent) => void;
+        onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
         role?: "dialog" | undefined;
         'aria-modal'?: true | undefined;
         'data-overlay'?: "" | undefined;
@@ -135,6 +135,60 @@ export declare const useSidebar: (inProps?: unknown) => import("@primereact/type
         'data-scope': string;
         'data-part': string;
     };
+    menuProps: {
+        'data-scope': string;
+        'data-part': string;
+    };
+    menuItemProps: {
+        'data-scope': string;
+        'data-part': string;
+    };
+    getMenuButtonProps: (isActive?: boolean) => {
+        'data-active'?: boolean | undefined;
+        'data-scope': string;
+        'data-part': string;
+        'data-menu-item': string;
+    };
+    getMenuActionProps: (showOnHover?: boolean) => {
+        'data-show-on-hover'?: string | undefined;
+        'data-scope': string;
+        'data-part': string;
+    };
+    menuBadgeProps: {
+        'data-scope': string;
+        'data-part': string;
+    };
+    menuSubProps: {
+        'data-scope': string;
+        'data-part': string;
+    };
+    menuSubItemProps: {
+        'data-scope': string;
+        'data-part': string;
+    };
+    getMenuSubButtonProps: (isActive?: boolean, size?: string) => {
+        'data-active'?: boolean | undefined;
+        'data-scope': string;
+        'data-part': string;
+        'data-menu-item': string;
+        'data-size': string | undefined;
+    };
+    groupProps: {
+        'data-scope': string;
+        'data-part': string;
+    };
+    groupLabelProps: {
+        'data-scope': string;
+        'data-part': string;
+    };
+    groupContentProps: {
+        'data-scope': string;
+        'data-part': string;
+    };
+    groupActionProps: {
+        'data-scope': string;
+        'data-part': string;
+    };
     variant: "inset" | "sidebar" | "floating" | undefined;
     collapsible: "icon" | "none" | "offcanvas" | undefined;
     side: "left" | "right" | undefined;

package/timeline/useTimeline.d.ts

@@ -2,13 +2,13 @@ export declare const useTimeline: (inProps?: unknown) => import("@primereact/typ
     rootProps: {
         'data-scope': "timeline";
         'data-part': "root";
-        'data-align': "top" | "alternate" | "left" | "right" | "bottom" | undefined;
+        'data-align': "top" | "left" | "bottom" | "alternate" | "right" | undefined;
         'data-orientation': "horizontal" | "vertical" | undefined;
     };
     eventProps: {
         'data-scope': "timeline";
         'data-part': "event";
-        'data-align': "top" | "alternate" | "left" | "right" | "bottom" | undefined;
+        'data-align': "top" | "left" | "bottom" | "alternate" | "right" | undefined;
         'data-orientation': "horizontal" | "vertical" | undefined;
     };
     separatorProps: {
@@ -29,13 +29,13 @@ export declare const useTimeline: (inProps?: unknown) => import("@primereact/typ
     contentProps: {
         'data-scope': "timeline";
         'data-part': "content";
-        'data-align': "top" | "alternate" | "left" | "right" | "bottom" | undefined;
+        'data-align': "top" | "left" | "bottom" | "alternate" | "right" | undefined;
         'data-orientation': "horizontal" | "vertical" | undefined;
     };
     oppositeProps: {
         'data-scope': "timeline";
         'data-part': "opposite";
-        'data-align': "top" | "alternate" | "left" | "right" | "bottom" | undefined;
+        'data-align': "top" | "left" | "bottom" | "alternate" | "right" | undefined;
         'data-orientation': "horizontal" | "vertical" | undefined;
     };
 }>;

package/toast/useToast.d.ts

@@ -10,7 +10,7 @@ export declare const useToast: (inProps?: unknown) => import("@primereact/types/
         swiping: boolean;
         swipeOut: boolean;
         swipeOutDirection: "left" | "right" | "up" | "down" | null;
-        swipeDirection: "x" | "y" | null;
+        swipeDirection: "y" | "x" | null;
         initialHeight: number;
         isSwiped: boolean;
         offsetBeforeRemove: number;