it-data-nexus-ui-library 2.10.6 → 2.10.8

package/dist/components/SectionNav.mjs

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{useState as t,useRef as r,useEffect as o,useCallback as n}from"react";import i from"@mui/material/Box";import{Caption as a}from"./Typography.mjs";const s="#main-content",c="h1, h2, h3, h4, h5, h6",l=e=>null===e?null:"string"==typeof e?document.querySelector(e):e??document.querySelector(s),d=()=>window.matchMedia("(prefers-reduced-motion: reduce)").matches?"auto":"smooth",p=({items:p,"aria-label":u,scrollRoot:m=s,sticky:x=!0,stickyOffset:f=0,sx:h})=>{const[y,v]=t(p[0]?.id),[b,w]=t(!0),g=r(null),k=r(0),S=r(!1),I=r(void 0),T=p.map(e=>e.id).join("\n");o(()=>{const e=T?T.split("\n"):[],t=l(m),r=new Set,o=new IntersectionObserver(t=>{for(const e of t)e.isIntersecting?r.add(e.target.id):r.delete(e.target.id);const o=e.find(e=>r.has(e));o&&v(o)},{root:t,rootMargin:"-35% 0px -60% 0px"});for(const t of e){const e=document.getElementById(t);e&&o.observe(e)}return()=>o.disconnect()},[T,m]),o(()=>{if(!x)return;const e=l(m),t=e??window,r=()=>{const t=e?e.scrollTop:window.scrollY,r=t-k.current;k.current=t,S.current||(t<=0||r<-5?w(!0):t>100&&r>8&&w(!1))};return t.addEventListener("scroll",r,{passive:!0}),()=>{t.removeEventListener("scroll",r),clearTimeout(I.current)}},[x,m]),o(()=>{const e=g.current,t=e?.querySelector('[aria-current="location"]');!e||!t||e.scrollWidth<=e.clientWidth||e.scrollTo({left:t.offsetLeft-(e.clientWidth-t.offsetWidth)/2,behavior:d()})},[y]);const D=n((e,t)=>{if(e.defaultPrevented||0!==e.button)return;if(e.metaKey||e.ctrlKey||e.shiftKey||e.altKey)return;const r=document.getElementById(t);if(!r)return;e.preventDefault();const o=r.matches(c)?r:r.querySelector(c)??r;o.hasAttribute("tabindex")||o.setAttribute("tabindex","-1"),w(!0),S.current=!0,clearTimeout(I.current),I.current=setTimeout(()=>{S.current=!1},1e3),r.scrollIntoView({block:"start",behavior:d()}),o.focus({preventScroll:!0}),v(t)},[]);return e(i,{ref:g,component:"nav","aria-label":u,sx:[e=>({width:"100%",boxSizing:"border-box",overflowX:{xs:"auto",sm:"visible"},overscrollBehaviorX:"contain",scrollbarWidth:"none","&::-webkit-scrollbar":{display:"none"},px:{xs:"16px",sm:x?"16px":0},maskImage:{xs:"linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent)",sm:"none"},position:x?"sticky":"relative",top:x?f:void 0,zIndex:x?e.zIndex.appBar:void 0,backgroundColor:x?"background.default":void 0,...x&&{opacity:b?1:0,visibility:b?"visible":"hidden",pointerEvents:b?void 0:"none",transition:"opacity 0.2s ease, visibility 0.2s ease","@media (prefers-reduced-motion: reduce)":{transition:"none"}}}),...Array.isArray(h)?h:h?[h]:[]],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:p.map(({id:t,label:r})=>{const o=t===y;return e(i,{component:"li",sx:{flex:"none"},children:e(i,{component:"a",href:`#${t}`,"aria-current":o?"location":void 0,onClick:e=>D(e,t),sx:{display:"block",py:1.25,whiteSpace:"nowrap",color:o?"text.primary":"text.secondary",textDecoration:o?"underline":"none",textDecorationColor:e=>e.palette.primary.main,textDecorationThickness:o?"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:r})})},t)})})})};export{p as SectionNav};
+import{jsxs as e,Fragment as t,jsx as o}from"react/jsx-runtime";import{useState as n,useRef as r,useEffect as i,useCallback as l}from"react";import s from"@mui/material/Box";import{Caption as c}from"./Typography.mjs";const a="#main-content",d="h1, h2, h3, h4, h5, h6",p=e=>null===e?null:"string"==typeof e?document.querySelector(e):e??document.querySelector(a),m=()=>window.matchMedia("(prefers-reduced-motion: reduce)").matches?"auto":"smooth",u=({items:u,"aria-label":x,scrollRoot:f=a,sticky:y=!0,stickyOffset:h=0,sx:b})=>{const[v,g]=n(u[0]?.id),w=r(null),S=r(null),k=u.map(e=>e.id).join("\n");i(()=>{const e=k?k.split("\n"):[],t=p(f),o=new Set,n=new IntersectionObserver(t=>{for(const e of t)e.isIntersecting?o.add(e.target.id):o.delete(e.target.id);const n=e.find(e=>o.has(e));n&&g(n)},{root:t,rootMargin:"-35% 0px -60% 0px"});for(const t of e){const e=document.getElementById(t);e&&n.observe(e)}return()=>n.disconnect()},[k,f]),i(()=>{if(!y)return;const e=w.current,t=S.current,o=p(f);if(!e||!t)return;let n=!1;const r=()=>{const n=(o??document.documentElement).getBoundingClientRect();t.style.height=`${e.offsetHeight}px`,t.style.display="block",e.style.position="fixed",e.style.top=`${n.top+h}px`,e.style.left=`${n.left}px`,e.style.width=`${o?o.clientWidth:window.innerWidth}px`,e.style.boxSizing="border-box"},i=()=>{t.style.display="none",e.style.position="",e.style.top="",e.style.left="",e.style.width="",e.style.boxSizing=""},l=()=>{(o?o.scrollTop:window.scrollY)>h?(r(),n=!0):(i(),n=!1)},s=o??window;s.addEventListener("scroll",l,{passive:!0});const c=new ResizeObserver(()=>{n&&r()});return c.observe(o??document.documentElement),()=>{s.removeEventListener("scroll",l),c.disconnect(),i()}},[y,f,h]),i(()=>{const e=w.current,t=e?.querySelector('[aria-current="location"]');!e||!t||e.scrollWidth<=e.clientWidth||e.scrollTo({left:t.offsetLeft-(e.clientWidth-t.offsetWidth)/2,behavior:m()})},[v]);const I=l((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 n=o.matches(d)?o:o.querySelector(d)??o;n.hasAttribute("tabindex")||n.setAttribute("tabindex","-1"),o.scrollIntoView({block:"start",behavior:m()}),n.focus({preventScroll:!0}),g(t)},[]);return e(t,{children:[o("div",{ref:S,"aria-hidden":"true",style:{display:"none",flexShrink:0}}),o(s,{ref:w,component:"nav","aria-label":x,sx:[e=>({width:"100%",boxSizing:"border-box",overflowX:{xs:"auto",sm:"visible"},overscrollBehaviorX:"contain",scrollbarWidth:"none","&::-webkit-scrollbar":{display:"none"},px:{xs:"16px",sm:y?"16px":0},maskImage:{xs:"linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent)",sm:"none"},zIndex:y?e.zIndex.appBar:void 0,backgroundColor:y?"background.default":void 0}),...Array.isArray(b)?b:b?[b]:[]],children:o(s,{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:u.map(({id:e,label:t})=>{const n=e===v;return o(s,{component:"li",sx:{flex:"none"},children:o(s,{component:"a",href:`#${e}`,"aria-current":n?"location":void 0,onClick:t=>I(t,e),sx:{display:"block",py:1.25,whiteSpace:"nowrap",color:n?"text.primary":"text.secondary",textDecoration:n?"underline":"none",textDecorationColor:e=>e.palette.primary.main,textDecorationThickness:n?"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:o(c,{component:"span",sx:{color:"inherit",letterSpacing:"0.015em"},children:t})})},e)})})})]})};export{u as SectionNav};

package/dist/generated/version.mjs

@@ -1 +1 @@
-const o="2.10.6";export{o as SAGE_NEXUS_UI_VERSION};
+const o="2.10.8";export{o as SAGE_NEXUS_UI_VERSION};

package/dist/index.d.ts

@@ -1681,9 +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.
  *
- * When `sticky` is true (the default) the nav pins at the top of the scroll root, hides on downward scroll,
- * and reappears on any upward scroll. Clicking a link keeps the nav visible briefly so the
- * user can chain navigations. Give sections a `scroll-margin-top` equal to the nav height.
+ * 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.6",
+  "version": "2.10.8",
   "description": "Nexus core components",
   "license": "ISC",
   "author": "emsmart-sage",