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

a simple react scrollable tabs with a lot of additional features and with fully supporting of RTL mode

(function(O,E){typeof exports=="object"&&typeof module<"u"?E(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],E):(O=typeof globalThis<"u"?globalThis:O||self,E(O.MyLib={},O.React))})(this,function(O,E){"use strict";const Ge="";var Te={exports:{}},Z={};/**
 * @license React
 * react-jsx-runtime.production.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var ke;function Be(){if(ke)return Z;ke=1;var n=Symbol.for("react.transitional.element"),d=Symbol.for("react.fragment");function i(b,c,m){var h=null;if(m!==void 0&&(h=""+m),c.key!==void 0&&(h=""+c.key),"key"in c){m={};for(var w in c)w!=="key"&&(m[w]=c[w])}else m=c;return c=m.ref,{$$typeof:n,type:b,key:h,ref:c!==void 0?c:null,props:m}}return Z.Fragment=d,Z.jsx=i,Z.jsxs=i,Z}var Q={};/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var Ae;function $e(){return Ae||(Ae=1,process.env.NODE_ENV!=="production"&&function(){function n(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===T?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case ne:return"Fragment";case be:return"Portal";case he:return"Profiler";case me:return"StrictMode";case le:return"Suspense";case se:return"SuspenseList"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case Ee:return(e.displayName||"Context")+".Provider";case ge:return(e._context.displayName||"Context")+".Consumer";case oe:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ae:return r=e.displayName||null,r!==null?r:n(e.type)||"Memo";case ie:r=e._payload,e=e._init;try{return n(e(r))}catch{}}return null}function d(e){return""+e}function i(e){try{d(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,a=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",a),d(e)}}function b(){}function c(){if(R===0){pe=console.log,H=console.info,G=console.warn,J=console.error,ye=console.group,ce=console.groupCollapsed,ue=console.groupEnd;var e={configurable:!0,enumerable:!0,value:b,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}R++}function m(){if(R--,R===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:C({},e,{value:pe}),info:C({},e,{value:H}),warn:C({},e,{value:G}),error:C({},e,{value:J}),group:C({},e,{value:ye}),groupCollapsed:C({},e,{value:ce}),groupEnd:C({},e,{value:ue})})}0>R&&console.error("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}function h(e){if(X===void 0)try{throw Error()}catch(t){var r=t.stack.trim().match(/\n( *(at )?)/);X=r&&r[1]||"",je=-1<t.stack.indexOf(`
    at`)?" (<anonymous>)":-1<t.stack.indexOf("@")?"@unknown:0:0":""}return`
`+X+e+je}function w(e,r){if(!e||A)return"";var t=o.get(e);if(t!==void 0)return t;A=!0,t=Error.prepareStackTrace,Error.prepareStackTrace=void 0;var a=null;a=N.H,N.H=null,c();try{var p={DetermineComponentFrameRoot:function(){try{if(r){var Y=function(){throw Error()};if(Object.defineProperty(Y.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(Y,[])}catch(P){var xe=P}Reflect.construct(e,[],Y)}else{try{Y.call()}catch(P){xe=P}e.call(Y.prototype)}}else{try{throw Error()}catch(P){xe=P}(Y=e())&&typeof Y.catch=="function"&&Y.catch(function(){})}}catch(P){if(P&&xe&&typeof P.stack=="string")return[P.stack,xe.stack]}return[null,null]}};p.DetermineComponentFrameRoot.displayName="DetermineComponentFrameRoot";var g=Object.getOwnPropertyDescriptor(p.DetermineComponentFrameRoot,"name");g&&g.configurable&&Object.defineProperty(p.DetermineComponentFrameRoot,"name",{value:"DetermineComponentFrameRoot"});var s=p.DetermineComponentFrameRoot(),W=s[0],K=s[1];if(W&&K){var x=W.split(`
`),F=K.split(`
`);for(s=g=0;g<x.length&&!x[g].includes("DetermineComponentFrameRoot");)g++;for(;s<F.length&&!F[s].includes("DetermineComponentFrameRoot");)s++;if(g===x.length||s===F.length)for(g=x.length-1,s=F.length-1;1<=g&&0<=s&&x[g]!==F[s];)s--;for(;1<=g&&0<=s;g--,s--)if(x[g]!==F[s]){if(g!==1||s!==1)do if(g--,s--,0>s||x[g]!==F[s]){var fe=`
`+x[g].replace(" at new "," at ");return e.displayName&&fe.includes("<anonymous>")&&(fe=fe.replace("<anonymous>",e.displayName)),typeof e=="function"&&o.set(e,fe),fe}while(1<=g&&0<=s);break}}}finally{A=!1,N.H=a,m(),Error.prepareStackTrace=t}return x=(x=e?e.displayName||e.name:"")?h(x):"",typeof e=="function"&&o.set(e,x),x}function S(e){if(e==null)return"";if(typeof e=="function"){var r=e.prototype;return w(e,!(!r||!r.isReactComponent))}if(typeof e=="string")return h(e);switch(e){case le:return h("Suspense");case se:return h("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case oe:return e=w(e.render,!1),e;case ae:return S(e.type);case ie:r=e._payload,e=e._init;try{return S(e(r))}catch{}}return""}function k(){var e=N.A;return e===null?null:e.getOwner()}function $(e){if(_e.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function M(e,r){function t(){v||(v=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function z(){var e=n(this.type);return u[e]||(u[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function I(e,r,t,a,p,g){return t=g.ref,e={$$typeof:re,type:e,key:r,props:g,_owner:p},(t!==void 0?t:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:z}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function ee(e,r,t,a,p,g){if(typeof e=="string"||typeof e=="function"||e===ne||e===he||e===me||e===le||e===se||e===Ne||typeof e=="object"&&e!==null&&(e.$$typeof===ie||e.$$typeof===ae||e.$$typeof===Ee||e.$$typeof===ge||e.$$typeof===oe||e.$$typeof===we||e.getModuleId!==void 0)){var s=r.children;if(s!==void 0)if(a)if(j(s)){for(a=0;a<s.length;a++)L(s[a],e);Object.freeze&&Object.freeze(s)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else L(s,e)}else s="",(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(s+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."),e===null?a="null":j(e)?a="array":e!==void 0&&e.$$typeof===re?(a="<"+(n(e.type)||"Unknown")+" />",s=" Did you accidentally export a JSX literal instead of a component?"):a=typeof e,console.error("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",a,s);if(_e.call(r,"key")){s=n(e);var W=Object.keys(r).filter(function(x){return x!=="key"});a=0<W.length?"{key: someKey, "+W.join(": ..., ")+": ...}":"{key: someKey}",f[s+a]||(W=0<W.length?"{"+W.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
  let props = %s;
  <%s {...props} />
React keys must be passed directly to JSX without using spread:
  let props = %s;
  <%s key={someKey} {...props} />`,a,s,W,s),f[s+a]=!0)}if(s=null,t!==void 0&&(i(t),s=""+t),$(r)&&(i(r.key),s=""+r.key),"key"in r){t={};for(var K in r)K!=="key"&&(t[K]=r[K])}else t=r;return s&&M(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),I(e,s,g,p,k(),t)}function L(e,r){if(typeof e=="object"&&e&&e.$$typeof!==l){if(j(e))for(var t=0;t<e.length;t++){var a=e[t];te(a)&&ve(a,r)}else if(te(e))e._store&&(e._store.validated=1);else if(e===null||typeof e!="object"?t=null:(t=U&&e[U]||e["@@iterator"],t=typeof t=="function"?t:null),typeof t=="function"&&t!==e.entries&&(t=t.call(e),t!==e))for(;!(e=t.next()).done;)te(e.value)&&ve(e.value,r)}}function te(e){return typeof e=="object"&&e!==null&&e.$$typeof===re}function ve(e,r){if(e._store&&!e._store.validated&&e.key==null&&(e._store.validated=1,r=Se(r),!y[r])){y[r]=!0;var t="";e&&e._owner!=null&&e._owner!==k()&&(t=null,typeof e._owner.tag=="number"?t=n(e._owner.type):typeof e._owner.name=="string"&&(t=e._owner.name),t=" It was passed a child from "+t+".");var a=N.getCurrentStack;N.getCurrentStack=function(){var p=S(e.type);return a&&(p+=a()||""),p},console.error('Each child in a list should have a unique "key" prop.%s%s See https://react.dev/link/warning-keys for more information.',r,t),N.getCurrentStack=a}}function Se(e){var r="",t=k();return t&&(t=n(t.type))&&(r=`

Check the render method of \``+t+"`."),r||(e=n(e))&&(r=`

Check the top-level render call using <`+e+">."),r}var Ce=E,re=Symbol.for("react.transitional.element"),be=Symbol.for("react.portal"),ne=Symbol.for("react.fragment"),me=Symbol.for("react.strict_mode"),he=Symbol.for("react.profiler"),ge=Symbol.for("react.consumer"),Ee=Symbol.for("react.context"),oe=Symbol.for("react.forward_ref"),le=Symbol.for("react.suspense"),se=Symbol.for("react.suspense_list"),ae=Symbol.for("react.memo"),ie=Symbol.for("react.lazy"),Ne=Symbol.for("react.offscreen"),U=Symbol.iterator,T=Symbol.for("react.client.reference"),N=Ce.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,_e=Object.prototype.hasOwnProperty,C=Object.assign,we=Symbol.for("react.client.reference"),j=Array.isArray,R=0,pe,H,G,J,ye,ce,ue;b.__reactDisabledLog=!0;var X,je,A=!1,o=new(typeof WeakMap=="function"?WeakMap:Map),l=Symbol.for("react.client.reference"),v,u={},f={},y={};Q.Fragment=ne,Q.jsx=function(e,r,t,a,p){return ee(e,r,t,!1,a,p)},Q.jsxs=function(e,r,t,a,p){return ee(e,r,t,!0,a,p)}}()),Q}process.env.NODE_ENV==="production"?Te.exports=Be():Te.exports=$e();var _=Te.exports;function Me(n){return(1+Math.sin(Math.PI*n-Math.PI/2))/2}function Le(n,d,i,b={},c=()=>{}){const{ease:m=Me,duration:h=300}=b;let w=null;const S=d[n];let k=!1;const $=()=>{k=!0},M=z=>{if(k){c(new Error("Animation cancelled"));return}w===null&&(w=z);const I=Math.min(1,(z-w)/h);if(d[n]=m(I)*(i-S)+S,I>=1){requestAnimationFrame(()=>{c(null)});return}requestAnimationFrame(M)};return S===i?(c(new Error("Element already at target position")),$):(requestAnimationFrame(M),$)}const Oe=(n,d=166)=>{let i;const b=(...c)=>{const m=()=>{n.apply(void 0,c)};clearTimeout(i),i=setTimeout(m,d)};return b.clear=()=>{clearTimeout(i)},b};var Ye=!!(typeof window<"u"&&window.document&&window.document.createElement),q;function Ve(){if(q)return q;if(!Ye||!window.document.body)return"indeterminate";var n=window.document.createElement("div");return n.appendChild(document.createTextNode("ABCD")),n.dir="rtl",n.style.fontSize="14px",n.style.width="4px",n.style.height="1px",n.style.position="absolute",n.style.top="-1000px",n.style.overflow="scroll",document.body.appendChild(n),q="reverse",n.scrollLeft>0?q="default":(n.scrollLeft=2,n.scrollLeft<2&&(q="negative")),document.body.removeChild(n),q}function ze(n,d){var i=n.scrollLeft;if(d!=="rtl")return i;var b=Ve();if(b==="indeterminate")return Number.NaN;switch(b){case"negative":return n.scrollWidth-n.clientWidth+i;case"reverse":return n.scrollWidth-n.clientWidth-i}return i}function Ie(n){return n&&n.ownerDocument||document}const Re=E.forwardRef(({hideNavBtnsOnMobile:n,disabled:d,onClick:i=()=>null,children:b,navBtnStyle:c,className:m="",navBtnContainerClassName:h,navBtnAs:w="button"},S)=>{const k=`rts___nav___btn___container ${n?"display___md___none":""} ${h}`.trim(),$=w,M={disabled:d,type:"button"};return _.jsx("div",{className:k,children:_.jsx($,{...w==="button"?M:{},className:`rts___btn rts___nav___btn ${m}`,onClick:i,style:c,dir:"ltr","aria-hidden":"true",ref:S,children:b})})}),Ue=()=>_.jsxs("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:[_.jsx("line",{x1:"19",y1:"12",x2:"5",y2:"12"}),_.jsx("polyline",{points:"12 19 5 12 12 5"})]}),Fe=()=>_.jsxs("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:[_.jsx("line",{x1:"5",y1:"12",x2:"19",y2:"12"}),_.jsx("polyline",{points:"12 5 19 12 12 19"})]}),We=(n,d)=>n===d?n.firstChild:d&&d.nextElementSibling?d.nextElementSibling:n.firstChild,Pe=(n,d)=>n===d?n.lastChild:d&&d.previousElementSibling?d.previousElementSibling:n.lastChild,de=(n,d,i)=>{let b=!1,c=i(n,d);for(;c;){if(c===n.firstChild){if(b)return;b=!0}const m=c.disabled||c.getAttribute("aria-disabled")==="true";if(!c.hasAttribute("tabindex")||m)c=i(n,c);else{c.focus();return}}},B="left",D="right",V="scrollLeft",qe=n=>{const{children:d,activeTab:i,animationDuration:b=300,navBtnCLickAnimationDuration:c=300,selectedAnimationDuration:m=300,isRTL:h=!1,didReachEnd:w=()=>null,didReachStart:S=()=>null,onTabClick:k=()=>null,hideNavBtnsOnMobile:$=!0,hideNavBtns:M=!1,tabsScrollAmount:z=3,tabsContainerRef:I=null,tabRef:ee=null,mode:L="",tabsContainerStyle:te={},navBtnStyle:ve={},tabsUpperContainerStyle:Se={},leftNavBtnClassName:Ce="",rightNavBtnClassName:re="",navBtnClassName:be="",navBtnContainerClassName:ne="",tabsUpperContainerClassName:me="",tabsContainerClassName:he="",leftNavBtnRef:ge=null,rightNavBtnRef:Ee=null,showTabsScroll:oe=!1,navBtnAs:le="button",action:se,rightBtnIcon:ae=_.jsx(Fe,{}),leftBtnIcon:ie=_.jsx(Ue,{}),getTabsBoundingClientRects:Ne=()=>null}=n,U=E.useRef([]),T=E.useRef(null),[N,_e]=E.useState({start:!1,end:!1}),C=(o=i)=>{var y;const l=T==null?void 0:T.current,v=(y=U.current)==null?void 0:y[o];let u,f;if(!i&&i!==0){console.error("react-tabs-scrollable : You have to add activeTab prop");return}if(l){const e=l.getBoundingClientRect();u={top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:e.width,height:e.height,x:e.x,y:e.y,scrollLeft:l.scrollLeft,clientWidth:l==null?void 0:l.clientWidth,scrollWidth:l==null?void 0:l.scrollWidth},f=v==null?void 0:v.getBoundingClientRect()}return Ne({tabsContainerRects:u,tabRects:f}),{tabsContainerRects:u,tabRects:f}},we=(o=i,l=!0,v)=>{if(!T.current)return;const{tabsContainerRects:u,tabRects:f}=C(o),y=u.clientWidth/2-(f==null?void 0:f.width)/2;if(!u||!f)return;const e=L==="scrollSelectedToCenter"||L==="scrollSelectedToCenterFromView"?u.clientWidth/2-(f==null?void 0:f.width)/2:0,r=L==="scrollSelectedToEnd"?u.clientWidth-(f==null?void 0:f.width):0,t=e||r;if(f[B]<u[B]){const a=u[V]+(f[B]-u[B])-t;j(a,b||m,l)}else if(f[D]>u[D]){const a=u[V]+(f[D]-u[D])+t;j(a,m||b,l)}if(y>f[B]&&v&&L==="scrollSelectedToCenterFromView"){v=!1;const a=u[V]+(f[B]-u[B])-t;j(a,b||m,l)}else if(y<f[B]&&v&&L==="scrollSelectedToCenterFromView"){v=!1;const a=u[V]+(f[D]-u[D])+t;j(a,m||b,l)}},j=(o,l=300,v=!0)=>{v?Le(V,T.current,o,{duration:l}):T.current.scrollLeft=o},R=(o=T)=>{if(!o.current)return;const l=h?ze(o.current,h?"rtl":"ltr"):o.current.scrollLeft,v=o.current.scrollWidth,u=o.current.clientWidth,f=Math.floor(l)>1,y=Math.ceil(l)<v-u-1;_e({start:h?y:f,end:h?f:y}),S(!f),w(!y)};E.useEffect(()=>{const o=Oe(()=>{C(),R(T),we()});typeof ResizeObserver<"u"&&new ResizeObserver(v=>{o()}).observe(T.current)},[h]),E.useEffect(()=>{we(i,!0,!0)},[i]);const pe=E.useCallback((o,l)=>{k(o,l)},[]),H=E.useMemo(()=>Oe(()=>{R(T)}),[R]);E.useEffect(()=>()=>{H.clear()},[H]);const G=(o,l=z)=>{var u;const{tabsContainerRects:v}=C();j(v[V]+((u=U.current[i])==null?void 0:u.clientWidth)*l,b||c)},J=(o,l=z)=>{var u;const{tabsContainerRects:v}=C();j(v[V]-((u=U.current[i])==null?void 0:u.clientWidth)*l,b||c)},ye=o=>{const l=T.current,v=Ie(l).activeElement;if((v==null?void 0:v.getAttribute("role"))!=="tab")return;let f="ArrowLeft",y="ArrowRight";switch(h&&(f="ArrowRight",y="ArrowLeft"),o.key){case f:o.preventDefault(),de(l,v,Pe);break;case y:o.preventDefault(),de(l,v,We);break;case"Home":o.preventDefault(),de(l,null,We);break;case"End":o.preventDefault(),de(l,null,Pe);break}},ce=()=>{j(0)},ue=()=>{const{tabsContainerRects:o}=C(),{scrollWidth:l}=o;j((h?-1:1)*l)};E.useImperativeHandle(se,()=>({onLeftNavBtnClick:J,onRightNavBtnClick:G,goToStart:ce,goToEnd:ue}),[J,G,ce,ue]);const X={"aria-hidden":"true",hideNavBtnsOnMobile:$,navBtnStyle:ve,navBtnContainerClassName:ne,navBtnAs:le},A=(()=>{if(M)return null;let o={};return!N.start&&!N.end?o={end:null,start:null}:(o[h?"end":"start"]=_.jsx(Re,{disabled:!N[h?"end":"start"],onClick:J,ref:ge,className:`${Ce} ${be}`.trim(),...X,children:ie}),o[h?"start":"end"]=_.jsx(Re,{disabled:!N[h?"start":"end"],onClick:G,ref:Ee,className:`${re} ${be}`.trim(),...X,children:ae}),o)})();return _.jsxs("div",{className:`rts___tabs___container ${me}`.trim(),style:Se,children:[A==null?void 0:A.start,_.jsx("div",{ref:o=>{T.current=o,I&&(I.current=o)},role:"tablist","aria-label":"tabs",onKeyDown:ye,onScroll:H,style:te,className:`rts___tabs ${oe?"":"hide___rts___tabs___scroll"} ${he}`.trim(),children:_.jsx(E.Fragment,{children:E.Children.map(d,(o,l)=>{if(!E.isValidElement(o))return null;const v=l===i;return E.cloneElement(o,{ref:u=>{U.current[l]=u,ee&&(ee.current[l]=u)},onClick:u=>{pe(u,l)},"data-index":l,role:"tab","aria-selected":v?"true":"false",tabIndex:v?"0":"-1",selected:v,className:`rts___tab rts___btn ${o.props.className||""}`.trim()})})})}),A==null?void 0:A.end]})},De=E.forwardRef(({className:n="",selected:d,style:i,tabAs:b="button",...c},m)=>{const h=b,w={type:"button"},S=`${n} ${d?"rts___tab___selected":""}`.trim();return _.jsx(h,{...c,className:S,ref:m,style:{...i||{}},...b==="button"?w:{},children:c.children})}),He=({activeTab:n,index:d,children:i,className:b="",as:c="div",style:m})=>_.jsx(_.Fragment,{children:n==d&&E.createElement(c,{className:b,style:m},i)});O.Tab=De,O.TabScreen=He,O.Tabs=qe,Object.defineProperty(O,Symbol.toStringTag,{value:"Module"})});
//# sourceMappingURL=react-tabs-scrollable.umd.js.map