@accessible/tabs/dist/umd/tabs.js

🅰 An accessible and versatile tabs component for React with keyboard navigation and labeling features taught in w3.org's WAI-ARIA tabs example

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).Tabs={},e.React)}(this,(function(e,n){"use strict";function t(){return(t=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 r(e,n,t,r){var i=b(t),o=b(r);p((function(){function t(){if(!u){for(var e=arguments.length,n=new Array(e),t=0;e>t;t++)n[t]=arguments[t];i.current.apply(this,n)}}var r=e&&"current"in e?e.current:e;if(r){var u=0;r.addEventListener(n,t);var l=o.current;return function(){u=1,r.removeEventListener(n,t),l&&l()}}}),[e,n])}function i(e,n){r(e,"keydown",(function(e){var t=n[m[e.key]||e.key];t&&t(e)}))}function o(e){return e.node}function u(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=u(e[n]))&&(r&&(r+=" "),r+=t);else for(n in e)e[n]&&(r&&(r+=" "),r+=n);return r}function l(){for(var e,n,t=0,r="";arguments.length>t;)(e=arguments[t++])&&(n=u(e))&&(r&&(r+=" "),r+=n);return r}function a(){}function c(e,n){var t=n.index;return"register"===n.type?(e=e.slice(0))[t]={element:n.element,id:n.id,disabled:n.disabled}:"unregister"===n.type&&((e=e.slice(0))[t]=void 0),e}function d(e){function t(){var n;return!(null===(n=i[e])||void 0===n?void 0:n.disabled)&&o(e)}var r=n.useContext(L),i=r.tabs,o=r.activate,u=r.active;return n.useMemo((function(){var n,r,o;return{id:null===(n=i[e])||void 0===n?void 0:n.id,tabRef:null===(r=i[e])||void 0===r?void 0:r.element,index:e,activate:t,isActive:e===u,disabled:(null===(o=i[e])||void 0===o?void 0:o.disabled)||0}}),[i,e,u,o])}function s(e){var r=e.id,o=e.index,u=e.disabled,c=void 0===u?0:u,s=e.activeClass,f=e.inactiveClass,v=e.activeStyle,b=e.inactiveStyle,m=e.onDelete,x=void 0===m?a:m,g=e.children;r=function(e,t){void 0===t&&(t="🅰");var r=n.useState(P?O:void 0),i=r[0],o=r[1];return p((function(){P||(P=1,o(k++))}),[]),e||(void 0===i?i:t+i)}(r);var E=M().registerTab,S=n.useRef(null),A=M(),w=A.tabs,I=A.manualActivation,C=d(o),R=C.isActive,T=C.activate,N=y(g.ref,S);return i(S,{ArrowRight:function(){return function(e,n){var t,r,i,o;n===e.length-1?null===(t=e[0])||void 0===t||null===(r=t.element)||void 0===r||r.focus():null===(i=e[n+1])||void 0===i||null===(o=i.element)||void 0===o||o.focus()}(w,o)},ArrowLeft:function(){return function(e,n){var t,r,i,o;0===n?null===(t=e[e.length-1])||void 0===t||null===(r=t.element)||void 0===r||r.focus():null===(i=e[n-1])||void 0===i||null===(o=i.element)||void 0===o||o.focus()}(w,o)},Home:function(){var e,n;return null===(e=w[0])||void 0===e||null===(n=e.element)||void 0===n?void 0:n.focus()},End:function(){var e,n;return null===(e=w[w.length-1])||void 0===e||null===(n=e.element)||void 0===n?void 0:n.focus()},Delete:x}),n.useEffect((function(){return E(o,S.current,r,c)}),[r,c,o]),D(h,null,n.cloneElement(g,{"aria-controls":r,"aria-selected":""+R,"aria-disabled":""+(R||c),role:"tab",className:l(g.props.className,R?s:f)||void 0,style:t({},g.props.style,R?v:b),tabIndex:g.props.hasOwnProperty("tabIndex")?g.props.tabIndex:R?0:-1,onFocus:function(e){var n,t;I||T(),null===(n=(t=g.props).onFocus)||void 0===n||n.call(t,e)},onClick:function(e){var n,t;T(),null===(n=(t=g.props).onClick)||void 0===n||n.call(t,e)},ref:N}))}function f(e){var t=e.children;return n.cloneElement(t,{role:"tablist"})}function v(e){var i=e.index,o=e.activeClass,u=e.inactiveClass,a=e.activeStyle,c=e.inactiveStyle,s=e.children,f=d(i),v=f.isActive,m=f.id,h=M(),x=h.manualActivation,g=h.preventScroll,S=n.useRef(v),A=n.useRef(null),w=y(s.ref,A);return function(e,t,i){void 0===t&&(t=0);var o=void 0===i?T:i,u=o.includeRoot,l=o.preventScroll,a=function(){var n=e&&"current"in e?e.current:e;if(n&&t){var r=E(n,u);r.length>0&&r[0].focus({preventScroll:l})}},c=b(a);n.useEffect((function(){c.current()}),[c,t]),r(e,"transitionend",a)}(A,x&&!S.current&&v,{includeRoot:1,preventScroll:g}),p((function(){S.current=v}),[v,i]),n.cloneElement(s,{"aria-hidden":""+!v,id:m,className:l(s.props.className,v?o:u)||void 0,style:t({visibility:v?"visible":"hidden"},s.props.style,v?a:c),tabIndex:s.props.hasOwnProperty("tabIndex")?s.props.tabIndex:v?0:-1,ref:w})}var p=n["undefined"!=typeof document&&void 0!==document.createElement?"useLayoutEffect":"useEffect"],b=function(e){var t=n.useRef(e);return t.current=e,t},m={Up:"ArrowUp",Right:"ArrowRight",Down:"ArrowDown",Left:"ArrowLeft",Esc:"Escape",Spacebar:" ",Del:"Delete",Crsel:"CrSel",Exsel:"ExSel",Add:"+",Subtract:"-",Multiply:"*",Divide:"/",Decimal:".",Scroll:"ScrollLock"},y=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)}))}},h=function(e){var t,o,u,l,a=e.children,c=n.useRef(null),d=a.props,s=(t=c,o=d.onClick,u=n.useRef(0),r(t,"touchstart",l=function(){return u.current=1}),r(t,"mousedown",l),r(t,"click",(function(e){u.current&&o(e),u.current=0})),i(t,{Enter:o," ":o}),{role:"button",tabIndex:0}),f=s.role,v=s.tabIndex;return n.cloneElement(a,{onClick:void 0,role:d.hasOwnProperty("role")?d.role:f,tabIndex:d.hasOwnProperty("tabIndex")?d.tabIndex:v,ref:y(c,a.ref)})},x='input,select,textarea,a[href],button,[tabindex],audio[controls],video[controls],[contenteditable]:not([contenteditable="false"])',g="undefined"==typeof Element?function(){return 0}:Element.prototype.matches||Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector,E=function(e,n){void 0===n&&(n=0);var t,r,i,u=[],l=[],a=e.querySelectorAll(x);for(n&&g.call(e,x)&&(a=Array.prototype.slice.apply(a)).unshift(e),t=0;t<a.length;t++)r=a[t],S(r)&&(0===(i=w(r))?u.push(r):l.push({documentOrder:t,tabIndex:i,node:r}));return l.sort(I).map(o).concat(u)},S=function(e){return!(!A(e)||"INPUT"===e.tagName&&"radio"===e.type&&!R(e)||0>w(e))},A=function(e){return!(e.disabled||C(e)&&"hidden"===e.type||null===e.offsetParent||"hidden"===getComputedStyle(e).visibility)},w=function(e){var n=parseInt(e.getAttribute("tabindex")||"",10);return isNaN(n)?"true"===e.contentEditable?0:e.tabIndex:n},I=function(e,n){return e.tabIndex===n.tabIndex?e.documentOrder-n.documentOrder:e.tabIndex-n.tabIndex},C=function(e){return"INPUT"===e.tagName},R=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},T={includeRoot:0,preventScroll:0},k=0,O=function(){return k++},P=0,D=n.createElement,N=function e(t,r){var i=0,o=0,u=n.Children.map(t,(function(t){if(!n.isValidElement(t))return t;if(r===v&&(t.type===f||t.type===s)||r===s&&t.type===v)return t;if(t.type===r)return void 0!==t.props.index?(i=t.props.index+1,t):(o=1,n.cloneElement(t,{index:i++}));if(0===i){var u=e(t.props.children,r);return u===t.props.children?t:(o=1,n.cloneElement(t,void 0,u))}return t}));return o?1===(null==u?void 0:u.length)?u[0]:u:t},L=n.createContext({tabs:[],registerTab:function(){return a},active:void 0,activate:a,manualActivation:0,preventScroll:0}),j=L.Consumer,M=function(){return n.useContext(L)};e.Panel=v,e.Tab=s,e.TabList=f,e.Tabs=function(e){function t(e,n,t,r){return E({type:"register",index:e,element:n,id:t,disabled:r}),function(){return E({type:"unregister",index:e})}}function r(e){var n;(null===(n=g[e||-1])||void 0===n?void 0:n.disabled)||w(e)}var i=e.active,o=e.defaultActive,u=void 0===o?0:o,l=e.manualActivation,d=void 0===l?0:l,f=e.preventScroll,p=void 0===f?0:f,m=e.onChange,y=void 0===m?a:m,h=e.children,x=n.useReducer(c,[]),g=x[0],E=x[1],S=n.useState(u),A=S[0],w=S[1];!function(e,t){var r=b(t),i=function(e,t){var r=n.useRef(t);return n.useEffect((function(){r.current=e}),[e]),r.current}(e,e);n.useEffect((function(){e!==i&&r.current(e,i)}),[e,i,r])}(A,y);var I=null!=i?i:A,C=n.useMemo((function(){return{tabs:g,registerTab:t,active:I,activate:r,preventScroll:p,manualActivation:d}}),[g,I,d,p]);return D(L.Provider,{value:C},N(N(h,s),v))},e.TabsConsumer=j,e.TabsContext=L,e.useTab=d,e.useTabs=M,Object.defineProperty(e,"__esModule",{value:1})}));
//# sourceMappingURL=tabs.js.map