@tedi-design-system/react 19.2.0-rc.5 → 19.2.0-rc.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "19.2.0-rc.5",
+  "version": "19.2.0-rc.6",
   "description": "TEDI Design System React component library — accessible, reusable UI components. Docs & live examples: https://storybook.tedi.ee/react/rc/",
   "type": "module",
   "sideEffects": false,

package/src/tedi/components/content/carousel/components/carousel-indicators/carousel-indicators.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../../../../../../external/classnames/index.cjs.js"),m=require("react"),i=require("../../../../base/typography/text/text.cjs.js"),u=require("../../../../buttons/button/button.cjs.js"),l=require("../../carousel.module.scss.cjs.js"),v=require("../../carousel-context.cjs.js"),C=require("../../../../../providers/label-provider/use-labels.cjs.js"),d=m.forwardRef(({withArrows:c=!1,variant:b="dots",className:f},x)=>{const{getLabel:o}=C.useLabels(),r=v.useCarouselContext(),{slidesCount:s,slideIndex:a}=r;return e.jsxs("div",{ref:x,className:n.default(l.default["tedi-carousel__indicators"],f),children:[c&&e.jsx(u.Button,{visualType:"neutral",icon:"arrow_back",disabled:!r.canPrev,onClick:r.prev,children:o("carousel.move-back")}),b==="dots"?Array.from({length:s},(_,t)=>e.jsx("button",{type:"button","aria-label":o("carousel.show-slide",t+1),"aria-current":t===a?"true":void 0,className:n.default(l.default["tedi-carousel__indicator"],{[l.default["tedi-carousel__indicator--active"]]:t===a}),onClick:()=>r.goToIndex(t,{focusSlide:!0})},t)):s>0&&e.jsxs("div",{children:[e.jsx(i.Text,{element:"span",modifiers:"bold",color:"brand",children:a+1}),e.jsx(i.Text,{element:"span",color:"tertiary",children:` / ${s}`})]}),c&&e.jsx(u.Button,{visualType:"neutral",icon:"arrow_forward",disabled:!r.canNext,onClick:r.next,children:o("carousel.move-forward")})]})});d.displayName="CarouselIndicators";exports.CarouselIndicators=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../../../../../../external/classnames/index.cjs.js"),v=require("react"),i=require("../../../../base/typography/text/text.cjs.js"),u=require("../../../../buttons/button/button.cjs.js"),l=require("../../carousel.module.scss.cjs.js"),p=require("../../carousel-context.cjs.js"),j=require("../../../../../providers/label-provider/use-labels.cjs.js"),d=v.forwardRef(({withArrows:n=!1,variant:b="dots",className:x},f)=>{const{getLabel:r}=j.useLabels(),t=p.useCarouselContext(),{positions:s,activePositionIndex:a}=t;return e.jsxs("div",{ref:f,className:c.default(l.default["tedi-carousel__indicators"],x),children:[n&&e.jsx(u.Button,{visualType:"neutral",icon:"arrow_back",disabled:!t.canPrev,onClick:t.prev,children:r("carousel.move-back")}),b==="dots"?s.map((m,o)=>e.jsx("button",{type:"button","aria-label":r("carousel.show-slide",o+1),"aria-current":o===a?"true":void 0,className:c.default(l.default["tedi-carousel__indicator"],{[l.default["tedi-carousel__indicator--active"]]:o===a}),onClick:()=>t.goToIndex(m,{focusSlide:!0})},o)):s.length>0&&e.jsxs("div",{children:[e.jsx(i.Text,{element:"span",modifiers:"bold",color:"brand",children:a+1}),e.jsx(i.Text,{element:"span",color:"tertiary",children:` / ${s.length}`})]}),n&&e.jsx(u.Button,{visualType:"neutral",icon:"arrow_forward",disabled:!t.canNext,onClick:t.next,children:r("carousel.move-forward")})]})});d.displayName="CarouselIndicators";exports.CarouselIndicators=d;

package/src/tedi/components/content/carousel/components/carousel-indicators/carousel-indicators.es.js

@@ -1,33 +1,33 @@
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import n from "../../../../../../../external/classnames/index.es.js";
-import { forwardRef as b } from "react";
+import { forwardRef as v } from "react";
 import { Text as d } from "../../../../base/typography/text/text.es.js";
 import { Button as m } from "../../../../buttons/button/button.es.js";
-import l from "../../carousel.module.scss.es.js";
-import { useCarouselContext as v } from "../../carousel-context.es.js";
+import i from "../../carousel.module.scss.es.js";
+import { useCarouselContext as h } from "../../carousel-context.es.js";
 import { useLabels as _ } from "../../../../../providers/label-provider/use-labels.es.js";
