react-dyn-tabs - npm Package Compare versions

Comparing version 6.0.1 to 6.1.0

CHANGELOG.md

@@ -0,1 +1,7 @@
+# v6.1.0
+
+- new `theme` option
+- update `demo`
+- fix issue of `bootstrap` theme
+
 # v6.0.1
@@ -2,0 +8,0 @@

dist/more-button-plugin.umd.min.js

 /**
  * react-dyn-tabs - React dynamic tabs with full API
  *
- * @version v6.0.1
+ * @version v6.1.0
  * @homepage https://dev-javascript.github.io/react-dyn-tabs/
@@ -6,0 +6,0 @@ * @author dev-javascript [e-mail]

dist/react-dyn-tabs.umd.js

 /**
  * react-dyn-tabs - React dynamic tabs with full API
  *
- * @version v6.0.1
+ * @version v6.1.0
  * @homepage https://dev-javascript.github.io/react-dyn-tabs/
@@ -618,2 +618,3 @@ * @author dev-javascript [e-mail]
         selectedTabID: '',
+        theme: 'all-themes',
         beforeSelect: function beforeSelect() {
@@ -1268,2 +1269,6 @@ return true;
     }
+    var themeName = ins.getOption('theme');
+    if (themeName) {
+      className += ' ' + themeName;
+    }
     return {
@@ -1270,0 +1275,0 @@ className: className

dist/react-dyn-tabs.umd.min.js

 /**
  * react-dyn-tabs - React dynamic tabs with full API
  *
- * @version v6.0.1
+ * @version v6.1.0
  * @homepage https://dev-javascript.github.io/react-dyn-tabs/
@@ -9,3 +9,3 @@ * @author dev-javascript [e-mail]
  */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],e):(t="undefined"!=typeof globalThis?globalThis:t||self).useDynTabs=e(t.React)}(this,(function(t){"use strict";var e="open",n="close",i="active",a="refresh",r="sort",s=1,o={checkArrIndex:function(t,e){return t>=0&&t<e},resolve:function(t){return Promise.resolve(t)},getCopyState:function(t){return{selectedTabID:t.selectedTabID,openTabIDs:(t.openTabIDs||[]).slice()}},assingAll:function(t){for(var e=arguments.length,n=new Array(e>1?e-1:0),i=1;i<e;i++)n[i-1]=arguments[i];return n.forEach((function(e){var n=Object.keys(e);Object.getOwnPropertyNames(e).forEach((function(i){n.indexOf(i)>=0?t[i]=e[i]:Object.defineProperty(t,i,{value:e[i],writable:!0})}))})),t},setNoneEnumProps:function(t,e){var n={};return Object.keys(e).forEach((function(t){n[t]={writable:!0,value:e[t]}})),Object.defineProperties(t,n)},getArraysDiff:function(t,e){var n=[].concat(t),i=[].concat(e);return t.forEach((function(t){e.indexOf(t)>=0&&(n.splice(n.indexOf(t),1),i.splice(i.indexOf(t),1))})),[n,i]},filterArrayUntilFirstValue:function(t,e,n){n&&t.reverse();for(var i=0,a=t.length;i<a;i++)if(e(t[i],i,t))return t[i];return null},throwMissingParam:function(t){throw new Error('Missing parameter in "'+t+'" function')},thorwInvalidParam:function(t){throw new Error("Invalid parameter values passed to "+t+" function")},isObj:function(t){return"[object Object]"===Object.prototype.toString.call(t)},isArray:function(t){return"object"==typeof t&&t.constructor===Array},module:function(t,e,n){return this.assingAll(t.prototype,n?this.setNoneEnumProps(e,n):e).constructor},uuid:function(){return s++,""+(new Date).getTime()+Math.random()+s}};function l(t,s){switch(s.type){case n:var l=t.openTabIDs,c=l.indexOf(s.tabId);if(c>=0){var u=l.slice();return u.splice(c,1),{selectedTabID:t.selectedTabID,openTabIDs:u}}return t;case e:var f=t.openTabIDs,p=s.tabId;if(-1===f.indexOf(p)){var d=f.slice();return d.push(p),{selectedTabID:t.selectedTabID,openTabIDs:d}}return t;case a:return o.getCopyState(t);case i:var b=s.tabId;return t.selectedTabID!==b?{selectedTabID:b,openTabIDs:t.openTabIDs}:t;case r:var h=t.openTabIDs,g=s.tabId,v=g.length;if(h.length!==v)return t;for(var y=0;y<v;y++)if(-1===h.indexOf(g[y]))return t;return{selectedTabID:t.selectedTabID,openTabIDs:g};default:throw new Error("Undefined action type '"+s.type+"'")}}var c=o.throwMissingParam,u=o.isArray,f=o.thorwInvalidParam,p=function(t,e,n,i){var a=this;void 0===e&&(e={options:{}}),void 0===n&&(n=[]);var r=t.call(this,e.options),s=r.optionsManager,o=r.helper,l=r.activedTabsHistory;o.setNoneEnumProps(this,{optionsManager:s,helper:o,activedTabsHistory:l,userProxy:{}}),this._setUserProxy()._subscribeOnReadyEvent()._createReadyFunction()._subscribeSelectedTabsHistory()._subscribeCallbacksOptions(),n.forEach((function(t){return t(a,i)}))},d={_setUserProxy:function(){var t=this,e={},n=function(n){var i,a;"_"!==n[0]&&"constructor"!==n&&(a=(i=t)[n],e[n]="function"==typeof a?function(){var t=a.apply(i,arguments);return t===i?e:t}:a)};for(var i in this)n(i);return this.userProxy=e,this},_subscribeOnReadyEvent:function(){var t=this;return this.one("_onReady",(function(){t._isReady=!0})),this},_createReadyFunction:function(){var t=this,e=function(e){!0===t._isReady?e.call(t.userProxy,t.userProxy):t.one("_onReady",(function(){e.call(t.userProxy,t.userProxy)}))};return e=e.bind(this),this.helper.setNoneEnumProps(this,{ready:e}),this},_subscribeSelectedTabsHistory:function(){var t=this;return this.on("onChange",(function(e){for(var n=e.currentData,i=e.previousData,a=e.closedTabIDs,r=0,s=a.length;r<s;r++)t.activedTabsHistory.remove(a[r]);i.selectedTabID!==n.selectedTabID&&t.isOpen(i.selectedTabID)&&!t.isSelected(i.selectedTabID)&&t.activedTabsHistory.add(i.selectedTabID)})),this},_subscribeCallbacksOptions:function(){var t=this,e=this.optionsManager.options;return Object.keys(this._publishers).forEach((function(n){"_"!==n[0]&&t.on(n,(function(){e[n].apply(this,arguments)}))})),this},getOption:function(t){return this.optionsManager.getOption(t)},setOption:function(t,e){return this.optionsManager.setOption(t,e),this},getPreviousData:function(){return this.helper.getCopyState(this.previousState)},getCopyPerviousData:function(){return this.getPreviousData()},getData:function(){return this.helper.getCopyState(this.stateRef)},getCopyData:function(){return this.getData()},isSelected:function(t){return void 0===t&&(t=c("isSelected")),this.stateRef.selectedTabID==t},isOpen:function(t){return void 0===t&&(t=c("isOpen")),this.stateRef.openTabIDs.indexOf(t)>=0},_getFlushEffectsPromise:function(){var t=this;return new Promise((function(e){t.one("_onFlushEffects",(function(){e.apply(this,arguments)}))}))},select:function(t){void 0===t&&(t=c("select")),t&&(t+="");var e=this._getFlushEffectsPromise();return this._select(t),e},_getPreSelectedTabId:function(){for(var t=[].concat(this.activedTabsHistory.tabsId),e="";!e&&t.length;){var n=t.pop();if(n){var i=this.getTab(n);i&&!i.disable&&this.isOpen(n)&&!this.isSelected(n)&&(e=n)}}return e},_getPreSiblingTabId:function(){var t=this,e=this.stateRef,n=e.selectedTabID,i=e.openTabIDs,a=i.slice(0,i.indexOf(n));return this.helper.filterArrayUntilFirstValue(a,(function(e){return!t.getTab(e).disable}),!0)},_getNextSiblingTabId:function(){var t=this,e=this.stateRef,n=e.selectedTabID,i=e.openTabIDs,a=i.slice(i.indexOf(n)+1);return this.helper.filterArrayUntilFirstValue(a,(function(e){return!t.getTab(e).disable}),!1)},_findTabIdForSwitching:function(){return this._getPreSelectedTabId()||this._getPreSiblingTabId()||this._getNextSiblingTabId()||""},setTab:function(t,e){return void 0===e&&(e={}),this.optionsManager.validateObjectiveTabData(e).validatePanelComponent(e),this._setTab(t,e),this},open:function(t){void 0===t&&(t=c("open"));var e=this.optionsManager.validateTabData(t),n=this._getFlushEffectsPromise();return this._addTab(e),this._open(e.id),n},sort:function(t){void 0===t&&(t=c("sort")),u(t)||f("sort");var e=this._getFlushEffectsPromise();return this._sort(t),e},__close:function(t){var e=this._getFlushEffectsPromise();return this._close(t),this._removeTab(t),e},close:function(t,e){if(void 0===t&&(t=c("close")),void 0===e&&(e=!0),t&&(t+=""),e&&this.isOpen(t)&&this.isSelected(t)){var n=[].concat(this.stateRef.openTabIDs);return n.splice(n.indexOf(t),1),this.select(this._findTabIdForSwitching()),this.__close(t)}return this.__close(t)},refresh:function(){var t=this._getFlushEffectsPromise();return this._refresh(),t}};o.setNoneEnumProps(d,{onChange:function(t){var e=this,n=t.newState,i=t.oldState,a=t.closedTabIDs,r=t.openedTabIDs,s=t.isSwitched;return(s||r.length||a.length)&&(this.trigger("onChange",this.userProxy,(function(){return[{currentData:e.helper.getCopyState(n),previousData:e.helper.getCopyState(i),closedTabIDs:a.slice(),openedTabIDs:r.slice()}]})),r.length&&this.trigger("onOpen",this.userProxy,(function(){return[r.slice()]})),a.length&&this.trigger("onClose",this.userProxy,(function(){return[a.slice()]})),s&&(n.selectedTabID&&-1===this.activedTabsHistory.tabsId.indexOf(n.selectedTabID)&&this.trigger("onFirstSelect",this.userProxy,(function(){return[{currentSelectedTabId:n.selectedTabID,previousSelectedTabId:i.selectedTabID}]})),this.trigger("onSelect",this.userProxy,(function(){return[{currentSelectedTabId:n.selectedTabID,previousSelectedTabId:i.selectedTabID}]})))),this},eventHandlerFactory:function(t){var e=t.e,n=t.id,i=e.target,a=i.parentElement,r=this.optionsManager.setting,s=r.closeClass,o=r.tabClass;i.className.includes(s)&&a&&a.lastChild&&a.lastChild==i&&a.className.includes(o)?!1!==this.getOption("beforeClose").call(this.userProxy,e,n)&&this.close(n,!0):!1!==this.getOption("beforeSelect").call(this.userProxy,e,n)&&this.select(n)},getSetting:function(t){var e=this.optionsManager.setting;if(e.hasOwnProperty(t))return"function"==typeof e[t]?e[t].apply(e,Array.prototype.slice.call(arguments,1)):e[t]}});var b=d;function h(){return h=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)({}).hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},h.apply(null,arguments)}var g=o.throwMissingParam,v=o.uuid,y=o.module((function(t,e){var n=e.options,i=t().globalDefaultOptions;this._defaultOptions=i,this._validateOptions(n),this.options=Object.assign({},this._defaultOptions,n),this.setting={},this.initialState={},this.initialTabs=[],this._setSetting()._setInitialData()}),{getOption:function(t){if("tabs"===t){for(var e=[],n=0,i=this.options.tabs,a=i.length;n<a;n++)e.push(h({},i[n]));return e}return this.options[t]},setOption:function(t,e){return void 0===t&&(t=g("setOption")),void 0===e&&(e=g("setOption")),["SELECTEDTABID","TABS"].indexOf(t.toUpperCase())>=0||(this.options[t]=e),this},validatePanelComponent:function(e){if(e.panelComponent&&"function"!=typeof e.panelComponent&&t.isValidElement(e.panelComponent)){var n=e.panelComponent;e.panelComponent=function(){return n}}return this},validateObjectiveTabData:function(t){if("[object Object]"!==Object.prototype.toString.call(t))throw new Error("tabData must be type of Object");return this},validateTabData:function(t){return this.validateObjectiveTabData(t).validatePanelComponent(t),(t=Object.assign(this.setting.getDefaultTabData(),t)).id=t.id+"",t},_validateOptions:function(t){if("[object Object]"!==Object.prototype.toString.call(t))throw'Invalid argument in "useDynamicTabs" function. Argument must be type of an object';return this},_setInitialData:function(){var t=this,e=this.options,n=e.selectedTabID,i=e.tabs,a=[];return i.forEach((function(e){var n=t.validateTabData(e);t.initialTabs.push(n),a.push(n.id)})),this.initialState={selectedTabID:n+"",openTabIDs:a},this},_setSetting:function(){var t=this;return this.setting={tabClass:"rc-dyn-tabs-tab",titleClass:"rc-dyn-tabs-title",iconClass:"rc-dyn-tabs-icon",selectedClass:"rc-dyn-tabs-selected",hoverClass:"rc-dyn-tabs-hover",closeClass:"rc-dyn-tabs-close",panelClass:"rc-dyn-tabs-panel",panellistClass:"rc-dyn-tabs-panellist",disableClass:"rc-dyn-tabs-disable",ltrClass:"rc-dyn-tabs-ltr",rtlClass:"rc-dyn-tabs-rtl",verticalClass:"rc-dyn-tabs-vertical",tablistViewClass:"rc-dyn-tabs-tablist-view",tablistContainerClass:"rc-dyn-tabs-tablist-container",tablistOverflowClass:"rc-dyn-tabs-tablist-overflow",tablistClass:"rc-dyn-tabs-tablist",panelIdTemplate:function(t){return"rc-dyn-tabs-p-"+t},ariaLabelledbyIdTemplate:function(t){return"rc-dyn-tabs-l-"+t},getDefaultTabData:function(){return{title:"",tooltip:"",panelComponent:t.options.defaultPanelComponent,closable:!0,iconClass:"",disable:!1,lazy:!1,id:"tab_"+v()}}},this}}),T=function(e){return t.createElement("button",e.tabProps,e.children,Object.prototype.hasOwnProperty.call(e,"iconProps")&&t.createElement("span",e.iconProps))},m=o.module((function(t){void 0===t&&(t=null),this.defaultDirection="ltr",this._DefaulTabInnerComponent=t,this.directionsRange=["ltr","rtl"]}),{getOptions:function(){return this._getOptions()},_getOptions:function(){var e={tabs:[],selectedTabID:"",beforeSelect:function(){return!0},beforeClose:function(){return!0},onOpen:function(){},onClose:function(){},onFirstSelect:function(){},onSelect:function(){},onChange:function(){},onLoad:function(){},onDestroy:function(){},onInit:function(){},accessibility:!0,isVertical:!1,defaultPanelComponent:function(){return t.createElement("div",null)}},n=this.defaultDirection,i=this._DefaulTabInnerComponent,a=this;return Object.defineProperties(e,{direction:{get:function(){return n},set:function(t){if(-1===a.directionsRange.indexOf(t))throw'Invalid direction value! it can be eather of "ltr" or "rtl" ';n=t},enumerable:!0},tabComponent:{get:function(){return i},set:function(t){if(t&&"function"!=typeof t)throw"tabComponent property must be type of a function.";i=t||a._DefaulTabInnerComponent},enumerable:!0}}),e}}),C=y.bind(null,(function(){return{globalDefaultOptions:new m(T).getOptions()}})),I=o.module((function(){this.tabsId=[]}),{reset:function(){this.tabsId=[]},add:function(t){t&&this.tabsId.push(t)},remove:function(t){for(var e=this.tabsId;e.indexOf(t)>=0;)e.splice(e.indexOf(t),1);return this}}),_=o.module((function(){this._publishers={onChange:[],onLoad:[],onDestroy:[],onOpen:[],onClose:[],onSelect:[],onInit:[],_onFlushEffects:[],_onReady:[],onFirstSelect:[]}}),{off:function(t,e){if("function"==typeof e&&Object.prototype.hasOwnProperty.call(this._publishers,t)){var n=this._publishers[t].indexOf(e);n>=0&&this._publishers[t].splice(n,1)}return this},on:function(t,e){return"function"==typeof e&&Object.prototype.hasOwnProperty.call(this._publishers,t)&&-1===this._publishers[t].indexOf(e)&&this._publishers[t].push(e),this},one:function(t,e){if("function"==typeof e&&Object.prototype.hasOwnProperty.call(this._publishers,t)){return this.on(t,(function n(){e.apply(this,arguments),this.off(t,n)}))}return this}},{trigger:function(t,e,n){void 0===n&&(n=function(){return[]}),e=e||null;var i=[];return[].concat(this._publishers[t]).forEach((function(t){i.push(t.apply(e,n()))})),i}}),D=o.module((function(t){var e=t.helper,n=t.initialState;this._helper=e,this._dispatch=null,this._setFlushState=null,this._isReady=!1,e.setNoneEnumProps(this,{state:this._helper.getCopyState(n),forceUpdateState:{},previousState:this._helper.getCopyState(n),stateRef:{}})}),{_select:function(t){this._dispatch({type:i,tabId:t}),this.__flushEffects()},_close:function(t){this._dispatch({type:n,tabId:t}),this.__flushEffects()},_open:function(t){this._dispatch({type:e,tabId:t}),this.__flushEffects()},_refresh:function(){this.forceUpdateState={},this._dispatch({type:a}),this.__flushEffects()},_sort:function(t){this._dispatch({type:r,tabId:t}),this.__flushEffects()},__flushEffects:function(){this._setFlushState({})}},{updateStateRef:function(t,e){return this.stateRef=t,this._dispatch=e,this},updateState:function(t){return this.previousState=this._helper.getCopyState(this.state),this.state=this._helper.getCopyState(t),this},updateFlushState:function(t){return this._setFlushState=t,this}}),O=o.module((function(t){var e=this,n=(void 0===t?{initialTabs:[]}:t).initialTabs;this._data=[],n&&n.constructor===Array&&n.length&&n.forEach((function(t){e._addTab(t)}))}),{_addTab:function(t){return this._data.push(t),this},_removeTab:function(t){var e=this._data.findIndex((function(e){return e.id===t}));return e>=0&&this._data.splice(e,1),this},getTab:function(t){return this._data.find((function(e){return e.id===t}))},_setTab:function(t,e){var n=this._data.findIndex((function(e){return e.id==t}));if(n>=0){var i=this._data[n];e.id=i.id,Object.assign(this._data[n],e)}return this}});p.prototype=Object.create(D.prototype);var P=(o.assingAll(p.prototype,O.prototype,_.prototype,b).constructor=p).bind(null,(function(t){void 0===t&&(t={});var e=new I,n=new C({options:t});return D.call(this,{helper:o,initialState:n.initialState}),O.call(this,{initialTabs:n.initialTabs}),_.call(this),{activedTabsHistory:e,helper:o,optionsManager:n}}));function S(){return S=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)({}).hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},S.apply(null,arguments)}var x=t.createContext({}),E=t.createContext({}),w=t.createContext({});function M(e,n,i){var a=t.useContext(E),r=e(t.useContext(x)),s=r.Tabs,o=r.tablistPropsManager;return t.createElement(s,o(i,a))}function j(){return j=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)({}).hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},j.apply(null,arguments)}function F(e,n,i){var a=n.openTabIDs,r=n.selectedTabID,s=e(t.useContext(x)),o=s.TabsPropsManager,l=s.Tab;return t.createElement("ul",j({},o(n),{ref:i||null}),a.map((function(e){return t.createElement(l,{key:e,id:e,selectedTabID:r})})))}function R(){return R=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)({}).hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},R.apply(null,arguments)}var L=function(e,n){t.useContext(w);var i=t.useContext(x),a=e(i),r=a.tabPropsManager,s=a.tabInnerPropsManager,o=a.closeIconPropsManager,l=n.id;n.selectedTabID;var c=i.getOption("tabComponent"),u=i.getTab(l);return t.createElement("li",R({},r(n),{onClick:function(t){!function(t){i.eventHandlerFactory({e:t,id:l})}(t)}}),t.createElement(c,s(n),u.title),u.closable?t.createElement("span",o(),"×"):null)},N=function(e){return t.memo(e,(function(t,e){var n=t.id,i=t.selectedTabID,a=e.selectedTabID;return i===a||n!==i&&n!==a}))},A=function(t,e){var n=e.id,i=e.selectedTabID===n,a=t.getTab(n),r=a.disable,s=a.title,o=a.tooltip,l={"tab-id":n,className:t.getSetting("tabClass"),tabIndex:-1,title:o||s};return i&&(l.tabIndex=0,l.className+=" "+t.getSetting("selectedClass")),r&&(l.tabIndex=-1,l.className+=" "+t.getSetting("disableClass")),t.getOption("accessibility")&&(l.role="tab",l.id=t.getSetting("ariaLabelledbyIdTemplate",n),l["aria-controls"]=t.getSetting("panelIdTemplate",n),l["aria-label"]=o||s,l["aria-selected"]=l["aria-expanded"]=i),l},V=function(t,e){var n=e.id,i=e.selectedTabID==n,a=t.getTab(n).iconClass,r={id:n,isSelected:i,api:t.userProxy,tabProps:{"tab-id":n,className:t.getSetting("titleClass"),tabIndex:-1,role:"presentation"}};return a&&(r.iconProps={className:t.getSetting("iconClass")+" "+a,role:"presentation"}),r},U=function(t){var e={className:t.getSetting("closeClass")};return t.getOption("accessibility")&&(e.role="button"),e},H=N,k=N(L.bind(void 0,(function(t){return{tabPropsManager:function(e){return A(t,e)},tabInnerPropsManager:function(e){return V(t,e)},closeIconPropsManager:function(){return U(t)}}}))),z=function(t,e){var n=e.dir,i=e.isVertical,a={className:t.getSetting("tablistClass")+" "+t.getSetting(n+"Class")};return i&&(a.className+=" "+t.getSetting("verticalClass")),t.getOption("accessibility")&&(a.role="tablist"),a},q=t.forwardRef(F.bind(void 0,(function(t){return{Tab:k,TabsPropsManager:function(e){return z(t,e)}}}))),B=function(t,e,n){return{openTabIDs:n.openTabIDs,selectedTabID:n.selectedTabID,ref:e,dir:t.getOption("direction"),isVertical:t.getOption("isVertical")}},G=t.memo(t.forwardRef(M.bind(void 0,(function(t){return{Tabs:q,tablistPropsManager:function(e,n){return B(t,e,n)}}}))),(function(){return!0}));var J=function(e){t.useContext(w);var n=e.id,i=e.selectedTabID,a=t.useContext(x),r=n===i,s=function(t){var e=t.isSelected,n=t.api,i=t.id,a=n.optionsManager.options,r=n.optionsManager.setting,s={"tab-id":i,className:r.panelClass};return e&&(s.className+=" "+r.selectedClass),a.accessibility&&(s.role="tabpanel",s.id=r.panelIdTemplate(i),s["aria-hidden"]=!e,s["aria-labelledby"]=r.ariaLabelledbyIdTemplate(i)),s}({isSelected:r,api:a,id:n}),o=a.state.selectedTabID,l=a.getTab(n),c=l.panelComponent,u=!1;return(!l.lazy||r||o===n||a.activedTabsHistory.tabsId.indexOf(n)>=0)&&(u=!0),t.createElement("div",s,u&&c?t.createElement(c,{id:n,isSelected:r,api:a.userProxy}):null)},K=t.memo(J,(function(t,e){var n=t.id,i=t.selectedTabID,a=e.selectedTabID;return i===a||n!==i&&n!==a})),Q=t.memo((function(){var e=t.useContext(E),n=e.openTabIDs,i=e.selectedTabID,a=t.useContext(x),r=a.optionsManager.setting,s=a.optionsManager.options,o=r.panellistClass+" "+r[s.direction+"Class"];return s.isVertical&&(o+=" "+r.verticalClass),t.createElement("div",{className:o},n.map((function(e){return t.createElement(K,{key:e,id:e,selectedTabID:i})})))}),(function(){return!0}));function W(e,n){var i=e(t.useContext(x)).tablistViewPropsManager;return t.createElement("div",i(),n.children)}var X=function(t){var e=t.getSetting("tablistViewClass")+" "+t.getSetting(t.getOption("direction")+"Class");return t.getOption("isVertical")&&(e+=" "+t.getSetting("verticalClass")),{className:e}},Y=W.bind(void 0,(function(t){return{tablistViewPropsManager:function(){return X(t)}}}));function Z(e,n){var i=e(t.useContext(x)).tablistContainerPropsManager;return t.createElement("div",i(),n.children)}var $=function(t){return{className:t.getSetting("tablistContainerClass")}},tt=Z.bind(void 0,(function(t){return{tablistContainerPropsManager:function(){return $(t)}}})),et=function(){return t.useContext(x)};function nt(e,n){var i=e(et()).tablistOverflowPropsManager;return t.createElement("div",i(),n.children)}var it=function(t){return{style:{overflow:"visible"},className:t.getSetting("tablistOverflowClass")}},at=nt.bind(void 0,(function(t){return{tablistOverflowPropsManager:function(){return it(t)}}})),rt={TablistView:Y,tablistViewPropsManager:X,TablistViewFactory:W,TablistContainer:tt,tablistContainerPropsManager:$,TablistContainerFactory:Z,TablistOverflow:at,TablistOverflowFactory:nt,tablistOverflowPropsManager:it,TabList:G,tablistPropsManager:B,TabListFactory:M,Tabs:q,TabsPropsManager:z,TabsFactory:F,Tab:k,tabPropsManager:A,tabInnerPropsManager:V,closeIconPropsManager:U,memomizeTab:H,TabFactory:L,PanelList:Q,useApi:et,useRootState:function(){return t.useContext(E)},useForceUpdate:function(){return t.useContext(w)}},st=function(e,n,i){void 0===n&&(n={});var a=e(),r=a.reducer,s=a.getApiInstance,o=a.ApiContext,l=a.StateContext,c=a.ForceUpdateContext,u=a.Components,f=t.useRef(null);null===f.current&&(f.current={Components:S({},u),TabListComponent:null,PanelListComponent:null},f.current.api=s(n,i,f.current.Components));var p=f.current.api,d=f.current,b=t.useReducer(r,p.optionsManager.initialState),h=b[0],g=b[1],v=t.useState({}),y=v[0],T=v[1];return p.updateStateRef(h,g).updateFlushState(T),t.useLayoutEffect((function(){p.updateState(h)}),[h]),t.useLayoutEffect((function(){return p.trigger("onLoad",p.userProxy),function(){p.trigger("onDestroy",p.userProxy)}}),[]),t.useLayoutEffect((function(){p.trigger("onInit",p.userProxy)})),t.useLayoutEffect((function(){p.trigger("_onReady",p.userProxy)}),[]),t.useLayoutEffect((function(){var t=p.previousState,e=p.helper.getArraysDiff(h.openTabIDs,t.openTabIDs),n=e[0],i=e[1],a=t.selectedTabID!==h.selectedTabID;p.onChange({newState:h,oldState:t,closedTabIDs:i,openedTabIDs:n,isSwitched:a})}),[h]),t.useLayoutEffect((function(){p.trigger("_onFlushEffects",p.userProxy,(function(){return[{currentData:p.getData(),instance:p.userProxy}]}))}),[y]),d.TabListComponent||(d.TabListComponent=function(e){return void 0===e&&(e={}),t.createElement(o.Provider,{value:p},t.createElement(l.Provider,{value:p.stateRef},t.createElement(c.Provider,{value:p.forceUpdateState},t.createElement(d.Components.TablistView,null,t.createElement(d.Components.TablistContainer,null,t.createElement(d.Components.TablistOverflow,null,t.createElement(d.Components.TabList,e))),e.children))))}),d.PanelListCompoent||(d.PanelListCompoent=function(e){return t.createElement(o.Provider,{value:p},t.createElement(l.Provider,{value:p.stateRef},t.createElement(c.Provider,{value:p.forceUpdateState},t.createElement(u.PanelList,e,"props.children"))))}),[d.TabListComponent,d.PanelListCompoent,p.ready]}.bind(null,(function(){return{reducer:l,getApiInstance:function(t,e,n){return new P({options:t},e,n)},ApiContext:x,StateContext:E,ForceUpdateContext:w,Components:rt}}));return st}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],e):(t="undefined"!=typeof globalThis?globalThis:t||self).useDynTabs=e(t.React)}(this,(function(t){"use strict";var e="open",n="close",i="active",a="refresh",r="sort",s=1,o={checkArrIndex:function(t,e){return t>=0&&t<e},resolve:function(t){return Promise.resolve(t)},getCopyState:function(t){return{selectedTabID:t.selectedTabID,openTabIDs:(t.openTabIDs||[]).slice()}},assingAll:function(t){for(var e=arguments.length,n=new Array(e>1?e-1:0),i=1;i<e;i++)n[i-1]=arguments[i];return n.forEach((function(e){var n=Object.keys(e);Object.getOwnPropertyNames(e).forEach((function(i){n.indexOf(i)>=0?t[i]=e[i]:Object.defineProperty(t,i,{value:e[i],writable:!0})}))})),t},setNoneEnumProps:function(t,e){var n={};return Object.keys(e).forEach((function(t){n[t]={writable:!0,value:e[t]}})),Object.defineProperties(t,n)},getArraysDiff:function(t,e){var n=[].concat(t),i=[].concat(e);return t.forEach((function(t){e.indexOf(t)>=0&&(n.splice(n.indexOf(t),1),i.splice(i.indexOf(t),1))})),[n,i]},filterArrayUntilFirstValue:function(t,e,n){n&&t.reverse();for(var i=0,a=t.length;i<a;i++)if(e(t[i],i,t))return t[i];return null},throwMissingParam:function(t){throw new Error('Missing parameter in "'+t+'" function')},thorwInvalidParam:function(t){throw new Error("Invalid parameter values passed to "+t+" function")},isObj:function(t){return"[object Object]"===Object.prototype.toString.call(t)},isArray:function(t){return"object"==typeof t&&t.constructor===Array},module:function(t,e,n){return this.assingAll(t.prototype,n?this.setNoneEnumProps(e,n):e).constructor},uuid:function(){return s++,""+(new Date).getTime()+Math.random()+s}};function l(t,s){switch(s.type){case n:var l=t.openTabIDs,c=l.indexOf(s.tabId);if(c>=0){var u=l.slice();return u.splice(c,1),{selectedTabID:t.selectedTabID,openTabIDs:u}}return t;case e:var f=t.openTabIDs,p=s.tabId;if(-1===f.indexOf(p)){var d=f.slice();return d.push(p),{selectedTabID:t.selectedTabID,openTabIDs:d}}return t;case a:return o.getCopyState(t);case i:var b=s.tabId;return t.selectedTabID!==b?{selectedTabID:b,openTabIDs:t.openTabIDs}:t;case r:var h=t.openTabIDs,g=s.tabId,v=g.length;if(h.length!==v)return t;for(var y=0;y<v;y++)if(-1===h.indexOf(g[y]))return t;return{selectedTabID:t.selectedTabID,openTabIDs:g};default:throw new Error("Undefined action type '"+s.type+"'")}}var c=o.throwMissingParam,u=o.isArray,f=o.thorwInvalidParam,p=function(t,e,n,i){var a=this;void 0===e&&(e={options:{}}),void 0===n&&(n=[]);var r=t.call(this,e.options),s=r.optionsManager,o=r.helper,l=r.activedTabsHistory;o.setNoneEnumProps(this,{optionsManager:s,helper:o,activedTabsHistory:l,userProxy:{}}),this._setUserProxy()._subscribeOnReadyEvent()._createReadyFunction()._subscribeSelectedTabsHistory()._subscribeCallbacksOptions(),n.forEach((function(t){return t(a,i)}))},d={_setUserProxy:function(){var t=this,e={},n=function(n){var i,a;"_"!==n[0]&&"constructor"!==n&&(a=(i=t)[n],e[n]="function"==typeof a?function(){var t=a.apply(i,arguments);return t===i?e:t}:a)};for(var i in this)n(i);return this.userProxy=e,this},_subscribeOnReadyEvent:function(){var t=this;return this.one("_onReady",(function(){t._isReady=!0})),this},_createReadyFunction:function(){var t=this,e=function(e){!0===t._isReady?e.call(t.userProxy,t.userProxy):t.one("_onReady",(function(){e.call(t.userProxy,t.userProxy)}))};return e=e.bind(this),this.helper.setNoneEnumProps(this,{ready:e}),this},_subscribeSelectedTabsHistory:function(){var t=this;return this.on("onChange",(function(e){for(var n=e.currentData,i=e.previousData,a=e.closedTabIDs,r=0,s=a.length;r<s;r++)t.activedTabsHistory.remove(a[r]);i.selectedTabID!==n.selectedTabID&&t.isOpen(i.selectedTabID)&&!t.isSelected(i.selectedTabID)&&t.activedTabsHistory.add(i.selectedTabID)})),this},_subscribeCallbacksOptions:function(){var t=this,e=this.optionsManager.options;return Object.keys(this._publishers).forEach((function(n){"_"!==n[0]&&t.on(n,(function(){e[n].apply(this,arguments)}))})),this},getOption:function(t){return this.optionsManager.getOption(t)},setOption:function(t,e){return this.optionsManager.setOption(t,e),this},getPreviousData:function(){return this.helper.getCopyState(this.previousState)},getCopyPerviousData:function(){return this.getPreviousData()},getData:function(){return this.helper.getCopyState(this.stateRef)},getCopyData:function(){return this.getData()},isSelected:function(t){return void 0===t&&(t=c("isSelected")),this.stateRef.selectedTabID==t},isOpen:function(t){return void 0===t&&(t=c("isOpen")),this.stateRef.openTabIDs.indexOf(t)>=0},_getFlushEffectsPromise:function(){var t=this;return new Promise((function(e){t.one("_onFlushEffects",(function(){e.apply(this,arguments)}))}))},select:function(t){void 0===t&&(t=c("select")),t&&(t+="");var e=this._getFlushEffectsPromise();return this._select(t),e},_getPreSelectedTabId:function(){for(var t=[].concat(this.activedTabsHistory.tabsId),e="";!e&&t.length;){var n=t.pop();if(n){var i=this.getTab(n);i&&!i.disable&&this.isOpen(n)&&!this.isSelected(n)&&(e=n)}}return e},_getPreSiblingTabId:function(){var t=this,e=this.stateRef,n=e.selectedTabID,i=e.openTabIDs,a=i.slice(0,i.indexOf(n));return this.helper.filterArrayUntilFirstValue(a,(function(e){return!t.getTab(e).disable}),!0)},_getNextSiblingTabId:function(){var t=this,e=this.stateRef,n=e.selectedTabID,i=e.openTabIDs,a=i.slice(i.indexOf(n)+1);return this.helper.filterArrayUntilFirstValue(a,(function(e){return!t.getTab(e).disable}),!1)},_findTabIdForSwitching:function(){return this._getPreSelectedTabId()||this._getPreSiblingTabId()||this._getNextSiblingTabId()||""},setTab:function(t,e){return void 0===e&&(e={}),this.optionsManager.validateObjectiveTabData(e).validatePanelComponent(e),this._setTab(t,e),this},open:function(t){void 0===t&&(t=c("open"));var e=this.optionsManager.validateTabData(t),n=this._getFlushEffectsPromise();return this._addTab(e),this._open(e.id),n},sort:function(t){void 0===t&&(t=c("sort")),u(t)||f("sort");var e=this._getFlushEffectsPromise();return this._sort(t),e},__close:function(t){var e=this._getFlushEffectsPromise();return this._close(t),this._removeTab(t),e},close:function(t,e){if(void 0===t&&(t=c("close")),void 0===e&&(e=!0),t&&(t+=""),e&&this.isOpen(t)&&this.isSelected(t)){var n=[].concat(this.stateRef.openTabIDs);return n.splice(n.indexOf(t),1),this.select(this._findTabIdForSwitching()),this.__close(t)}return this.__close(t)},refresh:function(){var t=this._getFlushEffectsPromise();return this._refresh(),t}};o.setNoneEnumProps(d,{onChange:function(t){var e=this,n=t.newState,i=t.oldState,a=t.closedTabIDs,r=t.openedTabIDs,s=t.isSwitched;return(s||r.length||a.length)&&(this.trigger("onChange",this.userProxy,(function(){return[{currentData:e.helper.getCopyState(n),previousData:e.helper.getCopyState(i),closedTabIDs:a.slice(),openedTabIDs:r.slice()}]})),r.length&&this.trigger("onOpen",this.userProxy,(function(){return[r.slice()]})),a.length&&this.trigger("onClose",this.userProxy,(function(){return[a.slice()]})),s&&(n.selectedTabID&&-1===this.activedTabsHistory.tabsId.indexOf(n.selectedTabID)&&this.trigger("onFirstSelect",this.userProxy,(function(){return[{currentSelectedTabId:n.selectedTabID,previousSelectedTabId:i.selectedTabID}]})),this.trigger("onSelect",this.userProxy,(function(){return[{currentSelectedTabId:n.selectedTabID,previousSelectedTabId:i.selectedTabID}]})))),this},eventHandlerFactory:function(t){var e=t.e,n=t.id,i=e.target,a=i.parentElement,r=this.optionsManager.setting,s=r.closeClass,o=r.tabClass;i.className.includes(s)&&a&&a.lastChild&&a.lastChild==i&&a.className.includes(o)?!1!==this.getOption("beforeClose").call(this.userProxy,e,n)&&this.close(n,!0):!1!==this.getOption("beforeSelect").call(this.userProxy,e,n)&&this.select(n)},getSetting:function(t){var e=this.optionsManager.setting;if(e.hasOwnProperty(t))return"function"==typeof e[t]?e[t].apply(e,Array.prototype.slice.call(arguments,1)):e[t]}});var b=d;function h(){return h=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)({}).hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},h.apply(null,arguments)}var g=o.throwMissingParam,v=o.uuid,y=o.module((function(t,e){var n=e.options,i=t().globalDefaultOptions;this._defaultOptions=i,this._validateOptions(n),this.options=Object.assign({},this._defaultOptions,n),this.setting={},this.initialState={},this.initialTabs=[],this._setSetting()._setInitialData()}),{getOption:function(t){if("tabs"===t){for(var e=[],n=0,i=this.options.tabs,a=i.length;n<a;n++)e.push(h({},i[n]));return e}return this.options[t]},setOption:function(t,e){return void 0===t&&(t=g("setOption")),void 0===e&&(e=g("setOption")),["SELECTEDTABID","TABS"].indexOf(t.toUpperCase())>=0||(this.options[t]=e),this},validatePanelComponent:function(e){if(e.panelComponent&&"function"!=typeof e.panelComponent&&t.isValidElement(e.panelComponent)){var n=e.panelComponent;e.panelComponent=function(){return n}}return this},validateObjectiveTabData:function(t){if("[object Object]"!==Object.prototype.toString.call(t))throw new Error("tabData must be type of Object");return this},validateTabData:function(t){return this.validateObjectiveTabData(t).validatePanelComponent(t),(t=Object.assign(this.setting.getDefaultTabData(),t)).id=t.id+"",t},_validateOptions:function(t){if("[object Object]"!==Object.prototype.toString.call(t))throw'Invalid argument in "useDynamicTabs" function. Argument must be type of an object';return this},_setInitialData:function(){var t=this,e=this.options,n=e.selectedTabID,i=e.tabs,a=[];return i.forEach((function(e){var n=t.validateTabData(e);t.initialTabs.push(n),a.push(n.id)})),this.initialState={selectedTabID:n+"",openTabIDs:a},this},_setSetting:function(){var t=this;return this.setting={tabClass:"rc-dyn-tabs-tab",titleClass:"rc-dyn-tabs-title",iconClass:"rc-dyn-tabs-icon",selectedClass:"rc-dyn-tabs-selected",hoverClass:"rc-dyn-tabs-hover",closeClass:"rc-dyn-tabs-close",panelClass:"rc-dyn-tabs-panel",panellistClass:"rc-dyn-tabs-panellist",disableClass:"rc-dyn-tabs-disable",ltrClass:"rc-dyn-tabs-ltr",rtlClass:"rc-dyn-tabs-rtl",verticalClass:"rc-dyn-tabs-vertical",tablistViewClass:"rc-dyn-tabs-tablist-view",tablistContainerClass:"rc-dyn-tabs-tablist-container",tablistOverflowClass:"rc-dyn-tabs-tablist-overflow",tablistClass:"rc-dyn-tabs-tablist",panelIdTemplate:function(t){return"rc-dyn-tabs-p-"+t},ariaLabelledbyIdTemplate:function(t){return"rc-dyn-tabs-l-"+t},getDefaultTabData:function(){return{title:"",tooltip:"",panelComponent:t.options.defaultPanelComponent,closable:!0,iconClass:"",disable:!1,lazy:!1,id:"tab_"+v()}}},this}}),T=function(e){return t.createElement("button",e.tabProps,e.children,Object.prototype.hasOwnProperty.call(e,"iconProps")&&t.createElement("span",e.iconProps))},m=o.module((function(t){void 0===t&&(t=null),this.defaultDirection="ltr",this._DefaulTabInnerComponent=t,this.directionsRange=["ltr","rtl"]}),{getOptions:function(){return this._getOptions()},_getOptions:function(){var e={tabs:[],selectedTabID:"",theme:"all-themes",beforeSelect:function(){return!0},beforeClose:function(){return!0},onOpen:function(){},onClose:function(){},onFirstSelect:function(){},onSelect:function(){},onChange:function(){},onLoad:function(){},onDestroy:function(){},onInit:function(){},accessibility:!0,isVertical:!1,defaultPanelComponent:function(){return t.createElement("div",null)}},n=this.defaultDirection,i=this._DefaulTabInnerComponent,a=this;return Object.defineProperties(e,{direction:{get:function(){return n},set:function(t){if(-1===a.directionsRange.indexOf(t))throw'Invalid direction value! it can be eather of "ltr" or "rtl" ';n=t},enumerable:!0},tabComponent:{get:function(){return i},set:function(t){if(t&&"function"!=typeof t)throw"tabComponent property must be type of a function.";i=t||a._DefaulTabInnerComponent},enumerable:!0}}),e}}),C=y.bind(null,(function(){return{globalDefaultOptions:new m(T).getOptions()}})),I=o.module((function(){this.tabsId=[]}),{reset:function(){this.tabsId=[]},add:function(t){t&&this.tabsId.push(t)},remove:function(t){for(var e=this.tabsId;e.indexOf(t)>=0;)e.splice(e.indexOf(t),1);return this}}),_=o.module((function(){this._publishers={onChange:[],onLoad:[],onDestroy:[],onOpen:[],onClose:[],onSelect:[],onInit:[],_onFlushEffects:[],_onReady:[],onFirstSelect:[]}}),{off:function(t,e){if("function"==typeof e&&Object.prototype.hasOwnProperty.call(this._publishers,t)){var n=this._publishers[t].indexOf(e);n>=0&&this._publishers[t].splice(n,1)}return this},on:function(t,e){return"function"==typeof e&&Object.prototype.hasOwnProperty.call(this._publishers,t)&&-1===this._publishers[t].indexOf(e)&&this._publishers[t].push(e),this},one:function(t,e){if("function"==typeof e&&Object.prototype.hasOwnProperty.call(this._publishers,t)){return this.on(t,(function n(){e.apply(this,arguments),this.off(t,n)}))}return this}},{trigger:function(t,e,n){void 0===n&&(n=function(){return[]}),e=e||null;var i=[];return[].concat(this._publishers[t]).forEach((function(t){i.push(t.apply(e,n()))})),i}}),D=o.module((function(t){var e=t.helper,n=t.initialState;this._helper=e,this._dispatch=null,this._setFlushState=null,this._isReady=!1,e.setNoneEnumProps(this,{state:this._helper.getCopyState(n),forceUpdateState:{},previousState:this._helper.getCopyState(n),stateRef:{}})}),{_select:function(t){this._dispatch({type:i,tabId:t}),this.__flushEffects()},_close:function(t){this._dispatch({type:n,tabId:t}),this.__flushEffects()},_open:function(t){this._dispatch({type:e,tabId:t}),this.__flushEffects()},_refresh:function(){this.forceUpdateState={},this._dispatch({type:a}),this.__flushEffects()},_sort:function(t){this._dispatch({type:r,tabId:t}),this.__flushEffects()},__flushEffects:function(){this._setFlushState({})}},{updateStateRef:function(t,e){return this.stateRef=t,this._dispatch=e,this},updateState:function(t){return this.previousState=this._helper.getCopyState(this.state),this.state=this._helper.getCopyState(t),this},updateFlushState:function(t){return this._setFlushState=t,this}}),O=o.module((function(t){var e=this,n=(void 0===t?{initialTabs:[]}:t).initialTabs;this._data=[],n&&n.constructor===Array&&n.length&&n.forEach((function(t){e._addTab(t)}))}),{_addTab:function(t){return this._data.push(t),this},_removeTab:function(t){var e=this._data.findIndex((function(e){return e.id===t}));return e>=0&&this._data.splice(e,1),this},getTab:function(t){return this._data.find((function(e){return e.id===t}))},_setTab:function(t,e){var n=this._data.findIndex((function(e){return e.id==t}));if(n>=0){var i=this._data[n];e.id=i.id,Object.assign(this._data[n],e)}return this}});p.prototype=Object.create(D.prototype);var P=(o.assingAll(p.prototype,O.prototype,_.prototype,b).constructor=p).bind(null,(function(t){void 0===t&&(t={});var e=new I,n=new C({options:t});return D.call(this,{helper:o,initialState:n.initialState}),O.call(this,{initialTabs:n.initialTabs}),_.call(this),{activedTabsHistory:e,helper:o,optionsManager:n}}));function S(){return S=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)({}).hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},S.apply(null,arguments)}var x=t.createContext({}),E=t.createContext({}),w=t.createContext({});function M(e,n,i){var a=t.useContext(E),r=e(t.useContext(x)),s=r.Tabs,o=r.tablistPropsManager;return t.createElement(s,o(i,a))}function j(){return j=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)({}).hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},j.apply(null,arguments)}function F(e,n,i){var a=n.openTabIDs,r=n.selectedTabID,s=e(t.useContext(x)),o=s.TabsPropsManager,l=s.Tab;return t.createElement("ul",j({},o(n),{ref:i||null}),a.map((function(e){return t.createElement(l,{key:e,id:e,selectedTabID:r})})))}function R(){return R=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)({}).hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},R.apply(null,arguments)}var L=function(e,n){t.useContext(w);var i=t.useContext(x),a=e(i),r=a.tabPropsManager,s=a.tabInnerPropsManager,o=a.closeIconPropsManager,l=n.id;n.selectedTabID;var c=i.getOption("tabComponent"),u=i.getTab(l);return t.createElement("li",R({},r(n),{onClick:function(t){!function(t){i.eventHandlerFactory({e:t,id:l})}(t)}}),t.createElement(c,s(n),u.title),u.closable?t.createElement("span",o(),"×"):null)},N=function(e){return t.memo(e,(function(t,e){var n=t.id,i=t.selectedTabID,a=e.selectedTabID;return i===a||n!==i&&n!==a}))},A=function(t,e){var n=e.id,i=e.selectedTabID===n,a=t.getTab(n),r=a.disable,s=a.title,o=a.tooltip,l={"tab-id":n,className:t.getSetting("tabClass"),tabIndex:-1,title:o||s};return i&&(l.tabIndex=0,l.className+=" "+t.getSetting("selectedClass")),r&&(l.tabIndex=-1,l.className+=" "+t.getSetting("disableClass")),t.getOption("accessibility")&&(l.role="tab",l.id=t.getSetting("ariaLabelledbyIdTemplate",n),l["aria-controls"]=t.getSetting("panelIdTemplate",n),l["aria-label"]=o||s,l["aria-selected"]=l["aria-expanded"]=i),l},V=function(t,e){var n=e.id,i=e.selectedTabID==n,a=t.getTab(n).iconClass,r={id:n,isSelected:i,api:t.userProxy,tabProps:{"tab-id":n,className:t.getSetting("titleClass"),tabIndex:-1,role:"presentation"}};return a&&(r.iconProps={className:t.getSetting("iconClass")+" "+a,role:"presentation"}),r},U=function(t){var e={className:t.getSetting("closeClass")};return t.getOption("accessibility")&&(e.role="button"),e},H=N,k=N(L.bind(void 0,(function(t){return{tabPropsManager:function(e){return A(t,e)},tabInnerPropsManager:function(e){return V(t,e)},closeIconPropsManager:function(){return U(t)}}}))),z=function(t,e){var n=e.dir,i=e.isVertical,a={className:t.getSetting("tablistClass")+" "+t.getSetting(n+"Class")};return i&&(a.className+=" "+t.getSetting("verticalClass")),t.getOption("accessibility")&&(a.role="tablist"),a},q=t.forwardRef(F.bind(void 0,(function(t){return{Tab:k,TabsPropsManager:function(e){return z(t,e)}}}))),B=function(t,e,n){return{openTabIDs:n.openTabIDs,selectedTabID:n.selectedTabID,ref:e,dir:t.getOption("direction"),isVertical:t.getOption("isVertical")}},G=t.memo(t.forwardRef(M.bind(void 0,(function(t){return{Tabs:q,tablistPropsManager:function(e,n){return B(t,e,n)}}}))),(function(){return!0}));var J=function(e){t.useContext(w);var n=e.id,i=e.selectedTabID,a=t.useContext(x),r=n===i,s=function(t){var e=t.isSelected,n=t.api,i=t.id,a=n.optionsManager.options,r=n.optionsManager.setting,s={"tab-id":i,className:r.panelClass};return e&&(s.className+=" "+r.selectedClass),a.accessibility&&(s.role="tabpanel",s.id=r.panelIdTemplate(i),s["aria-hidden"]=!e,s["aria-labelledby"]=r.ariaLabelledbyIdTemplate(i)),s}({isSelected:r,api:a,id:n}),o=a.state.selectedTabID,l=a.getTab(n),c=l.panelComponent,u=!1;return(!l.lazy||r||o===n||a.activedTabsHistory.tabsId.indexOf(n)>=0)&&(u=!0),t.createElement("div",s,u&&c?t.createElement(c,{id:n,isSelected:r,api:a.userProxy}):null)},K=t.memo(J,(function(t,e){var n=t.id,i=t.selectedTabID,a=e.selectedTabID;return i===a||n!==i&&n!==a})),Q=t.memo((function(){var e=t.useContext(E),n=e.openTabIDs,i=e.selectedTabID,a=t.useContext(x),r=a.optionsManager.setting,s=a.optionsManager.options,o=r.panellistClass+" "+r[s.direction+"Class"];return s.isVertical&&(o+=" "+r.verticalClass),t.createElement("div",{className:o},n.map((function(e){return t.createElement(K,{key:e,id:e,selectedTabID:i})})))}),(function(){return!0}));function W(e,n){var i=e(t.useContext(x)).tablistViewPropsManager;return t.createElement("div",i(),n.children)}var X=function(t){var e=t.getSetting("tablistViewClass")+" "+t.getSetting(t.getOption("direction")+"Class");t.getOption("isVertical")&&(e+=" "+t.getSetting("verticalClass"));var n=t.getOption("theme");return n&&(e+=" "+n),{className:e}},Y=W.bind(void 0,(function(t){return{tablistViewPropsManager:function(){return X(t)}}}));function Z(e,n){var i=e(t.useContext(x)).tablistContainerPropsManager;return t.createElement("div",i(),n.children)}var $=function(t){return{className:t.getSetting("tablistContainerClass")}},tt=Z.bind(void 0,(function(t){return{tablistContainerPropsManager:function(){return $(t)}}})),et=function(){return t.useContext(x)};function nt(e,n){var i=e(et()).tablistOverflowPropsManager;return t.createElement("div",i(),n.children)}var it=function(t){return{style:{overflow:"visible"},className:t.getSetting("tablistOverflowClass")}},at=nt.bind(void 0,(function(t){return{tablistOverflowPropsManager:function(){return it(t)}}})),rt={TablistView:Y,tablistViewPropsManager:X,TablistViewFactory:W,TablistContainer:tt,tablistContainerPropsManager:$,TablistContainerFactory:Z,TablistOverflow:at,TablistOverflowFactory:nt,tablistOverflowPropsManager:it,TabList:G,tablistPropsManager:B,TabListFactory:M,Tabs:q,TabsPropsManager:z,TabsFactory:F,Tab:k,tabPropsManager:A,tabInnerPropsManager:V,closeIconPropsManager:U,memomizeTab:H,TabFactory:L,PanelList:Q,useApi:et,useRootState:function(){return t.useContext(E)},useForceUpdate:function(){return t.useContext(w)}},st=function(e,n,i){void 0===n&&(n={});var a=e(),r=a.reducer,s=a.getApiInstance,o=a.ApiContext,l=a.StateContext,c=a.ForceUpdateContext,u=a.Components,f=t.useRef(null);null===f.current&&(f.current={Components:S({},u),TabListComponent:null,PanelListComponent:null},f.current.api=s(n,i,f.current.Components));var p=f.current.api,d=f.current,b=t.useReducer(r,p.optionsManager.initialState),h=b[0],g=b[1],v=t.useState({}),y=v[0],T=v[1];return p.updateStateRef(h,g).updateFlushState(T),t.useLayoutEffect((function(){p.updateState(h)}),[h]),t.useLayoutEffect((function(){return p.trigger("onLoad",p.userProxy),function(){p.trigger("onDestroy",p.userProxy)}}),[]),t.useLayoutEffect((function(){p.trigger("onInit",p.userProxy)})),t.useLayoutEffect((function(){p.trigger("_onReady",p.userProxy)}),[]),t.useLayoutEffect((function(){var t=p.previousState,e=p.helper.getArraysDiff(h.openTabIDs,t.openTabIDs),n=e[0],i=e[1],a=t.selectedTabID!==h.selectedTabID;p.onChange({newState:h,oldState:t,closedTabIDs:i,openedTabIDs:n,isSwitched:a})}),[h]),t.useLayoutEffect((function(){p.trigger("_onFlushEffects",p.userProxy,(function(){return[{currentData:p.getData(),instance:p.userProxy}]}))}),[y]),d.TabListComponent||(d.TabListComponent=function(e){return void 0===e&&(e={}),t.createElement(o.Provider,{value:p},t.createElement(l.Provider,{value:p.stateRef},t.createElement(c.Provider,{value:p.forceUpdateState},t.createElement(d.Components.TablistView,null,t.createElement(d.Components.TablistContainer,null,t.createElement(d.Components.TablistOverflow,null,t.createElement(d.Components.TabList,e))),e.children))))}),d.PanelListCompoent||(d.PanelListCompoent=function(e){return t.createElement(o.Provider,{value:p},t.createElement(l.Provider,{value:p.stateRef},t.createElement(c.Provider,{value:p.forceUpdateState},t.createElement(u.PanelList,e,"props.children"))))}),[d.TabListComponent,d.PanelListCompoent,p.ready]}.bind(null,(function(){return{reducer:l,getApiInstance:function(t,e,n){return new P({options:t},e,n)},ApiContext:x,StateContext:E,ForceUpdateContext:w,Components:rt}}));return st}));
 //# sourceMappingURL=react-dyn-tabs.umd.min.js.map

lib/cjs/tablistView/tablistView.js

@@ -12,2 +12,6 @@ "use strict";
   }
+  var themeName = ins.getOption('theme');
+  if (themeName) {
+    className += ' ' + themeName;
+  }
   return {
@@ -14,0 +18,0 @@ className: className

lib/cjs/utils/api/optionManager/defaultOptions.js

@@ -24,2 +24,3 @@ "use strict";
       selectedTabID: '',
+      theme: 'all-themes',
       beforeSelect: function beforeSelect() {
@@ -26,0 +27,0 @@ return true;

lib/esm/tablistView/tablistView.js

@@ -7,2 +7,6 @@ import TablistView from './tablistView.factory.js';
   }
+  var themeName = ins.getOption('theme');
+  if (themeName) {
+    className += ' ' + themeName;
+  }
   return {
@@ -9,0 +13,0 @@ className: className

lib/esm/utils/api/optionManager/defaultOptions.js

@@ -19,2 +19,3 @@ /* eslint react/prop-types: 0 */
       selectedTabID: '',
+      theme: 'all-themes',
       beforeSelect: function beforeSelect() {
@@ -21,0 +22,0 @@ return true;

package.json

 {
   "name": "react-dyn-tabs",
-  "version": "6.0.1",
+  "version": "6.1.0",
   "private": false,
@@ -54,3 +54,5 @@ "description": "React dynamic tabs with full API",
     "lint": "eslint src",
-    "deploy": "gh-pages -d demo"
+    "deploy": "gh-pages -d demo",
+    "styleguide": "styleguidist server",
+    "styleguide:build": "styleguidist build"
   },
@@ -90,2 +92,3 @@ "peerDependencies": {
     "@babel/preset-react": "^7.24.7",
+    "react-styleguidist": "^12.0.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
@@ -92,0 +95,0 @@ "css-loader": "^7.1.2",

README.md

@@ -38,2 +38,3 @@ [![Test coverage](https://codecov.io/gh/dev-javascript/react-dyn-tabs/graph/badge.svg?token=GT1LU074L2)](https://codecov.io/gh/dev-javascript/react-dyn-tabs) [![NPM version](http://img.shields.io/npm/v/react-dyn-tabs.svg?style=flat-square)](https://www.npmjs.com/package/react-dyn-tabs) [![node](https://img.shields.io/badge/node.js-%3E=_8.0-green.svg?style=flat-square)](http://nodejs.org/download/) [![React](https://img.shields.io/badge/React-%3E=_16.8.0-green.svg?style=flat-square)](https://react.dev/) [![License](http://img.shields.io/npm/l/react-dyn-tabs.svg?style=flat-square)](LICENSE) [![npm download](https://img.shields.io/npm/dm/react-dyn-tabs.svg?style=flat-square)](https://npmjs.org/package/react-dyn-tabs) [![Build Status](https://travis-ci.org/ly-components/react-dyn-tabs.png)](https://travis-ci.org/ly-components/react-dyn-tabs)
   - [isVertical](#isvertical)
+  - [theme](#theme)
   - [onLoad](#onload)
@@ -71,3 +72,3 @@ - [onInit](#oninit)
 - [Render custom components at the end of the Tablist](#render-custom-components-at-the-end-of-the-tablist)
-- [Styling](#styling)
+- [Themes And Style](#themes-and-style)
 - [Caveats](#caveats)
@@ -81,7 +82,11 @@ - [Test](#test)
 
-> $ npm install react-dyn-tabs --save
+```js
+ $ npm install react-dyn-tabs --save
+```
 
 or
 
-> $ yarn add react-dyn-tabs
+```js
+$ yarn add react-dyn-tabs
+```
 
@@ -104,4 +109,4 @@ If you need to directly include script in your html, use the following link :
 import React from 'react';
-import 'react-dyn-tabs/style/react-dyn-tabs.css';
-import 'react-dyn-tabs/themes/react-dyn-tabs-card.css';
+import 'react-dyn-tabs/style/react-dyn-tabs.css'; // Mandatory CSS required by the react-dyn-tabs
+import 'react-dyn-tabs/themes/react-dyn-tabs-card.css'; // Optional Theme applied to the react-dyn-tabs
 import useDynTabs from 'react-dyn-tabs';
@@ -114,3 +119,3 @@
       title: 'tab 1',
-      panelComponent: (porps) => <p> panel 1 </p>,
+      panelComponent: (props) => <p> panel 1 </p>,
     },
@@ -120,3 +125,3 @@ {
       title: 'tab 2',
-      panelComponent: (porps) => <p> panel 2 </p>,
+      panelComponent: (props) => <p> panel 2 </p>,
     },
@@ -151,3 +156,3 @@ ],
       title: 'tab1',
-      panelComponent: (porps) => <p> panel 1 </p>,
+      panelComponent: (props) => <p> panel 1 </p>,
     },
@@ -157,3 +162,3 @@ {
       title: 'tab2',
-      panelComponent: (porps) => <p> panel 2 </p>,
+      panelComponent: (props) => <p> panel 2 </p>,
     },
@@ -169,3 +174,3 @@ ],
       // open tab 3
-      instance.open({id: '3', title: 'Tab 3', panelComponent: (porps) => <p> panel 3 </p>}).then(() => {
+      instance.open({id: '3', title: 'Tab 3', panelComponent: (props) => <p> panel 3 </p>}).then(() => {
         console.log('tab 3 is open');
@@ -239,3 +244,3 @@ });
       closable: true,
-      panelComponent: (porps) => <p> home content </p>,
+      panelComponent: (props) => <p> home content </p>,
     },
@@ -248,3 +253,3 @@ {
       closable: false,
-      panelComponent: (porps) => <p> contact content </p>,
+      panelComponent: (props) => <p> contact content </p>,
     },
@@ -284,3 +289,3 @@ ],
       closable: true,
-      panelComponent: (porps) => <p> home content </p>,
+      panelComponent: (props) => <p> home content </p>,
     },
@@ -293,3 +298,3 @@ {
       closable: false,
-      panelComponent: (porps) => <p> contact content </p>,
+      panelComponent: (props) => <p> contact content </p>,
     },
@@ -443,2 +448,43 @@ ],
 
+### theme
+
+<table>
+  <tbody>
+    <tr>
+      <th>type</th>
+      <th>required</th>
+      <th>description</th>
+    </tr>
+    <tr>
+      <td>string</td>
+      <td>no</td>
+      <td>the chosen theme name when you have multiple themes CSS.</td>
+    </tr>
+  </tbody>
+</table>
+
+**Examples**
+
+- in this exmaple, only `bootstrap` theme is applied to the `Tablist`, because value of `theme` option is `bootstrap`
+
+  ```js
+  import 'react-dyn-tabs/themes/react-dyn-tabs-card.css';
+  import 'react-dyn-tabs/themes/react-dyn-tabs-bootstrap.css';
+  import 'react-dyn-tabs/themes/react-dyn-tabs-classic.css';
+  import 'react-dyn-tabs/themes/react-dyn-tabs-basic.css';
+  ...
+  useDynTabs({theme:'bootstrap'});
+  ```
+
+- in this exmaple, only `classic` theme is applied to the `Tablist`, because value of `theme` option is `classic`
+
+  ```js
+  import 'react-dyn-tabs/themes/react-dyn-tabs-card.css';
+  import 'react-dyn-tabs/themes/react-dyn-tabs-bootstrap.css';
+  import 'react-dyn-tabs/themes/react-dyn-tabs-classic.css';
+  import 'react-dyn-tabs/themes/react-dyn-tabs-basic.css';
+  ...
+  useDynTabs({theme:'classic'});
+  ```
+
 ### onLoad
@@ -1123,3 +1169,3 @@
   closable: false,
-  panelComponent: (porps) => <p> contact content </p>,
+  panelComponent: (props) => <p> contact content </p>,
 };
@@ -1141,6 +1187,6 @@ const [TabList, PanelList, ready] = useDynTabs({tabs: [tabData]});
 const Panel3 = React.lazy(() => import('./components/panel3.js'));
-function LazyLoadingPanel3(porps) {
+function LazyLoadingPanel3(props) {
   return (
     <Suspense fallback={<div>Loading...</div>}>
-      <Panel3 {...porps}></Panel3>
+      <Panel3 {...props}></Panel3>
     </Suspense>
@@ -1302,19 +1348,66 @@ );
 
-## Styling
+## Themes And Style
 
 `react-dyn-tabs` does not include any style loading by default. Default stylesheets and themes are provided and can be included in your application if desired.
 
+### Import the Style
+
 ```js
-import 'react-dyn-tabs/style/react-dyn-tabs.min.css';
+import 'react-dyn-tabs/style/react-dyn-tabs.css';
+// or import 'react-dyn-tabs/style/react-dyn-tabs.min.css';
 // or import 'react-dyn-tabs/style/scss/react-dyn-tabs.scss';
-import 'react-dyn-tabs/themes/react-dyn-tabs-card.min.css';
-// or import 'react-dyn-tabs/themes/scss/react-dyn-tabs-card.scss';
 ```
 
-**NOTE :**
+For `rtl` mode you should also import following file
 
-You can find other themes at themes folder and multiple themes example at example/multi-themes-example folder.
+```js
+import 'react-dyn-tabs/style/react-dyn-tabs-rtl.css';
+// or import 'react-dyn-tabs/style/react-dyn-tabs-rtl.min.css';
+// or import 'react-dyn-tabs/style/scss/react-dyn-tabs-rtl.scss';
+```
 
-Include `react-dyn-tabs/style/react-dyn-tabs-rtl.min.css` for `rtl` mode
+### Themes
 
+Themes define how the Tabs looks. The library comes with Provided Themes such as `card` and `bootstrap`. To use a theme you need to 1) import the themes CSS and 2) apply the chosen theme name to the `theme` option of the `react-dyn-tabs`.
+
+- card theme
+
+  ```js
+  import 'react-dyn-tabs/themes/react-dyn-tabs-card.css';
+  // or import 'react-dyn-tabs/themes/scss/react-dyn-tabs-card.scss';
+  // or import 'react-dyn-tabs/themes/react-dyn-tabs-card.min.css';
+  ...
+  useDynTabs({theme:'card'});
+  ```
+
+- bootstrap theme
+
+  ```js
+  import 'react-dyn-tabs/themes/react-dyn-tabs-bootstrap.css';
+  // or import 'react-dyn-tabs/themes/scss/react-dyn-tabs-bootstrap.scss';
+  // or import 'react-dyn-tabs/themes/react-dyn-tabs-bootstrap.min.css';
+  ...
+  useDynTabs({theme:'bootstrap'});
+  ```
+
+- basic theme
+
+  ```js
+  import 'react-dyn-tabs/themes/react-dyn-tabs-basic.css';
+  // or import 'react-dyn-tabs/themes/scss/react-dyn-tabs-basic.scss';
+  // or import 'react-dyn-tabs/themes/react-dyn-tabs-basic.min.css';
+  ...
+  useDynTabs({theme:'basic'});
+  ```
+
+- classic theme
+
+  ```js
+  import 'react-dyn-tabs/themes/react-dyn-tabs-classic.css';
+  // or import 'react-dyn-tabs/themes/scss/react-dyn-tabs-classic.scss';
+  // or import 'react-dyn-tabs/themes/react-dyn-tabs-classic.min.css';
+  ...
+  useDynTabs({theme:'classic'});
+  ```
+
 ## Caveats
@@ -1321,0 +1414,0 @@

src/tablistView/tablistView.js

@@ -7,2 +7,6 @@ import TablistView from './tablistView.factory.js';
   }
+  const themeName = ins.getOption('theme');
+  if (themeName) {
+    className += ' ' + themeName;
+  }
   return {className};
@@ -9,0 +13,0 @@ };

src/utils/api/optionManager/defaultOptions.js

@@ -18,2 +18,3 @@ /* eslint react/prop-types: 0 */
         selectedTabID: '',
+        theme: 'all-themes',
         beforeSelect: function () {
@@ -20,0 +21,0 @@ return true;

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1362086

increased by1.93%

Lines of code

12013

increased by3.18%

Number of lines in readme file

1411

increased by7.06%

Worsened metrics

Dev dependency count

37

increased by2.78%

No dependency changes