@primereact/headless 11.0.0-alpha.9 → 11.0.0-rc.2

package/scrollarea/index.mjs

@@ -1,2 +1 @@
-import{withHeadless as le}from"@primereact/core/headless";import{useMountEffect as ue,useUnmountEffect as ae}from"@primereact/hooks";import{useEventListener as H}from"@primereact/hooks/use-event-listener";import{addClass as l,getHeight as ie,removeClass as d}from"@primeuix/utils";import*as n from"react";var W={step:5};var he=le({name:"useScrollArea",defaultProps:W,setup({props:f,elementRef:s}){let t=n.useRef(null),r=n.useRef(null),o=n.useRef(null),[D,q]=n.useState(0),[v,I]=n.useState(0),T=n.useRef(!1),y=n.useRef(!1),m=n.useRef(null),b=n.useRef(null),u=n.useRef(null),a=n.useRef(null),i=n.useRef(null),A=n.useRef(!1),g=n.useRef(null),[h,p]=n.useState("vertical"),K={orientationState:h},N=()=>{if(!s.current||!t.current)return;let e=getComputedStyle(s.current),c=r.current?parseInt(getComputedStyle(r.current).height,10):0,w=ie(s.current)-c;e.maxHeight!=="none"&&w===0&&(t.current.offsetHeight+c>parseInt(e.maxHeight,10)?s.current.style.height=e.maxHeight:s.current.style.height=t.current.offsetHeight+parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)+parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth)+"px")},R=()=>{var Y,z;if(!t.current||!s.current)return;let e=t.current.scrollWidth,c=t.current.clientWidth,w=(s.current.clientHeight-(((Y=r.current)==null?void 0:Y.clientHeight)||0))*-1;u.current=c/e;let X=t.current.scrollHeight,ce=t.current.clientHeight,se=(s.current.clientWidth-(((z=o.current)==null?void 0:z.clientWidth)||0))*-1;a.current=ce/X;let k=u.current,B=a.current;i.current=requestAnimationFrame(()=>{var C,P,U;r.current&&(k>=1?l(r.current,"p-scrollpanel-hidden"):(d(r.current,"p-scrollpanel-hidden"),r.current.style.width=Math.max(k*100,10)+"%",r.current.style.setProperty("inset-inline-start",(((C=t.current)==null?void 0:C.scrollLeft)||0)/e*100+"%"),r.current.style.bottom=w+"px")),o.current&&(B>=1?l(o.current,"p-scrollpanel-hidden"):(d(o.current,"p-scrollpanel-hidden"),o.current.style.height=Math.max(B*100,10)+"%",o.current.style.top=`calc(${(((P=t.current)==null?void 0:P.scrollTop)||0)/X*100}% - ${((U=r.current)==null?void 0:U.clientHeight)||0}px)`,o.current.style.setProperty("inset-inline-end",se+"px")))})},$=e=>{r.current&&r.current.isSameNode(e.target)?p("horizontal"):o.current&&o.current.isSameNode(e.target)&&p("vertical")},O=()=>{h==="horizontal"&&p("vertical")},j=e=>{D!==e.currentTarget.scrollLeft?(q(e.currentTarget.scrollLeft),p("horizontal")):v!==e.currentTarget.scrollTop&&(I(e.currentTarget.scrollTop),p("vertical")),R()},G=e=>{T.current?E(e):(y.current||E(e),S(e))},J=e=>{y.current=!0,b.current=e.pageY,o.current&&(l(o.current,"p-scrollpanel-grabbed"),o.current.setAttribute("data-p-scrollpanel-grabbed","true")),l(document.body,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","true"),x(),F(),e.preventDefault()},Q=e=>{T.current=!0,m.current=e.pageX,r.current&&(l(r.current,"p-scrollpanel-grabbed"),l(r.current,"p-scrollpanel-grabbed")),l(document.body,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","true"),x(),oe(),e.preventDefault()},E=e=>{if(!m.current||!u.current||!t.current)return;let c=e.pageX-m.current;m.current=e.pageX,i.current=window.requestAnimationFrame(()=>{t.current&&u.current!==null&&(t.current.scrollLeft+=c/u.current)})},S=e=>{if(!b.current||!a.current||!t.current)return;let c=e.pageY-b.current;b.current=e.pageY,i.current=window.requestAnimationFrame(()=>{t.current&&a.current!==null&&(t.current.scrollTop+=c/a.current)})},V=()=>{o.current&&(d(o.current,"p-scrollpanel-grabbed"),o.current.setAttribute("data-p-scrollpanel-grabbed","false")),r.current&&(d(r.current,"p-scrollpanel-grabbed"),r.current.setAttribute("data-p-scrollpanel-grabbed","false")),d(document.body,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","false"),ne(),F(),T.current=!1,y.current=!1},Z=e=>{if(h==="vertical")switch(e.code){case"ArrowDown":{M("scrollTop",f.step),e.preventDefault();break}case"ArrowUp":{M("scrollTop",f.step*-1),e.preventDefault();break}case"ArrowLeft":case"ArrowRight":{e.preventDefault();break}default:break}else if(h==="horizontal")switch(e.code){case"ArrowRight":{M("scrollLeft",f.step),e.preventDefault();break}case"ArrowLeft":{M("scrollLeft",f.step*-1),e.preventDefault();break}case"ArrowDown":case"ArrowUp":{e.preventDefault();break}default:break}},_=()=>{L()},ee=(e,c)=>{t.current&&(t.current[e]+=c,R())},M=(e,c)=>{L(),g.current=setTimeout(()=>{ee(e,c)},40)},L=()=>{g.current&&(clearTimeout(g.current),g.current=null)},[te,re]=H({target:"window",type:"resize",listener:()=>{R()}}),[x,ne]=H({target:"document",type:"mousemove",listener:e=>{G(e)}}),[oe,F]=H({target:"document",type:"mouseup",listener:()=>{V()}});return ue(()=>{setTimeout(()=>{R(),N(),A.current=!0},0),te()}),ae(()=>{A.current&&re(),i.current&&window.cancelAnimationFrame(i.current),L()}),{state:K,contentRef:t,thumbXRef:r,thumbYRef:o,lastScrollLeft:D,lastScrollTop:v,onScroll:j,onXBarMouseDown:Q,onYBarMouseDown:J,onFocus:$,onBlur:O,onKeyDown:Z,onKeyUp:_}}});export{W as defaultProps,he as useScrollArea};
-//# sourceMappingURL=index.mjs.map
+import{withHeadless as Le}from"@primereact/core/headless";import*as e from"react";var de={variant:"auto",mask:!1,tabIndex:0};var he=500,pe=20,Ye=Le({name:"useScrollArea",defaultProps:de,setup({props:y}){let Re=e.useRef(null),m=e.useRef(null),g=e.useRef(null),T=e.useRef(null),$=e.useRef(null),F=e.useRef(null),me=e.useRef(null),[x,ee]=e.useState(!1),[E,te]=e.useState(!1),[M,oe]=e.useState(!1),[re,V]=e.useState(!1),[r,Pe]=e.useState({hiddenX:!0,hiddenY:!0,cornerHidden:!0,cornerWidth:0,cornerHeight:0,xBefore:!1,xAfter:!1,yBefore:!1,yAfter:!1}),A=e.useRef(!1),_=e.useRef("vertical"),D=e.useRef({pointerPos:0,scrollPos:0}),ve=e.useRef({top:0,left:0}),B=e.useRef(null),z=e.useRef(null),w=e.useRef(null),P=e.useCallback(function(){let t=m.current;if(!t)return;let{scrollHeight:n,scrollWidth:o,clientHeight:l,clientWidth:a,scrollTop:u,scrollLeft:R}=t,f=l>=n,d=a>=o,h=g.current,p=T.current,H=!f&&!d&&h?h.offsetWidth:0,S=!f&&!d&&p?p.offsetHeight:0,j=h&&!f?h.offsetHeight:0,G=p&&!d?p.offsetWidth:0;if(Pe(i=>{let s={hiddenX:d,hiddenY:f,cornerHidden:d||f,cornerWidth:H,cornerHeight:S,xBefore:!d&&R>0,xAfter:!d&&o-a-R>1,yBefore:!f&&u>0,yAfter:!f&&n-l-u>1};return i.hiddenX===s.hiddenX&&i.hiddenY===s.hiddenY&&i.cornerHidden===s.cornerHidden&&i.cornerWidth===s.cornerWidth&&i.cornerHeight===s.cornerHeight&&i.xBefore===s.xBefore&&i.xAfter===s.xAfter&&i.yBefore===s.yBefore&&i.yAfter===s.yAfter?i:s}),h&&!f&&j>0){let i=l/n,s=Math.max(i*j,pe),J=j-s,X=n-l,Q=(X>0?u/X:0)*J;h.style.setProperty("--px-handle-height",`${s}px`),h.style.setProperty("--px-handle-offset",`${Q}px`)}if(p&&!d&&G>0){let i=a/o,s=Math.max(i*G,pe),J=G-s,X=o-a,Q=(X>0?R/X:0)*J;p.style.setProperty("--px-handle-width",`${s}px`),p.style.setProperty("--px-handle-offset",`${Q}px`)}},[]),q=e.useCallback(function(){w.current||(w.current=requestAnimationFrame(()=>{w.current=null,P()}));let t=m.current;if(!t)return;let{scrollTop:n,scrollLeft:o}=t,l=ve.current;n!==l.top&&(oe(a=>a||!0),z.current&&clearTimeout(z.current),z.current=setTimeout(()=>oe(!1),he)),o!==l.left&&(te(a=>a||!0),B.current&&clearTimeout(B.current),B.current=setTimeout(()=>te(!1),he)),l.top=n,l.left=o},[P]),L=e.useCallback(function(t,n){let o=m.current;!o||t.ctrlKey||(n==="vertical"?o.scrollTop+=t.deltaY:o.scrollLeft+=t.deltaX||t.deltaY)},[]),C=e.useCallback(function(t,n){if(t.pointerType==="mouse"&&t.button!==0)return;t.preventDefault(),t.stopPropagation();let o=n==="vertical",l=o?g.current:T.current,a=m.current;!l||!a||(l.setPointerCapture(t.pointerId),A.current=!0,_.current=n,D.current={pointerPos:o?t.clientY:t.clientX,scrollPos:o?a.scrollTop:a.scrollLeft})},[]),k=e.useCallback(function(t,n){if(t.pointerType==="mouse"&&t.button!==0)return;t.preventDefault();let o=n==="vertical",l=o?g.current:T.current,a=m.current;if(!l||!a)return;l.setPointerCapture(t.pointerId),A.current=!0,_.current=n;let u=l.getBoundingClientRect(),R=o?$.current:F.current,f=R?o?R.offsetHeight:R.offsetWidth:0,h=(o?u.height:u.width)-f;if(h>0){let p=(o?t.clientY-u.top:t.clientX-u.left)-f/2,H=Math.max(0,Math.min(1,p/h)),S=o?a.scrollHeight-a.clientHeight:a.scrollWidth-a.clientWidth;o?a.scrollTop=H*S:a.scrollLeft=H*S}D.current={pointerPos:o?t.clientY:t.clientX,scrollPos:o?a.scrollTop:a.scrollLeft}},[]),W=e.useCallback(function(t){if(!A.current)return;t.preventDefault();let n=_.current==="vertical",o=m.current,l=n?g.current:T.current;if(!o||!l)return;let a=l.getBoundingClientRect(),u=n?$.current:F.current,R=u?n?u.offsetHeight:u.offsetWidth:0,d=(n?a.height:a.width)-R;if(d<=0)return;let p=(n?t.clientY:t.clientX)-D.current.pointerPos,H=n?o.scrollHeight-o.clientHeight:o.scrollWidth-o.clientWidth,S=p/d*H;n?o.scrollTop=D.current.scrollPos+S:o.scrollLeft=D.current.scrollPos+S},[]),Y=e.useCallback(function(t){t.preventDefault(),t.currentTarget.releasePointerCapture(t.pointerId),A.current=!1},[]),N=e.useCallback(function(t){t.pointerType==="touch"?V(!0):(V(!1),ee(!0))},[]),K=e.useCallback(function(){ee(!1)},[]),Z=e.useCallback(function(t){t.pointerType==="touch"&&V(!0)},[]);e.useLayoutEffect(()=>{let c=m.current;if(!c)return;let t=null,n=new ResizeObserver(()=>{t||(t=requestAnimationFrame(()=>{t=null,P()}))});return n.observe(c),c.firstElementChild&&n.observe(c.firstElementChild),P(),()=>{n.disconnect(),t&&cancelAnimationFrame(t)}},[P]),e.useLayoutEffect(()=>{P()},[r.hiddenX,r.hiddenY,P]),e.useEffect(()=>()=>{clearTimeout(B.current??void 0),clearTimeout(z.current??void 0),w.current&&cancelAnimationFrame(w.current)},[]);let I=e.useMemo(()=>({width:r.cornerWidth,height:r.cornerHeight}),[r.cornerWidth,r.cornerHeight]),be=e.useMemo(()=>({x:r.hiddenX,y:r.hiddenY,corner:r.cornerHidden}),[r.hiddenX,r.hiddenY,r.cornerHidden]),U=E||M,v=!r.hiddenX,b=!r.hiddenY,Se=e.useMemo(()=>({hovering:x,scrollingX:E,scrollingY:M,scrolling:U,touchModality:re,hasOverflowX:v,hasOverflowY:b,scrollXBefore:r.xBefore,scrollXAfter:r.xAfter,scrollYBefore:r.yBefore,scrollYAfter:r.yAfter,cornerHidden:r.cornerHidden}),[x,E,M,U,re,v,b,r]),O=e.useMemo(()=>({...U&&{"data-scrolling":""},...v&&{"data-has-overflow-x":""},...b&&{"data-has-overflow-y":""},...r.xBefore&&{"data-scroll-x-before":""},...r.xAfter&&{"data-scroll-x-after":""},...r.yBefore&&{"data-scroll-y-before":""},...r.yAfter&&{"data-scroll-y-after":""}}),[U,v,b,r.xBefore,r.xAfter,r.yBefore,r.yAfter]),xe=e.useMemo(()=>({"data-scope":"scrollarea","data-part":"root",ref:Re,role:"presentation","data-variant":y.variant,...y.mask&&{"data-mask":""},...O,onPointerEnter:N,onPointerLeave:K,onPointerDown:Z,style:{position:"relative","--px-corner-height":`${I.height}px`,"--px-corner-width":`${I.width}px`}}),[y.variant,y.mask,O,N,K,Z,I]),ne=v||b?y.tabIndex||0:void 0,He=e.useMemo(()=>({"data-scope":"scrollarea","data-part":"viewport",ref:m,tabIndex:ne,onScroll:q,...O,style:{overflow:"scroll",scrollbarWidth:"none"}}),[ne,q,O]),ce=e.useCallback(c=>k(c,"vertical"),[k]),ae=e.useCallback(c=>k(c,"horizontal"),[k]),le=e.useCallback(c=>L(c,"vertical"),[L]),se=e.useCallback(c=>L(c,"horizontal"),[L]),ie=e.useCallback(c=>C(c,"vertical"),[C]),ue=e.useCallback(c=>C(c,"horizontal"),[C]),fe={position:"absolute",touchAction:"none",userSelect:"none",WebkitUserSelect:"none"},ye=e.useMemo(()=>({"data-scope":"scrollarea","data-part":"scrollbar-y","data-orientation":"vertical",...x&&{"data-hovering":""},...M&&{"data-scrolling":""},ref:g,onPointerDown:ce,onPointerMove:W,onPointerUp:Y,onWheel:le,style:{...fe,top:0,bottom:"var(--px-corner-height)",insetInlineEnd:0}}),[x,M,ce,W,Y,le]),ge=e.useMemo(()=>({"data-scope":"scrollarea","data-part":"scrollbar-x","data-orientation":"horizontal",...x&&{"data-hovering":""},...E&&{"data-scrolling":""},ref:T,onPointerDown:ae,onPointerMove:W,onPointerUp:Y,onWheel:se,style:{...fe,bottom:0,insetInlineStart:0,insetInlineEnd:"var(--px-corner-width)"}}),[x,E,ae,W,Y,se]),Te=e.useMemo(()=>({"data-scope":"scrollarea","data-part":"handle-y","data-orientation":"vertical",ref:$,onPointerDown:ie,style:{height:"var(--px-handle-height, 0px)",transform:"translate3d(0, var(--px-handle-offset, 0px), 0)"}}),[ie]),Ee=e.useMemo(()=>({"data-scope":"scrollarea","data-part":"handle-x","data-orientation":"horizontal",ref:F,onPointerDown:ue,style:{width:"var(--px-handle-width, 0px)",transform:"translate3d(var(--px-handle-offset, 0px), 0, 0)"}}),[ue]),Me=e.useMemo(()=>({"data-scope":"scrollarea","data-part":"content",style:{minWidth:v?"fit-content":void 0,minHeight:b?"fit-content":void 0}}),[v,b]),De=e.useMemo(()=>({"data-scope":"scrollarea","data-part":"corner",ref:me,style:{position:"absolute",bottom:0,insetInlineEnd:0,width:"var(--px-corner-width)",height:"var(--px-corner-height)"}}),[]);return{state:Se,cornerSize:I,hiddenState:be,rootProps:xe,viewportProps:He,contentProps:Me,scrollbarYProps:ye,scrollbarXProps:ge,handleYProps:Te,handleXProps:Ee,cornerProps:De,computeHandle:P,handleScroll:q,handleScrollbarPointerDown:k,handleScrollbarPointerMove:W,handleScrollbarPointerUp:Y,handleScrollbarWheel:L,handleHandlePointerDown:C,onRootPointerEnter:N,onRootPointerLeave:K,onRootPointerDown:Z}}});export{de as defaultProps,Ye as useScrollArea};

package/scrollarea/useScrollArea.d.ts

@@ -1,18 +1,123 @@
 import * as React from 'react';
-export declare const useScrollArea: (inProps?: unknown) => import("@primereact/types/core").HeadlessInstance<import("@primereact/types/shared/scrollarea").useScrollAreaProps, unknown, {
+export declare const useScrollArea: (inProps?: unknown) => import("@primereact/types/core").HeadlessInstance<import("@primereact/types/headless/scrollarea").UseScrollAreaProps, unknown, {
     state: {
-        orientationState: string;
-    };
-    contentRef: React.RefObject<HTMLDivElement | null>;
-    thumbXRef: React.RefObject<HTMLDivElement | null>;
-    thumbYRef: React.RefObject<HTMLDivElement | null>;
-    lastScrollLeft: number;
-    lastScrollTop: number;
-    onScroll: (event: React.UIEvent<HTMLDivElement>) => void;
-    onXBarMouseDown: (event: React.MouseEvent<HTMLDivElement>) => void;
-    onYBarMouseDown: (event: React.MouseEvent<HTMLDivElement>) => void;
-    onFocus: (event: React.FocusEvent<HTMLDivElement>) => void;
-    onBlur: () => void;
-    onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
-    onKeyUp: () => void;
+        hovering: boolean;
+        scrollingX: boolean;
+        scrollingY: boolean;
+        scrolling: boolean;
+        touchModality: boolean;
+        hasOverflowX: boolean;
+        hasOverflowY: boolean;
+        scrollXBefore: boolean;
+        scrollXAfter: boolean;
+        scrollYBefore: boolean;
+        scrollYAfter: boolean;
+        cornerHidden: boolean;
+    };
+    cornerSize: {
+        width: number;
+        height: number;
+    };
+    hiddenState: {
+        x: boolean;
+        y: boolean;
+        corner: boolean;
+    };
+    rootProps: {
+        onPointerEnter: (event: React.PointerEvent<HTMLDivElement>) => void;
+        onPointerLeave: () => void;
+        onPointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
+        style: React.CSSProperties;
+        'data-scroll-y-after'?: "" | undefined;
+        'data-scroll-y-before'?: "" | undefined;
+        'data-scroll-x-after'?: "" | undefined;
+        'data-scroll-x-before'?: "" | undefined;
+        'data-has-overflow-y'?: "" | undefined;
+        'data-has-overflow-x'?: "" | undefined;
+        'data-scrolling'?: "" | undefined;
+        'data-mask'?: "" | undefined;
+        'data-scope': "scrollarea";
+        'data-part': "root";
+        ref: React.RefObject<HTMLDivElement | null>;
+        role: "presentation";
+        'data-variant': "hidden" | "auto" | "always" | "scroll" | "hover" | undefined;
+    };
+    viewportProps: {
+        style: React.CSSProperties;
+        'data-scroll-y-after'?: "" | undefined;
+        'data-scroll-y-before'?: "" | undefined;
+        'data-scroll-x-after'?: "" | undefined;
+        'data-scroll-x-before'?: "" | undefined;
+        'data-has-overflow-y'?: "" | undefined;
+        'data-has-overflow-x'?: "" | undefined;
+        'data-scrolling'?: "" | undefined;
+        'data-scope': "scrollarea";
+        'data-part': "viewport";
+        ref: React.RefObject<HTMLDivElement | null>;
+        tabIndex: number | undefined;
+        onScroll: () => void;
+    };
+    contentProps: {
+        'data-scope': "scrollarea";
+        'data-part': "content";
+        style: React.CSSProperties;
+    };
+    scrollbarYProps: {
+        ref: React.RefObject<HTMLDivElement | null>;
+        onPointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
+        onPointerMove: (event: React.PointerEvent<HTMLDivElement>) => void;
+        onPointerUp: (event: React.PointerEvent<HTMLDivElement>) => void;
+        onWheel: (event: React.WheelEvent<HTMLDivElement>) => void;
+        style: React.CSSProperties;
+        'data-scrolling'?: "" | undefined;
+        'data-hovering'?: "" | undefined;
+        'data-scope': "scrollarea";
+        'data-part': "scrollbar-y";
+        'data-orientation': "vertical";
+    };
+    scrollbarXProps: {
+        ref: React.RefObject<HTMLDivElement | null>;
+        onPointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
+        onPointerMove: (event: React.PointerEvent<HTMLDivElement>) => void;
+        onPointerUp: (event: React.PointerEvent<HTMLDivElement>) => void;
+        onWheel: (event: React.WheelEvent<HTMLDivElement>) => void;
+        style: React.CSSProperties;
+        'data-scrolling'?: "" | undefined;
+        'data-hovering'?: "" | undefined;
+        'data-scope': "scrollarea";
+        'data-part': "scrollbar-x";
+        'data-orientation': "horizontal";
+    };
+    handleYProps: {
+        'data-scope': "scrollarea";
+        'data-part': "handle-y";
+        'data-orientation': "vertical";
+        ref: React.RefObject<HTMLDivElement | null>;
+        onPointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
+        style: React.CSSProperties;
+    };
+    handleXProps: {
+        'data-scope': "scrollarea";
+        'data-part': "handle-x";
+        'data-orientation': "horizontal";
+        ref: React.RefObject<HTMLDivElement | null>;
+        onPointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
+        style: React.CSSProperties;
+    };
+    cornerProps: {
+        'data-scope': "scrollarea";
+        'data-part': "corner";
+        ref: React.RefObject<HTMLDivElement | null>;
+        style: React.CSSProperties;
+    };
+    computeHandle: () => void;
+    handleScroll: () => void;
+    handleScrollbarPointerDown: (event: React.PointerEvent<HTMLDivElement>, orientation: "vertical" | "horizontal") => void;
+    handleScrollbarPointerMove: (event: React.PointerEvent<HTMLDivElement>) => void;
+    handleScrollbarPointerUp: (event: React.PointerEvent<HTMLDivElement>) => void;
+    handleScrollbarWheel: (event: React.WheelEvent<HTMLDivElement>, orientation: "vertical" | "horizontal") => void;
+    handleHandlePointerDown: (event: React.PointerEvent<HTMLDivElement>, orientation: "vertical" | "horizontal") => void;
+    onRootPointerEnter: (event: React.PointerEvent<HTMLDivElement>) => void;
+    onRootPointerLeave: () => void;
+    onRootPointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
 }>;

package/scrollarea/useScrollArea.props.d.ts

@@ -1,2 +1,2 @@
-import type { useScrollAreaProps } from '@primereact/types/shared/scrollarea';
-export declare const defaultProps: useScrollAreaProps;
+import type { UseScrollAreaProps } from '@primereact/types/headless/scrollarea';
+export declare const defaultProps: UseScrollAreaProps;

package/select/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useSelect';
+export * from './useSelect.props';
+export type * from '@primereact/types/headless/select';

package/select/index.mjs

@@ -0,0 +1 @@
+import{withHeadless as ee}from"@primereact/core/headless";import{useListbox as te}from"@primereact/headless/listbox";import{usePopover as ne}from"@primereact/headless/popover";import{useControlledState as oe}from"@primereact/hooks/use-controlled-state";import{useEventListener as R}from"@primereact/hooks/use-event-listener";import{getFirstFocusableElement as ae,getOuterWidth as se,isNotEmpty as ie,focus as C}from"@primeuix/utils";import*as l from"react";var P={open:void 0,defaultOpen:void 0,value:void 0,defaultValue:void 0,options:[],optionKey:void 0,optionLabel:void 0,optionValue:void 0,optionDisabled:void 0,optionGroupLabel:void 0,optionGroupChildren:void 0,disabled:!1,invalid:!1,locale:void 0,metaKeySelection:!1,multiple:!1,autoOptionFocus:!0,selectOnFocus:!1,focusOnHover:!0,closeOnEscape:!1,autoFocus:!1,trapped:!1,onOpenChange:void 0,onValueChange:void 0};var be=ee({name:"useSelect",defaultProps:P,setup({props:t,id:u,elementRef:K}){let m=l.useRef(null),V=e=>{m.current?.(e)},D=e=>{t.onOpenChange?.({value:!!e.value})},o=te({value:t.value,defaultValue:t.defaultValue,options:t.options,optionKey:t.optionKey,optionLabel:t.optionLabel,optionValue:t.optionValue,optionDisabled:t.optionDisabled,optionGroupLabel:t.optionGroupLabel,optionGroupChildren:t.optionGroupChildren,disabled:t.disabled,locale:t.locale,autoOptionFocus:t.autoOptionFocus,selectOnFocus:t.selectOnFocus,focusOnHover:t.focusOnHover,multiple:t.multiple,metaKeySelection:t.metaKeySelection,onValueChange:V}),n=ne({open:t.open,defaultOpen:t.defaultOpen??!1,closeOnEscape:t.closeOnEscape,autoFocus:t.autoFocus,trapped:t.trapped,onOpenChange:D}),[c,f]=oe({value:t.value,defaultValue:t.defaultValue,onChange:t.onValueChange}),d=l.useRef(!1),[F,b]=l.useState(!1),S={value:c,opened:n.state.open,focused:F,focusedOptionIndex:o.state.focusedOptionIndex,anchorElement:n.state.anchorElement,positionerElement:n.state.positionerElement,popupElement:n.state.popupElement,arrowElement:n.state.arrowElement,rendered:n.state.rendered},p=()=>{n.setOpen(!0)},i=()=>{n.setOpen(!1),o.changeFocusedOptionIndex(new Event("blur"),-1)},E=()=>{n.state.open?i():p()},r=()=>{n.state.anchorElement&&C(n.state.anchorElement)},k=()=>{t.disabled||E()},I=()=>{o.listProps.onFocus?.(),b(!0)},H=()=>{o.listProps.onBlur?.(),b(!1)},g=e=>{let a=e.value;if(a===null){i(),r();return}let s=o.getOptions().find(Y=>{let Z=o.getOptionValue(Y);return o.isEquals(Z,a)});f([a,{originalEvent:e.originalEvent,value:a,option:s}]),i(),r()},O=e=>{e.preventDefault(),e.stopPropagation();let a=t.multiple?[]:null;f([a,{originalEvent:e,value:a,option:null}]),o.updateModel(e,a),n.state.open&&i(),r()},A=e=>{(e.code==="Enter"||e.code==="Space")&&O(e)};m.current=e=>{t.multiple?f([e.value,{originalEvent:e.originalEvent,value:e.value}]):g(e)};let h=e=>{switch(e.code){case"ArrowDown":y(e);break;case"ArrowUp":M(e);break;case"Enter":case"NumpadEnter":case"Space":T(e);break;case"Home":case"End":case"PageUp":case"PageDown":n.state.open&&o.listProps.onKeyDown?.(e);break;case"Escape":n.state.open&&(i(),r());break;case"Tab":U(e);break;case"ArrowLeft":case"ArrowRight":case"ShiftLeft":case"ShiftRight":break;default:n.state.open&&o.listProps.onKeyDown?.(e);break}},y=e=>{n.state.open?o.listProps.onKeyDown?.(e):(d.current=!0,p()),e.preventDefault()},M=e=>{if(!n.state.open)d.current=!0,p();else if(e.altKey){let a=o.state.focusedOptionIndex;if(a!==-1){let s=o.getOptions()[a];s&&g({originalEvent:e,value:o.getOptionValue(s)})}i()}else o.listProps.onKeyDown?.(e);e.preventDefault()},T=e=>{if(!n.state.open)y(e);else{let a=o.state.focusedOptionIndex;if(a!==-1){let s=o.getOptions()[a];s&&!o.isOptionDisabled(s)&&o.onOptionSelect(e,s)}}e.preventDefault()},U=e=>{if(n.state.open){let a=ae(n.state.positionerElement,":not([data-focus-guard])");a?(C(a),e.preventDefault()):i()}},B=e=>{switch(e.code){case"Escape":i(),r(),e.preventDefault();break;case"Enter":case"NumpadEnter":if(o.state.focusedOptionIndex!==-1){let a=o.getOptions()[o.state.focusedOptionIndex];a&&!o.isOptionDisabled(a)&&o.onOptionSelect(e,a)}e.preventDefault();break;case"ArrowDown":case"ArrowUp":case"Home":case"End":case"PageUp":case"PageDown":h(e);break;default:break}},w=e=>{let a=o.getOptions().find(s=>o.isEquals(o.getOptionValue(s),e));return a?o.getOptionLabel(a):!t.optionValue&&e!=null?o.getOptionLabel(e):null},G=()=>v()?t.multiple&&Array.isArray(c)?c.map(w).filter(Boolean):w(c):null,v=()=>t.multiple?Array.isArray(c)&&c.length>0:ie(c),[q]=R({target:()=>document.querySelector(`label[for="${u}"]`),type:"click",listener:()=>{r()}}),[x,L]=R({target:"window",type:"resize",listener:()=>{n.state.open&&i()}});l.useEffect(()=>{q()},[u]),l.useEffect(()=>{n.state.open?x():L()},[n.state.open,x,L]),l.useEffect(()=>{if(n.state.open&&n.state.positionerElement){let e=K?.current??n.state.anchorElement;e&&(n.state.positionerElement.style.minWidth=se(e)+"px"),(d.current||t.autoOptionFocus)&&requestAnimationFrame(()=>{requestAnimationFrame(()=>{let a=o.state.focusedOptionIndex,s=a!==-1?a:o.findFirstFocusedOptionIndex();o.changeFocusedOptionIndex(new Event("focus"),s),d.current=!1})})}},[n.state.open,n.state.positionerElement]);let _={id:u,"data-scope":"select","data-part":"root",...t.disabled&&{"data-disabled":""},...t.invalid&&{"data-invalid":""}},$={"data-scope":"select","data-part":"indicator","aria-hidden":!0,...n.state.open?{"data-open":""}:{"data-closed":""}},z={"data-scope":"select","data-part":"clear","aria-label":"Clear",tabIndex:t.disabled?-1:0,onClick:O,onKeyDown:A},N={"data-scope":"select","data-part":"positioner",ref:n.setPositionerRef},W={"data-scope":"select","data-part":"popup",ref:n.setPopupRef,...n.state.open&&{"data-open":""}},j={"data-scope":"select","data-part":"arrow",ref:n.setArrowRef},J={...o?.listProps,id:`${u}_list`,tabIndex:-1,"data-scope":"select","data-part":"list"},Q={"data-scope":"select","data-part":"filter",role:"searchbox",autoComplete:"off",disabled:t.disabled,"aria-owns":`${u}_list`,"aria-activedescendant":o?.getFocusedOptionId(),tabIndex:t.disabled?-1:t.tabIndex,onBlur:o?.filterProps.onBlur,onChange:o?.filterProps.onChange,onKeyDown:B},X={"data-scope":"select","data-part":"trigger",ref:n.setAnchorRef,tabIndex:t.disabled?-1:t.tabIndex,role:"combobox",disabled:t.disabled,"aria-haspopup":"listbox","aria-multiselectable":t.multiple||void 0,"aria-expanded":!!n.state.open,"aria-controls":n.state.open?`${u}_list`:void 0,"aria-activedescendant":n.state.open?o?.getFocusedOptionId():void 0,"aria-invalid":t.invalid,"aria-disabled":t.disabled,...n.state.open&&{"data-positioner-open":""},onClick:k,onKeyDown:h,onFocus:I,onBlur:H};return{state:S,listbox:o,rootProps:_,triggerProps:X,filterProps:Q,listProps:J,indicatorProps:$,clearProps:z,positionerProps:N,popupProps:W,arrowProps:j,setRendered:n.setRendered,getSelectedOptionLabel:G,hasValue:v,show:p,hide:i,toggle:E,focus:r}}});export{P as defaultProps,be as useSelect};

package/select/useSelect.d.ts

@@ -0,0 +1,190 @@
+import * as React from 'react';
+export declare const useSelect: (inProps?: unknown) => import("@primereact/types/core").HeadlessInstance<import("@primereact/types/headless/select").UseSelectProps, unknown, {
+    state: {
+        value: unknown;
+        opened: boolean | undefined;
+        focused: boolean;
+        focusedOptionIndex: number;
+        anchorElement: HTMLElement | null;
+        positionerElement: HTMLDivElement | null;
+        popupElement: HTMLElement | null;
+        arrowElement: HTMLDivElement | null;
+        rendered: boolean;
+    };
+    listbox: import("@primereact/types/core").HeadlessInstance<import("@primereact/headless/listbox").UseListboxProps<unknown>, unknown, {
+        state: {
+            value: unknown;
+            focused: boolean;
+            focusedOptionIndex: number;
+        };
+        listRef: React.RefObject<HTMLUListElement | null>;
+        firstHiddenElementRef: React.RefObject<HTMLElement | null>;
+        lastHiddenElementRef: React.RefObject<HTMLElement | null>;
+        rootProps: {
+            id: string | undefined;
+            'data-scope': string;
+            'data-part': string;
+            'data-disabled': true | undefined;
+            'data-invalid': true | undefined;
+            onBlur: (event: React.FocusEvent) => void;
+        };
+        listProps: {
+            id: string;
+            role: "listbox";
+            ref: React.RefObject<HTMLUListElement | null>;
+            tabIndex: number;
+            'aria-activedescendant': string | undefined;
+            'data-scope': string;
+            'data-part': string;
+            onFocus: (event?: React.FocusEvent) => void;
+            onBlur: () => void;
+            onKeyDown: (event: React.KeyboardEvent) => void;
+        };
+        filterProps: {
+            role: "searchbox";
+            autoComplete: "off";
+            disabled: boolean | undefined;
+            tabIndex: number | undefined;
+            'aria-owns': string | undefined;
+            'aria-activedescendant': string | undefined;
+            'data-scope': string;
+            'data-part': string;
+            onBlur: () => void;
+            onChange: () => void;
+            onKeyDown: (event: React.KeyboardEvent) => void;
+        };
+        firstHiddenProps: {
+            role: "presentation";
+            ref: React.RefObject<HTMLElement | null>;
+            'aria-hidden': true;
+            'data-focus-guard': "";
+            onFocus: () => void;
+        };
+        lastHiddenProps: {
+            role: "presentation";
+            ref: React.RefObject<HTMLElement | null>;
+            'aria-hidden': true;
+            'data-focus-guard': "";
+            onFocus: (event: React.FocusEvent) => void;
+        };
+        getOptions: () => unknown[];
+        getOptionId: (index: number) => string;
+        getOptionLabel: (option: unknown) => any;
+        getOptionValue: (option: unknown) => any;
+        isOptionDisabled: (option: unknown) => any;
+        isOptionGroup: (option: unknown) => boolean;
+        getOptionGroupLabel: (optionGroup: unknown) => any;
+        getOptionGroupChildren: (optionGroup: unknown) => any;
+        getFocusedOptionId: () => string | undefined;
+        onOptionSelect: (event: React.MouseEvent | React.KeyboardEvent, option: unknown, index?: number) => void;
+        onOptionTouchEnd: () => void;
+        onClearClick: (event: React.MouseEvent) => void;
+        isOptionMatched: (option: unknown) => any;
+        isValidOption: (option: unknown) => boolean;
+        isValidSelectedOption: (option: unknown) => boolean;
+        isSelected: (option: unknown) => boolean;
+        changeFocusedOptionIndex: (event: React.MouseEvent | React.KeyboardEvent, index?: number) => void;
+        findSelectedOptionIndex: () => number;
+        findFirstFocusedOptionIndex: () => number;
+        scrollInView: (index?: number) => void;
+        updateModel: (event: React.SyntheticEvent, value: unknown) => void;
+        autoUpdateModel: () => void;
+        equalityKey: string | undefined;
+        hasValue: () => boolean;
+        isEquals: (value1: unknown, value2: unknown) => boolean;
+    }>;
+    rootProps: {
+        'data-invalid'?: "" | undefined;
+        'data-disabled'?: "" | undefined;
+        id: string | undefined;
+        'data-scope': "select";
+        'data-part': "root";
+    };
+    triggerProps: {
+        onClick: () => void;
+        onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+        onFocus: () => void;
+        onBlur: () => void;
+        'data-positioner-open'?: "" | undefined;
+        'data-scope': "select";
+        'data-part': "trigger";
+        ref: (node: HTMLElement | null) => void;
+        tabIndex: number | undefined;
+        role: "combobox";
+        disabled: boolean | undefined;
+        'aria-haspopup': "listbox";
+        'aria-multiselectable': true | undefined;
+        'aria-expanded': boolean;
+        'aria-controls': string | undefined;
+        'aria-activedescendant': string | undefined;
+        'aria-invalid': boolean | undefined;
+        'aria-disabled': boolean | undefined;
+    };
+    filterProps: {
+        'data-scope': "select";
+        'data-part': "filter";
+        role: "searchbox";
+        autoComplete: "off";
+        disabled: boolean | undefined;
+        'aria-owns': string;
+        'aria-activedescendant': string | undefined;
+        tabIndex: number | undefined;
+        onBlur: () => void;
+        onChange: () => void;
+        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    };
+    listProps: {
+        id: string;
+        tabIndex: number;
+        'data-scope': "select";
+        'data-part': "list";
+        role: "listbox";
+        ref: React.RefObject<HTMLUListElement | null>;
+        'aria-activedescendant': string | undefined;
+        onFocus: (event?: React.FocusEvent) => void;
+        onBlur: () => void;
+        onKeyDown: (event: React.KeyboardEvent) => void;
+    };
+    indicatorProps: {
+        'data-open': "";
+        'data-scope': "select";
+        'data-part': "indicator";
+        'aria-hidden': true;
+    } | {
+        'data-closed': "";
+        'data-scope': "select";
+        'data-part': "indicator";
+        'aria-hidden': true;
+    };
+    clearProps: {
+        'data-scope': "select";
+        'data-part': "clear";
+        'aria-label': string;
+        tabIndex: number;
+        onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+        onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+    };
+    positionerProps: {
+        'data-scope': "select";
+        'data-part': "positioner";
+        ref: (node: HTMLDivElement | null) => void;
+    };
+    popupProps: {
+        'data-open'?: "" | undefined;
+        'data-scope': "select";
+        'data-part': "popup";
+        ref: (node: HTMLElement | null) => void;
+    };
+    arrowProps: {
+        'data-scope': string;
+        'data-part': string;
+        ref: (node: HTMLDivElement | null) => void;
+    };
+    setRendered: React.Dispatch<React.SetStateAction<boolean>>;
+    getSelectedOptionLabel: () => any;
+    hasValue: () => boolean;
+    show: () => void;
+    hide: () => void;
+    toggle: () => void;
+    focus: () => void;
+}>;

package/select/useSelect.props.d.ts

@@ -0,0 +1,2 @@
+import type { UseSelectProps } from '@primereact/types/headless/select';
+export declare const defaultProps: UseSelectProps;

package/sidebar/index.d.ts

@@ -0,0 +1,7 @@
+export * from './useSidebar';
+export * from './useSidebar.props';
+export * from './useSidebarLayout';
+export * from './useSidebarLayout.props';
+export * from './useSidebarMenuItem';
+export * from './useSidebarMenuItem.props';
+export type * from '@primereact/types/headless/sidebar';

package/sidebar/index.mjs

@@ -0,0 +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};

package/sidebar/useSidebar.d.ts

@@ -0,0 +1,143 @@
+import * as React from 'react';
+export declare const useSidebar: (inProps?: unknown) => import("@primereact/types/core").HeadlessInstance<import("@primereact/types/headless/sidebar").UseSidebarProps, unknown, {
+    state: {
+        open: boolean;
+        displayState: "expanded" | "collapsed";
+    };
+    focusTrap: import("@primereact/types/core").HeadlessInstance<import("@primereact/headless/focustrap").UseFocusTrapProps, unknown, {
+        containerRef: React.RefObject<HTMLElement | null>;
+        firstHiddenElementRef: React.RefObject<HTMLSpanElement | null>;
+        lastHiddenElementRef: React.RefObject<HTMLSpanElement | null>;
+        firstHiddenProps: {
+            role: "presentation";
+            'aria-hidden': true;
+            'data-focus-guard': string;
+            onFocus: (event: React.FocusEvent<HTMLSpanElement>) => void;
+        };
+        lastHiddenProps: {
+            role: "presentation";
+            'aria-hidden': true;
+            'data-focus-guard': string;
+            onFocus: (event: React.FocusEvent<HTMLSpanElement>) => void;
+        };
+    }>;
+    isModal: boolean;
+    toggle: (event?: React.SyntheticEvent) => void;
+    expand: (event?: React.SyntheticEvent) => void;
+    collapse: (event?: React.SyntheticEvent) => void;
+    rootProps: {
+        style: React.CSSProperties;
+        onPointerEnter?: ((event?: React.SyntheticEvent) => void) | undefined;
+        onPointerLeave?: ((event?: React.SyntheticEvent) => void) | undefined;
+        onKeyDown: (event: React.KeyboardEvent) => void;
+        role?: "dialog" | undefined;
+        'aria-modal'?: true | undefined;
+        'data-overlay'?: "" | undefined;
+        'data-scope': string;
+        'data-part': string;
+        'data-state': string;
+        'data-collapsible': string | undefined;
+        'data-collapsible-mode': "icon" | "none" | "offcanvas" | undefined;
+        'data-variant': "inset" | "sidebar" | "floating" | undefined;
+        'data-side': "left" | "right" | undefined;
+        id?: string | undefined;
+        ref: (node: HTMLElement | null) => void;
+    };
+    spacerProps: {
+        'data-overlay'?: "" | undefined;
+        'data-scope': string;
+        'data-part': string;
+        'data-state': string;
+        'data-collapsible': string | undefined;
+        'data-variant': "inset" | "sidebar" | "floating" | undefined;
+        'data-side': "left" | "right" | undefined;
+    };
+    asideProps: {
+        'data-overlay'?: "" | undefined;
+        'data-scope': string;
+        'data-part': string;
+        'data-state': string;
+        'data-collapsible': string | undefined;
+        'data-variant': "inset" | "sidebar" | "floating" | undefined;
+        'data-side': "left" | "right" | undefined;
+    };
+    panelProps: {
+        'data-overlay'?: "" | undefined;
+        'data-scope': string;
+        'data-part': string;
+        'data-state': string;
+        'data-collapsible': string | undefined;
+        'data-variant': "inset" | "sidebar" | "floating" | undefined;
+        'data-side': "left" | "right" | undefined;
+    };
+    contentProps: {
+        'data-overlay'?: "" | undefined;
+        'data-scope': string;
+        'data-part': string;
+        'data-state': string;
+        'data-collapsible': string | undefined;
+        'data-variant': "inset" | "sidebar" | "floating" | undefined;
+        'data-side': "left" | "right" | undefined;
+    };
+    headerProps: {
+        'data-overlay'?: "" | undefined;
+        'data-scope': string;
+        'data-part': string;
+        'data-state': string;
+        'data-collapsible': string | undefined;
+        'data-variant': "inset" | "sidebar" | "floating" | undefined;
+        'data-side': "left" | "right" | undefined;
+    };
+    footerProps: {
+        'data-overlay'?: "" | undefined;
+        'data-scope': string;
+        'data-part': string;
+        'data-state': string;
+        'data-collapsible': string | undefined;
+        'data-variant': "inset" | "sidebar" | "floating" | undefined;
+        'data-side': "left" | "right" | undefined;
+    };
+    triggerProps: {
+        'data-overlay'?: "" | undefined;
+        onClick: (event?: React.SyntheticEvent) => void;
+        'aria-controls'?: string | undefined;
+        'data-scope': string;
+        'data-part': string;
+        'data-state': string;
+        'data-collapsible': string | undefined;
+        'data-variant': "inset" | "sidebar" | "floating" | undefined;
+        'data-side': "left" | "right" | undefined;
+        'aria-expanded': boolean;
+    };
+    railProps: {
+        'data-overlay'?: "" | undefined;
+        'data-scope': string;
+        'data-part': string;
+        'aria-label': string;
+        onClick: (event?: React.SyntheticEvent) => void;
+        title: string;
+        'data-state': string;
+        'data-collapsible': string | undefined;
+        'data-variant': "inset" | "sidebar" | "floating" | undefined;
+        'data-side': "left" | "right" | undefined;
+    };
+    mainProps: {
+        'data-overlay'?: "" | undefined;
+        'data-scope': string;
+        'data-part': string;
+        'data-state': string;
+        'data-collapsible': string | undefined;
+        'data-variant': "inset" | "sidebar" | "floating" | undefined;
+        'data-side': "left" | "right" | undefined;
+    };
+    backdropProps: {
+        onClick?: ((event?: React.SyntheticEvent) => void) | undefined;
+        'data-scope': string;
+        'data-part': string;
+    };
+    variant: "inset" | "sidebar" | "floating" | undefined;
+    collapsible: "icon" | "none" | "offcanvas" | undefined;
+    side: "left" | "right" | undefined;
+    overlay: boolean | undefined;
+    openOnHover: boolean | undefined;
+}>;

package/sidebar/useSidebar.props.d.ts

@@ -0,0 +1,2 @@
+import type { UseSidebarProps } from '@primereact/types/headless/sidebar';
+export declare const defaultProps: UseSidebarProps;

package/sidebar/useSidebarLayout.d.ts

@@ -0,0 +1,24 @@
+import type { SidebarRegistryEntry } from '@primereact/types/headless/sidebar';
+import * as React from 'react';
+export declare const useSidebarLayout: (inProps?: unknown) => import("@primereact/types/core").HeadlessInstance<import("@primereact/types/headless/sidebar").UseSidebarLayoutProps, unknown, {
+    state: {
+        open: boolean;
+    };
+    setSidebar: (id: string, entry: SidebarRegistryEntry | null) => void;
+    toggle: (target?: string, event?: React.SyntheticEvent) => void;
+    collapse: (target?: string, event?: React.SyntheticEvent) => void;
+    backdropProps: {
+        'data-scope': "sidebar";
+        'data-part': "backdrop";
+        onClick: () => void;
+        'data-state': "open" | "closed";
+    };
+    backdropMotionProps: {
+        visible: boolean;
+    };
+    mainProps: {
+        inert?: boolean | undefined;
+        'aria-hidden'?: boolean | undefined;
+        onClick?: ((event: React.MouseEvent) => void) | undefined;
+    };
+}>;

package/sidebar/useSidebarLayout.props.d.ts

@@ -0,0 +1,2 @@
+import type { UseSidebarLayoutProps } from '@primereact/types/headless/sidebar';
+export declare const defaultLayoutProps: UseSidebarLayoutProps;

package/sidebar/useSidebarMenuItem.d.ts

@@ -0,0 +1,10 @@
+export declare const useSidebarMenuItem: (inProps?: unknown) => import("@primereact/types/core").HeadlessInstance<import("@primereact/types/headless/sidebar").UseSidebarMenuItemProps, unknown, {
+    state: {
+        isCollapsible: boolean;
+        open: boolean | undefined;
+    };
+    toggle: (event?: React.SyntheticEvent) => void;
+    triggerProps: {};
+    contentProps: {};
+    rootProps: {};
+}>;