@principal-ade/panels 1.0.76 → 1.0.77
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/dist/index.esm.js +1 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -6,7 +6,7 @@ return e("div",{className:`animated-resizable-layout ${u}`,style:{...J,...h},chi
|
|
|
6
6
|
return e("div",{className:`animated-vertical-layout ${u}`,style:{...ce,...h},children:/* @__PURE__ */t(f,{orientation:"vertical",onLayoutChange:ae,onLayoutChanged:se,children:[
|
|
7
7
|
/* @__PURE__ */e(v,{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*m}ms ${y}`:"none"},children:n})}),
|
|
8
8
|
/* @__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?"▴":"▾"})]})}),
|
|
9
|
-
/* @__PURE__ */e(v,{panelRef:X,collapsible:s.bottom,defaultSize:p.bottom?"0%":`${c.bottom}%`,minSize:`${d.bottom}%`,collapsedSize:"0%",onResize:ie,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*m}ms ${y}`:"none"},children:r})})]})})},D=({primaryContent:t,secondaryContent:n,collapsedHeader:r,collapsed:o=!0,onCollapsedChange:l,ratio:i=.3,onRatioChange:a,maxRatio:s=.8,collapsedHeight:c=28,hideHeader:d=!0,theme:u,className:p="",style:h,animationDuration:g=200,onCollapseStart:m,onCollapseComplete:f,onExpandStart:v,onExpandComplete:b})=>{const y=C(u);return n?/* @__PURE__ */e(R,{primaryContent:t,secondaryContent:n,collapsedHeader:r??{title:"Content"},collapsed:o,onCollapsedChange:l??(()=>{}),ratio:i,onRatioChange:a??(()=>{}),maxRatio:s,collapsedHeight:c,hideHeader:d,theme:u,className:p,style:h,animationDuration:g,onCollapseStart:m,onCollapseComplete:f,onExpandStart:v,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:m=!0,theme:y,className:w="",style:x,animationDuration:N=200,onCollapseStart:S,onCollapseComplete:E,onExpandStart:D,onExpandComplete:R})=>{console.log("[CSP] render",{collapsed:c,hideHeader:m,ratio:u});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;a(()=>{O.current=c},[c]),a(()=>{!c&&u>0&&($.current=u)},[c,u]);const H=i((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,i=Math.min(l/N,1),a=i<.5?4*i*i*i:1-Math.pow(-2*i+2,3)/2,s=e+(t-e)*a;A.current.resize(`${s}%`),i<1?M.current=requestAnimationFrame(r):(A.current.resize(`${t}%`),n&&n(),B.current=!1,z(!1))};M.current=requestAnimationFrame(r)},[N]),W=i(()=>{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=i(()=>{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=i(()=>{c?j():W()},[c,W,j]),K=i(e=>{if(console.log("[CSP] onResize",{size:e.asPercentage,isInitialMount:F.current,isAnimating:B.current,collapsedRef:O.current}),B.current)return;if(F.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=i(()=>{L||k(!0)},[L]),X=i(()=>{k(!1)},[]);a(()=>{console.log("[CSP] mount effect - scheduling clear of isInitialMountRef");const e=
|
|
9
|
+
/* @__PURE__ */e(v,{panelRef:X,collapsible:s.bottom,defaultSize:p.bottom?"0%":`${c.bottom}%`,minSize:`${d.bottom}%`,collapsedSize:"0%",onResize:ie,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*m}ms ${y}`:"none"},children:r})})]})})},D=({primaryContent:t,secondaryContent:n,collapsedHeader:r,collapsed:o=!0,onCollapsedChange:l,ratio:i=.3,onRatioChange:a,maxRatio:s=.8,collapsedHeight:c=28,hideHeader:d=!0,theme:u,className:p="",style:h,animationDuration:g=200,onCollapseStart:m,onCollapseComplete:f,onExpandStart:v,onExpandComplete:b})=>{const y=C(u);return n?/* @__PURE__ */e(R,{primaryContent:t,secondaryContent:n,collapsedHeader:r??{title:"Content"},collapsed:o,onCollapsedChange:l??(()=>{}),ratio:i,onRatioChange:a??(()=>{}),maxRatio:s,collapsedHeight:c,hideHeader:d,theme:u,className:p,style:h,animationDuration:g,onCollapseStart:m,onCollapseComplete:f,onExpandStart:v,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:m=!0,theme:y,className:w="",style:x,animationDuration:N=200,onCollapseStart:S,onCollapseComplete:E,onExpandStart:D,onExpandComplete:R})=>{console.log("[CSP] render",{collapsed:c,hideHeader:m,ratio:u});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;a(()=>{O.current=c},[c]),a(()=>{!c&&u>0&&($.current=u)},[c,u]);const H=i((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,i=Math.min(l/N,1),a=i<.5?4*i*i*i:1-Math.pow(-2*i+2,3)/2,s=e+(t-e)*a;A.current.resize(`${s}%`),i<1?M.current=requestAnimationFrame(r):(A.current.resize(`${t}%`),n&&n(),B.current=!1,z(!1))};M.current=requestAnimationFrame(r)},[N]),W=i(()=>{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=i(()=>{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=i(()=>{c?j():W()},[c,W,j]),K=i(e=>{if(console.log("[CSP] onResize",{size:e.asPercentage,isInitialMount:F.current,isAnimating:B.current,collapsedRef:O.current}),B.current)return;if(F.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=i(()=>{L||k(!0)},[L]),X=i(()=>{k(!1)},[]);a(()=>{console.log("[CSP] mount effect - scheduling clear of isInitialMountRef");const e=setTimeout(()=>{console.log("[CSP] clearing isInitialMountRef"),F.current=!1},100);return()=>clearTimeout(e)},[]),a(()=>{const e=A.current?.getSize().asPercentage??-1;console.log("[CSP] collapsed sync effect",{collapsed:c,isInitialMount:F.current,isAnimating:L,currentSize:e}),F.current?console.log("[CSP] skipping sync - initial mount"):c&&!L&&A.current?e>0&&(console.log("[CSP] triggering handleCollapse from sync effect"),W()):c||L||!A.current||0===e&&(console.log("[CSP] triggering handleExpand from sync effect"),j())},[c]),a(()=>()=>{M.current&&cancelAnimationFrame(M.current)},[]);const Y=C(y),V=["csp-secondary-panel",L&&!P?"csp-animating":"",c?"csp-collapsed":""].filter(Boolean).join(" ");/* @__PURE__ */
|
|
10
10
|
return t("div",{className:`collapsible-split-pane ${w}`,style:{...Y,...x},children:[!m&&/* @__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}),
|
|
11
11
|
/* @__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}),
|
|
12
12
|
/* @__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"})})})]}),
|