@loke/ui
Version:
2 lines (1 loc) • 4.37 kB
JavaScript
import{composeEventHandlers}from"@loke/ui/compose-events";import{createContextScope}from"@loke/ui/context";import{Presence}from"@loke/ui/presence";import{Primitive}from"@loke/ui/primitive";import*as RovingFocusGroup from"@loke/ui/roving-focus";import{createRovingFocusGroupScope}from"@loke/ui/roving-focus";import{useControllableState}from"@loke/ui/use-controllable-state";import{useDirection}from"@loke/ui/use-direction";import{useId}from"@loke/ui/use-id";import{forwardRef,useEffect,useRef}from"react";import{jsx}from"react/jsx-runtime";var TABS_NAME="Tabs",[createTabsContext,createTabsScope]=createContextScope(TABS_NAME,[createRovingFocusGroupScope]),useRovingFocusGroupScope=createRovingFocusGroupScope(),[TabsProvider,useTabsContext]=createTabsContext(TABS_NAME),Tabs=forwardRef((props,forwardedRef)=>{let{__scopeTabs,value:valueProp,onValueChange,defaultValue,orientation="horizontal",dir,activationMode="automatic",...tabsProps}=props,direction=useDirection(dir),[value,setValue]=useControllableState({caller:TABS_NAME,defaultProp:defaultValue??"",onChange:onValueChange,prop:valueProp});return jsx(TabsProvider,{activationMode,baseId:useId(),dir:direction,onValueChange:setValue,orientation,scope:__scopeTabs,value,children:jsx(Primitive.div,{"data-orientation":orientation,dir:direction,...tabsProps,ref:forwardedRef})})});Tabs.displayName=TABS_NAME;var TAB_LIST_NAME="TabsList",TabsList=forwardRef((props,forwardedRef)=>{let{__scopeTabs,loop=!0,...listProps}=props,context=useTabsContext(TAB_LIST_NAME,__scopeTabs),rovingFocusGroupScope=useRovingFocusGroupScope(__scopeTabs);return jsx(RovingFocusGroup.Root,{asChild:!0,...rovingFocusGroupScope,dir:context.dir,loop,orientation:context.orientation,children:jsx(Primitive.div,{"aria-orientation":context.orientation,role:"tablist",...listProps,ref:forwardedRef})})});TabsList.displayName=TAB_LIST_NAME;var TRIGGER_NAME="TabsTrigger",TabsTrigger=forwardRef((props,forwardedRef)=>{let{__scopeTabs,value,disabled=!1,...triggerProps}=props,context=useTabsContext(TRIGGER_NAME,__scopeTabs),rovingFocusGroupScope=useRovingFocusGroupScope(__scopeTabs),triggerId=makeTriggerId(context.baseId,value),contentId=makeContentId(context.baseId,value),isSelected=value===context.value;return jsx(RovingFocusGroup.Item,{asChild:!0,...rovingFocusGroupScope,active:isSelected,focusable:!disabled,children:jsx(Primitive.button,{"aria-controls":contentId,"aria-selected":isSelected,"data-disabled":disabled?"":void 0,"data-state":isSelected?"active":"inactive",disabled,id:triggerId,role:"tab",type:"button",...triggerProps,onFocus:composeEventHandlers(props.onFocus,()=>{let isAutomaticActivation=context.activationMode!=="manual";if(!(isSelected||disabled)&&isAutomaticActivation)context.onValueChange(value)}),onKeyDown:composeEventHandlers(props.onKeyDown,(event)=>{if([" ","Enter"].includes(event.key))context.onValueChange(value)}),onMouseDown:composeEventHandlers(props.onMouseDown,(event)=>{if(!disabled&&event.button===0&&!event.ctrlKey)context.onValueChange(value);else event.preventDefault()}),ref:forwardedRef})})});TabsTrigger.displayName=TRIGGER_NAME;var CONTENT_NAME="TabsContent",TabsContent=forwardRef((props,forwardedRef)=>{let{__scopeTabs,value,forceMount,children,...contentProps}=props,context=useTabsContext(CONTENT_NAME,__scopeTabs),triggerId=makeTriggerId(context.baseId,value),contentId=makeContentId(context.baseId,value),isSelected=value===context.value,isMountAnimationPreventedRef=useRef(isSelected);return useEffect(()=>{let rAF=requestAnimationFrame(()=>isMountAnimationPreventedRef.current=!1);return()=>cancelAnimationFrame(rAF)},[]),jsx(Presence,{present:forceMount||isSelected,children:({present})=>jsx(Primitive.div,{"aria-labelledby":triggerId,"data-orientation":context.orientation,"data-state":isSelected?"active":"inactive",hidden:!present,id:contentId,role:"tabpanel",tabIndex:0,...contentProps,ref:forwardedRef,style:{...props.style,animationDuration:isMountAnimationPreventedRef.current?"0s":void 0},children:present&&children})})});TabsContent.displayName=CONTENT_NAME;function makeTriggerId(baseId,value){return`${baseId}-trigger-${value}`}function makeContentId(baseId,value){return`${baseId}-content-${value}`}var Root2=Tabs,List=TabsList,Trigger=TabsTrigger,Content=TabsContent;export{createTabsScope,Trigger,TabsTrigger,TabsList,TabsContent,Tabs,Root2 as Root,List,Content};