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

Completely unstyled, headless and accessible React UI components.

"use strict";var __assign=this&&this.__assign||function(){return __assign=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},__assign.apply(this,arguments)},__createBinding=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var i=Object.getOwnPropertyDescriptor(t,n);i&&!("get"in i?!t.__esModule:i.writable||i.configurable)||(i={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,i)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&__createBinding(t,e,n);return __setModuleDefault(t,e),t},__rest=this&&this.__rest||function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(e);i<r.length;i++)t.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(e,r[i])&&(n[r[i]]=e[r[i]])}return n},__spreadArray=this&&this.__spreadArray||function(e,t,n){if(n||2===arguments.length)for(var r,i=0,l=t.length;i<l;i++)!r&&i in t||(r||(r=Array.prototype.slice.call(t,0,i)),r[i]=t[i]);return e.concat(r||Array.prototype.slice.call(t))},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});var jsx_runtime_1=require("react/jsx-runtime"),React=__importStar(require("react")),internals_1=require("../../internals"),utils_1=require("../../utils"),context_1=__importDefault(require("../context")),slots_1=require("../slots"),TabBase=function(e,t){var n=e.id,r=e.children,i=e.className,l=e.disabled,o=void 0!==l&&l,a=e.onBlur,s=e.onFocus,u=e.onKeyDown,c=e.onKeyUp,d=__rest(e,["id","children","className","disabled","onBlur","onFocus","onKeyDown","onKeyUp"]),_=React.useContext(context_1.default),f=(0,utils_1.useDeterministicId)(n,"styleless-ui__tab"),y=Number(d["data-index"]),p=(0,utils_1.useButtonBase)({disabled:o,onBlur:a,onFocus:s,onKeyUp:c,onKeyDown:(0,utils_1.useEventCallback)((function(e){var t,n,r;if(_){var i=_.tabs,l=_.keyboardActivationBehavior,o=_.orientation,a=null===(t=i[y])||void 0===t?void 0:t.current;if(!a||document.activeElement!==a)return null==u?void 0:u(e);var s=a?window.getComputedStyle(a).direction:"ltr",c=e.key===("horizontal"===o?"ltr"===s?internals_1.SystemKeys.RIGHT:internals_1.SystemKeys.LEFT:internals_1.SystemKeys.DOWN),d=e.key===("horizontal"===o?"ltr"===s?internals_1.SystemKeys.LEFT:internals_1.SystemKeys.RIGHT:internals_1.SystemKeys.UP),f=e.key===internals_1.SystemKeys.HOME,p=e.key===internals_1.SystemKeys.END,b=null,v=function(e,t,n){void 0===n&&(n=[]);var r=i[e];if(n.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 v(l,t,__spreadArray(__spreadArray([],n,!0),[e],!1))}return r};d?b=v((y-1+i.length)%i.length,!1):c?b=v((y+1)%i.length,!0):f?b=v(0,!0):p&&(b=v(i.length-1,!1)),b&&(e.preventDefault(),null===(n=b.current)||void 0===n||n.focus(),"automatic"===l&&(null===(r=b.current)||void 0===r||r.click()))}null==u||u(e)})),onClick:(0,utils_1.useEventCallback)((function(){null==_||_.onChange(y)}))}),b=React.useRef(null),v=(0,utils_1.useForkedRefs)(t,b,p.handleButtonRef);null==_||_.register(b);var h=!!_&&_.activeTab===y,m={selected:h,disabled:o,focusedVisible:p.isFocusedVisible},g="function"==typeof r?r(m):r,O="function"==typeof i?i(m):i;return(0,jsx_runtime_1.jsx)("button",__assign({},d,{id:f,role:"tab","data-slot":slots_1.TabRoot,type:"button",ref:function(e){var t,n;if(v(e),e){var r=null===(n=null===(t=null==_?void 0:_.panels[y])||void 0===t?void 0:t.current)||void 0===n?void 0:n.id;r&&e.setAttribute("aria-controls",r)}},onClick:p.handleClick,onBlur:p.handleBlur,onFocus:p.handleFocus,onKeyDown:p.handleKeyDown,onKeyUp:p.handleKeyUp,disabled:o,tabIndex:o?-1:h?0:-1,className:O,"aria-selected":h,"data-selected":h?"":void 0},{children:g}))},Tab=(0,utils_1.componentWithForwardedRef)(TabBase);exports.default=Tab;