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

Completely unstyled, headless and accessible React UI components.

var e=this&&this.__assign||function(){return e=Object.assign||function(e){for(var r,l=1,t=arguments.length;l<t;l++)for(var a in r=arguments[l])Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a]);return e},e.apply(this,arguments)},r=this&&this.__rest||function(e,r){var l={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&r.indexOf(t)<0&&(l[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(t=Object.getOwnPropertySymbols(e);a<t.length;a++)r.indexOf(t[a])<0&&Object.prototype.propertyIsEnumerable.call(e,t[a])&&(l[t[a]]=e[t[a]])}return l};import{jsx as l,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{componentWithForwardedRef as n,useControlledProp as i,useDeterministicId as o,useForkedRefs as s}from"../utils";import u from"./context";import*as d from"./slots";var c=n((function(n,c){var f=n.label,b=n.children,v=n.id,p=n.classes,h=n.defaultValue,y=n.value,g=n.multiple,m=void 0!==g&&g,O=n.keyboardActivationBehavior,w=n.onChange,A=r(n,["label","children","id","classes","defaultValue","value","multiple","keyboardActivationBehavior","onChange"]),j=a.useRef(null),x=s(c,j),L=o(v,"styleless-ui__toggle-group"),B="".concat(L,"__label"),_=function(e){var r={};if("string"==typeof e)r.visibleLabel=e;else if("screenReaderLabel"in e)r.srOnlyLabel=e.screenReaderLabel;else{if(!("labelledBy"in e))throw new Error(["[StylelessUI][ToggleGroup]: Invalid `label` property.","The `label` property must be either a `string` or in shape of `{ screenReaderLabel: string; } | { labelledBy: string; }`"].join("\n"));r.labelledBy=e.labelledBy}return r}(f),T=i(y,h,m?[]:""),E=T[0],I=T[1];if(m&&!Array.isArray(E))throw new Error("[StylelessUI][ToggleGroup]: The `value` and `defaultValue` should be an empty array or array of strings when `multiple={true}.`");if(!m&&"string"!=typeof E)throw new Error("[StylelessUI][ToggleGroup]: The `value` and `defaultValue` should be string when `multiple={false}.`");var P=[];return a.useEffect((function(){var e,r;if(j.current){P.forEach((function(e){var r=e[0],l=e[1];if(l.current){var t=Array.isArray(E)?E.includes(r):E===r,a=l.current.hasAttribute("disabled");l.current.tabIndex=a?-1:t?0:-1}}));var l=P.filter((function(e){var r;e[0];return"0"!==(null===(r=e[1].current)||void 0===r?void 0:r.getAttribute("tabindex"))}));if(l.length===P.length){var t=null!==(e=P.find((function(e){var r;e[0];return!(null===(r=e[1].current)||void 0===r?void 0:r.hasAttribute("disabled"))})))&&void 0!==e?e:null;if(t){t[0];null===(r=t[1].current)||void 0===r||r.setAttribute("tabindex","0")}}}})),l("div",e({},A,{id:L,ref:x,className:null==p?void 0:p.root,"data-slot":d.Root},{children:t(u.Provider,e({value:{multiple:m,value:E,toggles:P,keyboardActivationBehavior:null!=O?O:"manual",onChange:function(e,r){var l=m?e?E.concat(r):E.filter((function(e){return e!==r})):e?r:"";I(l),null==w||w(l)},registerToggle:function(e,r){P.some((function(r){return r[0]===e}))||P.push([e,r])}}},{children:[_.visibleLabel&&l("span",e({id:B,"data-slot":d.Label,className:null==p?void 0:p.label},{children:_.visibleLabel})),l("div",e({role:"group","data-slot":d.Group,className:null==p?void 0:p.group,"aria-label":_.srOnlyLabel,"aria-labelledby":_.visibleLabel?B:_.labelledBy},{children:b}))]}))}))}));export default c;