it-data-nexus-ui-library 2.4.4 → 2.4.7

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

package/dist/components/SegmentedControl.mjs

@@ -1 +1 @@
-import{jsx as r}from"react/jsx-runtime";import{ToggleButtonGroup as o,ToggleButton as e}from"@mui/material";import{colours as a}from"../theme/tokens.mjs";function i({options:i,value:l,onChange:t,ariaLabel:n,size:s="small",sx:b,...d}){return r(o,{exclusive:!0,value:l,onChange:(r,o)=>{null!==o&&t(o)},size:s,"aria-label":n,sx:[{bgcolor:"rgba(255, 255, 255, 0.85)",borderRadius:"999px",border:"1px solid",borderColor:"divider",boxShadow:"inset 0 1px 2px rgba(10, 22, 34, 0.05)",p:"3px",gap:"2px","& .MuiToggleButton-root":{border:"none",borderRadius:"999px !important",textTransform:"none",fontWeight:600,px:2,color:a.darkGrey,transition:"background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease","&:not(.Mui-selected):hover":{bgcolor:"rgba(0, 0, 0, 0.08)",color:"rgba(0, 0, 0, 0.87)"}},"&& .MuiToggleButton-root.Mui-selected":{bgcolor:"primary.main",color:"primary.contrastText",boxShadow:"0 1px 4px rgba(20, 39, 59, 0.3), inset 0 1px 0 rgba(255,255,255,0.12)","&:hover":{bgcolor:"primary.dark"}}},...Array.isArray(b)?b:b?[b]:[]],...d,children:i.map(o=>r(e,{value:o.value,disabled:o.disabled,"aria-label":o.ariaLabel,children:o.label},o.value))})}export{i as SegmentedControl};
+import{jsx as e}from"react/jsx-runtime";import{ToggleButtonGroup as o,ToggleButton as r}from"@mui/material";import{colours as a}from"../theme/tokens.mjs";const i={small:{height:32,px:"14px",fontSize:"0.8125rem"},medium:{height:40,px:"20px",fontSize:"0.9375rem"},large:{height:48,px:"28px",fontSize:"1rem"}};function t({options:t,value:n,onChange:l,ariaLabel:s,size:d="medium",sx:p,...g}){const{height:m,px:x,fontSize:b}=i[d];return e(o,{exclusive:!0,value:n,onChange:(e,o)=>{null!==o&&l(o)},"aria-label":s,sx:[{bgcolor:"rgba(255, 255, 255, 0.85)",borderRadius:"999px",border:"1px solid",borderColor:"divider",boxShadow:"inset 0 1px 2px rgba(10, 22, 34, 0.05)",p:"3px",gap:"2px",minHeight:m,width:"fit-content","& .MuiToggleButton-root":{border:"none",borderRadius:"999px !important",textTransform:"none",fontWeight:600,paddingInline:x,paddingBlock:0,fontSize:b,lineHeight:1,alignSelf:"stretch",color:a.darkGrey,transition:"background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease","&:not(.Mui-selected):hover":{bgcolor:"rgba(0, 0, 0, 0.08)",color:"rgba(0, 0, 0, 0.87)"}},"&& .MuiToggleButton-root.Mui-selected":{bgcolor:"primary.main",color:"primary.contrastText",boxShadow:"0 1px 4px rgba(20, 39, 59, 0.3), inset 0 1px 0 rgba(255,255,255,0.12)","&:hover":{bgcolor:"primary.dark"}}},...Array.isArray(p)?p:p?[p]:[]],...g,children:t.map(o=>e(r,{value:o.value,disabled:o.disabled,"aria-label":o.ariaLabel,children:o.label},o.value))})}export{t as SegmentedControl};

package/dist/generated/version.mjs

@@ -1 +1 @@
-const o="2.4.4";export{o as SAGE_NEXUS_UI_VERSION};
+const o="2.4.7";export{o as SAGE_NEXUS_UI_VERSION};

package/dist/index.d.ts

@@ -486,12 +486,13 @@ interface SegmentedControlOption<T extends string = string> {
     ariaLabel?: string;
     disabled?: boolean;
 }
-interface SegmentedControlProps<T extends string = string> extends Omit<ToggleButtonGroupProps, "value" | "onChange" | "exclusive" | "color"> {
+interface SegmentedControlProps<T extends string = string> extends Omit<ToggleButtonGroupProps, "value" | "onChange" | "exclusive" | "color" | "size"> {
     options: SegmentedControlOption<T>[];
     value: T;
     onChange: (value: T) => void;
     /** Accessible group label, e.g. "Level of detail". */
     ariaLabel?: string;
+    size?: "small" | "medium" | "large";
 }
 /**
  * Segmented pill-track toggle for switching between a small set of mutually exclusive
@@ -600,8 +601,9 @@ interface ActionBarProps {
     extraRight?: ReactNode;
     homeHref?: string;
     showHome?: boolean;
+    logo?: ReactNode;
 }
-declare const ActionBar: ({ title, extraLeft, extraRight, homeHref, showHome, }: ActionBarProps) => ReactElement;
+declare const ActionBar: ({ title, extraLeft, extraRight, homeHref, showHome, logo, }: ActionBarProps) => ReactElement;
 
 interface AccordionGroupProps {
     children: ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "it-data-nexus-ui-library",
-  "version": "2.4.4",
+  "version": "2.4.7",
   "description": "Nexus core components",
   "license": "ISC",
   "author": "emsmart-sage",