@styleless-ui/react/Checkbox/Checkbox.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,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},__assign.apply(this,arguments)},__createBinding=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),__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 n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&__createBinding(t,e,n);return __setModuleDefault(t,e),t},__rest=this&&this.__rest||function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n},__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("../CheckGroup/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][Checkbox]: 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},_DefaultCheckIcon=function(){return(0,jsx_runtime_1.jsx)("svg",__assign({"aria-hidden":"true",focusable:"false",viewBox:"0 0 12 8"},{children:(0,jsx_runtime_1.jsx)("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"})}))},_DefaultIndeterminateIcon=function(){return(0,jsx_runtime_1.jsx)("svg",__assign({"aria-hidden":"true",focusable:"false",viewBox:"0 0 12 8"},{children:(0,jsx_runtime_1.jsx)("polyline",{fill:"none",stroke:"currentcolor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",points:"2 4 10 4"})}))},CheckboxBase=function(e,t){var n=e.label,r=e.value,o=e.checkComponent,l=e.id,i=e.classes,a=e.defaultChecked,s=e.checked,c=e.autoFocus,u=void 0!==c&&c,d=e.disabled,_=void 0!==d&&d,b=e.indeterminated,h=void 0!==b&&b,f=e.onChange,p=e.onBlur,v=e.onFocus,y=e.onKeyDown,m=e.onKeyUp,k=__rest(e,["label","value","checkComponent","id","classes","defaultChecked","checked","autoFocus","disabled","indeterminated","onChange","onBlur","onFocus","onKeyDown","onKeyUp"]),x=React.useContext(context_1.default);if(x&&void 0===r)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 j=(0,utils_1.useCheckBase)({value:r,autoFocus:u,disabled:_,checked:s,groupCtx:x,defaultChecked:a,onChange:f,onBlur:p,onFocus:v,onKeyDown:y,onKeyUp:m}),g=(0,utils_1.useDeterministicId)(l,"styleless-ui__checkbox"),C=g?"".concat(g,"__label"):void 0,B=(0,utils_1.useForkedRefs)(t,j.handleControllerRef),O=getLabelInfo(n),w={disabled:_,indeterminated:h,checked:j.checked,focusedVisible:j.isFocusedVisible},L="function"==typeof i?i(w):i;React.useEffect((function(){var e=O.visibleLabel&&C?document.getElementById(C):O.labelledBy?document.getElementById(O.labelledBy):null;if(e){var t=function(){var e;return null===(e=j.controllerRef.current)||void 0===e?void 0:e.click()};return e.addEventListener("click",t),function(){e.removeEventListener("click",t)}}}),[j.controllerRef,O.labelledBy,O.visibleLabel,C]);var I={"data-slot":Slots.Root,"data-disabled":w.disabled?"":void 0,"data-focus-visible":w.focusedVisible?"":void 0,"data-checked":w.checked?"":void 0};return(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsx)("button",__assign({},k,{id:g,className:null==L?void 0:L.root,ref:function(e){(B(e),e)&&(h&&(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:_,onFocus:j.handleFocus,onBlur:j.handleBlur,onKeyDown:j.handleKeyDown,onKeyUp:j.handleKeyUp,onClick:j.handleClick,tabIndex:_?-1:0,type:"button",role:"checkbox","aria-label":O.srOnlyLabel,"aria-checked":h&&!j.checked?"mixed":j.checked,"aria-labelledby":O.visibleLabel?C:O.labelledBy},I,{children:j.checked?(0,jsx_runtime_1.jsx)("div",__assign({className:null==L?void 0:L.check,"data-slot":Slots.Check,"aria-hidden":"true"},{children:null!=o?o:(0,jsx_runtime_1.jsx)(_DefaultCheckIcon,{})})):h?(0,jsx_runtime_1.jsx)("div",__assign({className:null==L?void 0:L.check,"data-slot":Slots.Check,"aria-hidden":"true"},{children:null!=o?o:(0,jsx_runtime_1.jsx)(_DefaultIndeterminateIcon,{})})):null})),O.visibleLabel&&(0,jsx_runtime_1.jsx)("span",__assign({id:C,"data-slot":Slots.Label,className:null==L?void 0:L.label},{children:O.visibleLabel}))]})},Checkbox=(0,utils_1.componentWithForwardedRef)(CheckboxBase);exports.default=Checkbox;