spartan-ui/dist/index.cjs.js

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

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