it-data-nexus-ui-library 2.10.10 → 2.10.11
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
|
-
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),u=()=>window.matchMedia("(prefers-reduced-motion: reduce)").matches?"auto":"smooth",y=({items:y,"aria-label":m,scrollRoot:f=a,sticky:x=!0,stickyOffset:h=0,sx:
|
|
1
|
+
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),u=()=>window.matchMedia("(prefers-reduced-motion: reduce)").matches?"auto":"smooth",y=({items:y,"aria-label":m,scrollRoot:f=a,sticky:x=!0,stickyOffset:h=0,justifyContent:b="center",sx:v})=>{const[w,g]=n(y[0]?.id),S=r(null),k=r(null),$=r(!1),E=r(void 0),I=y.map(e=>e.id).join("\n");i(()=>{const e=I?I.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()},[I,f]),i(()=>{if(!x)return;const e=S.current,t=k.current,o=p(f);if(!e||!t)return;let n=!1,r=o?o.scrollTop:window.scrollY;const i=()=>{const e=(o??document.documentElement).getBoundingClientRect();return{top:e.top+h,left:e.left,width:o?o.clientWidth:window.innerWidth}},l=()=>{t.style.display="none",e.style.position="",e.style.top="",e.style.left="",e.style.width="",e.style.boxSizing=""},s=()=>{e.style.opacity="",e.style.visibility="",e.style.pointerEvents=""},c=()=>{const c=o?o.scrollTop:window.scrollY,a=c-r;if(r=c,c>h&&!n)(()=>{const{top:o,left:n,width:r}=i();t.style.height=`${e.offsetHeight}px`,t.style.display="block",e.style.position="fixed",e.style.top=`${o}px`,e.style.left=`${n}px`,e.style.width=`${r}px`,e.style.boxSizing="border-box"})(),n=!0;else if(c<=h&&n)l(),n=!1;else if(n){const{top:t,left:o,width:n}=i();e.style.top=`${t}px`,e.style.left=`${o}px`,e.style.width=`${n}px`}$.current||(c<=h||a<-5?s():c>100&&a>8&&(e.style.opacity="0",e.style.visibility="hidden",e.style.pointerEvents="none"))},a=o??window;a.addEventListener("scroll",c,{passive:!0});const d=new ResizeObserver(()=>{if(n){const{top:t,left:o,width:n}=i();e.style.top=`${t}px`,e.style.left=`${o}px`,e.style.width=`${n}px`}});return d.observe(o??document.documentElement),()=>{a.removeEventListener("scroll",c),d.disconnect(),l(),s(),clearTimeout(E.current)}},[x,f,h]),i(()=>{const e=S.current,t=e?.querySelector('[aria-current="location"]');!e||!t||e.scrollWidth<=e.clientWidth||e.scrollTo({left:t.offsetLeft-(e.clientWidth-t.offsetWidth)/2,behavior:u()})},[w]);const T=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");const r=S.current;r&&(r.style.opacity="",r.style.visibility="",r.style.pointerEvents=""),$.current=!0,clearTimeout(E.current),E.current=setTimeout(()=>{$.current=!1},1e3),o.scrollIntoView({block:"start",behavior:u()}),n.focus({preventScroll:!0}),g(t)},[]);return e(t,{children:[o("div",{ref:k,"aria-hidden":"true",style:{display:"none",flexShrink:0}}),o(s,{ref:S,component:"nav","aria-label":m,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"},zIndex:x?e.zIndex.appBar:void 0,backgroundColor:x?"background.default":void 0,...x&&{transition:"opacity 0.2s ease, visibility 0.2s ease","@media (prefers-reduced-motion: reduce)":{transition:"none"}}}),...Array.isArray(v)?v:v?[v]:[]],children:o(s,{component:"ul",role:"list",sx:{listStyle:"none",m:0,p:0,display:"flex",flexWrap:{xs:"nowrap",sm:"wrap"},justifyContent:b,columnGap:{xs:2.5,sm:3}},children:y.map(({id:e,label:t})=>{const n=e===w;return o(s,{component:"li",sx:{flex:"none"},children:o(s,{component:"a",href:`#${e}`,"aria-current":n?"location":void 0,onClick:t=>T(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{y as SectionNav};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const o="2.10.
|
|
1
|
+
const o="2.10.11";export{o as SAGE_NEXUS_UI_VERSION};
|
package/dist/index.d.ts
CHANGED
|
@@ -1679,6 +1679,12 @@ interface SectionNavProps {
|
|
|
1679
1679
|
sticky?: boolean;
|
|
1680
1680
|
/** Distance in px from the top of the scroll root when `sticky`. Defaults to 0. */
|
|
1681
1681
|
stickyOffset?: number;
|
|
1682
|
+
/**
|
|
1683
|
+
* How items are distributed along the nav's horizontal axis. Defaults to `"center"`.
|
|
1684
|
+
* For `"flex-start"` or `"flex-end"`, add a matching `pl` or `pr` via `sx` to inset
|
|
1685
|
+
* items from the page edge by the page gutter.
|
|
1686
|
+
*/
|
|
1687
|
+
justifyContent?: "center" | "flex-start" | "flex-end";
|
|
1682
1688
|
sx?: SxProps<Theme>;
|
|
1683
1689
|
}
|
|
1684
1690
|
/**
|
|
@@ -1703,7 +1709,7 @@ interface SectionNavProps {
|
|
|
1703
1709
|
* />
|
|
1704
1710
|
* ```
|
|
1705
1711
|
*/
|
|
1706
|
-
declare const SectionNav: ({ items, "aria-label": ariaLabel, scrollRoot, sticky, stickyOffset, sx, }: SectionNavProps) => react.JSX.Element;
|
|
1712
|
+
declare const SectionNav: ({ items, "aria-label": ariaLabel, scrollRoot, sticky, stickyOffset, justifyContent, sx, }: SectionNavProps) => react.JSX.Element;
|
|
1707
1713
|
|
|
1708
1714
|
type CarouselBreakpoint = "xs" | "sm" | "md" | "lg";
|
|
1709
1715
|
/** Cards visible at once per breakpoint. Fractions leave the next card peeking, e.g. `1.15`. */
|