it-data-nexus-ui-library 2.10.5 → 2.10.7

package/dist/components/SectionNav.mjs

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{useState as t,useRef as o,useEffect as r,useCallback as n}from"react";import i from"@mui/material/Box";import{Caption as a}from"./Typography.mjs";const l="#main-content",c="h1, h2, h3, h4, h5, h6",s=()=>window.matchMedia("(prefers-reduced-motion: reduce)").matches?"auto":"smooth",d=({items:d,"aria-label":p,scrollRoot:m=l,sticky:u=!1,stickyOffset:x=0,sx:f})=>{const[h,y]=t(d[0]?.id),b=o(null),v=d.map(e=>e.id).join("\n");r(()=>{const e=v?v.split("\n"):[],t=(e=>null===e?null:"string"==typeof e?document.querySelector(e):e??document.querySelector(l))(m),o=new Set,r=new IntersectionObserver(t=>{for(const e of t)e.isIntersecting?o.add(e.target.id):o.delete(e.target.id);const r=e.find(e=>o.has(e));r&&y(r)},{root:t,rootMargin:"-35% 0px -60% 0px"});for(const t of e){const e=document.getElementById(t);e&&r.observe(e)}return()=>r.disconnect()},[v,m]),r(()=>{const e=b.current,t=e?.querySelector('[aria-current="location"]');!e||!t||e.scrollWidth<=e.clientWidth||e.scrollTo({left:t.offsetLeft-(e.clientWidth-t.offsetWidth)/2,behavior:s()})},[h]);const g=n((e,t)=>{if(e.defaultPrevented||0!==e.button)return;if(e.metaKey||e.ctrlKey||e.shiftKey||e.altKey)return;const o=document.getElementById(t);if(!o)return;e.preventDefault();const r=o.matches(c)?o:o.querySelector(c)??o;r.hasAttribute("tabindex")||r.setAttribute("tabindex","-1"),o.scrollIntoView({block:"start",behavior:s()}),r.focus({preventScroll:!0}),y(t)},[]);return e(i,{ref:b,component:"nav","aria-label":p,sx:[e=>({width:"100%",boxSizing:"border-box",overflowX:{xs:"auto",sm:"visible"},overscrollBehaviorX:"contain",scrollbarWidth:"none","&::-webkit-scrollbar":{display:"none"},px:{xs:"16px",sm:0},maskImage:{xs:"linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent)",sm:"none"},position:u?"sticky":"relative",top:u?x:void 0,zIndex:u?e.zIndex.appBar:void 0,backgroundColor:u?"background.default":void 0,borderBottom:u?`1px solid ${e.palette.divider}`:void 0}),...Array.isArray(f)?f:f?[f]:[]],children:e(i,{component:"ul",role:"list",sx:{listStyle:"none",m:0,p:0,display:"flex",flexWrap:{xs:"nowrap",sm:"wrap"},columnGap:{xs:2.5,sm:3}},children:d.map(({id:t,label:o})=>{const r=t===h;return e(i,{component:"li",sx:{flex:"none"},children:e(i,{component:"a",href:`#${t}`,"aria-current":r?"location":void 0,onClick:e=>g(e,t),sx:{display:"block",py:1.25,whiteSpace:"nowrap",color:r?"text.primary":"text.secondary",textDecoration:r?"underline":"none",textDecorationColor:e=>e.palette.primary.main,textDecorationThickness:r?"2px":void 0,textUnderlineOffset:"7px",borderRadius:.5,"&:hover":{color:"text.primary",textDecoration:"underline",textDecorationColor:e=>e.palette.primary.main},"&:focus-visible":{outline:e=>`2px solid ${e.palette.primary.main}`,outlineOffset:2}},children:e(a,{component:"span",sx:{color:"inherit",letterSpacing:"0.015em"},children:o})})},t)})})})};export{d as SectionNav};
+import{jsx as e}from"react/jsx-runtime";import{useState as t,useRef as o,useEffect as r,useCallback as n}from"react";import i from"@mui/material/Box";import{Caption as a}from"./Typography.mjs";const l="#main-content",c="h1, h2, h3, h4, h5, h6",s=()=>window.matchMedia("(prefers-reduced-motion: reduce)").matches?"auto":"smooth",d=({items:d,"aria-label":p,scrollRoot:m=l,sticky:u=!0,stickyOffset:x=0,sx:f})=>{const[h,y]=t(d[0]?.id),b=o(null),v=d.map(e=>e.id).join("\n");r(()=>{const e=v?v.split("\n"):[],t=(e=>null===e?null:"string"==typeof e?document.querySelector(e):e??document.querySelector(l))(m),o=new Set,r=new IntersectionObserver(t=>{for(const e of t)e.isIntersecting?o.add(e.target.id):o.delete(e.target.id);const r=e.find(e=>o.has(e));r&&y(r)},{root:t,rootMargin:"-35% 0px -60% 0px"});for(const t of e){const e=document.getElementById(t);e&&r.observe(e)}return()=>r.disconnect()},[v,m]),r(()=>{const e=b.current,t=e?.querySelector('[aria-current="location"]');!e||!t||e.scrollWidth<=e.clientWidth||e.scrollTo({left:t.offsetLeft-(e.clientWidth-t.offsetWidth)/2,behavior:s()})},[h]);const g=n((e,t)=>{if(e.defaultPrevented||0!==e.button)return;if(e.metaKey||e.ctrlKey||e.shiftKey||e.altKey)return;const o=document.getElementById(t);if(!o)return;e.preventDefault();const r=o.matches(c)?o:o.querySelector(c)??o;r.hasAttribute("tabindex")||r.setAttribute("tabindex","-1"),o.scrollIntoView({block:"start",behavior:s()}),r.focus({preventScroll:!0}),y(t)},[]);return e(i,{ref:b,component:"nav","aria-label":p,sx:[e=>({width:"100%",boxSizing:"border-box",overflowX:{xs:"auto",sm:"visible"},overscrollBehaviorX:"contain",scrollbarWidth:"none","&::-webkit-scrollbar":{display:"none"},px:{xs:"16px",sm:u?"16px":0},maskImage:{xs:"linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent)",sm:"none"},position:u?"sticky":"relative",top:u?x:void 0,zIndex:u?e.zIndex.appBar:void 0,backgroundColor:u?"background.default":void 0}),...Array.isArray(f)?f:f?[f]:[]],children:e(i,{component:"ul",role:"list",sx:{listStyle:"none",m:0,p:0,display:"flex",flexWrap:{xs:"nowrap",sm:"wrap"},columnGap:{xs:2.5,sm:3}},children:d.map(({id:t,label:o})=>{const r=t===h;return e(i,{component:"li",sx:{flex:"none"},children:e(i,{component:"a",href:`#${t}`,"aria-current":r?"location":void 0,onClick:e=>g(e,t),sx:{display:"block",py:1.25,whiteSpace:"nowrap",color:r?"text.primary":"text.secondary",textDecoration:r?"underline":"none",textDecorationColor:e=>e.palette.primary.main,textDecorationThickness:r?"2px":void 0,textUnderlineOffset:"7px",borderRadius:.5,"&:hover":{color:"text.primary",textDecoration:"underline",textDecorationColor:e=>e.palette.primary.main},"&:focus-visible":{outline:e=>`2px solid ${e.palette.primary.main}`,outlineOffset:2}},children:e(a,{component:"span",sx:{color:"inherit",letterSpacing:"0.015em"},children:o})})},t)})})})};export{d as SectionNav};

