@principal-ade/panels 1.0.73 → 1.0.74

package/dist/index.esm.js

@@ -6,12 +6,12 @@ return e("div",{className:`animated-resizable-layout ${u}`,style:{...J,...h},chi
 return e("div",{className:`animated-vertical-layout ${u}`,style:{...ce,...h},children:/* @__PURE__ */t(m,{orientation:"vertical",onLayoutChange:ie,onLayoutChanged:se,children:[
 /* @__PURE__ */e(f,{panelRef:O,collapsible:s.top,defaultSize:p.top?"0%":`${c.top}%`,minSize:`${d.top}%`,collapsedSize:"0%",onResize:le,className:(()=>{let e="vertical-panel collapsible-panel";return M&&!J&&(e+=" animating"),k&&(e+=" collapsed"),e})(),style:de,children:/* @__PURE__ */e("div",{className:"panel-content-wrapper",style:{opacity:k?0:1,transition:M?`opacity ${.5*v}ms ${y}`:"none"},children:n})}),
 /* @__PURE__ */e(b,{className:"vertical-resize-handle",children:g&&/* @__PURE__ */t("div",{className:"handle-bar",children:[s.top&&/* @__PURE__ */e("button",{onClick:te,className:"collapse-toggle collapse-toggle-top",disabled:M,"aria-label":k?"Expand top panel":"Collapse top panel",children:k?"▾":"▴"}),s.bottom&&/* @__PURE__ */e("button",{onClick:oe,className:"collapse-toggle collapse-toggle-bottom",disabled:j,"aria-label":H?"Expand bottom panel":"Collapse bottom panel",children:H?"▴":"▾"})]})}),
-/* @__PURE__ */e(f,{panelRef:X,collapsible:s.bottom,defaultSize:p.bottom?"0%":`${c.bottom}%`,minSize:`${d.bottom}%`,collapsedSize:"0%",onResize:ae,className:(()=>{let e="vertical-panel collapsible-panel";return j&&!J&&(e+=" animating"),H&&(e+=" collapsed"),e})(),style:ue,children:/* @__PURE__ */e("div",{className:"panel-content-wrapper",style:{opacity:H?0:1,transition:j?`opacity ${.5*v}ms ${y}`:"none"},children:r})})]})})},D=({primaryContent:t,secondaryContent:n,collapsedHeader:r,collapsed:o=!0,onCollapsedChange:l,ratio:a=.3,onRatioChange:i,maxRatio:s=.8,collapsedHeight:c=28,hideHeader:d=!0,theme:u,className:p="",style:h,animationDuration:g=200,onCollapseStart:v,onCollapseComplete:m,onExpandStart:f,onExpandComplete:b})=>{const y=C(u);return n?/* @__PURE__ */e(R,{primaryContent:t,secondaryContent:n,collapsedHeader:r??{title:"Content"},collapsed:o,onCollapsedChange:l??(()=>{}),ratio:a,onRatioChange:i??(()=>{}),maxRatio:s,collapsedHeight:c,hideHeader:d,theme:u,className:p,style:h,animationDuration:g,onCollapseStart:v,onCollapseComplete:m,onExpandStart:f,onExpandComplete:b}):/* @__PURE__ */e("div",{className:`collapsible-split-pane ${p}`,style:{...y,...h},children:/* @__PURE__ */e("div",{className:"csp-primary-content-full",children:t})})},R=({primaryContent:n,secondaryContent:r,collapsedHeader:s,collapsed:c,onCollapsedChange:d,ratio:u,onRatioChange:p,maxRatio:h=.8,collapsedHeight:g=28,hideHeader:v=!0,theme:y,className:w="",style:x,animationDuration:N=200,onCollapseStart:S,onCollapseComplete:E,onExpandStart:D,onExpandComplete:R})=>{const[L,z]=o(!1),[P,k]=o(!1),A=l(null),M=l(void 0),T=l(void 0),$=l(u),B=l(!1),O=l(c),F=e=>100*e;i(()=>{O.current=c},[c]),i(()=>{!c&&u>0&&($.current=u)},[c,u]);const I=a((e,t,n)=>{if(!A.current)return;M.current&&cancelAnimationFrame(M.current),T.current=performance.now();const r=o=>{if(!T.current||!A.current)return;const l=o-T.current,a=Math.min(l/N,1),i=a<.5?4*a*a*a:1-Math.pow(-2*a+2,3)/2,s=e+(t-e)*i;A.current.resize(`${s}%`),a<1?M.current=requestAnimationFrame(r):(A.current.resize(`${t}%`),n&&n(),B.current=!1,z(!1))};M.current=requestAnimationFrame(r)},[N]),H=a(()=>{if(L||P||!A.current)return;u>0&&($.current=u),B.current=!0,z(!0),S?.();const e=F(u);I(e,0,()=>{O.current=!0,d(!0),E?.()})},[L,P,u,I,d,S,E]),W=a(()=>{if(L||P||!A.current)return;B.current=!0,z(!0),D?.();const e=$.current||u||.3,t=F(e);I(0,t,()=>{O.current=!1,d(!1),p(e),R?.()})},[L,P,u,I,d,p,D,R]),j=a(()=>{c?W():H()},[c,H,W]),q=a(e=>{if(B.current)return;const t=e.asPercentage/100;t<=.01&&!O.current?($.current=.4,O.current=!0,d(!0)):t>.01&&O.current&&(O.current=!1,d(!1)),O.current||p(t)},[p,d]),K=a(()=>{L||k(!0)},[L]),U=a(()=>{k(!1)},[]);i(()=>{if(c&&!L&&A.current){A.current.getSize().asPercentage>0&&H()}else if(!c&&!L&&A.current){0===A.current.getSize().asPercentage&&W()}},[c]),i(()=>()=>{M.current&&cancelAnimationFrame(M.current)},[]);const X=C(y),Y=["csp-secondary-panel",L&&!P?"csp-animating":"",c?"csp-collapsed":""].filter(Boolean).join(" ");/* @__PURE__ */
-return t("div",{className:`collapsible-split-pane ${w}`,style:{...X,...x},children:[!v&&/* @__PURE__ */t("div",{className:"csp-header "+(c?"csp-header-collapsed":""),style:{height:g,backgroundColor:y.colors.backgroundSecondary,borderBottom:`1px solid ${y.colors.border}`},onClick:c?j:void 0,role:c?"button":void 0,tabIndex:c?0:void 0,onKeyDown:c?e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),j())}:void 0,"aria-expanded":!c,"aria-label":c?`Expand ${s.title}`:s.title,children:[s.icon&&/* @__PURE__ */e("span",{className:"csp-header-icon",style:{color:y.colors.textSecondary},children:s.icon}),
+/* @__PURE__ */e(f,{panelRef:X,collapsible:s.bottom,defaultSize:p.bottom?"0%":`${c.bottom}%`,minSize:`${d.bottom}%`,collapsedSize:"0%",onResize:ae,className:(()=>{let e="vertical-panel collapsible-panel";return j&&!J&&(e+=" animating"),H&&(e+=" collapsed"),e})(),style:ue,children:/* @__PURE__ */e("div",{className:"panel-content-wrapper",style:{opacity:H?0:1,transition:j?`opacity ${.5*v}ms ${y}`:"none"},children:r})})]})})},D=({primaryContent:t,secondaryContent:n,collapsedHeader:r,collapsed:o=!0,onCollapsedChange:l,ratio:a=.3,onRatioChange:i,maxRatio:s=.8,collapsedHeight:c=28,hideHeader:d=!0,theme:u,className:p="",style:h,animationDuration:g=200,onCollapseStart:v,onCollapseComplete:m,onExpandStart:f,onExpandComplete:b})=>{const y=C(u);return n?/* @__PURE__ */e(R,{primaryContent:t,secondaryContent:n,collapsedHeader:r??{title:"Content"},collapsed:o,onCollapsedChange:l??(()=>{}),ratio:a,onRatioChange:i??(()=>{}),maxRatio:s,collapsedHeight:c,hideHeader:d,theme:u,className:p,style:h,animationDuration:g,onCollapseStart:v,onCollapseComplete:m,onExpandStart:f,onExpandComplete:b}):/* @__PURE__ */e("div",{className:`collapsible-split-pane ${p}`,style:{...y,...h},children:/* @__PURE__ */e("div",{className:"csp-primary-content-full",children:t})})},R=({primaryContent:n,secondaryContent:r,collapsedHeader:s,collapsed:c,onCollapsedChange:d,ratio:u,onRatioChange:p,maxRatio:h=.8,collapsedHeight:g=28,hideHeader:v=!0,theme:y,className:w="",style:x,animationDuration:N=200,onCollapseStart:S,onCollapseComplete:E,onExpandStart:D,onExpandComplete:R})=>{const[L,z]=o(!1),[P,k]=o(!1),A=l(null),M=l(void 0),T=l(void 0),$=l(u),B=l(!1),O=l(c),F=l(!0),I=e=>100*e;i(()=>{O.current=c},[c]),i(()=>{!c&&u>0&&($.current=u)},[c,u]);const H=a((e,t,n)=>{if(!A.current)return;M.current&&cancelAnimationFrame(M.current),T.current=performance.now();const r=o=>{if(!T.current||!A.current)return;const l=o-T.current,a=Math.min(l/N,1),i=a<.5?4*a*a*a:1-Math.pow(-2*a+2,3)/2,s=e+(t-e)*i;A.current.resize(`${s}%`),a<1?M.current=requestAnimationFrame(r):(A.current.resize(`${t}%`),n&&n(),B.current=!1,z(!1))};M.current=requestAnimationFrame(r)},[N]),W=a(()=>{if(L||P||!A.current)return;u>0&&($.current=u),B.current=!0,z(!0),S?.();const e=I(u);H(e,0,()=>{O.current=!0,d(!0),E?.()})},[L,P,u,H,d,S,E]),j=a(()=>{if(L||P||!A.current)return;B.current=!0,z(!0),D?.();const e=$.current||u||.3,t=I(e);H(0,t,()=>{O.current=!1,d(!1),p(e),R?.()})},[L,P,u,H,d,p,D,R]),q=a(()=>{c?j():W()},[c,W,j]),K=a(e=>{if(B.current)return;const t=e.asPercentage/100;t<=.01&&!O.current?($.current=.4,O.current=!0,d(!0)):t>.01&&O.current&&(O.current=!1,d(!1)),O.current||p(t)},[p,d]),U=a(()=>{L||k(!0)},[L]),X=a(()=>{k(!1)},[]);i(()=>{if(F.current)F.current=!1;else if(c&&!L&&A.current){A.current.getSize().asPercentage>0&&W()}else if(!c&&!L&&A.current){0===A.current.getSize().asPercentage&&j()}},[c]),i(()=>()=>{M.current&&cancelAnimationFrame(M.current)},[]);const Y=C(y),V=["csp-secondary-panel",L&&!P?"csp-animating":"",c?"csp-collapsed":""].filter(Boolean).join(" ");/* @__PURE__ */
+return t("div",{className:`collapsible-split-pane ${w}`,style:{...Y,...x},children:[!v&&/* @__PURE__ */t("div",{className:"csp-header "+(c?"csp-header-collapsed":""),style:{height:g,backgroundColor:y.colors.backgroundSecondary,borderBottom:`1px solid ${y.colors.border}`},onClick:c?q:void 0,role:c?"button":void 0,tabIndex:c?0:void 0,onKeyDown:c?e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),q())}:void 0,"aria-expanded":!c,"aria-label":c?`Expand ${s.title}`:s.title,children:[s.icon&&/* @__PURE__ */e("span",{className:"csp-header-icon",style:{color:y.colors.textSecondary},children:s.icon}),
 /* @__PURE__ */e("span",{className:"csp-header-title",style:{color:y.colors.text,fontFamily:y.fonts.body,fontSize:y.fontSizes[1],fontWeight:y.fontWeights.medium},children:s.title}),
-/* @__PURE__ */e("button",{className:"csp-header-toggle",style:{color:y.colors.textSecondary},onClick:e=>{e.stopPropagation(),j()},"aria-label":c?`Expand ${s.title}`:`Collapse ${s.title}`,children:/* @__PURE__ */e("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",children:/* @__PURE__ */e("path",{d:c?"M3 5L6 8L9 5":"M3 7L6 4L9 7"})})})]}),
-/* @__PURE__ */e("div",{className:"csp-content-area",children:/* @__PURE__ */t(m,{orientation:"vertical",onLayoutChange:K,onLayoutChanged:U,children:[
-/* @__PURE__ */e(f,{panelRef:A,defaultSize:c||v?"0%":`${F(u)}%`,minSize:"0%",maxSize:v&&c?"0%":`${F(h)}%`,onResize:q,className:Y,style:v&&c?{display:"none"}:void 0,children:/* @__PURE__ */e("div",{className:"csp-secondary-body",children:r})}),
+/* @__PURE__ */e("button",{className:"csp-header-toggle",style:{color:y.colors.textSecondary},onClick:e=>{e.stopPropagation(),q()},"aria-label":c?`Expand ${s.title}`:`Collapse ${s.title}`,children:/* @__PURE__ */e("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",children:/* @__PURE__ */e("path",{d:c?"M3 5L6 8L9 5":"M3 7L6 4L9 7"})})})]}),
+/* @__PURE__ */e("div",{className:"csp-content-area",children:/* @__PURE__ */t(m,{orientation:"vertical",onLayoutChange:U,onLayoutChanged:X,children:[
+/* @__PURE__ */e(f,{panelRef:A,defaultSize:c||v?"0%":`${I(u)}%`,minSize:"0%",maxSize:v&&c?"0%":`${I(h)}%`,onResize:K,className:V,style:v&&c?{display:"none"}:void 0,children:/* @__PURE__ */e("div",{className:"csp-secondary-body",children:r})}),
 /* @__PURE__ */e(b,{className:"csp-resize-handle",children:/* @__PURE__ */e("div",{className:"csp-resize-handle-bar"})}),
 /* @__PURE__ */e(f,{className:"csp-primary-panel",minSize:"20%",children:/* @__PURE__ */e("div",{className:"csp-panel-content",children:n})})]})})]})},L=({panelIds:r,panels:l,config:a={},className:s="",theme:c})=>{const{defaultActiveTab:d=0,tabPosition:u="top",centered:p=!0,hideTabList:h=!1,activeTabIndex:g,onTabChange:v}=a,[m,f]=o(d),b=void 0!==g,y=b?g:m;i(()=>{b||f(d)},[d,b]);const w=N(c),x=r.map(e=>l.find(t=>t.id===e)).filter(e=>void 0!==e),C=Math.min(y,x.length-1),S=x[C];if(0===x.length)/* @__PURE__ */
 return e("div",{className:"tab-group-empty",children:"No panels available"});const E=/* @__PURE__ */e("div",{className:"tab-list "+("top"===u||"bottom"===u||p?"centered":""),role:"tablist",children:x.map((r,o)=>/* @__PURE__ */e("button",{role:"tab","aria-selected":o===C,"aria-controls":`tabpanel-${r.id}`,id:`tab-${r.id}`,className:"tab-button "+(o===C?"active":""),onClick:()=>(e=>{b||f(e),v?.(e)})(o),title:r.icon?r.label:void 0,children:r.icon?/* @__PURE__ */t(n,{children:[