spartan-ui/dist/index.js

React component library that focusses on getting the basics right leaving the design up to you

import e,{useState as a,useEffect as n,useRef as i}from"react";import r from"react-focus-lock";const t=({as:n="div",children:i,onClick:r,multi:t=!1,defaultOpen:l=[],...d})=>{const[{open:o},s]=a({open:l});return e.createElement(n,Object.assign({},d),e.Children.map(i,a=>{return e.isValidElement(a)?e.cloneElement(a,{onClick:(n=a.props.id,e=>{o.includes(n)?s({open:o.filter(e=>e!==n)}):s({open:t?[...o,n]:[n]}),r&&r(e,o),e.preventDefault()}),open:o.includes(a.props.id)}):a;var n}))};var l=(e,a)=>n=>{e.filter(e=>n.key&&n.key===e.name||n.keyCode&&n.keyCode===e.code).length>0&&a(n)};const d={ENTER:{name:"Enter",code:13},ESCAPE:{name:"Escape",code:27},SPACE:{name:"Space",code:32}},o=({as:a="div",children:n,id:i,open:r=!1,onClick:t,...o})=>{const s=e=>{t(e,!r),e.preventDefault()},c={id:`${i}-heading`,onClick:s,onKeyDown:l([d.ENTER,d.SPACE],e=>{s(e),e.preventDefault()}),role:"button",tabIndex:0,"aria-controls":`${i}-body`,"aria-expanded":r},u={hidden:!r,id:`${i}-body`,"aria-hidden":!r,"aria-labelledby":`${i}-heading`};return e.createElement(a,Object.assign({},o,{id:i}),n({open:r,headingProps:c,bodyProps:u}))},s=({as:a="div",children:n,minor:i,...r})=>e.createElement(a,Object.assign({},r,{role:"alert","aria-atomic":"true","aria-live":i?"polite":void 0}),n),c=({as:a="nav",children:n,"aria-label":i="Breadcrumb",...r})=>e.createElement(a,Object.assign({},r,{role:"list","aria-label":i}),n),u=({as:a="span",children:n,active:i,...r})=>e.createElement(a,Object.assign({},r,{role:"listitem","aria-current":i?"page":void 0}),n),m=({as:a="button",children:n,active:i,type:r="button",disabled:t,...l})=>e.createElement(a,Object.assign({},l,{role:"button",type:r,disabled:t,"aria-disabled":t||void 0,"aria-pressed":i}),n),p=({as:n="div",children:i,id:r,defaultOpen:t=!1,...l})=>{const[{open:d},o]=a({open:t}),s={id:`${r}-button`,onClick:()=>{o({open:!d})},"aria-controls":`${r}-menu`,"aria-expanded":d,"aria-haspopup":!0},c={hidden:!d,id:`${r}-menu`,role:"list","aria-hidden":!d,"aria-labelledby":`${r}-button`};return e.createElement(n,Object.assign({},l,{id:r}),i({open:d,buttonProps:s,menuProps:c,menuItemProps:{role:"listitem"}}))},b=({as:a="div",children:n,name:i,error:r=!1,info:t=!1,required:l=!1,optional:d=!1,optionList:o=!1,...s})=>{const c="div"===a&&o?"fieldset":a,u={name:i,"aria-describedby":[r&&`field-${i}-error`,t&&`field-${i}-info`].filter(Boolean).join(" "),"aria-invalid":r||void 0,required:l||!d&&void 0},m={as:o?"legend":void 0,htmlFor:o?void 0:i},p={error:`${i}-error`,info:`${i}-info`};return e.createElement(c,Object.assign({},s,{id:`field-${i}`}),n({ids:p,inputProps:u,labelProps:m}))},v=({as:a="input",name:n,id:i,type:r="text",defaultValue:t,disabled:l=!1,placeholder:d,required:o,value:s,onBlur:c,onChange:u,...m})=>e.createElement(a,Object.assign({},m,{name:n,id:i,type:r,defaultValue:t,disabled:l,placeholder:d,required:o,value:s,"aria-disabled":l||void 0,"aria-required":void 0!==o?o:void 0,onBlur:c,onChange:u})),h=({type:a="checkbox",name:n,id:i,value:r,...t})=>e.createElement(v,Object.assign({},t,{name:n,id:i||`${n}-${r}`,type:a})),g=({as:a="select",name:n,id:i,defaultValue:r,disabled:t=!1,multiple:l,options:d,placeholder:o,required:s,size:c,value:u,onBlur:m,onChange:p,...b})=>e.createElement(a,Object.assign({},b,{name:n,id:i,defaultValue:r,disabled:t,multiple:l,placeholder:o,required:s,size:c,value:u,"aria-disabled":t||void 0,"aria-required":void 0!==s?s:void 0,onBlur:m,onChange:p}),d.map(a=>e.createElement("option",{key:a.value,value:a.value},a.label))),E=({as:a="textarea",name:n,id:i,cols:r,defaultValue:t,disabled:l=!1,placeholder:d,required:o,rows:s,spellCheck:c,value:u,wrap:m,onBlur:p,onChange:b,...v})=>e.createElement(a,Object.assign({},v,{name:n,id:i,cols:r,defaultValue:t,disabled:l,placeholder:d,required:o,rows:s,spellCheck:c,value:u,wrap:m,"aria-disabled":l||void 0,"aria-required":void 0!==o?o:void 0,onBlur:p,onChange:b})),f=({as:a="label",children:n,htmlFor:i,...r})=>e.createElement(a,Object.assign({},r,{htmlFor:i}),n);const y=({as:a="div",children:t,id:o,open:s=!1,alert:c=!1,onClose:u,focusLockOptions:m,...p})=>{const b=i(null);var v;v=s,n(()=>(document.body.style.overflow=v?"hidden":"",()=>{document.body.style.overflow=""}),[v]),((e,a,i=!0)=>{n(()=>{if(i)return;const n=n=>{e.current&&!e.current.contains(n.target)&&a(n)};return document.addEventListener("mousedown",n),()=>{document.removeEventListener("mousedown",n)}},[e,a,i])})(b,u,c),((e,a,i=!1)=>{n(()=>{if(i)return;const n=l([e],a);return window.addEventListener("keydown",n),()=>{window.removeEventListener("keydown",n)}},[e,a,i])})(d.ESCAPE,u,c);const h={id:`${o}-heading`};return e.createElement(e.Fragment,null,s&&e.createElement(r,Object.assign({returnFocus:!0},m),e.createElement(a,Object.assign({},p,{ref:b,role:c?"alertdialog":"dialog",id:o,hidden:!s,tabIndex:s?0:-1,"aria-hidden":!s,"aria-labelledby":`${o}-heading`}),t({headingProps:h}))))},C=({as:a="div",children:r,id:t,loading:l=!1,value:d,min:o=0,max:s=100,label:c,...u})=>{const m=i(null);((e,a)=>{const r=i();n(()=>{const{current:n}=e,{current:i}=r;if(n)return document.activeElement!==n&&(r.current=document.activeElement),a?n.focus():i&&i.focus(),()=>{document.activeElement===n&&i&&i.focus()}},[e,a])})(m,l);const p=!c,b=void 0!==d,v={ref:m,tabIndex:l?0:void 0,"aria-busy":l,"aria-label":p?void 0:c,"aria-labelledby":p?`${t}-message`:void 0,"aria-valuemax":b?s:void 0,"aria-valuemin":b?o:void 0,"aria-valuenow":b?d:void 0},h={id:`${t}-message`,role:"staus","aria-atomic":!0,"aria-live":"polite"};return e.createElement(a,Object.assign({},u,{id:t}),l&&r({indicatorProps:v,messageProps:h}))},O=({as:a="span",children:n,label:i,...r})=>e.createElement(a,Object.assign({},r,{"aria-label":i}),n),$=({as:a="span",children:n,...i})=>e.createElement(a,Object.assign({},i,{"aria-label":n.replace(/[\s|\-|,]/g,".").replace(/\d/g," $&")}),n);export{t as Accordion,o as AccordionPanel,s as Alert,c as Breadcrumb,u as BreadcrumbItem,m as Button,p as Dropdown,b as Field,v as Input,h as InputOption,f as Label,y as Modal,C as Progress,O as SRLabel,$ as SRNumber,g as Select,E as TextArea};
//# sourceMappingURL=index.js.map