@accessible/disclosure
Version:
🅰 An accessible and versatile disclosure component for React
3 lines (2 loc) • 7.33 kB
JavaScript
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","react","react-dom"],n):n((e=e||self).Disclosure={},e.React,e.ReactDOM)}(this,(function(e,n,t){"use strict";function r(){return(r=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 o(e,n,t,r){var o=C(t),l=C(r);S((function(){function t(){if(!i){for(var e=arguments.length,n=new Array(e),t=0;e>t;t++)n[t]=arguments[t];o.current.apply(this,n)}}var r=e&&"current"in e?e.current:e;if(r){var i=0;r.addEventListener(n,t);var c=l.current;return function(){i=1,r.removeEventListener(n,t),c&&c()}}}),[e,n])}function l(e,n){o(e,"keydown",(function(e){var t=n[E[e.key]||e.key];t&&t(e)}))}function i(e){return e.node}function c(e,t,r){void 0===t&&(t=0);var l=void 0===r?P:r,i=l.includeRoot,c=l.preventScroll,u=function(){var n=e&&"current"in e?e.current:e;if(n&&t){var r=A(n,i);r.length>0&&r[0].focus({preventScroll:c})}},a=C(u);n.useEffect((function(){a.current()}),[a,t]),o(e,"transitionend",u)}function u(e,t){var r=n.useRef(t);return n.useEffect((function(){r.current=e}),[e]),r.current}function a(e){return!e}function s(){}function f(e,t){var r=n.useRef(0),i=function(){return r.current=1};return o(e,"touchstart",i),o(e,"mousedown",i),o(e,"click",(function(e){r.current&&t(e),r.current=0})),l(e,{Enter:t," ":t}),{role:"button",tabIndex:0}}function d(e,n){var t=n.provider,r=n.value;return B(t,{value:r},e)}function p(e){var n,t,r="";if("string"==typeof e||"number"==typeof e)r+=e;else if("object"==typeof e)if(Array.isArray(e))for(n=0;n<e.length;n++)e[n]&&(t=p(e[n]))&&(r&&(r+=" "),r+=t);else for(n in e)e[n]&&(r&&(r+=" "),r+=n);return r}function v(){for(var e,n,t=0,r="";arguments.length>t;)(e=arguments[t++])&&(n=p(e))&&(r&&(r+=" "),r+=n);return r}function y(){return n.useContext(G)}function m(e,n){void 0===n&&(n={});var t=n,o=t.preventScroll,i=t.closeOnEscape,a=void 0===i?1:i,s=t.openClass,f=t.closedClass,d=t.openStyle,p=t.closedStyle,v=y(),m=v.id,h=v.isOpen,b=v.close;return c(e,!u(h)&&h,{includeRoot:1,preventScroll:o}),l(e,{Escape:function(){return a&&b()}}),{"aria-hidden":!h,id:m,className:h?s:f,style:r({visibility:h?"visible":"hidden"},h?d:p)}}function h(e,n){var t=(void 0===n?{}:n).onClick,o=y(),l=o.close,i=o.isOpen;return r({"aria-controls":o.id,"aria-expanded":i,"aria-label":"Close"},f(e,(function(e){l(),null==t||t(e)})))}function b(e,n){void 0===n&&(n={});var t=n,o=t.openClass,l=t.closedClass,i=t.openStyle,a=t.closedStyle,s=t.onClick,d=y(),p=d.isOpen,v=d.id,m=d.toggle;return c(e,u(p)&&!p,{includeRoot:1}),r({"aria-controls":v,"aria-expanded":p,className:p?o:l,style:p?i:a},f(e,(function(e){m(),null==s||s(e)})))}function g(){}var S=n["undefined"!=typeof document&&void 0!==document.createElement?"useLayoutEffect":"useEffect"],C=function(e){var t=n.useRef(e);return t.current=e,t},E={Up:"ArrowUp",Right:"ArrowRight",Down:"ArrowDown",Left:"ArrowLeft",Esc:"Escape",Spacebar:" ",Del:"Delete",Crsel:"CrSel",Exsel:"ExSel",Add:"+",Subtract:"-",Multiply:"*",Divide:"/",Decimal:".",Scroll:"ScrollLock"},x='input,select,textarea,a[href],button,[tabindex],audio[controls],video[controls],[contenteditable]:not([contenteditable="false"])',O="undefined"==typeof Element?function(){return 0}:Element.prototype.matches||Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector,A=function(e,n){void 0===n&&(n=0);var t,r,o,l=[],c=[],u=e.querySelectorAll(x);for(n&&O.call(e,x)&&(u=Array.prototype.slice.apply(u)).unshift(e),t=0;t<u.length;t++)r=u[t],k(r)&&(0===(o=R(r))?l.push(r):c.push({documentOrder:t,tabIndex:o,node:r}));return c.sort(D).map(i).concat(l)},k=function(e){return!(!w(e)||"INPUT"===e.tagName&&"radio"===e.type&&!I(e)||0>R(e))},w=function(e){return!(e.disabled||N(e)&&"hidden"===e.type||null===e.offsetParent||"hidden"===getComputedStyle(e).visibility)},R=function(e){var n=parseInt(e.getAttribute("tabindex")||"",10);return isNaN(n)?"true"===e.contentEditable?0:e.tabIndex:n},D=function(e,n){return e.tabIndex===n.tabIndex?e.documentOrder-n.documentOrder:e.tabIndex-n.tabIndex},N=function(e){return"INPUT"===e.tagName},I=function(e){if(!e.name)return 1;if(e.ownerDocument){for(var n=e.ownerDocument.querySelectorAll('input[type="radio"][name="'+e.name+'"]'),t=0;t<n.length;t++)if(n[t].checked)return n[t]===e;return 1}return 0},P={includeRoot:0,preventScroll:0},j=n.useCallback,L=[],M=function(){for(var e=arguments.length,n=new Array(e),t=0;e>t;t++)n[t]=arguments[t];return function(e){return n.forEach((function(n){"function"==typeof n?n(e):n&&"object"==typeof n&&(n.current=e)}))}},T=0,q=function(){return T++},U=0,B=n.createElement,_=function(e){return"undefined"!=typeof document&&document.querySelectorAll(e)},F=function(e){var r=e.container,o=void 0===r?"#portals":r,l=e.server,i=void 0===l?1:l,c=e.providers,u=e.children,a=n.useState(_(o)),s=a[0],f=a[1];if(n.useEffect((function(){f(_(o))}),[o]),0==s)i&&void 0!==c&&c.length>0&&(u=c.reduceRight(d,u));else if(s.length>0){for(var p=[],v=0;v<s.length;v++)p.push(t.createPortal(u,s[v]));return B(n.Fragment,null,p)}return null},z=n.createElement,G=n.createContext({isOpen:0,open:g,close:g,toggle:g});e.CloseButton=function(e){var t=e.children,o=n.useRef(null),l=t.props,i=h(o,{onClick:l.onClick});return n.cloneElement(t,r(i,{onClick:void 0,"aria-label":l.hasOwnProperty("aria-label")?l["aria-label"]:i["aria-label"],ref:M(o,t.ref)}))},e.Disclosure=function(e){var t=e.id,o=e.open,l=e.defaultOpen,i=e.onChange,c=void 0===i?g:i,f=e.children;t=function(e,t){void 0===t&&(t="🅰");var r=n.useState(U?q:void 0),o=r[0],l=r[1];return S((function(){U||(U=1,l(T++))}),[]),e||(void 0===o?o:t+o)}(t);var d=function(e,t,o){void 0===e&&(e=0),void 0===o&&(o=s);var l=n.useState(null!=t?t:e),i=l[0],c=l[1];return function(e,t){var r=C(t),o=u(e,e);n.useEffect((function(){e!==o&&r.current(e,o)}),[e,o,r])}(i,o),[null!=t?t:i,r(j((function(){return c(a)}),L),{on:j((function(){return c(1)}),L),off:j((function(){return c(0)}),L)})]}(l,o,c),p=d[0],v=d[1],y=n.useMemo((function(){return{id:t,open:v.on,close:v.off,toggle:v,isOpen:p}}),[t,p,v]);return z(G.Provider,{value:y},f)},e.Target=function(e){var t=e.closeOnEscape,o=void 0===t?1:t,l=e.portal,i=e.openClass,c=e.closedClass,u=e.openStyle,a=e.closedStyle,s=e.preventScroll,f=e.children,d=n.useRef(null),p=f.props,y=m(d,{openClass:v(p.className,i)||void 0,closedClass:v(p.className,c)||void 0,openStyle:p.style?r({},p.style,u):u,closedStyle:p.style?r({},p.style,a):a,closeOnEscape:o,preventScroll:s});return function(e,n){if(!n)return e;var t={children:e};return"string"==typeof n?t.container=n:r(t,n),z(F,t)}(n.cloneElement(f,r(y,{ref:M(d,f.ref)})),l)},e.Trigger=function(e){var t=e.openClass,o=e.closedClass,l=e.openStyle,i=e.closedStyle,c=e.children,u=n.useRef(null),a=c.props,s=b(u,{openClass:v(a.className,t)||void 0,closedClass:v(a.className,o)||void 0,openStyle:a.style?r({},a.style,l):l,closedStyle:a.style?r({},a.style,i):i,onClick:a.onClick});return n.cloneElement(c,r(s,{onClick:void 0,ref:M(u,c.ref)}))},e.useA11yCloseButton=h,e.useA11yTarget=m,e.useA11yTrigger=b,e.useDisclosure=y,Object.defineProperty(e,"__esModule",{value:1})}));
//# sourceMappingURL=disclosure.js.map