@styleless-ui/react/Switch/Switch.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,n=arguments.length;l<n;l++)for(var i in t=arguments[l])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},__assign.apply(this,arguments)},__createBinding=this&&this.__createBinding||(Object.create?function(e,t,l,n){void 0===n&&(n=l);var i=Object.getOwnPropertyDescriptor(t,l);i&&!("get"in i?!t.__esModule:i.writable||i.configurable)||(i={enumerable:!0,get:function(){return t[l]}}),Object.defineProperty(e,n,i)}:function(e,t,l,n){void 0===n&&(n=l),e[n]=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 n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(l[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(e);i<n.length;i++)t.indexOf(n[i])<0&&Object.prototype.propertyIsEnumerable.call(e,n[i])&&(l[n[i]]=e[n[i]])}return l};Object.defineProperty(exports,"__esModule",{value:!0});var jsx_runtime_1=require("react/jsx-runtime"),React=__importStar(require("react")),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][Switch]: 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},SwitchBase=function(e,t){var l=e.label,n=e.thumbComponent,i=e.trackComponent,r=e.id,a=e.classes,o=e.defaultChecked,s=e.checked,c=e.autoFocus,d=void 0!==c&&c,u=e.disabled,b=void 0!==u&&u,_=e.onChange,f=e.onBlur,h=e.onFocus,p=e.onKeyDown,y=e.onKeyUp,v=__rest(e,["label","thumbComponent","trackComponent","id","classes","defaultChecked","checked","autoFocus","disabled","onChange","onBlur","onFocus","onKeyDown","onKeyUp"]),m=(0,utils_1.useCheckBase)({autoFocus:d,disabled:b,checked:s,defaultChecked:o,onChange:_,onBlur:f,onFocus:h,onKeyDown:p,onKeyUp:y}),g=(0,utils_1.useDeterministicId)(r,"styleless-ui__switch"),j=g?"".concat(g,"__label"):void 0,k=(0,utils_1.useForkedRefs)(t,m.handleControllerRef),O=getLabelInfo(l),w={disabled:b,checked:m.checked,focusedVisible:m.isFocusedVisible},B="function"==typeof a?a(w):a;React.useEffect((function(){var e=O.visibleLabel&&j?document.getElementById(j):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,j]);var x={"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:[O.visibleLabel&&(0,jsx_runtime_1.jsx)("span",__assign({id:j,"data-slot":Slots.Label,className:null==B?void 0:B.label},{children:O.visibleLabel})),(0,jsx_runtime_1.jsxs)("button",__assign({},v,{id:g,role:"switch",className:null==B?void 0:B.root,type:"button",tabIndex:b?-1:0,ref:k,disabled:b,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?j:O.labelledBy},x,{children:[(0,jsx_runtime_1.jsx)("div",__assign({className:null==B?void 0:B.track,"data-slot":Slots.Track,"aria-hidden":"true"},{children:i})),(0,jsx_runtime_1.jsx)("div",__assign({className:null==B?void 0:B.thumb,"data-slot":Slots.Thumb,"aria-hidden":"true"},{children:n}))]}))]})},Switch=(0,utils_1.componentWithForwardedRef)(SwitchBase);exports.default=Switch;