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

Completely unstyled, headless and accessible React UI components.

var e=this&&this.__assign||function(){return e=Object.assign||function(e){for(var o,l=1,n=arguments.length;l<n;l++)for(var r in o=arguments[l])Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r]);return e},e.apply(this,arguments)},o=this&&this.__rest||function(e,o){var l={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&o.indexOf(n)<0&&(l[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(n=Object.getOwnPropertySymbols(e);r<n.length;r++)o.indexOf(n[r])<0&&Object.prototype.propertyIsEnumerable.call(e,n[r])&&(l[n[r]]=e[n[r]])}return l};import{jsx as l,Fragment as n,jsxs as r}from"react/jsx-runtime";import*as t from"react";import a from"../CheckGroup/context";import{componentWithForwardedRef as i,useCheckBase as s,useDeterministicId as c,useForkedRefs as d}from"../utils";import*as u from"./slots";var b=function(){return l("svg",e({"aria-hidden":"true",focusable:"false",viewBox:"0 0 12 8"},{children:l("polyline",{fill:"none",stroke:"currentcolor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",transform:"translate(5.974874, 2.353553) rotate(-45.000000) translate(-5.974874, -2.353553) ",points:"2 0.292893219 2 4.29289322 9.94974747 4.41421356"})}))},h=function(){return l("svg",e({"aria-hidden":"true",focusable:"false",viewBox:"0 0 12 8"},{children:l("polyline",{fill:"none",stroke:"currentcolor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",points:"2 4 10 4"})}))},f=i((function(i,f){var p=i.label,v=i.value,y=i.checkComponent,k=i.id,m=i.classes,x=i.defaultChecked,g=i.checked,C=i.autoFocus,w=void 0!==C&&C,L=i.disabled,B=void 0!==L&&L,O=i.indeterminated,j=void 0!==O&&O,F=i.onChange,I=i.onBlur,K=i.onFocus,E=i.onKeyDown,U=i.onKeyUp,_=o(i,["label","value","checkComponent","id","classes","defaultChecked","checked","autoFocus","disabled","indeterminated","onChange","onBlur","onFocus","onKeyDown","onKeyUp"]),R=t.useContext(a);if(R&&void 0===v)throw new Error(["[StylelessUI][Checkbox]: The `value` property is missing.","It's mandatory to provide a `value` property when <CheckGroup /> is a wrapper for <Checkbox />."].join("\n"));var D=s({value:v,autoFocus:w,disabled:B,checked:g,groupCtx:R,defaultChecked:x,onChange:F,onBlur:I,onFocus:K,onKeyDown:E,onKeyUp:U}),S=c(k,"styleless-ui__checkbox"),N=S?"".concat(S,"__label"):void 0,P=d(f,D.handleControllerRef),V=function(e){var o={};if("string"==typeof e)o.visibleLabel=e;else if("screenReaderLabel"in e)o.srOnlyLabel=e.screenReaderLabel;else{if(!("labelledBy"in e))throw new Error(["[StylelessUI][Checkbox]: Invalid `label` property.","The `label` property must be either a `string` or in shape of `{ screenReaderLabel: string; } | { labelledBy: string; }`"].join("\n"));o.labelledBy=e.labelledBy}return o}(p),G={disabled:B,indeterminated:j,checked:D.checked,focusedVisible:D.isFocusedVisible},T="function"==typeof m?m(G):m;t.useEffect((function(){var e=V.visibleLabel&&N?document.getElementById(N):V.labelledBy?document.getElementById(V.labelledBy):null;if(e){var o=function(){var e;return null===(e=D.controllerRef.current)||void 0===e?void 0:e.click()};return e.addEventListener("click",o),function(){e.removeEventListener("click",o)}}}),[D.controllerRef,V.labelledBy,V.visibleLabel,N]);var W={"data-slot":u.Root,"data-disabled":G.disabled?"":void 0,"data-focus-visible":G.focusedVisible?"":void 0,"data-checked":G.checked?"":void 0};return r(n,{children:[l("button",e({},_,{id:S,className:null==T?void 0:T.root,ref:function(e){(P(e),e)&&(j&&(e.getAttribute("aria-controls")||console.warn("[StylelessUI][Checkbox]: You must provide the set of checkbox IDs controlled by the mixed (`indeterminate`) checkbox by the `aria-controls` property.")))},disabled:B,onFocus:D.handleFocus,onBlur:D.handleBlur,onKeyDown:D.handleKeyDown,onKeyUp:D.handleKeyUp,onClick:D.handleClick,tabIndex:B?-1:0,type:"button",role:"checkbox","aria-label":V.srOnlyLabel,"aria-checked":j&&!D.checked?"mixed":D.checked,"aria-labelledby":V.visibleLabel?N:V.labelledBy},W,{children:D.checked?l("div",e({className:null==T?void 0:T.check,"data-slot":u.Check,"aria-hidden":"true"},{children:null!=y?y:l(b,{})})):j?l("div",e({className:null==T?void 0:T.check,"data-slot":u.Check,"aria-hidden":"true"},{children:null!=y?y:l(h,{})})):null})),V.visibleLabel&&l("span",e({id:N,"data-slot":u.Label,className:null==T?void 0:T.label},{children:V.visibleLabel}))]})}));export default f;