it-data-nexus-ui-library 2.10.11 → 2.10.12

package/dist/components/Carousel.mjs

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useRef as r,Children as o,useState as i,useCallback as n,useEffect as l}from"react";import s from"@mui/icons-material/ChevronLeftRounded";import a from"@mui/icons-material/ChevronRightRounded";import c from"@mui/material/Box";import{Stack as d}from"./_Primitives/Stack.mjs";import{IconButton as m}from"./Buttons/IconButton.mjs";import{Caption as u}from"./Typography.mjs";const f={xs:1,sm:2,md:3,lg:4},p=["xs","sm","md","lg"],h={disableRipple:!0,disableFocusRipple:!0,sx:e=>({"&.Mui-focusVisible":{outline:`2px solid ${e.palette.primary.main}`,outlineOffset:2}})},g=({children:g,"aria-label":b,itemsPerView:x,gap:v=2.5,previousLabel:y="Previous",nextLabel:w="Next",sx:$})=>{const A=r(null),L=r(null),S=r(null),W=o.toArray(g),j=W.length,[B,R]=i({start:!0,end:!0}),[C,O]=i(new Set),k=n(()=>{const e=A.current;e&&R({start:e.scrollLeft<=2,end:e.scrollLeft+e.clientWidth>=e.scrollWidth-2})},[]);l(()=>{const e=A.current;if(!e)return;k();const t=new ResizeObserver(k);t.observe(e),e.addEventListener("scroll",k,{passive:!0});const r=new Set,o=new IntersectionObserver(e=>{for(const t of e){const e=Number(t.target.dataset.index);t.intersectionRatio>=.5?r.add(e):r.delete(e)}O(new Set(r))},{root:e,threshold:[0,.5,1]});for(const t of Array.from(e.children))o.observe(t);return()=>{t.disconnect(),o.disconnect(),e.removeEventListener("scroll",k)}},[j,k]),l(()=>{Array.from(A.current?.children??[]).forEach((e,t)=>{e.toggleAttribute("inert",C.size>0&&!C.has(t))})},[C,j]),l(()=>{const e=B.end?"next":B.start?"previous":null;if(e&&S.current===e){const t="next"===e?"previous":"next";L.current?.querySelector(`[data-control="${t}"]:not(:disabled)`)?.focus()}},[B]);const E=e=>{const t=A.current,r=t?.children[0];if(!t||!r)return;const o=t.children[1],i=o?o.offsetLeft-r.offsetLeft:r.offsetWidth;t.scrollBy({left:e*i,behavior:"undefined"!=typeof window&&Boolean(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)?"instant":"smooth"})},I=Array.from(C).sort((e,t)=>e-t),F=0===I.length?"":1===I.length?`Showing ${I[0]+1} of ${j}`:`Showing ${I[0]+1}–${I[I.length-1]+1} of ${j}`,N=x&&Object.keys(x).length>0?x:f,P={xs:p.map(e=>N[e]).find(e=>void 0!==e),...N},z=e=>Object.fromEntries(Object.entries(P).filter(e=>void 0!==e[1]).map(([t,r])=>[t,`calc((100% - ${e.spacing(v)} * ${r-1}) / ${r})`]));return e(d,{sx:[{gap:1.5,minWidth:0,maxWidth:"100%"},...Array.isArray($)?$:$?[$]:[]],children:[t(c,{ref:A,role:"region","aria-label":b,tabIndex:0,sx:e=>({display:"grid",gridAutoFlow:"column",gridAutoColumns:z(e),gap:v,minWidth:0,overflowX:"auto",overscrollBehaviorX:"contain",scrollSnapType:"x mandatory",scrollbarWidth:"none","&::-webkit-scrollbar":{display:"none"},scrollBehavior:"smooth","@media (prefers-reduced-motion: reduce)":{scrollBehavior:"auto"},"&:focus-visible":{outline:`2px solid ${e.palette.primary.main}`,outlineOffset:2,borderRadius:1}}),children:W.map((e,r)=>t(c,{"data-index":r,role:"group","aria-roledescription":"slide","aria-label":`${r+1} of ${j}`,sx:{minWidth:0,scrollSnapAlign:"start"},children:e},r))}),e(d,{ref:L,direction:"row",onFocus:e=>{S.current=e.target.dataset.control??null},sx:{justifyContent:"center",alignItems:"center",gap:1.5},children:[t(m,{...h,"data-control":"previous",title:y,onClick:()=>E(-1),disabled:B.start,children:t(s,{})}),t(u,{"aria-live":"polite",sx:{minWidth:"9ch",textAlign:"center"},children:F}),t(m,{...h,"data-control":"next",title:w,onClick:()=>E(1),disabled:B.end,children:t(a,{})})]})]})};g.displayName="Carousel";export{g as Carousel};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useRef as r,Children as o,useState as i,useCallback as n,useEffect as l}from"react";import s from"@mui/icons-material/ChevronLeftRounded";import a from"@mui/icons-material/ChevronRightRounded";import c from"@mui/material/Box";import{Stack as d}from"./_Primitives/Stack.mjs";import{IconButton as m}from"./Buttons/IconButton.mjs";import{Caption as u}from"./Typography.mjs";const f={xs:1,sm:2,md:3,lg:4},p=["xs","sm","md","lg"],h={disableRipple:!0,disableFocusRipple:!0,sx:e=>({"&.Mui-focusVisible":{outline:`2px solid ${e.palette.primary.main}`,outlineOffset:2}})},b=({children:b,"aria-label":g,itemsPerView:x,gap:v=2.5,previousLabel:y="Previous",nextLabel:w="Next",itemLabel:$,sx:A})=>{const L=r(null),S=r(null),W=r(null),j=o.toArray(b),B=j.length,[R,C]=i({start:!0,end:!0}),[O,k]=i(new Set),E=n(()=>{const e=L.current;e&&C({start:e.scrollLeft<=2,end:e.scrollLeft+e.clientWidth>=e.scrollWidth-2})},[]);l(()=>{const e=L.current;if(!e)return;E();const t=new ResizeObserver(E);t.observe(e),e.addEventListener("scroll",E,{passive:!0});const r=new Set,o=new IntersectionObserver(e=>{for(const t of e){const e=Number(t.target.dataset.index);t.intersectionRatio>=.5?r.add(e):r.delete(e)}k(new Set(r))},{root:e,threshold:[0,.5,1]});for(const t of Array.from(e.children))o.observe(t);return()=>{t.disconnect(),o.disconnect(),e.removeEventListener("scroll",E)}},[B,E]),l(()=>{Array.from(L.current?.children??[]).forEach((e,t)=>{e.toggleAttribute("inert",O.size>0&&!O.has(t))})},[O,B]),l(()=>{const e=R.end?"next":R.start?"previous":null;if(e&&W.current===e){const t="next"===e?"previous":"next";S.current?.querySelector(`[data-control="${t}"]:not(:disabled)`)?.focus()}},[R]);const I=e=>{const t=L.current,r=t?.children[0];if(!t||!r)return;const o=t.children[1],i=o?o.offsetLeft-r.offsetLeft:r.offsetWidth;t.scrollBy({left:e*i,behavior:"undefined"!=typeof window&&Boolean(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)?"instant":"smooth"})},F=Array.from(O).sort((e,t)=>e-t),N=0===F.length?"":1===F.length?`Showing ${F[0]+1} of ${B}`:`Showing ${F[0]+1}–${F[F.length-1]+1} of ${B}`,P=x&&Object.keys(x).length>0?x:f,z={xs:p.map(e=>P[e]).find(e=>void 0!==e),...P},M=e=>Object.fromEntries(Object.entries(z).filter(e=>void 0!==e[1]).map(([t,r])=>[t,`calc((100% - ${e.spacing(v)} * ${r-1}) / ${r})`]));return e(d,{sx:[{gap:1.5,minWidth:0,maxWidth:"100%"},...Array.isArray(A)?A:A?[A]:[]],children:[t(c,{ref:L,role:"region","aria-label":g,tabIndex:0,sx:e=>({display:"grid",gridAutoFlow:"column",gridAutoColumns:M(e),gap:v,minWidth:0,overflowX:"auto",overscrollBehaviorX:"contain",scrollSnapType:"x mandatory",scrollbarWidth:"none","&::-webkit-scrollbar":{display:"none"},scrollBehavior:"smooth","@media (prefers-reduced-motion: reduce)":{scrollBehavior:"auto"},"&:focus-visible":{outline:`2px solid ${e.palette.primary.main}`,outlineOffset:2,borderRadius:1}}),children:j.map((e,r)=>t(c,{"data-index":r,role:"group","aria-roledescription":"slide","aria-label":`${r+1} of ${B}`,sx:{minWidth:0,scrollSnapAlign:"start"},children:e},r))}),e(d,{ref:S,direction:"row",onFocus:e=>{W.current=e.target.dataset.control??null},sx:{justifyContent:"center",alignItems:"center",gap:1.5},children:[t(m,{...h,"data-control":"previous",title:y,onClick:()=>I(-1),disabled:R.start,children:t(s,{})}),t(u,{"aria-live":"polite",sx:{minWidth:"9ch",textAlign:"center"},children:$?`${B} ${$}`:N}),t(m,{...h,"data-control":"next",title:w,onClick:()=>I(1),disabled:R.end,children:t(a,{})})]})]})};b.displayName="Carousel";export{b as Carousel};

package/dist/generated/version.mjs

@@ -1 +1 @@
-const o="2.10.11";export{o as SAGE_NEXUS_UI_VERSION};
+const o="2.10.12";export{o as SAGE_NEXUS_UI_VERSION};

package/dist/index.d.ts

@@ -1727,6 +1727,8 @@ interface CarouselProps {
     previousLabel?: string;
     /** Accessible name of the next control. Defaults to "Next". */
     nextLabel?: string;
+    /** When provided, the controls bar shows "{count} {itemLabel}" instead of the scroll position. */
+    itemLabel?: string;
     sx?: SxProps<Theme>;
 }
 /**
@@ -1746,7 +1748,7 @@ interface CarouselProps {
  * ```
  */
 declare const Carousel: {
-    ({ children, "aria-label": ariaLabel, itemsPerView, gap, previousLabel, nextLabel, sx, }: CarouselProps): react.JSX.Element;
+    ({ children, "aria-label": ariaLabel, itemsPerView, gap, previousLabel, nextLabel, itemLabel, sx, }: CarouselProps): react.JSX.Element;
     displayName: string;
 };
 

package/package.json

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