react-tabs - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0

CHANGELOG.md

 # Changelog
 
+### 0.8.0 (Sep 14, 2016)
+
+- Allow other components inside TabList (#123)
+
+### 0.7.0 (Jul 05, 2016)
+
+- Feature/add custom active and disabled class (#108)
+- Remove aria-expanded attribute (#71)
+- Fix warning with react 15.2
+
 ### 0.6.2 (Jun 24, 2016)
@@ -4,0 +14,0 @@

dist/react-tabs.js

@@ -136,2 +136,6 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	
+	var _Tab = __webpack_require__(8);
+	
+	var _Tab2 = _interopRequireDefault(_Tab);
+	
 	function _interopRequireDefault(obj) {
@@ -340,9 +344,13 @@ return obj && obj.__esModule ? obj : { default: obj };
 	
-	            return (0, _react.cloneElement)(tab, {
-	              ref: ref,
-	              id: id,
-	              panelId: panelId,
-	              selected: selected,
-	              focus: focus
-	            });
+	            if (tab.type === _Tab2.default) {
+	              return (0, _react.cloneElement)(tab, {
+	                ref: ref,
+	                id: id,
+	                panelId: panelId,
+	                selected: selected,
+	                focus: focus
+	              });
+	            }
+	
+	            return tab;
 	          })
@@ -492,2 +500,3 @@ });
 	
+	
 	    delete attributes.selectedIndex;
@@ -678,4 +687,2 @@ delete attributes.onSelect;
 	          tabsCount++;
-	        } else {
-	          error = new Error('Expected \'Tab\' but found \'' + (c.type.displayName || c.type) + '\'');
 	        }
@@ -830,2 +837,6 @@ });
 	
+	var _Tab = __webpack_require__(8);
+	
+	var _Tab2 = _interopRequireDefault(_Tab);
+	
 	function _interopRequireDefault(obj) {
@@ -843,6 +854,15 @@ return obj && obj.__esModule ? obj : { default: obj };
 	  return _react2.default.Children.map(props.children, function (child) {
-	    return _react2.default.cloneElement(child, {
+	    // if child is not a tab we don't need to clone it
+	    // since we don't need to add custom props
+	
+	    if (child.type !== _Tab2.default) {
+	      return child;
+	    }
+	
+	    var clonedProps = {
 	      activeTabClassName: props.activeTabClassName,
 	      disabledTabClassName: props.disabledTabClassName
-	    });
+	    };
+	
+	    return _react2.default.cloneElement(child, clonedProps);
 	  });
@@ -849,0 +869,0 @@ }

