@styleless-ui/react/Toggle/Toggle.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,o=1,n=arguments.length;o<n;o++)for(var r in t=arguments[o])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},__assign.apply(this,arguments)},__createBinding=this&&this.__createBinding||(Object.create?function(e,t,o,n){void 0===n&&(n=o);var r=Object.getOwnPropertyDescriptor(t,o);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,n,r)}:function(e,t,o,n){void 0===n&&(n=o),e[n]=t[o]}),__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 o in e)"default"!==o&&Object.prototype.hasOwnProperty.call(e,o)&&__createBinding(t,e,o);return __setModuleDefault(t,e),t},__rest=this&&this.__rest||function(e,t){var o={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(o[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(n=Object.getOwnPropertySymbols(e);r<n.length;r++)t.indexOf(n[r])<0&&Object.prototype.propertyIsEnumerable.call(e,n[r])&&(o[n[r]]=e[n[r]])}return o},__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("../ToggleGroup/context")),utils_1=require("../utils"),Slots=__importStar(require("./slots")),ToggleBase=function(e,t){var o=e.value,n=e.children,r=e.className,i=e.defaultActive,a=e.active,l=e.autoFocus,s=void 0!==l&&l,u=e.disabled,c=void 0!==u&&u,d=e.onActiveChange,f=e.onBlur,_=e.onFocus,p=e.onKeyDown,g=e.onKeyUp,b=__rest(e,["value","children","className","defaultActive","active","autoFocus","disabled","onActiveChange","onBlur","onFocus","onKeyDown","onKeyUp"]),v=React.useContext(context_1.default);if(v&&void 0===o)throw new Error(["[StylelessUI][Toggle]: The `value` property is missing.","It's mandatory to provide a `value` property when <ToggleGroup /> is a wrapper for <Toggle />."].join("\n"));var h=(0,utils_1.useCheckBase)({value:o,autoFocus:s,disabled:c,checked:a,toggle:!0,keyboardActivationBehavior:null==v?void 0:v.keyboardActivationBehavior,strategy:(null==v?void 0:v.multiple)?"check-control":"radio-control",defaultChecked:i,enterKeyFunctionality:"check",groupCtx:v?{value:v.value,onChange:v.onChange,items:v.toggles}:void 0,onChange:d,onBlur:f,onFocus:_,onKeyDown:p,onKeyUp:g}),y=React.useRef(null),m=(0,utils_1.useForkedRefs)(t,y,h.handleControllerRef),O={disabled:c,active:h.checked,focusedVisible:h.isFocusedVisible},j="function"==typeof r?r(O):r,w="function"==typeof n?n(O):n,x={"data-slot":Slots.Root,"data-active":O.active?"":void 0,"data-disable":O.disabled?"":void 0,"data-focus-visible":O.focusedVisible?"":void 0};return(0,jsx_runtime_1.jsx)("button",__assign({},b,{className:j,type:"button",ref:function(e){(m(e),e)&&(null==v||v.registerToggle(o,y),v||(e.tabIndex=c?-1:0),(0,utils_1.computeAccessibleName)(e)||console.error(["[StylelessUI][Toggle]: Can't determine an accessible name.","It's mandatory to provide an accessible name for the component. Possible accessible names:",". Set `aria-label` attribute.",". Set `aria-labelledby` attribute.",". Set `title` attribute.",". Use an informative content.",". Use a <label> with `for` attribute referencing to this component."].join("\n")))},disabled:c,onFocus:h.handleFocus,onBlur:h.handleBlur,onKeyDown:h.handleKeyDown,onKeyUp:h.handleKeyUp,onClick:h.handleClick,"aria-pressed":h.checked},x,{children:w}))},Toggle=(0,utils_1.componentWithForwardedRef)(ToggleBase);exports.default=Toggle;