Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-tabs

Package Overview
Dependencies
Maintainers
2
Versions
53
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-tabs - npm Package Compare versions

Comparing version 4.2.1 to 5.0.0

index.d.ts

782

dist/react-tabs.development.js

@@ -12,20 +12,8 @@ (function (global, factory) {

function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
function makeTypeChecker(tabsRole){return function(element){return !!element.type&&element.type.tabsRole===tabsRole}}var isTab=makeTypeChecker("Tab");var isTabList=makeTypeChecker("TabList");var isTabPanel=makeTypeChecker("TabPanel");
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
function isTabChild(child){return isTab(child)||isTabList(child)||isTabPanel(child)}function deepMap(children,callback){return React.Children.map(children,function(child){if(child===null)return null;if(isTabChild(child)){return callback(child)}if(child.props&&child.props.children&&typeof child.props.children==="object"){return React.cloneElement(child,Object.assign({},child.props,{children:deepMap(child.props.children,callback)}))}return child})}function deepForEach(children,callback){return React.Children.forEach(children,function(child){if(child===null)return;if(isTab(child)||isTabPanel(child)){callback(child);}else if(child.props&&child.props.children&&typeof child.props.children==="object"){if(isTabList(child))callback(child);deepForEach(child.props.children,callback);}})}
return target;
};
function childrenPropType(props,propName,componentName){var error;var tabsCount=0;var panelsCount=0;var tabListFound=false;var listTabs=[];var children=props[propName];deepForEach(children,function(child){if(isTabList(child)){if(child.props&&child.props.children&&typeof child.props.children==="object"){deepForEach(child.props.children,function(listChild){return listTabs.push(listChild)});}if(tabListFound){error=new Error("Found multiple 'TabList' components inside 'Tabs'. Only one is allowed.");}tabListFound=true;}if(isTab(child)){if(!tabListFound||listTabs.indexOf(child)===-1){error=new Error("Found a 'Tab' component outside of the 'TabList' component. 'Tab' components "+"have to be inside the 'TabList' component.");}tabsCount++;}else if(isTabPanel(child)){panelsCount++;}});if(!error&&tabsCount!==panelsCount){error=new Error("There should be an equal number of 'Tab' and 'TabPanel' in `"+componentName+"`. "+("Received "+tabsCount+" 'Tab' and "+panelsCount+" 'TabPanel'."));}return error}function onSelectPropType(props,propName,componentName,location,propFullName){var prop=props[propName];var name=propFullName||propName;var error=null;if(prop&&typeof prop!=="function"){error=new Error("Invalid "+location+" `"+name+"` of type `"+typeof prop+"` supplied "+("to `"+componentName+"`, expected `function`."));}else if(props.selectedIndex!=null&&prop==null){error=new Error("The "+location+" `"+name+"` is marked as required in `"+componentName+"`, but "+"its value is `undefined` or `null`.\n"+"`onSelect` is required when `selectedIndex` is also set. Not doing so will "+"make the tabs not do anything, as `selectedIndex` indicates that you want to "+"handle the selected tab yourself.\n"+"If you only want to set the inital tab replace `selectedIndex` with `defaultIndex`.");}return error}function selectedIndexPropType(props,propName,componentName,location,propFullName){var prop=props[propName];var name=propFullName||propName;var error=null;if(prop!=null&&typeof prop!=="number"){error=new Error("Invalid "+location+" `"+name+"` of type `"+typeof prop+"` supplied to "+("`"+componentName+"`, expected `number`."));}else if(props.defaultIndex!=null&&prop!=null){return new Error("The "+location+" `"+name+"` cannot be used together with `defaultIndex` "+("in `"+componentName+"`.\n")+("Either remove `"+name+"` to let `"+componentName+"` handle the selected ")+"tab internally or remove `defaultIndex` to handle it yourself.")}return error}
return _extends.apply(this, arguments);
}
function _objectWithoutPropertiesLoose(source, excluded) {

@@ -46,117 +34,2 @@ if (source == null) return {};

function makeTypeChecker(tabsRole) {
return function (element) {
return !!element.type && element.type.tabsRole === tabsRole;
};
}
var isTab = makeTypeChecker('Tab');
var isTabList = makeTypeChecker('TabList');
var isTabPanel = makeTypeChecker('TabPanel');
function isTabChild(child) {
return isTab(child) || isTabList(child) || isTabPanel(child);
}
function deepMap(children, callback) {
return React.Children.map(children, function (child) {
// null happens when conditionally rendering TabPanel/Tab
// see https://github.com/reactjs/react-tabs/issues/37
if (child === null) return null;
if (isTabChild(child)) {
return callback(child);
}
if (child.props && child.props.children && typeof child.props.children === 'object') {
// Clone the child that has children and map them too
return /*#__PURE__*/React.cloneElement(child, _extends({}, child.props, {
children: deepMap(child.props.children, callback)
}));
}
return child;
});
}
function deepForEach(children, callback) {
return React.Children.forEach(children, function (child) {
// null happens when conditionally rendering TabPanel/Tab
// see https://github.com/reactjs/react-tabs/issues/37
if (child === null) return;
if (isTab(child) || isTabPanel(child)) {
callback(child);
} else if (child.props && child.props.children && typeof child.props.children === 'object') {
if (isTabList(child)) callback(child);
deepForEach(child.props.children, callback);
}
});
}
function childrenPropType(props, propName, componentName) {
var error;
var tabsCount = 0;
var panelsCount = 0;
var tabListFound = false;
var listTabs = [];
var children = props[propName];
deepForEach(children, function (child) {
if (isTabList(child)) {
if (child.props && child.props.children && typeof child.props.children === 'object') {
deepForEach(child.props.children, function (listChild) {
return listTabs.push(listChild);
});
}
if (tabListFound) {
error = new Error("Found multiple 'TabList' components inside 'Tabs'. Only one is allowed.");
}
tabListFound = true;
}
if (isTab(child)) {
if (!tabListFound || listTabs.indexOf(child) === -1) {
error = new Error("Found a 'Tab' component outside of the 'TabList' component. 'Tab' components " + "have to be inside the 'TabList' component.");
}
tabsCount++;
} else if (isTabPanel(child)) {
panelsCount++;
}
});
if (!error && tabsCount !== panelsCount) {
error = new Error("There should be an equal number of 'Tab' and 'TabPanel' in `" + componentName + "`. " + ("Received " + tabsCount + " 'Tab' and " + panelsCount + " 'TabPanel'."));
}
return error;
}
function onSelectPropType(props, propName, componentName, location, propFullName) {
var prop = props[propName];
var name = propFullName || propName;
var error = null;
if (prop && typeof prop !== 'function') {
error = new Error("Invalid " + location + " `" + name + "` of type `" + typeof prop + "` supplied " + ("to `" + componentName + "`, expected `function`."));
} else if (props.selectedIndex != null && prop == null) {
error = new Error("The " + location + " `" + name + "` is marked as required in `" + componentName + "`, but " + "its value is `undefined` or `null`.\n" + "`onSelect` is required when `selectedIndex` is also set. Not doing so will " + "make the tabs not do anything, as `selectedIndex` indicates that you want to " + "handle the selected tab yourself.\n" + "If you only want to set the inital tab replace `selectedIndex` with `defaultIndex`.");
}
return error;
}
function selectedIndexPropType(props, propName, componentName, location, propFullName) {
var prop = props[propName];
var name = propFullName || propName;
var error = null;
if (prop != null && typeof prop !== 'number') {
error = new Error("Invalid " + location + " `" + name + "` of type `" + typeof prop + "` supplied to " + ("`" + componentName + "`, expected `number`."));
} else if (props.defaultIndex != null && prop != null) {
return new Error("The " + location + " `" + name + "` cannot be used together with `defaultIndex` " + ("in `" + componentName + "`.\n") + ("Either remove `" + name + "` to let `" + componentName + "` handle the selected ") + "tab internally or remove `defaultIndex` to handle it yourself.");
}
return error;
}
function toVal(mix) {

@@ -210,650 +83,14 @@ var k,

// Get a universally unique identifier
var count = 0;
function uuid() {
return "react-tabs-" + count++;
}
function reset() {
count = 0;
}
function getTabsCount(children){var tabCount=0;deepForEach(children,function(child){if(isTab(child))tabCount++;});return tabCount}
function getTabsCount(children) {
var tabCount = 0;
deepForEach(children, function (child) {
if (isTab(child)) tabCount++;
});
return tabCount;
}
var _excluded$3=["children","className","disabledTabClassName","domRef","focus","forceRenderTabPanel","onSelect","selectedIndex","selectedTabClassName","selectedTabPanelClassName","environment","disableUpDownKeys"];function isNode(node){return node&&"getAttribute"in node}function isTabNode(node){return isNode(node)&&node.getAttribute("data-rttab")}function isTabDisabled(node){return isNode(node)&&node.getAttribute("aria-disabled")==="true"}var canUseActiveElement;function determineCanUseActiveElement(environment){var env=environment||(typeof window!=="undefined"?window:undefined);try{canUseActiveElement=!!(typeof env!=="undefined"&&env.document&&env.document.activeElement);}catch(e){canUseActiveElement=false;}}var defaultProps$4={className:"react-tabs",focus:false};var propTypes$4={children:childrenPropType,direction:PropTypes__default["default"].oneOf(["rtl","ltr"]),className:PropTypes__default["default"].oneOfType([PropTypes__default["default"].string,PropTypes__default["default"].array,PropTypes__default["default"].object]),disabledTabClassName:PropTypes__default["default"].string,disableUpDownKeys:PropTypes__default["default"].bool,domRef:PropTypes__default["default"].func,focus:PropTypes__default["default"].bool,forceRenderTabPanel:PropTypes__default["default"].bool,onSelect:PropTypes__default["default"].func.isRequired,selectedIndex:PropTypes__default["default"].number.isRequired,selectedTabClassName:PropTypes__default["default"].string,selectedTabPanelClassName:PropTypes__default["default"].string,environment:PropTypes__default["default"].object};var UncontrolledTabs=function UncontrolledTabs(props){var tabNodes=React.useRef([]);var tabIds=React.useRef([]);var _ref=React.useRef();function setSelected(index,event){if(index<0||index>=getTabsCount$1())return;var onSelect=props.onSelect,selectedIndex=props.selectedIndex;onSelect(index,selectedIndex,event);}function getNextTab(index){var count=getTabsCount$1();for(var i=index+1;i<count;i++){if(!isTabDisabled(getTab(i))){return i}}for(var _i=0;_i<index;_i++){if(!isTabDisabled(getTab(_i))){return _i}}return index}function getPrevTab(index){var i=index;while(i--){if(!isTabDisabled(getTab(i))){return i}}i=getTabsCount$1();while(i-->index){if(!isTabDisabled(getTab(i))){return i}}return index}function getFirstTab(){var count=getTabsCount$1();for(var i=0;i<count;i++){if(!isTabDisabled(getTab(i))){return i}}return null}function getLastTab(){var i=getTabsCount$1();while(i--){if(!isTabDisabled(getTab(i))){return i}}return null}function getTabsCount$1(){var children=props.children;return getTabsCount(children)}function getTab(index){return tabNodes.current["tabs-"+index]}function getChildren(){var index=0;var children=props.children,disabledTabClassName=props.disabledTabClassName,focus=props.focus,forceRenderTabPanel=props.forceRenderTabPanel,selectedIndex=props.selectedIndex,selectedTabClassName=props.selectedTabClassName,selectedTabPanelClassName=props.selectedTabPanelClassName,environment=props.environment;tabIds.current=tabIds.current||[];var diff=tabIds.current.length-getTabsCount$1();var id=React.useId();while(diff++<0){tabIds.current.push(""+id+tabIds.current.length);}return deepMap(children,function(child){var result=child;if(isTabList(child)){var listIndex=0;var wasTabFocused=false;if(canUseActiveElement==null){determineCanUseActiveElement(environment);}var env=environment||(typeof window!=="undefined"?window:undefined);if(canUseActiveElement&&env){wasTabFocused=React__default["default"].Children.toArray(child.props.children).filter(isTab).some(function(tab,i){return env.document.activeElement===getTab(i)});}result=React.cloneElement(child,{children:deepMap(child.props.children,function(tab){var key="tabs-"+listIndex;var selected=selectedIndex===listIndex;var props={tabRef:function tabRef(node){tabNodes.current[key]=node;},id:tabIds.current[listIndex],selected:selected,focus:selected&&(focus||wasTabFocused)};if(selectedTabClassName)props.selectedClassName=selectedTabClassName;if(disabledTabClassName)props.disabledClassName=disabledTabClassName;listIndex++;return React.cloneElement(tab,props)})});}else if(isTabPanel(child)){var _props={id:tabIds.current[index],selected:selectedIndex===index};if(forceRenderTabPanel)_props.forceRender=forceRenderTabPanel;if(selectedTabPanelClassName)_props.selectedClassName=selectedTabPanelClassName;index++;result=React.cloneElement(child,_props);}return result})}function handleKeyDown(e){var direction=props.direction,disableUpDownKeys=props.disableUpDownKeys;if(isTabFromContainer(e.target)){var index=props.selectedIndex;var preventDefault=false;var useSelectedIndex=false;if(e.code==="Space"||e.keyCode===32||e.code==="Enter"||e.keyCode===13){preventDefault=true;useSelectedIndex=false;handleClick(e);}if(e.code==="ArrowLeft"||e.keyCode===37||!disableUpDownKeys&&(e.keyCode===38||e.code==="ArrowUp")){if(direction==="rtl"){index=getNextTab(index);}else {index=getPrevTab(index);}preventDefault=true;useSelectedIndex=true;}else if(e.code==="ArrowRight"||e.keyCode===39||!disableUpDownKeys&&(e.keyCode===40||e.code==="ArrowDown")){if(direction==="rtl"){index=getPrevTab(index);}else {index=getNextTab(index);}preventDefault=true;useSelectedIndex=true;}else if(e.keyCode===35||e.code==="End"){index=getLastTab();preventDefault=true;useSelectedIndex=true;}else if(e.keyCode===36||e.code==="Home"){index=getFirstTab();preventDefault=true;useSelectedIndex=true;}if(preventDefault){e.preventDefault();}if(useSelectedIndex){setSelected(index,e);}}}function handleClick(e){var node=e.target;do{if(isTabFromContainer(node)){if(isTabDisabled(node)){return}var index=[].slice.call(node.parentNode.children).filter(isTabNode).indexOf(node);setSelected(index,e);return}}while((node=node.parentNode)!=null)}function isTabFromContainer(node){if(!isTabNode(node)){return false}var nodeAncestor=node.parentElement;do{if(nodeAncestor===_ref.current)return true;if(nodeAncestor.getAttribute("data-rttabs"))break;nodeAncestor=nodeAncestor.parentElement;}while(nodeAncestor);return false}props.children;var className=props.className;props.disabledTabClassName;var domRef=props.domRef;props.focus;props.forceRenderTabPanel;props.onSelect;props.selectedIndex;props.selectedTabClassName;props.selectedTabPanelClassName;props.environment;props.disableUpDownKeys;var attributes=_objectWithoutPropertiesLoose(props,_excluded$3);return React__default["default"].createElement("div",Object.assign({},attributes,{className:cx(className),onClick:handleClick,onKeyDown:handleKeyDown,ref:function ref(node){_ref.current=node;if(domRef)domRef(node);},"data-rttabs":true}),getChildren())};UncontrolledTabs.defaultProps=defaultProps$4;UncontrolledTabs.propTypes=propTypes$4;
var _excluded$3 = ["children", "className", "disabledTabClassName", "domRef", "focus", "forceRenderTabPanel", "onSelect", "selectedIndex", "selectedTabClassName", "selectedTabPanelClassName", "environment", "disableUpDownKeys"];
var MODE_CONTROLLED=0;var MODE_UNCONTROLLED=1;var propTypes$3={children:childrenPropType,className:PropTypes__default["default"].oneOfType([PropTypes__default["default"].string,PropTypes__default["default"].array,PropTypes__default["default"].object]),defaultFocus:PropTypes__default["default"].bool,defaultIndex:PropTypes__default["default"].number,direction:PropTypes__default["default"].oneOf(["rtl","ltr"]),disabledTabClassName:PropTypes__default["default"].string,disableUpDownKeys:PropTypes__default["default"].bool,domRef:PropTypes__default["default"].func,environment:PropTypes__default["default"].object,focusTabOnClick:PropTypes__default["default"].bool,forceRenderTabPanel:PropTypes__default["default"].bool,onSelect:onSelectPropType,selectedIndex:selectedIndexPropType,selectedTabClassName:PropTypes__default["default"].string,selectedTabPanelClassName:PropTypes__default["default"].string};var defaultProps$3={defaultFocus:false,focusTabOnClick:true,forceRenderTabPanel:false,selectedIndex:null,defaultIndex:null,environment:null,disableUpDownKeys:false};var getModeFromProps=function getModeFromProps(props){return props.selectedIndex===null?MODE_UNCONTROLLED:MODE_CONTROLLED};var checkForIllegalModeChange=function checkForIllegalModeChange(props,mode){if(mode!=undefined&&mode!==getModeFromProps(props)){throw new Error("Switching between controlled mode (by using `selectedIndex`) and uncontrolled mode is not supported in `Tabs`.\nFor more information about controlled and uncontrolled mode of react-tabs see https://github.com/reactjs/react-tabs#controlled-vs-uncontrolled-mode.")}};var Tabs=function Tabs(props){var children=props.children,defaultFocus=props.defaultFocus,defaultIndex=props.defaultIndex,focusTabOnClick=props.focusTabOnClick,onSelect=props.onSelect;var _useState=React.useState(defaultFocus),focus=_useState[0],setFocus=_useState[1];var _useState2=React.useState(getModeFromProps(props)),mode=_useState2[0];var _useState3=React.useState(mode===MODE_UNCONTROLLED?defaultIndex||0:null),selectedIndex=_useState3[0],setSelectedIndex=_useState3[1];React.useEffect(function(){setFocus(false);},[]);if(mode===MODE_UNCONTROLLED){var tabsCount=getTabsCount(children);React.useEffect(function(){if(selectedIndex!=null){var maxTabIndex=Math.max(0,tabsCount-1);setSelectedIndex(Math.min(selectedIndex,maxTabIndex));}},[tabsCount]);}checkForIllegalModeChange(props,mode);var handleSelected=function handleSelected(index,last,event){if(typeof onSelect==="function"){if(onSelect(index,last,event)===false)return}if(focusTabOnClick){setFocus(true);}if(mode===MODE_UNCONTROLLED){setSelectedIndex(index);}};var subProps=Object.assign({},props);subProps.focus=focus;subProps.onSelect=handleSelected;if(selectedIndex!=null){subProps.selectedIndex=selectedIndex;}delete subProps.defaultFocus;delete subProps.defaultIndex;delete subProps.focusTabOnClick;return React__default["default"].createElement(UncontrolledTabs,subProps,children)};Tabs.propTypes=propTypes$3;Tabs.defaultProps=defaultProps$3;Tabs.tabsRole="Tabs";
function isNode(node) {
return node && 'getAttribute' in node;
} // Determine if a node from event.target is a Tab element
var _excluded$2=["children","className"];var defaultProps$2={className:"react-tabs__tab-list"};var propTypes$2={children:PropTypes__default["default"].oneOfType([PropTypes__default["default"].object,PropTypes__default["default"].array]),className:PropTypes__default["default"].oneOfType([PropTypes__default["default"].string,PropTypes__default["default"].array,PropTypes__default["default"].object])};var TabList=function TabList(props){var children=props.children,className=props.className,attributes=_objectWithoutPropertiesLoose(props,_excluded$2);return React__default["default"].createElement("ul",Object.assign({},attributes,{className:cx(className),role:"tablist"}),children)};TabList.tabsRole="TabList";TabList.propTypes=propTypes$2;TabList.defaultProps=defaultProps$2;
var _excluded$1=["children","className","disabled","disabledClassName","focus","id","selected","selectedClassName","tabIndex","tabRef"];var DEFAULT_CLASS$1="react-tabs__tab";var defaultProps$1={className:DEFAULT_CLASS$1,disabledClassName:DEFAULT_CLASS$1+"--disabled",focus:false,id:null,selected:false,selectedClassName:DEFAULT_CLASS$1+"--selected"};var propTypes$1={children:PropTypes__default["default"].oneOfType([PropTypes__default["default"].array,PropTypes__default["default"].object,PropTypes__default["default"].string]),className:PropTypes__default["default"].oneOfType([PropTypes__default["default"].string,PropTypes__default["default"].array,PropTypes__default["default"].object]),disabled:PropTypes__default["default"].bool,disabledClassName:PropTypes__default["default"].string,focus:PropTypes__default["default"].bool,id:PropTypes__default["default"].string,selected:PropTypes__default["default"].bool,selectedClassName:PropTypes__default["default"].string,tabIndex:PropTypes__default["default"].string,tabRef:PropTypes__default["default"].func};var Tab=function Tab(props){var _cx;var nodeRef=React.useRef();var children=props.children,className=props.className,disabled=props.disabled,disabledClassName=props.disabledClassName,focus=props.focus,id=props.id,selected=props.selected,selectedClassName=props.selectedClassName,tabIndex=props.tabIndex,tabRef=props.tabRef,attributes=_objectWithoutPropertiesLoose(props,_excluded$1);React.useEffect(function(){if(selected&&focus){nodeRef.current.focus();}},[selected,focus]);return React__default["default"].createElement("li",Object.assign({},attributes,{className:cx(className,(_cx={},_cx[selectedClassName]=selected,_cx[disabledClassName]=disabled,_cx)),ref:function ref(node){nodeRef.current=node;if(tabRef)tabRef(node);},role:"tab",id:"tab"+id,"aria-selected":selected?"true":"false","aria-disabled":disabled?"true":"false","aria-controls":"panel"+id,tabIndex:tabIndex||(selected?"0":null),"data-rttab":true}),children)};Tab.propTypes=propTypes$1;Tab.tabsRole="Tab";Tab.defaultProps=defaultProps$1;
function isTabNode(node) {
return isNode(node) && node.getAttribute('data-rttab');
} // Determine if a tab node is disabled
var _excluded=["children","className","forceRender","id","selected","selectedClassName"];var DEFAULT_CLASS="react-tabs__tab-panel";var defaultProps={className:DEFAULT_CLASS,forceRender:false,selectedClassName:DEFAULT_CLASS+"--selected"};var propTypes={children:PropTypes__default["default"].node,className:PropTypes__default["default"].oneOfType([PropTypes__default["default"].string,PropTypes__default["default"].array,PropTypes__default["default"].object]),forceRender:PropTypes__default["default"].bool,id:PropTypes__default["default"].string,selected:PropTypes__default["default"].bool,selectedClassName:PropTypes__default["default"].string};var TabPanel=function TabPanel(props){var _cx;var children=props.children,className=props.className,forceRender=props.forceRender,id=props.id,selected=props.selected,selectedClassName=props.selectedClassName,attributes=_objectWithoutPropertiesLoose(props,_excluded);return React__default["default"].createElement("div",Object.assign({},attributes,{className:cx(className,(_cx={},_cx[selectedClassName]=selected,_cx)),role:"tabpanel",id:"panel"+id,"aria-labelledby":"tab"+id}),forceRender||selected?children:null)};TabPanel.tabsRole="TabPanel";TabPanel.propTypes=propTypes;TabPanel.defaultProps=defaultProps;
function isTabDisabled(node) {
return isNode(node) && node.getAttribute('aria-disabled') === 'true';
}
var canUseActiveElement;
function determineCanUseActiveElement(environment) {
var env = environment || (typeof window !== 'undefined' ? window : undefined);
try {
canUseActiveElement = !!(typeof env !== 'undefined' && env.document && env.document.activeElement);
} catch (e) {
// Work around for IE bug when accessing document.activeElement in an iframe
// Refer to the following resources:
// http://stackoverflow.com/a/10982960/369687
// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12733599
// istanbul ignore next
canUseActiveElement = false;
}
}
var defaultProps$3 = {
className: 'react-tabs',
focus: false
};
var propTypes$4 = {
children: childrenPropType,
direction: PropTypes__default["default"].oneOf(['rtl', 'ltr']),
className: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].array, PropTypes__default["default"].object]),
disabledTabClassName: PropTypes__default["default"].string,
disableUpDownKeys: PropTypes__default["default"].bool,
domRef: PropTypes__default["default"].func,
focus: PropTypes__default["default"].bool,
forceRenderTabPanel: PropTypes__default["default"].bool,
onSelect: PropTypes__default["default"].func.isRequired,
selectedIndex: PropTypes__default["default"].number.isRequired,
selectedTabClassName: PropTypes__default["default"].string,
selectedTabPanelClassName: PropTypes__default["default"].string,
environment: PropTypes__default["default"].object
} ;
var UncontrolledTabs = function UncontrolledTabs(props) {
var tabNodes = React.useRef([]);
var tabIds = React.useRef([]);
var panelIds = React.useRef([]);
var _ref = React.useRef();
function setSelected(index, event) {
// Check index boundary
if (index < 0 || index >= getTabsCount$1()) return;
var onSelect = props.onSelect,
selectedIndex = props.selectedIndex; // Call change event handler
onSelect(index, selectedIndex, event);
}
function getNextTab(index) {
var count = getTabsCount$1(); // Look for non-disabled tab from index to the last tab on the right
for (var i = index + 1; i < count; i++) {
if (!isTabDisabled(getTab(i))) {
return i;
}
} // If no tab found, continue searching from first on left to index
for (var _i = 0; _i < index; _i++) {
if (!isTabDisabled(getTab(_i))) {
return _i;
}
} // All tabs are disabled, return index
/* istanbul ignore next */
return index;
}
function getPrevTab(index) {
var i = index; // Look for non-disabled tab from index to first tab on the left
while (i--) {
if (!isTabDisabled(getTab(i))) {
return i;
}
} // If no tab found, continue searching from last tab on right to index
i = getTabsCount$1();
while (i-- > index) {
if (!isTabDisabled(getTab(i))) {
return i;
}
} // All tabs are disabled, return index
/* istanbul ignore next */
return index;
}
function getFirstTab() {
var count = getTabsCount$1(); // Look for non disabled tab from the first tab
for (var i = 0; i < count; i++) {
if (!isTabDisabled(getTab(i))) {
return i;
}
}
/* istanbul ignore next */
return null;
}
function getLastTab() {
var i = getTabsCount$1(); // Look for non disabled tab from the last tab
while (i--) {
if (!isTabDisabled(getTab(i))) {
return i;
}
}
/* istanbul ignore next */
return null;
}
function getTabsCount$1() {
var children = props.children;
return getTabsCount(children);
}
function getTab(index) {
return tabNodes.current["tabs-" + index];
}
function getChildren() {
var index = 0;
var children = props.children,
disabledTabClassName = props.disabledTabClassName,
focus = props.focus,
forceRenderTabPanel = props.forceRenderTabPanel,
selectedIndex = props.selectedIndex,
selectedTabClassName = props.selectedTabClassName,
selectedTabPanelClassName = props.selectedTabPanelClassName,
environment = props.environment;
tabIds.current = tabIds.current || [];
panelIds.current = panelIds.current || [];
var diff = tabIds.current.length - getTabsCount$1(); // Add ids if new tabs have been added
// Don't bother removing ids, just keep them in case they are added again
// This is more efficient, and keeps the uuid counter under control
while (diff++ < 0) {
tabIds.current.push(uuid());
panelIds.current.push(uuid());
} // Map children to dynamically setup refs
return deepMap(children, function (child) {
var result = child; // Clone TabList and Tab components to have refs
if (isTabList(child)) {
var listIndex = 0; // Figure out if the current focus in the DOM is set on a Tab
// If it is we should keep the focus on the next selected tab
var wasTabFocused = false;
if (canUseActiveElement == null) {
determineCanUseActiveElement(environment);
}
var env = environment || (typeof window !== 'undefined' ? window : undefined);
if (canUseActiveElement && env) {
wasTabFocused = React__default["default"].Children.toArray(child.props.children).filter(isTab).some(function (tab, i) {
return env.document.activeElement === getTab(i);
});
}
result = /*#__PURE__*/React.cloneElement(child, {
children: deepMap(child.props.children, function (tab) {
var key = "tabs-" + listIndex;
var selected = selectedIndex === listIndex;
var props = {
tabRef: function tabRef(node) {
tabNodes.current[key] = node;
},
id: tabIds.current[listIndex],
panelId: panelIds.current[listIndex],
selected: selected,
focus: selected && (focus || wasTabFocused)
};
if (selectedTabClassName) props.selectedClassName = selectedTabClassName;
if (disabledTabClassName) props.disabledClassName = disabledTabClassName;
listIndex++;
return /*#__PURE__*/React.cloneElement(tab, props);
})
});
} else if (isTabPanel(child)) {
var _props = {
id: panelIds.current[index],
tabId: tabIds.current[index],
selected: selectedIndex === index
};
if (forceRenderTabPanel) _props.forceRender = forceRenderTabPanel;
if (selectedTabPanelClassName) _props.selectedClassName = selectedTabPanelClassName;
index++;
result = /*#__PURE__*/React.cloneElement(child, _props);
}
return result;
});
}
function handleKeyDown(e) {
var direction = props.direction,
disableUpDownKeys = props.disableUpDownKeys;
if (isTabFromContainer(e.target)) {
var index = props.selectedIndex;
var preventDefault = false;
var useSelectedIndex = false;
if (e.code === 'Space' || e.keyCode === 32
/* space */
|| e.code === 'Enter' || e.keyCode === 13
/* enter */
) {
preventDefault = true;
useSelectedIndex = false;
handleClick(e);
} // keyCode is deprecated and only used here for IE
if (e.code === 'ArrowLeft' || e.keyCode === 37
/* arrow left */
|| !disableUpDownKeys && (e.keyCode === 38 || e.code === 'ArrowUp')
/* arrow up */
) {
// Select next tab to the left, validate if up arrow is not disabled
if (direction === 'rtl') {
index = getNextTab(index);
} else {
index = getPrevTab(index);
}
preventDefault = true;
useSelectedIndex = true;
} else if (e.code === 'ArrowRight' || e.keyCode === 39
/* arrow right */
|| !disableUpDownKeys && (e.keyCode === 40 || e.code === 'ArrowDown')
/* arrow down */
) {
// Select next tab to the right, validate if down arrow is not disabled
if (direction === 'rtl') {
index = getPrevTab(index);
} else {
index = getNextTab(index);
}
preventDefault = true;
useSelectedIndex = true;
} else if (e.keyCode === 35 || e.code === 'End') {
// Select last tab (End key)
index = getLastTab();
preventDefault = true;
useSelectedIndex = true;
} else if (e.keyCode === 36 || e.code === 'Home') {
// Select first tab (Home key)
index = getFirstTab();
preventDefault = true;
useSelectedIndex = true;
} // This prevents scrollbars from moving around
if (preventDefault) {
e.preventDefault();
} // Only use the selected index in the state if we're not using the tabbed index
if (useSelectedIndex) {
setSelected(index, e);
}
}
}
function handleClick(e) {
var node = e.target;
do {
if (isTabFromContainer(node)) {
if (isTabDisabled(node)) {
return;
}
var index = [].slice.call(node.parentNode.children).filter(isTabNode).indexOf(node);
setSelected(index, e);
return;
}
} while ((node = node.parentNode) != null);
}
/**
* Determine if a node from event.target is a Tab element for the current Tabs container.
* If the clicked element is not a Tab, it returns false.
* If it finds another Tabs container between the Tab and `this`, it returns false.
*/
function isTabFromContainer(node) {
// return immediately if the clicked element is not a Tab.
if (!isTabNode(node)) {
return false;
} // Check if the first occurrence of a Tabs container is `this` one.
var nodeAncestor = node.parentElement;
do {
if (nodeAncestor === _ref.current) return true;
if (nodeAncestor.getAttribute('data-rttabs')) break;
nodeAncestor = nodeAncestor.parentElement;
} while (nodeAncestor);
return false;
}
props.children;
var className = props.className;
props.disabledTabClassName;
var domRef = props.domRef;
props.focus;
props.forceRenderTabPanel;
props.onSelect;
props.selectedIndex;
props.selectedTabClassName;
props.selectedTabPanelClassName;
props.environment;
props.disableUpDownKeys;
var attributes = _objectWithoutPropertiesLoose(props, _excluded$3);
return /*#__PURE__*/React__default["default"].createElement("div", _extends({}, attributes, {
className: cx(className),
onClick: handleClick,
onKeyDown: handleKeyDown,
ref: function ref(node) {
_ref.current = node;
if (domRef) domRef(node);
},
"data-rttabs": true
}), getChildren());
};
UncontrolledTabs.defaultProps = defaultProps$3;
UncontrolledTabs.propTypes = propTypes$4 ;
var MODE_CONTROLLED = 0;
var MODE_UNCONTROLLED = 1;
var propTypes$3 = {
children: childrenPropType,
direction: PropTypes__default["default"].oneOf(['rtl', 'ltr']),
className: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].array, PropTypes__default["default"].object]),
defaultFocus: PropTypes__default["default"].bool,
defaultIndex: PropTypes__default["default"].number,
disabledTabClassName: PropTypes__default["default"].string,
disableUpDownKeys: PropTypes__default["default"].bool,
domRef: PropTypes__default["default"].func,
focusTabOnClick: PropTypes__default["default"].bool,
forceRenderTabPanel: PropTypes__default["default"].bool,
onSelect: onSelectPropType,
selectedIndex: selectedIndexPropType,
selectedTabClassName: PropTypes__default["default"].string,
selectedTabPanelClassName: PropTypes__default["default"].string,
environment: PropTypes__default["default"].object
} ;
var defaultProps$2 = {
defaultFocus: false,
focusTabOnClick: true,
forceRenderTabPanel: false,
selectedIndex: null,
defaultIndex: null,
environment: null,
disableUpDownKeys: false
};
var getModeFromProps = function getModeFromProps(props) {
return props.selectedIndex === null ? MODE_UNCONTROLLED : MODE_CONTROLLED;
};
var checkForIllegalModeChange = function checkForIllegalModeChange(props, mode) {
if (mode != undefined && mode !== getModeFromProps(props)) {
throw new Error("Switching between controlled mode (by using `selectedIndex`) and uncontrolled mode is not supported in `Tabs`.\nFor more information about controlled and uncontrolled mode of react-tabs see https://github.com/reactjs/react-tabs#controlled-vs-uncontrolled-mode.");
}
};
/**
* State:
* mode: Initialized only once from props and never changes
* selectedIndex: null if controlled mode, otherwise initialized with prop defaultIndex, changed on selection of tabs, has effect to ensure it never gets out of bound
* focus: Because we never remove focus from the Tabs this state is only used to indicate that we should focus the current tab.
* It is initialized from the prop defaultFocus, and after the first render it is reset back to false. Later it can become true again when using keys to navigate the tabs.
*/
var Tabs = function Tabs(props) {
var children = props.children,
defaultFocus = props.defaultFocus,
defaultIndex = props.defaultIndex,
focusTabOnClick = props.focusTabOnClick,
onSelect = props.onSelect;
var _useState = React.useState(defaultFocus),
focus = _useState[0],
setFocus = _useState[1];
var _useState2 = React.useState(getModeFromProps(props)),
mode = _useState2[0];
var _useState3 = React.useState(mode === MODE_UNCONTROLLED ? defaultIndex || 0 : null),
selectedIndex = _useState3[0],
setSelectedIndex = _useState3[1];
React.useEffect(function () {
// Reset focus after initial render, see comment above
setFocus(false);
}, []);
if (mode === MODE_UNCONTROLLED) {
// Ensure that we handle removed tabs and don't let selectedIndex get out of bounds
var tabsCount = getTabsCount(children);
React.useEffect(function () {
if (selectedIndex != null) {
var maxTabIndex = Math.max(0, tabsCount - 1);
setSelectedIndex(Math.min(selectedIndex, maxTabIndex));
}
}, [tabsCount]);
}
checkForIllegalModeChange(props, mode);
var handleSelected = function handleSelected(index, last, event) {
// Call change event handler
if (typeof onSelect === 'function') {
// Check if the change event handler cancels the tab change
if (onSelect(index, last, event) === false) return;
} // Always set focus on tabs unless it is disabled
if (focusTabOnClick) {
setFocus(true);
}
if (mode === MODE_UNCONTROLLED) {
// Update selected index
setSelectedIndex(index);
}
};
var subProps = _extends({}, props);
subProps.focus = focus;
subProps.onSelect = handleSelected;
if (selectedIndex != null) {
subProps.selectedIndex = selectedIndex;
}
delete subProps.defaultFocus;
delete subProps.defaultIndex;
delete subProps.focusTabOnClick;
return /*#__PURE__*/React__default["default"].createElement(UncontrolledTabs, subProps, children);
};
Tabs.propTypes = propTypes$3 ;
Tabs.defaultProps = defaultProps$2;
Tabs.tabsRole = 'Tabs';
var _excluded$2 = ["children", "className"];
var defaultProps$1 = {
className: 'react-tabs__tab-list'
};
var propTypes$2 = {
children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].array]),
className: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].array, PropTypes__default["default"].object])
} ;
var TabList = function TabList(props) {
var children = props.children,
className = props.className,
attributes = _objectWithoutPropertiesLoose(props, _excluded$2);
return /*#__PURE__*/React__default["default"].createElement("ul", _extends({}, attributes, {
className: cx(className),
role: "tablist"
}), children);
};
TabList.tabsRole = 'TabList';
TabList.propTypes = propTypes$2 ;
TabList.defaultProps = defaultProps$1;
var _excluded$1 = ["children", "className", "disabled", "disabledClassName", "focus", "id", "panelId", "selected", "selectedClassName", "tabIndex", "tabRef"];
var DEFAULT_CLASS$1 = 'react-tabs__tab';
var DEFAULT_PROPS = {
className: DEFAULT_CLASS$1,
disabledClassName: DEFAULT_CLASS$1 + "--disabled",
focus: false,
id: null,
panelId: null,
selected: false,
selectedClassName: DEFAULT_CLASS$1 + "--selected"
};
var propTypes$1 = {
children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].array, PropTypes__default["default"].object, PropTypes__default["default"].string]),
className: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].array, PropTypes__default["default"].object]),
disabled: PropTypes__default["default"].bool,
tabIndex: PropTypes__default["default"].string,
disabledClassName: PropTypes__default["default"].string,
focus: PropTypes__default["default"].bool,
// private
id: PropTypes__default["default"].string,
// private
panelId: PropTypes__default["default"].string,
// private
selected: PropTypes__default["default"].bool,
// private
selectedClassName: PropTypes__default["default"].string,
tabRef: PropTypes__default["default"].func
} ;
var Tab = function Tab(props) {
var _cx;
var nodeRef = React.useRef();
var children = props.children,
className = props.className,
disabled = props.disabled,
disabledClassName = props.disabledClassName,
focus = props.focus,
id = props.id,
panelId = props.panelId,
selected = props.selected,
selectedClassName = props.selectedClassName,
tabIndex = props.tabIndex,
tabRef = props.tabRef,
attributes = _objectWithoutPropertiesLoose(props, _excluded$1);
React.useEffect(function () {
if (selected && focus) {
nodeRef.current.focus();
}
}, [selected, focus]);
return /*#__PURE__*/React__default["default"].createElement("li", _extends({}, attributes, {
className: cx(className, (_cx = {}, _cx[selectedClassName] = selected, _cx[disabledClassName] = disabled, _cx)),
ref: function ref(node) {
nodeRef.current = node;
if (tabRef) tabRef(node);
},
role: "tab",
id: id,
"aria-selected": selected ? 'true' : 'false',
"aria-disabled": disabled ? 'true' : 'false',
"aria-controls": panelId,
tabIndex: tabIndex || (selected ? '0' : null),
"data-rttab": true
}), children);
};
Tab.propTypes = propTypes$1 ;
Tab.tabsRole = 'Tab';
Tab.defaultProps = DEFAULT_PROPS;
var _excluded = ["children", "className", "forceRender", "id", "selected", "selectedClassName", "tabId"];
var DEFAULT_CLASS = 'react-tabs__tab-panel';
var defaultProps = {
className: DEFAULT_CLASS,
forceRender: false,
selectedClassName: DEFAULT_CLASS + "--selected"
};
var propTypes = {
children: PropTypes__default["default"].node,
className: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].array, PropTypes__default["default"].object]),
forceRender: PropTypes__default["default"].bool,
id: PropTypes__default["default"].string,
// private
selected: PropTypes__default["default"].bool,
// private
selectedClassName: PropTypes__default["default"].string,
tabId: PropTypes__default["default"].string // private
} ;
var TabPanel = function TabPanel(props) {
var _cx;
var children = props.children,
className = props.className,
forceRender = props.forceRender,
id = props.id,
selected = props.selected,
selectedClassName = props.selectedClassName,
tabId = props.tabId,
attributes = _objectWithoutPropertiesLoose(props, _excluded);
return /*#__PURE__*/React__default["default"].createElement("div", _extends({}, attributes, {
className: cx(className, (_cx = {}, _cx[selectedClassName] = selected, _cx)),
role: "tabpanel",
id: id,
"aria-labelledby": tabId
}), forceRender || selected ? children : null);
};
TabPanel.tabsRole = 'TabPanel';
TabPanel.propTypes = propTypes ;
TabPanel.defaultProps = defaultProps;
exports.Tab = Tab;

