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

Completely unstyled, headless and accessible React UI components.

var e=this&&this.__assign||function(){return e=Object.assign||function(e){for(var l,n=1,a=arguments.length;n<a;n++)for(var o in l=arguments[n])Object.prototype.hasOwnProperty.call(l,o)&&(e[o]=l[o]);return e},e.apply(this,arguments)},l=this&&this.__rest||function(e,l){var n={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&l.indexOf(a)<0&&(n[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(a=Object.getOwnPropertySymbols(e);o<a.length;o++)l.indexOf(a[o])<0&&Object.prototype.propertyIsEnumerable.call(e,a[o])&&(n[a[o]]=e[a[o]])}return n};import{jsx as n,jsxs as a,Fragment as o}from"react/jsx-runtime";import*as t from"react";import{componentWithForwardedRef as r,useCheckBase as i,useDeterministicId as s,useForkedRefs as d}from"../utils";import*as c from"./slots";var u=r((function(r,u){var b=r.label,h=r.thumbComponent,f=r.trackComponent,y=r.id,p=r.classes,v=r.defaultChecked,m=r.checked,k=r.autoFocus,g=void 0!==k&&k,B=r.disabled,w=void 0!==B&&B,L=r.onChange,O=r.onBlur,C=r.onFocus,j=r.onKeyDown,F=r.onKeyUp,K=l(r,["label","thumbComponent","trackComponent","id","classes","defaultChecked","checked","autoFocus","disabled","onChange","onBlur","onFocus","onKeyDown","onKeyUp"]),_=i({autoFocus:g,disabled:w,checked:m,defaultChecked:v,onChange:L,onBlur:O,onFocus:C,onKeyDown:j,onKeyUp:F}),x=s(y,"styleless-ui__switch"),E=x?"".concat(x,"__label"):void 0,R=d(u,_.handleControllerRef),I=function(e){var l={};if("string"==typeof e)l.visibleLabel=e;else if("screenReaderLabel"in e)l.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"));l.labelledBy=e.labelledBy}return l}(b),U={disabled:w,checked:_.checked,focusedVisible:_.isFocusedVisible},D="function"==typeof p?p(U):p;t.useEffect((function(){var e=I.visibleLabel&&E?document.getElementById(E):I.labelledBy?document.getElementById(I.labelledBy):null;if(e){var l=function(){var e;return null===(e=_.controllerRef.current)||void 0===e?void 0:e.click()};return e.addEventListener("click",l),function(){e.removeEventListener("click",l)}}}),[_.controllerRef,I.labelledBy,I.visibleLabel,E]);var N={"data-slot":c.Root,"data-disabled":U.disabled?"":void 0,"data-focus-visible":U.focusedVisible?"":void 0,"data-checked":U.checked?"":void 0};return a(o,{children:[I.visibleLabel&&n("span",e({id:E,"data-slot":c.Label,className:null==D?void 0:D.label},{children:I.visibleLabel})),a("button",e({},K,{id:x,role:"switch",className:null==D?void 0:D.root,type:"button",tabIndex:w?-1:0,ref:R,disabled:w,onFocus:_.handleFocus,onBlur:_.handleBlur,onKeyDown:_.handleKeyDown,onKeyUp:_.handleKeyUp,onClick:_.handleClick,"aria-checked":_.checked,"aria-label":I.srOnlyLabel,"aria-labelledby":I.visibleLabel?E:I.labelledBy},N,{children:[n("div",e({className:null==D?void 0:D.track,"data-slot":c.Track,"aria-hidden":"true"},{children:f})),n("div",e({className:null==D?void 0:D.thumb,"data-slot":c.Thumb,"aria-hidden":"true"},{children:h}))]}))]})}));export default u;