react-tabs-scrollable - npm Package Compare versions

Comparing version 2.0.4-alpha to 2.0.5-alpha

dist/react-tabs-scrollable.es.js

		@@ -462,3 +462,3 @@ import React from "react";
		getTabsRects();
		updateNavBtnsState(_tabsContainerRef.current);
		updateNavBtnsState(_tabsContainerRef);
		scrollSelectedIntoView();
		@@ -465,0 +465,0 @@ });

dist/react-tabs-scrollable.umd.js

		@@ -12,3 +12,3 @@ (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.PIe-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={};/*
		* 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 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"}})});
		/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),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.4-alpha",
		"version": "2.0.5-alpha",
		"scripts": {
		@@ -5,0 +5,0 @@ "dev": "vite",

dist/react-tabs-scrollable.es.js.map

Sorry, the diff of this file is not supported yet

dist/react-tabs-scrollable.umd.js.map

Sorry, the diff of this file is not supported yet

		@@ -12,3 +12,3 @@ (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.PIe-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={};/*
		* 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 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"}})});
		/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),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

react-tabs-scrollable - npm Package Compare versions

New alerts

Fixed alerts

Worsened metrics