package/dist/generated/version.mjs

@@ -1 +1 @@
-const o="2.10.5";export{o as SAGE_NEXUS_UI_VERSION};
+const o="2.10.7";export{o as SAGE_NEXUS_UI_VERSION};

package/dist/index.d.ts

@@ -1632,20 +1632,13 @@ declare const ProcessSteps: {
 };
 
 interface NexusOrbitProps {
-    /** Node labels in order, spaced evenly around the orbit. Designed for 3 to 6; anything past 6 is ignored. */
     labels: string[];
-    /** Replaces the centre graphic. Defaults to `NexusNodeIcon` (lg, brand). */
     core?: ReactNode;
-    /**
-     * Makes the orbit meaningful to assistive tech: the root becomes an image named
-     * `<aria-label>: <label>, <label>, ...`. Omit it and the orbit is decorative (`aria-hidden`).
-     */
     "aria-label"?: string;
     sx?: SxProps<Theme>;
 }
 /**
- * A square, container-scaled orbit graphic: a soft halo and three concentric rings around a
- * rotated rounded-square core, with labelled nodes that circle slowly while their text stays upright.
+ * A square, container-scaled orbit graphic: a soft halo and three concentric rings around a rotated rounded-square core, with labelled nodes that circle slowly while their text stays upright.
  *
  * Under `prefers-reduced-motion: reduce` nothing animates; nodes sit at their angles.
  * There is no pause control, so keep it to a single decorative hero use.
@@ -1660,14 +1653,12 @@ declare const NexusOrbit: {
 };
 
 interface SectionNavItem {
-    /** `id` of the section element on the page; also the link's `#fragment`. */
     id: string;
     label: string;
 }
 interface SectionNavProps {
     /** Ordered sections. Each `id` must match an element on the page. */
     items: SectionNavItem[];
-    /** Accessible name of the `nav` landmark, e.g. "About Nexus sections". */
     "aria-label": string;
     /**
      * The element the page scrolls inside: a CSS selector or an element. Defaults to the
@@ -1675,7 +1666,7 @@ interface SectionNavProps {
      * `null`, or a selector that matches nothing, falls back to the window.
      */
     scrollRoot?: string | HTMLElement | null;
-    /** Pin the nav to the top of the scroll root while its sections scroll underneath. Defaults to false. */
+    /** Pin the nav to the top of the scroll root while its sections scroll underneath. Defaults to `true`. */
     sticky?: boolean;
     /** Distance in px from the top of the scroll root when `sticky`. Defaults to 0. */
     stickyOffset?: number;
@@ -1690,8 +1681,8 @@ interface SectionNavProps {
  * a second scroll. Smooth scrolling is turned off under `prefers-reduced-motion`. Without
  * JavaScript the links still work as plain `#fragment` anchors.
  *
- * Sticky headers over the scroll root hide the top of a scrolled-to section; give sections
- * a `scroll-margin-top` that matches the header.
+ * When `sticky` is true (the default) the nav pins at the top of the scroll root while its sections
+ * scroll underneath. Give sections a `scroll-margin-top` equal to the nav height.
  *
  * Below `sm` the items scroll sideways inside the component instead of wrapping.
  *

package/package.json

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