2 lines
7.5 KiB
JavaScript
2 lines
7.5 KiB
JavaScript
"use client";import{useFocusRing as te}from"@react-aria/focus";import{useHover as be}from"@react-aria/interactions";import G,{createContext as re,useContext as ne,useMemo as ae,useReducer as fe,useRef as q,useState as me}from"react";import{useActivePress as Pe}from'../../hooks/use-active-press.js';import{useEvent as F}from'../../hooks/use-event.js';import{useId as le}from'../../hooks/use-id.js';import{useIsoMorphicEffect as W}from'../../hooks/use-iso-morphic-effect.js';import{useLatestValue as j}from'../../hooks/use-latest-value.js';import{useResolveButtonType as ye}from'../../hooks/use-resolve-button-type.js';import{useSlot as U}from'../../hooks/use-slot.js';import{useSyncRefs as H}from'../../hooks/use-sync-refs.js';import{FocusSentinel as xe}from'../../internal/focus-sentinel.js';import{Hidden as ge}from'../../internal/hidden.js';import{Focus as y,FocusResult as K,focusIn as I,sortByDomNode as w}from'../../utils/focus-management.js';import{match as O}from'../../utils/match.js';import{microTask as Ae}from'../../utils/micro-task.js';import{getActiveElement as Ee}from'../../utils/owner.js';import{RenderFeatures as oe,forwardRefWithAs as N,mergeProps as se,useRender as k}from'../../utils/render.js';import{StableCollection as Re,useStableCollectionIndex as ie}from'../../utils/stable-collection.js';import{Keys as x}from'../keyboard.js';var Le=(t=>(t[t.Forwards=0]="Forwards",t[t.Backwards=1]="Backwards",t))(Le||{}),_e=(l=>(l[l.Less=-1]="Less",l[l.Equal=0]="Equal",l[l.Greater=1]="Greater",l))(_e||{}),Se=(n=>(n[n.SetSelectedIndex=0]="SetSelectedIndex",n[n.RegisterTab=1]="RegisterTab",n[n.UnregisterTab=2]="UnregisterTab",n[n.RegisterPanel=3]="RegisterPanel",n[n.UnregisterPanel=4]="UnregisterPanel",n))(Se||{});let De={[0](e,r){var d;let t=w(e.tabs,u=>u.current),l=w(e.panels,u=>u.current),a=t.filter(u=>{var T;return!((T=u.current)!=null&&T.hasAttribute("disabled"))}),n={...e,tabs:t,panels:l};if(r.index<0||r.index>t.length-1){let u=O(Math.sign(r.index-e.selectedIndex),{[-1]:()=>1,[0]:()=>O(Math.sign(r.index),{[-1]:()=>0,[0]:()=>0,[1]:()=>1}),[1]:()=>0});if(a.length===0)return n;let T=O(u,{[0]:()=>t.indexOf(a[0]),[1]:()=>t.indexOf(a[a.length-1])});return{...n,selectedIndex:T===-1?e.selectedIndex:T}}let s=t.slice(0,r.index),f=[...t.slice(r.index),...s].find(u=>a.includes(u));if(!f)return n;let b=(d=t.indexOf(f))!=null?d:e.selectedIndex;return b===-1&&(b=e.selectedIndex),{...n,selectedIndex:b}},[1](e,r){if(e.tabs.includes(r.tab))return e;let t=e.tabs[e.selectedIndex],l=w([...e.tabs,r.tab],n=>n.current),a=e.selectedIndex;return e.info.current.isControlled||(a=l.indexOf(t),a===-1&&(a=e.selectedIndex)),{...e,tabs:l,selectedIndex:a}},[2](e,r){return{...e,tabs:e.tabs.filter(t=>t!==r.tab)}},[3](e,r){return e.panels.includes(r.panel)?e:{...e,panels:w([...e.panels,r.panel],t=>t.current)}},[4](e,r){return{...e,panels:e.panels.filter(t=>t!==r.panel)}}},z=re(null);z.displayName="TabsDataContext";function h(e){let r=ne(z);if(r===null){let t=new Error(`<${e} /> is missing a parent <Tab.Group /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(t,h),t}return r}let V=re(null);V.displayName="TabsActionsContext";function Q(e){let r=ne(V);if(r===null){let t=new Error(`<${e} /> is missing a parent <Tab.Group /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(t,Q),t}return r}function Fe(e,r){return O(r.type,De,e,r)}let Ie="div";function he(e,r){let{defaultIndex:t=0,vertical:l=!1,manual:a=!1,onChange:n,selectedIndex:s=null,...g}=e;const f=l?"vertical":"horizontal",b=a?"manual":"auto";let d=s!==null,u=j({isControlled:d}),T=H(r),[p,c]=fe(Fe,{info:u,selectedIndex:s!=null?s:t,tabs:[],panels:[]}),v=U({selectedIndex:p.selectedIndex}),m=j(n||(()=>{})),C=j(p.tabs),D=ae(()=>({orientation:f,activation:b,...p}),[f,b,p]),P=F(i=>(c({type:1,tab:i}),()=>c({type:2,tab:i}))),R=F(i=>(c({type:3,panel:i}),()=>c({type:4,panel:i}))),A=F(i=>{L.current!==i&&m.current(i),d||c({type:0,index:i})}),L=j(d?e.selectedIndex:p.selectedIndex),_=ae(()=>({registerTab:P,registerPanel:R,change:A}),[]);W(()=>{c({type:0,index:s!=null?s:t})},[s]),W(()=>{if(L.current===void 0||p.tabs.length<=0)return;let i=w(p.tabs,S=>S.current);i.some((S,$)=>p.tabs[$]!==S)&&A(i.indexOf(p.tabs[L.current]))});let J={ref:T},X=k();return G.createElement(Re,null,G.createElement(V.Provider,{value:_},G.createElement(z.Provider,{value:D},D.tabs.length<=0&&G.createElement(xe,{onFocus:()=>{var i,M;for(let S of C.current)if(((i=S.current)==null?void 0:i.tabIndex)===0)return(M=S.current)==null||M.focus(),!0;return!1}}),X({ourProps:J,theirProps:g,slot:v,defaultTag:Ie,name:"Tabs"}))))}let ve="div";function Ce(e,r){let{orientation:t,selectedIndex:l}=h("Tab.List"),a=H(r),n=U({selectedIndex:l}),s=e,g={ref:a,role:"tablist","aria-orientation":t};return k()({ourProps:g,theirProps:s,slot:n,defaultTag:ve,name:"Tabs.List"})}let Me="button";function Ge(e,r){var Y,Z;let t=le(),{id:l=`headlessui-tabs-tab-${t}`,disabled:a=!1,autoFocus:n=!1,...s}=e,{orientation:g,activation:f,selectedIndex:b,tabs:d,panels:u}=h("Tab"),T=Q("Tab"),p=h("Tab"),[c,v]=me(null),m=q(null),C=H(m,r,v);W(()=>T.registerTab(m),[T,m]);let D=ie("tabs"),P=d.indexOf(m);P===-1&&(P=D);let R=P===b,A=F(o=>{let E=o();if(E===K.Success&&f==="auto"){let ee=Ee(m.current),B=p.tabs.findIndex(ce=>ce.current===ee);B!==-1&&T.change(B)}return E}),L=F(o=>{let E=d.map(B=>B.current).filter(Boolean);if(o.key===x.Space||o.key===x.Enter){o.preventDefault(),o.stopPropagation(),T.change(P);return}switch(o.key){case x.Home:case x.PageUp:return o.preventDefault(),o.stopPropagation(),A(()=>I(E,y.First));case x.End:case x.PageDown:return o.preventDefault(),o.stopPropagation(),A(()=>I(E,y.Last))}if(A(()=>O(g,{vertical(){return o.key===x.ArrowUp?I(E,y.Previous|y.WrapAround):o.key===x.ArrowDown?I(E,y.Next|y.WrapAround):K.Error},horizontal(){return o.key===x.ArrowLeft?I(E,y.Previous|y.WrapAround):o.key===x.ArrowRight?I(E,y.Next|y.WrapAround):K.Error}}))===K.Success)return o.preventDefault()}),_=q(!1),J=F(()=>{var o;_.current||(_.current=!0,(o=m.current)==null||o.focus({preventScroll:!0}),T.change(P),Ae(()=>{_.current=!1}))}),X=F(o=>{o.preventDefault()}),{isFocusVisible:i,focusProps:M}=te({autoFocus:n}),{isHovered:S,hoverProps:$}=be({isDisabled:a}),{pressed:pe,pressProps:ue}=Pe({disabled:a}),Te=U({selected:R,hover:S,active:pe,focus:i,autofocus:n,disabled:a}),de=se({ref:C,onKeyDown:L,onMouseDown:X,onClick:J,id:l,role:"tab",type:ye(e,c),"aria-controls":(Z=(Y=u[P])==null?void 0:Y.current)==null?void 0:Z.id,"aria-selected":R,tabIndex:R?0:-1,disabled:a||void 0,autoFocus:n},M,$,ue);return k()({ourProps:de,theirProps:s,slot:Te,defaultTag:Me,name:"Tabs.Tab"})}let Ue="div";function He(e,r){let{selectedIndex:t}=h("Tab.Panels"),l=H(r),a=U({selectedIndex:t}),n=e,s={ref:l};return k()({ourProps:s,theirProps:n,slot:a,defaultTag:Ue,name:"Tabs.Panels"})}let we="div",Oe=oe.RenderStrategy|oe.Static;function Ne(e,r){var R,A,L,_;let t=le(),{id:l=`headlessui-tabs-panel-${t}`,tabIndex:a=0,...n}=e,{selectedIndex:s,tabs:g,panels:f}=h("Tab.Panel"),b=Q("Tab.Panel"),d=q(null),u=H(d,r);W(()=>b.registerPanel(d),[b,d]);let T=ie("panels"),p=f.indexOf(d);p===-1&&(p=T);let c=p===s,{isFocusVisible:v,focusProps:m}=te(),C=U({selected:c,focus:v}),D=se({ref:u,id:l,role:"tabpanel","aria-labelledby":(A=(R=g[p])==null?void 0:R.current)==null?void 0:A.id,tabIndex:c?a:-1},m),P=k();return!c&&((L=n.unmount)==null||L)&&!((_=n.static)!=null&&_)?G.createElement(ge,{"aria-hidden":"true",...D}):P({ourProps:D,theirProps:n,slot:C,defaultTag:we,features:Oe,visible:c,name:"Tabs.Panel"})}let ke=N(Ge),Be=N(he),We=N(Ce),je=N(He),Ke=N(Ne),dt=Object.assign(ke,{Group:Be,List:We,Panels:je,Panel:Ke});export{dt as Tab,Be as TabGroup,We as TabList,Ke as TabPanel,je as TabPanels};
|