@visa/nova-react/use-tabs/index.mjs

Visa Product Design System Nova React library. Compatible with React ^19.

import{useRef as e,useState as n,useEffect as t}from"react";import r from"../use-model/index.mjs";const l={autoSelect:!1,defaultSelected:-1,arrowKeyNavigation:null},o=(o=l)=>{const{arrowKeyNavigation:a,defaultSelected:c,onSelectedIndexChange:u,selectedIndex:i,...d}={...l,...o},s=e([]),[f,m]=r(i,u,c),[p,v]=n(c),[g,x]=n([]),w=-1===p?0:g.indexOf(p),h=e(null),b=g.length,y=b-1,I=d?.ref||s,S=(()=>{const e=I?.current[0]?.parentElement?.parentElement?.classList.contains("v-tabs-vertical");return e&&null===a?"vertical":a})();return t(()=>{x(I.current?.map((e,n)=>!e?.disabled&&n).filter(e=>!1!==e))},[I]),{getTabIndex:(e,n=!1)=>(n||null!==h.current||(h.current=e),f===e||-1===f&&h.current===e?0:-1),onIndexChange:(e,n=!1)=>{n||(m(e),v(e))},onKeyNavigation:e=>{const n=e.key;let t=null;if("ArrowRight"===n&&"vertical"!==S&&"none"!==S||"ArrowDown"===n&&"horizontal"!==S&&"none"!==S?t=(w+1)%b:"ArrowLeft"===n&&"vertical"!==S&&"none"!==S||"ArrowUp"===n&&"horizontal"!==S&&"none"!==S?t=w-1<0?y:w-1:"End"===n?t=y:"Home"===n&&(t=0),"Tab"===n&&v(f),I.current&&null!==t&&b){e.preventDefault();const n=g[t];d.autoSelect&&m(n),v(n),I.current[n]?.focus()}},ref:I,selectedIndex:f}};o.displayName="useTabs";export{o as default,o as useTabs};