@primereact/headless 11.1.0 → 11.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/animateonscroll/index.mjs +1 -1
- package/carousel/index.mjs +1 -1
- package/contextmenu/index.mjs +1 -1
- package/datatable/features/index.mjs +8 -8
- package/datatable/index.mjs +8 -8
- package/datepicker/index.mjs +1 -1
- package/dialog/index.mjs +1 -1
- package/dnd/index.mjs +1 -1
- package/drawer/index.mjs +1 -1
- package/gallery/index.mjs +1 -1
- package/gallery/item/index.mjs +1 -1
- package/inputcolor/index.mjs +1 -1
- package/inputpassword/index.mjs +1 -1
- package/listbox/index.mjs +1 -1
- package/menu/checkboxitem/index.mjs +1 -1
- package/menu/index.mjs +1 -1
- package/menu/radioitem/index.mjs +1 -1
- package/message/index.mjs +1 -1
- package/navigationmenu/index.mjs +1 -1
- package/orderlist/index.mjs +1 -1
- package/organizationchart/index.mjs +1 -1
- package/package.json +8 -4
- package/picklist/index.mjs +1 -1
- package/popover/index.mjs +1 -1
- package/progressbar/index.mjs +1 -1
- package/radiobutton/index.mjs +1 -1
- package/radiobuttongroup/index.mjs +1 -1
- package/scrollarea/index.mjs +1 -1
- package/sidebar/index.mjs +1 -1
- package/sidebar/useSidebar.d.ts +24 -24
- package/speeddial/index.mjs +1 -1
- package/styleclass/index.mjs +1 -1
- package/tabs/index.mjs +1 -1
- package/tabs/useTabs.d.ts +6 -0
- package/terminal/index.mjs +1 -1
- package/toast/index.mjs +1 -1
- package/toaster/index.mjs +1 -1
- package/togglebutton/index.mjs +1 -1
- package/togglebuttongroup/index.mjs +1 -1
- package/toggleswitch/index.mjs +1 -1
- package/toggleswitch/useToggleSwitch.d.ts +14 -0
- package/tooltip/index.mjs +1 -1
- package/tree/index.mjs +1 -1
- package/tree/useTreeKeyboard.d.ts +1 -1
package/tabs/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{withHeadless as
|
|
1
|
+
import{withHeadless as j}from"@primereact/core/headless";import{useControlledState as U}from"@primereact/hooks/use-controlled-state";import{useDirection as $}from"@primereact/hooks/use-direction";import{focus as G,isRTL as W}from"@primeuix/utils";import*as s from"react";var F={value:void 0,defaultValue:void 0,onValueChange:void 0,selectOnFocus:!1,scrollStrategy:"nearest",tabIndex:0};var rt=j({name:"useTabs",defaultProps:F,setup:({props:f,id:O})=>{let[L,V]=U({value:f.value,defaultValue:f.defaultValue,onChange:f.onValueChange}),[p,D]=s.useState(!1),[T,I]=s.useState(!1),l=s.useRef(null),M=s.useRef(null),H=s.useRef(null),d=s.useRef(null),g=s.useRef(null),N=$(l),_={activeTab:L,canScrollPrev:p,canScrollNext:T},v=t=>{L!==t&&V([t,{value:t}])},B=t=>t==null?!1:L===t,b=s.useCallback(()=>{let t=d.current,e=g.current;!t||!e||(t.style.setProperty("--px-active-bar-width",e.offsetWidth+"px"),t.style.setProperty("--px-active-bar-height",e.offsetHeight+"px"),t.style.setProperty("--px-active-bar-left",e.offsetLeft+"px"),t.style.setProperty("--px-active-bar-top",e.offsetTop+"px"))},[]),i=s.useCallback(()=>{if(!l.current)return;let t=l.current,{scrollWidth:e,clientWidth:n}=t,r=Math.abs(t.scrollLeft);D(r>1),I(e-n-r>1)},[]),h=(t,e)=>{let n='[role="tab"]',r='[role="tab"]:not([data-disabled])',a=(m,x)=>{let u=m[x==="next"?"nextElementSibling":"previousElementSibling"];return u?!u.matches(n)||u.hasAttribute("data-disabled")?a(u,x):u:null},o=(m,x)=>{let u=x.parentElement;if(!u)return null;let E=u.querySelectorAll(r);return E.length===0?null:m==="first"?E[0]:E[E.length-1]};if(!t)return;let c=null;switch(e){case"next":c=a(t,"next")??o("first",t);break;case"previous":c=a(t,"previous")??o("last",t);break;case"first":c=o("first",t);break;case"last":c=o("last",t);break}c&&G(c)},w=(t,e)=>{switch(t.code){case"ArrowRight":h(t.currentTarget,"next");break;case"ArrowLeft":h(t.currentTarget,"previous");break;case"Home":h(t.currentTarget,"first");break;case"End":h(t.currentTarget,"last");break;case"Enter":case"NumpadEnter":case"Space":v(e);break;case"Tab":return;default:break}t.preventDefault()},y=(t,e)=>{f.selectOnFocus||v(e)},A=(t,e)=>{f.selectOnFocus&&v(e)},{scrollStrategy:R}=f,C=s.useCallback(()=>{let t=l.current,e=g.current;if(!t||!e||R===!1)return;if(typeof R=="function"){R(t,e);return}let n=t.getBoundingClientRect(),r=e.getBoundingClientRect(),a;if(R==="center")a=r.left+r.width/2-(n.left+n.width/2);else{let o=n.width*.1;if(r.left<n.left+o)a=r.left-(n.left+o);else if(r.right>n.right-o)a=r.right-(n.right-o);else return}t.scrollBy({left:a,behavior:"smooth"})},[R]);s.useEffect(()=>{let t=requestAnimationFrame(()=>{b(),C()});return()=>cancelAnimationFrame(t)},[L,b,C]),s.useEffect(()=>{let t=requestAnimationFrame(()=>{b(),i()});return()=>cancelAnimationFrame(t)},[N,b,i]),s.useEffect(()=>{if(!l.current)return;let t=l.current,e=0,n=()=>{i(),b()},r=new MutationObserver(()=>{cancelAnimationFrame(e),e=requestAnimationFrame(n)});r.observe(t,{childList:!0,subtree:!0}),i();let a=new ResizeObserver(n);return a.observe(t),window.addEventListener("resize",n),()=>{cancelAnimationFrame(e),r.disconnect(),a.disconnect(),window.removeEventListener("resize",n)}},[b,i]);let S=s.useCallback(()=>{i()},[i]),P=()=>{let[t,e]=[M.current,H.current],n=0;return t&&e&&(n=(t?.offsetWidth||0)+(e?.offsetWidth||0)),n},q=()=>{let t=l.current;if(!t)return;let e=P(),n=t.clientWidth-e,r=Math.abs(t.scrollLeft),a=n*.8,o=r-a,c=Math.max(o,0);t.scrollLeft=W(t)?-1*c:c},z=()=>{let t=l.current;if(!t)return;let e=P(),n=t.clientWidth-e,r=Math.abs(t.scrollLeft),a=n*.8,o=r+a,c=t.scrollWidth-n,m=Math.min(o,c);t.scrollLeft=W(t)?-1*m:m},k=s.useMemo(()=>({...p&&{"data-can-scroll-prev":""},...T&&{"data-can-scroll-next":""}}),[p,T]),K=s.useMemo(()=>({"data-scope":"tabs","data-part":"content",onScroll:S,...p&&{"data-can-scroll-prev":""},...T&&{"data-can-scroll-next":""}}),[S,p,T]);return{state:_,updateValue:v,isItemActive:B,focusTab:h,onTabKeyDown:w,onTabClick:y,onTabFocus:A,getTabProps:(t,e)=>{let n=B(t);return{"data-scope":"tabs","data-part":"tab",role:"tab",tabIndex:n?f.tabIndex??0:-1,ref:n?g:void 0,disabled:e,"aria-selected":n,"aria-disabled":e,"aria-controls":`${O}_tabpanel_${t}`,...n&&{"data-active":""},...e&&{"data-disabled":""},...k,onClick:r=>y(r,t),onFocus:r=>A(r,t),onKeyDown:r=>w(r,t)}},getIndicatorProps:()=>({"data-scope":"tabs","data-part":"indicator",ref:d,style:{"--px-active-bar-width":d.current?.offsetWidth+"px","--px-active-bar-height":d.current?.offsetHeight+"px","--px-active-bar-left":d.current?.offsetLeft+"px","--px-active-bar-top":d.current?.offsetTop+"px"}}),scrollPrev:q,scrollNext:z,updateScrollState:i,onContentScroll:S,scrollStateAttrs:k,contentProps:K,contentRef:l,prevButtonRef:M,nextButtonRef:H,activeBarRef:d,activeTabRef:g,updateActiveBar:b}}});export{F as defaultProps,rt as useTabs};
|
package/tabs/useTabs.d.ts
CHANGED
|
@@ -19,6 +19,8 @@ export declare const useTabs: (inProps?: unknown) => import("@primereact/types/c
|
|
|
19
19
|
'data-can-scroll-prev'?: "" | undefined;
|
|
20
20
|
'data-disabled'?: "" | undefined;
|
|
21
21
|
'data-active'?: "" | undefined;
|
|
22
|
+
'data-scope': "tabs";
|
|
23
|
+
'data-part': "tab";
|
|
22
24
|
role: "tab";
|
|
23
25
|
tabIndex: number;
|
|
24
26
|
ref: React.RefObject<HTMLButtonElement> | undefined;
|
|
@@ -28,6 +30,8 @@ export declare const useTabs: (inProps?: unknown) => import("@primereact/types/c
|
|
|
28
30
|
'aria-controls': string;
|
|
29
31
|
};
|
|
30
32
|
getIndicatorProps: () => {
|
|
33
|
+
'data-scope': "tabs";
|
|
34
|
+
'data-part': "indicator";
|
|
31
35
|
ref: React.RefObject<HTMLSpanElement>;
|
|
32
36
|
style: React.CSSProperties;
|
|
33
37
|
};
|
|
@@ -42,6 +46,8 @@ export declare const useTabs: (inProps?: unknown) => import("@primereact/types/c
|
|
|
42
46
|
contentProps: {
|
|
43
47
|
'data-can-scroll-next'?: "" | undefined;
|
|
44
48
|
'data-can-scroll-prev'?: "" | undefined;
|
|
49
|
+
'data-scope': "tabs";
|
|
50
|
+
'data-part': "content";
|
|
45
51
|
onScroll: () => void;
|
|
46
52
|
};
|
|
47
53
|
contentRef: React.RefObject<HTMLDivElement | null>;
|
package/terminal/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{withHeadless as
|
|
1
|
+
import{withHeadless as S}from"@primereact/core/headless";import{focus as b}from"@primeuix/utils";import*as t from"react";var T={prompt:void 0,onCommand:void 0};var L=S({name:"useTerminal",defaultProps:T,setup({props:h,elementRef:c}){let{onCommand:m}=h,[s,p]=t.useState(""),[a,l]=t.useState([]),[f,i]=t.useState(0),r=t.useRef(null),g={commandText:s,commands:a},u=t.useCallback(()=>{l([]),i(0)},[]),d=t.useCallback(n=>{n===null?u():n!==void 0&&l(e=>{if(e.length===0)return e;let o=[...e];return o[o.length-1].response=n,o})},[u]),P=t.useCallback(async n=>{if(!m)return;let e=m(n);if(e instanceof Promise){let o=await e;d(o)}else d(e)},[m,d]);t.useEffect(()=>{c.current&&(c.current.scrollTop=c.current.scrollHeight)});let C=()=>{r.current&&b(r.current)},R=n=>{switch(n.code){case"ArrowUp":if(a&&a.length){let e=f-1<0?a.length-1:f-1,o=a[e];i(e),p(o.text)}break;case"Enter":case"NumpadEnter":if(s){let e=[...a];e.push({text:s}),i(o=>o+1),p(""),l(e),P(s)}break;default:break}},x=n=>{p(n.target.value)};return{state:g,inputRef:r,rootProps:{"data-scope":"terminal","data-part":"root",onClick:C},promptValueProps:{ref:r,"data-scope":"terminal","data-part":"promptvalue",value:s,type:"text",autoComplete:"off",onChange:x,onKeyDown:R},commandResponseProps:{"data-scope":"terminal","data-part":"commandresponse","aria-live":"polite"},onClick:C,onKeyDown:R,onInputChange:x,clear:u}}});export{T as defaultProps,L as useTerminal};
|
package/toast/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{withHeadless as
|
|
1
|
+
import{withHeadless as ht}from"@primereact/core/headless";import{defaultToaster as xt}from"@primereact/headless/toaster";import{useMountEffect as yt}from"@primereact/hooks/use-mount-effect";import{useVisibilityChange as Rt}from"@primereact/hooks/use-visibility-change";import*as s from"react";var tt={toast:{},toaster:void 0};var bt=50,wt=.11,Ct=ht({name:"useToast",defaultProps:tt,setup:({props:et,elementRef:r})=>{let{toast:t,toaster:a}=et,c=s.useRef(a);c.current=a;let g=s.useMemo(()=>{if(!a?.toasts||!Array.isArray(a?.toasts))return 0;let e=a?.toasts.findIndex(o=>o.id===t.id)??-1;return e===-1?0:e},[a?.toasts,t.id]),A=Rt(),[y,st]=s.useState(!1),[p,S]=s.useState(null),[O,v]=s.useState(null),[R,nt]=s.useState(!1),[k,M]=s.useState(!1),[P,ot]=s.useState(!1),[V,F]=s.useState(!1),[E,H]=s.useState(0),[D,N]=s.useState(0),b=t.dismissible!==!1&&!t.loading,h=s.useRef(t.duration||a?.props.timeout||6e3),B=s.useRef(0),l=s.useRef(null),I=s.useRef(null),C=s.useRef(0),Y=s.useRef(0),w=s.useMemo(()=>a?.state.heights?.findIndex(e=>e.toastId===t.id)??0,[a?.state.heights,t.id]),U=s.useMemo(()=>t.duration||a?.props.timeout||6e3,[t.duration,a?.props.timeout]),m=s.useRef(0);m.current=a?.state.heights?.reduce((e,o,n)=>n>=w?e:e+o.height,0)??0;let X=t.loading===!0;s.useEffect(()=>{h.current=U},[U]),yt(()=>{nt(!0)}),s.useEffect(()=>{let e=r.current;if(!e||!t.id)return;let o=e.getBoundingClientRect().height;return N(o),c.current?.setHeights(n=>[{toastId:t.id,height:o},...n]),()=>c.current?.setHeights(n=>n.filter(i=>i.toastId!==t.id))},[t.id,r]),s.useLayoutEffect(()=>{if(!R||!t.id||!c.current?.setHeights)return;let e=r.current;if(!e)return;let o=e.style.height;e.style.height="auto";let n=e?.getBoundingClientRect().height;e.style.height=o,N(n),c.current?.setHeights(i=>i.find(u=>u.toastId===t.id)?i.map(u=>u.toastId===t.id?{...u,height:n}:u):[{toastId:t.id,height:n},...i])},[R,t.title,t.description,t.id,t.render,t.action,t.icon,r]);let d=s.useCallback(()=>{c.current?.handleFocusManagement(r.current??null),st(!0),H(m.current),c.current?.setHeights(e=>e.filter(o=>o.toastId!==t.id)),requestAnimationFrame(()=>{let e=r.current;if(!e)return;let n=getComputedStyle(e).transitionDuration,i=parseFloat(n)*(n.includes("ms")?1:1e3);setTimeout(()=>{t.id!==void 0&&c.current?.removeFromQueue(t.id)},i??10)})},[t,r]);s.useEffect(()=>xt.subscribe(e=>{if(e.action!=="dismiss")return;let o=e.id!==void 0&&e.id===t.id,n=e.id===void 0;(o||n)&&(d(),t.onDismiss?.(t))}),[t,d]);let $=s.useCallback(()=>{if(Y.current<C.current){let e=new Date().getTime()-C.current;h.current=h.current-e}Y.current=new Date().getTime()},[]),_=s.useCallback(()=>{h.current!==1/0&&(C.current=new Date().getTime(),I.current=setTimeout(()=>{t.onTimeout?.(t),d()},h.current))},[t,d]);s.useEffect(()=>{if(!(t.loading||t.duration===1/0))return a?.state.isHovered||a?.state.isInteracting||!A?$():_(),()=>{I.current&&clearTimeout(I.current)}},[a?.state.isHovered,a?.state.isInteracting,t,d,A,$,_]);let q=()=>{M(!1),S(null),l.current=null},z=e=>{e.button===0&&(X||!b||(B.current=new Date().getTime(),H(m.current),e.target.setPointerCapture(e.pointerId),M(!0),l.current={x:e.clientX,y:e.clientY}))},Q=e=>{if(!l.current||!b||(window.getSelection()?.toString().length??0)>0)return;let o=e.clientY-l.current.y,n=e.clientX-l.current.x,i=Math.abs(n)>1||Math.abs(o)>1,L=(a?.props.position??"bottom-right").split("-"),u=L[0],J=L[1];!p&&i&&S(Math.abs(n)>Math.abs(o)?"x":"y");let f={x:0,y:0},K=T=>{let Z=T*(gt=>1/(1.5+Math.abs(gt)/20))(T);return Math.abs(Z)<Math.abs(T)?Z:T};p==="x"?f.x=J==="left"&&n<0||J==="right"&&n>0?n:K(n):p==="y"&&(f.y=u==="top"&&o<0||u==="bottom"&&o>0?o:K(o)),(Math.abs(f.x)>0||Math.abs(f.y)>0)&&F(!0),r.current.style.setProperty("--px-swipe-amount-x",`${f.x}px`),r.current.style.setProperty("--px-swipe-amount-y",`${f.y}px`)},W=()=>{if(P||!b)return;M(!1),l.current=null;let e=Number(r.current.style.getPropertyValue("--px-swipe-amount-x").replace("px","")||0),o=Number(r.current.style.getPropertyValue("--px-swipe-amount-y").replace("px","")||0),n=p==="x"?e:o,i=Math.abs(n)/(new Date().getTime()-(B.current??0));if(Math.abs(n)>=bt||i>wt){H(m.current),v(p==="x"?e>0?"right":"left":o>0?"down":"up"),d(),t.onDismiss?.(t),ot(!0);return}else r.current.style.setProperty("--px-swipe-amount-x","0px"),r.current.style.setProperty("--px-swipe-amount-y","0px");F(!1),S(null)},j=()=>{X||!b||(d(),t.onDismiss?.(t))},at=s.useCallback(e=>{r.current=e??void 0},[r]),rt={mounted:R,swiping:k,swipeOut:P,swipeOutDirection:O,swipeDirection:p,initialHeight:D,isSwiped:V,offsetBeforeRemove:E,removed:y},x=w+1<=(a?.props.limit||3),G=g===0,it={ref:at,"data-scope":"toast","data-part":"root",tabIndex:x?0:-1,role:"alert",inert:!x,"aria-live":"assertive","aria-atomic":"true","aria-hidden":!x,"data-swipe-direction":O,"data-index":g,...R&&{"data-mounted":""},...y&&{"data-removed":""},...V&&{"data-swiped":""},...x&&{"data-visible":""},...k&&{"data-swiping":""},...t.dismissible&&{"data-dismissible":""},...a?.state.isExpanded&&{"data-expanded":""},...G&&{"data-front":""},...P&&{"data-swipe-out":""},style:{"--px-initial-height":D?`${D}px`:void 0,"--px-toast-index":y?g:w,"--px-toast-z-index":(a?.toasts?.length||0)-g,"--px-toast-offset":(y?E:m.current)+"px","--px-swipe-amount-x":"0px","--px-swipe-amount-y":"0px"},onPointerDown:z,onPointerMove:Q,onPointerUp:W,onDragEnd:q},ct={"data-scope":"toast","data-part":"action"},ut={"data-scope":"toast","data-part":"content"},dt={"data-scope":"toast","data-part":"message"},pt={"data-scope":"toast","data-part":"close",onClick:j},lt={"data-scope":"toast","data-part":"description"},mt={"data-scope":"toast","data-part":"icon"},ft={"data-scope":"toast","data-part":"title"};return{state:rt,offset:m.current,offsetBeforeRemove:E,index:g,visibleIndex:w,isVisible:x,isFront:G,toaster:a,rootProps:it,actionProps:ct,contentProps:ut,closeProps:pt,messageProps:dt,descriptionProps:lt,iconProps:mt,titleProps:ft,onPointerDown:z,onPointerMove:Q,onPointerUp:W,onDragEnd:q,handleCloseOnClick:j}}});export{tt as defaultProps,Ct as useToast};
|
package/toaster/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var
|
|
1
|
+
var C=0,D=()=>`toast-${++C}-${Date.now()}`,S=e=>typeof e=="number"&&!Number.isNaN(e)||typeof e=="string"&&e.length>0?e:D();function k(){let e=[],f=new Set,T=s=>{f.forEach(t=>t(s))},g=()=>e,y=s=>(f.add(s),()=>{f.delete(s)}),m=s=>{let t=S(s.id),i=s.dismissible??!0,c=e.findIndex(o=>o.id===t);if(c!==-1){let o={...e[c],...s,id:t,dismissible:i};e=[...e.slice(0,c),o,...e.slice(c+1)],T({action:"update",toast:o})}else{let o={...s,id:t,dismissible:i};e=[o,...e],T({action:"add",toast:o})}return t},E=(s,t)=>m({...t,id:s}),u=s=>{T({action:"dismiss",id:s})},p=s=>{let t=e.filter(i=>i.id!==s);t.length!==e.length&&(e=t,T({action:"remove",id:s}))},h=async(s,t)=>{let i=S(t.loading.id);m({...t.loading,id:i,loading:!0,dismissible:t.loading.dismissible??!1});try{let c=await s,o=typeof t.success=="function"?t.success(c):t.success;return o?m({icon:void 0,...o,id:i,severity:o.severity??"success",loading:!1}):u(i),c}catch(c){let o=typeof t.error=="function"?t.error(c):t.error;throw o?m({icon:void 0,...o,id:i,severity:o.severity??"error",loading:!1}):u(i),c}},d=s=>t=>m({...t,severity:s});return{snapshot:g,subscribe:y,add:m,update:E,dismiss:u,remove:p,promise:h,success:d("success"),info:d("info"),warn:d("warn"),error:d("error"),secondary:d("secondary"),contrast:d("contrast")}}var a=k(),U=e=>a.add(e),N=Object.assign(U,{update:a.update,dismiss:a.dismiss,promise:a.promise,success:a.success,info:a.info,warn:a.warn,error:a.error,secondary:a.secondary,contrast:a.contrast});import{withHeadless as $}from"@primereact/core/headless";import*as r from"react";var L={timeout:6e3,gap:12,position:"top-right",mode:"stacked",group:void 0,limit:3};var Q=$({name:"useToaster",defaultProps:L,setup:({props:e})=>{let f=r.useSyncExternalStore(a.subscribe,a.snapshot,a.snapshot),T=r.useCallback(n=>{a.remove(n)},[]),g=r.useMemo(()=>e.group?f.filter(n=>n.group===e.group):f.filter(n=>!n.group),[f,e.group]),[y,m]=r.useState([]),[E,u]=r.useState(!1),[p,h]=r.useState(!1),d=r.useRef(!1),s=e.mode==="expanded"||E,t={isExpanded:s,isHovered:E,isInteracting:p,heights:y},i=()=>{u(!0)},c=()=>{u(!0)},o=r.useCallback(()=>{!p&&!d.current&&u(!1)},[p]),x=()=>{u(!1)},b=n=>{n.target instanceof HTMLElement&&n.target.dataset.dismissible==="false"||h(!0)},M=()=>{h(!1)},I=n=>{let v=n.currentTarget,l=document.activeElement;l&&l.matches(":focus-visible")&&v.contains(l)&&(d.current=!0,u(!0))},R=r.useCallback(n=>{let v=n.currentTarget,l=n.relatedTarget;l&&v.contains(l)||(d.current=!1,!p&&u(!1))},[p]),H=n=>{if(!n)return;let v=document.activeElement;if(!n.contains(v))return;let l=n.nextElementSibling,P=n.previousElementSibling;requestAnimationFrame(()=>{l?l.focus({preventScroll:!0}):P&&P.focus({preventScroll:!0})})};r.useEffect(()=>{g.length<=1&&u(!1)},[g]);let w={"data-scope":"toaster","data-part":"root","data-position":e.position},F=r.useMemo(()=>({"data-scope":"toaster","data-part":"region",role:"region",tabIndex:0,onMouseEnter:i,onMouseLeave:o,onMouseMove:c,onDragEnd:x,onPointerDown:b,onPointerUp:M,onFocus:I,onBlur:R,"data-position":e.position,...s&&{"data-expanded":""},style:{"--px-gap":`${e.gap}px`,"--px-front-toast-height":`${y?.[0]?.height||0}px`}}),[e.position,e.gap,s,y,R,o]);return{state:t,toasts:g,setHeights:m,removeFromQueue:T,rootProps:w,regionProps:F,onRegionMouseEnter:i,onRegionMouseMove:c,onRegionMouseLeave:o,onRegionDragEnd:x,onRegionPointerDown:b,onRegionPointerUp:M,onRegionFocus:I,onRegionBlur:R,handleFocusManagement:H}}});export{k as createToastManager,L as defaultProps,a as defaultToaster,N as toast,Q as useToaster};
|
package/togglebutton/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{withHeadless as
|
|
1
|
+
import{withHeadless as p}from"@primereact/core/headless";import{useControlledState as g}from"@primereact/hooks/use-controlled-state";var n={pressed:void 0,defaultPressed:void 0,disabled:void 0,invalid:void 0,onPressedChange:void 0};var P=p({name:"useToggleButton",defaultProps:n,setup({props:s}){let[o,r]=g({value:s.pressed,defaultValue:s.defaultPressed??!1,onChange:s.onPressedChange}),d={pressed:o},a=e=>{let t=!o;r([t,{originalEvent:e,pressed:t}])};return{state:d,getRootProps:(e,t)=>({"data-scope":"togglebutton","data-part":"root",disabled:e,"aria-pressed":o,"aria-disabled":e,...o&&{"data-pressed":""},...e&&{"data-disabled":""},...!!t&&{"data-invalid":""},onClick:a}),getIndicatorProps:(e,t)=>({"data-scope":"togglebutton","data-part":"indicator",...o&&{"data-pressed":""},...e&&{"data-disabled":""},...!!t&&{"data-invalid":""}}),onChange:a}}});export{n as defaultProps,P as useToggleButton};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{withHeadless as
|
|
1
|
+
import{withHeadless as m}from"@primereact/core/headless";import{useControlledState as g}from"@primereact/hooks/use-controlled-state";import*as u from"react";var n={value:void 0,defaultValue:void 0,onValueChange:void 0,multiple:!1,allowEmpty:!0,disabled:!1,invalid:!1};var h=m({name:"useToggleButtonGroup",defaultProps:n,setup({props:e}){let[l,o]=g({value:e.value,defaultValue:e.defaultValue,onChange:e.onValueChange}),s={value:l},r=u.useCallback(t=>{let a=null;if(e.multiple){if(a=t.pressed?[...l||[],t.value]:(l||[]).filter(p=>p!==t.value),!e.allowEmpty&&a.length===0)return}else if(a=t.pressed?t.value:null,!e.allowEmpty&&a===null)return;o?.([a,{originalEvent:t.originalEvent,value:a}])},[l,o,e.allowEmpty,e.multiple]),d=(t,a)=>{if(t!==void 0)return e.multiple?t?.includes(a):t===a},i={role:"group","data-scope":"togglebuttongroup","data-part":"root",...e.disabled&&{"data-disabled":""},...e.invalid&&{"data-invalid":""},...e.multiple&&{"data-multiple":""},...e.allowEmpty&&{"data-allow-empty":""}};return{state:s,rootProps:i,updateChange:r,isPressed:d}}});export{n as defaultProps,h as useToggleButtonGroup};
|
package/toggleswitch/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{withHeadless as
|
|
1
|
+
import{withHeadless as u}from"@primereact/core/headless";import{useControlledState as g}from"@primereact/hooks/use-controlled-state";var n={checked:void 0,defaultChecked:void 0,disabled:!1,invalid:!1,tabIndex:void 0,ariaLabel:void 0,ariaLabelledby:void 0,onFocus:void 0,onBlur:void 0,onCheckedChange:void 0};var w=u({name:"useToggleSwitch",defaultProps:n,setup({props:e}){let[a,c]=g({value:e.checked,defaultValue:e.defaultChecked??!1,onChange:e.onCheckedChange}),s={checked:a},t=r=>{let d=!a;c([d,{originalEvent:r,checked:d}])},o={"data-scope":"toggleswitch","data-part":"root",...a?{"data-checked":""}:{"data-unchecked":""},...e.disabled&&{"data-disabled":""},...e.invalid&&{"data-invalid":""}},i={type:"checkbox","data-scope":"toggleswitch","data-part":"input",role:"switch",checked:a,disabled:e.disabled,"aria-checked":a,...e.invalid&&{"aria-invalid":!0},...e.tabIndex!==void 0&&{tabIndex:e.tabIndex},...e.ariaLabelledby&&{"aria-labelledby":e.ariaLabelledby},...e.ariaLabel&&{"aria-label":e.ariaLabel},...e.onFocus&&{onFocus:e.onFocus},...e.onBlur&&{onBlur:e.onBlur},onChange:t},l={"data-scope":"toggleswitch","data-part":"control",...a?{"data-checked":""}:{"data-unchecked":""},...e.disabled&&{"data-disabled":""},...e.invalid&&{"data-invalid":""}},h={"data-scope":"toggleswitch","data-part":"handle",...a?{"data-checked":""}:{"data-unchecked":""},...e.disabled&&{"data-disabled":""},...e.invalid&&{"data-invalid":""}};return{state:s,onChange:t,rootProps:o,inputProps:i,controlProps:l,handleProps:h}}});export{n as defaultProps,w as useToggleSwitch};
|
|
@@ -8,10 +8,14 @@ export declare const useToggleSwitch: (inProps?: unknown) => import("@primereact
|
|
|
8
8
|
'data-invalid'?: "" | undefined;
|
|
9
9
|
'data-disabled'?: "" | undefined;
|
|
10
10
|
'data-checked': "";
|
|
11
|
+
'data-scope': "toggleswitch";
|
|
12
|
+
'data-part': "root";
|
|
11
13
|
} | {
|
|
12
14
|
'data-invalid'?: "" | undefined;
|
|
13
15
|
'data-disabled'?: "" | undefined;
|
|
14
16
|
'data-unchecked': "";
|
|
17
|
+
'data-scope': "toggleswitch";
|
|
18
|
+
'data-part': "root";
|
|
15
19
|
};
|
|
16
20
|
inputProps: {
|
|
17
21
|
onChange: (event: UseToggleSwitchChangeEvent) => void;
|
|
@@ -22,6 +26,8 @@ export declare const useToggleSwitch: (inProps?: unknown) => import("@primereact
|
|
|
22
26
|
tabIndex?: number | undefined;
|
|
23
27
|
'aria-invalid'?: true | undefined;
|
|
24
28
|
type: "checkbox";
|
|
29
|
+
'data-scope': "toggleswitch";
|
|
30
|
+
'data-part': "input";
|
|
25
31
|
role: "switch";
|
|
26
32
|
checked: boolean | undefined;
|
|
27
33
|
disabled: boolean | undefined;
|
|
@@ -31,18 +37,26 @@ export declare const useToggleSwitch: (inProps?: unknown) => import("@primereact
|
|
|
31
37
|
'data-invalid'?: "" | undefined;
|
|
32
38
|
'data-disabled'?: "" | undefined;
|
|
33
39
|
'data-checked': "";
|
|
40
|
+
'data-scope': "toggleswitch";
|
|
41
|
+
'data-part': "control";
|
|
34
42
|
} | {
|
|
35
43
|
'data-invalid'?: "" | undefined;
|
|
36
44
|
'data-disabled'?: "" | undefined;
|
|
37
45
|
'data-unchecked': "";
|
|
46
|
+
'data-scope': "toggleswitch";
|
|
47
|
+
'data-part': "control";
|
|
38
48
|
};
|
|
39
49
|
handleProps: {
|
|
40
50
|
'data-invalid'?: "" | undefined;
|
|
41
51
|
'data-disabled'?: "" | undefined;
|
|
42
52
|
'data-checked': "";
|
|
53
|
+
'data-scope': "toggleswitch";
|
|
54
|
+
'data-part': "handle";
|
|
43
55
|
} | {
|
|
44
56
|
'data-invalid'?: "" | undefined;
|
|
45
57
|
'data-disabled'?: "" | undefined;
|
|
46
58
|
'data-unchecked': "";
|
|
59
|
+
'data-scope': "toggleswitch";
|
|
60
|
+
'data-part': "handle";
|
|
47
61
|
};
|
|
48
62
|
}>;
|
package/tooltip/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{withHeadless as
|
|
1
|
+
import{withHeadless as ce}from"@primereact/core/headless";import{useControlledState as ue}from"@primereact/hooks/use-controlled-state";import*as t from"react";var _={anchor:void 0,open:void 0,defaultOpen:!1,onOpenChange:void 0,onExitComplete:void 0,disabled:!1,openDelay:600,closeDelay:100,interactive:!0,tooltipManager:void 0};var ve=ce({name:"useTooltip",defaultProps:_,setup:({props:c})=>{let{tooltipManager:n,openDelay:G=600,closeDelay:C=0,interactive:b=!0,disabled:I,onExitComplete:O}=c,[o,N]=ue({value:c.open,defaultValue:c.defaultOpen,onChange:c.onOpenChange}),[H,S]=t.useState(c.anchor??null),[k,V]=t.useState(null),[j,q]=t.useState(null),[z,J]=t.useState(null),[d,i]=t.useState(void 0),[Q,x]=t.useState(!!o),u=t.useId(),v=t.useRef(null),T=t.useRef(null),M=t.useRef(null),K=t.useRef(null),R=t.useRef(null),a=t.useRef(null),P=t.useRef(!1),D=t.useRef(!1),L=t.useRef(o);L.current=o;let W=t.useCallback(e=>{c.anchor==null&&e!==v.current&&(v.current=e,S(e))},[c.anchor]);t.useEffect(()=>{c.anchor!==void 0&&(v.current=c.anchor,S(c.anchor??null))},[c.anchor]),t.useEffect(()=>{o&&x(!0)},[o]);let X=t.useCallback(e=>{e!==T.current&&(T.current=e,V(e))},[]),Y=t.useCallback(e=>{e!==K.current&&(K.current=e,J(e))},[]),Z=t.useCallback(e=>{e!==M.current&&(M.current=e,q(e))},[]),$=t.useCallback(()=>{},[]),ee=t.useCallback(()=>{O?.()},[O]),E=()=>{R.current&&(clearTimeout(R.current),R.current=null),a.current&&(clearTimeout(a.current),a.current=null)};function y(e,r){N([e,{originalEvent:r,value:e}])}let h=t.useRef(()=>{});h.current=()=>{E(),i("delay"),y(!1),n?.notifyClose?.(u)};let F=(e,r)=>{if(I)return;E();let l=n?.state?.isInstantPhase,f=n?.state?.lastClosedTooltipId,p=n?.state?.currentOpenTooltipId,w=n?.state?.openDelay,g=p!=null&&p!==u,B=l&&f===u,A=g||l&&f!==null&&f!==u,U=A||B?0:e??w??G;g&&n?.closeCurrentTooltip?.(),i(r||(A?"delay":void 0)),U===0?(y(!0),n?.notifyOpen?.(u,()=>h.current())):R.current=window.setTimeout(()=>{y(!0),n?.notifyOpen?.(u,()=>h.current()),R.current=null},U)},m=(e,r)=>{E();let l=n?.state?.isInstantPhase,f=n?.state?.closeDelay,p=l?0:e??f??C;r&&i(r),p===0?(y(!1),n?.notifyClose?.(u),r||i(void 0)):a.current=window.setTimeout(()=>{y(!1),n?.notifyClose?.(u),r||i(void 0),a.current=null},p)},s=t.useRef({onTriggerPointerEnter:()=>{},onTriggerPointerLeave:()=>{},onPositionerPointerLeave:()=>{},onFocus:()=>{},onBlur:()=>{},onDocumentPointerDown:e=>{},onKeyDown:e=>{}});s.current.onTriggerPointerEnter=()=>{P.current=!1,F()},s.current.onTriggerPointerLeave=()=>{if(!L.current){E();return}if(n){let e=n.state?.closeDelay??C;a.current=window.setTimeout(()=>{a.current=null,m(0)},e)}else m()},s.current.onPositionerPointerLeave=()=>{if(P.current=!1,n){let e=n.state?.closeDelay??C;a.current=window.setTimeout(()=>{a.current=null,m(0)},e)}else m()},s.current.onFocus=()=>{if(D.current){D.current=!1;return}v.current?.matches(":focus-visible")&&F(0,"focus")},s.current.onBlur=()=>{D.current=!1,document.hasFocus()&&m(0,"focus")},s.current.onDocumentPointerDown=e=>{L.current&&(b&&T.current?.contains(e.target)||(D.current=!0,m(0,"dismiss")))},s.current.onKeyDown=e=>{e.key==="Escape"&&L.current&&m(0,"dismiss")},t.useEffect(()=>{let e=v.current;if(!e||I)return;let r=()=>s.current.onTriggerPointerEnter(),l=()=>s.current.onTriggerPointerLeave(),f=()=>s.current.onFocus(),p=()=>s.current.onBlur(),w=g=>s.current.onKeyDown(g);return e.addEventListener("pointerenter",r),e.addEventListener("pointerleave",l),e.addEventListener("focus",f),e.addEventListener("blur",p),e.addEventListener("keydown",w),()=>{e.removeEventListener("pointerenter",r),e.removeEventListener("pointerleave",l),e.removeEventListener("focus",f),e.removeEventListener("blur",p),e.removeEventListener("keydown",w)}},[H,I]),t.useEffect(()=>{if(!o)return;let e=r=>s.current.onDocumentPointerDown(r);return document.addEventListener("pointerdown",e),()=>{document.removeEventListener("pointerdown",e)}},[o]),t.useEffect(()=>{let e=T.current;if(!e||!o||!b)return;let r=()=>{P.current=!0,a.current&&(clearTimeout(a.current),a.current=null)},l=()=>s.current.onPositionerPointerLeave();return e.addEventListener("pointerenter",r),e.addEventListener("pointerleave",l),()=>{e.removeEventListener("pointerenter",r),e.removeEventListener("pointerleave",l),P.current=!1}},[k,o,b]),t.useEffect(()=>{o&&n&&n.notifyOpen(u,()=>h.current())},[o,u,n]),t.useEffect(()=>()=>E(),[]);let te={open:o,rendered:Q,anchorElement:H,positionerElement:k,popupElement:j,arrowElement:z,instantType:d},ne={...d&&{"data-instant":d}},re={"data-scope":"tooltip","data-part":"trigger",ref:W,...o&&{"data-popup-open":""}},oe={"data-scope":"tooltip","data-part":"positioner",ref:X,...o&&{"data-open":""}},se={"data-scope":"tooltip","data-part":"popup",ref:Z,...o&&{"data-open":""},...d&&{"data-instant":""},"data-instant-type":d},ae={"data-scope":"tooltip","data-part":"arrow",ref:Y,...o&&{"data-open":""},...d&&{"data-instant":d}};return{state:te,popupRef:M,rootProps:ne,triggerProps:re,positionerProps:oe,popupProps:se,arrowProps:ae,setRendered:x,onOpenComplete:$,onCloseComplete:ee}}});export{_ as defaultProps,ve as useTooltip};
|
package/tree/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{withHeadless as Ue}from"@primereact/core/headless";import{useControlledState as Ee}from"@primereact/hooks/use-controlled-state";import*as M from"react";var pe={value:void 0,expandedKeys:void 0,defaultExpandedKeys:void 0,selectionKeys:void 0,defaultSelectionKeys:void 0,selectionMode:void 0,metaKeySelection:!1,highlightOnSelect:!1,draggable:void 0,droppable:void 0,draggableScope:void 0,droppableScope:void 0,onExpandedChange:void 0,onSelectionChange:void 0,onToggle:void 0,onExpand:void 0,onCollapse:void 0,onClick:void 0,onSelect:void 0,onUnselect:void 0,onMove:void 0,validateMove:void 0,onFocusedKeyChange:void 0,loading:!1};import*as ne from"react";var V={isDragging:!1,dragNode:null,dragScope:null,dragNodeSubNodes:null,dragNodeIndex:null,sourceTreeId:null,sourceCommit:null},le=new Set,ie=new Set,A={getDragState(){return V},startDrag(e){V.isDragging=!0,V.dragNode=e.node,V.dragScope=e.scope??null,V.dragNodeSubNodes=e.subNodes??null,V.dragNodeIndex=e.index??null,V.sourceTreeId=e.sourceTreeId??null,V.sourceCommit=e.sourceCommit??null,le.forEach(t=>t(e))},stopDrag(e){V.isDragging=!1,V.dragNode=null,V.dragScope=null,V.dragNodeSubNodes=null,V.dragNodeIndex=null,V.sourceTreeId=null,V.sourceCommit=null,ie.forEach(t=>t(e))},onDragStart(e){return le.add(e),()=>le.delete(e)},onDragStop(e){return ie.add(e),()=>ie.delete(e)}};function Te(e,t){if(e.key===t)return!0;if(!e.children||e.children.length===0)return!1;for(let c of e.children)if(Te(c,t))return!0;return!1}function ye({props:e,setDragHoverState:t}){ne.useEffect(()=>{if(!e.droppable)return;let s=A.onDragStop(()=>{t(!1)});return()=>{s()}},[e.droppable,t]);let c=ne.useCallback(s=>{let{dragNode:i,dragScope:k}=A.getDragState();return!(!i||!Pe(k,e.droppableScope)||s&&i===s)},[e.droppableScope]),a=s=>{e.droppable&&c()?s.dataTransfer.dropEffect="copy":s.dataTransfer.dropEffect="none",s.preventDefault()},p=()=>{e.droppable&&c()&&t(!0)},P=s=>{if(!e.droppable)return;let i=s.currentTarget.getBoundingClientRect();(s.clientX>=i.right||s.clientX<=i.left||s.clientY>=i.bottom||s.clientY<=i.top)&&t(!1)},C=(s,i,k)=>{let{sourceCommit:U}=A.getDragState(),B=e.value||[],I=B.some(L=>Te(L,i.key)),W=[...B,i],w={originalEvent:s,value:W,dragNode:i,dropNode:null,dropIndex:W.length-1,dropPosition:"inside"},z=()=>{e.onMove?.(w),U&&!I&&U(s),A.stopDrag({node:i})};if(e.validateMove){let L=e.validateMove(w);if(L instanceof Promise){L.then(l=>{l?z():A.stopDrag({node:i})});return}if(!L){A.stopDrag({node:i});return}}z()};return{allowDrop:c,onDragOver:a,onDragEnter:p,onDragLeave:P,onDrop:s=>{if(!e.droppable){t(!1);return}s.preventDefault();let{dragNode:i,dragScope:k,dragNodeIndex:U}=A.getDragState();if(i&&c()){if(Ie(k,e.draggableScope)){A.stopDrag({node:i}),t(!1);return}U!==null&&C(s,i,U)}t(!1)}}}function he(e,t){if(e==null&&t==null)return!0;if(e==null||t==null)return!1;if(typeof t=="string"){if(typeof e=="string")return e===t;if(Array.isArray(e))return e.indexOf(t)!==-1}else if(Array.isArray(t)){if(typeof e=="string")return t.indexOf(e)!==-1;if(Array.isArray(e)){for(let c of e)if(t.indexOf(c)!==-1)return!0;return!1}}return!1}function Pe(e,t){return t==null?!0:he(e,t)}function Ie(e,t){return he(e,t)}function de(e,t,c,a,p,P){return{originalEvent:e,value:t,dragNode:c,dropNode:a,dropIndex:p,dropPosition:P}}import*as ue from"react";function me(e){return ue.useMemo(()=>{let t=new Map,c=[],a=(p,P,C)=>{for(let T=0;T<p.length;T++){let s=p[T];t.set(s.key,{node:s,parentKey:P,level:C,posInSet:T+1,setSize:p.length}),c.push(s.key),s.children?.length&&a(s.children,s.key,C+1)}};return a(e??[],null,1),{nodeMap:t,flatOrder:c}},[e])}function De(e,t){return ue.useMemo(()=>{let c=[],a=t??{},p=P=>{for(let C of P)c.push(C.key),a[C.key]===!0&&C.children?.length&&p(C.children)};return p(e??[]),c},[e,t])}import{focus as be,isPrintableCharacter as we}from"@primeuix/utils";import*as Z from"react";var fe=500;function Ne({props:e,elementRef:t,visibleKeys:c,findNodeByKey:a,onNodeToggle:p,onClick:P,setFocusedKey:C}){let T=Z.useRef(null),s=Z.useRef("");Z.useEffect(()=>()=>{T.current&&(clearTimeout(T.current),T.current=null)},[]);let i=l=>{if(!t.current)return;let f=t.current.querySelector(`[role="treeitem"][data-node-key="${CSS.escape(l)}"]`);if(!f)return;t.current.querySelectorAll('[role="treeitem"]').forEach(O=>{O.tabIndex=-1}),f.tabIndex=0,be(f)},k=(l,f)=>{let N=c[l]??f??null;N&&(C(N),i(N))},U=l=>{let f=c.indexOf(l);f===-1||f>=c.length-1||k(f+1)},B=l=>{let f=c.indexOf(l);f<=0||k(f-1)},I=()=>{c.length>0&&k(0)},W=()=>{c.length>0&&k(c.length-1)},w=(l,f)=>{if(s.current=(s.current||"")+l,T.current&&clearTimeout(T.current),!t.current){T.current=setTimeout(()=>{s.current="",T.current=null},fe);return}let N=Array.from(t.current.querySelectorAll('[role="treeitem"]')),O=N.find(b=>b.getAttribute("data-node-key")===f.key);if(!O){T.current=setTimeout(()=>{s.current="",T.current=null},fe);return}let F=N.indexOf(O),S=s.current.toLowerCase(),E=null;for(let b=F+1;b<N.length;b++){let D=N[b];if((D.textContent?.trim().toLowerCase()||"").startsWith(S)){E=D;break}}if(!E)for(let b=0;b<=F;b++){let D=N[b];if((D.textContent?.trim().toLowerCase()||"").startsWith(S)){E=D;break}}if(E&&E!==O){let b=E.getAttribute("data-node-key");b&&(C(b),N.forEach(D=>{D.tabIndex=-1}),E.tabIndex=0,be(E))}T.current=setTimeout(()=>{s.current="",T.current=null},fe)};return{onKeyDown:(l,f,N,O,F)=>{let S=l.target,E=l.currentTarget;if(!E||!E.isSameNode(S)&&!E.isSameNode(S.closest('[role="treeitem"]')))return;let b=l.metaKey||l.ctrlKey;switch(l.code){case"ArrowDown":l.preventDefault(),U(f.key);break;case"ArrowUp":l.preventDefault(),B(f.key);break;case"ArrowRight":l.preventDefault(),!F&&!O?p(l,f):!F&&O&&U(f.key);break;case"ArrowLeft":if(l.preventDefault(),!F&&O)p(l,f);else{let D=c.indexOf(f.key);for(let r=D-1;r>=0;r--){let n=c[r];if(a(n)?.children?.length){C(n),i(n);break}}}break;case"Home":l.preventDefault(),I();break;case"End":l.preventDefault(),W();break;case"Enter":case"NumpadEnter":case"Space":l.preventDefault(),P(l,f,!0);break;default:!b&&we(l.key)&&w(l.key,f);break}},onFilterKeyUp:l=>{(l.code==="Enter"||l.code==="NumpadEnter")&&l.preventDefault()}}}import*as j from"react";function Se({props:e,selectionKeysState:t,setSelectionKeysState:c,getNodes:a,getVisibleKeys:p}){let P=()=>e.selectionMode==="single",C=()=>e.selectionMode==="multiple",T=()=>e.selectionMode==="checkbox",s=j.useCallback(r=>!e.selectionMode||!t?!1:T()?t[r.key]?.checked===!0:t[r.key]===!0,[e.selectionMode,t]),i=(r,n)=>{e.onSelect?.({originalEvent:r,node:n})},k=(r,n)=>{e.onUnselect?.({originalEvent:r,node:n})},U=(r,n)=>{let d=r.metaKey||r.ctrlKey,u=s(n),h=t||{},R={};return u&&d?(P()?R={}:(R={...h},delete R[n.key]),k(r,n)):(P()?R={}:C()&&(R=d?{...h}:{}),R[n.key]=!0,i(r,n)),R},B=(r,n)=>{let d=s(n),u=t||{},h=n.key,R={};return P()?d?(R={},k(r,n)):(R={[h]:!0},i(r,n)):d?(R={...u},delete R[h],k(r,n)):(R={...u,[h]:!0},i(r,n)),R},I=(r,n,d=!1)=>{if(e.selectionMode==null||n.disabled===!0)return;let h=(d?!1:e.metaKeySelection)?U(r,n):B(r,n);c([h,{originalEvent:r,value:h}]),e.onClick?.({originalEvent:r,node:n})},W=(r,n,d)=>{if(n&&r.disabled!==!0?d[r.key]={checked:!0,partialChecked:!1}:delete d[r.key],r.children?.length)for(let u of r.children)W(u,n,d)},w=(r,n)=>{if(!r.children||r.children.length===0)return n;let d=0,u=!1;for(let h of r.children)n[h.key]?.checked?d++:n[h.key]?.partialChecked&&(u=!0);return d===r.children.length?n[r.key]={checked:!0,partialChecked:!1}:(delete n[r.key],(u||d>0&&d!==r.children.length)&&(n[r.key]={checked:!1,partialChecked:!0})),n},z=(r,n,d=null)=>{for(let u of r){if(u.key===n)return d;if(u.children){let h=z(u.children,n,u);if(h!==null)return h}}return null},L=(r,n)=>{if(!n||n.disabled===!0)return;let u={...t||{}},h=n.key,$=!(u[h]?.checked===!0);$?i(r,n):k(r,n),W(n,$,u);let X=z(a(),h);for(;X;)w(X,u),X=z(a(),X.key);c([u,{originalEvent:r,value:u}])},l=(r,n,d=!1)=>{T()?L(r,n):I(r,n,d)},f=(r,n)=>{c([r,{originalEvent:n??{},value:r}])},N=j.useCallback(r=>t?T()?t[r]?.checked===!0:t[r]===!0:!1,[e.selectionMode,t]),O=j.useCallback(r=>!t||!T()?!1:t[r]?.partialChecked===!0,[e.selectionMode,t]),F=j.useMemo(()=>{let r=p();if(r.length===0||!t)return{all:!1,some:!1};let n=0;for(let d of r){let u=t[d];(T()?u?.checked===!0:u===!0)&&n++}return{all:n===r.length,some:n>0&&n<r.length}},[p,t,e.selectionMode]),S=j.useCallback(()=>F.all,[F]),E=j.useCallback(()=>F.some,[F]),b=j.useCallback((r,n,d)=>{let u=a().length>0?ke(a(),n):void 0;u&&(d==="checkbox"?L(r,u):d==="radio"?N(n)||f({[n]:!0},r):I(r,u,!0))},[a,N]),D=j.useCallback(r=>{let n=p(),d=S(),u={};if(!d)for(let h of n)u[h]=T()?{checked:!0,partialChecked:!1}:!0;f(u,r)},[p,S,e.selectionMode]);return{isNodeSelected:s,onNodeClick:I,onCheckboxChange:L,onClick:l,setSelectionKeys:f,isSelected:N,isPartiallySelected:O,isAllSelected:S,isSomeSelected:E,toggleSelection:b,toggleAll:D}}function ke(e,t){for(let c of e){if(c.key===t)return c;if(c.children){let a=ke(c.children,t);if(a)return a}}}var et=Ue({name:"useTree",defaultProps:pe,setup({props:e,elementRef:t,id:c}){let a=M.useRef(e.defaultExpandedKeys??{}),[p,P]=Ee({value:e.expandedKeys,defaultValue:a.current,onChange:e.onExpandedChange}),C=M.useRef(e.defaultSelectionKeys??{}),[T,s]=Ee({value:e.selectionKeys,defaultValue:C.current,onChange:e.onSelectionChange}),[i,k]=M.useState(null),[U,B]=M.useState(!1),{nodeMap:I,flatOrder:W}=me(e.value),w=De(e.value,p),z=w.length,L=M.useCallback(x=>I.get(x)?.node,[I]),l=M.useCallback(x=>{let K=I.get(x);return K?{level:K.level,posInSet:K.posInSet,setSize:K.setSize,parentKey:K.parentKey}:{level:1,posInSet:1,setSize:1,parentKey:null}},[I]),f=M.useCallback(()=>e.value||[],[e.value]);M.useEffect(()=>{i===null&&w.length>0?k(w[0]):i&&!I.has(i)&&k(w[0]??null)},[w,i,I]);let N=M.useCallback(x=>{k(x),e.onFocusedKeyChange?.({value:x})},[e]),O=M.useRef(w);O.current=w;let F=M.useCallback(()=>O.current,[]),S=Se({props:e,selectionKeysState:T,setSelectionKeysState:s,getNodes:f,getVisibleKeys:F}),E=(x,K)=>{if(K.disabled===!0)return;let q=p||{},Y=K.key,_;q[Y]?(_={...q},delete _[Y],e.onCollapse?.({originalEvent:x,node:K}),e.onToggle?.({originalEvent:x,node:K})):(_={...q,[Y]:!0},e.onExpand?.({originalEvent:x,node:K}),e.onToggle?.({originalEvent:x,node:K})),P([_,{originalEvent:x,value:_}])},b=Ne({props:e,elementRef:t,visibleKeys:w,findNodeByKey:L,onNodeToggle:E,onClick:S.onClick,setFocusedKey:N}),D=ye({props:e,setDragHoverState:B,getNodes:f}),r={expandedKeys:p,selectionKeys:T,focusedKey:i,dragHover:U},n={id:c,"data-scope":"tree","data-part":"root",...U&&{"data-dragover":""},onDragOver:D.onDragOver,onDragEnter:D.onDragEnter,onDragLeave:D.onDragLeave,onDrop:D.onDrop},d={"data-scope":"tree","data-part":"filter",autoComplete:"off",onKeyUp:b.onFilterKeyUp},u={"data-scope":"tree","data-part":"loading",role:"status","aria-live":"polite"},h=M.useCallback(x=>{let K=x?.key,q=K?(p||{})[K]===!0:!1,Y=_=>{_.stopPropagation(),E(_,x)};return{"data-scope":"tree","data-part":"toggle",[q?"data-expanded":"data-collapsed"]:"",type:"button",tabIndex:-1,onClick:Y}},[p]),R=M.useCallback(()=>({"data-scope":"tree","data-part":"toggle-spacer","aria-hidden":!0}),[]),$=M.useCallback(()=>({"data-scope":"tree","data-part":"toggle-indicator","aria-hidden":!0}),[]),X=M.useCallback((x,K,q,Y,_,J,ae,se)=>{let te=i===x?.key,ce=ge=>b.onKeyDown(ge,x,K,q,J),re=e.selectionMode==="checkbox";return{role:"treeitem",tabIndex:te?0:-1,"aria-level":K,"aria-setsize":se,"aria-posinset":ae,"aria-expanded":J?void 0:q,"aria-selected":e.selectionMode==="single"||e.selectionMode==="multiple"?!!_:void 0,"aria-checked":re?Y:void 0,"data-scope":"tree","data-part":"node","data-node-key":x?.key,...!J&&{[q?"data-expanded":"data-collapsed"]:""},...(re?Y:_)&&{"data-selected":""},...J&&{"data-leaf":""},...x?.disabled===!0&&{"data-disabled":""},...te&&{"data-focused":""},onKeyDown:ce}},[b,e.selectionMode,i]),oe=M.useCallback(()=>({"data-scope":"tree","data-part":"nodes",role:"tree"}),[]);return{state:r,nodeMap:I,flatOrder:W,visibleKeys:w,visibleCount:z,findNodeByKey:L,findNodeInfo:l,getNodes:f,setFocusedKey:N,setSelectionKeys:S.setSelectionKeys,onKeyDown:b.onKeyDown,onNodeToggle:E,onNodeClick:S.onNodeClick,onClick:S.onClick,onCheckboxChange:S.onCheckboxChange,isNodeSelected:S.isNodeSelected,selection:{isSelected:S.isSelected,isPartiallySelected:S.isPartiallySelected,isAllSelected:S.isAllSelected,isSomeSelected:S.isSomeSelected,toggleSelection:S.toggleSelection,toggleAll:S.toggleAll},onFilterKeyUp:b.onFilterKeyUp,onDragOver:D.onDragOver,onDragEnter:D.onDragEnter,onDragLeave:D.onDragLeave,onDrop:D.onDrop,allowDrop:D.allowDrop,rootProps:n,getToggleProps:h,getToggleSpacerProps:R,getToggleIndicatorProps:$,getNodeProps:X,filterProps:d,loadingProps:u,getNodesProps:oe}}});import{withHeadless as Ae}from"@primereact/core/headless";import{getOuterHeight as He,getOuterWidth as Le}from"@primeuix/utils";import*as ee from"react";var xe={node:void 0,index:void 0,context:void 0,parentContext:void 0,onMove:void 0};function ve(e,t){if(e.key===t)return!0;if(!e.children||e.children.length===0)return!1;for(let c of e.children)if(ve(c,t))return!0;return!1}var lt=Ae({name:"useTreeNode",defaultProps:xe,setup({props:e}){let t=e.context,c=e.parentContext,a=e.node,p=a?.key,P=p?t?.state?.expandedKeys?.[p]===!0:!1,C=a?t?.isNodeSelected(a)??!1:!1,T=a?a.leaf??(!a.children||a.children.length===0):!0,s=!1,i=!1;if(t?.props.selectionMode==="checkbox"&&p&&t?.state?.selectionKeys){let o=t.state.selectionKeys;s=o[p]?.checked===!0,i=o[p]?.partialChecked===!0}let k=1,U=1,B=1;if(t&&p){let o=t.findNodeInfo(p);k=o.level,U=o.posInSet,B=o.setSize}else if(e.index!==void 0){let o=c?.node;B=(o?o.children:t?.getNodes())?.length||0,U=e.index+1}let[I,W]=ee.useState(!1),[w,z]=ee.useState(!1),[L,l]=ee.useState(!1),[f,N]=ee.useState(!1),F=c?.node?.children||t?.getNodes()||[],S=t?.props.draggable===!0,E=a?.draggable!==!1&&S,b=A.getDragState(),D=t?.props.droppable&&t?.allowDrop?.(a),r=a?.droppable!==!1&&D,n=w&&D,d=L&&D,u=f&&r,h=n?"before":d?"after":"inside",R=(o,m)=>o.reduce((g,y)=>{if(y.key===m.key)return g;if(y.children&&y.children.length>0){let H=R(y.children,m);g.push({...y,children:H})}else g.push(y);return g},[]),$=(o,m,g,y)=>{let H=o.findIndex(v=>v.key===m);if(H!==-1){let v=[...o];return v.splice(H+y,0,g),v}return o.map(v=>v.children&&v.children.length>0?{...v,children:$(v.children,m,g,y)}:v)},X=(o,m,g)=>o.map(y=>y.key===m?{...y,children:[...y.children||[],g]}:y.children&&y.children.length>0?{...y,children:X(y.children,m,g)}:y),oe=()=>{let o=b.dragNode,m=t?.getNodes()||[];if(!a||!o)return null;let g=R(m,o);return h==="before"?g=$(g,a.key,o,0):h==="after"?g=$(g,a.key,o,1):g=X(g,a.key,o),{updated:g,dropIndex:e.index??0}},x=o=>{if(!E){o.preventDefault();return}o.stopPropagation(),o.dataTransfer.effectAllowed="all",o.dataTransfer.setData("text","data");let m=o.currentTarget,g=m.cloneNode(!0),y=g.querySelector('[data-part="toggle"]');m.setAttribute("data-dragging","true"),g.style.width=Le(m)+"px",g.style.height=He(m)+"px",g.setAttribute("data-part","drag-image"),y&&(y.style.visibility="hidden"),document.body.appendChild(g),o.dataTransfer.setDragImage(g,0,0),setTimeout(()=>document.body.removeChild(g),0);let H=t?.getNodes()??[],v=G=>{if(!a)return;let Q=R(H,a);t?.props.onMove?.({originalEvent:G,value:Q,dragNode:a,dropNode:null,dropIndex:-1,dropPosition:"inside"})};A.startDrag({node:a,subNodes:F,index:e.index,scope:t?.props.draggableScope,sourceCommit:v})},K=o=>{if(D){o.dataTransfer.dropEffect="copy";let g=o.currentTarget.getBoundingClientRect(),y=o.clientY-g.top,H=y<g.height*.25,v=y>g.height*.75,G=!H&&!v&&!!r;H!==w&&z(H),v!==L&&l(v),G!==f&&N(G)}else o.dataTransfer.dropEffect="none";t?.props.droppable&&(o.preventDefault(),o.stopPropagation())},q=()=>{},Y=()=>{z(!1),l(!1),N(!1)},_=o=>{o.stopPropagation(),o.currentTarget?.removeAttribute("data-dragging"),A.stopDrag({node:a})},J=(o,m,g)=>{let y=de(o,g,m,a,e.index??0,h),{sourceCommit:H}=A.getDragState(),v=(t?.getNodes()??[]).some(G=>ve(G,m.key));e.onMove?.(y),t?.props.onMove?.(y),H&&!v&&H(o)},ae=o=>{if(!D)return;o.preventDefault(),o.stopPropagation();let m=b.dragNode;if(!(h!=="inside"||r)||!m){z(!1),l(!1),N(!1);return}let y=t?.props.validateMove,H=oe();if(!H){A.stopDrag({node:m});return}let v=()=>{J(o,m,H.updated),A.stopDrag({node:m})};if(y){let G=de(o,H.updated,m,a,e.index??0,h),Q=y(G);Q instanceof Promise?Q.then(Me=>{Me?v():A.stopDrag({node:m})}):Q?v():A.stopDrag({node:m})}else v();z(!1),l(!1),N(!1)},se=o=>{t&&a&&a.disabled!==!0&&(t.onClick(o,a,I),I&&W(!1))},te=()=>{W(!0)},ce={expanded:P,selected:C,checked:s,partialChecked:i,leaf:T,level:k,posInSet:U,setSize:B,isNodeDropActive:!!u,isPrevDropPointActive:!!n,isNextDropPointActive:!!d,isDraggable:!!E,nodeTouched:I},re=t?.getNodeProps(a,k,P,s,C,T,U,B),Ce=t?.props.selectionMode==="checkbox"?s:C,Re=!!(t?.props.selectionMode&&a?.disabled!==!0),Ke={"data-scope":"tree","data-part":"content",draggable:!!E,...Ce&&{"data-selected":""},...Re&&{"data-selectable":""},...!T&&{[P?"data-expanded":"data-collapsed"]:""},...T&&{"data-leaf":""},...s&&{"data-checked":""},...i&&{"data-partial-checked":""},...a?.disabled===!0&&{"data-disabled":""},...u&&{"data-dragover":""},onDragStart:x,onDragOver:K,onDragEnter:q,onDragLeave:Y,onDragEnd:_,onDrop:ae,onClick:se,onTouchEnd:te};return{state:ce,parentNode:c,nodeProps:re,contentProps:Ke,dropPointProps:{"data-scope":"tree","data-part":"drop-point","aria-hidden":!0}}}});export{A as TreeDragDropService,de as buildMoveEvent,pe as defaultProps,xe as defaultTreeNodeProps,et as useTree,Ne as useTreeKeyboard,lt as useTreeNode,me as useTreeNodeMap,ye as useTreeRootDragDrop,Se as useTreeSelection,De as useTreeVisibleKeys};
|
|
1
|
+
import{withHeadless as Ue}from"@primereact/core/headless";import{useControlledState as Ee}from"@primereact/hooks/use-controlled-state";import*as K from"react";var pe={value:void 0,expandedKeys:void 0,defaultExpandedKeys:void 0,selectionKeys:void 0,defaultSelectionKeys:void 0,selectionMode:void 0,metaKeySelection:!1,highlightOnSelect:!1,draggable:void 0,droppable:void 0,draggableScope:void 0,droppableScope:void 0,onExpandedChange:void 0,onSelectionChange:void 0,onToggle:void 0,onExpand:void 0,onCollapse:void 0,onClick:void 0,onSelect:void 0,onUnselect:void 0,onMove:void 0,validateMove:void 0,onFocusedKeyChange:void 0,loading:!1};import*as oe from"react";var O={isDragging:!1,dragNode:null,dragScope:null,dragNodeSubNodes:null,dragNodeIndex:null,sourceTreeId:null,sourceCommit:null},le=new Set,ie=new Set,A={getDragState(){return O},startDrag(e){O.isDragging=!0,O.dragNode=e.node,O.dragScope=e.scope??null,O.dragNodeSubNodes=e.subNodes??null,O.dragNodeIndex=e.index??null,O.sourceTreeId=e.sourceTreeId??null,O.sourceCommit=e.sourceCommit??null,le.forEach(t=>t(e))},stopDrag(e){O.isDragging=!1,O.dragNode=null,O.dragScope=null,O.dragNodeSubNodes=null,O.dragNodeIndex=null,O.sourceTreeId=null,O.sourceCommit=null,ie.forEach(t=>t(e))},onDragStart(e){return le.add(e),()=>le.delete(e)},onDragStop(e){return ie.add(e),()=>ie.delete(e)}};function Te(e,t){if(e.key===t)return!0;if(!e.children||e.children.length===0)return!1;for(let d of e.children)if(Te(d,t))return!0;return!1}function ye({props:e,setDragHoverState:t}){oe.useEffect(()=>{if(!e.droppable)return;let c=A.onDragStop(()=>{t(!1)});return()=>{c()}},[e.droppable,t]);let d=oe.useCallback(c=>{let{dragNode:l,dragScope:M}=A.getDragState();return!(!l||!Pe(M,e.droppableScope)||c&&l===c)},[e.droppableScope]),o=c=>{e.droppable&&d()?c.dataTransfer.dropEffect="copy":c.dataTransfer.dropEffect="none",c.preventDefault()},p=()=>{e.droppable&&d()&&t(!0)},x=c=>{if(!e.droppable)return;let l=c.currentTarget.getBoundingClientRect();(c.clientX>=l.right||c.clientX<=l.left||c.clientY>=l.bottom||c.clientY<=l.top)&&t(!1)},m=(c,l,M)=>{let{sourceCommit:H}=A.getDragState(),z=e.value||[],P=z.some(s=>Te(s,l.key)),W=[...z,l],U={originalEvent:c,value:W,dragNode:l,dropNode:null,dropIndex:W.length-1,dropPosition:"inside"},F=()=>{e.onMove?.(U),H&&!P&&H(c),A.stopDrag({node:l})};if(e.validateMove){let s=e.validateMove(U);if(s instanceof Promise){s.then(f=>{f?F():A.stopDrag({node:l})});return}if(!s){A.stopDrag({node:l});return}}F()};return{allowDrop:d,onDragOver:o,onDragEnter:p,onDragLeave:x,onDrop:c=>{if(!e.droppable){t(!1);return}c.preventDefault();let{dragNode:l,dragScope:M,dragNodeIndex:H}=A.getDragState();if(l&&d()){if(Ie(M,e.draggableScope)){A.stopDrag({node:l}),t(!1);return}H!==null&&m(c,l,H)}t(!1)}}}function he(e,t){if(e==null&&t==null)return!0;if(e==null||t==null)return!1;if(typeof t=="string"){if(typeof e=="string")return e===t;if(Array.isArray(e))return e.indexOf(t)!==-1}else if(Array.isArray(t)){if(typeof e=="string")return t.indexOf(e)!==-1;if(Array.isArray(e)){for(let d of e)if(t.indexOf(d)!==-1)return!0;return!1}}return!1}function Pe(e,t){return t==null?!0:he(e,t)}function Ie(e,t){return he(e,t)}function de(e,t,d,o,p,x){return{originalEvent:e,value:t,dragNode:d,dropNode:o,dropIndex:p,dropPosition:x}}import*as ue from"react";function me(e){return ue.useMemo(()=>{let t=new Map,d=[],o=(p,x,m)=>{for(let T=0;T<p.length;T++){let c=p[T];t.set(c.key,{node:c,parentKey:x,level:m,posInSet:T+1,setSize:p.length}),d.push(c.key),c.children?.length&&o(c.children,c.key,m+1)}};return o(e??[],null,1),{nodeMap:t,flatOrder:d}},[e])}function De(e,t){return ue.useMemo(()=>{let d=[],o=t??{},p=x=>{for(let m of x)d.push(m.key),o[m.key]===!0&&m.children?.length&&p(m.children)};return p(e??[]),d},[e,t])}import{focus as be,isPrintableCharacter as we}from"@primeuix/utils";import*as ee from"react";var fe=500;function Ne({elementRef:e,visibleKeys:t,findNodeByKey:d,onNodeToggle:o,onClick:p,setFocusedKey:x}){let m=ee.useRef(null),T=ee.useRef("");ee.useEffect(()=>()=>{m.current&&(clearTimeout(m.current),m.current=null)},[]);let c=s=>{if(!e.current)return;let f=e.current.querySelector(`[role="treeitem"][data-node-key="${CSS.escape(s)}"]`);if(!f)return;e.current.querySelectorAll('[role="treeitem"]').forEach(k=>{k.tabIndex=-1}),f.tabIndex=0,be(f)},l=(s,f)=>{let S=t[s]??f??null;S&&(x(S),c(S))},M=s=>{let f=t.indexOf(s);f===-1||f>=t.length-1||l(f+1)},H=s=>{let f=t.indexOf(s);f<=0||l(f-1)},z=()=>{t.length>0&&l(0)},P=()=>{t.length>0&&l(t.length-1)},W=(s,f)=>{if(T.current=(T.current||"")+s,m.current&&clearTimeout(m.current),!e.current){m.current=setTimeout(()=>{T.current="",m.current=null},fe);return}let S=Array.from(e.current.querySelectorAll('[role="treeitem"]')),k=S.find(b=>b.getAttribute("data-node-key")===f.key);if(!k){m.current=setTimeout(()=>{T.current="",m.current=null},fe);return}let V=S.indexOf(k),q=T.current.toLowerCase(),y=null;for(let b=V+1;b<S.length;b++){let I=S[b];if((I.textContent?.trim().toLowerCase()||"").startsWith(q)){y=I;break}}if(!y)for(let b=0;b<=V;b++){let I=S[b];if((I.textContent?.trim().toLowerCase()||"").startsWith(q)){y=I;break}}if(y&&y!==k){let b=y.getAttribute("data-node-key");b&&(x(b),S.forEach(I=>{I.tabIndex=-1}),y.tabIndex=0,be(y))}m.current=setTimeout(()=>{T.current="",m.current=null},fe)};return{onKeyDown:(s,f,S,k,V)=>{let q=s.target,y=s.currentTarget;if(!y||!y.isSameNode(q)&&!y.isSameNode(q.closest('[role="treeitem"]')))return;let b=s.metaKey||s.ctrlKey;switch(s.code){case"ArrowDown":s.preventDefault(),M(f.key);break;case"ArrowUp":s.preventDefault(),H(f.key);break;case"ArrowRight":s.preventDefault(),!V&&!k?o(s,f):!V&&k&&M(f.key);break;case"ArrowLeft":if(s.preventDefault(),!V&&k)o(s,f);else{let I=t.indexOf(f.key);for(let E=I-1;E>=0;E--){let Y=t[E];if(d(Y)?.children?.length){x(Y),c(Y);break}}}break;case"Home":s.preventDefault(),z();break;case"End":s.preventDefault(),P();break;case"Enter":case"NumpadEnter":case"Space":s.preventDefault(),p(s,f,!0);break;default:!b&&we(s.key)&&W(s.key,f);break}},onFilterKeyUp:s=>{(s.code==="Enter"||s.code==="NumpadEnter")&&s.preventDefault()}}}import*as _ from"react";function Se({props:e,selectionKeysState:t,setSelectionKeysState:d,getNodes:o,getVisibleKeys:p}){let x=()=>e.selectionMode==="single",m=()=>e.selectionMode==="multiple",T=_.useCallback(()=>e.selectionMode==="checkbox",[e.selectionMode]),c=_.useCallback(r=>!e.selectionMode||!t?!1:T()?t[r.key]?.checked===!0:t[r.key]===!0,[e.selectionMode,t,T]),l=(r,n)=>{e.onSelect?.({originalEvent:r,node:n})},M=(r,n)=>{e.onUnselect?.({originalEvent:r,node:n})},H=(r,n)=>{let u=r.metaKey||r.ctrlKey,i=c(n),N=t||{},R={};return i&&u?(x()?R={}:(R={...N},delete R[n.key]),M(r,n)):(x()?R={}:m()&&(R=u?{...N}:{}),R[n.key]=!0,l(r,n)),R},z=(r,n)=>{let u=c(n),i=t||{},N=n.key,R={};return x()?u?(R={},M(r,n)):(R={[N]:!0},l(r,n)):u?(R={...i},delete R[N],M(r,n)):(R={...i,[N]:!0},l(r,n)),R},P=(r,n,u=!1)=>{if(e.selectionMode==null||n.disabled===!0)return;let N=(u?!1:e.metaKeySelection)?H(r,n):z(r,n);d([N,{originalEvent:r,value:N}]),e.onClick?.({originalEvent:r,node:n})},W=(r,n,u)=>{if(n&&r.disabled!==!0?u[r.key]={checked:!0,partialChecked:!1}:delete u[r.key],r.children?.length)for(let i of r.children)W(i,n,u)},U=(r,n)=>{if(!r.children||r.children.length===0)return n;let u=0,i=!1;for(let N of r.children)n[N.key]?.checked?u++:n[N.key]?.partialChecked&&(i=!0);return u===r.children.length?n[r.key]={checked:!0,partialChecked:!1}:(delete n[r.key],(i||u>0&&u!==r.children.length)&&(n[r.key]={checked:!1,partialChecked:!0})),n},F=(r,n,u=null)=>{for(let i of r){if(i.key===n)return u;if(i.children){let N=F(i.children,n,i);if(N!==null)return N}}return null},s=(r,n)=>{if(!n||n.disabled===!0)return;let i={...t||{}},N=n.key,J=!(i[N]?.checked===!0);J?l(r,n):M(r,n),W(n,J,i);let $=F(o(),N);for(;$;)U($,i),$=F(o(),$.key);d([i,{originalEvent:r,value:i}])},f=(r,n,u=!1)=>{T()?s(r,n):P(r,n,u)},S=(r,n)=>{d([r,{originalEvent:n??{},value:r}])},k=_.useRef({onNodeClick:P,onCheckboxChange:s,setSelectionKeys:S});k.current={onNodeClick:P,onCheckboxChange:s,setSelectionKeys:S};let V=_.useCallback(r=>t?T()?t[r]?.checked===!0:t[r]===!0:!1,[t,T]),q=_.useCallback(r=>!t||!T()?!1:t[r]?.partialChecked===!0,[t,T]),y=_.useMemo(()=>{let r=p();if(r.length===0||!t)return{all:!1,some:!1};let n=0;for(let u of r){let i=t[u];(T()?i?.checked===!0:i===!0)&&n++}return{all:n===r.length,some:n>0&&n<r.length}},[p,t,T]),b=_.useCallback(()=>y.all,[y]),I=_.useCallback(()=>y.some,[y]),E=_.useCallback((r,n,u)=>{let i=o().length>0?ke(o(),n):void 0;i&&(u==="checkbox"?k.current.onCheckboxChange(r,i):u==="radio"?V(n)||k.current.setSelectionKeys({[n]:!0},r):k.current.onNodeClick(r,i,!0))},[o,V]),Y=_.useCallback(r=>{let n=p(),u=b(),i={};if(!u)for(let N of n)i[N]=T()?{checked:!0,partialChecked:!1}:!0;k.current.setSelectionKeys(i,r)},[p,b,T]);return{isNodeSelected:c,onNodeClick:P,onCheckboxChange:s,onClick:f,setSelectionKeys:S,isSelected:V,isPartiallySelected:q,isAllSelected:b,isSomeSelected:I,toggleSelection:E,toggleAll:Y}}function ke(e,t){for(let d of e){if(d.key===t)return d;if(d.children){let o=ke(d.children,t);if(o)return o}}}var et=Ue({name:"useTree",defaultProps:pe,setup({props:e,elementRef:t,id:d}){let o=K.useRef(e.defaultExpandedKeys??{}),[p,x]=Ee({value:e.expandedKeys,defaultValue:o.current,onChange:e.onExpandedChange}),m=K.useRef(e.defaultSelectionKeys??{}),[T,c]=Ee({value:e.selectionKeys,defaultValue:m.current,onChange:e.onSelectionChange}),[l,M]=K.useState(null),[H,z]=K.useState(!1),{nodeMap:P,flatOrder:W}=me(e.value),U=De(e.value,p),F=U.length,s=K.useCallback(v=>P.get(v)?.node,[P]),f=K.useCallback(v=>{let w=P.get(v);return w?{level:w.level,posInSet:w.posInSet,setSize:w.setSize,parentKey:w.parentKey}:{level:1,posInSet:1,setSize:1,parentKey:null}},[P]),S=K.useCallback(()=>e.value||[],[e.value]);K.useEffect(()=>{l===null&&U.length>0?M(U[0]):l&&!P.has(l)&&M(U[0]??null)},[U,l,P]);let k=K.useCallback(v=>{M(v),e.onFocusedKeyChange?.({value:v})},[e]),V=K.useRef(U);V.current=U;let q=K.useCallback(()=>V.current,[]),y=Se({props:e,selectionKeysState:T,setSelectionKeysState:c,getNodes:S,getVisibleKeys:q}),b=K.useCallback((v,w)=>{if(w.disabled===!0)return;let j=p||{},X=w.key,B;j[X]?(B={...j},delete B[X],e.onCollapse?.({originalEvent:v,node:w}),e.onToggle?.({originalEvent:v,node:w})):(B={...j,[X]:!0},e.onExpand?.({originalEvent:v,node:w}),e.onToggle?.({originalEvent:v,node:w})),x([B,{originalEvent:v,value:B}])},[p,e,x]),I=Ne({props:e,elementRef:t,visibleKeys:U,findNodeByKey:s,onNodeToggle:b,onClick:y.onClick,setFocusedKey:k}),E=ye({props:e,setDragHoverState:z,getNodes:S}),Y={expandedKeys:p,selectionKeys:T,focusedKey:l,dragHover:H},r={id:d,"data-scope":"tree","data-part":"root",...H&&{"data-dragover":""},onDragOver:E.onDragOver,onDragEnter:E.onDragEnter,onDragLeave:E.onDragLeave,onDrop:E.onDrop},n={"data-scope":"tree","data-part":"filter",autoComplete:"off",onKeyUp:I.onFilterKeyUp},u={"data-scope":"tree","data-part":"loading",role:"status","aria-live":"polite"},i=K.useCallback(v=>{let w=v?.key,j=w?(p||{})[w]===!0:!1,X=B=>{B.stopPropagation(),b(B,v)};return{"data-scope":"tree","data-part":"toggle",[j?"data-expanded":"data-collapsed"]:"",type:"button",tabIndex:-1,onClick:X}},[p,b]),N=K.useCallback(()=>({"data-scope":"tree","data-part":"toggle-spacer","aria-hidden":!0}),[]),R=K.useCallback(()=>({"data-scope":"tree","data-part":"toggle-indicator","aria-hidden":!0}),[]),J=K.useCallback((v,w,j,X,B,Q,ae,se)=>{let re=l===v?.key,ce=ge=>I.onKeyDown(ge,v,w,j,Q),ne=e.selectionMode==="checkbox";return{role:"treeitem",tabIndex:re?0:-1,"aria-level":w,"aria-setsize":se,"aria-posinset":ae,"aria-expanded":Q?void 0:j,"aria-selected":e.selectionMode==="single"||e.selectionMode==="multiple"?!!B:void 0,"aria-checked":ne?X:void 0,"data-scope":"tree","data-part":"node","data-node-key":v?.key,...!Q&&{[j?"data-expanded":"data-collapsed"]:""},...(ne?X:B)&&{"data-selected":""},...Q&&{"data-leaf":""},...v?.disabled===!0&&{"data-disabled":""},...re&&{"data-focused":""},onKeyDown:ce}},[I,e.selectionMode,l]),$=K.useCallback(()=>({"data-scope":"tree","data-part":"nodes",role:"tree"}),[]);return{state:Y,nodeMap:P,flatOrder:W,visibleKeys:U,visibleCount:F,findNodeByKey:s,findNodeInfo:f,getNodes:S,setFocusedKey:k,setSelectionKeys:y.setSelectionKeys,onKeyDown:I.onKeyDown,onNodeToggle:b,onNodeClick:y.onNodeClick,onClick:y.onClick,onCheckboxChange:y.onCheckboxChange,isNodeSelected:y.isNodeSelected,selection:{isSelected:y.isSelected,isPartiallySelected:y.isPartiallySelected,isAllSelected:y.isAllSelected,isSomeSelected:y.isSomeSelected,toggleSelection:y.toggleSelection,toggleAll:y.toggleAll},onFilterKeyUp:I.onFilterKeyUp,onDragOver:E.onDragOver,onDragEnter:E.onDragEnter,onDragLeave:E.onDragLeave,onDrop:E.onDrop,allowDrop:E.allowDrop,rootProps:r,getToggleProps:i,getToggleSpacerProps:N,getToggleIndicatorProps:R,getNodeProps:J,filterProps:n,loadingProps:u,getNodesProps:$}}});import{withHeadless as Ae}from"@primereact/core/headless";import{getOuterHeight as He,getOuterWidth as Le}from"@primeuix/utils";import*as te from"react";var xe={node:void 0,index:void 0,context:void 0,parentContext:void 0,onMove:void 0};function ve(e,t){if(e.key===t)return!0;if(!e.children||e.children.length===0)return!1;for(let d of e.children)if(ve(d,t))return!0;return!1}var lt=Ae({name:"useTreeNode",defaultProps:xe,setup({props:e}){let t=e.context,d=e.parentContext,o=e.node,p=o?.key,x=p?t?.state?.expandedKeys?.[p]===!0:!1,m=o?t?.isNodeSelected(o)??!1:!1,T=o?o.leaf??(!o.children||o.children.length===0):!0,c=!1,l=!1;if(t?.props.selectionMode==="checkbox"&&p&&t?.state?.selectionKeys){let a=t.state.selectionKeys;c=a[p]?.checked===!0,l=a[p]?.partialChecked===!0}let M=1,H=1,z=1;if(t&&p){let a=t.findNodeInfo(p);M=a.level,H=a.posInSet,z=a.setSize}else if(e.index!==void 0){let a=d?.node;z=(a?a.children:t?.getNodes())?.length||0,H=e.index+1}let[P,W]=te.useState(!1),[U,F]=te.useState(!1),[s,f]=te.useState(!1),[S,k]=te.useState(!1),q=d?.node?.children||t?.getNodes()||[],y=t?.props.draggable===!0,b=o?.draggable!==!1&&y,I=A.getDragState(),E=t?.props.droppable&&t?.allowDrop?.(o),Y=o?.droppable!==!1&&E,r=U&&E,n=s&&E,u=S&&Y,i=r?"before":n?"after":"inside",N=(a,D)=>a.reduce((g,h)=>{if(h.key===D.key)return g;if(h.children&&h.children.length>0){let L=N(h.children,D);g.push({...h,children:L})}else g.push(h);return g},[]),R=(a,D,g,h)=>{let L=a.findIndex(C=>C.key===D);if(L!==-1){let C=[...a];return C.splice(L+h,0,g),C}return a.map(C=>C.children&&C.children.length>0?{...C,children:R(C.children,D,g,h)}:C)},J=(a,D,g)=>a.map(h=>h.key===D?{...h,children:[...h.children||[],g]}:h.children&&h.children.length>0?{...h,children:J(h.children,D,g)}:h),$=()=>{let a=I.dragNode,D=t?.getNodes()||[];if(!o||!a)return null;let g=N(D,a);return i==="before"?g=R(g,o.key,a,0):i==="after"?g=R(g,o.key,a,1):g=J(g,o.key,a),{updated:g,dropIndex:e.index??0}},v=a=>{if(!b){a.preventDefault();return}a.stopPropagation(),a.dataTransfer.effectAllowed="all",a.dataTransfer.setData("text","data");let D=a.currentTarget,g=D.cloneNode(!0),h=g.querySelector('[data-part="toggle"]');D.setAttribute("data-dragging","true"),g.style.width=Le(D)+"px",g.style.height=He(D)+"px",g.setAttribute("data-part","drag-image"),h&&(h.style.visibility="hidden"),document.body.appendChild(g),a.dataTransfer.setDragImage(g,0,0),setTimeout(()=>document.body.removeChild(g),0);let L=t?.getNodes()??[],C=G=>{if(!o)return;let Z=N(L,o);t?.props.onMove?.({originalEvent:G,value:Z,dragNode:o,dropNode:null,dropIndex:-1,dropPosition:"inside"})};A.startDrag({node:o,subNodes:q,index:e.index,scope:t?.props.draggableScope,sourceCommit:C})},w=a=>{if(E){a.dataTransfer.dropEffect="copy";let g=a.currentTarget.getBoundingClientRect(),h=a.clientY-g.top,L=h<g.height*.25,C=h>g.height*.75,G=!L&&!C&&!!Y;L!==U&&F(L),C!==s&&f(C),G!==S&&k(G)}else a.dataTransfer.dropEffect="none";t?.props.droppable&&(a.preventDefault(),a.stopPropagation())},j=()=>{},X=()=>{F(!1),f(!1),k(!1)},B=a=>{a.stopPropagation(),a.currentTarget?.removeAttribute("data-dragging"),A.stopDrag({node:o})},Q=(a,D,g)=>{let h=de(a,g,D,o,e.index??0,i),{sourceCommit:L}=A.getDragState(),C=(t?.getNodes()??[]).some(G=>ve(G,D.key));e.onMove?.(h),t?.props.onMove?.(h),L&&!C&&L(a)},ae=a=>{if(!E)return;a.preventDefault(),a.stopPropagation();let D=I.dragNode;if(!(i!=="inside"||Y)||!D){F(!1),f(!1),k(!1);return}let h=t?.props.validateMove,L=$();if(!L){A.stopDrag({node:D});return}let C=()=>{Q(a,D,L.updated),A.stopDrag({node:D})};if(h){let G=de(a,L.updated,D,o,e.index??0,i),Z=h(G);Z instanceof Promise?Z.then(Me=>{Me?C():A.stopDrag({node:D})}):Z?C():A.stopDrag({node:D})}else C();F(!1),f(!1),k(!1)},se=a=>{t&&o&&o.disabled!==!0&&(t.onClick(a,o,P),P&&W(!1))},re=()=>{W(!0)},ce={expanded:x,selected:m,checked:c,partialChecked:l,leaf:T,level:M,posInSet:H,setSize:z,isNodeDropActive:!!u,isPrevDropPointActive:!!r,isNextDropPointActive:!!n,isDraggable:!!b,nodeTouched:P},ne=t?.getNodeProps(o,M,x,c,m,T,H,z),Ce=t?.props.selectionMode==="checkbox"?c:m,Re=!!(t?.props.selectionMode&&o?.disabled!==!0),Ke={"data-scope":"tree","data-part":"content",draggable:!!b,...Ce&&{"data-selected":""},...Re&&{"data-selectable":""},...!T&&{[x?"data-expanded":"data-collapsed"]:""},...T&&{"data-leaf":""},...c&&{"data-checked":""},...l&&{"data-partial-checked":""},...o?.disabled===!0&&{"data-disabled":""},...u&&{"data-dragover":""},onDragStart:v,onDragOver:w,onDragEnter:j,onDragLeave:X,onDragEnd:B,onDrop:ae,onClick:se,onTouchEnd:re};return{state:ce,parentNode:d,nodeProps:ne,contentProps:Ke,dropPointProps:{"data-scope":"tree","data-part":"drop-point","aria-hidden":!0}}}});export{A as TreeDragDropService,de as buildMoveEvent,pe as defaultProps,xe as defaultTreeNodeProps,et as useTree,Ne as useTreeKeyboard,lt as useTreeNode,me as useTreeNodeMap,ye as useTreeRootDragDrop,Se as useTreeSelection,De as useTreeVisibleKeys};
|
|
@@ -12,7 +12,7 @@ export interface UseTreeKeyboardDeps {
|
|
|
12
12
|
/**
|
|
13
13
|
* Keyboard navigation across `visibleKeys` plus printable-character type-ahead.
|
|
14
14
|
*/
|
|
15
|
-
export declare function useTreeKeyboard({
|
|
15
|
+
export declare function useTreeKeyboard({ elementRef, visibleKeys, findNodeByKey, onNodeToggle, onClick, setFocusedKey }: UseTreeKeyboardDeps): {
|
|
16
16
|
onKeyDown: (event: React.KeyboardEvent, node: TreeNodeData, _level: number, expanded: boolean, leaf: boolean) => void;
|
|
17
17
|
onFilterKeyUp: (event: React.KeyboardEvent) => void;
|
|
18
18
|
};
|