@@ -863,3 +100,2 @@ exports.TabList = TabList;

exports.Tabs = Tabs;
exports.resetIdCounter = reset;

@@ -866,0 +102,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

2

dist/react-tabs.production.min.js

@@ -1,2 +0,2 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactTabs={},e.React)}(this,(function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(t);function a(){return a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},a.apply(this,arguments)}function l(e,t){if(null==e)return{};var n,r,a={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}function c(e){return function(t){return!!t.type&&t.type.tabsRole===e}}var s=c("Tab"),o=c("TabList"),d=c("TabPanel");function u(e,n){return t.Children.map(e,(function(e){return null===e?null:function(e){return s(e)||o(e)||d(e)}(e)?n(e):e.props&&e.props.children&&"object"==typeof e.props.children?t.cloneElement(e,a({},e.props,{children:u(e.props.children,n)})):e}))}function i(e,n){return t.Children.forEach(e,(function(e){null!==e&&(s(e)||d(e)?n(e):e.props&&e.props.children&&"object"==typeof e.props.children&&(o(e)&&n(e),i(e.props.children,n)))}))}function f(e){var t,n,r="";if("string"==typeof e||"number"==typeof e)r+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(n=f(e[t]))&&(r&&(r+=" "),r+=n);else for(t in e)e[t]&&(r&&(r+=" "),r+=t);return r}function b(){for(var e,t,n=0,r="";n<arguments.length;)(e=arguments[n++])&&(t=f(e))&&(r&&(r+=" "),r+=t);return r}var p=0;function m(){return"react-tabs-"+p++}function v(e){var t=0;return i(e,(function(e){s(e)&&t++})),t}var h,N=["children","className","disabledTabClassName","domRef","focus","forceRenderTabPanel","onSelect","selectedIndex","selectedTabClassName","selectedTabPanelClassName","environment","disableUpDownKeys"];function y(e){return e&&"getAttribute"in e}function C(e){return y(e)&&e.getAttribute("data-rttab")}function T(e){return y(e)&&"true"===e.getAttribute("aria-disabled")}var R=function(e){var n=t.useRef([]),c=t.useRef([]),i=t.useRef([]),f=t.useRef();function p(t,n){t<0||t>=I()||(0,e.onSelect)(t,e.selectedIndex,n)}function y(e){for(var t=I(),n=e+1;n<t;n++)if(!T(w(n)))return n;for(var r=0;r<e;r++)if(!T(w(r)))return r;return e}function R(e){for(var t=e;t--;)if(!T(w(t)))return t;for(t=I();t-- >e;)if(!T(w(t)))return t;return e}function I(){return v(e.children)}function w(e){return n.current["tabs-"+e]}function x(e){var t=e.target;do{if(E(t)){if(T(t))return;return void p([].slice.call(t.parentNode.children).filter(C).indexOf(t),e)}}while(null!=(t=t.parentNode))}function E(e){if(!C(e))return!1;var t=e.parentElement;do{if(t===f.current)return!0;if(t.getAttribute("data-rttabs"))break;t=t.parentElement}while(t);return!1}e.children;var P=e.className;e.disabledTabClassName;var g=e.domRef;e.focus,e.forceRenderTabPanel,e.onSelect,e.selectedIndex,e.selectedTabClassName,e.selectedTabPanelClassName,e.environment,e.disableUpDownKeys;var k=l(e,N);return r.default.createElement("div",a({},k,{className:b(P),onClick:x,onKeyDown:function(t){var n=e.direction,r=e.disableUpDownKeys;if(E(t.target)){var a=e.selectedIndex,l=!1,c=!1;"Space"!==t.code&&32!==t.keyCode&&"Enter"!==t.code&&13!==t.keyCode||(l=!0,c=!1,x(t)),"ArrowLeft"!==t.code&&37!==t.keyCode&&(r||38!==t.keyCode&&"ArrowUp"!==t.code)?"ArrowRight"!==t.code&&39!==t.keyCode&&(r||40!==t.keyCode&&"ArrowDown"!==t.code)?35===t.keyCode||"End"===t.code?(a=function(){for(var e=I();e--;)if(!T(w(e)))return e;return null}(),l=!0,c=!0):36!==t.keyCode&&"Home"!==t.code||(a=function(){for(var e=I(),t=0;t<e;t++)if(!T(w(t)))return t;return null}(),l=!0,c=!0):(a="rtl"===n?R(a):y(a),l=!0,c=!0):(a="rtl"===n?y(a):R(a),l=!0,c=!0),l&&t.preventDefault(),c&&p(a,t)}},ref:function(e){f.current=e,g&&g(e)},"data-rttabs":!0}),function(){var a=0,l=e.children,f=e.disabledTabClassName,b=e.focus,p=e.forceRenderTabPanel,v=e.selectedIndex,N=e.selectedTabClassName,y=e.selectedTabPanelClassName,C=e.environment;c.current=c.current||[],i.current=i.current||[];for(var T=c.current.length-I();T++<0;)c.current.push(m()),i.current.push(m());return u(l,(function(e){var l=e;if(o(e)){var m=0,T=!1;null==h&&function(e){var t=e||("undefined"!=typeof window?window:void 0);try{h=!(void 0===t||!t.document||!t.document.activeElement)}catch(e){h=!1}}(C);var R=C||("undefined"!=typeof window?window:void 0);h&&R&&(T=r.default.Children.toArray(e.props.children).filter(s).some((function(e,t){return R.document.activeElement===w(t)}))),l=t.cloneElement(e,{children:u(e.props.children,(function(e){var r="tabs-"+m,a=v===m,l={tabRef:function(e){n.current[r]=e},id:c.current[m],panelId:i.current[m],selected:a,focus:a&&(b||T)};return N&&(l.selectedClassName=N),f&&(l.disabledClassName=f),m++,t.cloneElement(e,l)}))})}else if(d(e)){var I={id:i.current[a],tabId:c.current[a],selected:v===a};p&&(I.forceRender=p),y&&(I.selectedClassName=y),a++,l=t.cloneElement(e,I)}return l}))}())};R.defaultProps={className:"react-tabs",focus:!1};var I=function(e){var n=e.children,l=e.defaultFocus,c=e.defaultIndex,s=e.focusTabOnClick,o=e.onSelect,d=t.useState(l),u=d[0],i=d[1],f=t.useState(function(e){return null===e.selectedIndex?1:0}(e)),b=f[0],p=t.useState(1===b?c||0:null),m=p[0],h=p[1];if(t.useEffect((function(){i(!1)}),[]),1===b){var N=v(n);t.useEffect((function(){if(null!=m){var e=Math.max(0,N-1);h(Math.min(m,e))}}),[N])}var y=a({},e);return y.focus=u,y.onSelect=function(e,t,n){"function"==typeof o&&!1===o(e,t,n)||(s&&i(!0),1===b&&h(e))},null!=m&&(y.selectedIndex=m),delete y.defaultFocus,delete y.defaultIndex,delete y.focusTabOnClick,r.default.createElement(R,y,n)};I.defaultProps={defaultFocus:!1,focusTabOnClick:!0,forceRenderTabPanel:!1,selectedIndex:null,defaultIndex:null,environment:null,disableUpDownKeys:!1},I.tabsRole="Tabs";var w=["children","className"],x=function(e){var t=e.children,n=e.className,c=l(e,w);return r.default.createElement("ul",a({},c,{className:b(n),role:"tablist"}),t)};x.tabsRole="TabList",x.defaultProps={className:"react-tabs__tab-list"};var E=["children","className","disabled","disabledClassName","focus","id","panelId","selected","selectedClassName","tabIndex","tabRef"],P="react-tabs__tab",g={className:P,disabledClassName:"react-tabs__tab--disabled",focus:!1,id:null,panelId:null,selected:!1,selectedClassName:"react-tabs__tab--selected"},k=function(e){var n,c=t.useRef(),s=e.children,o=e.className,d=e.disabled,u=e.disabledClassName,i=e.focus,f=e.id,p=e.panelId,m=e.selected,v=e.selectedClassName,h=e.tabIndex,N=e.tabRef,y=l(e,E);return t.useEffect((function(){m&&i&&c.current.focus()}),[m,i]),r.default.createElement("li",a({},y,{className:b(o,(n={},n[v]=m,n[u]=d,n)),ref:function(e){c.current=e,N&&N(e)},role:"tab",id:f,"aria-selected":m?"true":"false","aria-disabled":d?"true":"false","aria-controls":p,tabIndex:h||(m?"0":null),"data-rttab":!0}),s)};k.tabsRole="Tab",k.defaultProps=g;var _=["children","className","forceRender","id","selected","selectedClassName","tabId"],A="react-tabs__tab-panel",O={className:A,forceRender:!1,selectedClassName:A+"--selected"},j=function(e){var t,n=e.children,c=e.className,s=e.forceRender,o=e.id,d=e.selected,u=e.selectedClassName,i=e.tabId,f=l(e,_);return r.default.createElement("div",a({},f,{className:b(c,(t={},t[u]=d,t)),role:"tabpanel",id:o,"aria-labelledby":i}),s||d?n:null)};j.tabsRole="TabPanel",j.defaultProps=O,e.Tab=k,e.TabList=x,e.TabPanel=j,e.Tabs=I,e.resetIdCounter=function(){p=0},Object.defineProperty(e,"__esModule",{value:!0})}));
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactTabs={},e.React)}(this,(function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(t);function a(e){return function(t){return!!t.type&&t.type.tabsRole===e}}var l=a("Tab"),s=a("TabList"),c=a("TabPanel");function d(e,n){return t.Children.map(e,(function(e){return null===e?null:function(e){return l(e)||s(e)||c(e)}(e)?n(e):e.props&&e.props.children&&"object"==typeof e.props.children?t.cloneElement(e,Object.assign({},e.props,{children:d(e.props.children,n)})):e}))}function o(e,n){return t.Children.forEach(e,(function(e){null!==e&&(l(e)||c(e)?n(e):e.props&&e.props.children&&"object"==typeof e.props.children&&(s(e)&&n(e),o(e.props.children,n)))}))}function u(e,t){if(null==e)return{};var n,r,a={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}function i(e){var t,n,r="";if("string"==typeof e||"number"==typeof e)r+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(n=i(e[t]))&&(r&&(r+=" "),r+=n);else for(t in e)e[t]&&(r&&(r+=" "),r+=t);return r}function f(){for(var e,t,n=0,r="";n<arguments.length;)(e=arguments[n++])&&(t=i(e))&&(r&&(r+=" "),r+=t);return r}function b(e){var t=0;return o(e,(function(e){l(e)&&t++})),t}var m,p=["children","className","disabledTabClassName","domRef","focus","forceRenderTabPanel","onSelect","selectedIndex","selectedTabClassName","selectedTabPanelClassName","environment","disableUpDownKeys"];function v(e){return e&&"getAttribute"in e}function h(e){return v(e)&&e.getAttribute("data-rttab")}function N(e){return v(e)&&"true"===e.getAttribute("aria-disabled")}var C=function(e){var n=t.useRef([]),a=t.useRef([]),o=t.useRef();function i(t,n){t<0||t>=y()||(0,e.onSelect)(t,e.selectedIndex,n)}function v(e){for(var t=y(),n=e+1;n<t;n++)if(!N(T(n)))return n;for(var r=0;r<e;r++)if(!N(T(r)))return r;return e}function C(e){for(var t=e;t--;)if(!N(T(t)))return t;for(t=y();t-- >e;)if(!N(T(t)))return t;return e}function y(){return b(e.children)}function T(e){return n.current["tabs-"+e]}function R(e){var t=e.target;do{if(g(t)){if(N(t))return;return void i([].slice.call(t.parentNode.children).filter(h).indexOf(t),e)}}while(null!=(t=t.parentNode))}function g(e){if(!h(e))return!1;var t=e.parentElement;do{if(t===o.current)return!0;if(t.getAttribute("data-rttabs"))break;t=t.parentElement}while(t);return!1}e.children;var w=e.className;e.disabledTabClassName;var x=e.domRef;e.focus,e.forceRenderTabPanel,e.onSelect,e.selectedIndex,e.selectedTabClassName,e.selectedTabPanelClassName,e.environment,e.disableUpDownKeys;var E=u(e,p);return r.default.createElement("div",Object.assign({},E,{className:f(w),onClick:R,onKeyDown:function(t){var n=e.direction,r=e.disableUpDownKeys;if(g(t.target)){var a=e.selectedIndex,l=!1,s=!1;"Space"!==t.code&&32!==t.keyCode&&"Enter"!==t.code&&13!==t.keyCode||(l=!0,s=!1,R(t)),"ArrowLeft"!==t.code&&37!==t.keyCode&&(r||38!==t.keyCode&&"ArrowUp"!==t.code)?"ArrowRight"!==t.code&&39!==t.keyCode&&(r||40!==t.keyCode&&"ArrowDown"!==t.code)?35===t.keyCode||"End"===t.code?(a=function(){for(var e=y();e--;)if(!N(T(e)))return e;return null}(),l=!0,s=!0):36!==t.keyCode&&"Home"!==t.code||(a=function(){for(var e=y(),t=0;t<e;t++)if(!N(T(t)))return t;return null}(),l=!0,s=!0):(a="rtl"===n?C(a):v(a),l=!0,s=!0):(a="rtl"===n?v(a):C(a),l=!0,s=!0),l&&t.preventDefault(),s&&i(a,t)}},ref:function(e){o.current=e,x&&x(e)},"data-rttabs":!0}),function(){var o=0,u=e.children,i=e.disabledTabClassName,f=e.focus,b=e.forceRenderTabPanel,p=e.selectedIndex,v=e.selectedTabClassName,h=e.selectedTabPanelClassName,N=e.environment;a.current=a.current||[];for(var C=a.current.length-y(),R=t.useId();C++<0;)a.current.push(""+R+a.current.length);return d(u,(function(e){var u=e;if(s(e)){var C=0,y=!1;null==m&&function(e){var t=e||("undefined"!=typeof window?window:void 0);try{m=!(void 0===t||!t.document||!t.document.activeElement)}catch(e){m=!1}}(N);var R=N||("undefined"!=typeof window?window:void 0);m&&R&&(y=r.default.Children.toArray(e.props.children).filter(l).some((function(e,t){return R.document.activeElement===T(t)}))),u=t.cloneElement(e,{children:d(e.props.children,(function(e){var r="tabs-"+C,l=p===C,s={tabRef:function(e){n.current[r]=e},id:a.current[C],selected:l,focus:l&&(f||y)};return v&&(s.selectedClassName=v),i&&(s.disabledClassName=i),C++,t.cloneElement(e,s)}))})}else if(c(e)){var g={id:a.current[o],selected:p===o};b&&(g.forceRender=b),h&&(g.selectedClassName=h),o++,u=t.cloneElement(e,g)}return u}))}())};C.defaultProps={className:"react-tabs",focus:!1};var y=function(e){var n=e.children,a=e.defaultFocus,l=e.defaultIndex,s=e.focusTabOnClick,c=e.onSelect,d=t.useState(a),o=d[0],u=d[1],i=t.useState(function(e){return null===e.selectedIndex?1:0}(e)),f=i[0],m=t.useState(1===f?l||0:null),p=m[0],v=m[1];if(t.useEffect((function(){u(!1)}),[]),1===f){var h=b(n);t.useEffect((function(){if(null!=p){var e=Math.max(0,h-1);v(Math.min(p,e))}}),[h])}var N=Object.assign({},e);return N.focus=o,N.onSelect=function(e,t,n){"function"==typeof c&&!1===c(e,t,n)||(s&&u(!0),1===f&&v(e))},null!=p&&(N.selectedIndex=p),delete N.defaultFocus,delete N.defaultIndex,delete N.focusTabOnClick,r.default.createElement(C,N,n)};y.defaultProps={defaultFocus:!1,focusTabOnClick:!0,forceRenderTabPanel:!1,selectedIndex:null,defaultIndex:null,environment:null,disableUpDownKeys:!1},y.tabsRole="Tabs";var T=["children","className"],R=function(e){var t=e.children,n=e.className,a=u(e,T);return r.default.createElement("ul",Object.assign({},a,{className:f(n),role:"tablist"}),t)};R.tabsRole="TabList",R.defaultProps={className:"react-tabs__tab-list"};var g=["children","className","disabled","disabledClassName","focus","id","selected","selectedClassName","tabIndex","tabRef"],w="react-tabs__tab",x={className:w,disabledClassName:"react-tabs__tab--disabled",focus:!1,id:null,selected:!1,selectedClassName:"react-tabs__tab--selected"},E=function(e){var n,a=t.useRef(),l=e.children,s=e.className,c=e.disabled,d=e.disabledClassName,o=e.focus,i=e.id,b=e.selected,m=e.selectedClassName,p=e.tabIndex,v=e.tabRef,h=u(e,g);return t.useEffect((function(){b&&o&&a.current.focus()}),[b,o]),r.default.createElement("li",Object.assign({},h,{className:f(s,(n={},n[m]=b,n[d]=c,n)),ref:function(e){a.current=e,v&&v(e)},role:"tab",id:"tab"+i,"aria-selected":b?"true":"false","aria-disabled":c?"true":"false","aria-controls":"panel"+i,tabIndex:p||(b?"0":null),"data-rttab":!0}),l)};E.tabsRole="Tab",E.defaultProps=x;var P=["children","className","forceRender","id","selected","selectedClassName"],I="react-tabs__tab-panel",k={className:I,forceRender:!1,selectedClassName:I+"--selected"},j=function(e){var t,n=e.children,a=e.className,l=e.forceRender,s=e.id,c=e.selected,d=e.selectedClassName,o=u(e,P);return r.default.createElement("div",Object.assign({},o,{className:f(a,(t={},t[d]=c,t)),role:"tabpanel",id:"panel"+s,"aria-labelledby":"tab"+s}),l||c?n:null)};j.tabsRole="TabPanel",j.defaultProps=k,e.Tab=E,e.TabList=R,e.TabPanel=j,e.Tabs=y,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=react-tabs.production.min.js.map

81

esm/components/Tab.js

@@ -1,80 +0,1 @@

var _excluded = ["children", "className", "disabled", "disabledClassName", "focus", "id", "panelId", "selected", "selectedClassName", "tabIndex", "tabRef"];
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import PropTypes from 'prop-types';
import React, { useEffect, useRef } from 'react';
import cx from 'clsx';
var DEFAULT_CLASS = 'react-tabs__tab';
var DEFAULT_PROPS = {
className: DEFAULT_CLASS,
disabledClassName: DEFAULT_CLASS + "--disabled",
focus: false,
id: null,
panelId: null,
selected: false,
selectedClassName: DEFAULT_CLASS + "--selected"
};
var propTypes = process.env.NODE_ENV !== "production" ? {
children: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
disabled: PropTypes.bool,
tabIndex: PropTypes.string,
disabledClassName: PropTypes.string,
focus: PropTypes.bool,
// private
id: PropTypes.string,
// private
panelId: PropTypes.string,
// private
selected: PropTypes.bool,
// private
selectedClassName: PropTypes.string,
tabRef: PropTypes.func
} : {};
var Tab = function Tab(props) {
var _cx;
var nodeRef = useRef();
var children = props.children,
className = props.className,
disabled = props.disabled,
disabledClassName = props.disabledClassName,
focus = props.focus,
id = props.id,
panelId = props.panelId,
selected = props.selected,
selectedClassName = props.selectedClassName,
tabIndex = props.tabIndex,
tabRef = props.tabRef,
attributes = _objectWithoutPropertiesLoose(props, _excluded);
useEffect(function () {
if (selected && focus) {
nodeRef.current.focus();
}
}, [selected, focus]);
return /*#__PURE__*/React.createElement("li", _extends({}, attributes, {
className: cx(className, (_cx = {}, _cx[selectedClassName] = selected, _cx[disabledClassName] = disabled, _cx)),
ref: function ref(node) {
nodeRef.current = node;
if (tabRef) tabRef(node);
},
role: "tab",
id: id,
"aria-selected": selected ? 'true' : 'false',
"aria-disabled": disabled ? 'true' : 'false',
"aria-controls": panelId,
tabIndex: tabIndex || (selected ? '0' : null),
"data-rttab": true
}), children);
};
Tab.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
Tab.tabsRole = 'Tab';
Tab.defaultProps = DEFAULT_PROPS;
export default Tab;
var _excluded=["children","className","disabled","disabledClassName","focus","id","selected","selectedClassName","tabIndex","tabRef"];function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}import PropTypes from"prop-types";import React,{useEffect,useRef}from"react";import cx from"clsx";var DEFAULT_CLASS="react-tabs__tab";var defaultProps={className:DEFAULT_CLASS,disabledClassName:DEFAULT_CLASS+"--disabled",focus:false,id:null,selected:false,selectedClassName:DEFAULT_CLASS+"--selected"};var propTypes=process.env.NODE_ENV!=="production"?{children:PropTypes.oneOfType([PropTypes.array,PropTypes.object,PropTypes.string]),className:PropTypes.oneOfType([PropTypes.string,PropTypes.array,PropTypes.object]),disabled:PropTypes.bool,disabledClassName:PropTypes.string,focus:PropTypes.bool,id:PropTypes.string,selected:PropTypes.bool,selectedClassName:PropTypes.string,tabIndex:PropTypes.string,tabRef:PropTypes.func}:{};var Tab=function Tab(props){var _cx;var nodeRef=useRef();var children=props.children,className=props.className,disabled=props.disabled,disabledClassName=props.disabledClassName,focus=props.focus,id=props.id,selected=props.selected,selectedClassName=props.selectedClassName,tabIndex=props.tabIndex,tabRef=props.tabRef,attributes=_objectWithoutPropertiesLoose(props,_excluded);useEffect(function(){if(selected&&focus){nodeRef.current.focus()}},[selected,focus]);return React.createElement("li",Object.assign({},attributes,{className:cx(className,(_cx={},_cx[selectedClassName]=selected,_cx[disabledClassName]=disabled,_cx)),ref:function ref(node){nodeRef.current=node;if(tabRef)tabRef(node)},role:"tab",id:"tab"+id,"aria-selected":selected?"true":"false","aria-disabled":disabled?"true":"false","aria-controls":"panel"+id,tabIndex:tabIndex||(selected?"0":null),"data-rttab":true}),children)};Tab.propTypes=process.env.NODE_ENV!=="production"?propTypes:{};Tab.tabsRole="Tab";Tab.defaultProps=defaultProps;export default Tab;

33

esm/components/TabList.js

@@ -1,32 +0,1 @@

var _excluded = ["children", "className"];
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import PropTypes from 'prop-types';
import React from 'react';
import cx from 'clsx';
var defaultProps = {
className: 'react-tabs__tab-list'
};
var propTypes = process.env.NODE_ENV !== "production" ? {
children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object])
} : {};
var TabList = function TabList(props) {
var children = props.children,
className = props.className,
attributes = _objectWithoutPropertiesLoose(props, _excluded);
return /*#__PURE__*/React.createElement("ul", _extends({}, attributes, {
className: cx(className),
role: "tablist"
}), children);
};
TabList.tabsRole = 'TabList';
TabList.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
TabList.defaultProps = defaultProps;
export default TabList;
var _excluded=["children","className"];function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}import PropTypes from"prop-types";import React from"react";import cx from"clsx";var defaultProps={className:"react-tabs__tab-list"};var propTypes=process.env.NODE_ENV!=="production"?{children:PropTypes.oneOfType([PropTypes.object,PropTypes.array]),className:PropTypes.oneOfType([PropTypes.string,PropTypes.array,PropTypes.object])}:{};var TabList=function TabList(props){var children=props.children,className=props.className,attributes=_objectWithoutPropertiesLoose(props,_excluded);return React.createElement("ul",Object.assign({},attributes,{className:cx(className),role:"tablist"}),children)};TabList.tabsRole="TabList";TabList.propTypes=process.env.NODE_ENV!=="production"?propTypes:{};TabList.defaultProps=defaultProps;export default TabList;

