@styleless-ui/react/TabGroup/List/List.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,r=1,i=arguments.length;r<i;r++)for(var l in t=arguments[r])Object.prototype.hasOwnProperty.call(t,l)&&(e[l]=t[l]);return e},__assign.apply(this,arguments)},__createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,i){void 0===i&&(i=r);var l=Object.getOwnPropertyDescriptor(t,r);l&&!("get"in l?!t.__esModule:l.writable||l.configurable)||(l={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,i,l)}:function(e,t,r,i){void 0===i&&(i=r),e[i]=t[r]}),__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 r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__rest=this&&this.__rest||function(e,t){var r={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(r[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var l=0;for(i=Object.getOwnPropertySymbols(e);l<i.length;l++)t.indexOf(i[l])<0&&Object.prototype.propertyIsEnumerable.call(e,i[l])&&(r[i[l]]=e[i[l]])}return r},__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")),utils_1=require("../../utils"),context_1=__importDefault(require("../context")),slots_1=require("../slots"),Tab_1=__importDefault(require("../Tab")),getLabelInfo=function(e){var t={};if("string"==typeof e)t.visibleLabel=e;else if("screenReaderLabel"in e)t.srOnlyLabel=e.screenReaderLabel;else{if(!("labelledBy"in e))throw new Error(["[StylelessUI][TabGroup.List]: Invalid `label` property.","The `label` property must be either a `string` or in shape of `{ screenReaderLabel: string; } | { labelledBy: string; }`"].join("\n"));t.labelledBy=e.labelledBy}return t},TabListBase=function(e,t){var r=e.label,i=e.children,l=e.id,a=e.classes,n=__rest(e,["label","children","id","classes"]),s=React.useContext(context_1.default),o=(0,utils_1.useDeterministicId)(l,"styleless-ui__tablist"),u=o?"".concat(o,"__label"):void 0,_=getLabelInfo(r),c=0,b=React.Children.map(i,(function(e){if(!React.isValidElement(e))return null;if(e.type===Tab_1.default){var t={"data-index":c++};return React.cloneElement(e,t)}return e}));return(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[_.visibleLabel&&(0,jsx_runtime_1.jsx)("span",__assign({id:u,"data-slot":slots_1.ListLabel,className:null==a?void 0:a.label},{children:_.visibleLabel})),(0,jsx_runtime_1.jsx)("div",__assign({},n,{id:o,ref:t,role:"tablist","data-slot":slots_1.ListRoot,className:null==a?void 0:a.root,"aria-label":_.srOnlyLabel,"aria-labelledby":_.visibleLabel?u:_.labelledBy,"aria-orientation":null==s?void 0:s.orientation},{children:b}))]})},TabList=(0,utils_1.componentWithForwardedRef)(TabListBase);exports.default=TabList;