sage-nexus-ui 1.14.1 → 1.14.2

package/dist/components/ActionBar.mjs

@@ -1 +1 @@
-import{jsxs as e,Fragment as n,jsx as t}from"react/jsx-runtime";import{useTheme as i,useMediaQuery as r,AppBar as l,Toolbar as o}from"@mui/material";import{Box as s}from"./Box.mjs";import{Stack as c}from"./Stack.mjs";import{NexusHome as d}from"./NexusHome.mjs";import{ThemeToggle as x}from"./ThemeToggle.mjs";import a from"./NexusLogo.mjs";import{ActionBarTitle as f}from"./Typography.mjs";import{useRef as h,useState as u,useEffect as m}from"react";const p=({title:p,extraLeft:g,extraRight:w,homeHref:y,showHome:v=!0})=>{const I=i(),b=r(I.breakpoints.up("lg")),j=h(null),[C,B]=u(49),R=h(null),k=h(null),z=h(null),E=h(null),M=h(null),A=h(null),[L,S]=u(null),[H,T]=u(null);return m(()=>{const e=j.current;if(!e)return;const n=()=>B(e.getBoundingClientRect().height);n();const t=window.ResizeObserver;if(!t)return;const i=new t(n);return i.observe(e),()=>i.disconnect()},[]),m(()=>{if(!b)return S(null),void T(null);function e(){const e=k.current,n=z.current,t=R.current,i=E.current,r=M.current,l=A.current;if(!e||!n||!t)return;const o=e.getBoundingClientRect(),s=n.getBoundingClientRect(),c=t.getBoundingClientRect();if(i){const e=i.getBoundingClientRect().width||0,n=(o.right+s.left)/2,t=o.right+e/2+8,r=s.left-e/2-8,l=Math.min(Math.max(n,t),r);S(l-c.left)}else S(null);if(r&&l){const e=r.getBoundingClientRect().width||0,n=l.getBoundingClientRect(),t=(s.right+n.left)/2,i=s.right+e/2+8,o=n.left-e/2-8,d=Math.min(Math.max(t,i),o);T(d-c.left)}else T(null)}e(),window.addEventListener("resize",e);let n=null;const t=window.ResizeObserver;return t&&(n=new t(e),R.current&&n.observe(R.current)),()=>{window.removeEventListener("resize",e),n&&n.disconnect()}},[b,g,w]),e(n,{children:[t(l,{position:"sticky",component:"header",color:"inherit",elevation:0,ref:j,sx:{zIndex:{xs:I.zIndex.appBar,sm:I.zIndex.drawer+1},[I.breakpoints.up("sm")]:{position:"fixed"}},children:e(o,{variant:"dense",sx:{display:"flex",flexDirection:"column",alignItems:"stretch",py:{xs:.5,lg:0}},children:[e(c,{sx:{display:{xs:"flex",sm:"none"},width:"100%"},spacing:.25,children:[e(c,{direction:"row",sx:{justifyContent:"flex-end","& .MuiIconButton-root":{padding:"4px"},"& svg":{fontSize:"1.1rem"}},children:[v&&t(d,{href:y}),t(x,{})]}),t(f,{sx:{textAlign:"center",fontSize:"1.1rem"},children:p})]}),(g||w)&&e(c,{direction:"row",sx:{display:{xs:"flex",sm:"none"},justifyContent:"center",alignItems:"center",gap:1,width:"100%",mt:1},children:[g,w]}),e(c,{sx:{display:{xs:"none",sm:"flex",lg:"none"},width:"100%"},spacing:.5,children:[e(c,{direction:"row",sx:{alignItems:"center",width:"100%"},children:[t(s,{sx:{flex:1,display:"flex",alignItems:"center"},children:t(s,{sx:{height:"38px",pt:.5},children:t(a,{})})}),t(f,{children:p}),e(c,{direction:"row",sx:{flex:1,justifyContent:"flex-end",alignItems:"center",gap:1},children:[v&&t(d,{href:y}),t(x,{})]})]}),(g||w)&&e(c,{direction:"row",sx:{justifyContent:"center",alignItems:"center",gap:2,pb:.5},children:[g&&t(s,{children:g}),w&&t(s,{children:w})]})]}),t(s,{sx:{display:{xs:"none",lg:"block"},width:"100%"},children:e(s,{sx:{display:"flex",flexDirection:"row",alignItems:"center",width:"100%",position:"relative"},ref:R,children:[t(s,{sx:{display:"flex",alignItems:"center",flex:1,justifyContent:"flex-start"},children:t(s,{sx:{height:"38px",pt:.5},ref:k,children:t(a,{})})}),t(s,{sx:{display:"flex",justifyContent:"center",alignItems:"center",position:"absolute",left:0,right:0,pointerEvents:"none"},children:t(s,{sx:{pointerEvents:"auto",textAlign:"center"},children:t(s,{ref:z,children:t(f,{children:p})})})}),t(s,{sx:{display:g?"block":"none",position:"absolute",left:null!=L?`${L}px`:void 0,transform:"translateX(-50%)",pointerEvents:"auto",textAlign:"center"},children:t(s,{ref:E,children:g})}),t(s,{sx:{display:w?"block":"none",position:"absolute",left:null!=H?`${H}px`:void 0,transform:"translateX(-50%)",pointerEvents:"auto",textAlign:"center"},children:t(s,{ref:M,children:w})}),t(s,{sx:{display:"flex",alignItems:"center",flex:1,justifyContent:"flex-end"},children:e(s,{sx:{flex:"0 0 auto",display:"flex",alignItems:"center",gap:1},ref:A,children:[v&&t(d,{href:y}),t(x,{})]})})]})})]})}),t(s,{sx:{display:{xs:"none",sm:"block"},height:`${C}px`,flexShrink:0}})]})};export{p as ActionBar};
+import{jsxs as e,Fragment as n,jsx as t}from"react/jsx-runtime";import{useTheme as i,useMediaQuery as r,AppBar as l,Toolbar as o}from"@mui/material";import{Box as s}from"./Box.mjs";import{Stack as c}from"./Stack.mjs";import{NexusHome as d}from"./NexusHome.mjs";import{ThemeToggle as x}from"./ThemeToggle.mjs";import f from"./NexusLogo.mjs";import{ActionBarTitle as a}from"./Typography.mjs";import{useRef as h,useState as u,useEffect as m}from"react";const p=({title:p,extraLeft:g,extraRight:w,homeHref:y,showHome:v=!0})=>{const j=i(),C=r(j.breakpoints.up("lg")),I=h(null),[b,B]=u(49),R=h(null),k=h(null),z=h(null),E=h(null),M=h(null),A=h(null),[L,S]=u(null),[H,T]=u(null);return m(()=>{const e=I.current;if(!e)return;const n=()=>B(e.getBoundingClientRect().height);n();const t=window.ResizeObserver;if(!t)return;const i=new t(n);return i.observe(e),()=>i.disconnect()},[]),m(()=>{if(!C)return S(null),void T(null);function e(){const e=k.current,n=z.current,t=R.current,i=E.current,r=M.current,l=A.current;if(!e||!n||!t)return;const o=e.getBoundingClientRect(),s=n.getBoundingClientRect(),c=t.getBoundingClientRect();if(i){const e=i.getBoundingClientRect().width||0,n=(o.right+s.left)/2,t=o.right+e/2+8,r=s.left-e/2-8,l=Math.min(Math.max(n,t),r);S(l-c.left)}else S(null);if(r&&l){const e=r.getBoundingClientRect().width||0,n=l.getBoundingClientRect(),t=(s.right+n.left)/2,i=s.right+e/2+8,o=n.left-e/2-8,d=Math.min(Math.max(t,i),o);T(d-c.left)}else T(null)}e(),window.addEventListener("resize",e);let n=null;const t=window.ResizeObserver;return t&&(n=new t(e),R.current&&n.observe(R.current)),()=>{window.removeEventListener("resize",e),n&&n.disconnect()}},[C,g,w]),e(n,{children:[t(l,{position:"sticky",component:"header",color:"inherit",elevation:0,ref:I,sx:{zIndex:{xs:j.zIndex.appBar,sm:j.zIndex.drawer+1},[j.breakpoints.up("sm")]:{position:"fixed"}},children:e(o,{variant:"dense",sx:{display:"flex",flexDirection:"column",alignItems:"stretch",justifyContent:{lg:"center"},py:{xs:.5,lg:0}},children:[e(c,{sx:{display:{xs:"flex",sm:"none"},width:"100%"},spacing:.25,children:[e(c,{direction:"row",sx:{justifyContent:"flex-end","& .MuiIconButton-root":{padding:"4px"},"& svg":{fontSize:"1.1rem"}},children:[v&&t(d,{href:y}),t(x,{})]}),t(a,{sx:{textAlign:"center",fontSize:"1.1rem"},children:p})]}),(g||w)&&e(c,{direction:"row",sx:{display:{xs:"flex",sm:"none"},justifyContent:"center",alignItems:"center",gap:1,width:"100%",mt:1},children:[g,w]}),e(c,{sx:{display:{xs:"none",sm:"flex",lg:"none"},width:"100%"},spacing:.5,children:[e(c,{direction:"row",sx:{alignItems:"center",width:"100%"},children:[t(s,{sx:{flex:1,display:"flex",alignItems:"center"},children:t(s,{sx:{height:"38px",pt:.5},children:t(f,{})})}),t(a,{children:p}),e(c,{direction:"row",sx:{flex:1,justifyContent:"flex-end",alignItems:"center",gap:1},children:[v&&t(d,{href:y}),t(x,{})]})]}),(g||w)&&e(c,{direction:"row",sx:{justifyContent:"center",alignItems:"center",gap:2,pb:.5},children:[g&&t(s,{children:g}),w&&t(s,{children:w})]})]}),t(s,{sx:{display:{xs:"none",lg:"block"},width:"100%"},children:e(s,{sx:{display:"flex",flexDirection:"row",alignItems:"center",width:"100%",position:"relative"},ref:R,children:[t(s,{sx:{display:"flex",alignItems:"center",flex:1,justifyContent:"flex-start"},children:t(s,{sx:{height:"38px",pt:.5},ref:k,children:t(f,{})})}),t(s,{sx:{display:"flex",justifyContent:"center",alignItems:"center",position:"absolute",left:0,right:0,pointerEvents:"none"},children:t(s,{sx:{pointerEvents:"auto",textAlign:"center"},children:t(s,{ref:z,children:t(a,{children:p})})})}),t(s,{sx:{display:g?"block":"none",position:"absolute",left:null!=L?`${L}px`:void 0,transform:"translateX(-50%)",pointerEvents:"auto",textAlign:"center"},children:t(s,{ref:E,children:g})}),t(s,{sx:{display:w?"block":"none",position:"absolute",left:null!=H?`${H}px`:void 0,transform:"translateX(-50%)",pointerEvents:"auto",textAlign:"center"},children:t(s,{ref:M,children:w})}),t(s,{sx:{display:"flex",alignItems:"center",flex:1,justifyContent:"flex-end"},children:e(s,{sx:{flex:"0 0 auto",display:"flex",alignItems:"center",gap:1},ref:A,children:[v&&t(d,{href:y}),t(x,{})]})})]})})]})}),t(s,{sx:{display:{xs:"none",sm:"block"},height:`${b}px`,flexShrink:0}})]})};export{p as ActionBar};

