@accessible/tabs/dist/esm/index.mjs

🅰 An accessible and versatile tabs component for React with keyboard navigation and labeling features taught in w3.org's WAI-ARIA tabs example

function e(){}function i(e,i){var{index:t}=i;return"register"===i.type?(e=e.slice(0))[t]={element:i.element,id:i.id,disabled:i.disabled}:"unregister"===i.type&&((e=e.slice(0))[t]=void 0),e}function t(t){function r(e,i,t,r){return y({type:"register",index:e,element:i,id:t,disabled:r}),()=>y({type:"unregister",index:e})}function l(e){var i;(null===(i=b[e||-1])||void 0===i?void 0:i.disabled)||g(e)}var{active:a,defaultActive:s=0,manualActivation:u=0,preventScroll:p=0,onChange:f=e,children:m}=t,[b,y]=c(i,[]),[h,g]=d(s);k(h,f);var x=null!=a?a:h,A=v(()=>({tabs:b,registerTab:r,active:x,activate:l,preventScroll:p,manualActivation:u}),[b,x,u,p]);return w(O.Provider,{value:A},N(N(m,n),o))}function r(e){function i(){var i;return!(null===(i=t[e])||void 0===i?void 0:i.disabled)&&r(e)}var{tabs:t,activate:r,active:n}=s(O);return v(()=>{var r,l,o;return{id:null===(r=t[e])||void 0===r?void 0:r.id,tabRef:null===(l=t[e])||void 0===l?void 0:l.element,index:e,activate:i,isActive:e===n,disabled:(null===(o=t[e])||void 0===o?void 0:o.disabled)||0}},[t,e,n,r])}function n(i){var{id:t,index:n,disabled:l=0,activeClass:o,inactiveClass:a,activeStyle:s,inactiveStyle:c,onDelete:d=e,children:v}=i;t=A(t);var{registerTab:m}=R(),b=u(null),{tabs:y,manualActivation:x}=R(),{isActive:C,activate:k}=r(n),N=S(v.ref,b);return g(b,{ArrowRight:()=>function(e,i){var t,r,n,l;i===e.length-1?null===(t=e[0])||void 0===t||null===(r=t.element)||void 0===r||r.focus():null===(n=e[i+1])||void 0===n||null===(l=n.element)||void 0===l||l.focus()}(y,n),ArrowLeft:()=>function(e,i){var t,r,n,l;0===i?null===(t=e[e.length-1])||void 0===t||null===(r=t.element)||void 0===r||r.focus():null===(n=e[i-1])||void 0===n||null===(l=n.element)||void 0===l||l.focus()}(y,n),Home:()=>{var e,i;return null===(e=y[0])||void 0===e||null===(i=e.element)||void 0===i?void 0:i.focus()},End:()=>{var e,i;return null===(e=y[y.length-1])||void 0===e||null===(i=e.element)||void 0===i?void 0:i.focus()},Delete:d}),p(()=>m(n,b.current,t,l),[t,l,n]),w(h,null,f(v,{"aria-controls":t,"aria-selected":""+C,"aria-disabled":""+(C||l),role:"tab",className:I(v.props.className,C?o:a)||void 0,style:Object.assign({},v.props.style,C?s:c),tabIndex:v.props.hasOwnProperty("tabIndex")?v.props.tabIndex:C?0:-1,onFocus:e=>{var i,t;x||k(),null===(i=(t=v.props).onFocus)||void 0===i||i.call(t,e)},onClick:e=>{var i,t;k(),null===(i=(t=v.props).onClick)||void 0===i||i.call(t,e)},ref:N}))}function l(e){var{children:i}=e;return f(i,{role:"tablist"})}function o(e){var{index:i,activeClass:t,inactiveClass:n,activeStyle:l,inactiveStyle:o,children:a}=e,{isActive:s,id:c}=r(i),{manualActivation:d,preventScroll:v}=R(),p=u(s),m=u(null),b=S(a.ref,m);return x(m,d&&!p.current&&s,{includeRoot:1,preventScroll:v}),C(()=>{p.current=s},[s,i]),f(a,{"aria-hidden":""+!s,id:c,className:I(a.props.className,s?t:n)||void 0,style:Object.assign({visibility:s?"visible":"hidden"},a.props.style,s?l:o),tabIndex:a.props.hasOwnProperty("tabIndex")?a.props.tabIndex:s?0:-1,ref:b})}import{createContext as a,useContext as s,useReducer as c,useState as d,useMemo as v,useRef as u,useEffect as p,cloneElement as f,createElement as m,Children as b,isValidElement as y}from"react";import{Button as h}from"@accessible/button";import g from"@accessible/use-key";import x from"@accessible/use-conditional-focus";import A from"@accessible/use-id";import S from"@react-hook/merged-ref";import C from"@react-hook/passive-layout-effect";import k from"@react-hook/change";import I from"clsx";var w=m,N=(e,i)=>{var t=0,r=0,a=b.map(e,e=>{if(!y(e))return e;if(i===o&&(e.type===l||e.type===n)||i===n&&e.type===o)return e;if(e.type===i)return void 0!==e.props.index?(t=e.props.index+1,e):(r=1,f(e,{index:t++}));if(0===t){var a=N(e.props.children,i);return a===e.props.children?e:(r=1,f(e,void 0,a))}return e});return r?1===(null==a?void 0:a.length)?a[0]:a:e},O=a({tabs:[],registerTab:()=>e,active:void 0,activate:e,manualActivation:0,preventScroll:0}),{Consumer:P}=O,R=()=>s(O);export{o as Panel,n as Tab,l as TabList,t as Tabs,P as TabsConsumer,O as TabsContext,r as useTab,R as useTabs};
//# sourceMappingURL=index.mjs.map