react-ally/dist/react-ally.min.js

Accessible react components

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react-dom"),require("body-scroll-lock"),require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["exports","react-dom","body-scroll-lock","react","prop-types"],n):n(e["react-ally"]={},e.ReactDOM,e.BodyScrollLock,e.React,e.propTypes)}(this,function(e,n,t,r,o){"use strict";n=n&&n.hasOwnProperty("default")?n.default:n;var i="default"in r?r.default:r;function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function c(){return(c=Object.assign||function(e){for(var n=1;arguments.length>n;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function u(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;i.length>r;r++)0>n.indexOf(t=i[r])&&(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;i.length>r;r++)0>n.indexOf(t=i[r])&&Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}function l(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=[],r=!0,o=!1,i=void 0;try{for(var a,c=e[Symbol.iterator]();!(r=(a=c.next()).done)&&(t.push(a.value),!n||t.length!==n);r=!0);}catch(e){o=!0,i=e}finally{try{r||null==c.return||c.return()}finally{if(o)throw i}}return t}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var s=function(e){var n=e.children,t=e.toolbarItem,o=void 0!==t&&t,a=l(r.useState(),2),c=a[0],u=a[1];return i.createElement(i.Fragment,null,i.Children.map(n,function(e,t){return i.cloneElement(e,{focused:t===c,setFocusOnKeyDown:function(e){return function(e,t){var r=e.keyCode,a=i.Children.count(n),c=function(){return u((t+1)%a)},l=function(){return u((t+a-1)%a)};switch(r){case 36:o||u(0);break;case 35:o||u(a-1);break;case 37:o&&0>=t||l();break;case 39:o&&t+1!==a||c();break;case 38:l();break;case 40:c()}}(e,t)}})}))},f=r.createContext(1),d=r.forwardRef(function(e,n){var t=r.useContext(f);return i.createElement("h".concat(t),c({ref:n},e))}),b=function(e){var n=e.children,t=e.levelOverride,o=r.useContext(f);return i.createElement(f.Provider,{value:Math.min(t||o+1,6)},i.createElement(i.Fragment,null,n))};b.propTypes={levelOverride:o.number};var m=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],n=arguments.length>1?arguments[1]:void 0;return r.useEffect(function(){e&&function(e){void 0!==console&&"function"==typeof console.error&&console.error(e);try{throw Error(e)}catch(e){}}(n)},[])},v=function(e){var n=e.children,t=e.multi,o=void 0===t||t,c=e.headingLevel,f=e.initialOpen,d=void 0===f?"first":f,v=u(e,["children","multi","headingLevel","initialOpen"]),p=l(r.useState(function(e,n){switch(e){case"none":return{0:!1};case"first":return{0:!0};case"all":for(var t={},r=n.length,o=0;r>o;o++)t[o]=!0;return t;default:throw Error()}}(d,n)),2),y=p[0],E=p[1],h=o?function(e){return E(function(n){return Object.assign({},n,a({},e,!y[e]))})}:function(e){return E(a({},e,!0))};return m(!o&&"all"===d,'Cannot use multi={false} with initialOpen="all"'),i.createElement(b,{levelOverride:c},i.createElement("div",v,i.createElement(s,null,i.Children.map(n,function(e,n){return i.cloneElement(e,{accordionId:"".concat(v.id,"-").concat(n,"th"),isOpen:!!y[n],multi:o,onClickHeader:function(){return h(n)}})}))))};v.propTypes={headingLevel:o.number,id:o.string.isRequired,initialOpen:o.oneOf(["none","first","all"]),multi:o.bool};var p=function(e){var n=e.children,t=u(e,["children"]);return i.createElement(i.Fragment,null,i.Children.map(n,function(e){return i.cloneElement(e,function(e){for(var n=1;arguments.length>n;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.forEach(function(n){a(e,n,t[n])})}return e}({},t))}))},y=function(e){return"".concat(e,"-button")},E=function(e){return"".concat(e,"-content")},h=r.forwardRef(function(e,n){var t=e.accordionId,o=e.buttonProps,a=e.multi,l=e.focused,s=e.isOpen,f=e.onClickHeader,b=e.setFocusOnKeyDown,m=u(e,["accordionId","buttonProps","multi","focused","isOpen","onClickHeader","setFocusOnKeyDown"]),v=r.useRef(null);return r.useEffect(function(){l&&v.current.focus()},[l]),i.createElement(d,c({ref:n},m),i.createElement("button",c({},o,{ref:v,"aria-disabled":s&&!a,"aria-expanded":s,"aria-controls":E(t),id:y(t),onClick:f,onKeyDown:b}),m.children))});h.propTypes={buttonProps:o.object};var g=r.forwardRef(function(e,n){var t=e.accordionId,r=e.isOpen,o=u(e,["accordionId","multi","focused","isOpen","onClickHeader","setFocusOnKeyDown"]);return i.createElement("div",c({ref:n},o,{"aria-hidden":!r,"aria-labelledby":y(t),id:E(t)}),r&&o.children)});v.displayName="AccordionGroup",p.displayName="Accordion",h.displayName="AccordionHeader",g.displayName="AccordionPanel";var C=function(e){var n=e.listProps,t=void 0===n?{}:n,r=e.children,o=u(e,["listProps","children"]),a=i.Children.count(r);return i.createElement("nav",c({},o,{"aria-label":"Breadcrumb"}),i.createElement("ol",t,i.Children.map(r,function(e,n){return a-1===n?i.cloneElement(e,{"aria-current":"page"}):e})))};C.propTypes={listProps:o.object};var w=function(e){var n=e.listItemProps,t=void 0===n?{}:n,r=u(e,["listItemProps"]);return i.createElement("li",t,i.createElement("a",r))};w.propTypes={href:o.string.isRequired,listItemProps:o.object},w.displayName="BreadcrumbLink";var k=function(e){var n=e.backgroundColor,t=u(e,["backgroundColor"]);return i.createElement("div",c({style:{position:"fixed",top:0,left:0,right:0,bottom:0,backgroundColor:n}},t))},x=function(e){var n=e.children,t=e.firstTabbableElementRef,o=e.initialFocusElementRef,a=e.lastTabbableElementRef,c=e.wrapperRef;r.useEffect(function(){setTimeout(function(){(o||t).current.focus()},0)},[]);r.useEffect(function(){var e=function(e){9===e.keyCode&&(a?e.shiftKey&&(e.preventDefault(),a.current.focus()):e.preventDefault())};return t.current.addEventListener("keydown",e),function(){t.current.removeEventListener("keydown",e)}},[]);r.useEffect(function(){var e=function(e){e.shiftKey||9!==e.keyCode||(e.preventDefault(),t.current.focus())};if(a)return a.current.addEventListener("keydown",e),function(){a.current.removeEventListener("keydown",e)}},[]);return r.useEffect(function(){var e=function(e){9===e.keyCode&&e.shiftKey&&c.current===document.activeElement&&(e.preventDefault(),a.current?a.current.focus():t.current.focus())};return c.current.addEventListener("keydown",e),function(){c.current.removeEventListener("keydown",e)}},[]),i.createElement(i.Fragment,null,n&&i.cloneElement(n,{tabIndex:-1}))};x.propTypes={children:o.element.isRequired,firstTabbableElementRef:o.object.isRequired,initialFocusElementRef:o.object,lastTabbableElementRef:o.object,wrapperRef:o.object.isRequired};var R=r.createContext({}),O=r.forwardRef(function(e,o){var a=e.close,s=void 0===a?function(){}:a,f=e.closeOnOverlayClick,d=void 0===f||f,b=e.firstTabbableElementRef,m=e.isOpen,v=void 0!==m&&m,p=e.initialFocusElementRef,y=e.lastTabbableElementRef,E=e.onClick,h=void 0===E?function(){}:E,g=e.onKeyDown,C=void 0===g?function(){}:g,w=e.overlayBackgroundColor,O=void 0===w?"rgba(255,255,255,0.75)":w,D=e.overlayProps,I=void 0===D?{}:D,T=e.returnFocus,P=void 0===T?{current:document.activeElement}:T,j=u(e,["close","closeOnOverlayClick","firstTabbableElementRef","isOpen","initialFocusElementRef","lastTabbableElementRef","onClick","onKeyDown","overlayBackgroundColor","overlayProps","returnFocus"]);if(!o)throw Error("Dialog requires a ref");r.useEffect(function(){if(v&&P.current===document.body)throw Error("Dialog did not receive a valid element to send focus after closing.  This usually occurs because the dialog initialized open, but wasn't passed a returnFocus ref.")},[v]);var F=r.useRef(document.createElement("div")),S=l(r.useState(""),2),q=S[0],A=S[1],K=l(r.useState(""),2),L=K[0],B=K[1];r.useEffect(function(){if(v){for(var e=P.current;e.parentElement!==e.ownerDocument.body&&e!==e.ownerDocument.body;)e=e.parentElement;return e.setAttribute("aria-hidden",!0),function(){e.setAttribute("aria-hidden",!1)}}});r.useEffect(function(){return t.disableBodyScroll(o.current),function(){t.enableBodyScroll(o.current)}},[v]),r.useEffect(function(){if(v)return function(){F.current.parentNode&&F.current.parentNode.removeChild(F.current)}},[v]),r.useEffect(function(){if(v){var e=P.current;return function(){e.focus()}}},[v]);var M=i.createElement(k,c({backgroundColor:O},I,{onClick:function(e){d&&s(e)}}),i.createElement(R.Provider,{value:{contentId:j.id,setDescribedby:B,setLabelledby:A}},i.createElement(x,{firstTabbableElementRef:b,initialFocusElementRef:p,lastTabbableElementRef:y,wrapperRef:o},i.createElement("div",c({ref:o,"aria-describedby":L,"aria-labelledby":q,"aria-modal":!0,id:"test-dialog",role:"dialog"},j,{onClick:function(e){e.stopPropagation(),h(e)},onKeyDown:function(e){27===e.keyCode&&s(e),C(e)}})))));return v?(document.body.appendChild(F.current),n.createPortal(M,F.current)):null});O.displayName="Dialog",O.propTypes={close:o.func.isRequired,closeOnOverlayClick:o.bool,firstTabbableElementRef:o.object.isRequired,id:o.string.isRequired,isOpen:o.bool.isRequired,initialFocusElementRef:o.object,lastTabbableElementRef:o.object,onClick:o.func,onKeyDown:o.func,overlayBackgroundColor:o.string,overlayProps:o.object,returnFocus:o.object};var D=r.createContext({}),I=i.forwardRef(function(e,n){var t=e.bigStep,r=void 0===t?1:t,o=e.onChange,a=e.onKeyDown,l=void 0===a?function(){}:a,s=e.onMouseDown,f=void 0===s?function(){}:s,d=e.tabIndex,b=void 0===d?0:d,m=u(e,["bigStep","onChange","onKeyDown","onMouseDown","tabIndex"]),v=m["aria-valuemax"],p=m["aria-valuemin"];return i.createElement(D.Provider,{value:{current:m["aria-valuenow"],maxValue:v,minValue:p,onChange:o}},i.createElement("div",c({},m,{ref:n,role:"spinbutton",onKeyDown:function(e){switch(e.keyCode){case 33:o(function(e){return Math.min(e+r,v)});break;case 34:o(function(e){return Math.max(e-r,p)});break;case 35:o(v);break;case 36:o(p);break;case 38:o(function(e){return Math.min(e+1,v)});break;case 40:o(function(e){return Math.max(e-1,p)})}l(e)},onMouseDown:function(e){n.current.focus(),f(e)},tabIndex:b})))});I.displayName="SpinButton",I.propTypes={"aria-valuemax":o.number.isRequired,"aria-valuemin":o.number.isRequired,"aria-valuenow":o.number.isRequired,"aria-valuetext":o.string,bigStep:o.number,onChange:o.func.isRequired};var T=function(e){return i.createElement("button",c({},e,{"aria-hidden":!0,onMouseDown:function(e){e.preventDefault()},tabIndex:-1}))},P=r.createContext({}),j=function(e){var n=e.initialActiveIndex,t=void 0===n?0:n,o=e.id,a=u(e,["initialActiveIndex","id"]),s=l(r.useState(t),2);return i.createElement(P.Provider,{value:{activeIndex:s[0],tabsId:o,setActiveIndex:s[1]}},i.createElement("div",c({id:o},a)))};j.propTypes={id:o.string.isRequired};var F=function(e){var n=e.manual,t=void 0!==n&&n,o=u(e,["manual"]),a=l(r.useState(-1),2),s=a[0],f=a[1];return i.createElement("div",c({},o,{role:"tablist"}),i.Children.map(o.children,function(e,n){return i.cloneElement(e,{count:o.children.length,focusIndex:s,index:n,manual:t,setFocusIndex:f})}))};F.propTypes={manual:o.bool};var S=function(e,n){return"".concat(e,"-").concat(n,"th-tab")},q=function(e,n){return"".concat(e,"-").concat(n,"th-panel")};e.AccordionGroup=v,e.Accordion=p,e.AccordionHeader=h,e.AccordionPanel=g,e.Breadcrumb=C,e.BreadcrumbLink=w,e.ArrowTrap=s,e.Dialog=O,e.DialogLabel=function(e){var n=r.useRef(!1);r.useEffect(function(){n.current=!0},[]);var t=r.useContext(R),o=t.setLabelledby,a="".concat(t.contentId,"-label");return n.current||o(a),i.createElement("h2",c({},e,{id:a}))},e.DialogDescription=function(e){var n=r.useRef(!1);r.useEffect(function(){n.current=!0},[]);var t=r.useContext(R),o=t.setDescribedby,a="".concat(t.contentId,"-description");return n.current||o(a),i.createElement("div",c({},e,{id:a}))},e.DialogHelpers=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],n=r.useRef(null),t=r.useRef(null),o=r.useRef(null),i=l(r.useState(e),2),a=i[1];return{close:function(){return a(!1)},firstTabbableElementRef:n,isOpen:i[0],lastTabbableElementRef:t,open:function(){return a(!0)},ref:o}},e.FocusTrap=x,e.Heading=d,e.Section=b,e.SpinButton=I,e.UpButton=function(e){var n=r.useContext(D),t=n.onChange,o=n.maxValue;return i.createElement(T,c({},e,{disabled:n.current===o,onClick:function(){t(function(e){return Math.min(e+1,o)})}}))},e.DownButton=function(e){var n=r.useContext(D),t=n.onChange,o=n.minValue;return i.createElement(T,c({},e,{disabled:n.current===o,onClick:function(){t(function(e){return Math.max(e-1,o)})}}))},e.Tabs=j,e.TabList=F,e.Tab=function(e){var n=e.count,t=e.focusIndex,o=e.index,a=e.manual,l=e.setFocusIndex,s=u(e,["count","focusIndex","index","manual","setFocusIndex"]),f=r.useRef(null),d=r.useRef(!1),b=r.useContext(P),m=b.activeIndex,v=b.setActiveIndex,p=b.tabsId,y=o===m,E=t>-1?o===t:o===m;return r.useEffect(function(){d.current&&E&&f.current.focus()},[m,t]),r.useEffect(function(){d.current=!0},[]),i.createElement("button",c({ref:f,id:S(p,o)},s,{"aria-controls":q(p,o),"aria-selected":y,onClick:function(){return v(o)},onKeyDown:function(e){var t=a?l:v,r=function(){return t((o+1)%n)},i=function(){return t((o-1+n)%n)};switch(e.keyCode){case 35:t(n-1);break;case 36:t(0);break;case 37:case 38:i();break;case 39:case 40:r()}},role:"tab",tabIndex:y-1}))},e.TabPanels=function(e){return i.createElement(r.Fragment,null,i.Children.map(e.children,function(e,n){return i.cloneElement(e,{index:n})}))},e.TabPanel=function(e){var n=e.index,t=u(e,["index"]),o=r.useContext(P),a=o.tabsId,l=n===o.activeIndex;return i.createElement("div",c({id:q(a,n)},t,{"aria-labelledby":S(a,n),"aria-selected":l,role:"tabpanel",style:{display:l?"inherit":"none"},tabIndex:0}))},Object.defineProperty(e,"__esModule",{value:!0})});