@styleless-ui/react/esm/TabGroup/Tab/Tab.js

Completely unstyled, headless and accessible React UI components.

var e=this&&this.__assign||function(){return e=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},e.apply(this,arguments)},t=this&&this.__rest||function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)t.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(n[o[r]]=e[o[r]])}return n},n=this&&this.__spreadArray||function(e,t,n){if(n||2===arguments.length)for(var o,r=0,l=t.length;r<l;r++)!o&&r in t||(o||(o=Array.prototype.slice.call(t,0,r)),o[r]=t[r]);return e.concat(o||Array.prototype.slice.call(t))};import{jsx as o}from"react/jsx-runtime";import*as r from"react";import{SystemKeys as l}from"../../internals";import{componentWithForwardedRef as i,useButtonBase as a,useDeterministicId as u,useEventCallback as s,useForkedRefs as c}from"../../utils";import d from"../context";import{TabRoot as f}from"../slots";var p=i((function(i,p){var y=i.id,v=i.children,h=i.className,b=i.disabled,m=void 0!==b&&b,g=i.onBlur,O=i.onFocus,w=i.onKeyDown,K=i.onKeyUp,k=t(i,["id","children","className","disabled","onBlur","onFocus","onKeyDown","onKeyUp"]),x=r.useContext(d),j=u(y,"styleless-ui__tab"),D=Number(k["data-index"]),F=a({disabled:m,onBlur:g,onFocus:O,onKeyUp:K,onKeyDown:s((function(e){var t,o,r;if(x){var i=x.tabs,a=x.keyboardActivationBehavior,u=x.orientation,s=null===(t=i[D])||void 0===t?void 0:t.current;if(!s||document.activeElement!==s)return null==w?void 0:w(e);var c=s?window.getComputedStyle(s).direction:"ltr",d=e.key===("horizontal"===u?"ltr"===c?l.RIGHT:l.LEFT:l.DOWN),f=e.key===("horizontal"===u?"ltr"===c?l.LEFT:l.RIGHT:l.UP),p=e.key===l.HOME,y=e.key===l.END,v=null,h=function(e,t,o){void 0===o&&(o=[]);var r=i[e];if(o.includes(e))return null;if(!(null==r?void 0:r.current)||r.current.disabled){var l=(t?e+1:e-1+i.length)%i.length;return h(l,t,n(n([],o,!0),[e],!1))}return r};f?v=h((D-1+i.length)%i.length,!1):d?v=h((D+1)%i.length,!0):p?v=h(0,!0):y&&(v=h(i.length-1,!1)),v&&(e.preventDefault(),null===(o=v.current)||void 0===o||o.focus(),"automatic"===a&&(null===(r=v.current)||void 0===r||r.click()))}null==w||w(e)})),onClick:s((function(){null==x||x.onChange(D)}))}),_=r.useRef(null),B=c(p,_,F.handleButtonRef);null==x||x.register(_);var C=!!x&&x.activeTab===D,E={selected:C,disabled:m,focusedVisible:F.isFocusedVisible},N="function"==typeof v?v(E):v,T="function"==typeof h?h(E):h;return o("button",e({},k,{id:j,role:"tab","data-slot":f,type:"button",ref:function(e){var t,n;if(B(e),e){var o=null===(n=null===(t=null==x?void 0:x.panels[D])||void 0===t?void 0:t.current)||void 0===n?void 0:n.id;o&&e.setAttribute("aria-controls",o)}},onClick:F.handleClick,onBlur:F.handleBlur,onFocus:F.handleFocus,onKeyDown:F.handleKeyDown,onKeyUp:F.handleKeyUp,disabled:m,tabIndex:m?-1:C?0:-1,className:T,"aria-selected":C,"data-selected":C?"":void 0},{children:N}))}));export default p;