53

esm/components/TabPanel.js

@@ -1,52 +0,1 @@

var _excluded = ["children", "className", "forceRender", "id", "selected", "selectedClassName", "tabId"];
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import PropTypes from 'prop-types';
import React from 'react';
import cx from 'clsx';
var DEFAULT_CLASS = 'react-tabs__tab-panel';
var defaultProps = {
className: DEFAULT_CLASS,
forceRender: false,
selectedClassName: DEFAULT_CLASS + "--selected"
};
var propTypes = process.env.NODE_ENV !== "production" ? {
children: PropTypes.node,
className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
forceRender: PropTypes.bool,
id: PropTypes.string,
// private
selected: PropTypes.bool,
// private
selectedClassName: PropTypes.string,
tabId: PropTypes.string // private
} : {};
var TabPanel = function TabPanel(props) {
var _cx;
var children = props.children,
className = props.className,
forceRender = props.forceRender,
id = props.id,
selected = props.selected,
selectedClassName = props.selectedClassName,
tabId = props.tabId,
attributes = _objectWithoutPropertiesLoose(props, _excluded);
return /*#__PURE__*/React.createElement("div", _extends({}, attributes, {
className: cx(className, (_cx = {}, _cx[selectedClassName] = selected, _cx)),
role: "tabpanel",
id: id,
"aria-labelledby": tabId
}), forceRender || selected ? children : null);
};
TabPanel.tabsRole = 'TabPanel';
TabPanel.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
TabPanel.defaultProps = defaultProps;
export default TabPanel;
var _excluded=["children","className","forceRender","id","selected","selectedClassName"];function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}import PropTypes from"prop-types";import React from"react";import cx from"clsx";var DEFAULT_CLASS="react-tabs__tab-panel";var defaultProps={className:DEFAULT_CLASS,forceRender:false,selectedClassName:DEFAULT_CLASS+"--selected"};var propTypes=process.env.NODE_ENV!=="production"?{children:PropTypes.node,className:PropTypes.oneOfType([PropTypes.string,PropTypes.array,PropTypes.object]),forceRender:PropTypes.bool,id:PropTypes.string,selected:PropTypes.bool,selectedClassName:PropTypes.string}:{};var TabPanel=function TabPanel(props){var _cx;var children=props.children,className=props.className,forceRender=props.forceRender,id=props.id,selected=props.selected,selectedClassName=props.selectedClassName,attributes=_objectWithoutPropertiesLoose(props,_excluded);return React.createElement("div",Object.assign({},attributes,{className:cx(className,(_cx={},_cx[selectedClassName]=selected,_cx)),role:"tabpanel",id:"panel"+id,"aria-labelledby":"tab"+id}),forceRender||selected?children:null)};TabPanel.tabsRole="TabPanel";TabPanel.propTypes=process.env.NODE_ENV!=="production"?propTypes:{};TabPanel.defaultProps=defaultProps;export default TabPanel;

