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

Completely unstyled, headless and accessible React UI components.

var e=this&&this.__assign||function(){return e=Object.assign||function(e){for(var o,t=1,n=arguments.length;t<n;t++)for(var a in o=arguments[t])Object.prototype.hasOwnProperty.call(o,a)&&(e[a]=o[a]);return e},e.apply(this,arguments)},o=this&&this.__rest||function(e,o){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&o.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)o.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(t[n[a]]=e[n[a]])}return t};import{jsx as t}from"react/jsx-runtime";import*as n from"react";import a from"../ToggleGroup/context";import{componentWithForwardedRef as r,computeAccessibleName as i,useCheckBase as l,useForkedRefs as s}from"../utils";import*as c from"./slots";var u=r((function(r,u){var d=r.value,p=r.children,v=r.className,f=r.defaultActive,b=r.active,h=r.autoFocus,y=void 0!==h&&h,g=r.disabled,m=void 0!==g&&g,w=r.onActiveChange,C=r.onBlur,O=r.onFocus,K=r.onKeyDown,j=r.onKeyUp,k=o(r,["value","children","className","defaultActive","active","autoFocus","disabled","onActiveChange","onBlur","onFocus","onKeyDown","onKeyUp"]),F=n.useContext(a);if(F&&void 0===d)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 x=l({value:d,autoFocus:y,disabled:m,checked:b,toggle:!0,keyboardActivationBehavior:null==F?void 0:F.keyboardActivationBehavior,strategy:(null==F?void 0:F.multiple)?"check-control":"radio-control",defaultChecked:f,enterKeyFunctionality:"check",groupCtx:F?{value:F.value,onChange:F.onChange,items:F.toggles}:void 0,onChange:w,onBlur:C,onFocus:O,onKeyDown:K,onKeyUp:j}),U=n.useRef(null),B=s(u,U,x.handleControllerRef),S={disabled:m,active:x.checked,focusedVisible:x.isFocusedVisible},T="function"==typeof v?v(S):v,A="function"==typeof p?p(S):p,I={"data-slot":c.Root,"data-active":S.active?"":void 0,"data-disable":S.disabled?"":void 0,"data-focus-visible":S.focusedVisible?"":void 0};return t("button",e({},k,{className:T,type:"button",ref:function(e){(B(e),e)&&(null==F||F.registerToggle(d,U),F||(e.tabIndex=m?-1:0),i(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:m,onFocus:x.handleFocus,onBlur:x.handleBlur,onKeyDown:x.handleKeyDown,onKeyUp:x.handleKeyUp,onClick:x.handleClick,"aria-pressed":x.checked},I,{children:A}))}));export default u;