react-tabs-scrollable - npm Package Compare versions

Comparing version 2.0.3-alpha to 2.0.4-alpha

dist/react-tabs-scrollable.es.js

@@ -460,16 +460,13 @@ import React from "react";
   React.useEffect(() => {
-    if (typeof window === "undefined" || typeof ResizeObserver !== "function" || !_tabsContainerRef.current) {
-      return;
-    }
     const handleResize = debounce(() => {
+      getTabsRects();
+      updateNavBtnsState(_tabsContainerRef.current);
       scrollSelectedIntoView();
-      updateNavBtnsState();
     });
-    const tabObserver = new ResizeObserver(handleResize);
-    tabObserver.observe(_tabsContainerRef.current);
-    return () => {
-      if (_tabsContainerRef.current) {
-        tabObserver.unobserve(_tabsContainerRef.current);
-      }
-    };
+    if (typeof window !== "undefined" && _tabsContainerRef.current) {
+      const resizeObserver = new ResizeObserver((entries) => {
+        handleResize();
+      });
+      resizeObserver.observe(_tabsContainerRef.current);
+    }
   }, [isRTL]);
@@ -476,0 +473,0 @@ React.useEffect(() => {

dist/react-tabs-scrollable.umd.js

@@ -1,6 +0,6 @@
-(function(_,j){typeof exports=="object"&&typeof module!="undefined"?j(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],j):(_=typeof globalThis!="undefined"?globalThis:_||self,j(_.MyLib={},_.React))})(this,function(_,j){"use strict";function se(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var f=se(j),He="";function ae(e){return(1+Math.sin(Math.PI*e-Math.PI/2))/2}function ce(e,r,t,o={},l=()=>{}){const{ease:c=ae,duration:d=300}=o;let h=null;const w=r[e];let T=!1;const R=()=>{T=!0},E=B=>{if(T){l(new Error("Animation cancelled"));return}h===null&&(h=B);const k=Math.min(1,(B-h)/d);if(r[e]=c(k)*(t-w)+w,k>=1){requestAnimationFrame(()=>{l(null)});return}requestAnimationFrame(E)};return w===t?(l(new Error("Element already at target position")),R):(requestAnimationFrame(E),R)}const K=(e,r=166)=>{let t;const o=(...l)=>{const c=()=>{e.apply(void 0,l)};clearTimeout(t),t=setTimeout(c,r)};return o.clear=()=>{clearTimeout(t)},o};var ie=!!(typeof window!="undefined"&&window.document&&window.document.createElement),C;function ue(){if(C)return C;if(!ie||!window.document.body)return"indeterminate";var e=window.document.createElement("div");return e.appendChild(document.createTextNode("ABCD")),e.dir="rtl",e.style.fontSize="14px",e.style.width="4px",e.style.height="1px",e.style.position="absolute",e.style.top="-1000px",e.style.overflow="scroll",document.body.appendChild(e),C="reverse",e.scrollLeft>0?C="default":(e.scrollLeft=2,e.scrollLeft<2&&(C="negative")),document.body.removeChild(e),C}function de(e,r){var t=e.scrollLeft;if(r!=="rtl")return t;var o=ue();if(o==="indeterminate")return Number.NaN;switch(o){case"negative":return e.scrollWidth-e.clientWidth+t;case"reverse":return e.scrollWidth-e.clientWidth-t}return t}function fe(e){return e&&e.ownerDocument||document}var D={exports:{}},L={};/*
+(function(_,j){typeof exports=="object"&&typeof module!="undefined"?j(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],j):(_=typeof globalThis!="undefined"?globalThis:_||self,j(_.MyLib={},_.React))})(this,function(_,j){"use strict";function se(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var f=se(j),He="";function ae(e){return(1+Math.sin(Math.PI*e-Math.PI/2))/2}function ie(e,r,t,n={},l=()=>{}){const{ease:i=ae,duration:d=300}=n;let h=null;const w=r[e];let T=!1;const E=()=>{T=!0},R=B=>{if(T){l(new Error("Animation cancelled"));return}h===null&&(h=B);const k=Math.min(1,(B-h)/d);if(r[e]=i(k)*(t-w)+w,k>=1){requestAnimationFrame(()=>{l(null)});return}requestAnimationFrame(R)};return w===t?(l(new Error("Element already at target position")),E):(requestAnimationFrame(R),E)}const K=(e,r=166)=>{let t;const n=(...l)=>{const i=()=>{e.apply(void 0,l)};clearTimeout(t),t=setTimeout(i,r)};return n.clear=()=>{clearTimeout(t)},n};var ce=!!(typeof window!="undefined"&&window.document&&window.document.createElement),C;function ue(){if(C)return C;if(!ce||!window.document.body)return"indeterminate";var e=window.document.createElement("div");return e.appendChild(document.createTextNode("ABCD")),e.dir="rtl",e.style.fontSize="14px",e.style.width="4px",e.style.height="1px",e.style.position="absolute",e.style.top="-1000px",e.style.overflow="scroll",document.body.appendChild(e),C="reverse",e.scrollLeft>0?C="default":(e.scrollLeft=2,e.scrollLeft<2&&(C="negative")),document.body.removeChild(e),C}function de(e,r){var t=e.scrollLeft;if(r!=="rtl")return t;var n=ue();if(n==="indeterminate")return Number.NaN;switch(n){case"negative":return e.scrollWidth-e.clientWidth+t;case"reverse":return e.scrollWidth-e.clientWidth-t}return t}function fe(e){return e&&e.ownerDocument||document}var I={exports:{}},L={};/*
 object-assign
 (c) Sindre Sorhus
 @license MIT
-*/var H=Object.getOwnPropertySymbols,he=Object.prototype.hasOwnProperty,me=Object.prototype.propertyIsEnumerable;function be(e){if(e==null)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}function pe(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de",Object.getOwnPropertyNames(e)[0]==="5")return!1;for(var r={},t=0;t<10;t++)r["_"+String.fromCharCode(t)]=t;var o=Object.getOwnPropertyNames(r).map(function(c){return r[c]});if(o.join("")!=="0123456789")return!1;var l={};return"abcdefghijklmnopqrst".split("").forEach(function(c){l[c]=c}),Object.keys(Object.assign({},l)).join("")==="abcdefghijklmnopqrst"}catch{return!1}}pe();/** @license React v17.0.2
+*/var H=Object.getOwnPropertySymbols,he=Object.prototype.hasOwnProperty,me=Object.prototype.propertyIsEnumerable;function be(e){if(e==null)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}function pe(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de",Object.getOwnPropertyNames(e)[0]==="5")return!1;for(var r={},t=0;t<10;t++)r["_"+String.fromCharCode(t)]=t;var n=Object.getOwnPropertyNames(r).map(function(i){return r[i]});if(n.join("")!=="0123456789")return!1;var l={};return"abcdefghijklmnopqrst".split("").forEach(function(i){l[i]=i}),Object.keys(Object.assign({},l)).join("")==="abcdefghijklmnopqrst"}catch{return!1}}pe();/** @license React v17.0.2
  * react-jsx-runtime.production.min.js
@@ -12,3 +12,3 @@ *
  * LICENSE file in the root directory of this source tree.
- */var ve=f.default,Y=60103;if(L.Fragment=60107,typeof Symbol=="function"&&Symbol.for){var J=Symbol.for;Y=J("react.element"),L.Fragment=J("react.fragment")}var _e=ve.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,we=Object.prototype.hasOwnProperty,ge={key:!0,ref:!0,__self:!0,__source:!0};function G(e,r,t){var o,l={},c=null,d=null;t!==void 0&&(c=""+t),r.key!==void 0&&(c=""+r.key),r.ref!==void 0&&(d=r.ref);for(o in r)we.call(r,o)&&!ge.hasOwnProperty(o)&&(l[o]=r[o]);if(e&&e.defaultProps)for(o in r=e.defaultProps,r)l[o]===void 0&&(l[o]=r[o]);return{$$typeof:Y,type:e,key:c,ref:d,props:l,_owner:_e.current}}L.jsx=G,L.jsxs=G,D.exports=L;const m=D.exports.jsx,M=D.exports.jsxs,ye=D.exports.Fragment,Q=f.default.forwardRef(({hideNavBtnsOnMobile:e,disabled:r,onClick:t=()=>null,children:o,navBtnStyle:l,className:c="",navBtnContainerClassName:d,navBtnAs:h="button"},w)=>{const T=`rts___nav___btn___container ${e?"display___md___none":""} ${d}`.trim();return m("div",{className:T,children:m(h,{...h==="button"?{disabled:r,type:"button"}:{},className:`rts___btn rts___nav___btn ${c}`,onClick:t,style:l,dir:"ltr","aria-hidden":"true",ref:w,children:o})})}),Se=()=>M("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"feather feather-arrow-left rts___svg___icon",children:[m("line",{x1:"19",y1:"12",x2:"5",y2:"12"}),m("polyline",{points:"12 19 5 12 12 5"})]}),Ne=()=>M("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"feather feather-arrow-right rts___svg___icon",children:[m("line",{x1:"5",y1:"12",x2:"19",y2:"12"}),m("polyline",{points:"12 5 19 12 12 19"})]}),X=(e,r)=>e===r?e.firstChild:r&&r.nextElementSibling?r.nextElementSibling:e.firstChild,Z=(e,r)=>e===r?e.lastChild:r&&r.previousElementSibling?r.previousElementSibling:e.lastChild,I=(e,r,t)=>{let o=!1,l=t(e,r);for(;l;){if(l===e.firstChild){if(o)return;o=!0}const c=l.disabled||l.getAttribute("aria-disabled")==="true";if(!l.hasAttribute("tabindex")||c)l=t(e,l);else{l.focus();return}}},g="left",O="right",S="scrollLeft",Ce=e=>{const{children:r,activeTab:t,animationDuration:o=300,navBtnCLickAnimationDuration:l=300,selectedAnimationDuration:c=300,isRTL:d=!1,didReachEnd:h=()=>null,didReachStart:w=()=>null,onTabClick:T=()=>null,hideNavBtnsOnMobile:R=!0,hideNavBtns:E=!1,tabsScrollAmount:B=3,tabsContainerRef:k=null,tabRef:ee=null,mode:W="",tabsContainerStyle:xe={},navBtnStyle:je={},tabsUpperContainerStyle:Le={},leftNavBtnClassName:Re="",rightNavBtnClassName:Ee="",navBtnClassName:te="",navBtnContainerClassName:Be="",tabsUpperContainerClassName:ke="",tabsContainerClassName:We="",leftNavBtnRef:De=null,rightNavBtnRef:Ie=null,showTabsScroll:Pe=!1,navBtnAs:Ae="button",action:$e,rightBtnIcon:Fe=m(Ne,{}),leftBtnIcon:Me=m(Se,{}),getTabsBoundingClientRects:Ve=()=>null}=e,P=f.default.useRef([]),b=f.default.useRef(null),[A,qe]=f.default.useState({start:!1,end:!1}),$=(s=t)=>{var p;const n=b==null?void 0:b.current,u=(p=P.current)==null?void 0:p[s];let a,i;if(!t&&t!==0){console.error("react-tabs-scrollable : You have to add activeTab prop");return}if(n){const v=n.getBoundingClientRect();a={top:v.top,right:v.right,bottom:v.bottom,left:v.left,width:v.width,height:v.height,x:v.x,y:v.y,scrollLeft:n.scrollLeft,clientWidth:n==null?void 0:n.clientWidth,scrollWidth:n==null?void 0:n.scrollWidth},i=u==null?void 0:u.getBoundingClientRect()}return Ve({tabsContainerRects:a,tabRects:i}),{tabsContainerRects:a,tabRects:i}},re=(s=t,n=!0,u)=>{if(!b.current)return;const{tabsContainerRects:a,tabRects:i}=$(s),p=a.clientWidth/2-(i==null?void 0:i.width)/2;if(!a||!i)return;const v=W==="scrollSelectedToCenter"||W==="scrollSelectedToCenterFromView"?a.clientWidth/2-(i==null?void 0:i.width)/2:0,Ke=W==="scrollSelectedToEnd"?a.clientWidth-(i==null?void 0:i.width):0,F=v||Ke;if(i[g]<a[g]){const N=a[S]+(i[g]-a[g])-F;y(N,o||c,n)}else if(i[O]>a[O]){const N=a[S]+(i[O]-a[O])+F;y(N,c||o,n)}if(p>i[g]&&u&&W==="scrollSelectedToCenterFromView"){u=!1;const N=a[S]+(i[g]-a[g])-F;y(N,o||c,n)}else if(p<i[g]&&u&&W==="scrollSelectedToCenterFromView"){u=!1;const N=a[S]+(i[O]-a[O])+F;y(N,c||o,n)}},y=(s,n=300,u=!0)=>{u?ce(S,b.current,s,{duration:n}):b.current.scrollLeft=s},V=(s=b)=>{if(!s.current)return;const n=d?de(s.current,d?"rtl":"ltr"):s.current.scrollLeft,u=s.current.scrollWidth,a=s.current.clientWidth,i=Math.floor(n)>1,p=Math.ceil(n)<u-a-1;qe({start:d?p:i,end:d?i:p}),w(!i),h(!p)};f.default.useEffect(()=>{if(typeof window=="undefined"||typeof ResizeObserver!="function"||!b.current)return;const s=K(()=>{re(),V()}),n=new ResizeObserver(s);return n.observe(b.current),()=>{b.current&&n.unobserve(b.current)}},[d]),f.default.useEffect(()=>{re(t,!0,!0)},[t]);const ze=f.default.useCallback((s,n)=>{T(s,n)},[]),q=f.default.useMemo(()=>K(()=>{V(b)}),[V]);f.default.useEffect(()=>()=>{q.clear()},[q]);const z=(s,n=B)=>{var a;const{tabsContainerRects:u}=$();y(u[S]+((a=P.current[t])==null?void 0:a.clientWidth)*n,o||l)},U=(s,n=B)=>{var a;const{tabsContainerRects:u}=$();y(u[S]-((a=P.current[t])==null?void 0:a.clientWidth)*n,o||l)},Ue=s=>{const n=b.current,u=fe(n).activeElement;if((u==null?void 0:u.getAttribute("role"))!=="tab")return;let i="ArrowLeft",p="ArrowRight";switch(d&&(i="ArrowRight",p="ArrowLeft"),s.key){case i:s.preventDefault(),I(n,u,Z);break;case p:s.preventDefault(),I(n,u,X);break;case"Home":s.preventDefault(),I(n,null,X);break;case"End":s.preventDefault(),I(n,null,Z);break}},ne=()=>{y(0)},oe=()=>{const{tabsContainerRects:s}=$(),{scrollWidth:n}=s;y((d?-1:1)*n)};f.default.useImperativeHandle($e,()=>({onLeftNavBtnClick:U,onRightNavBtnClick:z,goToStart:ne,goToEnd:oe}),[U,z,ne,oe]);const le={["aria-hidden"]:"true",hideNavBtnsOnMobile:R,navBtnStyle:je,navBtnContainerClassName:Be,navBtnAs:Ae},x=(()=>{if(E)return null;let s={};return!A.start&&!A.end?s={end:null,start:null}:(s[d?"end":"start"]=m(Q,{disabled:!A[d?"end":"start"],onClick:U,ref:De,className:`${Re} ${te}`.trim(),...le,children:Me}),s[d?"start":"end"]=m(Q,{disabled:!A[d?"start":"end"],onClick:z,ref:Ie,className:`${Ee} ${te}`.trim(),...le,children:Fe}),s)})();return M("div",{className:`rts___tabs___container ${ke}`.trim(),style:Le,children:[x==null?void 0:x.start,m("div",{ref:s=>{b.current=s,k&&(k.current=s)},role:"tablist","aria-label":"tabs",onKeyDown:Ue,onScroll:q,style:xe,className:`rts___tabs ${Pe?"":"hide___rts___tabs___scroll"} ${We}`.trim(),children:m(f.default.Fragment,{children:f.default.Children.map(r,(s,n)=>{if(!f.default.isValidElement(s))return null;const u=n===t;return f.default.cloneElement(s,{ref:a=>{P.current[n]=a,ee&&(ee.current[n]=a)},onClick:a=>{ze(a,n)},["data-index"]:n,role:"tab",["aria-selected"]:u?"true":"false",tabIndex:u?"0":"-1",selected:u,className:`rts___tab rts___btn ${s.props.className||""}`.trim()})})})}),x==null?void 0:x.end]})},Oe=f.default.forwardRef(({className:e="",selected:r,style:t,tabAs:o="button",...l},c)=>{const d=o,h={type:"button"},w=`${e} ${r?"rts___tab___selected":""}`.trim();return m(d,{...l,className:w,ref:c,style:{...t||{}},...o==="button"?h:{},children:l.children})}),Te=({activeTab:e,index:r,children:t,className:o="",as:l="div",style:c})=>m(ye,{children:e==r&&f.default.createElement(l,{className:o,style:c},t)});_.Tab=Oe,_.TabScreen=Te,_.Tabs=Ce,Object.defineProperties(_,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+ */var ve=f.default,Y=60103;if(L.Fragment=60107,typeof Symbol=="function"&&Symbol.for){var J=Symbol.for;Y=J("react.element"),L.Fragment=J("react.fragment")}var _e=ve.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,we=Object.prototype.hasOwnProperty,ge={key:!0,ref:!0,__self:!0,__source:!0};function G(e,r,t){var n,l={},i=null,d=null;t!==void 0&&(i=""+t),r.key!==void 0&&(i=""+r.key),r.ref!==void 0&&(d=r.ref);for(n in r)we.call(r,n)&&!ge.hasOwnProperty(n)&&(l[n]=r[n]);if(e&&e.defaultProps)for(n in r=e.defaultProps,r)l[n]===void 0&&(l[n]=r[n]);return{$$typeof:Y,type:e,key:i,ref:d,props:l,_owner:_e.current}}L.jsx=G,L.jsxs=G,I.exports=L;const m=I.exports.jsx,M=I.exports.jsxs,ye=I.exports.Fragment,Q=f.default.forwardRef(({hideNavBtnsOnMobile:e,disabled:r,onClick:t=()=>null,children:n,navBtnStyle:l,className:i="",navBtnContainerClassName:d,navBtnAs:h="button"},w)=>{const T=`rts___nav___btn___container ${e?"display___md___none":""} ${d}`.trim();return m("div",{className:T,children:m(h,{...h==="button"?{disabled:r,type:"button"}:{},className:`rts___btn rts___nav___btn ${i}`,onClick:t,style:l,dir:"ltr","aria-hidden":"true",ref:w,children:n})})}),Se=()=>M("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"feather feather-arrow-left rts___svg___icon",children:[m("line",{x1:"19",y1:"12",x2:"5",y2:"12"}),m("polyline",{points:"12 19 5 12 12 5"})]}),Ne=()=>M("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"feather feather-arrow-right rts___svg___icon",children:[m("line",{x1:"5",y1:"12",x2:"19",y2:"12"}),m("polyline",{points:"12 5 19 12 12 19"})]}),X=(e,r)=>e===r?e.firstChild:r&&r.nextElementSibling?r.nextElementSibling:e.firstChild,Z=(e,r)=>e===r?e.lastChild:r&&r.previousElementSibling?r.previousElementSibling:e.lastChild,P=(e,r,t)=>{let n=!1,l=t(e,r);for(;l;){if(l===e.firstChild){if(n)return;n=!0}const i=l.disabled||l.getAttribute("aria-disabled")==="true";if(!l.hasAttribute("tabindex")||i)l=t(e,l);else{l.focus();return}}},g="left",O="right",S="scrollLeft",Ce=e=>{const{children:r,activeTab:t,animationDuration:n=300,navBtnCLickAnimationDuration:l=300,selectedAnimationDuration:i=300,isRTL:d=!1,didReachEnd:h=()=>null,didReachStart:w=()=>null,onTabClick:T=()=>null,hideNavBtnsOnMobile:E=!0,hideNavBtns:R=!1,tabsScrollAmount:B=3,tabsContainerRef:k=null,tabRef:ee=null,mode:W="",tabsContainerStyle:xe={},navBtnStyle:je={},tabsUpperContainerStyle:Le={},leftNavBtnClassName:Ee="",rightNavBtnClassName:Re="",navBtnClassName:te="",navBtnContainerClassName:Be="",tabsUpperContainerClassName:ke="",tabsContainerClassName:We="",leftNavBtnRef:De=null,rightNavBtnRef:Ie=null,showTabsScroll:Pe=!1,navBtnAs:Ae="button",action:$e,rightBtnIcon:Fe=m(Ne,{}),leftBtnIcon:Me=m(Se,{}),getTabsBoundingClientRects:Ve=()=>null}=e,A=f.default.useRef([]),b=f.default.useRef(null),[$,qe]=f.default.useState({start:!1,end:!1}),D=(s=t)=>{var p;const o=b==null?void 0:b.current,u=(p=A.current)==null?void 0:p[s];let a,c;if(!t&&t!==0){console.error("react-tabs-scrollable : You have to add activeTab prop");return}if(o){const v=o.getBoundingClientRect();a={top:v.top,right:v.right,bottom:v.bottom,left:v.left,width:v.width,height:v.height,x:v.x,y:v.y,scrollLeft:o.scrollLeft,clientWidth:o==null?void 0:o.clientWidth,scrollWidth:o==null?void 0:o.scrollWidth},c=u==null?void 0:u.getBoundingClientRect()}return Ve({tabsContainerRects:a,tabRects:c}),{tabsContainerRects:a,tabRects:c}},re=(s=t,o=!0,u)=>{if(!b.current)return;const{tabsContainerRects:a,tabRects:c}=D(s),p=a.clientWidth/2-(c==null?void 0:c.width)/2;if(!a||!c)return;const v=W==="scrollSelectedToCenter"||W==="scrollSelectedToCenterFromView"?a.clientWidth/2-(c==null?void 0:c.width)/2:0,Ke=W==="scrollSelectedToEnd"?a.clientWidth-(c==null?void 0:c.width):0,F=v||Ke;if(c[g]<a[g]){const N=a[S]+(c[g]-a[g])-F;y(N,n||i,o)}else if(c[O]>a[O]){const N=a[S]+(c[O]-a[O])+F;y(N,i||n,o)}if(p>c[g]&&u&&W==="scrollSelectedToCenterFromView"){u=!1;const N=a[S]+(c[g]-a[g])-F;y(N,n||i,o)}else if(p<c[g]&&u&&W==="scrollSelectedToCenterFromView"){u=!1;const N=a[S]+(c[O]-a[O])+F;y(N,i||n,o)}},y=(s,o=300,u=!0)=>{u?ie(S,b.current,s,{duration:o}):b.current.scrollLeft=s},V=(s=b)=>{if(!s.current)return;const o=d?de(s.current,d?"rtl":"ltr"):s.current.scrollLeft,u=s.current.scrollWidth,a=s.current.clientWidth,c=Math.floor(o)>1,p=Math.ceil(o)<u-a-1;qe({start:d?p:c,end:d?c:p}),w(!c),h(!p)};f.default.useEffect(()=>{const s=K(()=>{D(),V(b.current),re()});typeof window!="undefined"&&b.current&&new ResizeObserver(u=>{s()}).observe(b.current)},[d]),f.default.useEffect(()=>{re(t,!0,!0)},[t]);const ze=f.default.useCallback((s,o)=>{T(s,o)},[]),q=f.default.useMemo(()=>K(()=>{V(b)}),[V]);f.default.useEffect(()=>()=>{q.clear()},[q]);const z=(s,o=B)=>{var a;const{tabsContainerRects:u}=D();y(u[S]+((a=A.current[t])==null?void 0:a.clientWidth)*o,n||l)},U=(s,o=B)=>{var a;const{tabsContainerRects:u}=D();y(u[S]-((a=A.current[t])==null?void 0:a.clientWidth)*o,n||l)},Ue=s=>{const o=b.current,u=fe(o).activeElement;if((u==null?void 0:u.getAttribute("role"))!=="tab")return;let c="ArrowLeft",p="ArrowRight";switch(d&&(c="ArrowRight",p="ArrowLeft"),s.key){case c:s.preventDefault(),P(o,u,Z);break;case p:s.preventDefault(),P(o,u,X);break;case"Home":s.preventDefault(),P(o,null,X);break;case"End":s.preventDefault(),P(o,null,Z);break}},ne=()=>{y(0)},oe=()=>{const{tabsContainerRects:s}=D(),{scrollWidth:o}=s;y((d?-1:1)*o)};f.default.useImperativeHandle($e,()=>({onLeftNavBtnClick:U,onRightNavBtnClick:z,goToStart:ne,goToEnd:oe}),[U,z,ne,oe]);const le={["aria-hidden"]:"true",hideNavBtnsOnMobile:E,navBtnStyle:je,navBtnContainerClassName:Be,navBtnAs:Ae},x=(()=>{if(R)return null;let s={};return!$.start&&!$.end?s={end:null,start:null}:(s[d?"end":"start"]=m(Q,{disabled:!$[d?"end":"start"],onClick:U,ref:De,className:`${Ee} ${te}`.trim(),...le,children:Me}),s[d?"start":"end"]=m(Q,{disabled:!$[d?"start":"end"],onClick:z,ref:Ie,className:`${Re} ${te}`.trim(),...le,children:Fe}),s)})();return M("div",{className:`rts___tabs___container ${ke}`.trim(),style:Le,children:[x==null?void 0:x.start,m("div",{ref:s=>{b.current=s,k&&(k.current=s)},role:"tablist","aria-label":"tabs",onKeyDown:Ue,onScroll:q,style:xe,className:`rts___tabs ${Pe?"":"hide___rts___tabs___scroll"} ${We}`.trim(),children:m(f.default.Fragment,{children:f.default.Children.map(r,(s,o)=>{if(!f.default.isValidElement(s))return null;const u=o===t;return f.default.cloneElement(s,{ref:a=>{A.current[o]=a,ee&&(ee.current[o]=a)},onClick:a=>{ze(a,o)},["data-index"]:o,role:"tab",["aria-selected"]:u?"true":"false",tabIndex:u?"0":"-1",selected:u,className:`rts___tab rts___btn ${s.props.className||""}`.trim()})})})}),x==null?void 0:x.end]})},Oe=f.default.forwardRef(({className:e="",selected:r,style:t,tabAs:n="button",...l},i)=>{const d=n,h={type:"button"},w=`${e} ${r?"rts___tab___selected":""}`.trim();return m(d,{...l,className:w,ref:i,style:{...t||{}},...n==="button"?h:{},children:l.children})}),Te=({activeTab:e,index:r,children:t,className:n="",as:l="div",style:i})=>m(ye,{children:e==r&&f.default.createElement(l,{className:n,style:i},t)});_.Tab=Oe,_.TabScreen=Te,_.Tabs=Ce,Object.defineProperties(_,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
 //# sourceMappingURL=react-tabs-scrollable.umd.js.map

package.json

 {
   "name": "react-tabs-scrollable",
-  "version": "2.0.3-alpha",
+  "version": "2.0.4-alpha",
   "scripts": {
@@ -5,0 +5,0 @@ "dev": "vite",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

149644

increased by0.39%

Worsened metrics

Lines of code

836

decreased by-0.36%

No dependency changes