@progress/kendo-react-inputs/checkbox/Checkbox.js

React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ge=require("react"),e=require("prop-types"),o=require("@progress/kendo-react-common"),ye=require("@progress/kendo-react-intl"),I=require("../messages/index.js");function xe(c){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const r in c)if(r!=="default"){const m=Object.getOwnPropertyDescriptor(c,r);Object.defineProperty(d,r,m.get?m:{enumerable:!0,get:()=>c[r]})}}return d.default=c,Object.freeze(d)}const t=xe(ge),A=o.createPropsContext(),M=t.forwardRef((c,d)=>{const r=o.usePropsContext(A,c),{ariaDescribedBy:m,ariaLabelledBy:W,checked:O,className:G,labelClassName:J,children:Q,defaultChecked:X,disabled:n,defaultValue:Y,id:B,size:h=$.size,rounded:v=$.rounded,label:q,labelPlacement:z,name:Z,labelOptional:ee,onChange:C,onFocus:g,onBlur:y,tabIndex:te,value:i,required:p,valid:D,validationMessage:F,validityStyles:T,autoFocus:ae,visited:Pe,touched:Ve,modified:Ee,...ne}=r,l=t.useRef(null),K=t.useCallback(()=>{l.current&&l.current.focus()},[]),u=t.useCallback(()=>({element:l.current,focus:K,get name(){return l.current&&l.current.name}}),[K]);t.useImperativeHandle(d,u);const[oe,le]=t.useState(X),[se,ce]=t.useState(Y),R=typeof i=="boolean"||i===null,x=O!==void 0,b=R,P=b?i:se,V=x?O:b?void 0:oe,w=V===void 0&&P,j=w?P:V,k=w||b?i===null?i:void 0:i||P,re=j===null||k===null,L=o.useId(),ie=ye.useLocalization(),_=a=>ie.toLanguageString(a,I.messages[a]),H=_(I.checkboxValidation),ue=_(I.checkboxOptionalText),E=D!==void 0?D:p?!!V:!0;t.useEffect(()=>{l.current&&l.current.setCustomValidity&&l.current.setCustomValidity(E?"":F||H)},[E,F,H]);const f=t.useCallback((a,s)=>{!b&&!n&&(ce(s),!x&&!n&&le(s)),C&&!n&&o.dispatchEvent(C,a,{...u(),value:s},{value:s})},[x,n,C,b,u]),de=t.useCallback(a=>{const s=a.target.checked;f(a,s)},[f,i]),be=t.useCallback(a=>{if(n)return;const{keyCode:s}=a,Ce=a.currentTarget.checked;s===o.Keys.space&&(a.preventDefault(),a.stopPropagation(),f(a,!Ce))},[n,f]),me=t.useCallback(a=>{if(n)return;const{keyCode:s}=a;s===o.Keys.space&&a.preventDefault()},[n]),pe=t.useCallback(a=>{g&&!n&&o.dispatchEvent(g,a,u(),void 0)},[g,n,u]),ke=t.useCallback(a=>{y&&!n&&o.dispatchEvent(y,a,u(),void 0)},[y,n,u]),fe=o.useDir(l,r.dir),he=o.classNames("k-checkbox-wrap",G),U={type:"checkbox",className:o.classNames("k-checkbox",{[`k-checkbox-${o.kendoThemeMaps.sizeMap[h]||h}`]:h,[`k-rounded-${o.kendoThemeMaps.roundedMap[v]||v}`]:v,"k-indeterminate":re,"k-disabled":n,"k-invalid k-invalid":!(E||T!==void 0||T===!0)}),ref:l,name:Z,id:B||L,disabled:n,required:p!==void 0?p:!1,tabIndex:o.getTabIndex(te,n),role:"checkbox",checked:!!j,"aria-describedby":m,"aria-labelledby":W,"aria-disabled":n||void 0,"aria-required":p,autoFocus:ae,...ne,onChange:de,onKeyDown:be,onKeyUp:me,onFocus:pe,onBlur:ke},ve=k===void 0?t.createElement("input",{...U}):t.createElement("input",{...U,value:R?void 0:k===null?"":k}),N=q!==void 0?t.createElement("label",{className:o.classNames("k-checkbox-label",J),htmlFor:B||L,style:{userSelect:"none"}},q,ee&&t.createElement("span",{className:"k-label-optional"},ue)):null,S=t.createElement("span",{className:he},ve,Q);return t.createElement(t.Fragment,null,z==="before"?t.createElement("div",{dir:"rtl"},S,N):z==="after"?t.createElement("div",{dir:"ltr"},S,N):t.createElement("div",{dir:fe},S,N))});M.propTypes={checked:e.bool,className:e.string,defaultChecked:e.bool,defaultValue:e.any,dir:e.string,disabled:e.bool,id:e.string,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large"]),ariaLabelledBy:e.string,ariaDescribedBy:e.string,label:e.any,labelPlacement:e.string,labelOptional:e.bool,name:e.string,tabIndex:e.number,value:e.any,validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,autoFocus:e.bool,onChange:e.func,onFocus:e.func,onBlur:e.func};const $={size:"medium",rounded:"medium",autoFocus:!1};M.displayName="KendoCheckbox";exports.Checkbox=M;exports.CheckboxPropsContext=A;