package/dist/components/SideBlade.mjs

@@ -1 +1 @@
-import{jsxs as e,jsx as i}from"react/jsx-runtime";import{useTheme as o,useMediaQuery as r,Drawer as n,Box as t,IconButton as l}from"@mui/material";import a from"@mui/icons-material/ChevronLeft";import d from"@mui/icons-material/Menu";const s="0.25s",p=({open:t,onToggle:l,children:a,collapsedContent:d,expandedWidth:p=240,collapsedWidth:x=64,sx:b})=>{const f=o(),m=r(f.breakpoints.down("sm"));return e(n,m?{anchor:"left",variant:"temporary",open:t,onClose:l,keepMounted:!0,slotProps:{paper:{sx:[{width:p,boxSizing:"border-box",backgroundColor:"background.paper",borderRight:`1px solid ${f.palette.divider}`,overflowX:"hidden"},...Array.isArray(b)?b:b?[b]:[]]}},children:[i(h,{open:t,onToggle:l,collapsedWidth:x}),i(c,{open:t,collapsedContent:d,children:a})]}:{anchor:"left",variant:"permanent",open:t,slotProps:{paper:{sx:[{position:"relative",width:t?p:x,flexShrink:0,whiteSpace:"nowrap",boxSizing:"border-box",overflowX:"hidden",transition:`width ${s} ease`,backgroundColor:"background.paper",borderRadius:0,borderRight:`1px solid ${f.palette.divider}`,display:"flex",flexDirection:"column"},...Array.isArray(b)?b:b?[b]:[]]}},sx:{width:t?p:x,flexShrink:0,transition:`width ${s} ease`,"& .MuiDrawer-paper":{width:t?p:x,transition:`width ${s} ease`}},children:[i(h,{open:t,onToggle:l,collapsedWidth:x}),i(c,{open:t,collapsedContent:d,children:a})]})},c=({open:o,children:r,collapsedContent:n})=>e(t,{sx:{position:"relative",flex:1,overflow:"hidden"},children:[i(t,{sx:{height:"100%",overflowY:"auto",overflowX:"hidden",opacity:o?1:0,visibility:o?"visible":"hidden",transition:`opacity ${s} ease, visibility ${s} ease`},children:r}),n&&i(t,{sx:{position:"absolute",inset:0,overflowY:"auto",overflowX:"hidden",opacity:o?0:1,visibility:o?"hidden":"visible",transition:`opacity ${s} ease, visibility ${s} ease`},children:n})]}),h=({open:e,onToggle:o,collapsedWidth:r})=>{const n=i(e?a:d,{fontSize:"small"});return i(t,{sx:{display:"flex",alignItems:"center",justifyContent:e?"flex-end":"center",minHeight:48,px:.5,flexShrink:0},children:i(l,{onClick:o,size:"small","aria-label":e?"Collapse side blade":"Expand side blade",sx:{width:r-16,borderRadius:1,color:"text.secondary","&:hover":{color:"text.primary",backgroundColor:"action.hover"}},children:n})})};export{p as SideBlade};
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import{useTheme as o,useMediaQuery as r,Drawer as n,Box as t,IconButton as l}from"@mui/material";import a from"@mui/icons-material/ChevronLeft";import d from"@mui/icons-material/Menu";const s="0.25s",p=({open:t,onToggle:l,children:a,collapsedContent:d,expandedWidth:p=240,collapsedWidth:x=64,sx:b,headerActions:f})=>{const m=o(),v=r(m.breakpoints.down("sm"));return e(n,v?{anchor:"left",variant:"temporary",open:t,onClose:l,keepMounted:!0,slotProps:{paper:{sx:[{width:p,boxSizing:"border-box",backgroundColor:"background.paper",borderRight:`1px solid ${m.palette.divider}`,overflowX:"hidden"},...Array.isArray(b)?b:b?[b]:[]]}},children:[i(h,{open:t,onToggle:l,collapsedWidth:x,headerActions:f}),i(c,{open:t,collapsedContent:d,children:a})]}:{anchor:"left",variant:"permanent",open:t,slotProps:{paper:{sx:[{position:"relative",width:t?p:x,flexShrink:0,whiteSpace:"nowrap",boxSizing:"border-box",overflowX:"hidden",transition:`width ${s} ease`,backgroundColor:"background.paper",borderRadius:0,borderRight:`1px solid ${m.palette.divider}`,display:"flex",flexDirection:"column"},...Array.isArray(b)?b:b?[b]:[]]}},sx:{width:t?p:x,flexShrink:0,transition:`width ${s} ease`,"& .MuiDrawer-paper":{width:t?p:x,transition:`width ${s} ease`}},children:[i(h,{open:t,onToggle:l,collapsedWidth:x,headerActions:f}),i(c,{open:t,collapsedContent:d,children:a})]})},c=({open:o,children:r,collapsedContent:n})=>e(t,{sx:{position:"relative",flex:1,overflow:"hidden"},children:[i(t,{sx:{height:"100%",overflowY:"auto",overflowX:"hidden",opacity:o?1:0,visibility:o?"visible":"hidden",transition:`opacity ${s} ease, visibility ${s} ease`},children:r}),n&&i(t,{sx:{position:"absolute",inset:0,overflowY:"auto",overflowX:"hidden",opacity:o?0:1,visibility:o?"hidden":"visible",transition:`opacity ${s} ease, visibility ${s} ease`},children:n})]}),h=({open:o,onToggle:r,collapsedWidth:n,headerActions:s})=>{const p=i(o?a:d,{fontSize:"small"});return e(t,{sx:{display:"flex",alignItems:"center",justifyContent:o&&s?"space-between":o?"flex-end":"center",minHeight:48,px:.5,flexShrink:0},children:[o&&s&&i(t,{sx:{display:"flex",alignItems:"center"},children:s}),i(l,{onClick:r,size:"small","aria-label":o?"Collapse side blade":"Expand side blade",sx:{width:n-16,borderRadius:1,color:"text.secondary","&:hover":{color:"text.primary",backgroundColor:"action.hover"}},children:p})]})};export{p as SideBlade};

