@legion-ui-kit/react-core/dist/cjs/components/Tabs/TabList.cjs

<div align="center"> <img height="108" width="116" src="https://legion.digitaltelkom.id/favicon.svg?v=4643a71fb65fa61a5f2b266b769ea7b1" /> <h1 align="center">Legion UI Kit - React Core</h1> </div>

"use client";
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),s=require("classnames"),r=require("./styles/styles.module.scss.cjs"),a=require("./Tab.cjs"),i=require("./Tabs.helper.cjs"),n=require("../../helpers/typeChecker.cjs"),c=require("../../helpers/internal.cjs"),u=require("./Tab.constant.cjs");function l(e){return e&&e.__esModule?e:{default:e}}var o=l(s);const d=s=>{const{activeTab:l=u.TAB_LIST_DEFAULT_PROPS.activeTab,children:d,className:T,onChange:_,position:A=u.TAB_LIST_DEFAULT_PROPS.position,...f}=s,p=o.default(r.default.legion_tab_list,T,r.default[A]),N=t.useRef([]),[b,I]=t.useState(u.TAB_ACTIVE_STYLE_DEFAULT),[h,m]=t.useState([]),j=e=>{e>=0&&e<N.current.length&&!h.includes(e)?I({index:e,...i.getTabsIndicator(A,N.current[e])}):I({...b,...u.UNKNOWN_TAB_ACTIVE,index:e}),n.isFunction(_)&&_(e)};return t.useEffect(()=>{const e=[];t.Children.toArray(d).forEach((t,s)=>t?.props?.disabled&&e.push(s)),e.includes(l)?I({...b,...u.UNKNOWN_TAB_ACTIVE,index:l}):I({...b,...i.getTabsIndicator(A,N.current[b.index])}),m(e)},[]),t.useEffect(()=>{j(l)},[l]),e.jsxs("div",{className:p,...f,children:[t.Children.toArray(d).filter(e=>c.checkComponent(e,u.TAB_DISPLAY_NAME)).map((t,s)=>{const{className:i,onClick:c,...l}=t.props,d=`tab-${s}}`,T={...l,ref:e=>N.current[s]=e,className:o.default(i,r.default.tab),onClick:()=>{n.isFunction(c)&&c(),j(s)},active:b.index===s,style:{transitionDuration:`${u.TABS_ANIMATION_DURATION}ms`,...l.style},position:A};return e.jsx(a.default,{...T},d)}),e.jsx("span",{className:r.default.tab_indicator,style:{transitionDuration:`${u.TABS_ANIMATION_DURATION}ms`,...b}})]})};d.displayName="TabList",exports.default=d;
//# sourceMappingURL=TabList.cjs.map