UNPKG

@radix-ui/react-tabs

Version:
3 lines (2 loc) 2.46 kB
import{useId as e}from"@radix-ui/react-id";import{RovingFocusGroup as t,RovingFocusItem as a}from"@radix-ui/react-roving-focus";import{Primitive as o}from"@radix-ui/react-primitive";import{useControllableState as r}from"@radix-ui/react-use-controllable-state";import{useCallbackRef as i}from"@radix-ui/react-use-callback-ref";import{createContext as n}from"@radix-ui/react-context";import{composeEventHandlers as s}from"@radix-ui/primitive";import*as c from"react";import d from"@babel/runtime/helpers/esm/extends";const[l,u]=n("Tabs");export const Tabs=/*#__PURE__*/c.forwardRef(((t,a)=>{const{value:i,onValueChange:n,defaultValue:s,orientation:u="horizontal",dir:b="ltr",activationMode:m="automatic",...f}=t,[p,v]=r({prop:i,onChange:n,defaultProp:s});/*#__PURE__*/return c.createElement(l,{baseId:e(),value:p,onValueChange:v,orientation:u,dir:b,activationMode:m},/*#__PURE__*/c.createElement(o,d({"data-orientation":u},f,{ref:a})))}));/*#__PURE__*/const b="div";export const TabsList=/*#__PURE__*/c.forwardRef(((e,a)=>{const{as:o=b,loop:r=!0,...i}=e,n=u("TabsList");/*#__PURE__*/return c.createElement(t,d({role:"tablist",orientation:n.orientation,dir:n.dir,loop:r},i,{as:o,ref:a}))}));/*#__PURE__*/const m="div";export const TabsTrigger=/*#__PURE__*/c.forwardRef(((e,t)=>{const{as:o=m,value:r,disabled:n=!1,...l}=e,b=u("TabsTrigger"),v=f(b.baseId,r),x=p(b.baseId,r),T=r===b.value,g=i((()=>b.onValueChange(r)));/*#__PURE__*/return c.createElement(a,d({role:"tab","aria-selected":T,"aria-controls":x,"aria-disabled":n||void 0,"data-state":T?"active":"inactive","data-disabled":n?"":void 0,id:v},l,{focusable:!n,active:T,as:o,ref:t,onKeyDown:s(e.onKeyDown,(e=>{n||" "!==e.key&&"Enter"!==e.key||g()})),onMouseDown:s(e.onMouseDown,(e=>{n||0!==e.button||!1!==e.ctrlKey||g()})),onFocus:s(e.onFocus,(()=>{const e="manual"!==b.activationMode;T||n||!e||g()}))}))}));/*#__PURE__*/export const TabsContent=/*#__PURE__*/c.forwardRef(((e,t)=>{const{value:a,...r}=e,i=u("TabsContent"),n=f(i.baseId,a),s=p(i.baseId,a),l=a===i.value;/*#__PURE__*/return c.createElement(o,d({"data-state":l?"active":"inactive","data-orientation":i.orientation,role:"tabpanel","aria-labelledby":n,hidden:!l,id:s,tabIndex:0},r,{ref:t}))}));/*#__PURE__*/function f(e,t){return`${e}-trigger-${t}`}function p(e,t){return`${e}-content-${t}`}export const Root=Tabs;export const List=TabsList;export const Trigger=TabsTrigger;export const Content=TabsContent; //# sourceMappingURL=index.module.js.map