From 4b2df98098c22dbdf183e880f10c1bdd59283d9c Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 10 Nov 2021 11:53:00 +0100
Subject: [PATCH] use react-tabs production build

---
 apps/remix-ide/src/app/panels/tab-proxy.js                | 7 ++++++-
 apps/remix-ide/src/assets/js/react-tabs.production.min.js | 2 ++
 libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx              | 6 ++++--
 3 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 apps/remix-ide/src/assets/js/react-tabs.production.min.js

diff --git a/apps/remix-ide/src/app/panels/tab-proxy.js b/apps/remix-ide/src/app/panels/tab-proxy.js
index 139213a764..4f5a030e04 100644
--- a/apps/remix-ide/src/app/panels/tab-proxy.js
+++ b/apps/remix-ide/src/app/panels/tab-proxy.js
@@ -306,8 +306,13 @@ export class TabProxy extends Plugin {
   }
 
   renderTabsbar () {
+    window.React = React
+    const script = document.createElement('script')
+    script.type = 'text/javascript'
+    script.src = 'assets/js/react-tabs.production.min.js'
+    document.head.appendChild(script)
+    script.addEventListener('load', () => this.renderComponent())
     this.el = document.createElement('div')
-    this.renderComponent()
     return this.el
   }
 }
diff --git a/apps/remix-ide/src/assets/js/react-tabs.production.min.js b/apps/remix-ide/src/assets/js/react-tabs.production.min.js
new file mode 100644
index 0000000000..59f4d0590c
--- /dev/null
+++ b/apps/remix-ide/src/assets/js/react-tabs.production.min.js
@@ -0,0 +1,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}).apply(this,arguments)}function s(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,o(e,t)}function o(e,t){return(o=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function l(e,t){if(null==e)return{};var n,r,a={},s=Object.keys(e);for(r=0;r<s.length;r++)n=s[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}function i(e){return function(t){return!!t.type&&t.type.tabsRole===e}}var d=i("Tab"),c=i("TabList"),u=i("TabPanel");function f(e,n){return t.Children.map(e,(function(e){return null===e?null:function(e){return d(e)||c(e)||u(e)}(e)?n(e):e.props&&e.props.children&&"object"==typeof e.props.children?t.cloneElement(e,a({},e.props,{children:f(e.props.children,n)})):e}))}function p(e,n){return t.Children.forEach(e,(function(e){null!==e&&(d(e)||u(e)?n(e):e.props&&e.props.children&&"object"==typeof e.props.children&&(c(e)&&n(e),p(e.props.children,n)))}))}function b(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=b(e[t]))&&(r&&(r+=" "),r+=n);else for(t in e)e[t]&&(r&&(r+=" "),r+=t);return r}function h(){for(var e,t,n=0,r="";n<arguments.length;)(e=arguments[n++])&&(t=b(e))&&(r&&(r+=" "),r+=t);return r}var m,v=0;function y(){return"react-tabs-"+v++}function T(e){var t=0;return p(e,(function(e){d(e)&&t++})),t}function C(e){return e&&"getAttribute"in e}function g(e){return C(e)&&"tab"===e.getAttribute("role")}function N(e){return C(e)&&"true"===e.getAttribute("aria-disabled")}var I=function(e){function n(){for(var t,n=arguments.length,r=new Array(n),a=0;a<n;a++)r[a]=arguments[a];return(t=e.call.apply(e,[this].concat(r))||this).tabNodes=[],t.handleKeyDown=function(e){var n=t.props,r=n.direction,a=n.disableUpDownKeys;if(t.isTabFromContainer(e.target)){var s=t.props.selectedIndex,o=!1,l=!1;32!==e.keyCode&&13!==e.keyCode||(o=!0,l=!1,t.handleClick(e)),37===e.keyCode||!a&&38===e.keyCode?(s="rtl"===r?t.getNextTab(s):t.getPrevTab(s),o=!0,l=!0):39===e.keyCode||!a&&40===e.keyCode?(s="rtl"===r?t.getPrevTab(s):t.getNextTab(s),o=!0,l=!0):35===e.keyCode?(s=t.getLastTab(),o=!0,l=!0):36===e.keyCode&&(s=t.getFirstTab(),o=!0,l=!0),o&&e.preventDefault(),l&&t.setSelected(s,e)}},t.handleClick=function(e){var n=e.target;do{if(t.isTabFromContainer(n)){if(N(n))return;var r=[].slice.call(n.parentNode.children).filter(g).indexOf(n);return void t.setSelected(r,e)}}while(null!=(n=n.parentNode))},t}s(n,e);var o=n.prototype;return o.setSelected=function(e,t){if(!(e<0||e>=this.getTabsCount())){var n=this.props;(0,n.onSelect)(e,n.selectedIndex,t)}},o.getNextTab=function(e){for(var t=this.getTabsCount(),n=e+1;n<t;n++)if(!N(this.getTab(n)))return n;for(var r=0;r<e;r++)if(!N(this.getTab(r)))return r;return e},o.getPrevTab=function(e){for(var t=e;t--;)if(!N(this.getTab(t)))return t;for(t=this.getTabsCount();t-- >e;)if(!N(this.getTab(t)))return t;return e},o.getFirstTab=function(){for(var e=this.getTabsCount(),t=0;t<e;t++)if(!N(this.getTab(t)))return t;return null},o.getLastTab=function(){for(var e=this.getTabsCount();e--;)if(!N(this.getTab(e)))return e;return null},o.getTabsCount=function(){return T(this.props.children)},o.getPanelsCount=function(){return function(e){var t=0;return p(e,(function(e){u(e)&&t++})),t}(this.props.children)},o.getTab=function(e){return this.tabNodes["tabs-"+e]},o.getChildren=function(){var e=this,n=0,a=this.props,s=a.children,o=a.disabledTabClassName,l=a.focus,i=a.forceRenderTabPanel,p=a.selectedIndex,b=a.selectedTabClassName,h=a.selectedTabPanelClassName,v=a.environment;this.tabIds=this.tabIds||[],this.panelIds=this.panelIds||[];for(var T=this.tabIds.length-this.getTabsCount();T++<0;)this.tabIds.push(y()),this.panelIds.push(y());return f(s,(function(a){var s=a;if(c(a)){var y=0,T=!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}}(v),m&&(T=r.default.Children.toArray(a.props.children).filter(d).some((function(t,n){var r=v||("undefined"!=typeof window?window:void 0);return r&&r.document.activeElement===e.getTab(n)}))),s=t.cloneElement(a,{children:f(a.props.children,(function(n){var r="tabs-"+y,a=p===y,s={tabRef:function(t){e.tabNodes[r]=t},id:e.tabIds[y],panelId:e.panelIds[y],selected:a,focus:a&&(l||T)};return b&&(s.selectedClassName=b),o&&(s.disabledClassName=o),y++,t.cloneElement(n,s)}))})}else if(u(a)){var C={id:e.panelIds[n],tabId:e.tabIds[n],selected:p===n};i&&(C.forceRender=i),h&&(C.selectedClassName=h),n++,s=t.cloneElement(a,C)}return s}))},o.isTabFromContainer=function(e){if(!g(e))return!1;var t=e.parentElement;do{if(t===this.node)return!0;if(t.getAttribute("data-tabs"))break;t=t.parentElement}while(t);return!1},o.render=function(){var e=this,t=this.props;t.children;var n=t.className;t.disabledTabClassName;var s=t.domRef;t.focus,t.forceRenderTabPanel,t.onSelect,t.selectedIndex,t.selectedTabClassName,t.selectedTabPanelClassName,t.environment,t.disableUpDownKeys;var o=l(t,["children","className","disabledTabClassName","domRef","focus","forceRenderTabPanel","onSelect","selectedIndex","selectedTabClassName","selectedTabPanelClassName","environment","disableUpDownKeys"]);return r.default.createElement("div",a({},o,{className:h(n),onClick:this.handleClick,onKeyDown:this.handleKeyDown,ref:function(t){e.node=t,s&&s(t)},"data-tabs":!0}),this.getChildren())},n}(t.Component);I.defaultProps={className:"react-tabs",focus:!1};var x=function(e){function t(n){var r;return(r=e.call(this,n)||this).handleSelected=function(e,t,n){var a=r.props.onSelect,s=r.state.mode;if("function"!=typeof a||!1!==a(e,t,n)){var o={focus:"keydown"===n.type};1===s&&(o.selectedIndex=e),r.setState(o)}},r.state=t.copyPropsToState(r.props,{},n.defaultFocus),r}return s(t,e),t.getDerivedStateFromProps=function(e,n){return t.copyPropsToState(e,n)},t.getModeFromProps=function(e){return null===e.selectedIndex?1:0},t.copyPropsToState=function(e,n,r){void 0===r&&(r=!1);var a={focus:r,mode:t.getModeFromProps(e)};if(1===a.mode){var s=Math.max(0,T(e.children)-1),o=null;o=null!=n.selectedIndex?Math.min(n.selectedIndex,s):e.defaultIndex||0,a.selectedIndex=o}return a},t.prototype.render=function(){var e=this.props,t=e.children;e.defaultIndex,e.defaultFocus;var n=l(e,["children","defaultIndex","defaultFocus"]),a=this.state,s=a.focus,o=a.selectedIndex;return n.focus=s,n.onSelect=this.handleSelected,null!=o&&(n.selectedIndex=o),r.default.createElement(I,n,t)},t}(t.Component);x.defaultProps={defaultFocus:!1,forceRenderTabPanel:!1,selectedIndex:null,defaultIndex:null,environment:null,disableUpDownKeys:!1},x.tabsRole="Tabs";var P=function(e){function t(){return e.apply(this,arguments)||this}return s(t,e),t.prototype.render=function(){var e=this.props,t=e.children,n=e.className,s=l(e,["children","className"]);return r.default.createElement("ul",a({},s,{className:h(n),role:"tablist"}),t)},t}(t.Component);P.defaultProps={className:"react-tabs__tab-list"},P.tabsRole="TabList";var w="react-tabs__tab",R=function(e){function t(){return e.apply(this,arguments)||this}s(t,e);var n=t.prototype;return n.componentDidMount=function(){this.checkFocus()},n.componentDidUpdate=function(){this.checkFocus()},n.checkFocus=function(){var e=this.props,t=e.selected,n=e.focus;t&&n&&this.node.focus()},n.render=function(){var e,t=this,n=this.props,s=n.children,o=n.className,i=n.disabled,d=n.disabledClassName;n.focus;var c=n.id,u=n.panelId,f=n.selected,p=n.selectedClassName,b=n.tabIndex,m=n.tabRef,v=l(n,["children","className","disabled","disabledClassName","focus","id","panelId","selected","selectedClassName","tabIndex","tabRef"]);return r.default.createElement("li",a({},v,{className:h(o,(e={},e[p]=f,e[d]=i,e)),ref:function(e){t.node=e,m&&m(e)},role:"tab",id:c,"aria-selected":f?"true":"false","aria-disabled":i?"true":"false","aria-controls":u,tabIndex:b||(f?"0":null)}),s)},t}(t.Component);R.defaultProps={className:w,disabledClassName:"react-tabs__tab--disabled",focus:!1,id:null,panelId:null,selected:!1,selectedClassName:"react-tabs__tab--selected"},R.tabsRole="Tab";var k="react-tabs__tab-panel",_=function(e){function t(){return e.apply(this,arguments)||this}return s(t,e),t.prototype.render=function(){var e,t=this.props,n=t.children,s=t.className,o=t.forceRender,i=t.id,d=t.selected,c=t.selectedClassName,u=t.tabId,f=l(t,["children","className","forceRender","id","selected","selectedClassName","tabId"]);return r.default.createElement("div",a({},f,{className:h(s,(e={},e[c]=d,e)),role:"tabpanel",id:i,"aria-labelledby":u}),o||d?n:null)},t}(t.Component);_.defaultProps={className:k,forceRender:!1,selectedClassName:k+"--selected"},_.tabsRole="TabPanel",e.Tab=R,e.TabList=P,e.TabPanel=_,e.Tabs=x,e.resetIdCounter=function(){v=0},Object.defineProperty(e,"__esModule",{value:!0})}));
+//# sourceMappingURL=react-tabs.production.min.js.map
diff --git a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
index 22532562e6..a9ca1c881f 100644
--- a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
+++ b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useRef, useEffect, useReducer } from 'react' // eslint-disable-line
-import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
-
+// import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
 import './remix-ui-tabs.css'
 
 /* eslint-disable-next-line */
@@ -18,7 +17,10 @@ export interface TabsUIApi {
     active: () => string
 }
 
+declare var ReactTabs: any
+
 export const TabsUI = (props: TabsUIProps) => {
+  const { Tab, Tabs, TabList, TabPanel } = ReactTabs
   const [selectedIndex, setSelectedIndex] = useState(-1)
   const currentIndexRef = useRef(-1)
   const tabsRef = useRef({})