-const C = b(
-  ({ withArrows: i = !1, variant: u = "dots", className: f }, p) => {
-    const { getLabel: a } = _(), r = v(), { slidesCount: t, slideIndex: s } = r;
-    return /* @__PURE__ */ c("div", { ref: p, className: n(l["tedi-carousel__indicators"], f), children: [
-      i && /* @__PURE__ */ e(m, { visualType: "neutral", icon: "arrow_back", disabled: !r.canPrev, onClick: r.prev, children: a("carousel.move-back") }),
-      u === "dots" ? Array.from({ length: t }, (h, o) => /* @__PURE__ */ e(
+const C = v(
+  ({ withArrows: l = !1, variant: u = "dots", className: p }, f) => {
+    const { getLabel: a } = _(), o = h(), { positions: t, activePositionIndex: s } = o;
+    return /* @__PURE__ */ c("div", { ref: f, className: n(i["tedi-carousel__indicators"], p), children: [
+      l && /* @__PURE__ */ e(m, { visualType: "neutral", icon: "arrow_back", disabled: !o.canPrev, onClick: o.prev, children: a("carousel.move-back") }),
+      u === "dots" ? t.map((b, r) => /* @__PURE__ */ e(
         "button",
         {
           type: "button",
-          "aria-label": a("carousel.show-slide", o + 1),
-          "aria-current": o === s ? "true" : void 0,
-          className: n(l["tedi-carousel__indicator"], {
-            [l["tedi-carousel__indicator--active"]]: o === s
+          "aria-label": a("carousel.show-slide", r + 1),
+          "aria-current": r === s ? "true" : void 0,
+          className: n(i["tedi-carousel__indicator"], {
+            [i["tedi-carousel__indicator--active"]]: r === s
           }),
-          onClick: () => r.goToIndex(o, { focusSlide: !0 })
+          onClick: () => o.goToIndex(b, { focusSlide: !0 })
         },
-        o
-      )) : t > 0 && /* @__PURE__ */ c("div", { children: [
+        r
+      )) : t.length > 0 && /* @__PURE__ */ c("div", { children: [
         /* @__PURE__ */ e(d, { element: "span", modifiers: "bold", color: "brand", children: s + 1 }),
-        /* @__PURE__ */ e(d, { element: "span", color: "tertiary", children: ` / ${t}` })
+        /* @__PURE__ */ e(d, { element: "span", color: "tertiary", children: ` / ${t.length}` })
       ] }),
-      i && /* @__PURE__ */ e(m, { visualType: "neutral", icon: "arrow_forward", disabled: !r.canNext, onClick: r.next, children: a("carousel.move-forward") })
+      l && /* @__PURE__ */ e(m, { visualType: "neutral", icon: "arrow_forward", disabled: !o.canNext, onClick: o.next, children: a("carousel.move-forward") })
     ] });
   }
 );

package/src/tedi/components/content/carousel/use-carousel.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),De=require("../../../helpers/hooks/use-breakpoint.cjs.js"),ne=require("./carousel-utils.cjs.js"),Fe=require("../../../providers/label-provider/use-labels.cjs.js"),Ve={slidesPerView:{xs:1},gap:{xs:1},fade:!1,transitionMs:400,loop:!0,centered:!1},V=(T,p)=>(T%p+p)%p,Ee=T=>{const{getLabel:p}=Fe.useLabels(),E=De.default(),[l,se]=t.useState(Ve),[r,ce]=t.useState(0),[f,b]=t.useState(0),[h,Y]=t.useState(0),[j,R]=t.useState(!1),[x,oe]=t.useState(0),[H,ae]=t.useState(16),[ue,le]=t.useState(""),A=t.useRef(null),J=t.useRef(null),Q=t.useRef([]),P=t.useRef(!1),y=t.useRef(!1),$=t.useRef(!1),O=t.useRef(0),D=t.useRef(0),Z=t.useRef(0),_=t.useRef(0),q=t.useRef(0),G=t.useRef(),L=t.useRef(0),ee=t.useRef(!0),d=t.useRef(f),te=t.useRef(h);t.useEffect(()=>{d.current=f},[f]),t.useEffect(()=>{te.current=h},[h]);const a=t.useMemo(()=>ne.resolveBreakpointValue(l.slidesPerView,E),[l.slidesPerView,E]),C=t.useMemo(()=>ne.resolveBreakpointValue(l.gap,E),[l.gap,E]),S=t.useMemo(()=>C*H,[C,H]),s=l.loop,M=t.useMemo(()=>Math.max(0,r-Math.ceil(a)),[r,a]),k=t.useCallback(e=>s?e:Math.min(Math.max(e,0),M),[s,M]),m=s?r:0,ie=t.useMemo(()=>r===0?0:s?V(Math.floor(f),r):Math.min(Math.max(Math.round(f),0),r-1),[f,r,s]),X=s?f-h+m:f,fe=s||f>.001,de=s||f<M-.001,me=t.useMemo(()=>{if(!r)return[];if(!s)return Array.from({length:r},(c,o)=>o);const e=2*m+Math.ceil(a),n=h-m;return Array.from({length:e},(c,o)=>V(n+o,r))},[r,m,a,h,s]),he=t.useMemo(()=>`0 0 calc((100% - ${(a-1)*C}rem) / ${a})`,[a,C]),Me=t.useMemo(()=>{if(!x)return{gap:`${C}rem`,transform:"translate3d(0,0,0)",transition:"none"};const e=S*(a-1),n=(x-e)/a,c=s?f-h+m:f,o=l.centered?(x-n)/2:0,u=-c*(n+S)+o;return{gap:`${C}rem`,transform:`translate3d(${u}px, 0, 0)`,transition:j?`transform ${l.transitionMs}ms ease`:"none"}},[x,C,S,a,f,h,m,j,l.transitionMs,l.centered,s]),pe=t.useCallback(e=>{const n=Math.ceil(a);return e>=X&&e<X+n},[a,X]),be=t.useCallback((e,n,c)=>{const o=[e];if(l.fade){const u=l.fade==="both"||l.fade!=="right"&&a<=1;o.push(u?c:n)}return o.join(" ")},[l.fade,a]),Re=t.useCallback((e,n)=>{Q.current[e]=n},[]),w=t.useCallback(()=>{setTimeout(()=>{if(!ee.current||!r)return;const e=s?V(Math.floor(d.current),r):Math.min(Math.max(Math.round(d.current),0),r-1);le(p("carousel.slide",e+1,r))},100)},[p,r,s]),N=t.useCallback(()=>{P.current=!0,setTimeout(()=>{P.current=!1},l.transitionMs)},[l.transitionMs]),re=t.useCallback(()=>{setTimeout(()=>{var n;const e=d.current-te.current+m;(n=Q.current[e])==null||n.focus({preventScroll:!0})})},[m]),K=t.useCallback(()=>{!r||P.current||!s&&d.current>=M-.001||(R(!0),b(e=>k(e+1)),N(),w())},[r,s,M,k,N,w]),U=t.useCallback(()=>{!r||P.current||!s&&d.current<=.001||(R(!0),b(e=>k(e-1)),N(),w())},[r,s,k,N,w]),W=t.useCallback((e,n)=>{if(!(!r||P.current)){if(R(!0),s){const c=V(Math.floor(d.current),r),u=V(e,r)-c;b(i=>i+u)}else b(k(e));n!=null&&n.focusSlide?$.current=!0:w()}},[r,s,k,w]),ke=t.useCallback(e=>{e.target!==J.current||e.propertyName!=="transform"||y.current||(R(!1),Y(Math.floor(d.current)),$.current&&($.current=!1,re()))},[re]),Ce=t.useCallback(()=>{const e=A.current;e&&(e.scrollLeft=0,e.scrollTop=0)},[]),I=t.useCallback(()=>(x-S*(a-1))/a+S,[x,S,a]),ge=t.useCallback(e=>{if(!r)return;const n=Math.abs(e.deltaX)>Math.abs(e.deltaY)?e.deltaX:e.shiftKey?e.deltaY:0;if(!n)return;const c=I();if(!c)return;const o=n/c;L.current+=o;const u=m*.9,i=s?h-u:0,g=s?h+u:M,v=d.current+o,z=Math.min(Math.max(v,i),g),Te=z!==v;R(!1),b(z),clearTimeout(G.current),G.current=setTimeout(()=>{R(!0);const Pe=Math.sign(L.current),F=d.current;let B=Math.round(F);Math.abs(L.current)>.3&&(B=Pe>0?Math.ceil(F):Math.floor(F)),Te&&(F<=i&&(B=Math.ceil(i)),F>=g&&(B=Math.floor(g)));const ye=Math.min(Math.max(B,i),g);b(ye),L.current=0},120)},[r,I,m,h,s,M]),xe=t.useCallback(e=>{switch(e.key){case"ArrowRight":case"PageDown":e.preventDefault(),K();break;case"ArrowLeft":case"PageUp":e.preventDefault(),U();break;case"Home":e.preventDefault(),W(0);break;case"End":e.preventDefault(),W(r-1);break}},[K,U,W,r]),Se=t.useCallback(e=>{var n;r&&((n=A.current)==null||n.setPointerCapture(e.pointerId),y.current=!0,R(!1),O.current=e.clientX,D.current=d.current,Z.current=e.timeStamp,_.current=e.clientX,q.current=e.timeStamp,s&&Y(Math.floor(d.current)))},[r,s]),we=t.useCallback(e=>{if(!y.current)return;const n=I();if(!n)return;const c=e.clientX-O.current;if(Number.isNaN(c))return;_.current=e.clientX,q.current=e.timeStamp;const o=c/n,u=D.current-o,i=m*.9,g=Math.floor(D.current),v=s?g-i:0,z=s?g+i:M;b(Math.min(Math.max(u,v),z))},[I,m,s,M]),Ie=t.useCallback(()=>{if(!y.current)return;y.current=!1,R(!0);const e=I(),n=Math.round(d.current);let c=n;const o=q.current-Z.current,u=o>0&&e?-(_.current-O.current)/e/o:0;Math.abs(u)>.0015&&n===Math.round(D.current)&&(c=Math.round(D.current)+(u>0?1:-1)),b(k(c))},[I,k]);return t.useEffect(()=>{const e=A.current;if(!e)return;const n=i=>{oe(i),ae(parseFloat(getComputedStyle(document.documentElement).fontSize)||16)},c=getComputedStyle(e),o=(parseFloat(c.paddingLeft)||0)+(parseFloat(c.paddingRight)||0);n(e.clientWidth-o);const u=new ResizeObserver(([i])=>{i&&n(i.contentRect.width)});return u.observe(e),()=>u.disconnect()},[]),t.useEffect(()=>()=>{ee.current=!1,clearTimeout(G.current)},[]),{viewportRef:A,trackRef:J,setSlideRef:Re,setConfig:se,setSlidesCount:ce,slidesCount:r,slideIndex:ie,canPrev:fe,canNext:de,renderedIndices:me,renderedActiveIndex:X,slideFlex:he,trackStyle:Me,contentClassName:be,isSlideVisible:pe,announcement:ue,regionLabel:(T==null?void 0:T.trim())||p("carousel"),slideLabel:e=>p("carousel.slide",e,r),next:K,prev:U,goToIndex:W,onTransitionEnd:ke,onScroll:Ce,onWheel:ge,onKeyDown:xe,onPointerDown:Se,onPointerMove:we,onPointerUp:Ie}};exports.useCarousel=Ee;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),Ne=require("../../../helpers/hooks/use-breakpoint.cjs.js"),le=require("./carousel-utils.cjs.js"),_e=require("../../../providers/label-provider/use-labels.cjs.js"),ve={slidesPerView:{xs:1},gap:{xs:1},fade:!1,transitionMs:400,loop:!0,centered:!1},Fe=.3,Ve=1e-6,F=(S,b)=>(S%b+b)%b,Q=(S,b)=>S.reduce((I,d,$)=>Math.abs(d-b)<Math.abs(S[I]-b)?$:I,0),Xe=S=>{const{getLabel:b}=_e.useLabels(),I=Ne.default(),[d,$]=t.useState(ve),[s,fe]=t.useState(0),[m,C]=t.useState(0),[R,Z]=t.useState(0),[ee,x]=t.useState(!1),[E,de]=t.useState(0),[te,me]=t.useState(16),[he,Me]=t.useState(""),V=t.useRef(null),re=t.useRef(null),ne=t.useRef([]),L=t.useRef(!1),N=t.useRef(!1),G=t.useRef(!1),U=t.useRef(0),X=t.useRef(0),se=t.useRef(0),q=t.useRef(0),H=t.useRef(0),W=t.useRef(),_=t.useRef(0),ce=t.useRef(!0),h=t.useRef(m),oe=t.useRef(R);t.useEffect(()=>{h.current=m},[m]),t.useEffect(()=>{oe.current=R},[R]);const l=t.useMemo(()=>le.resolveBreakpointValue(d.slidesPerView,I),[d.slidesPerView,I]),T=t.useMemo(()=>le.resolveBreakpointValue(d.gap,I),[d.gap,I]),D=t.useMemo(()=>T*te,[T,te]),r=d.loop,u=t.useMemo(()=>{const e=Math.max(0,s-l),n=Math.round(e);return Math.abs(e-n)<Ve?n:e},[s,l]),f=t.useMemo(()=>{if(!s)return[];if(r)return Array.from({length:s},(c,o)=>o);const e=Math.floor(u),n=Array.from({length:e+1},(c,o)=>o);return u>e&&n.push(u),n},[s,r,u]),P=t.useCallback(e=>r?e:Math.min(Math.max(e,0),u),[r,u]),p=r?s:0,pe=t.useMemo(()=>f.length?r?F(Math.floor(m),s):Q(f,m):0,[f,m,s,r]),O=r?m-R+p:Math.ceil(m),be=s>0&&(r||m>0),Re=s>0&&(r||m<u);t.useLayoutEffect(()=>{r||(clearTimeout(W.current),_.current=0,h.current=P(h.current),C(e=>P(e)))},[r,u,P]);const ge=t.useMemo(()=>{if(!s)return[];if(!r)return Array.from({length:s},(c,o)=>o);const e=2*p+Math.ceil(l),n=R-p;return Array.from({length:e},(c,o)=>F(n+o,s))},[s,p,l,R,r]),Ce=t.useMemo(()=>`0 0 calc((100% - ${(l-1)*T}rem) / ${l})`,[l,T]),ke=t.useMemo(()=>{if(!E)return{gap:`${T}rem`,transform:"translate3d(0,0,0)",transition:"none"};const e=D*(l-1),n=(E-e)/l,c=r?m-R+p:m,o=d.centered?(E-n)/2:0,i=-c*(n+D)+o;return{gap:`${T}rem`,transform:`translate3d(${i}px, 0, 0)`,transition:ee?`transform ${d.transitionMs}ms ease`:"none"}},[E,T,D,l,m,R,p,ee,d.transitionMs,d.centered,r]),Se=t.useCallback(e=>{if(!r)return e+1>m&&e<m+l;const n=Math.ceil(l);return e>=O&&e<O+n},[l,O,r,m]),xe=t.useCallback((e,n,c)=>{const o=[e];if(d.fade){const i=d.fade==="both"||d.fade!=="right"&&l<=1;o.push(i?c:n)}return o.join(" ")},[d.fade,l]),we=t.useCallback((e,n)=>{ne.current[e]=n},[]),y=t.useCallback(()=>{setTimeout(()=>{if(!ce.current||!s)return;const e=r?F(Math.floor(h.current),s):Math.min(Math.max(Math.ceil(h.current),0),s-1);Me(b("carousel.slide",e+1,s))},100)},[b,s,r]),z=t.useCallback(()=>{L.current=!0,setTimeout(()=>{L.current=!1},d.transitionMs)},[d.transitionMs]),ae=t.useCallback(()=>{setTimeout(()=>{var n;const e=r?h.current-oe.current+p:Math.ceil(h.current);(n=ne.current[e])==null||n.focus({preventScroll:!0})})},[p,r]),K=t.useCallback(()=>{!s||L.current||!r&&h.current>=u||(x(!0),C(e=>r?e+1:f.find(n=>n>e)??u),z(),y())},[s,r,u,f,z,y]),Y=t.useCallback(()=>{!s||L.current||!r&&h.current<=0||(x(!0),C(e=>r?e-1:[...f].reverse().find(n=>n<e)??0),z(),y())},[s,r,f,z,y]),B=t.useCallback((e,n)=>{if(!(!s||L.current)){if(x(!0),r){const c=F(Math.floor(h.current),s),i=F(e,s)-c;C(a=>a+i)}else C(P(e));n!=null&&n.focusSlide?G.current=!0:y()}},[s,r,P,y]),Ie=t.useCallback(e=>{e.target!==re.current||e.propertyName!=="transform"||N.current||(x(!1),Z(Math.floor(h.current)),G.current&&(G.current=!1,ae()))},[ae]),Te=t.useCallback(()=>{const e=V.current;e&&(e.scrollLeft=0,e.scrollTop=0)},[]),A=t.useCallback(()=>(E-D*(l-1))/l+D,[E,D,l]),Pe=t.useCallback(e=>{if(!s)return;const n=Math.abs(e.deltaX)>Math.abs(e.deltaY)?e.deltaX:e.shiftKey?e.deltaY:0;if(!n)return;const c=A();if(!c)return;const o=n/c;_.current+=o;const i=p*.9,a=r?R-i:0,M=r?R+i:u,v=h.current+o,w=Math.min(Math.max(v,a),M),j=w!==v;x(!1),C(w),clearTimeout(W.current),W.current=setTimeout(()=>{x(!0);const ue=Math.sign(_.current),ie=Math.abs(_.current)>Fe,g=h.current;let k;r?(k=Math.round(g),ie&&(k=ue>0?Math.ceil(g):Math.floor(g)),j&&(g<=a&&(k=Math.ceil(a)),g>=M&&(k=Math.floor(M)))):j&&g>=M?k=M:j&&g<=a?k=a:ie?k=ue>0?f.find(J=>J>=g)??M:[...f].reverse().find(J=>J<=g)??a:k=f[Q(f,g)];const Le=Math.min(Math.max(k,a),M);C(Le),_.current=0},120)},[s,A,p,R,r,u,f]),Ee=t.useCallback(e=>{switch(e.key){case"ArrowRight":case"PageDown":e.preventDefault(),K();break;case"ArrowLeft":case"PageUp":e.preventDefault(),Y();break;case"Home":e.preventDefault(),B(0);break;case"End":e.preventDefault(),B(r?s-1:u);break}},[K,Y,B,s,r,u]),De=t.useCallback(e=>{var n;s&&((n=V.current)==null||n.setPointerCapture(e.pointerId),N.current=!0,x(!1),U.current=e.clientX,X.current=h.current,se.current=e.timeStamp,q.current=e.clientX,H.current=e.timeStamp,r&&Z(Math.floor(h.current)))},[s,r]),ye=t.useCallback(e=>{if(!N.current)return;const n=A();if(!n)return;const c=e.clientX-U.current;if(Number.isNaN(c))return;q.current=e.clientX,H.current=e.timeStamp;const o=c/n,i=X.current-o,a=p*.9,M=Math.floor(X.current),v=r?M-a:0,w=r?M+a:u;C(Math.min(Math.max(i,v),w))},[A,p,r,u]),Ae=t.useCallback(()=>{if(!N.current)return;N.current=!1,x(!0);const e=A(),n=h.current,c=X.current,o=r?Math.round(c):c;let i=r?Math.round(n):f[Q(f,n)];const a=H.current-se.current,M=a>0&&e?-(q.current-U.current)/e/a:0;Math.abs(M)>.0015&&i===o&&(r?i=o+Math.sign(M):M>0?i=f.find(w=>w>c)??u:i=[...f].reverse().find(w=>w<c)??0),C(P(i))},[A,P,r,f,u]);return t.useEffect(()=>{const e=V.current;if(!e)return;const n=a=>{de(a),me(parseFloat(getComputedStyle(document.documentElement).fontSize)||16)},c=getComputedStyle(e),o=(parseFloat(c.paddingLeft)||0)+(parseFloat(c.paddingRight)||0);n(e.clientWidth-o);const i=new ResizeObserver(([a])=>{a&&n(a.contentRect.width)});return i.observe(e),()=>i.disconnect()},[]),t.useEffect(()=>()=>{ce.current=!1,clearTimeout(W.current)},[]),{viewportRef:V,trackRef:re,setSlideRef:we,setConfig:$,setSlidesCount:fe,slidesCount:s,positions:f,activePositionIndex:pe,canPrev:be,canNext:Re,renderedIndices:ge,renderedActiveIndex:O,slideFlex:Ce,trackStyle:ke,contentClassName:xe,isSlideVisible:Se,announcement:he,regionLabel:(S==null?void 0:S.trim())||b("carousel"),slideLabel:e=>b("carousel.slide",e,s),next:K,prev:Y,goToIndex:B,onTransitionEnd:Ie,onScroll:Te,onWheel:Pe,onKeyDown:Ee,onPointerDown:De,onPointerMove:ye,onPointerUp:Ae}};exports.useCarousel=Xe;

package/src/tedi/components/content/carousel/use-carousel.d.ts

@@ -23,7 +23,8 @@ export interface CarouselApi {
     setConfig: (config: CarouselConfig) => void;
     setSlidesCount: (count: number) => void;
     slidesCount: number;
-    slideIndex: number;
+    positions: number[];
+    activePositionIndex: number;
     canPrev: boolean;
     canNext: boolean;
     renderedIndices: number[];

package/src/tedi/components/content/carousel/use-carousel.es.js

@@ -1,230 +1,244 @@
-import { useState as S, useRef as u, useEffect as K, useMemo as I, useCallback as c } from "react";
-import Xt from "../../../helpers/hooks/use-breakpoint.es.js";
-import { resolveBreakpointValue as at } from "./carousel-utils.es.js";
-import { useLabels as Lt } from "../../../providers/label-provider/use-labels.es.js";
-const Nt = {
+import { useState as k, useRef as p, useEffect as K, useMemo as b, useCallback as f, useLayoutEffect as Vt } from "react";
+import Wt from "../../../helpers/hooks/use-breakpoint.es.js";
+import { resolveBreakpointValue as ht } from "./carousel-utils.es.js";
+import { useLabels as vt } from "../../../providers/label-provider/use-labels.es.js";
+const Ot = {
   slidesPerView: { xs: 1 },
   gap: { xs: 1 },
   fade: !1,
   transitionMs: 400,
   loop: !0,
   centered: !1
-}, L = (F, x) => (F % x + x) % x, vt = (F) => {
-  const { getLabel: x } = Lt(), N = Xt(), [l, it] = S(Nt), [e, ut] = S(0), [d, g] = S(0), [p, Q] = S(0), [Z, w] = S(!1), [C, lt] = S(0), [tt, ft] = S(16), [dt, mt] = S(""), W = u(null), et = u(null), rt = u([]), y = u(!1), V = u(!1), O = u(!1), Y = u(0), A = u(0), nt = u(0), U = u(0), j = u(0), H = u(), z = u(0), ot = u(!0), m = u(d), st = u(p);
+}, zt = 0.3, $t = 1e-6, v = (T, x) => (T % x + x) % x, rt = (T, x) => T.reduce(
+  (D, d, U) => Math.abs(d - x) < Math.abs(T[D] - x) ? U : D,
+  0
+), Ut = (T) => {
+  const { getLabel: x } = vt(), D = Wt(), [d, U] = k(Ot), [n, pt] = k(0), [m, R] = k(0), [w, nt] = k(0), [st, C] = k(!1), [N, Mt] = k(0), [ot, gt] = k(16), [xt, wt] = k(""), O = p(null), ct = p(null), at = p([]), F = p(!1), X = p(!1), Y = p(!1), j = p(0), z = p(0), it = p(0), q = p(0), J = p(0), $ = p(), V = p(0), ut = p(!0), h = p(m), lt = p(w);
   K(() => {
-    m.current = d;
-  }, [d]), K(() => {
-    st.current = p;
-  }, [p]);
-  const a = I(
-    () => at(l.slidesPerView, N),
-    [l.slidesPerView, N]
-  ), b = I(() => at(l.gap, N), [l.gap, N]), T = I(() => b * tt, [b, tt]), n = l.loop, M = I(
-    () => Math.max(0, e - Math.ceil(a)),
+    h.current = m;
+  }, [m]), K(() => {
+    lt.current = w;
+  }, [w]);
+  const u = b(
+    () => ht(d.slidesPerView, D),
+    [d.slidesPerView, D]
+  ), A = b(() => ht(d.gap, D), [d.gap, D]), y = b(() => A * ot, [A, ot]), e = d.loop, a = b(() => {
+    const t = Math.max(0, n - u), r = Math.round(t);
+    return Math.abs(t - r) < $t ? r : t;
+  }, [n, u]), l = b(() => {
+    if (!n) return [];
+    if (e) return Array.from({ length: n }, (s, o) => o);
+    const t = Math.floor(a), r = Array.from({ length: t + 1 }, (s, o) => o);
+    return a > t && r.push(a), r;
+  }, [n, e, a]), E = f(
+    (t) => e ? t : Math.min(Math.max(t, 0), a),
     [e, a]
-  ), R = c(
-    (t) => n ? t : Math.min(Math.max(t, 0), M),
-    [n, M]
-  ), h = n ? e : 0, ht = I(() => e === 0 ? 0 : n ? L(Math.floor(d), e) : Math.min(Math.max(Math.round(d), 0), e - 1), [d, e, n]), E = n ? d - p + h : d, pt = n || d > 1e-3, Mt = n || d < M - 1e-3, xt = I(() => {
-    if (!e) return [];
-    if (!n) return Array.from({ length: e }, (o, s) => s);
-    const t = 2 * h + Math.ceil(a), r = p - h;
-    return Array.from({ length: t }, (o, s) => L(r + s, e));
-  }, [e, h, a, p, n]), gt = I(
-    () => `0 0 calc((100% - ${(a - 1) * b}rem) / ${a})`,
-    [a, b]
-  ), wt = I(() => {
-    if (!C)
-      return { gap: `${b}rem`, transform: "translate3d(0,0,0)", transition: "none" };
-    const t = T * (a - 1), r = (C - t) / a, o = n ? d - p + h : d, s = l.centered ? (C - r) / 2 : 0, i = -o * (r + T) + s;
+  ), g = e ? n : 0, It = b(() => l.length ? e ? v(Math.floor(m), n) : rt(l, m) : 0, [l, m, n, e]), B = e ? m - w + g : Math.ceil(m), Rt = n > 0 && (e || m > 0), St = n > 0 && (e || m < a);
+  Vt(() => {
+    e || (clearTimeout($.current), V.current = 0, h.current = E(h.current), R((t) => E(t)));
+  }, [e, a, E]);
+  const bt = b(() => {
+    if (!n) return [];
+    if (!e) return Array.from({ length: n }, (s, o) => o);
+    const t = 2 * g + Math.ceil(u), r = w - g;
+    return Array.from({ length: t }, (s, o) => v(r + o, n));
+  }, [n, g, u, w, e]), Tt = b(
+    () => `0 0 calc((100% - ${(u - 1) * A}rem) / ${u})`,
+    [u, A]
+  ), Ct = b(() => {
+    if (!N)
+      return { gap: `${A}rem`, transform: "translate3d(0,0,0)", transition: "none" };
+    const t = y * (u - 1), r = (N - t) / u, s = e ? m - w + g : m, o = d.centered ? (N - r) / 2 : 0, i = -s * (r + y) + o;
     return {
-      gap: `${b}rem`,
+      gap: `${A}rem`,
       transform: `translate3d(${i}px, 0, 0)`,
-      transition: Z ? `transform ${l.transitionMs}ms ease` : "none"
+      transition: st ? `transform ${d.transitionMs}ms ease` : "none"
     };
   }, [
-    C,
-    b,
-    T,
-    a,
-    d,
-    p,
-    h,
-    Z,
-    l.transitionMs,
-    l.centered,
-    n
-  ]), Rt = c(
+    N,
+    A,
+    y,
+    u,
+    m,
+    w,
+    g,
+    st,
+    d.transitionMs,
+    d.centered,
+    e
+  ]), Pt = f(
     (t) => {
-      const r = Math.ceil(a);
-      return t >= E && t < E + r;
+      if (!e) return t + 1 > m && t < m + u;
+      const r = Math.ceil(u);
+      return t >= B && t < B + r;
     },
-    [a, E]
-  ), St = c(
-    (t, r, o) => {
-      const s = [t];
-      if (l.fade) {
-        const i = l.fade === "both" || l.fade !== "right" && a <= 1;
-        s.push(i ? o : r);
+    [u, B, e, m]
+  ), kt = f(
+    (t, r, s) => {
+      const o = [t];
+      if (d.fade) {
+        const i = d.fade === "both" || d.fade !== "right" && u <= 1;
+        o.push(i ? s : r);
       }
-      return s.join(" ");
+      return o.join(" ");
     },
-    [l.fade, a]
-  ), It = c((t, r) => {
-    rt.current[t] = r;
-  }, []), P = c(() => {
+    [d.fade, u]
+  ), Dt = f((t, r) => {
+    at.current[t] = r;
+  }, []), L = f(() => {
     setTimeout(() => {
-      if (!ot.current || !e) return;
-      const t = n ? L(Math.floor(m.current), e) : Math.min(Math.max(Math.round(m.current), 0), e - 1);
-      mt(x("carousel.slide", t + 1, e));
+      if (!ut.current || !n) return;
+      const t = e ? v(Math.floor(h.current), n) : Math.min(Math.max(Math.ceil(h.current), 0), n - 1);
+      wt(x("carousel.slide", t + 1, n));
     }, 100);
-  }, [x, e, n]), $ = c(() => {
-    y.current = !0, setTimeout(() => {
-      y.current = !1;
-    }, l.transitionMs);
-  }, [l.transitionMs]), ct = c(() => {
+  }, [x, n, e]), G = f(() => {
+    F.current = !0, setTimeout(() => {
+      F.current = !1;
+    }, d.transitionMs);
+  }, [d.transitionMs]), ft = f(() => {
     setTimeout(() => {
       var r;
-      const t = m.current - st.current + h;
-      (r = rt.current[t]) == null || r.focus({ preventScroll: !0 });
+      const t = e ? h.current - lt.current + g : Math.ceil(h.current);
+      (r = at.current[t]) == null || r.focus({ preventScroll: !0 });
     });
-  }, [h]), q = c(() => {
-    !e || y.current || !n && m.current >= M - 1e-3 || (w(!0), g((t) => R(t + 1)), $(), P());
-  }, [e, n, M, R, $, P]), J = c(() => {
-    !e || y.current || !n && m.current <= 1e-3 || (w(!0), g((t) => R(t - 1)), $(), P());
-  }, [e, n, R, $, P]), v = c(
+  }, [g, e]), Q = f(() => {
+    !n || F.current || !e && h.current >= a || (C(!0), R((t) => e ? t + 1 : l.find((r) => r > t) ?? a), G(), L());
+  }, [n, e, a, l, G, L]), Z = f(() => {
+    !n || F.current || !e && h.current <= 0 || (C(!0), R((t) => e ? t - 1 : [...l].reverse().find((r) => r < t) ?? 0), G(), L());
+  }, [n, e, l, G, L]), H = f(
     (t, r) => {
-      if (!(!e || y.current)) {
-        if (w(!0), n) {
-          const o = L(Math.floor(m.current), e), i = L(t, e) - o;
-          g((f) => f + i);
+      if (!(!n || F.current)) {
+        if (C(!0), e) {
+          const s = v(Math.floor(h.current), n), i = v(t, n) - s;
+          R((c) => c + i);
         } else
-          g(R(t));
-        r != null && r.focusSlide ? O.current = !0 : P();
+          R(E(t));
+        r != null && r.focusSlide ? Y.current = !0 : L();
       }
     },
-    [e, n, R, P]
-  ), bt = c(
+    [n, e, E, L]
+  ), At = f(
     (t) => {
-      t.target !== et.current || t.propertyName !== "transform" || V.current || (w(!1), Q(Math.floor(m.current)), O.current && (O.current = !1, ct()));
+      t.target !== ct.current || t.propertyName !== "transform" || X.current || (C(!1), nt(Math.floor(h.current)), Y.current && (Y.current = !1, ft()));
     },
-    [ct]
-  ), kt = c(() => {
-    const t = W.current;
+    [ft]
+  ), Et = f(() => {
+    const t = O.current;
     t && (t.scrollLeft = 0, t.scrollTop = 0);
-  }, []), D = c(() => (C - T * (a - 1)) / a + T, [C, T, a]), Ct = c(
+  }, []), _ = f(() => (N - y * (u - 1)) / u + y, [N, y, u]), Nt = f(
     (t) => {
-      if (!e) return;
+      if (!n) return;
       const r = Math.abs(t.deltaX) > Math.abs(t.deltaY) ? t.deltaX : t.shiftKey ? t.deltaY : 0;
       if (!r) return;
-      const o = D();
-      if (!o) return;
-      const s = r / o;
-      z.current += s;
-      const i = h * 0.9, f = n ? p - i : 0, k = n ? p + i : M, B = m.current + s, _ = Math.min(Math.max(B, f), k), yt = _ !== B;
-      w(!1), g(_), clearTimeout(H.current), H.current = setTimeout(() => {
-        w(!0);
-        const Vt = Math.sign(z.current), X = m.current;
-        let G = Math.round(X);
-        Math.abs(z.current) > 0.3 && (G = Vt > 0 ? Math.ceil(X) : Math.floor(X)), yt && (X <= f && (G = Math.ceil(f)), X >= k && (G = Math.floor(k)));
-        const At = Math.min(Math.max(G, f), k);
-        g(At), z.current = 0;
+      const s = _();
+      if (!s) return;
+      const o = r / s;
+      V.current += o;
+      const i = g * 0.9, c = e ? w - i : 0, M = e ? w + i : a, W = h.current + o, P = Math.min(Math.max(W, c), M), tt = P !== W;
+      C(!1), R(P), clearTimeout($.current), $.current = setTimeout(() => {
+        C(!0);
+        const dt = Math.sign(V.current), mt = Math.abs(V.current) > zt, I = h.current;
+        let S;
+        e ? (S = Math.round(I), mt && (S = dt > 0 ? Math.ceil(I) : Math.floor(I)), tt && (I <= c && (S = Math.ceil(c)), I >= M && (S = Math.floor(M)))) : tt && I >= M ? S = M : tt && I <= c ? S = c : mt ? S = dt > 0 ? l.find((et) => et >= I) ?? M : [...l].reverse().find((et) => et <= I) ?? c : S = l[rt(l, I)];
+        const Xt = Math.min(Math.max(S, c), M);
+        R(Xt), V.current = 0;
       }, 120);
     },
-    [e, D, h, p, n, M]
-  ), Tt = c(
+    [n, _, g, w, e, a, l]
+  ), yt = f(
     (t) => {
       switch (t.key) {
         case "ArrowRight":
         case "PageDown":
-          t.preventDefault(), q();
+          t.preventDefault(), Q();
           break;
         case "ArrowLeft":
         case "PageUp":
-          t.preventDefault(), J();
+          t.preventDefault(), Z();
           break;
         case "Home":
-          t.preventDefault(), v(0);
+          t.preventDefault(), H(0);
           break;
         case "End":
-          t.preventDefault(), v(e - 1);
+          t.preventDefault(), H(e ? n - 1 : a);
           break;
       }
     },
-    [q, J, v, e]
-  ), Pt = c(
+    [Q, Z, H, n, e, a]
+  ), Lt = f(
     (t) => {
       var r;
-      e && ((r = W.current) == null || r.setPointerCapture(t.pointerId), V.current = !0, w(!1), Y.current = t.clientX, A.current = m.current, nt.current = t.timeStamp, U.current = t.clientX, j.current = t.timeStamp, n && Q(Math.floor(m.current)));
+      n && ((r = O.current) == null || r.setPointerCapture(t.pointerId), X.current = !0, C(!1), j.current = t.clientX, z.current = h.current, it.current = t.timeStamp, q.current = t.clientX, J.current = t.timeStamp, e && nt(Math.floor(h.current)));
     },
-    [e, n]
-  ), Dt = c(
+    [n, e]
+  ), _t = f(
     (t) => {
-      if (!V.current) return;
-      const r = D();
+      if (!X.current) return;
+      const r = _();
       if (!r) return;
-      const o = t.clientX - Y.current;
-      if (Number.isNaN(o)) return;
-      U.current = t.clientX, j.current = t.timeStamp;
-      const s = o / r, i = A.current - s, f = h * 0.9, k = Math.floor(A.current), B = n ? k - f : 0, _ = n ? k + f : M;
-      g(Math.min(Math.max(i, B), _));
+      const s = t.clientX - j.current;
+      if (Number.isNaN(s)) return;
+      q.current = t.clientX, J.current = t.timeStamp;
+      const o = s / r, i = z.current - o, c = g * 0.9, M = Math.floor(z.current), W = e ? M - c : 0, P = e ? M + c : a;
+      R(Math.min(Math.max(i, W), P));
     },
-    [D, h, n, M]
-  ), Ft = c(() => {
-    if (!V.current) return;
-    V.current = !1, w(!0);
-    const t = D(), r = Math.round(m.current);
-    let o = r;
-    const s = j.current - nt.current, i = s > 0 && t ? -(U.current - Y.current) / t / s : 0;
-    Math.abs(i) > 15e-4 && r === Math.round(A.current) && (o = Math.round(A.current) + (i > 0 ? 1 : -1)), g(R(o));
-  }, [D, R]);
+    [_, g, e, a]
+  ), Ft = f(() => {
+    if (!X.current) return;
+    X.current = !1, C(!0);
+    const t = _(), r = h.current, s = z.current, o = e ? Math.round(s) : s;
+    let i = e ? Math.round(r) : l[rt(l, r)];
+    const c = J.current - it.current, M = c > 0 && t ? -(q.current - j.current) / t / c : 0;
+    Math.abs(M) > 15e-4 && i === o && (e ? i = o + Math.sign(M) : M > 0 ? i = l.find((P) => P > s) ?? a : i = [...l].reverse().find((P) => P < s) ?? 0), R(E(i));
+  }, [_, E, e, l, a]);
   return K(() => {
-    const t = W.current;
+    const t = O.current;
     if (!t) return;
-    const r = (f) => {
-      lt(f), ft(parseFloat(getComputedStyle(document.documentElement).fontSize) || 16);
-    }, o = getComputedStyle(t), s = (parseFloat(o.paddingLeft) || 0) + (parseFloat(o.paddingRight) || 0);
-    r(t.clientWidth - s);
-    const i = new ResizeObserver(([f]) => {
-      f && r(f.contentRect.width);
+    const r = (c) => {
+      Mt(c), gt(parseFloat(getComputedStyle(document.documentElement).fontSize) || 16);
+    }, s = getComputedStyle(t), o = (parseFloat(s.paddingLeft) || 0) + (parseFloat(s.paddingRight) || 0);
+    r(t.clientWidth - o);
+    const i = new ResizeObserver(([c]) => {
+      c && r(c.contentRect.width);
     });
     return i.observe(t), () => i.disconnect();
   }, []), K(
     () => () => {
-      ot.current = !1, clearTimeout(H.current);
+      ut.current = !1, clearTimeout($.current);
     },
     []
   ), {
-    viewportRef: W,
-    trackRef: et,
-    setSlideRef: It,
-    setConfig: it,
-    setSlidesCount: ut,
-    slidesCount: e,
-    slideIndex: ht,
-    canPrev: pt,
-    canNext: Mt,
-    renderedIndices: xt,
-    renderedActiveIndex: E,
-    slideFlex: gt,
-    trackStyle: wt,
-    contentClassName: St,
-    isSlideVisible: Rt,
-    announcement: dt,
-    regionLabel: (F == null ? void 0 : F.trim()) || x("carousel"),
-    slideLabel: (t) => x("carousel.slide", t, e),
-    next: q,
-    prev: J,
-    goToIndex: v,
-    onTransitionEnd: bt,
-    onScroll: kt,
-    onWheel: Ct,
-    onKeyDown: Tt,
-    onPointerDown: Pt,
-    onPointerMove: Dt,
+    viewportRef: O,
+    trackRef: ct,
+    setSlideRef: Dt,
+    setConfig: U,
+    setSlidesCount: pt,
+    slidesCount: n,
+    positions: l,
+    activePositionIndex: It,
+    canPrev: Rt,
+    canNext: St,
+    renderedIndices: bt,
+    renderedActiveIndex: B,
+    slideFlex: Tt,
+    trackStyle: Ct,
+    contentClassName: kt,
+    isSlideVisible: Pt,
+    announcement: xt,
+    regionLabel: (T == null ? void 0 : T.trim()) || x("carousel"),
+    slideLabel: (t) => x("carousel.slide", t, n),
+    next: Q,
+    prev: Z,
+    goToIndex: H,
+    onTransitionEnd: At,
+    onScroll: Et,
+    onWheel: Nt,
+    onKeyDown: yt,
+    onPointerDown: Lt,
+    onPointerMove: _t,
     onPointerUp: Ft
   };
 };
 export {
-  vt as useCarousel
+  Ut as useCarousel
 };