128

esm/components/Tabs.js

@@ -1,127 +0,1 @@

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import PropTypes from 'prop-types';
import React, { useEffect, useState } from 'react';
import { childrenPropType, onSelectPropType, selectedIndexPropType } from '../helpers/propTypes';
import UncontrolledTabs from './UncontrolledTabs';
import { getTabsCount } from '../helpers/count';
var MODE_CONTROLLED = 0;
var MODE_UNCONTROLLED = 1;
var propTypes = process.env.NODE_ENV !== "production" ? {
children: childrenPropType,
direction: PropTypes.oneOf(['rtl', 'ltr']),
className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
defaultFocus: PropTypes.bool,
defaultIndex: PropTypes.number,
disabledTabClassName: PropTypes.string,
disableUpDownKeys: PropTypes.bool,
domRef: PropTypes.func,
focusTabOnClick: PropTypes.bool,
forceRenderTabPanel: PropTypes.bool,
onSelect: onSelectPropType,
selectedIndex: selectedIndexPropType,
selectedTabClassName: PropTypes.string,
selectedTabPanelClassName: PropTypes.string,
environment: PropTypes.object
} : {};
var defaultProps = {
defaultFocus: false,
focusTabOnClick: true,
forceRenderTabPanel: false,
selectedIndex: null,
defaultIndex: null,
environment: null,
disableUpDownKeys: false
};
var getModeFromProps = function getModeFromProps(props) {
return props.selectedIndex === null ? MODE_UNCONTROLLED : MODE_CONTROLLED;
};
var checkForIllegalModeChange = function checkForIllegalModeChange(props, mode) {
if (process.env.NODE_ENV !== 'production' && mode != undefined && mode !== getModeFromProps(props)) {
throw new Error("Switching between controlled mode (by using `selectedIndex`) and uncontrolled mode is not supported in `Tabs`.\nFor more information about controlled and uncontrolled mode of react-tabs see https://github.com/reactjs/react-tabs#controlled-vs-uncontrolled-mode.");
}
};
/**
* State:
* mode: Initialized only once from props and never changes
* selectedIndex: null if controlled mode, otherwise initialized with prop defaultIndex, changed on selection of tabs, has effect to ensure it never gets out of bound
* focus: Because we never remove focus from the Tabs this state is only used to indicate that we should focus the current tab.
* It is initialized from the prop defaultFocus, and after the first render it is reset back to false. Later it can become true again when using keys to navigate the tabs.
*/
var Tabs = function Tabs(props) {
var children = props.children,
defaultFocus = props.defaultFocus,
defaultIndex = props.defaultIndex,
focusTabOnClick = props.focusTabOnClick,
onSelect = props.onSelect;
var _useState = useState(defaultFocus),
focus = _useState[0],
setFocus = _useState[1];
var _useState2 = useState(getModeFromProps(props)),
mode = _useState2[0];
var _useState3 = useState(mode === MODE_UNCONTROLLED ? defaultIndex || 0 : null),
selectedIndex = _useState3[0],
setSelectedIndex = _useState3[1];
useEffect(function () {
// Reset focus after initial render, see comment above
setFocus(false);
}, []);
if (mode === MODE_UNCONTROLLED) {
// Ensure that we handle removed tabs and don't let selectedIndex get out of bounds
var tabsCount = getTabsCount(children);
useEffect(function () {
if (selectedIndex != null) {
var maxTabIndex = Math.max(0, tabsCount - 1);
setSelectedIndex(Math.min(selectedIndex, maxTabIndex));
}
}, [tabsCount]);
}
checkForIllegalModeChange(props, mode);
var handleSelected = function handleSelected(index, last, event) {
// Call change event handler
if (typeof onSelect === 'function') {
// Check if the change event handler cancels the tab change
if (onSelect(index, last, event) === false) return;
} // Always set focus on tabs unless it is disabled
if (focusTabOnClick) {
setFocus(true);
}
if (mode === MODE_UNCONTROLLED) {
// Update selected index
setSelectedIndex(index);
}
};
var subProps = _extends({}, props);
subProps.focus = focus;
subProps.onSelect = handleSelected;
if (selectedIndex != null) {
subProps.selectedIndex = selectedIndex;
}
delete subProps.defaultFocus;
delete subProps.defaultIndex;
delete subProps.focusTabOnClick;
return /*#__PURE__*/React.createElement(UncontrolledTabs, subProps, children);
};
Tabs.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
Tabs.defaultProps = defaultProps;
Tabs.tabsRole = 'Tabs';
export default Tabs;
import PropTypes from"prop-types";import React,{useEffect,useState}from"react";import{childrenPropType,onSelectPropType,selectedIndexPropType}from"../helpers/propTypes";import UncontrolledTabs from"./UncontrolledTabs";import{getTabsCount}from"../helpers/count";var MODE_CONTROLLED=0;var MODE_UNCONTROLLED=1;var propTypes=process.env.NODE_ENV!=="production"?{children:childrenPropType,className:PropTypes.oneOfType([PropTypes.string,PropTypes.array,PropTypes.object]),defaultFocus:PropTypes.bool,defaultIndex:PropTypes.number,direction:PropTypes.oneOf(["rtl","ltr"]),disabledTabClassName:PropTypes.string,disableUpDownKeys:PropTypes.bool,domRef:PropTypes.func,environment:PropTypes.object,focusTabOnClick:PropTypes.bool,forceRenderTabPanel:PropTypes.bool,onSelect:onSelectPropType,selectedIndex:selectedIndexPropType,selectedTabClassName:PropTypes.string,selectedTabPanelClassName:PropTypes.string}:{};var defaultProps={defaultFocus:false,focusTabOnClick:true,forceRenderTabPanel:false,selectedIndex:null,defaultIndex:null,environment:null,disableUpDownKeys:false};var getModeFromProps=function getModeFromProps(props){return props.selectedIndex===null?MODE_UNCONTROLLED:MODE_CONTROLLED};var checkForIllegalModeChange=function checkForIllegalModeChange(props,mode){if(process.env.NODE_ENV!=="production"&&mode!=undefined&&mode!==getModeFromProps(props)){throw new Error("Switching between controlled mode (by using `selectedIndex`) and uncontrolled mode is not supported in `Tabs`.\nFor more information about controlled and uncontrolled mode of react-tabs see https://github.com/reactjs/react-tabs#controlled-vs-uncontrolled-mode.")}};var Tabs=function Tabs(props){var children=props.children,defaultFocus=props.defaultFocus,defaultIndex=props.defaultIndex,focusTabOnClick=props.focusTabOnClick,onSelect=props.onSelect;var _useState=useState(defaultFocus),focus=_useState[0],setFocus=_useState[1];var _useState2=useState(getModeFromProps(props)),mode=_useState2[0];var _useState3=useState(mode===MODE_UNCONTROLLED?defaultIndex||0:null),selectedIndex=_useState3[0],setSelectedIndex=_useState3[1];useEffect(function(){setFocus(false)},[]);if(mode===MODE_UNCONTROLLED){var tabsCount=getTabsCount(children);useEffect(function(){if(selectedIndex!=null){var maxTabIndex=Math.max(0,tabsCount-1);setSelectedIndex(Math.min(selectedIndex,maxTabIndex))}},[tabsCount])}checkForIllegalModeChange(props,mode);var handleSelected=function handleSelected(index,last,event){if(typeof onSelect==="function"){if(onSelect(index,last,event)===false)return}if(focusTabOnClick){setFocus(true)}if(mode===MODE_UNCONTROLLED){setSelectedIndex(index)}};var subProps=Object.assign({},props);subProps.focus=focus;subProps.onSelect=handleSelected;if(selectedIndex!=null){subProps.selectedIndex=selectedIndex}delete subProps.defaultFocus;delete subProps.defaultIndex;delete subProps.focusTabOnClick;return React.createElement(UncontrolledTabs,subProps,children)};Tabs.propTypes=process.env.NODE_ENV!=="production"?propTypes:{};Tabs.defaultProps=defaultProps;Tabs.tabsRole="Tabs";export default Tabs;

385

esm/components/UncontrolledTabs.js

@@ -1,384 +0,1 @@