dist/react-tabs.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("ReactDOM")):"function"==typeof define&&define.amd?define(["React","ReactDOM"],t):"object"==typeof exports?exports.ReactTabs=t(require("React"),require("ReactDOM")):e.ReactTabs=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(a){if(r[a])return r[a].exports;var n=r[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0}),t.TabPanel=t.Tab=t.TabList=t.Tabs=void 0;var n=r(1),s=a(n),o=r(9),l=a(o),i=r(8),c=a(i),d=r(11),u=a(d);t.Tabs=s["default"],t.TabList=l["default"],t.Tab=c["default"],t.TabPanel=u["default"],t["default"]={Tabs:s["default"],TabList:l["default"],Tab:c["default"],TabPanel:u["default"]}},function(e,t,r){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}function n(e,t){var r={};for(var a in e)t.indexOf(a)>=0||Object.prototype.hasOwnProperty.call(e,a)&&(r[a]=e[a]);return r}function s(e){return"LI"===e.nodeName&&"tab"===e.getAttribute("role")}function o(e){return"true"===e.getAttribute("aria-disabled")}var l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},i=r(2),c=a(i),d=r(3),u=r(4),p=a(u),f=r(5),b=a(f),T=r(6),h=a(T),y=r(7),v=a(y),m=!0;e.exports=c["default"].createClass({displayName:"Tabs",propTypes:{className:i.PropTypes.string,selectedIndex:i.PropTypes.number,onSelect:i.PropTypes.func,focus:i.PropTypes.bool,children:v["default"],forceRenderTabPanel:i.PropTypes.bool},childContextTypes:{forceRenderTabPanel:i.PropTypes.bool},statics:{setUseDefaultStyles:function(e){m=e}},getDefaultProps:function(){return{selectedIndex:-1,focus:!1,forceRenderTabPanel:!1}},getInitialState:function(){return this.copyPropsToState(this.props,this.state)},getChildContext:function(){return{forceRenderTabPanel:this.props.forceRenderTabPanel}},componentDidMount:function(){m&&(0,b["default"])(r(10))},componentWillReceiveProps:function(e){var t=this;this.setState(function(r){return t.copyPropsToState(e,r)})},setSelected:function(e,t){if(e!==this.state.selectedIndex&&!(e<0||e>=this.getTabsCount())){var r=this.state.selectedIndex,a=!1;"function"==typeof this.props.onSelect&&(a=this.props.onSelect(e,r)===!1),a||this.setState({selectedIndex:e,focus:t===!0})}},getNextTab:function(e){for(var t=this.getTabsCount(),r=e+1;r<t;r++){var a=this.getTab(r);if(!o((0,d.findDOMNode)(a)))return r}for(var n=0;n<e;n++){var s=this.getTab(n);if(!o((0,d.findDOMNode)(s)))return n}return e},getPrevTab:function(e){for(var t=e;t--;){var r=this.getTab(t);if(!o((0,d.findDOMNode)(r)))return t}for(t=this.getTabsCount();t-- >e;){var a=this.getTab(t);if(!o((0,d.findDOMNode)(a)))return t}return e},getTabsCount:function(){return this.props.children&&this.props.children[0]?c["default"].Children.count(this.props.children[0].props.children):0},getPanelsCount:function(){return c["default"].Children.count(this.props.children.slice(1))},getTabList:function(){return this.refs.tablist},getTab:function(e){return this.refs["tabs-"+e]},getPanel:function(e){return this.refs["panels-"+e]},getChildren:function(){for(var e=0,t=0,r=this.props.children,a=this.state,n=this.tabIds=this.tabIds||[],s=this.panelIds=this.panelIds||[],o=this.tabIds.length-this.getTabsCount();o++<0;)n.push((0,h["default"])()),s.push((0,h["default"])());return c["default"].Children.map(r,function(r){if(null===r)return null;var o=null;if(0===t++)o=(0,i.cloneElement)(r,{ref:"tablist",children:c["default"].Children.map(r.props.children,function(t){if(null===t)return null;var r="tabs-"+e,o=n[e],l=s[e],c=a.selectedIndex===e,d=c&&a.focus;return e++,(0,i.cloneElement)(t,{ref:r,id:o,panelId:l,selected:c,focus:d})})}),e=0;else{var l="panels-"+e,d=s[e],u=n[e],p=a.selectedIndex===e;e++,o=(0,i.cloneElement)(r,{ref:l,id:d,tabId:u,selected:p})}return o})},handleKeyDown:function(e){if(this.isTabFromContainer(e.target)){var t=this.state.selectedIndex,r=!1;37===e.keyCode||38===e.keyCode?(t=this.getPrevTab(t),r=!0):39!==e.keyCode&&40!==e.keyCode||(t=this.getNextTab(t),r=!0),r&&e.preventDefault(),this.setSelected(t,!0)}},handleClick:function(e){var t=e.target;do if(this.isTabFromContainer(t)){if(o(t))return;var r=[].slice.call(t.parentNode.children).indexOf(t);return void this.setSelected(r)}while(null!==(t=t.parentNode))},copyPropsToState:function(e,t){var r=e.selectedIndex;return r===-1&&(r=t&&t.selectedIndex?t.selectedIndex:0),{selectedIndex:r,focus:e.focus}},isTabFromContainer:function(e){if(!s(e))return!1;var t=e.parentElement,r=(0,d.findDOMNode)(this);do{if(t===r)return!0;if(t.getAttribute("data-tabs"))break;t=t.parentElement}while(t);return!1},render:function(){var e=this;this.state.focus&&setTimeout(function(){e.state.focus=!1},0);var t=this.props,r=t.className,a=n(t,["className"]);return delete a.selectedIndex,delete a.onSelect,delete a.focus,delete a.children,delete a.forceRenderTabPanel,delete a.onClick,delete a.onKeyDown,c["default"].createElement("div",l({},a,{className:(0,p["default"])("ReactTabs","react-tabs",r),onClick:this.handleClick,onKeyDown:this.handleKeyDown,"data-tabs":!0}),this.getChildren())}})},function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t,r){var a,n;/*!
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("ReactDOM")):"function"==typeof define&&define.amd?define(["React","ReactDOM"],t):"object"==typeof exports?exports.ReactTabs=t(require("React"),require("ReactDOM")):e.ReactTabs=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(a){if(r[a])return r[a].exports;var n=r[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0}),t.TabPanel=t.Tab=t.TabList=t.Tabs=void 0;var n=r(1),s=a(n),o=r(9),l=a(o),i=r(8),c=a(i),d=r(11),u=a(d);t.Tabs=s["default"],t.TabList=l["default"],t.Tab=c["default"],t.TabPanel=u["default"],t["default"]={Tabs:s["default"],TabList:l["default"],Tab:c["default"],TabPanel:u["default"]}},function(e,t,r){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}function n(e,t){var r={};for(var a in e)t.indexOf(a)>=0||Object.prototype.hasOwnProperty.call(e,a)&&(r[a]=e[a]);return r}function s(e){return"LI"===e.nodeName&&"tab"===e.getAttribute("role")}function o(e){return"true"===e.getAttribute("aria-disabled")}var l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},i=r(2),c=a(i),d=r(3),u=r(4),p=a(u),f=r(5),b=a(f),h=r(6),T=a(h),y=r(7),v=a(y),m=r(8),P=a(m),x=!0;e.exports=c["default"].createClass({displayName:"Tabs",propTypes:{className:i.PropTypes.string,selectedIndex:i.PropTypes.number,onSelect:i.PropTypes.func,focus:i.PropTypes.bool,children:v["default"],forceRenderTabPanel:i.PropTypes.bool},childContextTypes:{forceRenderTabPanel:i.PropTypes.bool},statics:{setUseDefaultStyles:function(e){x=e}},getDefaultProps:function(){return{selectedIndex:-1,focus:!1,forceRenderTabPanel:!1}},getInitialState:function(){return this.copyPropsToState(this.props,this.state)},getChildContext:function(){return{forceRenderTabPanel:this.props.forceRenderTabPanel}},componentDidMount:function(){x&&(0,b["default"])(r(10))},componentWillReceiveProps:function(e){var t=this;this.setState(function(r){return t.copyPropsToState(e,r)})},setSelected:function(e,t){if(e!==this.state.selectedIndex&&!(e<0||e>=this.getTabsCount())){var r=this.state.selectedIndex,a=!1;"function"==typeof this.props.onSelect&&(a=this.props.onSelect(e,r)===!1),a||this.setState({selectedIndex:e,focus:t===!0})}},getNextTab:function(e){for(var t=this.getTabsCount(),r=e+1;r<t;r++){var a=this.getTab(r);if(!o((0,d.findDOMNode)(a)))return r}for(var n=0;n<e;n++){var s=this.getTab(n);if(!o((0,d.findDOMNode)(s)))return n}return e},getPrevTab:function(e){for(var t=e;t--;){var r=this.getTab(t);if(!o((0,d.findDOMNode)(r)))return t}for(t=this.getTabsCount();t-- >e;){var a=this.getTab(t);if(!o((0,d.findDOMNode)(a)))return t}return e},getTabsCount:function(){return this.props.children&&this.props.children[0]?c["default"].Children.count(this.props.children[0].props.children):0},getPanelsCount:function(){return c["default"].Children.count(this.props.children.slice(1))},getTabList:function(){return this.refs.tablist},getTab:function(e){return this.refs["tabs-"+e]},getPanel:function(e){return this.refs["panels-"+e]},getChildren:function(){for(var e=0,t=0,r=this.props.children,a=this.state,n=this.tabIds=this.tabIds||[],s=this.panelIds=this.panelIds||[],o=this.tabIds.length-this.getTabsCount();o++<0;)n.push((0,T["default"])()),s.push((0,T["default"])());return c["default"].Children.map(r,function(r){if(null===r)return null;var o=null;if(0===t++)o=(0,i.cloneElement)(r,{ref:"tablist",children:c["default"].Children.map(r.props.children,function(t){if(null===t)return null;var r="tabs-"+e,o=n[e],l=s[e],c=a.selectedIndex===e,d=c&&a.focus;return e++,t.type===P["default"]?(0,i.cloneElement)(t,{ref:r,id:o,panelId:l,selected:c,focus:d}):t})}),e=0;else{var l="panels-"+e,d=s[e],u=n[e],p=a.selectedIndex===e;e++,o=(0,i.cloneElement)(r,{ref:l,id:d,tabId:u,selected:p})}return o})},handleKeyDown:function(e){if(this.isTabFromContainer(e.target)){var t=this.state.selectedIndex,r=!1;37===e.keyCode||38===e.keyCode?(t=this.getPrevTab(t),r=!0):39!==e.keyCode&&40!==e.keyCode||(t=this.getNextTab(t),r=!0),r&&e.preventDefault(),this.setSelected(t,!0)}},handleClick:function(e){var t=e.target;do if(this.isTabFromContainer(t)){if(o(t))return;var r=[].slice.call(t.parentNode.children).indexOf(t);return void this.setSelected(r)}while(null!==(t=t.parentNode))},copyPropsToState:function(e,t){var r=e.selectedIndex;return r===-1&&(r=t&&t.selectedIndex?t.selectedIndex:0),{selectedIndex:r,focus:e.focus}},isTabFromContainer:function(e){if(!s(e))return!1;var t=e.parentElement,r=(0,d.findDOMNode)(this);do{if(t===r)return!0;if(t.getAttribute("data-tabs"))break;t=t.parentElement}while(t);return!1},render:function(){var e=this;this.state.focus&&setTimeout(function(){e.state.focus=!1},0);var t=this.props,r=t.className,a=n(t,["className"]);return delete a.selectedIndex,delete a.onSelect,delete a.focus,delete a.children,delete a.forceRenderTabPanel,delete a.onClick,delete a.onKeyDown,c["default"].createElement("div",l({},a,{className:(0,p["default"])("ReactTabs","react-tabs",r),onClick:this.handleClick,onKeyDown:this.handleKeyDown,"data-tabs":!0}),this.getChildren())}})},function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t,r){var a,n;/*!
 	  Copyright (c) 2016 Jed Watson.
@@ -6,3 +6,3 @@ Licensed under the MIT License (MIT), see
 	*/
-!function(){"use strict";function r(){for(var e=[],t=0;t<arguments.length;t++){var a=arguments[t];if(a){var n=typeof a;if("string"===n||"number"===n)e.push(a);else if(Array.isArray(a))e.push(r.apply(null,a));else if("object"===n)for(var o in a)s.call(a,o)&&a[o]&&e.push(o)}}return e.join(" ")}var s={}.hasOwnProperty;"undefined"!=typeof e&&e.exports?e.exports=r:(a=[],n=function(){return r}.apply(t,a),!(void 0!==n&&(e.exports=n)))}()},function(e,t,r){!function(){function t(e){var t=[];for(var a in e)t.push(r(a,e[a]));n(t)}function r(e,t){return e+" {\n"+a(t)+"\n}"}function a(e){var t=[];for(var r in e)t.push("  "+r+": "+e[r]+";");return t.join("\n")}function n(e){var t=document.getElementById("jss-styles");if(!t){t=document.createElement("style"),t.setAttribute("id","jss-styles");var r=document.getElementsByTagName("head")[0];r.insertBefore(t,r.firstChild)}var a=document.createTextNode(e.join("\n\n"));t.appendChild(a)}e.exports=t}()},function(e,t){"use strict";var r=0;e.exports=function(){return"react-tabs-"+r++}},function(e,t,r){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}var n=r(2),s=a(n),o=r(8),l=a(o),i=r(9),c=a(i);e.exports=function(e,t){var r=void 0,a=0,n=0,o=e[t];return s["default"].Children.forEach(o,function(e){null!==e&&(e.type===c["default"]?s["default"].Children.forEach(e.props.children,function(e){null!==e&&(e.type===l["default"]?a++:r=new Error("Expected 'Tab' but found '"+(e.type.displayName||e.type)+"'"))}):"TabPanel"===e.type.displayName?n++:r=new Error("Expected 'TabList' or 'TabPanel' but found '"+(e.type.displayName||e.type)+"'"))}),a!==n&&(r=new Error("There should be an equal number of 'Tabs' and 'TabPanels'."+("Received "+a+" 'Tabs' and "+n+" 'TabPanels'."))),r}},function(e,t,r){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function s(e,t){var r={};for(var a in e)t.indexOf(a)>=0||Object.prototype.hasOwnProperty.call(e,a)&&(r[a]=e[a]);return r}var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},l=r(2),i=a(l),c=r(3),d=r(4),u=a(d);e.exports=i["default"].createClass({displayName:"Tab",propTypes:{className:l.PropTypes.string,id:l.PropTypes.string,focus:l.PropTypes.bool,selected:l.PropTypes.bool,disabled:l.PropTypes.bool,activeTabClassName:l.PropTypes.string,disabledTabClassName:l.PropTypes.string,panelId:l.PropTypes.string,children:l.PropTypes.oneOfType([l.PropTypes.array,l.PropTypes.object,l.PropTypes.string])},getDefaultProps:function(){return{focus:!1,selected:!1,id:null,panelId:null,activeTabClassName:"ReactTabs__Tab--selected",disabledTabClassName:"ReactTabs__Tab--disabled"}},componentDidMount:function(){this.checkFocus()},componentDidUpdate:function(){this.checkFocus()},checkFocus:function(){this.props.selected&&this.props.focus&&(0,c.findDOMNode)(this).focus()},render:function(){var e,t=this.props,r=t.selected,a=t.disabled,l=t.panelId,c=t.activeTabClassName,d=t.disabledTabClassName,p=t.className,f=t.children,b=t.id,T=s(t,["selected","disabled","panelId","activeTabClassName","disabledTabClassName","className","children","id"]);return delete T.focus,i["default"].createElement("li",o({},T,{className:(0,u["default"])("ReactTabs__Tab",p,(e={},n(e,c,r),n(e,d,a),e)),role:"tab",id:b,"aria-selected":r?"true":"false","aria-disabled":a?"true":"false","aria-controls":l,tabIndex:r?"0":null}),f)}})},function(e,t,r){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}function n(e,t){var r={};for(var a in e)t.indexOf(a)>=0||Object.prototype.hasOwnProperty.call(e,a)&&(r[a]=e[a]);return r}function s(e){return i["default"].Children.map(e.children,function(t){return i["default"].cloneElement(t,{activeTabClassName:e.activeTabClassName,disabledTabClassName:e.disabledTabClassName})})}var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},l=r(2),i=a(l),c=r(4),d=a(c);e.exports=i["default"].createClass({displayName:"TabList",propTypes:{className:l.PropTypes.string,activeTabClassName:l.PropTypes.string,disabledTabClassName:l.PropTypes.string,children:l.PropTypes.oneOfType([l.PropTypes.object,l.PropTypes.array])},render:function(){var e=this.props,t=e.className,r=e.activeTabClassName,a=e.disabledTabClassName,l=e.children,c=n(e,["className","activeTabClassName","disabledTabClassName","children"]);return i["default"].createElement("ul",o({},c,{className:(0,d["default"])("ReactTabs__TabList",t),role:"tablist"}),s({activeTabClassName:r,disabledTabClassName:a,children:l}))}})},function(e,t){"use strict";e.exports={".react-tabs [role=tablist]":{"border-bottom":"1px solid #aaa",margin:"0 0 10px",padding:"0"},".react-tabs [role=tab]":{display:"inline-block",border:"1px solid transparent","border-bottom":"none",bottom:"-1px",position:"relative","list-style":"none",padding:"6px 12px",cursor:"pointer"},".react-tabs [role=tab][aria-selected=true]":{background:"#fff","border-color":"#aaa",color:"black","border-radius":"5px 5px 0 0","-moz-border-radius":"5px 5px 0 0","-webkit-border-radius":"5px 5px 0 0"},".react-tabs [role=tab][aria-disabled=true]":{color:"GrayText",cursor:"default"},".react-tabs [role=tab]:focus":{"box-shadow":"0 0 5px hsl(208, 99%, 50%)","border-color":"hsl(208, 99%, 50%)",outline:"none"},".react-tabs [role=tab]:focus:after":{content:'""',position:"absolute",height:"5px",left:"-4px",right:"-4px",bottom:"-5px",background:"#fff"}}},function(e,t,r){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}function n(e,t){var r={};for(var a in e)t.indexOf(a)>=0||Object.prototype.hasOwnProperty.call(e,a)&&(r[a]=e[a]);return r}var s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},o=r(2),l=a(o),i=r(4),c=a(i);e.exports=l["default"].createClass({displayName:"TabPanel",propTypes:{children:o.PropTypes.oneOfType([o.PropTypes.array,o.PropTypes.object,o.PropTypes.string]),className:o.PropTypes.string,id:o.PropTypes.string,selected:o.PropTypes.bool,style:o.PropTypes.object,tabId:o.PropTypes.string},contextTypes:{forceRenderTabPanel:o.PropTypes.bool},getDefaultProps:function(){return{selected:!1,id:null,tabId:null}},render:function(){var e=this.props,t=e.className,r=e.children,a=e.selected,o=e.id,i=e.tabId,d=e.style,u=n(e,["className","children","selected","id","tabId","style"]);return l["default"].createElement("div",s({},u,{className:(0,c["default"])("ReactTabs__TabPanel",t,{"ReactTabs__TabPanel--selected":a}),role:"tabpanel",id:o,"aria-labelledby":i,style:s({},d,{display:a?null:"none"})}),this.context.forceRenderTabPanel||a?r:null)}})}])});
+!function(){"use strict";function r(){for(var e=[],t=0;t<arguments.length;t++){var a=arguments[t];if(a){var n=typeof a;if("string"===n||"number"===n)e.push(a);else if(Array.isArray(a))e.push(r.apply(null,a));else if("object"===n)for(var o in a)s.call(a,o)&&a[o]&&e.push(o)}}return e.join(" ")}var s={}.hasOwnProperty;"undefined"!=typeof e&&e.exports?e.exports=r:(a=[],n=function(){return r}.apply(t,a),!(void 0!==n&&(e.exports=n)))}()},function(e,t,r){!function(){function t(e){var t=[];for(var a in e)t.push(r(a,e[a]));n(t)}function r(e,t){return e+" {\n"+a(t)+"\n}"}function a(e){var t=[];for(var r in e)t.push("  "+r+": "+e[r]+";");return t.join("\n")}function n(e){var t=document.getElementById("jss-styles");if(!t){t=document.createElement("style"),t.setAttribute("id","jss-styles");var r=document.getElementsByTagName("head")[0];r.insertBefore(t,r.firstChild)}var a=document.createTextNode(e.join("\n\n"));t.appendChild(a)}e.exports=t}()},function(e,t){"use strict";var r=0;e.exports=function(){return"react-tabs-"+r++}},function(e,t,r){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}var n=r(2),s=a(n),o=r(8),l=a(o),i=r(9),c=a(i);e.exports=function(e,t){var r=void 0,a=0,n=0,o=e[t];return s["default"].Children.forEach(o,function(e){null!==e&&(e.type===c["default"]?s["default"].Children.forEach(e.props.children,function(e){null!==e&&e.type===l["default"]&&a++}):"TabPanel"===e.type.displayName?n++:r=new Error("Expected 'TabList' or 'TabPanel' but found '"+(e.type.displayName||e.type)+"'"))}),a!==n&&(r=new Error("There should be an equal number of 'Tabs' and 'TabPanels'."+("Received "+a+" 'Tabs' and "+n+" 'TabPanels'."))),r}},function(e,t,r){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function s(e,t){var r={};for(var a in e)t.indexOf(a)>=0||Object.prototype.hasOwnProperty.call(e,a)&&(r[a]=e[a]);return r}var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},l=r(2),i=a(l),c=r(3),d=r(4),u=a(d);e.exports=i["default"].createClass({displayName:"Tab",propTypes:{className:l.PropTypes.string,id:l.PropTypes.string,focus:l.PropTypes.bool,selected:l.PropTypes.bool,disabled:l.PropTypes.bool,activeTabClassName:l.PropTypes.string,disabledTabClassName:l.PropTypes.string,panelId:l.PropTypes.string,children:l.PropTypes.oneOfType([l.PropTypes.array,l.PropTypes.object,l.PropTypes.string])},getDefaultProps:function(){return{focus:!1,selected:!1,id:null,panelId:null,activeTabClassName:"ReactTabs__Tab--selected",disabledTabClassName:"ReactTabs__Tab--disabled"}},componentDidMount:function(){this.checkFocus()},componentDidUpdate:function(){this.checkFocus()},checkFocus:function(){this.props.selected&&this.props.focus&&(0,c.findDOMNode)(this).focus()},render:function(){var e,t=this.props,r=t.selected,a=t.disabled,l=t.panelId,c=t.activeTabClassName,d=t.disabledTabClassName,p=t.className,f=t.children,b=t.id,h=s(t,["selected","disabled","panelId","activeTabClassName","disabledTabClassName","className","children","id"]);return delete h.focus,i["default"].createElement("li",o({},h,{className:(0,u["default"])("ReactTabs__Tab",p,(e={},n(e,c,r),n(e,d,a),e)),role:"tab",id:b,"aria-selected":r?"true":"false","aria-disabled":a?"true":"false","aria-controls":l,tabIndex:r?"0":null}),f)}})},function(e,t,r){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}function n(e,t){var r={};for(var a in e)t.indexOf(a)>=0||Object.prototype.hasOwnProperty.call(e,a)&&(r[a]=e[a]);return r}function s(e){return i["default"].Children.map(e.children,function(t){if(t.type!==p["default"])return t;var r={activeTabClassName:e.activeTabClassName,disabledTabClassName:e.disabledTabClassName};return i["default"].cloneElement(t,r)})}var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},l=r(2),i=a(l),c=r(4),d=a(c),u=r(8),p=a(u);e.exports=i["default"].createClass({displayName:"TabList",propTypes:{className:l.PropTypes.string,activeTabClassName:l.PropTypes.string,disabledTabClassName:l.PropTypes.string,children:l.PropTypes.oneOfType([l.PropTypes.object,l.PropTypes.array])},render:function(){var e=this.props,t=e.className,r=e.activeTabClassName,a=e.disabledTabClassName,l=e.children,c=n(e,["className","activeTabClassName","disabledTabClassName","children"]);return i["default"].createElement("ul",o({},c,{className:(0,d["default"])("ReactTabs__TabList",t),role:"tablist"}),s({activeTabClassName:r,disabledTabClassName:a,children:l}))}})},function(e,t){"use strict";e.exports={".react-tabs [role=tablist]":{"border-bottom":"1px solid #aaa",margin:"0 0 10px",padding:"0"},".react-tabs [role=tab]":{display:"inline-block",border:"1px solid transparent","border-bottom":"none",bottom:"-1px",position:"relative","list-style":"none",padding:"6px 12px",cursor:"pointer"},".react-tabs [role=tab][aria-selected=true]":{background:"#fff","border-color":"#aaa",color:"black","border-radius":"5px 5px 0 0","-moz-border-radius":"5px 5px 0 0","-webkit-border-radius":"5px 5px 0 0"},".react-tabs [role=tab][aria-disabled=true]":{color:"GrayText",cursor:"default"},".react-tabs [role=tab]:focus":{"box-shadow":"0 0 5px hsl(208, 99%, 50%)","border-color":"hsl(208, 99%, 50%)",outline:"none"},".react-tabs [role=tab]:focus:after":{content:'""',position:"absolute",height:"5px",left:"-4px",right:"-4px",bottom:"-5px",background:"#fff"}}},function(e,t,r){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}function n(e,t){var r={};for(var a in e)t.indexOf(a)>=0||Object.prototype.hasOwnProperty.call(e,a)&&(r[a]=e[a]);return r}var s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},o=r(2),l=a(o),i=r(4),c=a(i);e.exports=l["default"].createClass({displayName:"TabPanel",propTypes:{children:o.PropTypes.oneOfType([o.PropTypes.array,o.PropTypes.object,o.PropTypes.string]),className:o.PropTypes.string,id:o.PropTypes.string,selected:o.PropTypes.bool,style:o.PropTypes.object,tabId:o.PropTypes.string},contextTypes:{forceRenderTabPanel:o.PropTypes.bool},getDefaultProps:function(){return{selected:!1,id:null,tabId:null}},render:function(){var e=this.props,t=e.className,r=e.children,a=e.selected,o=e.id,i=e.tabId,d=e.style,u=n(e,["className","children","selected","id","tabId","style"]);return l["default"].createElement("div",s({},u,{className:(0,c["default"])("ReactTabs__TabPanel",t,{"ReactTabs__TabPanel--selected":a}),role:"tabpanel",id:o,"aria-labelledby":i,style:s({},d,{display:a?null:"none"})}),this.context.forceRenderTabPanel||a?r:null)}})}])});
 //# sourceMappingURL=react-tabs.min.js.map

