@loke/ui
Version:
2 lines (1 loc) • 6.84 kB
JavaScript
import{composeEventHandlers}from"@loke/ui/compose-events";import{useComposedRefs}from"@loke/ui/compose-refs";import{createContextScope}from"@loke/ui/context";import{Presence}from"@loke/ui/presence";import{Primitive}from"@loke/ui/primitive";import{usePrevious}from"@loke/ui/use-previous";import{useSize}from"@loke/ui/use-size";import{forwardRef,useEffect,useRef,useState}from"react";import{jsx,jsxs}from"react/jsx-runtime";var RADIO_NAME="Radio",[createRadioContext,createRadioScope]=createContextScope(RADIO_NAME),[RadioProvider,useRadioContext]=createRadioContext(RADIO_NAME),Radio=forwardRef((props,forwardedRef)=>{let{__scopeRadio,name,checked=!1,required,disabled,value="on",onCheck,form,...radioProps}=props,[button,setButton]=useState(null),composedRefs=useComposedRefs(forwardedRef,(node)=>setButton(node)),hasConsumerStoppedPropagationRef=useRef(!1),isFormControl=button?form||!!button.closest("form"):!0;return jsxs(RadioProvider,{checked,disabled,scope:__scopeRadio,children:[jsx(Primitive.button,{"aria-checked":checked,"data-disabled":disabled?"":void 0,"data-state":getState(checked),disabled,role:"radio",type:"button",value,...radioProps,onClick:composeEventHandlers(props.onClick,(event)=>{if(!checked)onCheck?.();if(isFormControl){if(hasConsumerStoppedPropagationRef.current=event.isPropagationStopped(),!hasConsumerStoppedPropagationRef.current)event.stopPropagation()}}),ref:composedRefs}),isFormControl&&jsx(RadioBubbleInput,{bubbles:!hasConsumerStoppedPropagationRef.current,checked,control:button,disabled,form,name,required,style:{transform:"translateX(-100%)"},value})]})});Radio.displayName=RADIO_NAME;var INDICATOR_NAME="RadioIndicator",RadioIndicator=forwardRef((props,forwardedRef)=>{let{__scopeRadio,forceMount,...indicatorProps}=props,context=useRadioContext(INDICATOR_NAME,__scopeRadio);return jsx(Presence,{present:forceMount||context.checked,children:jsx(Primitive.span,{"data-disabled":context.disabled?"":void 0,"data-state":getState(context.checked),...indicatorProps,ref:forwardedRef})})});RadioIndicator.displayName=INDICATOR_NAME;var BUBBLE_INPUT_NAME="RadioBubbleInput",RadioBubbleInput=forwardRef(({__scopeRadio,control,checked,bubbles=!0,...props},forwardedRef)=>{let ref=useRef(null),composedRefs=useComposedRefs(ref,forwardedRef),prevChecked=usePrevious(checked),controlSize=useSize(control);return useEffect(()=>{let input=ref.current;if(!input)return;let inputProto=window.HTMLInputElement.prototype,setChecked=Object.getOwnPropertyDescriptor(inputProto,"checked").set;if(prevChecked!==checked&&setChecked){let event=new Event("click",{bubbles});setChecked.call(input,checked),input.dispatchEvent(event)}},[prevChecked,checked,bubbles]),jsx("input",{"aria-hidden":!0,defaultChecked:checked,type:"radio",...props,ref:composedRefs,style:{...props.style,...controlSize,margin:0,opacity:0,pointerEvents:"none",position:"absolute"},tabIndex:-1})});RadioBubbleInput.displayName=BUBBLE_INPUT_NAME;function getState(checked){return checked?"checked":"unchecked"}import{composeEventHandlers as composeEventHandlers2}from"@loke/ui/compose-events";import{useComposedRefs as useComposedRefs2}from"@loke/ui/compose-refs";import{createContextScope as createContextScope2}from"@loke/ui/context";import{Primitive as Primitive2}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{forwardRef as forwardRef2,useEffect as useEffect2,useRef as useRef2}from"react";import{jsx as jsx2}from"react/jsx-runtime";var ARROW_KEYS=["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"],RADIO_GROUP_NAME="RadioGroup",[createRadioGroupContext,createRadioGroupScope]=createContextScope2(RADIO_GROUP_NAME,[createRovingFocusGroupScope,createRadioScope]),useRovingFocusGroupScope=createRovingFocusGroupScope(),useRadioScope=createRadioScope(),[RadioGroupProvider,useRadioGroupContext]=createRadioGroupContext(RADIO_GROUP_NAME),RadioGroup=forwardRef2((props,forwardedRef)=>{let{__scopeRadioGroup,name,defaultValue,value:valueProp,required=!1,disabled=!1,orientation,dir,loop=!0,onValueChange,...groupProps}=props,rovingFocusGroupScope=useRovingFocusGroupScope(__scopeRadioGroup),direction=useDirection(dir),[value,setValue]=useControllableState({caller:RADIO_GROUP_NAME,defaultProp:defaultValue??null,onChange:onValueChange,prop:valueProp});return jsx2(RadioGroupProvider,{disabled,name,onValueChange:setValue,required,scope:__scopeRadioGroup,value,children:jsx2(RovingFocusGroup.Root,{asChild:!0,...rovingFocusGroupScope,dir:direction,loop,orientation,children:jsx2(Primitive2.div,{"aria-orientation":orientation,"aria-required":required,"data-disabled":disabled?"":void 0,dir:direction,role:"radiogroup",...groupProps,ref:forwardedRef})})})});RadioGroup.displayName=RADIO_GROUP_NAME;var ITEM_NAME="RadioGroupItem",RadioGroupItem=forwardRef2((props,forwardedRef)=>{let{__scopeRadioGroup,disabled,...itemProps}=props,context=useRadioGroupContext(ITEM_NAME,__scopeRadioGroup),isDisabled=context.disabled||disabled,rovingFocusGroupScope=useRovingFocusGroupScope(__scopeRadioGroup),radioScope=useRadioScope(__scopeRadioGroup),ref=useRef2(null),composedRefs=useComposedRefs2(forwardedRef,ref),checked=context.value===itemProps.value,isArrowKeyPressedRef=useRef2(!1);return useEffect2(()=>{let handleKeyDown=(event)=>{if(ARROW_KEYS.includes(event.key))isArrowKeyPressedRef.current=!0},handleKeyUp=()=>isArrowKeyPressedRef.current=!1;return document.addEventListener("keydown",handleKeyDown),document.addEventListener("keyup",handleKeyUp),()=>{document.removeEventListener("keydown",handleKeyDown),document.removeEventListener("keyup",handleKeyUp)}},[]),jsx2(RovingFocusGroup.Item,{asChild:!0,...rovingFocusGroupScope,active:checked,focusable:!isDisabled,children:jsx2(Radio,{checked,disabled:isDisabled,required:context.required,...radioScope,...itemProps,name:context.name,onCheck:()=>context.onValueChange(itemProps.value),onFocus:composeEventHandlers2(itemProps.onFocus,()=>{if(isArrowKeyPressedRef.current)ref.current?.click()}),onKeyDown:composeEventHandlers2((event)=>{if(event.key==="Enter")event.preventDefault()}),ref:composedRefs})})});RadioGroupItem.displayName=ITEM_NAME;var INDICATOR_NAME2="RadioGroupIndicator",RadioGroupIndicator=forwardRef2((props,forwardedRef)=>{let{__scopeRadioGroup,...indicatorProps}=props,radioScope=useRadioScope(__scopeRadioGroup);return jsx2(RadioIndicator,{...radioScope,...indicatorProps,ref:forwardedRef})});RadioGroupIndicator.displayName=INDICATOR_NAME2;var Root2=RadioGroup,Item2=RadioGroupItem,Indicator=RadioGroupIndicator;export{createRadioScope,createRadioGroupScope,Root2 as Root,RadioIndicator,RadioGroupItem,RadioGroupIndicator,RadioGroup,Radio,Item2 as Item,Indicator};