var _excluded = ["children", "className", "disabledTabClassName", "domRef", "focus", "forceRenderTabPanel", "onSelect", "selectedIndex", "selectedTabClassName", "selectedTabPanelClassName", "environment", "disableUpDownKeys"];
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import PropTypes from 'prop-types';
import React, { cloneElement, useRef } from 'react';
import cx from 'clsx';
import uuid from '../helpers/uuid';
import { childrenPropType } from '../helpers/propTypes';
import { getTabsCount as getTabsCountHelper } from '../helpers/count';
import { deepMap } from '../helpers/childrenDeepMap';
import { isTabList, isTabPanel, isTab } from '../helpers/elementTypes';
function isNode(node) {
return node && 'getAttribute' in node;
} // Determine if a node from event.target is a Tab element
function isTabNode(node) {
return isNode(node) && node.getAttribute('data-rttab');
} // Determine if a tab node is disabled
function isTabDisabled(node) {
return isNode(node) && node.getAttribute('aria-disabled') === 'true';
}
var canUseActiveElement;
function determineCanUseActiveElement(environment) {
var env = environment || (typeof window !== 'undefined' ? window : undefined);
try {
canUseActiveElement = !!(typeof env !== 'undefined' && env.document && env.document.activeElement);
} catch (e) {
// Work around for IE bug when accessing document.activeElement in an iframe
// Refer to the following resources:
// http://stackoverflow.com/a/10982960/369687
// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12733599
// istanbul ignore next
canUseActiveElement = false;
}
}
var defaultProps = {
className: 'react-tabs',
focus: false
};
var propTypes = process.env.NODE_ENV !== "production" ? {
children: childrenPropType,
direction: PropTypes.oneOf(['rtl', 'ltr']),
className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
disabledTabClassName: PropTypes.string,
disableUpDownKeys: PropTypes.bool,
domRef: PropTypes.func,
focus: PropTypes.bool,
forceRenderTabPanel: PropTypes.bool,
onSelect: PropTypes.func.isRequired,
selectedIndex: PropTypes.number.isRequired,
selectedTabClassName: PropTypes.string,
selectedTabPanelClassName: PropTypes.string,
environment: PropTypes.object
} : {};
var UncontrolledTabs = function UncontrolledTabs(props) {
var tabNodes = useRef([]);
var tabIds = useRef([]);
var panelIds = useRef([]);
var _ref = useRef();
function setSelected(index, event) {
// Check index boundary
if (index < 0 || index >= getTabsCount()) return;
var onSelect = props.onSelect,
selectedIndex = props.selectedIndex; // Call change event handler
onSelect(index, selectedIndex, event);
}
function getNextTab(index) {
var count = getTabsCount(); // Look for non-disabled tab from index to the last tab on the right
for (var i = index + 1; i < count; i++) {
if (!isTabDisabled(getTab(i))) {
return i;
}
} // If no tab found, continue searching from first on left to index
for (var _i = 0; _i < index; _i++) {
if (!isTabDisabled(getTab(_i))) {
return _i;
}
} // All tabs are disabled, return index
/* istanbul ignore next */
return index;
}
function getPrevTab(index) {
var i = index; // Look for non-disabled tab from index to first tab on the left
while (i--) {
if (!isTabDisabled(getTab(i))) {
return i;
}
} // If no tab found, continue searching from last tab on right to index
i = getTabsCount();
while (i-- > index) {
if (!isTabDisabled(getTab(i))) {
return i;
}
} // All tabs are disabled, return index
/* istanbul ignore next */
return index;
}
function getFirstTab() {
var count = getTabsCount(); // Look for non disabled tab from the first tab
for (var i = 0; i < count; i++) {
if (!isTabDisabled(getTab(i))) {
return i;
}
}
/* istanbul ignore next */
return null;
}
function getLastTab() {
var i = getTabsCount(); // Look for non disabled tab from the last tab
while (i--) {
if (!isTabDisabled(getTab(i))) {
return i;
}
}
/* istanbul ignore next */
return null;
}
function getTabsCount() {
var children = props.children;
return getTabsCountHelper(children);
}
function getTab(index) {
return tabNodes.current["tabs-" + index];
}
function getChildren() {
var index = 0;
var children = props.children,
disabledTabClassName = props.disabledTabClassName,
focus = props.focus,
forceRenderTabPanel = props.forceRenderTabPanel,
selectedIndex = props.selectedIndex,
selectedTabClassName = props.selectedTabClassName,
selectedTabPanelClassName = props.selectedTabPanelClassName,
environment = props.environment;
tabIds.current = tabIds.current || [];
panelIds.current = panelIds.current || [];
var diff = tabIds.current.length - getTabsCount(); // Add ids if new tabs have been added
// Don't bother removing ids, just keep them in case they are added again
// This is more efficient, and keeps the uuid counter under control
while (diff++ < 0) {
tabIds.current.push(uuid());
panelIds.current.push(uuid());
} // Map children to dynamically setup refs
return deepMap(children, function (child) {
var result = child; // Clone TabList and Tab components to have refs
if (isTabList(child)) {
var listIndex = 0; // Figure out if the current focus in the DOM is set on a Tab
// If it is we should keep the focus on the next selected tab
var wasTabFocused = false;
if (canUseActiveElement == null) {
determineCanUseActiveElement(environment);
}
var env = environment || (typeof window !== 'undefined' ? window : undefined);
if (canUseActiveElement && env) {
wasTabFocused = React.Children.toArray(child.props.children).filter(isTab).some(function (tab, i) {
return env.document.activeElement === getTab(i);
});
}
result = /*#__PURE__*/cloneElement(child, {
children: deepMap(child.props.children, function (tab) {
var key = "tabs-" + listIndex;
var selected = selectedIndex === listIndex;
var props = {
tabRef: function tabRef(node) {
tabNodes.current[key] = node;
},
id: tabIds.current[listIndex],
panelId: panelIds.current[listIndex],
selected: selected,
focus: selected && (focus || wasTabFocused)
};
if (selectedTabClassName) props.selectedClassName = selectedTabClassName;
if (disabledTabClassName) props.disabledClassName = disabledTabClassName;
listIndex++;
return /*#__PURE__*/cloneElement(tab, props);
})
});
} else if (isTabPanel(child)) {
var _props = {
id: panelIds.current[index],
tabId: tabIds.current[index],
selected: selectedIndex === index
};
if (forceRenderTabPanel) _props.forceRender = forceRenderTabPanel;
if (selectedTabPanelClassName) _props.selectedClassName = selectedTabPanelClassName;
index++;
result = /*#__PURE__*/cloneElement(child, _props);
}
return result;
});
}
function handleKeyDown(e) {
var direction = props.direction,
disableUpDownKeys = props.disableUpDownKeys;
if (isTabFromContainer(e.target)) {
var index = props.selectedIndex;
var preventDefault = false;
var useSelectedIndex = false;
if (e.code === 'Space' || e.keyCode === 32
/* space */
|| e.code === 'Enter' || e.keyCode === 13
/* enter */
) {
preventDefault = true;
useSelectedIndex = false;
handleClick(e);
} // keyCode is deprecated and only used here for IE
if (e.code === 'ArrowLeft' || e.keyCode === 37
/* arrow left */
|| !disableUpDownKeys && (e.keyCode === 38 || e.code === 'ArrowUp')
/* arrow up */
) {
// Select next tab to the left, validate if up arrow is not disabled
if (direction === 'rtl') {
index = getNextTab(index);
} else {
index = getPrevTab(index);
}
preventDefault = true;
useSelectedIndex = true;
} else if (e.code === 'ArrowRight' || e.keyCode === 39
/* arrow right */
|| !disableUpDownKeys && (e.keyCode === 40 || e.code === 'ArrowDown')
/* arrow down */
) {
// Select next tab to the right, validate if down arrow is not disabled
if (direction === 'rtl') {
index = getPrevTab(index);
} else {
index = getNextTab(index);
}
preventDefault = true;
useSelectedIndex = true;
} else if (e.keyCode === 35 || e.code === 'End') {
// Select last tab (End key)
index = getLastTab();
preventDefault = true;
useSelectedIndex = true;
} else if (e.keyCode === 36 || e.code === 'Home') {
// Select first tab (Home key)
index = getFirstTab();
preventDefault = true;
useSelectedIndex = true;
} // This prevents scrollbars from moving around
if (preventDefault) {
e.preventDefault();
} // Only use the selected index in the state if we're not using the tabbed index
if (useSelectedIndex) {
setSelected(index, e);
}
}
}
function handleClick(e) {
var node = e.target;
do {
if (isTabFromContainer(node)) {
if (isTabDisabled(node)) {
return;
}
var index = [].slice.call(node.parentNode.children).filter(isTabNode).indexOf(node);
setSelected(index, e);
return;
}
} while ((node = node.parentNode) != null);
}
/**
* Determine if a node from event.target is a Tab element for the current Tabs container.
* If the clicked element is not a Tab, it returns false.
* If it finds another Tabs container between the Tab and `this`, it returns false.
*/
function isTabFromContainer(node) {
// return immediately if the clicked element is not a Tab.
if (!isTabNode(node)) {
return false;
} // Check if the first occurrence of a Tabs container is `this` one.
var nodeAncestor = node.parentElement;
do {
if (nodeAncestor === _ref.current) return true;
if (nodeAncestor.getAttribute('data-rttabs')) break;
nodeAncestor = nodeAncestor.parentElement;
} while (nodeAncestor);
return false;
}
var children = props.children,
className = props.className,
disabledTabClassName = props.disabledTabClassName,
domRef = props.domRef,
focus = props.focus,
forceRenderTabPanel = props.forceRenderTabPanel,
onSelect = props.onSelect,
selectedIndex = props.selectedIndex,
selectedTabClassName = props.selectedTabClassName,
selectedTabPanelClassName = props.selectedTabPanelClassName,
environment = props.environment,
disableUpDownKeys = props.disableUpDownKeys,
attributes = _objectWithoutPropertiesLoose(props, _excluded);
return /*#__PURE__*/React.createElement("div", _extends({}, attributes, {
className: cx(className),
onClick: handleClick,
onKeyDown: handleKeyDown,
ref: function ref(node) {
_ref.current = node;
if (domRef) domRef(node);
},
"data-rttabs": true
}), getChildren());
};
UncontrolledTabs.defaultProps = defaultProps;
UncontrolledTabs.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
export default UncontrolledTabs;
var _excluded=["children","className","disabledTabClassName","domRef","focus","forceRenderTabPanel","onSelect","selectedIndex","selectedTabClassName","selectedTabPanelClassName","environment","disableUpDownKeys"];function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}import PropTypes from"prop-types";import React,{cloneElement,useRef,useId}from"react";import cx from"clsx";import{childrenPropType}from"../helpers/propTypes";import{getTabsCount as getTabsCountHelper}from"../helpers/count";import{deepMap}from"../helpers/childrenDeepMap";import{isTabList,isTabPanel,isTab}from"../helpers/elementTypes";function isNode(node){return node&&"getAttribute"in node}function isTabNode(node){return isNode(node)&&node.getAttribute("data-rttab")}function isTabDisabled(node){return isNode(node)&&node.getAttribute("aria-disabled")==="true"}var canUseActiveElement;function determineCanUseActiveElement(environment){var env=environment||(typeof window!=="undefined"?window:undefined);try{canUseActiveElement=!!(typeof env!=="undefined"&&env.document&&env.document.activeElement)}catch(e){canUseActiveElement=false}}var defaultProps={className:"react-tabs",focus:false};var propTypes=process.env.NODE_ENV!=="production"?{children:childrenPropType,direction:PropTypes.oneOf(["rtl","ltr"]),className:PropTypes.oneOfType([PropTypes.string,PropTypes.array,PropTypes.object]),disabledTabClassName:PropTypes.string,disableUpDownKeys:PropTypes.bool,domRef:PropTypes.func,focus:PropTypes.bool,forceRenderTabPanel:PropTypes.bool,onSelect:PropTypes.func.isRequired,selectedIndex:PropTypes.number.isRequired,selectedTabClassName:PropTypes.string,selectedTabPanelClassName:PropTypes.string,environment:PropTypes.object}:{};var UncontrolledTabs=function UncontrolledTabs(props){var tabNodes=useRef([]);var tabIds=useRef([]);var _ref=useRef();function setSelected(index,event){if(index<0||index>=getTabsCount())return;var onSelect=props.onSelect,selectedIndex=props.selectedIndex;onSelect(index,selectedIndex,event)}function getNextTab(index){var count=getTabsCount();for(var i=index+1;i<count;i++){if(!isTabDisabled(getTab(i))){return i}}for(var _i=0;_i<index;_i++){if(!isTabDisabled(getTab(_i))){return _i}}return index}function getPrevTab(index){var i=index;while(i--){if(!isTabDisabled(getTab(i))){return i}}i=getTabsCount();while(i-->index){if(!isTabDisabled(getTab(i))){return i}}return index}function getFirstTab(){var count=getTabsCount();for(var i=0;i<count;i++){if(!isTabDisabled(getTab(i))){return i}}return null}function getLastTab(){var i=getTabsCount();while(i--){if(!isTabDisabled(getTab(i))){return i}}return null}function getTabsCount(){var children=props.children;return getTabsCountHelper(children)}function getTab(index){return tabNodes.current["tabs-"+index]}function getChildren(){var index=0;var children=props.children,disabledTabClassName=props.disabledTabClassName,focus=props.focus,forceRenderTabPanel=props.forceRenderTabPanel,selectedIndex=props.selectedIndex,selectedTabClassName=props.selectedTabClassName,selectedTabPanelClassName=props.selectedTabPanelClassName,environment=props.environment;tabIds.current=tabIds.current||[];var diff=tabIds.current.length-getTabsCount();var id=useId();while(diff++<0){tabIds.current.push(""+id+tabIds.current.length)}return deepMap(children,function(child){var result=child;if(isTabList(child)){var listIndex=0;var wasTabFocused=false;if(canUseActiveElement==null){determineCanUseActiveElement(environment)}var env=environment||(typeof window!=="undefined"?window:undefined);if(canUseActiveElement&&env){wasTabFocused=React.Children.toArray(child.props.children).filter(isTab).some(function(tab,i){return env.document.activeElement===getTab(i)})}result=cloneElement(child,{children:deepMap(child.props.children,function(tab){var key="tabs-"+listIndex;var selected=selectedIndex===listIndex;var props={tabRef:function tabRef(node){tabNodes.current[key]=node},id:tabIds.current[listIndex],selected:selected,focus:selected&&(focus||wasTabFocused)};if(selectedTabClassName)props.selectedClassName=selectedTabClassName;if(disabledTabClassName)props.disabledClassName=disabledTabClassName;listIndex++;return cloneElement(tab,props)})})}else if(isTabPanel(child)){var _props={id:tabIds.current[index],selected:selectedIndex===index};if(forceRenderTabPanel)_props.forceRender=forceRenderTabPanel;if(selectedTabPanelClassName)_props.selectedClassName=selectedTabPanelClassName;index++;result=cloneElement(child,_props)}return result})}function handleKeyDown(e){var direction=props.direction,disableUpDownKeys=props.disableUpDownKeys;if(isTabFromContainer(e.target)){var index=props.selectedIndex;var preventDefault=false;var useSelectedIndex=false;if(e.code==="Space"||e.keyCode===32||e.code==="Enter"||e.keyCode===13){preventDefault=true;useSelectedIndex=false;handleClick(e)}if(e.code==="ArrowLeft"||e.keyCode===37||!disableUpDownKeys&&(e.keyCode===38||e.code==="ArrowUp")){if(direction==="rtl"){index=getNextTab(index)}else{index=getPrevTab(index)}preventDefault=true;useSelectedIndex=true}else if(e.code==="ArrowRight"||e.keyCode===39||!disableUpDownKeys&&(e.keyCode===40||e.code==="ArrowDown")){if(direction==="rtl"){index=getPrevTab(index)}else{index=getNextTab(index)}preventDefault=true;useSelectedIndex=true}else if(e.keyCode===35||e.code==="End"){index=getLastTab();preventDefault=true;useSelectedIndex=true}else if(e.keyCode===36||e.code==="Home"){index=getFirstTab();preventDefault=true;useSelectedIndex=true}if(preventDefault){e.preventDefault()}if(useSelectedIndex){setSelected(index,e)}}}function handleClick(e){var node=e.target;do{if(isTabFromContainer(node)){if(isTabDisabled(node)){return}var index=[].slice.call(node.parentNode.children).filter(isTabNode).indexOf(node);setSelected(index,e);return}}while((node=node.parentNode)!=null)}function isTabFromContainer(node){if(!isTabNode(node)){return false}var nodeAncestor=node.parentElement;do{if(nodeAncestor===_ref.current)return true;if(nodeAncestor.getAttribute("data-rttabs"))break;nodeAncestor=nodeAncestor.parentElement}while(nodeAncestor);return false}var children=props.children,className=props.className,disabledTabClassName=props.disabledTabClassName,domRef=props.domRef,focus=props.focus,forceRenderTabPanel=props.forceRenderTabPanel,onSelect=props.onSelect,selectedIndex=props.selectedIndex,selectedTabClassName=props.selectedTabClassName,selectedTabPanelClassName=props.selectedTabPanelClassName,environment=props.environment,disableUpDownKeys=props.disableUpDownKeys,attributes=_objectWithoutPropertiesLoose(props,_excluded);return React.createElement("div",Object.assign({},attributes,{className:cx(className),onClick:handleClick,onKeyDown:handleKeyDown,ref:function ref(node){_ref.current=node;if(domRef)domRef(node)},"data-rttabs":true}),getChildren())};UncontrolledTabs.defaultProps=defaultProps;UncontrolledTabs.propTypes=process.env.NODE_ENV!=="production"?propTypes:{};export default UncontrolledTabs;

44

esm/helpers/childrenDeepMap.js

@@ -1,43 +0,1 @@

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import { Children, cloneElement } from 'react';
import { isTabPanel, isTab, isTabList } from './elementTypes';
function isTabChild(child) {
return isTab(child) || isTabList(child) || isTabPanel(child);
}
export function deepMap(children, callback) {
return Children.map(children, function (child) {
// null happens when conditionally rendering TabPanel/Tab
// see https://github.com/reactjs/react-tabs/issues/37
if (child === null) return null;
if (isTabChild(child)) {
return callback(child);
}
if (child.props && child.props.children && typeof child.props.children === 'object') {
// Clone the child that has children and map them too
return /*#__PURE__*/cloneElement(child, _extends({}, child.props, {
children: deepMap(child.props.children, callback)
}));
}
return child;
});
}
export function deepForEach(children, callback) {
return Children.forEach(children, function (child) {
// null happens when conditionally rendering TabPanel/Tab
// see https://github.com/reactjs/react-tabs/issues/37
if (child === null) return;
if (isTab(child) || isTabPanel(child)) {
callback(child);
} else if (child.props && child.props.children && typeof child.props.children === 'object') {
if (isTabList(child)) callback(child);
deepForEach(child.props.children, callback);
}
});
}
import{Children,cloneElement}from"react";import{isTabPanel,isTab,isTabList}from"./elementTypes";function isTabChild(child){return isTab(child)||isTabList(child)||isTabPanel(child)}export function deepMap(children,callback){return Children.map(children,function(child){if(child===null)return null;if(isTabChild(child)){return callback(child)}if(child.props&&child.props.children&&typeof child.props.children==="object"){return cloneElement(child,Object.assign({},child.props,{children:deepMap(child.props.children,callback)}))}return child})}export function deepForEach(children,callback){return Children.forEach(children,function(child){if(child===null)return;if(isTab(child)||isTabPanel(child)){callback(child)}else if(child.props&&child.props.children&&typeof child.props.children==="object"){if(isTabList(child))callback(child);deepForEach(child.props.children,callback)}})}

10

esm/helpers/count.js

@@ -1,9 +0,1 @@

import { deepForEach } from './childrenDeepMap';
import { isTab } from './elementTypes';
export function getTabsCount(children) {
var tabCount = 0;
deepForEach(children, function (child) {
if (isTab(child)) tabCount++;
});
return tabCount;
}
import{deepForEach}from"./childrenDeepMap";import{isTab}from"./elementTypes";export function getTabsCount(children){var tabCount=0;deepForEach(children,function(child){if(isTab(child))tabCount++});return tabCount}

10

esm/helpers/elementTypes.js

@@ -1,9 +0,1 @@

function makeTypeChecker(tabsRole) {
return function (element) {
return !!element.type && element.type.tabsRole === tabsRole;
};
}
export var isTab = makeTypeChecker('Tab');
export var isTabList = makeTypeChecker('TabList');
export var isTabPanel = makeTypeChecker('TabPanel');
function makeTypeChecker(tabsRole){return function(element){return!!element.type&&element.type.tabsRole===tabsRole}}export var isTab=makeTypeChecker("Tab");export var isTabList=makeTypeChecker("TabList");export var isTabPanel=makeTypeChecker("TabPanel");

68

esm/helpers/propTypes.js

@@ -1,67 +0,1 @@

import { deepForEach } from './childrenDeepMap';
import { isTab, isTabList, isTabPanel } from './elementTypes';
export function childrenPropType(props, propName, componentName) {
var error;
var tabsCount = 0;
var panelsCount = 0;
var tabListFound = false;
var listTabs = [];
var children = props[propName];
deepForEach(children, function (child) {
if (isTabList(child)) {
if (child.props && child.props.children && typeof child.props.children === 'object') {
deepForEach(child.props.children, function (listChild) {
return listTabs.push(listChild);
});
}
if (tabListFound) {
error = new Error("Found multiple 'TabList' components inside 'Tabs'. Only one is allowed.");
}
tabListFound = true;
}
if (isTab(child)) {
if (!tabListFound || listTabs.indexOf(child) === -1) {
error = new Error("Found a 'Tab' component outside of the 'TabList' component. 'Tab' components " + "have to be inside the 'TabList' component.");
}
tabsCount++;
} else if (isTabPanel(child)) {
panelsCount++;
}
});
if (!error && tabsCount !== panelsCount) {
error = new Error("There should be an equal number of 'Tab' and 'TabPanel' in `" + componentName + "`. " + ("Received " + tabsCount + " 'Tab' and " + panelsCount + " 'TabPanel'."));
}
return error;
}
export function onSelectPropType(props, propName, componentName, location, propFullName) {
var prop = props[propName];
var name = propFullName || propName;
var error = null;
if (prop && typeof prop !== 'function') {
error = new Error("Invalid " + location + " `" + name + "` of type `" + typeof prop + "` supplied " + ("to `" + componentName + "`, expected `function`."));
} else if (props.selectedIndex != null && prop == null) {
error = new Error("The " + location + " `" + name + "` is marked as required in `" + componentName + "`, but " + "its value is `undefined` or `null`.\n" + "`onSelect` is required when `selectedIndex` is also set. Not doing so will " + "make the tabs not do anything, as `selectedIndex` indicates that you want to " + "handle the selected tab yourself.\n" + "If you only want to set the inital tab replace `selectedIndex` with `defaultIndex`.");
}
return error;
}
export function selectedIndexPropType(props, propName, componentName, location, propFullName) {
var prop = props[propName];
var name = propFullName || propName;
var error = null;
if (prop != null && typeof prop !== 'number') {
error = new Error("Invalid " + location + " `" + name + "` of type `" + typeof prop + "` supplied to " + ("`" + componentName + "`, expected `number`."));
} else if (props.defaultIndex != null && prop != null) {
return new Error("The " + location + " `" + name + "` cannot be used together with `defaultIndex` " + ("in `" + componentName + "`.\n") + ("Either remove `" + name + "` to let `" + componentName + "` handle the selected ") + "tab internally or remove `defaultIndex` to handle it yourself.");
}
return error;
}
import{deepForEach}from"./childrenDeepMap";import{isTab,isTabList,isTabPanel}from"./elementTypes";export function childrenPropType(props,propName,componentName){var error;var tabsCount=0;var panelsCount=0;var tabListFound=false;var listTabs=[];var children=props[propName];deepForEach(children,function(child){if(isTabList(child)){if(child.props&&child.props.children&&typeof child.props.children==="object"){deepForEach(child.props.children,function(listChild){return listTabs.push(listChild)})}if(tabListFound){error=new Error("Found multiple 'TabList' components inside 'Tabs'. Only one is allowed.")}tabListFound=true}if(isTab(child)){if(!tabListFound||listTabs.indexOf(child)===-1){error=new Error("Found a 'Tab' component outside of the 'TabList' component. 'Tab' components "+"have to be inside the 'TabList' component.")}tabsCount++}else if(isTabPanel(child)){panelsCount++}});if(!error&&tabsCount!==panelsCount){error=new Error("There should be an equal number of 'Tab' and 'TabPanel' in `"+componentName+"`. "+("Received "+tabsCount+" 'Tab' and "+panelsCount+" 'TabPanel'."))}return error}export function onSelectPropType(props,propName,componentName,location,propFullName){var prop=props[propName];var name=propFullName||propName;var error=null;if(prop&&typeof prop!=="function"){error=new Error("Invalid "+location+" `"+name+"` of type `"+typeof prop+"` supplied "+("to `"+componentName+"`, expected `function`."))}else if(props.selectedIndex!=null&&prop==null){error=new Error("The "+location+" `"+name+"` is marked as required in `"+componentName+"`, but "+"its value is `undefined` or `null`.\n"+"`onSelect` is required when `selectedIndex` is also set. Not doing so will "+"make the tabs not do anything, as `selectedIndex` indicates that you want to "+"handle the selected tab yourself.\n"+"If you only want to set the inital tab replace `selectedIndex` with `defaultIndex`.")}return error}export function selectedIndexPropType(props,propName,componentName,location,propFullName){var prop=props[propName];var name=propFullName||propName;var error=null;if(prop!=null&&typeof prop!=="number"){error=new Error("Invalid "+location+" `"+name+"` of type `"+typeof prop+"` supplied to "+("`"+componentName+"`, expected `number`."))}else if(props.defaultIndex!=null&&prop!=null){return new Error("The "+location+" `"+name+"` cannot be used together with `defaultIndex` "+("in `"+componentName+"`.\n")+("Either remove `"+name+"` to let `"+componentName+"` handle the selected ")+"tab internally or remove `defaultIndex` to handle it yourself.")}return error}

