@principal-ade/panels 1.0.65 → 1.0.67
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.
|
@@ -33,7 +33,7 @@ export interface CollapsibleSplitPaneProps {
|
|
|
33
33
|
maxRatio?: number;
|
|
34
34
|
/** Height of collapsed header bar in pixels (default: 28) */
|
|
35
35
|
collapsedHeight?: number;
|
|
36
|
-
/** Hide the header completely (
|
|
36
|
+
/** Hide the header completely (default: true, set to false to show header) */
|
|
37
37
|
hideHeader?: boolean;
|
|
38
38
|
/** Theme object for customizing colors */
|
|
39
39
|
theme: Theme;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CollapsibleSplitPane.d.ts","sourceRoot":"","sources":["../../src/components/CollapsibleSplitPane.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,SAAS,EAKV,MAAM,OAAO,CAAC;AAQf,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAEtD,OAAO,4BAA4B,CAAC;AAEpC,MAAM,WAAW,qBAAqB;IACpC,8CAA8C;IAC9C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,yBAAyB;IACxC,6DAA6D;IAC7D,cAAc,EAAE,SAAS,CAAC;IAE1B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAE7B;;;OAGG;IACH,eAAe,CAAC,EAAE,qBAAqB,CAAC;IAExC,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,4CAA4C;IAC5C,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAEjD,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,2CAA2C;IAC3C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,6DAA6D;IAC7D,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,
|
|
1
|
+
{"version":3,"file":"CollapsibleSplitPane.d.ts","sourceRoot":"","sources":["../../src/components/CollapsibleSplitPane.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,SAAS,EAKV,MAAM,OAAO,CAAC;AAQf,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAEtD,OAAO,4BAA4B,CAAC;AAEpC,MAAM,WAAW,qBAAqB;IACpC,8CAA8C;IAC9C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,yBAAyB;IACxC,6DAA6D;IAC7D,cAAc,EAAE,SAAS,CAAC;IAE1B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAE7B;;;OAGG;IACH,eAAe,CAAC,EAAE,qBAAqB,CAAC;IAExC,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,4CAA4C;IAC5C,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAEjD,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,2CAA2C;IAC3C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,6DAA6D;IAC7D,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,0CAA0C;IAC1C,KAAK,EAAE,KAAK,CAAC;IAEb,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,kDAAkD;IAClD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,wDAAwD;IACxD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,8CAA8C;IAC9C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAE7B,iDAAiD;IACjD,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEhC,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAE3B,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA2DpE,CAAC"}
|
package/dist/index.esm.js
CHANGED
|
@@ -6,12 +6,12 @@ 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(m,{orientation:"vertical",onLayoutChange:ae,onLayoutChanged:se,children:[
|
|
7
7
|
/* @__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 A&&!J&&(e+=" animating"),M&&(e+=" collapsed"),e})(),style:de,children:/* @__PURE__ */e("div",{className:"panel-content-wrapper",style:{opacity:M?0:1,transition:A?`opacity ${.5*v}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:A,"aria-label":M?"Expand top panel":"Collapse top panel",children:M?"▾":"▴"}),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(f,{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*v}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=!
|
|
9
|
+
/* @__PURE__ */e(f,{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*v}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: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:i,onRatioChange:a??(()=>{}),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[z,k]=o(!1),[L,M]=o(!1),P=l(null),A=l(void 0),T=l(void 0),$=l(u),B=l(!1),O=l(c),F=e=>100*e;a(()=>{O.current=c},[c]),a(()=>{!c&&u>0&&($.current=u)},[c,u]);const I=i((e,t,n)=>{if(!P.current)return;A.current&&cancelAnimationFrame(A.current),T.current=performance.now();const r=o=>{if(!T.current||!P.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;P.current.resize(`${s}%`),i<1?A.current=requestAnimationFrame(r):(P.current.resize(`${t}%`),n&&n(),B.current=!1,k(!1))};A.current=requestAnimationFrame(r)},[N]),H=i(()=>{if(z||L||!P.current)return;u>0&&($.current=u),B.current=!0,k(!0),S?.();const e=F(u);I(e,0,()=>{O.current=!0,d(!0),E?.()})},[z,L,u,I,d,S,E]),W=i(()=>{if(z||L||!P.current)return;B.current=!0,k(!0),D?.();const e=$.current||u||.3,t=F(e);I(0,t,()=>{O.current=!1,d(!1),p(e),R?.()})},[z,L,u,I,d,p,D,R]),j=i(()=>{c?W():H()},[c,H,W]),q=i(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=i(()=>{z||M(!0)},[z]),U=i(()=>{M(!1)},[]);a(()=>{if(c&&!z&&P.current){P.current.getSize().asPercentage>0&&H()}else if(!c&&!z&&P.current){0===P.current.getSize().asPercentage&&W()}},[c]),a(()=>()=>{A.current&&cancelAnimationFrame(A.current)},[]);const X=C(y),Y=["csp-secondary-panel",z&&!L?"csp-animating":"",c?"csp-collapsed":""].filter(Boolean).join(" ");/* @__PURE__ */
|
|
10
10
|
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}),
|
|
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(),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"})})})]}),
|
|
13
13
|
/* @__PURE__ */e("div",{className:"csp-content-area",children:/* @__PURE__ */t(m,{orientation:"vertical",onLayoutChange:K,onLayoutChanged:U,children:[
|
|
14
|
-
/* @__PURE__ */e(f,{panelRef:P,defaultSize:c?"0%":`${F(u)}%`,minSize:"0%",maxSize:`${F(h)}%`,onResize:q,className:Y,children:/* @__PURE__ */e("div",{className:"csp-secondary-body",children:r})}),
|
|
14
|
+
/* @__PURE__ */e(f,{panelRef:P,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})}),
|
|
15
15
|
/* @__PURE__ */e(b,{className:"csp-resize-handle",children:/* @__PURE__ */e("div",{className:"csp-resize-handle-bar"})}),
|
|
16
16
|
/* @__PURE__ */e(f,{className:"csp-primary-panel",minSize:"20%",children:/* @__PURE__ */e("div",{className:"csp-panel-content",children:n})})]})})]})},z=({panelIds:r,panels:l,config:i={},className:s="",theme:c})=>{const{defaultActiveTab:d=0,tabPosition:u="top",centered:p=!0,hideTabList:h=!1,activeTabIndex:g,onTabChange:v}=i,[m,f]=o(d),b=void 0!==g,y=b?g:m;a(()=>{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__ */
|
|
17
17
|
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:[
|