@styleless-ui/react/Button/Button.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,n=1,o=arguments.length;n<o;n++)for(var i in t=arguments[n])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,n,o){void 0===o&&(o=n);var i=Object.getOwnPropertyDescriptor(t,n);i&&!("get"in i?!t.__esModule:i.writable||i.configurable)||(i={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,o,i)}:function(e,t,n,o){void 0===o&&(o=n),e[o]=t[n]}),__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 n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&__createBinding(t,e,n);return __setModuleDefault(t,e),t},__rest=this&&this.__rest||function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(e);i<o.length;i++)t.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(e,o[i])&&(n[o[i]]=e[o[i]])}return n};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")),ButtonBase=function(e,t){var n=e.className,o=e.children,i=e.id,r=e.as,s=void 0===r?"button":r,a=e.onBlur,u=e.onFocus,l=e.onClick,c=e.onKeyDown,d=e.onKeyUp,_=e.autoFocus,b=e.disabled,f=void 0!==b&&b,p=__rest(e,["className","children","id","as","onBlur","onFocus","onClick","onKeyDown","onKeyUp","autoFocus","disabled"]),y=(0,utils_1.useDeterministicId)(i,"styleless-ui__button"),h=(0,utils_1.useButtonBase)({onBlur:a,onClick:l,onFocus:u,onKeyDown:c,onKeyUp:d,autoFocus:_,disabled:f}),m=React.useRef(null),v=(0,utils_1.useForkedRefs)(t,m,h.handleButtonRef),O={disabled:f,focusedVisible:h.isFocusedVisible},g="function"==typeof n?n(O):n,j="function"==typeof o?o(O):o;return(0,jsx_runtime_1.jsx)(s,__assign({id:y,ref:function(e){(v(e),e)&&("button"===(0,utils_1.getNodeName)(e)?e.disabled=f:(e.setAttribute("role","button"),e.setAttribute("aria-disabled",String(f))),(0,utils_1.computeAccessibleName)(e)||console.error(["[StylelessUI][Button]: 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")))},className:g,autoFocus:_,onClick:h.handleClick,onBlur:h.handleBlur,onFocus:h.handleFocus,onKeyDown:h.handleKeyDown,onKeyUp:h.handleKeyUp,"data-slot":Slots.Root},p,{tabIndex:f?-1:0,"data-disabled":f?"":void 0,"data-focus-visible":h.isFocusedVisible?"":void 0},{children:j}))},Button=(0,utils_1.componentWithForwardedRef)(ButtonBase);exports.default=Button;