6

esm/index.js

@@ -1,5 +0,1 @@

export { default as Tabs } from './components/Tabs';
export { default as TabList } from './components/TabList';
export { default as Tab } from './components/Tab';
export { default as TabPanel } from './components/TabPanel';
export { reset as resetIdCounter } from './helpers/uuid';
export{default as Tabs}from"./components/Tabs";export{default as TabList}from"./components/TabList";export{default as Tab}from"./components/Tab";export{default as TabPanel}from"./components/TabPanel";

96

lib/components/Tab.js

@@ -1,95 +0,1 @@

"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _excluded = ["children", "className", "disabled", "disabledClassName", "focus", "id", "panelId", "selected", "selectedClassName", "tabIndex", "tabRef"];
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
var DEFAULT_CLASS = 'react-tabs__tab';
var DEFAULT_PROPS = {
className: DEFAULT_CLASS,
disabledClassName: DEFAULT_CLASS + "--disabled",
focus: false,
id: null,
panelId: null,
selected: false,
selectedClassName: DEFAULT_CLASS + "--selected"
};
var propTypes = process.env.NODE_ENV !== "production" ? {
children: _propTypes["default"].oneOfType([_propTypes["default"].array, _propTypes["default"].object, _propTypes["default"].string]),
className: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].array, _propTypes["default"].object]),
disabled: _propTypes["default"].bool,
tabIndex: _propTypes["default"].string,
disabledClassName: _propTypes["default"].string,
focus: _propTypes["default"].bool,
// private
id: _propTypes["default"].string,
// private
panelId: _propTypes["default"].string,
// private
selected: _propTypes["default"].bool,
// private
selectedClassName: _propTypes["default"].string,
tabRef: _propTypes["default"].func
} : {};
var Tab = function Tab(props) {
var _cx;
var nodeRef = (0, _react.useRef)();
var children = props.children,
className = props.className,
disabled = props.disabled,
disabledClassName = props.disabledClassName,
focus = props.focus,
id = props.id,
panelId = props.panelId,
selected = props.selected,
selectedClassName = props.selectedClassName,
tabIndex = props.tabIndex,
tabRef = props.tabRef,
attributes = _objectWithoutPropertiesLoose(props, _excluded);
(0, _react.useEffect)(function () {
if (selected && focus) {
nodeRef.current.focus();
}
}, [selected, focus]);
return /*#__PURE__*/_react["default"].createElement("li", _extends({}, attributes, {
className: (0, _clsx["default"])(className, (_cx = {}, _cx[selectedClassName] = selected, _cx[disabledClassName] = disabled, _cx)),
ref: function ref(node) {
nodeRef.current = node;
if (tabRef) tabRef(node);
},
role: "tab",
id: id,
"aria-selected": selected ? 'true' : 'false',
"aria-disabled": disabled ? 'true' : 'false',
"aria-controls": panelId,
tabIndex: tabIndex || (selected ? '0' : null),
"data-rttab": true
}), children);
};
Tab.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
Tab.tabsRole = 'Tab';
Tab.defaultProps = DEFAULT_PROPS;
var _default = Tab;
exports["default"] = _default;
"use strict";exports.__esModule=true;exports["default"]=void 0;var _propTypes=_interopRequireDefault(require("prop-types"));var _react=_interopRequireWildcard(require("react"));var _clsx=_interopRequireDefault(require("clsx"));var _excluded=["children","className","disabled","disabledClassName","focus","id","selected","selectedClassName","tabIndex","tabRef"];function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap;var cacheNodeInterop=new WeakMap;return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop})(nodeInterop)}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{"default":obj}}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj)}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc)}else{newObj[key]=obj[key]}}}newObj["default"]=obj;if(cache){cache.set(obj,newObj)}return newObj}function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}var DEFAULT_CLASS="react-tabs__tab";var defaultProps={className:DEFAULT_CLASS,disabledClassName:DEFAULT_CLASS+"--disabled",focus:false,id:null,selected:false,selectedClassName:DEFAULT_CLASS+"--selected"};var propTypes=process.env.NODE_ENV!=="production"?{children:_propTypes["default"].oneOfType([_propTypes["default"].array,_propTypes["default"].object,_propTypes["default"].string]),className:_propTypes["default"].oneOfType([_propTypes["default"].string,_propTypes["default"].array,_propTypes["default"].object]),disabled:_propTypes["default"].bool,disabledClassName:_propTypes["default"].string,focus:_propTypes["default"].bool,id:_propTypes["default"].string,selected:_propTypes["default"].bool,selectedClassName:_propTypes["default"].string,tabIndex:_propTypes["default"].string,tabRef:_propTypes["default"].func}:{};var Tab=function Tab(props){var _cx;var nodeRef=(0,_react.useRef)();var children=props.children,className=props.className,disabled=props.disabled,disabledClassName=props.disabledClassName,focus=props.focus,id=props.id,selected=props.selected,selectedClassName=props.selectedClassName,tabIndex=props.tabIndex,tabRef=props.tabRef,attributes=_objectWithoutPropertiesLoose(props,_excluded);(0,_react.useEffect)(function(){if(selected&&focus){nodeRef.current.focus()}},[selected,focus]);return _react["default"].createElement("li",Object.assign({},attributes,{className:(0,_clsx["default"])(className,(_cx={},_cx[selectedClassName]=selected,_cx[disabledClassName]=disabled,_cx)),ref:function ref(node){nodeRef.current=node;if(tabRef)tabRef(node)},role:"tab",id:"tab"+id,"aria-selected":selected?"true":"false","aria-disabled":disabled?"true":"false","aria-controls":"panel"+id,tabIndex:tabIndex||(selected?"0":null),"data-rttab":true}),children)};Tab.propTypes=process.env.NODE_ENV!=="production"?propTypes:{};Tab.tabsRole="Tab";Tab.defaultProps=defaultProps;var _default=Tab;exports["default"]=_default;

44

lib/components/TabList.js

@@ -1,43 +0,1 @@

"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _excluded = ["children", "className"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
var defaultProps = {
className: 'react-tabs__tab-list'
};
var propTypes = process.env.NODE_ENV !== "production" ? {
children: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].array]),
className: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].array, _propTypes["default"].object])
} : {};
var TabList = function TabList(props) {
var children = props.children,
className = props.className,
attributes = _objectWithoutPropertiesLoose(props, _excluded);
return /*#__PURE__*/_react["default"].createElement("ul", _extends({}, attributes, {
className: (0, _clsx["default"])(className),
role: "tablist"
}), children);
};
TabList.tabsRole = 'TabList';
TabList.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
TabList.defaultProps = defaultProps;
var _default = TabList;
exports["default"] = _default;
"use strict";exports.__esModule=true;exports["default"]=void 0;var _propTypes=_interopRequireDefault(require("prop-types"));var _react=_interopRequireDefault(require("react"));var _clsx=_interopRequireDefault(require("clsx"));var _excluded=["children","className"];function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}var defaultProps={className:"react-tabs__tab-list"};var propTypes=process.env.NODE_ENV!=="production"?{children:_propTypes["default"].oneOfType([_propTypes["default"].object,_propTypes["default"].array]),className:_propTypes["default"].oneOfType([_propTypes["default"].string,_propTypes["default"].array,_propTypes["default"].object])}:{};var TabList=function TabList(props){var children=props.children,className=props.className,attributes=_objectWithoutPropertiesLoose(props,_excluded);return _react["default"].createElement("ul",Object.assign({},attributes,{className:(0,_clsx["default"])(className),role:"tablist"}),children)};TabList.tabsRole="TabList";TabList.propTypes=process.env.NODE_ENV!=="production"?propTypes:{};TabList.defaultProps=defaultProps;var _default=TabList;exports["default"]=_default;

64

lib/components/TabPanel.js

@@ -1,63 +0,1 @@

"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _excluded = ["children", "className", "forceRender", "id", "selected", "selectedClassName", "tabId"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
var DEFAULT_CLASS = 'react-tabs__tab-panel';
var defaultProps = {
className: DEFAULT_CLASS,
forceRender: false,
selectedClassName: DEFAULT_CLASS + "--selected"
};
var propTypes = process.env.NODE_ENV !== "production" ? {
children: _propTypes["default"].node,
className: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].array, _propTypes["default"].object]),
forceRender: _propTypes["default"].bool,
id: _propTypes["default"].string,
// private
selected: _propTypes["default"].bool,
// private
selectedClassName: _propTypes["default"].string,
tabId: _propTypes["default"].string // private
} : {};
var TabPanel = function TabPanel(props) {
var _cx;
var children = props.children,
className = props.className,
forceRender = props.forceRender,
id = props.id,
selected = props.selected,
selectedClassName = props.selectedClassName,
tabId = props.tabId,
attributes = _objectWithoutPropertiesLoose(props, _excluded);
return /*#__PURE__*/_react["default"].createElement("div", _extends({}, attributes, {
className: (0, _clsx["default"])(className, (_cx = {}, _cx[selectedClassName] = selected, _cx)),
role: "tabpanel",
id: id,
"aria-labelledby": tabId
}), forceRender || selected ? children : null);
};
TabPanel.tabsRole = 'TabPanel';
TabPanel.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
TabPanel.defaultProps = defaultProps;
var _default = TabPanel;
exports["default"] = _default;
"use strict";exports.__esModule=true;exports["default"]=void 0;var _propTypes=_interopRequireDefault(require("prop-types"));var _react=_interopRequireDefault(require("react"));var _clsx=_interopRequireDefault(require("clsx"));var _excluded=["children","className","forceRender","id","selected","selectedClassName"];function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}var DEFAULT_CLASS="react-tabs__tab-panel";var defaultProps={className:DEFAULT_CLASS,forceRender:false,selectedClassName:DEFAULT_CLASS+"--selected"};var propTypes=process.env.NODE_ENV!=="production"?{children:_propTypes["default"].node,className:_propTypes["default"].oneOfType([_propTypes["default"].string,_propTypes["default"].array,_propTypes["default"].object]),forceRender:_propTypes["default"].bool,id:_propTypes["default"].string,selected:_propTypes["default"].bool,selectedClassName:_propTypes["default"].string}:{};var TabPanel=function TabPanel(props){var _cx;var children=props.children,className=props.className,forceRender=props.forceRender,id=props.id,selected=props.selected,selectedClassName=props.selectedClassName,attributes=_objectWithoutPropertiesLoose(props,_excluded);return _react["default"].createElement("div",Object.assign({},attributes,{className:(0,_clsx["default"])(className,(_cx={},_cx[selectedClassName]=selected,_cx)),role:"tabpanel",id:"panel"+id,"aria-labelledby":"tab"+id}),forceRender||selected?children:null)};TabPanel.tabsRole="TabPanel";TabPanel.propTypes=process.env.NODE_ENV!=="production"?propTypes:{};TabPanel.defaultProps=defaultProps;var _default=TabPanel;exports["default"]=_default;

145

lib/components/Tabs.js

@@ -1,144 +0,1 @@

"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes2 = require("../helpers/propTypes");
var _UncontrolledTabs = _interopRequireDefault(require("./UncontrolledTabs"));
var _count = require("../helpers/count");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var MODE_CONTROLLED = 0;
var MODE_UNCONTROLLED = 1;
var propTypes = process.env.NODE_ENV !== "production" ? {
children: _propTypes2.childrenPropType,
direction: _propTypes["default"].oneOf(['rtl', 'ltr']),
className: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].array, _propTypes["default"].object]),
defaultFocus: _propTypes["default"].bool,
defaultIndex: _propTypes["default"].number,
disabledTabClassName: _propTypes["default"].string,
disableUpDownKeys: _propTypes["default"].bool,
domRef: _propTypes["default"].func,
focusTabOnClick: _propTypes["default"].bool,
forceRenderTabPanel: _propTypes["default"].bool,
onSelect: _propTypes2.onSelectPropType,
selectedIndex: _propTypes2.selectedIndexPropType,
selectedTabClassName: _propTypes["default"].string,
selectedTabPanelClassName: _propTypes["default"].string,
environment: _propTypes["default"].object
} : {};
var defaultProps = {
defaultFocus: false,
focusTabOnClick: true,
forceRenderTabPanel: false,
selectedIndex: null,
defaultIndex: null,
environment: null,
disableUpDownKeys: false
};
var getModeFromProps = function getModeFromProps(props) {
return props.selectedIndex === null ? MODE_UNCONTROLLED : MODE_CONTROLLED;
};
var checkForIllegalModeChange = function checkForIllegalModeChange(props, mode) {
if (process.env.NODE_ENV !== 'production' && mode != undefined && mode !== getModeFromProps(props)) {
throw new Error("Switching between controlled mode (by using `selectedIndex`) and uncontrolled mode is not supported in `Tabs`.\nFor more information about controlled and uncontrolled mode of react-tabs see https://github.com/reactjs/react-tabs#controlled-vs-uncontrolled-mode.");
}
};
/**
* State:
* mode: Initialized only once from props and never changes
* selectedIndex: null if controlled mode, otherwise initialized with prop defaultIndex, changed on selection of tabs, has effect to ensure it never gets out of bound
* focus: Because we never remove focus from the Tabs this state is only used to indicate that we should focus the current tab.
* It is initialized from the prop defaultFocus, and after the first render it is reset back to false. Later it can become true again when using keys to navigate the tabs.
*/
var Tabs = function Tabs(props) {
var children = props.children,
defaultFocus = props.defaultFocus,
defaultIndex = props.defaultIndex,
focusTabOnClick = props.focusTabOnClick,
onSelect = props.onSelect;
var _useState = (0, _react.useState)(defaultFocus),
focus = _useState[0],
setFocus = _useState[1];
var _useState2 = (0, _react.useState)(getModeFromProps(props)),
mode = _useState2[0];
var _useState3 = (0, _react.useState)(mode === MODE_UNCONTROLLED ? defaultIndex || 0 : null),
selectedIndex = _useState3[0],
setSelectedIndex = _useState3[1];
(0, _react.useEffect)(function () {
// Reset focus after initial render, see comment above
setFocus(false);
}, []);
if (mode === MODE_UNCONTROLLED) {
// Ensure that we handle removed tabs and don't let selectedIndex get out of bounds
var tabsCount = (0, _count.getTabsCount)(children);
(0, _react.useEffect)(function () {
if (selectedIndex != null) {
var maxTabIndex = Math.max(0, tabsCount - 1);
setSelectedIndex(Math.min(selectedIndex, maxTabIndex));
}
}, [tabsCount]);
}
checkForIllegalModeChange(props, mode);
var handleSelected = function handleSelected(index, last, event) {
// Call change event handler
if (typeof onSelect === 'function') {
// Check if the change event handler cancels the tab change
if (onSelect(index, last, event) === false) return;
} // Always set focus on tabs unless it is disabled
if (focusTabOnClick) {
setFocus(true);
}
if (mode === MODE_UNCONTROLLED) {
// Update selected index
setSelectedIndex(index);
}
};
var subProps = _extends({}, props);
subProps.focus = focus;
subProps.onSelect = handleSelected;
if (selectedIndex != null) {
subProps.selectedIndex = selectedIndex;
}
delete subProps.defaultFocus;
delete subProps.defaultIndex;
delete subProps.focusTabOnClick;
return /*#__PURE__*/_react["default"].createElement(_UncontrolledTabs["default"], subProps, children);
};
Tabs.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
Tabs.defaultProps = defaultProps;
Tabs.tabsRole = 'Tabs';
var _default = Tabs;
exports["default"] = _default;
"use strict";exports.__esModule=true;exports["default"]=void 0;var _propTypes=_interopRequireDefault(require("prop-types"));var _react=_interopRequireWildcard(require("react"));var _propTypes2=require("../helpers/propTypes");var _UncontrolledTabs=_interopRequireDefault(require("./UncontrolledTabs"));var _count=require("../helpers/count");function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap;var cacheNodeInterop=new WeakMap;return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop})(nodeInterop)}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{"default":obj}}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj)}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc)}else{newObj[key]=obj[key]}}}newObj["default"]=obj;if(cache){cache.set(obj,newObj)}return newObj}function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}var MODE_CONTROLLED=0;var MODE_UNCONTROLLED=1;var propTypes=process.env.NODE_ENV!=="production"?{children:_propTypes2.childrenPropType,className:_propTypes["default"].oneOfType([_propTypes["default"].string,_propTypes["default"].array,_propTypes["default"].object]),defaultFocus:_propTypes["default"].bool,defaultIndex:_propTypes["default"].number,direction:_propTypes["default"].oneOf(["rtl","ltr"]),disabledTabClassName:_propTypes["default"].string,disableUpDownKeys:_propTypes["default"].bool,domRef:_propTypes["default"].func,environment:_propTypes["default"].object,focusTabOnClick:_propTypes["default"].bool,forceRenderTabPanel:_propTypes["default"].bool,onSelect:_propTypes2.onSelectPropType,selectedIndex:_propTypes2.selectedIndexPropType,selectedTabClassName:_propTypes["default"].string,selectedTabPanelClassName:_propTypes["default"].string}:{};var defaultProps={defaultFocus:false,focusTabOnClick:true,forceRenderTabPanel:false,selectedIndex:null,defaultIndex:null,environment:null,disableUpDownKeys:false};var getModeFromProps=function getModeFromProps(props){return props.selectedIndex===null?MODE_UNCONTROLLED:MODE_CONTROLLED};var checkForIllegalModeChange=function checkForIllegalModeChange(props,mode){if(process.env.NODE_ENV!=="production"&&mode!=undefined&&mode!==getModeFromProps(props)){throw new Error("Switching between controlled mode (by using `selectedIndex`) and uncontrolled mode is not supported in `Tabs`.\nFor more information about controlled and uncontrolled mode of react-tabs see https://github.com/reactjs/react-tabs#controlled-vs-uncontrolled-mode.")}};var Tabs=function Tabs(props){var children=props.children,defaultFocus=props.defaultFocus,defaultIndex=props.defaultIndex,focusTabOnClick=props.focusTabOnClick,onSelect=props.onSelect;var _useState=(0,_react.useState)(defaultFocus),focus=_useState[0],setFocus=_useState[1];var _useState2=(0,_react.useState)(getModeFromProps(props)),mode=_useState2[0];var _useState3=(0,_react.useState)(mode===MODE_UNCONTROLLED?defaultIndex||0:null),selectedIndex=_useState3[0],setSelectedIndex=_useState3[1];(0,_react.useEffect)(function(){setFocus(false)},[]);if(mode===MODE_UNCONTROLLED){var tabsCount=(0,_count.getTabsCount)(children);(0,_react.useEffect)(function(){if(selectedIndex!=null){var maxTabIndex=Math.max(0,tabsCount-1);setSelectedIndex(Math.min(selectedIndex,maxTabIndex))}},[tabsCount])}checkForIllegalModeChange(props,mode);var handleSelected=function handleSelected(index,last,event){if(typeof onSelect==="function"){if(onSelect(index,last,event)===false)return}if(focusTabOnClick){setFocus(true)}if(mode===MODE_UNCONTROLLED){setSelectedIndex(index)}};var subProps=Object.assign({},props);subProps.focus=focus;subProps.onSelect=handleSelected;if(selectedIndex!=null){subProps.selectedIndex=selectedIndex}delete subProps.defaultFocus;delete subProps.defaultIndex;delete subProps.focusTabOnClick;return _react["default"].createElement(_UncontrolledTabs["default"],subProps,children)};Tabs.propTypes=process.env.NODE_ENV!=="production"?propTypes:{};Tabs.defaultProps=defaultProps;Tabs.tabsRole="Tabs";var _default=Tabs;exports["default"]=_default;