lib/components/TabList.js

@@ -13,2 +13,6 @@ 'use strict';
 
+var _Tab = require('./Tab');
+
+var _Tab2 = _interopRequireDefault(_Tab);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -20,6 +24,15 @@
   return _react2.default.Children.map(props.children, function (child) {
-    return _react2.default.cloneElement(child, {
+    // if child is not a tab we don't need to clone it
+    // since we don't need to add custom props
+
+    if (child.type !== _Tab2.default) {
+      return child;
+    }
+
+    var clonedProps = {
       activeTabClassName: props.activeTabClassName,
       disabledTabClassName: props.disabledTabClassName
-    });
+    };
+
+    return _react2.default.cloneElement(child, clonedProps);
   });
@@ -26,0 +39,0 @@ }

lib/components/Tabs.js

@@ -27,2 +27,6 @@ 'use strict';
 
+var _Tab = require('./Tab');
+
+var _Tab2 = _interopRequireDefault(_Tab);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -225,9 +229,13 @@
 
-            return (0, _react.cloneElement)(tab, {
-              ref: ref,
-              id: id,
-              panelId: panelId,
-              selected: selected,
-              focus: focus
-            });
+            if (tab.type === _Tab2.default) {
+              return (0, _react.cloneElement)(tab, {
+                ref: ref,
+                id: id,
+                panelId: panelId,
+                selected: selected,
+                focus: focus
+              });
+            }
+
+            return tab;
           })
@@ -234,0 +242,0 @@ });

lib/helpers/childrenPropType.js

@@ -40,4 +40,2 @@ 'use strict';
           tabsCount++;
-        } else {
-          error = new Error('Expected \'Tab\' but found \'' + (c.type.displayName || c.type) + '\'');
         }
@@ -44,0 +42,0 @@ });

package.json

 {
   "name": "react-tabs",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "React tabs component",
@@ -5,0 +5,0 @@ "main": "lib/main.js",

README.md

@@ -103,4 +103,12 @@ # react-tabs [![Build Status](https://travis-ci.org/reactjs/react-tabs.svg?branch=master)](https://travis-ci.org/reactjs/react-tabs)
 
+## Styling
+
+You can disable the default styling by calling this method once:
+
+```
+Tabs.setUseDefaultStyles(false);
+```
+
 ## License
 
 MIT

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

207583

increased by3.38%

Lines of code

1515

increased by1.54%

Number of lines in readme file

114

increased by7.55%

No dependency changes