1(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{147:function(e,t,n){"use strict";n.r(t),n.d(t,"_frontmatter",function(){return u});var a=n(162),r=n.n(a),o=n(0),l=n.n(o),i=n(165),c=n(163),s=n.n(c),d=n(164);n(198);t.default=function(e){var t=e.components,n=r()(e,["components"]);return l.a.createElement(i.MDXTag,{name:"wrapper",Layout:function(e){var t=e.children;return l.a.createElement(d.a,null,l.a.createElement(s.a,null,l.a.createElement("title",null,"Tenon-ui | Getting started")),t)},layoutProps:n,components:t},l.a.createElement(i.MDXTag,{name:"h2",components:t},"Getting started"),l.a.createElement(i.MDXTag,{name:"p",components:t},"Tenon-UI can be installed in your project from the NPM repository."),l.a.createElement(i.MDXTag,{name:"p",components:t},"It requires at least ",l.a.createElement(i.MDXTag,{name:"inlineCode",components:t,parentName:"p"},"React v16.3"),"."),l.a.createElement(i.MDXTag,{name:"h3",components:t},"Installing with npm"),l.a.createElement(i.MDXTag,{name:"pre",components:t},l.a.createElement(i.MDXTag,{name:"code",components:t,parentName:"pre",props:{className:"language-javascript",metastring:""}},"npm install @tenon-io/tenon-ui\n")),l.a.createElement(i.MDXTag,{name:"h3",components:t},"Installing with yarn"),l.a.createElement(i.MDXTag,{name:"pre",components:t},l.a.createElement(i.MDXTag,{name:"code",components:t,parentName:"pre",props:{className:"language-javascript",metastring:""}},"yarn add @tenon-io/tenon-ui\n")))};var u={}},170:function(e,t,n){"use strict";var a=n(0),r=n.n(a);t.a=function(e){var t=e.children;return r.a.createElement("div",{tabIndex:"-1",onFocus:function(e){e.stopPropagation()},style:{outline:"none"}},t)}},176:function(e,t,n){"use strict";n(75);var a=n(0),r=n.n(a),o=n(4),l=n.n(o),i=Object(a.createContext)(1),c=function(e){var t=e.children,n=e.levelOverride;return r.a.createElement(i.Consumer,null,function(e){return r.a.createElement(i.Provider,{value:n?parseInt(n,10):e+1},t)})};c.displayName="Heading.LevelBoundary",c.propTypes={levelOverride:l.a.oneOfType([l.a.string,l.a.number])};var s=Object(a.forwardRef)(function(e,t){return r.a.createElement(i.Consumer,null,function(n){var a="h"+Math.min(n,6);return r.a.createElement(a,Object.assign({ref:t},e))})});s.displayName="Heading.H";var d=function(){};d.LevelBoundary=c,d.H=s,t.a=d},194:function(e,t,n){"use strict";n(195);var a=n(10),r=n(177),o=n(17),l=/./.toString,i=function(e){n(19)(RegExp.prototype,"toString",e,!0)};n(18)(function(){return"/a/b"!=l.call({source:"a",flags:"b"})})?i(function(){var e=a(this);return"/".concat(e.source,"/","flags"in e?e.flags:!o&&e instanceof RegExp?r.call(e):void 0)}):"toString"!=l.name&&i(function(){return l.call(this)})},195:function(e,t,n){n(17)&&"g"!=/./g.flags&&n(27).f(RegExp.prototype,"flags",{configurable:!0,get:n(177)})},196:function(e,t,n){var a=Date.prototype,r=a.toString,o=a.getTime;new Date(NaN)+""!="Invalid Date"&&n(19)(a,"toString",function(){var e=o.call(this);return e==e?r.call(this):"Invalid Date"})},198:function(e,t,n){"use strict";n(194),n(196);var a=n(13),r=n.n(a),o=(n(77),n(180),n(49),n(51),n(7)),l=n.n(o),i=n(0),c=n.n(i),s=n(4),d=n.n(s),u=n(169),p=n.n(u),m=n(182),f=n(193),b=n.n(f),g=n(176),I={37:"ArrowLeft",38:"ArrowUp",39:"ArrowRight",40:"ArrowDown"},v={ArrowLeft:"ArrowLeft",ArrowUp:"ArrowUp",ArrowRight:"ArrowRight",ArrowDown:"ArrowDown"},y=function(e){return e.nativeEvent.code?v[e.nativeEvent.code]:I[e.keyCode]},h=n(170),T=Object(i.forwardRef)(function(e,t){var n=e.children,a=e.title,r=e.tabId,o=e.panelId,l=e.isHidden,i=e.headingLevel,s=e.noHeading,d=e.className;return c.a.createElement(g.a.LevelBoundary,{levelOverride:i||null},c.a.createElement("section",{id:o,role:"tabpanel",tabIndex:"0",ref:t,className:d||null,"aria-describedby":r,hidden:l?"hidden":null},c.a.createElement(h.a,null,s?null:c.a.createElement(g.a.H,null,a),n)))});T.propTypes={title:d.a.string.isRequired,tabId:d.a.string,panelId:d.a.string,isHidden:d.a.bool,headingLevel:d.a.oneOfType([d.a.string,d.a.number]),noHeading:d.a.bool,className:d.a.string,toggleRender:d.a.func},T.displayName="Tabs.Tab";var E=function(e){function t(t){var n;return(n=e.call(this,t)||this).onKeyUpHandler=function(e){var t=n.state.activeTabId,a=n.tabsById.reduce(function(e,n,a){return n.tabId===t?a:e},0),r=0;switch(y(e)){case v.ArrowLeft:r=a>0?a-1:n.tabsById.length-1;break;case v.ArrowRight:r=a===n.tabsById.length-1?0:a+1;break;case v.ArrowDown:return void n.panelRefs[t||n.tabsById[0].tabId].focus();default:return}n.setState({activeTabId:n.tabsById[r].tabId},function(){n.tabRefs[n.tabsById[r].tabId].focus()})},n.onClickHandler=function(e,t){e.preventDefault(),n.setState({activeTabId:t.tabId})},n.registerTabRef=function(e,t){n.tabRefs[e]=t},n.registerPanelRef=function(e,t){n.panelRefs[e]=t},n.calcTabMetadata=Object(m.a)(function(e){n.tabRefs={},n.panelRefs={};var t=e.map(function(e){return e.title?{title:e.title,name:e.name,toggleRender:e.toggleRender,tabId:p()(),panelId:p()()}:{}}),a=t.filter(function(e){return!!e.tabId});return n.tabsById=a.map(function(e){return{tabId:e.tabId,name:e.name}}),n.panelIdByTabId=a.reduce(function(e,t){var n;return r()({},e,((n={})[t.tabId]=t.panelId,n))},{}),{tabPanelMetadata:t,tabMetadata:a}},b.a),n.getSelectedTab=Object(m.a)(function(e,t){return 0===t.filter(function(t){return t.tabId===e}).length?n.tabsById[0].tabId:e},b.a),n.state={activeTabId:""},n.tabsById=[],n.panelIdByTabId={},n.tabRefs={},n.panelRefs={},n}return l()(t,e),t.prototype.render=function(){var e=this,t=this.props,n=t.children,a=t.toggleRender,r=this.calcTabMetadata(c.a.Children.map(n,function(e,t){return{title:e?e.props.title:"",name:e&&e.props.name?e.props.name:"tab"+t.toString(),toggleRender:e&&e.props.toggleRender?e.props.toggleRender:a||null}})),o=this.state.activeTabId,l=this.getSelectedTab(o,this.tabsById);return c.a.createElement("div",{className:"tabs-container"},c.a.createElement("ul",{role:"tablist"},r.tabMetadata.map(function(t){return c.a.createElement("li",{key:t.tabId,role:"presentation"},c.a.createElement("div",{id:t.tabId,role:"tab",ref:function(n){return e.registerTabRef(t.tabId,n)},tabIndex:t.tabId===l?"0":"-1",onClick:function(n){e.onClickHandler(n,t)},"aria-controls":e.panelIdByTabId[t.tabId],onKeyUp:e.onKeyUpHandler,"aria-selected":t.tabId===l?"true":null},t.toggleRender?t.toggleRender({title:t.title,name:t.name,isActive:t.tabId===l}):c.a.createElement("span",null,t.title)))})),c.a.Children.map(n,function(t,n){var a=r.tabPanelMetadata[n];return t?c.a.cloneElement(t,{key:a.tabId,tabId:a.tabId,panelId:a.panelId,ref:function(t){e.registerPanelRef(a.tabId,t)},isHidden:a.tabId!==l}):t}))},t}(i.Component);E.propTypes={toggleRender:d.a.func},E.Tab=T;t.a=E}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.