package/dist/generated/version.mjs

@@ -1 +1 @@
-const o="1.14.1";export{o as SAGE_NEXUS_UI_VERSION};
+const o="1.14.2";export{o as SAGE_NEXUS_UI_VERSION};

package/dist/index.d.ts

@@ -834,6 +834,8 @@ interface SideBladeProps {
     collapsedWidth?: number;
     /** Additional sx overrides applied to the Drawer Paper */
     sx?: SxProps$1<Theme$1>;
+    /** Extra actions rendered in the header row alongside the collapse/expand toggle (expanded state only) */
+    headerActions?: ReactNode;
 }
 /**
  * SideBlade — a mini-variant persistent Drawer that expands/collapses.
@@ -841,7 +843,7 @@ interface SideBladeProps {
  * On mobile (< sm) it becomes a full temporary overlay drawer.
  * Content is fully customisable via `children`.
  */
-declare const SideBlade: ({ open, onToggle, children, collapsedContent, expandedWidth, collapsedWidth, sx, }: SideBladeProps) => react_jsx_runtime.JSX.Element;
+declare const SideBlade: ({ open, onToggle, children, collapsedContent, expandedWidth, collapsedWidth, sx, headerActions, }: SideBladeProps) => react_jsx_runtime.JSX.Element;
 
 interface SideBladeNavItem {
     label: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sage-nexus-ui",
-  "version": "1.14.1",
+  "version": "1.14.2",
   "description": "Nexus core components",
   "license": "ISC",
   "author": "emsmart-sage",