404

lib/components/UncontrolledTabs.js

@@ -1,403 +0,1 @@

"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _uuid = _interopRequireDefault(require("../helpers/uuid"));
var _propTypes2 = require("../helpers/propTypes");
var _count = require("../helpers/count");
var _childrenDeepMap = require("../helpers/childrenDeepMap");
var _elementTypes = require("../helpers/elementTypes");
var _excluded = ["children", "className", "disabledTabClassName", "domRef", "focus", "forceRenderTabPanel", "onSelect", "selectedIndex", "selectedTabClassName", "selectedTabPanelClassName", "environment", "disableUpDownKeys"];
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function isNode(node) {
return node && 'getAttribute' in node;
} // Determine if a node from event.target is a Tab element
function isTabNode(node) {
return isNode(node) && node.getAttribute('data-rttab');
} // Determine if a tab node is disabled
function isTabDisabled(node) {
return isNode(node) && node.getAttribute('aria-disabled') === 'true';
}
var canUseActiveElement;
function determineCanUseActiveElement(environment) {
var env = environment || (typeof window !== 'undefined' ? window : undefined);
try {
canUseActiveElement = !!(typeof env !== 'undefined' && env.document && env.document.activeElement);
} catch (e) {
// Work around for IE bug when accessing document.activeElement in an iframe
// Refer to the following resources:
// http://stackoverflow.com/a/10982960/369687
// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12733599
// istanbul ignore next
canUseActiveElement = false;
}
}
var defaultProps = {
className: 'react-tabs',
focus: false
};
var propTypes = process.env.NODE_ENV !== "production" ? {
children: _propTypes2.childrenPropType,
direction: _propTypes["default"].oneOf(['rtl', 'ltr']),
className: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].array, _propTypes["default"].object]),
disabledTabClassName: _propTypes["default"].string,
disableUpDownKeys: _propTypes["default"].bool,
domRef: _propTypes["default"].func,
focus: _propTypes["default"].bool,
forceRenderTabPanel: _propTypes["default"].bool,
onSelect: _propTypes["default"].func.isRequired,
selectedIndex: _propTypes["default"].number.isRequired,
selectedTabClassName: _propTypes["default"].string,
selectedTabPanelClassName: _propTypes["default"].string,
environment: _propTypes["default"].object
} : {};
var UncontrolledTabs = function UncontrolledTabs(props) {
var tabNodes = (0, _react.useRef)([]);
var tabIds = (0, _react.useRef)([]);
var panelIds = (0, _react.useRef)([]);
var _ref = (0, _react.useRef)();
function setSelected(index, event) {
// Check index boundary
if (index < 0 || index >= getTabsCount()) return;
var onSelect = props.onSelect,
selectedIndex = props.selectedIndex; // Call change event handler
onSelect(index, selectedIndex, event);
}
function getNextTab(index) {
var count = getTabsCount(); // Look for non-disabled tab from index to the last tab on the right
for (var i = index + 1; i < count; i++) {
if (!isTabDisabled(getTab(i))) {
return i;
}
} // If no tab found, continue searching from first on left to index
for (var _i = 0; _i < index; _i++) {
if (!isTabDisabled(getTab(_i))) {
return _i;
}
} // All tabs are disabled, return index
/* istanbul ignore next */
return index;
}
function getPrevTab(index) {
var i = index; // Look for non-disabled tab from index to first tab on the left
while (i--) {
if (!isTabDisabled(getTab(i))) {
return i;
}
} // If no tab found, continue searching from last tab on right to index
i = getTabsCount();
while (i-- > index) {
if (!isTabDisabled(getTab(i))) {
return i;
}
} // All tabs are disabled, return index
/* istanbul ignore next */
return index;
}
function getFirstTab() {
var count = getTabsCount(); // Look for non disabled tab from the first tab
for (var i = 0; i < count; i++) {
if (!isTabDisabled(getTab(i))) {
return i;
}
}
/* istanbul ignore next */
return null;
}
function getLastTab() {
var i = getTabsCount(); // Look for non disabled tab from the last tab
while (i--) {
if (!isTabDisabled(getTab(i))) {
return i;
}
}
/* istanbul ignore next */
return null;
}
function getTabsCount() {
var children = props.children;
return (0, _count.getTabsCount)(children);
}
function getTab(index) {
return tabNodes.current["tabs-" + index];
}
function getChildren() {
var index = 0;
var children = props.children,
disabledTabClassName = props.disabledTabClassName,
focus = props.focus,
forceRenderTabPanel = props.forceRenderTabPanel,
selectedIndex = props.selectedIndex,
selectedTabClassName = props.selectedTabClassName,
selectedTabPanelClassName = props.selectedTabPanelClassName,
environment = props.environment;
tabIds.current = tabIds.current || [];
panelIds.current = panelIds.current || [];
var diff = tabIds.current.length - getTabsCount(); // Add ids if new tabs have been added
// Don't bother removing ids, just keep them in case they are added again
// This is more efficient, and keeps the uuid counter under control
while (diff++ < 0) {
tabIds.current.push((0, _uuid["default"])());
panelIds.current.push((0, _uuid["default"])());
} // Map children to dynamically setup refs
return (0, _childrenDeepMap.deepMap)(children, function (child) {
var result = child; // Clone TabList and Tab components to have refs
if ((0, _elementTypes.isTabList)(child)) {
var listIndex = 0; // Figure out if the current focus in the DOM is set on a Tab
// If it is we should keep the focus on the next selected tab
var wasTabFocused = false;
if (canUseActiveElement == null) {
determineCanUseActiveElement(environment);
}
var env = environment || (typeof window !== 'undefined' ? window : undefined);
if (canUseActiveElement && env) {
wasTabFocused = _react["default"].Children.toArray(child.props.children).filter(_elementTypes.isTab).some(function (tab, i) {
return env.document.activeElement === getTab(i);
});
}
result = /*#__PURE__*/(0, _react.cloneElement)(child, {
children: (0, _childrenDeepMap.deepMap)(child.props.children, function (tab) {
var key = "tabs-" + listIndex;
var selected = selectedIndex === listIndex;
var props = {
tabRef: function tabRef(node) {
tabNodes.current[key] = node;
},
id: tabIds.current[listIndex],
panelId: panelIds.current[listIndex],
selected: selected,
focus: selected && (focus || wasTabFocused)
};
if (selectedTabClassName) props.selectedClassName = selectedTabClassName;
if (disabledTabClassName) props.disabledClassName = disabledTabClassName;
listIndex++;
return /*#__PURE__*/(0, _react.cloneElement)(tab, props);
})
});
} else if ((0, _elementTypes.isTabPanel)(child)) {
var _props = {
id: panelIds.current[index],
tabId: tabIds.current[index],
selected: selectedIndex === index
};
if (forceRenderTabPanel) _props.forceRender = forceRenderTabPanel;
if (selectedTabPanelClassName) _props.selectedClassName = selectedTabPanelClassName;
index++;
result = /*#__PURE__*/(0, _react.cloneElement)(child, _props);
}
return result;
});
}
function handleKeyDown(e) {
var direction = props.direction,
disableUpDownKeys = props.disableUpDownKeys;
if (isTabFromContainer(e.target)) {
var index = props.selectedIndex;
var preventDefault = false;
var useSelectedIndex = false;
if (e.code === 'Space' || e.keyCode === 32
/* space */
|| e.code === 'Enter' || e.keyCode === 13
/* enter */
) {
preventDefault = true;
useSelectedIndex = false;
handleClick(e);
} // keyCode is deprecated and only used here for IE
if (e.code === 'ArrowLeft' || e.keyCode === 37
/* arrow left */
|| !disableUpDownKeys && (e.keyCode === 38 || e.code === 'ArrowUp')
/* arrow up */
) {
// Select next tab to the left, validate if up arrow is not disabled
if (direction === 'rtl') {
index = getNextTab(index);
} else {
index = getPrevTab(index);
}
preventDefault = true;
useSelectedIndex = true;
} else if (e.code === 'ArrowRight' || e.keyCode === 39
/* arrow right */
|| !disableUpDownKeys && (e.keyCode === 40 || e.code === 'ArrowDown')
/* arrow down */
) {
// Select next tab to the right, validate if down arrow is not disabled
if (direction === 'rtl') {
index = getPrevTab(index);
} else {
index = getNextTab(index);
}
preventDefault = true;
useSelectedIndex = true;
} else if (e.keyCode === 35 || e.code === 'End') {
// Select last tab (End key)
index = getLastTab();
preventDefault = true;
useSelectedIndex = true;
} else if (e.keyCode === 36 || e.code === 'Home') {
// Select first tab (Home key)
index = getFirstTab();
preventDefault = true;
useSelectedIndex = true;
} // This prevents scrollbars from moving around
if (preventDefault) {
e.preventDefault();
} // Only use the selected index in the state if we're not using the tabbed index
if (useSelectedIndex) {
setSelected(index, e);
}
}
}
function handleClick(e) {
var node = e.target;
do {
if (isTabFromContainer(node)) {
if (isTabDisabled(node)) {
return;
}
var index = [].slice.call(node.parentNode.children).filter(isTabNode).indexOf(node);
setSelected(index, e);
return;
}
} while ((node = node.parentNode) != null);
}
/**
* Determine if a node from event.target is a Tab element for the current Tabs container.
* If the clicked element is not a Tab, it returns false.
* If it finds another Tabs container between the Tab and `this`, it returns false.
*/
function isTabFromContainer(node) {
// return immediately if the clicked element is not a Tab.
if (!isTabNode(node)) {
return false;
} // Check if the first occurrence of a Tabs container is `this` one.
var nodeAncestor = node.parentElement;
do {
if (nodeAncestor === _ref.current) return true;
if (nodeAncestor.getAttribute('data-rttabs')) break;
nodeAncestor = nodeAncestor.parentElement;
} while (nodeAncestor);
return false;
}
var children = props.children,
className = props.className,
disabledTabClassName = props.disabledTabClassName,
domRef = props.domRef,
focus = props.focus,
forceRenderTabPanel = props.forceRenderTabPanel,
onSelect = props.onSelect,
selectedIndex = props.selectedIndex,
selectedTabClassName = props.selectedTabClassName,
selectedTabPanelClassName = props.selectedTabPanelClassName,
environment = props.environment,
disableUpDownKeys = props.disableUpDownKeys,
attributes = _objectWithoutPropertiesLoose(props, _excluded);
return /*#__PURE__*/_react["default"].createElement("div", _extends({}, attributes, {
className: (0, _clsx["default"])(className),
onClick: handleClick,
onKeyDown: handleKeyDown,
ref: function ref(node) {
_ref.current = node;
if (domRef) domRef(node);
},
"data-rttabs": true
}), getChildren());
};
UncontrolledTabs.defaultProps = defaultProps;
UncontrolledTabs.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
var _default = UncontrolledTabs;
exports["default"] = _default;
"use strict";exports.__esModule=true;exports["default"]=void 0;var _propTypes=_interopRequireDefault(require("prop-types"));var _react=_interopRequireWildcard(require("react"));var _clsx=_interopRequireDefault(require("clsx"));var _propTypes2=require("../helpers/propTypes");var _count=require("../helpers/count");var _childrenDeepMap=require("../helpers/childrenDeepMap");var _elementTypes=require("../helpers/elementTypes");var _excluded=["children","className","disabledTabClassName","domRef","focus","forceRenderTabPanel","onSelect","selectedIndex","selectedTabClassName","selectedTabPanelClassName","environment","disableUpDownKeys"];function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap;var cacheNodeInterop=new WeakMap;return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop})(nodeInterop)}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{"default":obj}}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj)}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc)}else{newObj[key]=obj[key]}}}newObj["default"]=obj;if(cache){cache.set(obj,newObj)}return newObj}function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}function isNode(node){return node&&"getAttribute"in node}function isTabNode(node){return isNode(node)&&node.getAttribute("data-rttab")}function isTabDisabled(node){return isNode(node)&&node.getAttribute("aria-disabled")==="true"}var canUseActiveElement;function determineCanUseActiveElement(environment){var env=environment||(typeof window!=="undefined"?window:undefined);try{canUseActiveElement=!!(typeof env!=="undefined"&&env.document&&env.document.activeElement)}catch(e){canUseActiveElement=false}}var defaultProps={className:"react-tabs",focus:false};var propTypes=process.env.NODE_ENV!=="production"?{children:_propTypes2.childrenPropType,direction:_propTypes["default"].oneOf(["rtl","ltr"]),className:_propTypes["default"].oneOfType([_propTypes["default"].string,_propTypes["default"].array,_propTypes["default"].object]),disabledTabClassName:_propTypes["default"].string,disableUpDownKeys:_propTypes["default"].bool,domRef:_propTypes["default"].func,focus:_propTypes["default"].bool,forceRenderTabPanel:_propTypes["default"].bool,onSelect:_propTypes["default"].func.isRequired,selectedIndex:_propTypes["default"].number.isRequired,selectedTabClassName:_propTypes["default"].string,selectedTabPanelClassName:_propTypes["default"].string,environment:_propTypes["default"].object}:{};var UncontrolledTabs=function UncontrolledTabs(props){var tabNodes=(0,_react.useRef)([]);var tabIds=(0,_react.useRef)([]);var _ref=(0,_react.useRef)();function setSelected(index,event){if(index<0||index>=getTabsCount())return;var onSelect=props.onSelect,selectedIndex=props.selectedIndex;onSelect(index,selectedIndex,event)}function getNextTab(index){var count=getTabsCount();for(var i=index+1;i<count;i++){if(!isTabDisabled(getTab(i))){return i}}for(var _i=0;_i<index;_i++){if(!isTabDisabled(getTab(_i))){return _i}}return index}function getPrevTab(index){var i=index;while(i--){if(!isTabDisabled(getTab(i))){return i}}i=getTabsCount();while(i-->index){if(!isTabDisabled(getTab(i))){return i}}return index}function getFirstTab(){var count=getTabsCount();for(var i=0;i<count;i++){if(!isTabDisabled(getTab(i))){return i}}return null}function getLastTab(){var i=getTabsCount();while(i--){if(!isTabDisabled(getTab(i))){return i}}return null}function getTabsCount(){var children=props.children;return(0,_count.getTabsCount)(children)}function getTab(index){return tabNodes.current["tabs-"+index]}function getChildren(){var index=0;var children=props.children,disabledTabClassName=props.disabledTabClassName,focus=props.focus,forceRenderTabPanel=props.forceRenderTabPanel,selectedIndex=props.selectedIndex,selectedTabClassName=props.selectedTabClassName,selectedTabPanelClassName=props.selectedTabPanelClassName,environment=props.environment;tabIds.current=tabIds.current||[];var diff=tabIds.current.length-getTabsCount();var id=(0,_react.useId)();while(diff++<0){tabIds.current.push(""+id+tabIds.current.length)}return(0,_childrenDeepMap.deepMap)(children,function(child){var result=child;if((0,_elementTypes.isTabList)(child)){var listIndex=0;var wasTabFocused=false;if(canUseActiveElement==null){determineCanUseActiveElement(environment)}var env=environment||(typeof window!=="undefined"?window:undefined);if(canUseActiveElement&&env){wasTabFocused=_react["default"].Children.toArray(child.props.children).filter(_elementTypes.isTab).some(function(tab,i){return env.document.activeElement===getTab(i)})}result=(0,_react.cloneElement)(child,{children:(0,_childrenDeepMap.deepMap)(child.props.children,function(tab){var key="tabs-"+listIndex;var selected=selectedIndex===listIndex;var props={tabRef:function tabRef(node){tabNodes.current[key]=node},id:tabIds.current[listIndex],selected:selected,focus:selected&&(focus||wasTabFocused)};if(selectedTabClassName)props.selectedClassName=selectedTabClassName;if(disabledTabClassName)props.disabledClassName=disabledTabClassName;listIndex++;return(0,_react.cloneElement)(tab,props)})})}else if((0,_elementTypes.isTabPanel)(child)){var _props={id:tabIds.current[index],selected:selectedIndex===index};if(forceRenderTabPanel)_props.forceRender=forceRenderTabPanel;if(selectedTabPanelClassName)_props.selectedClassName=selectedTabPanelClassName;index++;result=(0,_react.cloneElement)(child,_props)}return result})}function handleKeyDown(e){var direction=props.direction,disableUpDownKeys=props.disableUpDownKeys;if(isTabFromContainer(e.target)){var index=props.selectedIndex;var preventDefault=false;var useSelectedIndex=false;if(e.code==="Space"||e.keyCode===32||e.code==="Enter"||e.keyCode===13){preventDefault=true;useSelectedIndex=false;handleClick(e)}if(e.code==="ArrowLeft"||e.keyCode===37||!disableUpDownKeys&&(e.keyCode===38||e.code==="ArrowUp")){if(direction==="rtl"){index=getNextTab(index)}else{index=getPrevTab(index)}preventDefault=true;useSelectedIndex=true}else if(e.code==="ArrowRight"||e.keyCode===39||!disableUpDownKeys&&(e.keyCode===40||e.code==="ArrowDown")){if(direction==="rtl"){index=getPrevTab(index)}else{index=getNextTab(index)}preventDefault=true;useSelectedIndex=true}else if(e.keyCode===35||e.code==="End"){index=getLastTab();preventDefault=true;useSelectedIndex=true}else if(e.keyCode===36||e.code==="Home"){index=getFirstTab();preventDefault=true;useSelectedIndex=true}if(preventDefault){e.preventDefault()}if(useSelectedIndex){setSelected(index,e)}}}function handleClick(e){var node=e.target;do{if(isTabFromContainer(node)){if(isTabDisabled(node)){return}var index=[].slice.call(node.parentNode.children).filter(isTabNode).indexOf(node);setSelected(index,e);return}}while((node=node.parentNode)!=null)}function isTabFromContainer(node){if(!isTabNode(node)){return false}var nodeAncestor=node.parentElement;do{if(nodeAncestor===_ref.current)return true;if(nodeAncestor.getAttribute("data-rttabs"))break;nodeAncestor=nodeAncestor.parentElement}while(nodeAncestor);return false}var children=props.children,className=props.className,disabledTabClassName=props.disabledTabClassName,domRef=props.domRef,focus=props.focus,forceRenderTabPanel=props.forceRenderTabPanel,onSelect=props.onSelect,selectedIndex=props.selectedIndex,selectedTabClassName=props.selectedTabClassName,selectedTabPanelClassName=props.selectedTabPanelClassName,environment=props.environment,disableUpDownKeys=props.disableUpDownKeys,attributes=_objectWithoutPropertiesLoose(props,_excluded);return _react["default"].createElement("div",Object.assign({},attributes,{className:(0,_clsx["default"])(className),onClick:handleClick,onKeyDown:handleKeyDown,ref:function ref(node){_ref.current=node;if(domRef)domRef(node)},"data-rttabs":true}),getChildren())};UncontrolledTabs.defaultProps=defaultProps;UncontrolledTabs.propTypes=process.env.NODE_ENV!=="production"?propTypes:{};var _default=UncontrolledTabs;exports["default"]=_default;

