@styleless-ui/react/esm/Radio/Radio.js

Completely unstyled, headless and accessible React UI components.

var e=this&&this.__assign||function(){return e=Object.assign||function(e){for(var l,o=1,a=arguments.length;o<a;o++)for(var n in l=arguments[o])Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);return e},e.apply(this,arguments)},l=this&&this.__rest||function(e,l){var o={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&l.indexOf(a)<0&&(o[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(a=Object.getOwnPropertySymbols(e);n<a.length;n++)l.indexOf(a[n])<0&&Object.prototype.propertyIsEnumerable.call(e,a[n])&&(o[a[n]]=e[a[n]])}return o};import{jsx as o,Fragment as a,jsxs as n}from"react/jsx-runtime";import*as r from"react";import t from"../RadioGroup/context";import{componentWithForwardedRef as i,useCheckBase as s,useDeterministicId as d,useForkedRefs as c}from"../utils";import*as u from"./slots";var b=function(){return o("svg",e({"aria-hidden":"true",focusable:"false",viewBox:"0 0 8 8"},{children:o("circle",{cx:4,cy:4,r:4,fill:"currentColor",stroke:"none"})}))},f=i((function(i,f){var h=i.label,v=i.value,y=i.checkComponent,p=i.defaultChecked,m=i.id,g=i.classes,k=i.checked,C=i.autoFocus,w=void 0!==C&&C,B=i.disabled,L=void 0!==B&&B,O=i.onChange,R=i.onBlur,x=i.onFocus,j=i.onKeyDown,F=i.onKeyUp,K=l(i,["label","value","checkComponent","defaultChecked","id","classes","checked","autoFocus","disabled","onChange","onBlur","onFocus","onKeyDown","onKeyUp"]),E=r.useContext(t);if(E&&void 0===v)throw new Error(["[StylelessUI][Radio]: The `value` property is missing.","It's mandatory to provide a `value` property when <RadioGroup /> is a wrapper for <Radio />."].join("\n"));var I=s({value:v,groupCtx:E?{value:E.value,onChange:E.onChange,items:E.radios}:void 0,strategy:"radio-control",autoFocus:w,disabled:L,checked:k,defaultChecked:p,onChange:O,onBlur:R,onFocus:x,onKeyDown:j,onKeyUp:F}),_=d(m,"styleless-ui__radio"),U=_?"".concat(_,"__label"):void 0,D=r.useRef(null),P=c(f,D,I.handleControllerRef),S=function(e){var l={};if("string"==typeof e)l.visibleLabel=e;else if("screenReaderLabel"in e)l.srOnlyLabel=e.screenReaderLabel;else{if(!("labelledBy"in e))throw new Error(["[StylelessUI][Radio]: Invalid `label` property.","The `label` property must be either a `string` or in shape of `{ screenReaderLabel: string; } | { labelledBy: string; }`"].join("\n"));l.labelledBy=e.labelledBy}return l}(h),N={disabled:L,checked:I.checked,focusedVisible:I.isFocusedVisible},V="function"==typeof g?g(N):g;r.useEffect((function(){var e=S.visibleLabel&&U?document.getElementById(U):S.labelledBy?document.getElementById(S.labelledBy):null;if(e){var l=function(){var e;return null===(e=I.controllerRef.current)||void 0===e?void 0:e.click()};return e.addEventListener("click",l),function(){e.removeEventListener("click",l)}}}),[I.controllerRef,S.labelledBy,S.visibleLabel,U]);var G={"data-slot":u.Root,"data-disabled":N.disabled?"":void 0,"data-focus-visible":N.focusedVisible?"":void 0,"data-checked":N.checked?"":void 0};return n(a,{children:[o("button",e({},K,{id:_,role:"radio",className:null==V?void 0:V.root,type:"button",ref:function(e){P(e),e&&(null==E||E.registerRadio(v,D),E||(e.tabIndex=L?-1:0))},disabled:L,onFocus:I.handleFocus,onBlur:I.handleBlur,onKeyDown:I.handleKeyDown,onKeyUp:I.handleKeyUp,onClick:I.handleClick,"aria-checked":I.checked,"aria-label":S.srOnlyLabel,"aria-labelledby":S.visibleLabel?U:S.labelledBy},G,{children:I.checked&&o("div",e({className:null==V?void 0:V.check,"data-slot":u.Check,"aria-hidden":"true"},{children:null!=y?y:o(b,{})}))})),S.visibleLabel&&o("label",e({id:U,"data-slot":u.Label,className:null==V?void 0:V.label},{children:S.visibleLabel}))]})}));export default f;