@principal-ade/panels 1.0.79 → 1.0.80
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnimatedResizableLayout.d.ts","sourceRoot":"","sources":["../../src/components/AnimatedResizableLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAC;AAQnF,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAEtD,OAAO,+BAA+B,CAAC;AAEvC,MAAM,WAAW,4BAA4B;IAC3C,iCAAiC;IACjC,SAAS,EAAE,SAAS,CAAC;IAErB,kCAAkC;IAClC,UAAU,EAAE,SAAS,CAAC;IAEtB,gCAAgC;IAChC,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEnC,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,kDAAkD;IAClD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,wDAAwD;IACxD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,gCAAgC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAE7B,6CAA6C;IAC7C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEhC,wCAAwC;IACxC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAE3B,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE9B,0CAA0C;IAC1C,KAAK,EAAE,KAAK,CAAC;CACd;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,
|
|
1
|
+
{"version":3,"file":"AnimatedResizableLayout.d.ts","sourceRoot":"","sources":["../../src/components/AnimatedResizableLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAC;AAQnF,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAEtD,OAAO,+BAA+B,CAAC;AAEvC,MAAM,WAAW,4BAA4B;IAC3C,iCAAiC;IACjC,SAAS,EAAE,SAAS,CAAC;IAErB,kCAAkC;IAClC,UAAU,EAAE,SAAS,CAAC;IAEtB,gCAAgC;IAChC,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEnC,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,kDAAkD;IAClD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,wDAAwD;IACxD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,gCAAgC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAE7B,6CAA6C;IAC7C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEhC,wCAAwC;IACxC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAE3B,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE9B,0CAA0C;IAC1C,KAAK,EAAE,KAAK,CAAC;CACd;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAqR1E,CAAC"}
|
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import r,{useState as o,useRef as l,useCallback as a,useEffect as i,createContext as s,useContext as c,forwardRef as d,useImperativeHandle as u,useMemo as p,useLayoutEffect as h,memo as g,useReducer as v}from"react";import{Group as m,Panel as f,Separator as b}from"react-resizable-panels";import{unstable_batchedUpdates as y,createPortal as w}from"react-dom";import{useTheme as x}from"@principal-ade/industry-theme";import './index.css';function C(e){return{"--panel-background":e.colors.background,"--panel-border":e.colors.border,"--panel-handle":e.colors.backgroundSecondary,"--panel-handle-hover":e.colors.backgroundHover,"--panel-handle-active":e.colors.primary,"--panel-button-bg":e.colors.surface,"--panel-button-hover":e.colors.backgroundHover,"--panel-button-border":e.colors.border,"--panel-button-icon":e.colors.textSecondary,"--panel-accent-bg":e.colors.primary+"15"}}function N(e){return{"--tab-list-bg":e.colors.backgroundSecondary,"--tab-border":e.colors.border,"--tab-bg":e.colors.surface,"--tab-bg-hover":e.colors.backgroundHover,"--tab-bg-active":e.colors.primary,"--tab-text":e.colors.textSecondary,"--tab-text-hover":e.colors.text,"--tab-text-active":e.colors.background,"--tab-icon-color":e.colors.textTertiary,"--tab-icon-active":e.colors.background,"--tab-border-hover":e.colors.textSecondary,"--tab-border-active":e.colors.primary,"--tab-focus":e.colors.primary,"--tab-content-bg":e.colors.background,"--tab-empty-text":e.colors.textMuted,"--tab-font-family":e.fonts.body,"--tab-font-size":"11px","--tab-font-weight":String(e.fontWeights.medium),"--mobile-tab-text-active":e.colors.primary,"--mobile-tab-icon-active":e.colors.primary}}const S=({leftPanel:n,rightPanel:r,collapsibleSide:s="left",defaultSize:c=25,minSize:d=5,className:u="",collapsed:p=!1,style:h,showCollapseButton:g=!1,animationDuration:v=300,animationEasing:y="cubic-bezier(0.4, 0, 0.2, 1)",onCollapseStart:w,onCollapseComplete:x,onExpandStart:N,onExpandComplete:S,theme:E})=>{const[D,R]=o(p),[L,z]=o(!1),[P,k]=o(!1),[A,M]=o(p),[T,$]=o(p?0:c),B=l(null),O=l(void 0),F=l(void 0),I=l(void 0),H=a((e,t,n)=>{if(!B.current)return;O.current&&cancelAnimationFrame(O.current),F.current=performance.now();const r=o=>{if(!F.current||!B.current)return;const l=o-F.current,a=Math.min(l/v,1),i=a<.5?4*a*a*a:1-Math.pow(-2*a+2,3)/2,s=e+(t-e)*i;B.current.resize(s),a<1?O.current=requestAnimationFrame(r):(0===t?B.current.collapse():B.current.resize(t),z(!1),n&&n())};O.current=requestAnimationFrame(r)},[v]),W=a(()=>{L||P||(z(!0),R(!0),w&&w(),H(T,0,()=>{$(0),M(!0),x&&x()}))},[L,P,T,H,w,x]),j=a(()=>{L||P||(z(!0),R(!1),M(!1),N&&N(),H(0,c,()=>{$(c),S&&S()}))},[L,P,c,H,N,S]),q=a(()=>{D?j():W()},[D,W,j]),K=a(e=>{if(!L){const t=e.asPercentage;$(t),t>0&&R(!1)}},[L]),U=a(()=>{L||k(!0)},[L]),X=a(()=>{k(!1)},[]);i(()=>{p!==D&&(p?W():j())},[p]),i(()=>{p&&!L?M(!0):p||L||M(!1)},[p,L]),i(()=>{const e=O.current,t=I.current;return()=>{e&&cancelAnimationFrame(e),t&&clearTimeout(t)}},[]);const Y="left"===s,V=D?Y?"▸":"◂":Y?"◂":"▸",J=C(E),G=L&&!P?{transition:`flex ${v}ms ${y}`}:void 0,_=e=>{let t="hybrid-panel";return e&&(t+=" collapsible-panel",L&&!P&&(t+=" animating"),D&&(t+=" collapsed")),t};/* @__PURE__ */
|
|
1
|
+
import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import r,{useState as o,useRef as l,useCallback as a,useEffect as i,createContext as s,useContext as c,forwardRef as d,useImperativeHandle as u,useMemo as p,useLayoutEffect as h,memo as g,useReducer as v}from"react";import{Group as m,Panel as f,Separator as b}from"react-resizable-panels";import{unstable_batchedUpdates as y,createPortal as w}from"react-dom";import{useTheme as x}from"@principal-ade/industry-theme";import './index.css';function C(e){return{"--panel-background":e.colors.background,"--panel-border":e.colors.border,"--panel-handle":e.colors.backgroundSecondary,"--panel-handle-hover":e.colors.backgroundHover,"--panel-handle-active":e.colors.primary,"--panel-button-bg":e.colors.surface,"--panel-button-hover":e.colors.backgroundHover,"--panel-button-border":e.colors.border,"--panel-button-icon":e.colors.textSecondary,"--panel-accent-bg":e.colors.primary+"15"}}function N(e){return{"--tab-list-bg":e.colors.backgroundSecondary,"--tab-border":e.colors.border,"--tab-bg":e.colors.surface,"--tab-bg-hover":e.colors.backgroundHover,"--tab-bg-active":e.colors.primary,"--tab-text":e.colors.textSecondary,"--tab-text-hover":e.colors.text,"--tab-text-active":e.colors.background,"--tab-icon-color":e.colors.textTertiary,"--tab-icon-active":e.colors.background,"--tab-border-hover":e.colors.textSecondary,"--tab-border-active":e.colors.primary,"--tab-focus":e.colors.primary,"--tab-content-bg":e.colors.background,"--tab-empty-text":e.colors.textMuted,"--tab-font-family":e.fonts.body,"--tab-font-size":"11px","--tab-font-weight":String(e.fontWeights.medium),"--mobile-tab-text-active":e.colors.primary,"--mobile-tab-icon-active":e.colors.primary}}const S=({leftPanel:n,rightPanel:r,collapsibleSide:s="left",defaultSize:c=25,minSize:d=5,className:u="",collapsed:p=!1,style:h,showCollapseButton:g=!1,animationDuration:v=300,animationEasing:y="cubic-bezier(0.4, 0, 0.2, 1)",onCollapseStart:w,onCollapseComplete:x,onExpandStart:N,onExpandComplete:S,theme:E})=>{const[D,R]=o(p),[L,z]=o(!1),[P,k]=o(!1),[A,M]=o(p),[T,$]=o(p?0:c),B=l(null),O=l(void 0),F=l(void 0),I=l(void 0),H=a((e,t,n)=>{if(!B.current)return;O.current&&cancelAnimationFrame(O.current),F.current=performance.now();const r=o=>{if(!F.current||!B.current)return;const l=o-F.current,a=Math.min(l/v,1),i=a<.5?4*a*a*a:1-Math.pow(-2*a+2,3)/2,s=e+(t-e)*i;B.current.resize(s),a<1?O.current=requestAnimationFrame(r):(0===t?B.current.collapse():B.current.resize(t),z(!1),n&&n())};O.current=requestAnimationFrame(r)},[v]),W=a(()=>{L||P||(z(!0),R(!0),w&&w(),H(T,0,()=>{$(0),M(!0),x&&x()}))},[L,P,T,H,w,x]),j=a(()=>{L||P||(z(!0),R(!1),M(!1),N&&N(),H(0,c,()=>{$(c),S&&S()}))},[L,P,c,H,N,S]),q=a(()=>{D?j():W()},[D,W,j]),K=a(e=>{if(!L){const t=e.asPercentage;$(t),t>0&&R(!1)}},[L]),U=a(()=>{L||k(!0)},[L]),X=a(()=>{k(!1)},[]);i(()=>{p!==D&&(p?W():j())},[p]),i(()=>{p&&!L?M(!0):p||L||M(!1)},[p,L]),i(()=>{p&&B.current&&requestAnimationFrame(()=>{B.current?.collapse()})},[]),i(()=>{const e=O.current,t=I.current;return()=>{e&&cancelAnimationFrame(e),t&&clearTimeout(t)}},[]);const Y="left"===s,V=D?Y?"▸":"◂":Y?"◂":"▸",J=C(E),G=L&&!P?{transition:`flex ${v}ms ${y}`}:void 0,_=e=>{let t="hybrid-panel";return e&&(t+=" collapsible-panel",L&&!P&&(t+=" animating"),D&&(t+=" collapsed")),t};/* @__PURE__ */
|
|
2
2
|
return e("div",{className:`animated-resizable-layout ${u}`,style:{...J,...h},children:/* @__PURE__ */t(m,{orientation:"horizontal",onLayoutChange:U,onLayoutChanged:X,children:[
|
|
3
3
|
/* @__PURE__ */e(f,{panelRef:Y?B:void 0,collapsible:Y,defaultSize:Y?p?"0%":`${c}%`:void 0,minSize:Y?`${d}%`:"30%",collapsedSize:"0%",onResize:Y?K:void 0,className:_(Y),style:Y?G:void 0,children:/* @__PURE__ */e("div",{className:"panel-content-wrapper",style:{opacity:Y&&D?0:1,transition:L?`opacity ${.5*v}ms ${y}`:"none"},children:n})}),
|
|
4
4
|
/* @__PURE__ */e(b,{className:"resize-handle "+(A?"collapsed":""),style:A?{visibility:"hidden",width:0}:void 0,children:g&&/* @__PURE__ */e("div",{className:"handle-bar",children:/* @__PURE__ */e("button",{onClick:q,className:"collapse-toggle",disabled:L,"aria-label":D?"Expand panel":"Collapse panel",children:V})})}),
|