52

lib/helpers/childrenDeepMap.js

@@ -1,51 +0,1 @@

"use strict";
exports.__esModule = true;
exports.deepForEach = deepForEach;
exports.deepMap = deepMap;
var _react = require("react");
var _elementTypes = require("./elementTypes");
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function isTabChild(child) {
return (0, _elementTypes.isTab)(child) || (0, _elementTypes.isTabList)(child) || (0, _elementTypes.isTabPanel)(child);
}
function deepMap(children, callback) {
return _react.Children.map(children, function (child) {
// null happens when conditionally rendering TabPanel/Tab
// see https://github.com/reactjs/react-tabs/issues/37
if (child === null) return null;
if (isTabChild(child)) {
return callback(child);
}
if (child.props && child.props.children && typeof child.props.children === 'object') {
// Clone the child that has children and map them too
return /*#__PURE__*/(0, _react.cloneElement)(child, _extends({}, child.props, {
children: deepMap(child.props.children, callback)
}));
}
return child;
});
}
function deepForEach(children, callback) {
return _react.Children.forEach(children, function (child) {
// null happens when conditionally rendering TabPanel/Tab
// see https://github.com/reactjs/react-tabs/issues/37
if (child === null) return;
if ((0, _elementTypes.isTab)(child) || (0, _elementTypes.isTabPanel)(child)) {
callback(child);
} else if (child.props && child.props.children && typeof child.props.children === 'object') {
if ((0, _elementTypes.isTabList)(child)) callback(child);
deepForEach(child.props.children, callback);
}
});
}
"use strict";exports.__esModule=true;exports.deepForEach=deepForEach;exports.deepMap=deepMap;var _react=require("react");var _elementTypes=require("./elementTypes");function isTabChild(child){return(0,_elementTypes.isTab)(child)||(0,_elementTypes.isTabList)(child)||(0,_elementTypes.isTabPanel)(child)}function deepMap(children,callback){return _react.Children.map(children,function(child){if(child===null)return null;if(isTabChild(child)){return callback(child)}if(child.props&&child.props.children&&typeof child.props.children==="object"){return(0,_react.cloneElement)(child,Object.assign({},child.props,{children:deepMap(child.props.children,callback)}))}return child})}function deepForEach(children,callback){return _react.Children.forEach(children,function(child){if(child===null)return;if((0,_elementTypes.isTab)(child)||(0,_elementTypes.isTabPanel)(child)){callback(child)}else if(child.props&&child.props.children&&typeof child.props.children==="object"){if((0,_elementTypes.isTabList)(child))callback(child);deepForEach(child.props.children,callback)}})}

17

lib/helpers/count.js

@@ -1,16 +0,1 @@

"use strict";
exports.__esModule = true;
exports.getTabsCount = getTabsCount;
var _childrenDeepMap = require("./childrenDeepMap");
var _elementTypes = require("./elementTypes");
function getTabsCount(children) {
var tabCount = 0;
(0, _childrenDeepMap.deepForEach)(children, function (child) {
if ((0, _elementTypes.isTab)(child)) tabCount++;
});
return tabCount;
}
"use strict";exports.__esModule=true;exports.getTabsCount=getTabsCount;var _childrenDeepMap=require("./childrenDeepMap");var _elementTypes=require("./elementTypes");function getTabsCount(children){var tabCount=0;(0,_childrenDeepMap.deepForEach)(children,function(child){if((0,_elementTypes.isTab)(child))tabCount++});return tabCount}

18

lib/helpers/elementTypes.js

@@ -1,17 +0,1 @@

"use strict";
exports.__esModule = true;
exports.isTabPanel = exports.isTabList = exports.isTab = void 0;
function makeTypeChecker(tabsRole) {
return function (element) {
return !!element.type && element.type.tabsRole === tabsRole;
};
}
var isTab = makeTypeChecker('Tab');
exports.isTab = isTab;
var isTabList = makeTypeChecker('TabList');
exports.isTabList = isTabList;
var isTabPanel = makeTypeChecker('TabPanel');
exports.isTabPanel = isTabPanel;
"use strict";exports.__esModule=true;exports.isTabPanel=exports.isTabList=exports.isTab=void 0;function makeTypeChecker(tabsRole){return function(element){return!!element.type&&element.type.tabsRole===tabsRole}}var isTab=makeTypeChecker("Tab");exports.isTab=isTab;var isTabList=makeTypeChecker("TabList");exports.isTabList=isTabList;var isTabPanel=makeTypeChecker("TabPanel");exports.isTabPanel=isTabPanel;

79

lib/helpers/propTypes.js

@@ -1,78 +0,1 @@

"use strict";
exports.__esModule = true;
exports.childrenPropType = childrenPropType;
exports.onSelectPropType = onSelectPropType;
exports.selectedIndexPropType = selectedIndexPropType;
var _childrenDeepMap = require("./childrenDeepMap");
var _elementTypes = require("./elementTypes");
function childrenPropType(props, propName, componentName) {
var error;
var tabsCount = 0;
var panelsCount = 0;
var tabListFound = false;
var listTabs = [];
var children = props[propName];
(0, _childrenDeepMap.deepForEach)(children, function (child) {
if ((0, _elementTypes.isTabList)(child)) {
if (child.props && child.props.children && typeof child.props.children === 'object') {
(0, _childrenDeepMap.deepForEach)(child.props.children, function (listChild) {
return listTabs.push(listChild);
});
}
if (tabListFound) {
error = new Error("Found multiple 'TabList' components inside 'Tabs'. Only one is allowed.");
}
tabListFound = true;
}
if ((0, _elementTypes.isTab)(child)) {
if (!tabListFound || listTabs.indexOf(child) === -1) {
error = new Error("Found a 'Tab' component outside of the 'TabList' component. 'Tab' components " + "have to be inside the 'TabList' component.");
}
tabsCount++;
} else if ((0, _elementTypes.isTabPanel)(child)) {
panelsCount++;
}
});
if (!error && tabsCount !== panelsCount) {
error = new Error("There should be an equal number of 'Tab' and 'TabPanel' in `" + componentName + "`. " + ("Received " + tabsCount + " 'Tab' and " + panelsCount + " 'TabPanel'."));
}
return error;
}
function onSelectPropType(props, propName, componentName, location, propFullName) {
var prop = props[propName];
var name = propFullName || propName;
var error = null;
if (prop && typeof prop !== 'function') {
error = new Error("Invalid " + location + " `" + name + "` of type `" + typeof prop + "` supplied " + ("to `" + componentName + "`, expected `function`."));
} else if (props.selectedIndex != null && prop == null) {
error = new Error("The " + location + " `" + name + "` is marked as required in `" + componentName + "`, but " + "its value is `undefined` or `null`.\n" + "`onSelect` is required when `selectedIndex` is also set. Not doing so will " + "make the tabs not do anything, as `selectedIndex` indicates that you want to " + "handle the selected tab yourself.\n" + "If you only want to set the inital tab replace `selectedIndex` with `defaultIndex`.");
}
return error;
}
function selectedIndexPropType(props, propName, componentName, location, propFullName) {
var prop = props[propName];
var name = propFullName || propName;
var error = null;
if (prop != null && typeof prop !== 'number') {
error = new Error("Invalid " + location + " `" + name + "` of type `" + typeof prop + "` supplied to " + ("`" + componentName + "`, expected `number`."));
} else if (props.defaultIndex != null && prop != null) {
return new Error("The " + location + " `" + name + "` cannot be used together with `defaultIndex` " + ("in `" + componentName + "`.\n") + ("Either remove `" + name + "` to let `" + componentName + "` handle the selected ") + "tab internally or remove `defaultIndex` to handle it yourself.");
}
return error;
}
"use strict";exports.__esModule=true;exports.childrenPropType=childrenPropType;exports.onSelectPropType=onSelectPropType;exports.selectedIndexPropType=selectedIndexPropType;var _childrenDeepMap=require("./childrenDeepMap");var _elementTypes=require("./elementTypes");function childrenPropType(props,propName,componentName){var error;var tabsCount=0;var panelsCount=0;var tabListFound=false;var listTabs=[];var children=props[propName];(0,_childrenDeepMap.deepForEach)(children,function(child){if((0,_elementTypes.isTabList)(child)){if(child.props&&child.props.children&&typeof child.props.children==="object"){(0,_childrenDeepMap.deepForEach)(child.props.children,function(listChild){return listTabs.push(listChild)})}if(tabListFound){error=new Error("Found multiple 'TabList' components inside 'Tabs'. Only one is allowed.")}tabListFound=true}if((0,_elementTypes.isTab)(child)){if(!tabListFound||listTabs.indexOf(child)===-1){error=new Error("Found a 'Tab' component outside of the 'TabList' component. 'Tab' components "+"have to be inside the 'TabList' component.")}tabsCount++}else if((0,_elementTypes.isTabPanel)(child)){panelsCount++}});if(!error&&tabsCount!==panelsCount){error=new Error("There should be an equal number of 'Tab' and 'TabPanel' in `"+componentName+"`. "+("Received "+tabsCount+" 'Tab' and "+panelsCount+" 'TabPanel'."))}return error}function onSelectPropType(props,propName,componentName,location,propFullName){var prop=props[propName];var name=propFullName||propName;var error=null;if(prop&&typeof prop!=="function"){error=new Error("Invalid "+location+" `"+name+"` of type `"+typeof prop+"` supplied "+("to `"+componentName+"`, expected `function`."))}else if(props.selectedIndex!=null&&prop==null){error=new Error("The "+location+" `"+name+"` is marked as required in `"+componentName+"`, but "+"its value is `undefined` or `null`.\n"+"`onSelect` is required when `selectedIndex` is also set. Not doing so will "+"make the tabs not do anything, as `selectedIndex` indicates that you want to "+"handle the selected tab yourself.\n"+"If you only want to set the inital tab replace `selectedIndex` with `defaultIndex`.")}return error}function selectedIndexPropType(props,propName,componentName,location,propFullName){var prop=props[propName];var name=propFullName||propName;var error=null;if(prop!=null&&typeof prop!=="number"){error=new Error("Invalid "+location+" `"+name+"` of type `"+typeof prop+"` supplied to "+("`"+componentName+"`, expected `number`."))}else if(props.defaultIndex!=null&&prop!=null){return new Error("The "+location+" `"+name+"` cannot be used together with `defaultIndex` "+("in `"+componentName+"`.\n")+("Either remove `"+name+"` to let `"+componentName+"` handle the selected ")+"tab internally or remove `defaultIndex` to handle it yourself.")}return error}

27

lib/index.js

@@ -1,26 +0,1 @@

"use strict";
exports.__esModule = true;
exports.resetIdCounter = exports.Tabs = exports.TabPanel = exports.TabList = exports.Tab = void 0;
var _Tabs = _interopRequireDefault(require("./components/Tabs"));
exports.Tabs = _Tabs["default"];
var _TabList = _interopRequireDefault(require("./components/TabList"));
exports.TabList = _TabList["default"];
var _Tab = _interopRequireDefault(require("./components/Tab"));
exports.Tab = _Tab["default"];
var _TabPanel = _interopRequireDefault(require("./components/TabPanel"));
exports.TabPanel = _TabPanel["default"];
var _uuid = require("./helpers/uuid");
exports.resetIdCounter = _uuid.reset;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
"use strict";exports.__esModule=true;exports.Tabs=exports.TabPanel=exports.TabList=exports.Tab=void 0;var _Tabs=_interopRequireDefault(require("./components/Tabs"));exports.Tabs=_Tabs["default"];var _TabList=_interopRequireDefault(require("./components/TabList"));exports.TabList=_TabList["default"];var _Tab=_interopRequireDefault(require("./components/Tab"));exports.Tab=_Tab["default"];var _TabPanel=_interopRequireDefault(require("./components/TabPanel"));exports.TabPanel=_TabPanel["default"];function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}

12

package.json
{
"name": "react-tabs",
"version": "4.2.1",
"version": "5.0.0",
"description": "An accessible and easy tab component for ReactJS",
"main": "lib/index.js",
"module": "esm/index.js",
"typings": "index.d.ts",
"scripts": {

@@ -39,3 +40,6 @@ "clean:commonjs": "rimraf lib",

"style",
"src"
"src/*.js",
"src/components/*.js",
"src/helpers/*.js",
"index.d.ts"
],

@@ -50,3 +54,3 @@ "homepage": "https://github.com/reactjs/react-tabs",

"peerDependencies": {
"react": "^16.8.0 || ^17.0.0-0 || ^18.0.0"
"react": "^18.0.0"
},

@@ -62,3 +66,3 @@ "devDependencies": {

"@testing-library/react": "13.1.1",
"@testing-library/user-event": "14.1.0",
"@testing-library/user-event": "14.1.1",
"babel-jest": "27.5.1",

@@ -65,0 +69,0 @@ "babel-loader": "8.2.4",

13

README.md

@@ -62,15 +62,2 @@ # react-tabs [![npm version](https://img.shields.io/npm/v/react-tabs.svg)](https://www.npmjs.com/package/react-tabs) [![codecov](https://codecov.io/gh/reactjs/react-tabs/branch/main/graph/badge.svg?token=XnEVrthAub)](https://codecov.io/gh/reactjs/react-tabs)

### resetIdCounter(): void
Allows reseting the internal id counter which is used to generate unique id's for tabs and tab panels.
You should never need to use this in the browser. Only if you are running an isomorphic react app that is rendered on the server you should call `resetIdCounter()` before every page render so that the ids that get generated on the server match the ids generated in the browser.
```js
import { resetIdCounter } from 'react-tabs';
resetIdCounter();
ReactDOMServer.renderToString(...);
```
## Components

@@ -77,0 +64,0 @@

15

src/components/Tab.js

@@ -6,3 +6,3 @@ import PropTypes from 'prop-types';

const DEFAULT_CLASS = 'react-tabs__tab';
const DEFAULT_PROPS = {
const defaultProps = {
className: DEFAULT_CLASS,

@@ -12,3 +12,2 @@ disabledClassName: `${DEFAULT_CLASS}--disabled`,

id: null,
panelId: null,
selected: false,

@@ -30,10 +29,9 @@ selectedClassName: `${DEFAULT_CLASS}--selected`,

disabled: PropTypes.bool,
tabIndex: PropTypes.string,
disabledClassName: PropTypes.string,
focus: PropTypes.bool, // private
id: PropTypes.string, // private
panelId: PropTypes.string, // private
selected: PropTypes.bool, // private
selectedClassName: PropTypes.string,
tabRef: PropTypes.func,
tabIndex: PropTypes.string,
tabRef: PropTypes.func, // private
};

@@ -50,3 +48,2 @@

id,
panelId,
selected,

@@ -77,6 +74,6 @@ selectedClassName,

role="tab"
id={id}
id={`tab${id}`}
aria-selected={selected ? 'true' : 'false'}
aria-disabled={disabled ? 'true' : 'false'}
aria-controls={panelId}
aria-controls={`panel${id}`}
tabIndex={tabIndex || (selected ? '0' : null)}

@@ -92,3 +89,3 @@ data-rttab

Tab.tabsRole = 'Tab';
Tab.defaultProps = DEFAULT_PROPS;
Tab.defaultProps = defaultProps;
export default Tab;

6

src/components/TabPanel.js

@@ -22,3 +22,2 @@ import PropTypes from 'prop-types';

selectedClassName: PropTypes.string,
tabId: PropTypes.string, // private
};

@@ -33,3 +32,2 @@ const TabPanel = (props) => {

selectedClassName,
tabId,
...attributes

@@ -45,4 +43,4 @@ } = props;

role="tabpanel"
id={id}
aria-labelledby={tabId}
id={`panel${id}`}
aria-labelledby={`tab${id}`}
>

@@ -49,0 +47,0 @@ {forceRender || selected ? children : null}

4

src/components/Tabs.js

@@ -15,3 +15,2 @@ import PropTypes from 'prop-types';

children: childrenPropType,
direction: PropTypes.oneOf(['rtl', 'ltr']),
className: PropTypes.oneOfType([

@@ -24,5 +23,7 @@ PropTypes.string,

defaultIndex: PropTypes.number,
direction: PropTypes.oneOf(['rtl', 'ltr']),
disabledTabClassName: PropTypes.string,
disableUpDownKeys: PropTypes.bool,
domRef: PropTypes.func,
environment: PropTypes.object,
focusTabOnClick: PropTypes.bool,

@@ -34,3 +35,2 @@ forceRenderTabPanel: PropTypes.bool,

selectedTabPanelClassName: PropTypes.string,
environment: PropTypes.object,
};

@@ -37,0 +37,0 @@ const defaultProps = {

13

src/components/UncontrolledTabs.js
import PropTypes from 'prop-types';
import React, { cloneElement, useRef } from 'react';
import React, { cloneElement, useRef, useId } from 'react';
import cx from 'clsx';
import uuid from '../helpers/uuid';
import { childrenPropType } from '../helpers/propTypes';

@@ -74,3 +73,2 @@ import { getTabsCount as getTabsCountHelper } from '../helpers/count';

let tabIds = useRef([]);
let panelIds = useRef([]);
const ref = useRef();

@@ -184,3 +182,2 @@

tabIds.current = tabIds.current || [];
panelIds.current = panelIds.current || [];
let diff = tabIds.current.length - getTabsCount();

@@ -191,5 +188,5 @@

// This is more efficient, and keeps the uuid counter under control
const id = useId();
while (diff++ < 0) {
tabIds.current.push(uuid());
panelIds.current.push(uuid());
tabIds.current.push(`${id}${tabIds.current.length}`);
}

@@ -231,3 +228,2 @@

id: tabIds.current[listIndex],
panelId: panelIds.current[listIndex],
selected,

@@ -249,4 +245,3 @@ focus: selected && (focus || wasTabFocused),

const props = {
id: panelIds.current[index],
tabId: tabIds.current[index],
id: tabIds.current[index],
selected: selectedIndex === index,

@@ -253,0 +248,0 @@ };

1

src/index.js

@@ -5,2 +5,1 @@ export { default as Tabs } from './components/Tabs';

export { default as TabPanel } from './components/TabPanel';
export { reset as resetIdCounter } from './helpers/uuid';
esm/helpers/uuid.js
lib/helpers/uuid.js
src/__tests__/index-test.js
src/components/__tests__/__snapshots__/Tab-test.js.snap
src/components/__tests__/__snapshots__/TabList-test.js.snap
src/components/__tests__/__snapshots__/TabPanel-test.js.snap
src/components/__tests__/__snapshots__/Tabs-test.js.snap
src/components/__tests__/helpers/higherOrder/index.js
src/components/__tests__/helpers/higherOrder/TabListWrapper.js
src/components/__tests__/helpers/higherOrder/TabPanelWrapper.js
src/components/__tests__/helpers/higherOrder/TabWrapper.js
src/components/__tests__/Tab-test.js
src/components/__tests__/TabList-test.js
src/components/__tests__/TabPanel-test.js
src/components/__tests__/Tabs-errors-test.js
src/components/__tests__/Tabs-node-test.js
src/components/__tests__/Tabs-test.js
src/helpers/uuid.js
dist/react-tabs.development.js.map

Sorry, the diff of this file is not supported yet

dist/react-tabs.production.min.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc