@loke/ui
Version:
2 lines (1 loc) • 6.56 kB
JavaScript
var __create=Object.create;var{getPrototypeOf:__getProtoOf,defineProperty:__defProp,getOwnPropertyNames:__getOwnPropNames,getOwnPropertyDescriptor:__getOwnPropDesc}=Object,__hasOwnProp=Object.prototype.hasOwnProperty;function __accessProp(key){return this[key]}var __toESMCache_node,__toESMCache_esm,__toESM=(mod,isNodeMode,target)=>{var canCache=mod!=null&&typeof mod==="object";if(canCache){var cache=isNodeMode?__toESMCache_node??=new WeakMap:__toESMCache_esm??=new WeakMap,cached=cache.get(mod);if(cached)return cached}target=mod!=null?__create(__getProtoOf(mod)):{};let to=isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target;for(let key of __getOwnPropNames(mod))if(!__hasOwnProp.call(to,key))__defProp(to,key,{get:__accessProp.bind(mod,key),enumerable:!0});if(canCache)cache.set(mod,to);return to},__toCommonJS=(from)=>{var entry=(__moduleCache??=new WeakMap).get(from),desc;if(entry)return entry;if(entry=__defProp({},"__esModule",{value:!0}),from&&typeof from==="object"||typeof from==="function"){for(var key of __getOwnPropNames(from))if(!__hasOwnProp.call(entry,key))__defProp(entry,key,{get:__accessProp.bind(from,key),enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable})}return __moduleCache.set(from,entry),entry},__moduleCache;var __returnValue=(v)=>v;function __exportSetter(name,newValue){this[name]=__returnValue.bind(null,newValue)}var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0,configurable:!0,set:__exportSetter.bind(all,name)})};var exports_tabs={};__export(exports_tabs,{createTabsScope:()=>createTabsScope,Trigger:()=>Trigger,TabsTrigger:()=>TabsTrigger,TabsList:()=>TabsList,TabsContent:()=>TabsContent,Tabs:()=>Tabs,Root:()=>Root2,List:()=>List,Content:()=>Content});module.exports=__toCommonJS(exports_tabs);var import_compose_events=require("@loke/ui/compose-events"),import_context=require("@loke/ui/context"),import_presence=require("@loke/ui/presence"),import_primitive=require("@loke/ui/primitive"),RovingFocusGroup=__toESM(require("@loke/ui/roving-focus")),import_roving_focus=require("@loke/ui/roving-focus"),import_use_controllable_state=require("@loke/ui/use-controllable-state"),import_use_direction=require("@loke/ui/use-direction"),import_use_id=require("@loke/ui/use-id"),import_react=require("react"),jsx_runtime=require("react/jsx-runtime"),TABS_NAME="Tabs",[createTabsContext,createTabsScope]=import_context.createContextScope(TABS_NAME,[import_roving_focus.createRovingFocusGroupScope]),useRovingFocusGroupScope=import_roving_focus.createRovingFocusGroupScope(),[TabsProvider,useTabsContext]=createTabsContext(TABS_NAME),Tabs=import_react.forwardRef((props,forwardedRef)=>{let{__scopeTabs,value:valueProp,onValueChange,defaultValue,orientation="horizontal",dir,activationMode="automatic",...tabsProps}=props,direction=import_use_direction.useDirection(dir),[value,setValue]=import_use_controllable_state.useControllableState({caller:TABS_NAME,defaultProp:defaultValue??"",onChange:onValueChange,prop:valueProp});return jsx_runtime.jsx(TabsProvider,{activationMode,baseId:import_use_id.useId(),dir:direction,onValueChange:setValue,orientation,scope:__scopeTabs,value,children:jsx_runtime.jsx(import_primitive.Primitive.div,{"data-orientation":orientation,dir:direction,...tabsProps,ref:forwardedRef})})});Tabs.displayName=TABS_NAME;var TAB_LIST_NAME="TabsList",TabsList=import_react.forwardRef((props,forwardedRef)=>{let{__scopeTabs,loop=!0,...listProps}=props,context=useTabsContext(TAB_LIST_NAME,__scopeTabs),rovingFocusGroupScope=useRovingFocusGroupScope(__scopeTabs);return jsx_runtime.jsx(RovingFocusGroup.Root,{asChild:!0,...rovingFocusGroupScope,dir:context.dir,loop,orientation:context.orientation,children:jsx_runtime.jsx(import_primitive.Primitive.div,{"aria-orientation":context.orientation,role:"tablist",...listProps,ref:forwardedRef})})});TabsList.displayName=TAB_LIST_NAME;var TRIGGER_NAME="TabsTrigger",TabsTrigger=import_react.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_runtime.jsx(RovingFocusGroup.Item,{asChild:!0,...rovingFocusGroupScope,active:isSelected,focusable:!disabled,children:jsx_runtime.jsx(import_primitive.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:import_compose_events.composeEventHandlers(props.onFocus,()=>{let isAutomaticActivation=context.activationMode!=="manual";if(!(isSelected||disabled)&&isAutomaticActivation)context.onValueChange(value)}),onKeyDown:import_compose_events.composeEventHandlers(props.onKeyDown,(event)=>{if([" ","Enter"].includes(event.key))context.onValueChange(value)}),onMouseDown:import_compose_events.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=import_react.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=import_react.useRef(isSelected);return import_react.useEffect(()=>{let rAF=requestAnimationFrame(()=>isMountAnimationPreventedRef.current=!1);return()=>cancelAnimationFrame(rAF)},[]),jsx_runtime.jsx(import_presence.Presence,{present:forceMount||isSelected,children:({present})=>jsx_runtime.jsx(import_primitive.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;