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

Completely unstyled, headless and accessible React UI components.

"use strict";var __assign=this&&this.__assign||function(){return __assign=Object.assign||function(e){for(var t,l=1,r=arguments.length;l<r;l++)for(var n in t=arguments[l])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e},__assign.apply(this,arguments)},__createBinding=this&&this.__createBinding||(Object.create?function(e,t,l,r){void 0===r&&(r=l);var n=Object.getOwnPropertyDescriptor(t,l);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[l]}}),Object.defineProperty(e,r,n)}:function(e,t,l,r){void 0===r&&(r=l),e[r]=t[l]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var l in e)"default"!==l&&Object.prototype.hasOwnProperty.call(e,l)&&__createBinding(t,e,l);return __setModuleDefault(t,e),t},__rest=this&&this.__rest||function(e,t){var l={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(l[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(r=Object.getOwnPropertySymbols(e);n<r.length;n++)t.indexOf(r[n])<0&&Object.prototype.propertyIsEnumerable.call(e,r[n])&&(l[r[n]]=e[r[n]])}return l},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});var jsx_runtime_1=require("react/jsx-runtime"),React=__importStar(require("react")),context_1=__importDefault(require("../RadioGroup/context")),utils_1=require("../utils"),Slots=__importStar(require("./slots")),getLabelInfo=function(e){var t={};if("string"==typeof e)t.visibleLabel=e;else if("screenReaderLabel"in e)t.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"));t.labelledBy=e.labelledBy}return t},_DefaultCheck=function(){return(0,jsx_runtime_1.jsx)("svg",__assign({"aria-hidden":"true",focusable:"false",viewBox:"0 0 8 8"},{children:(0,jsx_runtime_1.jsx)("circle",{cx:4,cy:4,r:4,fill:"currentColor",stroke:"none"})}))},RadioBase=function(e,t){var l=e.label,r=e.value,n=e.checkComponent,i=e.defaultChecked,o=e.id,a=e.classes,s=e.checked,u=e.autoFocus,c=void 0!==u&&u,d=e.disabled,_=void 0!==d&&d,f=e.onChange,b=e.onBlur,h=e.onFocus,p=e.onKeyDown,v=e.onKeyUp,y=__rest(e,["label","value","checkComponent","defaultChecked","id","classes","checked","autoFocus","disabled","onChange","onBlur","onFocus","onKeyDown","onKeyUp"]),g=React.useContext(context_1.default);if(g&&void 0===r)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 m=(0,utils_1.useCheckBase)({value:r,groupCtx:g?{value:g.value,onChange:g.onChange,items:g.radios}:void 0,strategy:"radio-control",autoFocus:c,disabled:_,checked:s,defaultChecked:i,onChange:f,onBlur:b,onFocus:h,onKeyDown:p,onKeyUp:v}),j=(0,utils_1.useDeterministicId)(o,"styleless-ui__radio"),x=j?"".concat(j,"__label"):void 0,k=React.useRef(null),R=(0,utils_1.useForkedRefs)(t,k,m.handleControllerRef),O=getLabelInfo(l),B={disabled:_,checked:m.checked,focusedVisible:m.isFocusedVisible},w="function"==typeof a?a(B):a;React.useEffect((function(){var e=O.visibleLabel&&x?document.getElementById(x):O.labelledBy?document.getElementById(O.labelledBy):null;if(e){var t=function(){var e;return null===(e=m.controllerRef.current)||void 0===e?void 0:e.click()};return e.addEventListener("click",t),function(){e.removeEventListener("click",t)}}}),[m.controllerRef,O.labelledBy,O.visibleLabel,x]);var C={"data-slot":Slots.Root,"data-disabled":B.disabled?"":void 0,"data-focus-visible":B.focusedVisible?"":void 0,"data-checked":B.checked?"":void 0};return(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsx)("button",__assign({},y,{id:j,role:"radio",className:null==w?void 0:w.root,type:"button",ref:function(e){R(e),e&&(null==g||g.registerRadio(r,k),g||(e.tabIndex=_?-1:0))},disabled:_,onFocus:m.handleFocus,onBlur:m.handleBlur,onKeyDown:m.handleKeyDown,onKeyUp:m.handleKeyUp,onClick:m.handleClick,"aria-checked":m.checked,"aria-label":O.srOnlyLabel,"aria-labelledby":O.visibleLabel?x:O.labelledBy},C,{children:m.checked&&(0,jsx_runtime_1.jsx)("div",__assign({className:null==w?void 0:w.check,"data-slot":Slots.Check,"aria-hidden":"true"},{children:null!=n?n:(0,jsx_runtime_1.jsx)(_DefaultCheck,{})}))})),O.visibleLabel&&(0,jsx_runtime_1.jsx)("label",__assign({id:x,"data-slot":Slots.Label,className:null==w?void 0:w.label},{children:O.visibleLabel}))]})},Radio=(0,utils_1.componentWithForwardedRef)(RadioBase);exports.default=Radio;