gwchq-textjam 0.3.8 → 0.3.10

package/dist/index.js

@@ -68492,8 +68492,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(89379);
-/* harmony import */ var _Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(53986);
+/* harmony import */ var _Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(89379);
+/* harmony import */ var _Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(53986);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14062);
 /* harmony import */ var _redux_EditorSlice__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(68512);
@@ -68514,7 +68514,7 @@ var DraggableTab = _ref => {
       draggableId,
       onTabClick
     } = _ref,
-    otherProps = (0,_Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .A)(_ref, _excluded);
+    otherProps = (0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .A)(_ref, _excluded);
   var openedTabs = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(state => state.editor.openedTabs);
   var openFilesCount = openedTabs.filter(t => t && t.type === "file").length || 1;
   var dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useDispatch)();
@@ -68532,7 +68532,7 @@ var DraggableTab = _ref => {
       switchToFileTab((fileIndex + openFilesCount - 1) % openFilesCount);
     }
   };
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Tabs_DraggableTabWrapper__WEBPACK_IMPORTED_MODULE_5__["default"], (0,_Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A)((0,_Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A)({
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_Tabs_DraggableTabWrapper__WEBPACK_IMPORTED_MODULE_5__["default"], (0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A)((0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A)({
     draggableId: draggableId,
     index: fileIndex,
     onClick: e => {
@@ -68556,8 +68556,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(89379);
-/* harmony import */ var _Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(53986);
+/* harmony import */ var _Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(89379);
+/* harmony import */ var _Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(53986);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
 /* harmony import */ var _hello_pangea_dnd__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(98850);
 /* harmony import */ var react_tabs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(39243);
@@ -68576,8 +68576,8 @@ var DroppableTabList = _ref => {
       children: _children,
       index
     } = _ref,
-    otherProps = (0,_Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)(_ref, _excluded);
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_1__.TabList, (0,_Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,_Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({}, otherProps), {}, {
+    otherProps = (0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)(_ref, _excluded);
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_1__.TabList, (0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({}, otherProps), {}, {
     children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_hello_pangea_dnd__WEBPACK_IMPORTED_MODULE_6__.Droppable, {
       direction: "horizontal",
       droppableId: index.toString(),
@@ -68587,7 +68587,7 @@ var DroppableTabList = _ref => {
           droppableProps,
           placeholder
         } = _ref2;
-        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", (0,_Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,_Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({
+        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", (0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({
           className: "droppable-tab-list"
         }, droppableProps), {}, {
           ref: innerRef,
@@ -103160,7 +103160,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
+/* harmony import */ var _Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14062);
 /* harmony import */ var _redux_EditorSlice__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(68512);
@@ -103276,7 +103276,7 @@ var ProjectName = _ref => {
       id: "project_name_label",
       className: _styles_module_scss__WEBPACK_IMPORTED_MODULE_3__["default"].projectLabel,
       children: "Project Name"
-    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", (0,_Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,_Users_ruslanmatkovskyi_projects_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", (0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
       className: classnames__WEBPACK_IMPORTED_MODULE_2___default()(_styles_module_scss__WEBPACK_IMPORTED_MODULE_3__["default"].projectName, className)
     }, hoverProps), {}, {
       children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)((components_Tooltip_Tooltip__WEBPACK_IMPORTED_MODULE_8___default()), {
@@ -143208,7 +143208,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","viewSwitcher":"styles-module__viewSwitcher--h0ODR","viewSwitcherBtn":"styles-module__viewSwitcherBtn--v6-ir","viewSwitcherBtnActive":"styles-module__viewSwitcherBtnActive--m2JP-"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","viewSwitcher":"styles-module__viewSwitcher--h0ODR","viewSwitcherBtn":"styles-module__viewSwitcherBtn--v6-ir","viewSwitcherBtnWrapper":"styles-module__viewSwitcherBtnWrapper--OarYg","viewSwitcherBtnActive":"styles-module__viewSwitcherBtnActive--m2JP-"});
 
 /***/ }),
 
@@ -346986,10 +346986,10 @@ __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  Tab: () => (/* reexport */ components_Tab),
-  TabList: () => (/* reexport */ components_TabList),
-  TabPanel: () => (/* reexport */ components_TabPanel),
-  Tabs: () => (/* reexport */ components_Tabs),
+  Tab: () => (/* reexport */ Tab),
+  TabList: () => (/* reexport */ TabList),
+  TabPanel: () => (/* reexport */ TabPanel),
+  Tabs: () => (/* reexport */ Tabs),
   resetIdCounter: () => (/* reexport */ uuid_reset)
 });
 
@@ -347138,6 +347138,13 @@ function count_getTabsCount(children) {
   });
   return tabCount;
 }
+function count_getPanelsCount(children) {
+  var panelCount = 0;
+  childrenDeepMap_deepForEach(children, function (child) {
+    if (elementTypes_isTabPanel(child)) panelCount++;
+  });
+  return panelCount;
+}
 ;// ./node_modules/react-tabs/esm/components/UncontrolledTabs.js
 var _excluded = ["children", "className", "disabledTabClassName", "domRef", "focus", "forceRenderTabPanel", "onSelect", "selectedIndex", "selectedTabClassName", "selectedTabPanelClassName", "environment", "disableUpDownKeys"];
 
@@ -347145,6 +347152,10 @@ function UncontrolledTabs_extends() { UncontrolledTabs_extends = Object.assign |
 
 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 _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
 
 
 
@@ -347180,135 +347191,219 @@ function determineCanUseActiveElement(environment) {
     // 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 =  false ? 0 : {};
+var UncontrolledTabs = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(UncontrolledTabs, _Component);
+
+  function UncontrolledTabs() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
+    _this.tabNodes = [];
+
+    _this.handleKeyDown = function (e) {
+      var _this$props = _this.props,
+          direction = _this$props.direction,
+          disableUpDownKeys = _this$props.disableUpDownKeys;
 
-var UncontrolledTabs = function UncontrolledTabs(props) {
-  var tabNodes = (0,external_react_.useRef)([]);
-  var tabIds = (0,external_react_.useRef)([]);
-  var panelIds = (0,external_react_.useRef)([]);
+      if (_this.isTabFromContainer(e.target)) {
+        var index = _this.props.selectedIndex;
+        var preventDefault = false;
+        var useSelectedIndex = false;
+
+        if (e.keyCode === 32 || e.keyCode === 13) {
+          preventDefault = true;
+          useSelectedIndex = false;
+
+          _this.handleClick(e);
+        }
+
+        if (e.keyCode === 37 || !disableUpDownKeys && e.keyCode === 38) {
+          // Select next tab to the left, validate if up arrow is not disabled
+          if (direction === 'rtl') {
+            index = _this.getNextTab(index);
+          } else {
+            index = _this.getPrevTab(index);
+          }
+
+          preventDefault = true;
+          useSelectedIndex = true;
+        } else if (e.keyCode === 39 || !disableUpDownKeys && e.keyCode === 40) {
+          // Select next tab to the right, validate if down arrow is not disabled
+          if (direction === 'rtl') {
+            index = _this.getPrevTab(index);
+          } else {
+            index = _this.getNextTab(index);
+          }
+
+          preventDefault = true;
+          useSelectedIndex = true;
+        } else if (e.keyCode === 35) {
+          // Select last tab (End key)
+          index = _this.getLastTab();
+          preventDefault = true;
+          useSelectedIndex = true;
+        } else if (e.keyCode === 36) {
+          // Select first tab (Home key)
+          index = _this.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) {
+          _this.setSelected(index, e);
+        }
+      }
+    };
 
-  var _ref = (0,external_react_.useRef)();
+    _this.handleClick = function (e) {
+      var node = e.target;
 
-  function setSelected(index, event) {
+      do {
+        if (_this.isTabFromContainer(node)) {
+          if (isTabDisabled(node)) {
+            return;
+          }
+
+          var index = [].slice.call(node.parentNode.children).filter(isTabNode).indexOf(node);
+
+          _this.setSelected(index, e);
+
+          return;
+        }
+      } while ((node = node.parentNode) != null);
+    };
+
+    return _this;
+  }
+
+  var _proto = UncontrolledTabs.prototype;
+
+  _proto.setSelected = function setSelected(index, event) {
     // Check index boundary
-    if (index < 0 || index >= getTabsCount()) return;
-    var onSelect = props.onSelect,
-        selectedIndex = props.selectedIndex; // Call change event handler
+    if (index < 0 || index >= this.getTabsCount()) return;
+    var _this$props2 = this.props,
+        onSelect = _this$props2.onSelect,
+        selectedIndex = _this$props2.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
+  _proto.getNextTab = function getNextTab(index) {
+    var count = this.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))) {
+      if (!isTabDisabled(this.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))) {
+      if (!isTabDisabled(this.getTab(_i))) {
         return _i;
       }
-    } // All tabs are disabled, return index
-
-    /* istanbul ignore next */
+    } // No tabs are disabled, return index
 
 
     return index;
-  }
+  };
 
-  function getPrevTab(index) {
+  _proto.getPrevTab = 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))) {
+      if (!isTabDisabled(this.getTab(i))) {
         return i;
       }
     } // If no tab found, continue searching from last tab on right to index
 
 
-    i = getTabsCount();
+    i = this.getTabsCount();
 
     while (i-- > index) {
-      if (!isTabDisabled(getTab(i))) {
+      if (!isTabDisabled(this.getTab(i))) {
         return i;
       }
-    } // All tabs are disabled, return index
-
-    /* istanbul ignore next */
+    } // No tabs are disabled, return index
 
 
     return index;
-  }
+  };
 
-  function getFirstTab() {
-    var count = getTabsCount(); // Look for non disabled tab from the first tab
+  _proto.getFirstTab = function getFirstTab() {
+    var count = this.getTabsCount(); // Look for non disabled tab from the first tab
 
     for (var i = 0; i < count; i++) {
-      if (!isTabDisabled(getTab(i))) {
+      if (!isTabDisabled(this.getTab(i))) {
         return i;
       }
     }
-    /* istanbul ignore next */
-
 
     return null;
-  }
+  };
 
-  function getLastTab() {
-    var i = getTabsCount(); // Look for non disabled tab from the last tab
+  _proto.getLastTab = function getLastTab() {
+    var i = this.getTabsCount(); // Look for non disabled tab from the last tab
 
     while (i--) {
-      if (!isTabDisabled(getTab(i))) {
+      if (!isTabDisabled(this.getTab(i))) {
         return i;
       }
     }
-    /* istanbul ignore next */
-
 
     return null;
-  }
+  };
 
-  function getTabsCount() {
-    var children = props.children;
+  _proto.getTabsCount = function getTabsCount() {
+    var children = this.props.children;
     return count_getTabsCount(children);
-  }
+  };
 
-  function getTab(index) {
-    return tabNodes.current["tabs-" + index];
-  }
+  _proto.getPanelsCount = function getPanelsCount() {
+    var children = this.props.children;
+    return count_getPanelsCount(children);
+  };
+
+  _proto.getTab = function getTab(index) {
+    return this.tabNodes["tabs-" + index];
+  };
+
+  _proto.getChildren = function getChildren() {
+    var _this2 = this;
 
-  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
+    var _this$props3 = this.props,
+        children = _this$props3.children,
+        disabledTabClassName = _this$props3.disabledTabClassName,
+        focus = _this$props3.focus,
+        forceRenderTabPanel = _this$props3.forceRenderTabPanel,
+        selectedIndex = _this$props3.selectedIndex,
+        selectedTabClassName = _this$props3.selectedTabClassName,
+        selectedTabPanelClassName = _this$props3.selectedTabPanelClassName,
+        environment = _this$props3.environment;
+    this.tabIds = this.tabIds || [];
+    this.panelIds = this.panelIds || [];
+    var diff = this.tabIds.length - this.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());
+      this.tabIds.push(uuid());
+      this.panelIds.push(uuid());
     } // Map children to dynamically setup refs
 
 
@@ -347325,11 +347420,10 @@ var UncontrolledTabs = function UncontrolledTabs(props) {
           determineCanUseActiveElement(environment);
         }
 
-        var env = environment || (typeof window !== 'undefined' ? window : undefined);
-
-        if (canUseActiveElement && env) {
+        if (canUseActiveElement) {
           wasTabFocused = external_react_["default"].Children.toArray(child.props.children).filter(elementTypes_isTab).some(function (tab, i) {
-            return env.document.activeElement === getTab(i);
+            var env = environment || (typeof window !== 'undefined' ? window : undefined);
+            return env && env.document.activeElement === _this2.getTab(i);
           });
         }
 
@@ -347339,10 +347433,10 @@ var UncontrolledTabs = function UncontrolledTabs(props) {
             var selected = selectedIndex === listIndex;
             var props = {
               tabRef: function tabRef(node) {
-                tabNodes.current[key] = node;
+                _this2.tabNodes[key] = node;
               },
-              id: tabIds.current[listIndex],
-              panelId: panelIds.current[listIndex],
+              id: _this2.tabIds[listIndex],
+              panelId: _this2.panelIds[listIndex],
               selected: selected,
               focus: selected && (focus || wasTabFocused)
             };
@@ -347353,116 +347447,27 @@ var UncontrolledTabs = function UncontrolledTabs(props) {
           })
         });
       } else if (elementTypes_isTabPanel(child)) {
-        var _props = {
-          id: panelIds.current[index],
-          tabId: tabIds.current[index],
+        var props = {
+          id: _this2.panelIds[index],
+          tabId: _this2.tabIds[index],
           selected: selectedIndex === index
         };
-        if (forceRenderTabPanel) _props.forceRender = forceRenderTabPanel;
-        if (selectedTabPanelClassName) _props.selectedClassName = selectedTabPanelClassName;
+        if (forceRenderTabPanel) props.forceRender = forceRenderTabPanel;
+        if (selectedTabPanelClassName) props.selectedClassName = selectedTabPanelClassName;
         index++;
-        result = /*#__PURE__*/(0,external_react_.cloneElement)(child, _props);
+        result = /*#__PURE__*/(0,external_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) {
+  _proto.isTabFromContainer = function isTabFromContainer(node) {
     // return immediately if the clicked element is not a Tab.
     if (!isTabNode(node)) {
       return false;
@@ -347472,45 +347477,62 @@ var UncontrolledTabs = function UncontrolledTabs(props) {
     var nodeAncestor = node.parentElement;
 
     do {
-      if (nodeAncestor === _ref.current) return true;
+      if (nodeAncestor === this.node) 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__*/external_react_["default"].createElement("div", UncontrolledTabs_extends({}, attributes, {
-    className: (0,clsx_m/* default */.A)(className),
-    onClick: handleClick,
-    onKeyDown: handleKeyDown,
-    ref: function ref(node) {
-      _ref.current = node;
-      if (domRef) domRef(node);
-    },
-    "data-rttabs": true
-  }), getChildren());
+  _proto.render = function render() {
+    var _this3 = this;
+
+    // Delete all known props, so they don't get added to DOM
+    var _this$props4 = this.props,
+        children = _this$props4.children,
+        className = _this$props4.className,
+        disabledTabClassName = _this$props4.disabledTabClassName,
+        domRef = _this$props4.domRef,
+        focus = _this$props4.focus,
+        forceRenderTabPanel = _this$props4.forceRenderTabPanel,
+        onSelect = _this$props4.onSelect,
+        selectedIndex = _this$props4.selectedIndex,
+        selectedTabClassName = _this$props4.selectedTabClassName,
+        selectedTabPanelClassName = _this$props4.selectedTabPanelClassName,
+        environment = _this$props4.environment,
+        disableUpDownKeys = _this$props4.disableUpDownKeys,
+        attributes = _objectWithoutPropertiesLoose(_this$props4, _excluded);
+
+    return /*#__PURE__*/external_react_["default"].createElement("div", UncontrolledTabs_extends({}, attributes, {
+      className: (0,clsx_m/* default */.A)(className),
+      onClick: this.handleClick,
+      onKeyDown: this.handleKeyDown,
+      ref: function ref(node) {
+        _this3.node = node;
+        if (domRef) domRef(node);
+      },
+      "data-rttabs": true
+    }), this.getChildren());
+  };
+
+  return UncontrolledTabs;
+}(external_react_.Component);
+
+UncontrolledTabs.defaultProps = {
+  className: 'react-tabs',
+  focus: false
 };
 
-UncontrolledTabs.defaultProps = defaultProps;
 UncontrolledTabs.propTypes =  false ? 0 : {};
-/* harmony default export */ const components_UncontrolledTabs = (UncontrolledTabs);
 ;// ./node_modules/react-tabs/esm/components/Tabs.js
-function Tabs_extends() { Tabs_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 Tabs_extends.apply(this, arguments); }
+var Tabs_excluded = ["children", "defaultIndex", "defaultFocus"];
+
+function Tabs_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 Tabs_inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; Tabs_setPrototypeOf(subClass, superClass); }
+
+function Tabs_setPrototypeOf(o, p) { Tabs_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return Tabs_setPrototypeOf(o, p); }
 
 
 
@@ -347519,106 +347541,115 @@ function Tabs_extends() { Tabs_extends = Object.assign || function (target) { fo
 
 var MODE_CONTROLLED = 0;
 var MODE_UNCONTROLLED = 1;
-var Tabs_propTypes =  false ? 0 : {};
-var Tabs_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 Tabs = /*#__PURE__*/function (_Component) {
+  Tabs_inheritsLoose(Tabs, _Component);
 
-var checkForIllegalModeChange = function checkForIllegalModeChange(props, mode) {
-  if (false) {}
-};
-/**
- * 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.
- */
+  function Tabs(props) {
+    var _this;
 
+    _this = _Component.call(this, props) || this;
 
-var Tabs = function Tabs(props) {
-  var children = props.children,
-      defaultFocus = props.defaultFocus,
-      defaultIndex = props.defaultIndex,
-      focusTabOnClick = props.focusTabOnClick,
-      onSelect = props.onSelect;
+    _this.handleSelected = function (index, last, event) {
+      var onSelect = _this.props.onSelect;
+      var mode = _this.state.mode; // Call change event handler
 
-  var _useState = (0,external_react_.useState)(defaultFocus),
-      focus = _useState[0],
-      setFocus = _useState[1];
+      if (typeof onSelect === 'function') {
+        // Check if the change event handler cancels the tab change
+        if (onSelect(index, last, event) === false) return;
+      }
 
-  var _useState2 = (0,external_react_.useState)(getModeFromProps(props)),
-      mode = _useState2[0];
+      var state = {
+        // Set focus if the change was triggered from the keyboard
+        focus: event.type === 'keydown'
+      };
 
-  var _useState3 = (0,external_react_.useState)(mode === MODE_UNCONTROLLED ? defaultIndex || 0 : null),
-      selectedIndex = _useState3[0],
-      setSelectedIndex = _useState3[1];
+      if (mode === MODE_UNCONTROLLED) {
+        // Update selected index
+        state.selectedIndex = index;
+      }
 
-  (0,external_react_.useEffect)(function () {
-    // Reset focus after initial render, see comment above
-    setFocus(false);
-  }, []);
+      _this.setState(state);
+    };
 
-  if (mode === MODE_UNCONTROLLED) {
-    // Ensure that we handle removed tabs and don't let selectedIndex get out of bounds
-    var tabsCount = count_getTabsCount(children);
-    (0,external_react_.useEffect)(function () {
-      if (selectedIndex != null) {
-        var maxTabIndex = Math.max(0, tabsCount - 1);
-        setSelectedIndex(Math.min(selectedIndex, maxTabIndex));
-      }
-    }, [tabsCount]);
+    _this.state = Tabs.copyPropsToState(_this.props, {}, props.defaultFocus);
+    return _this;
   }
 
-  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
+  Tabs.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
+    return Tabs.copyPropsToState(props, state);
+  };
 
+  Tabs.getModeFromProps = function getModeFromProps(props) {
+    return props.selectedIndex === null ? MODE_UNCONTROLLED : MODE_CONTROLLED;
+  };
 
-    if (focusTabOnClick) {
-      setFocus(true);
+  // preserve the existing selectedIndex from state.
+  // If the state has not selectedIndex, default to the defaultIndex or 0
+  Tabs.copyPropsToState = function copyPropsToState(props, state, focus) {
+    if (focus === void 0) {
+      focus = false;
     }
 
-    if (mode === MODE_UNCONTROLLED) {
-      // Update selected index
-      setSelectedIndex(index);
+    if (false) {}
+
+    var newState = {
+      focus: focus,
+      mode: Tabs.getModeFromProps(props)
+    };
+
+    if (newState.mode === MODE_UNCONTROLLED) {
+      var maxTabIndex = Math.max(0, count_getTabsCount(props.children) - 1);
+      var selectedIndex = null;
+
+      if (state.selectedIndex != null) {
+        selectedIndex = Math.min(state.selectedIndex, maxTabIndex);
+      } else {
+        selectedIndex = props.defaultIndex || 0;
+      }
+
+      newState.selectedIndex = selectedIndex;
     }
+
+    return newState;
   };
 
-  var subProps = Tabs_extends({}, props);
+  var _proto = Tabs.prototype;
 
-  subProps.focus = focus;
-  subProps.onSelect = handleSelected;
+  _proto.render = function render() {
+    var _this$props = this.props,
+        children = _this$props.children,
+        defaultIndex = _this$props.defaultIndex,
+        defaultFocus = _this$props.defaultFocus,
+        props = Tabs_objectWithoutPropertiesLoose(_this$props, Tabs_excluded);
 
-  if (selectedIndex != null) {
-    subProps.selectedIndex = selectedIndex;
-  }
+    var _this$state = this.state,
+        focus = _this$state.focus,
+        selectedIndex = _this$state.selectedIndex;
+    props.focus = focus;
+    props.onSelect = this.handleSelected;
+
+    if (selectedIndex != null) {
+      props.selectedIndex = selectedIndex;
+    }
+
+    return /*#__PURE__*/external_react_["default"].createElement(UncontrolledTabs, props, children);
+  };
+
+  return Tabs;
+}(external_react_.Component);
 
-  delete subProps.defaultFocus;
-  delete subProps.defaultIndex;
-  delete subProps.focusTabOnClick;
-  return /*#__PURE__*/external_react_["default"].createElement(components_UncontrolledTabs, subProps, children);
+Tabs.defaultProps = {
+  defaultFocus: false,
+  forceRenderTabPanel: false,
+  selectedIndex: null,
+  defaultIndex: null,
+  environment: null,
+  disableUpDownKeys: false
 };
 
 Tabs.propTypes =  false ? 0 : {};
-Tabs.defaultProps = Tabs_defaultProps;
 Tabs.tabsRole = 'Tabs';
-/* harmony default export */ const components_Tabs = (Tabs);
 ;// ./node_modules/react-tabs/esm/components/TabList.js
 var TabList_excluded = ["children", "className"];
 
@@ -347626,29 +347657,44 @@ function TabList_extends() { TabList_extends = Object.assign || function (target
 
 function TabList_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 TabList_inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; TabList_setPrototypeOf(subClass, superClass); }
 
+function TabList_setPrototypeOf(o, p) { TabList_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return TabList_setPrototypeOf(o, p); }
 
 
-var TabList_defaultProps = {
-  className: 'react-tabs__tab-list'
-};
-var TabList_propTypes =  false ? 0 : {};
 
-var TabList = function TabList(props) {
-  var children = props.children,
-      className = props.className,
-      attributes = TabList_objectWithoutPropertiesLoose(props, TabList_excluded);
 
-  return /*#__PURE__*/external_react_["default"].createElement("ul", TabList_extends({}, attributes, {
-    className: (0,clsx_m/* default */.A)(className),
-    role: "tablist"
-  }), children);
+
+var TabList = /*#__PURE__*/function (_Component) {
+  TabList_inheritsLoose(TabList, _Component);
+
+  function TabList() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  var _proto = TabList.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        children = _this$props.children,
+        className = _this$props.className,
+        attributes = TabList_objectWithoutPropertiesLoose(_this$props, TabList_excluded);
+
+    return /*#__PURE__*/external_react_["default"].createElement("ul", TabList_extends({}, attributes, {
+      className: (0,clsx_m/* default */.A)(className),
+      role: "tablist"
+    }), children);
+  };
+
+  return TabList;
+}(external_react_.Component);
+
+TabList.defaultProps = {
+  className: 'react-tabs__tab-list'
 };
 
-TabList.tabsRole = 'TabList';
 TabList.propTypes =  false ? 0 : {};
-TabList.defaultProps = TabList_defaultProps;
-/* harmony default export */ const components_TabList = (TabList);
+TabList.tabsRole = 'TabList';
 ;// ./node_modules/react-tabs/esm/components/Tab.js
 var Tab_excluded = ["children", "className", "disabled", "disabledClassName", "focus", "id", "panelId", "selected", "selectedClassName", "tabIndex", "tabRef"];
 
@@ -347656,11 +347702,80 @@ function Tab_extends() { Tab_extends = Object.assign || function (target) { for
 
 function Tab_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 Tab_inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; Tab_setPrototypeOf(subClass, superClass); }
+
+function Tab_setPrototypeOf(o, p) { Tab_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return Tab_setPrototypeOf(o, p); }
+
 
 
 
 var DEFAULT_CLASS = 'react-tabs__tab';
-var DEFAULT_PROPS = {
+
+var Tab = /*#__PURE__*/function (_Component) {
+  Tab_inheritsLoose(Tab, _Component);
+
+  function Tab() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  var _proto = Tab.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    this.checkFocus();
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate() {
+    this.checkFocus();
+  };
+
+  _proto.checkFocus = function checkFocus() {
+    var _this$props = this.props,
+        selected = _this$props.selected,
+        focus = _this$props.focus;
+
+    if (selected && focus) {
+      this.node.focus();
+    }
+  };
+
+  _proto.render = function render() {
+    var _cx,
+        _this = this;
+
+    var _this$props2 = this.props,
+        children = _this$props2.children,
+        className = _this$props2.className,
+        disabled = _this$props2.disabled,
+        disabledClassName = _this$props2.disabledClassName,
+        focus = _this$props2.focus,
+        id = _this$props2.id,
+        panelId = _this$props2.panelId,
+        selected = _this$props2.selected,
+        selectedClassName = _this$props2.selectedClassName,
+        tabIndex = _this$props2.tabIndex,
+        tabRef = _this$props2.tabRef,
+        attributes = Tab_objectWithoutPropertiesLoose(_this$props2, Tab_excluded);
+
+    return /*#__PURE__*/external_react_["default"].createElement("li", Tab_extends({}, attributes, {
+      className: (0,clsx_m/* default */.A)(className, (_cx = {}, _cx[selectedClassName] = selected, _cx[disabledClassName] = disabled, _cx)),
+      ref: function ref(node) {
+        _this.node = 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);
+  };
+
+  return Tab;
+}(external_react_.Component);
+
+Tab.defaultProps = {
   className: DEFAULT_CLASS,
   disabledClassName: DEFAULT_CLASS + "--disabled",
   focus: false,
@@ -347669,51 +347784,9 @@ var DEFAULT_PROPS = {
   selected: false,
   selectedClassName: DEFAULT_CLASS + "--selected"
 };
-var Tab_propTypes =  false ? 0 : {};
-
-var Tab = function Tab(props) {
-  var _cx;
-
-  var nodeRef = (0,external_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 = Tab_objectWithoutPropertiesLoose(props, Tab_excluded);
-
-  (0,external_react_.useEffect)(function () {
-    if (selected && focus) {
-      nodeRef.current.focus();
-    }
-  }, [selected, focus]);
-  return /*#__PURE__*/external_react_["default"].createElement("li", Tab_extends({}, attributes, {
-    className: (0,clsx_m/* default */.A)(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 =  false ? 0 : {};
 Tab.tabsRole = 'Tab';
-Tab.defaultProps = DEFAULT_PROPS;
-/* harmony default export */ const components_Tab = (Tab);
 ;// ./node_modules/react-tabs/esm/components/TabPanel.js
 var TabPanel_excluded = ["children", "className", "forceRender", "id", "selected", "selectedClassName", "tabId"];
 
@@ -347721,41 +347794,56 @@ function TabPanel_extends() { TabPanel_extends = Object.assign || function (targ
 
 function TabPanel_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 TabPanel_inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; TabPanel_setPrototypeOf(subClass, superClass); }
+
+function TabPanel_setPrototypeOf(o, p) { TabPanel_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return TabPanel_setPrototypeOf(o, p); }
+
 
 
 
 var TabPanel_DEFAULT_CLASS = 'react-tabs__tab-panel';
-var TabPanel_defaultProps = {
-  className: TabPanel_DEFAULT_CLASS,
-  forceRender: false,
-  selectedClassName: TabPanel_DEFAULT_CLASS + "--selected"
-};
-var TabPanel_propTypes =  false ? 0 : {};
 
-var TabPanel = function TabPanel(props) {
-  var _cx;
+var TabPanel = /*#__PURE__*/function (_Component) {
+  TabPanel_inheritsLoose(TabPanel, _Component);
 
-  var children = props.children,
-      className = props.className,
-      forceRender = props.forceRender,
-      id = props.id,
-      selected = props.selected,
-      selectedClassName = props.selectedClassName,
-      tabId = props.tabId,
-      attributes = TabPanel_objectWithoutPropertiesLoose(props, TabPanel_excluded);
+  function TabPanel() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  var _proto = TabPanel.prototype;
+
+  _proto.render = function render() {
+    var _cx;
+
+    var _this$props = this.props,
+        children = _this$props.children,
+        className = _this$props.className,
+        forceRender = _this$props.forceRender,
+        id = _this$props.id,
+        selected = _this$props.selected,
+        selectedClassName = _this$props.selectedClassName,
+        tabId = _this$props.tabId,
+        attributes = TabPanel_objectWithoutPropertiesLoose(_this$props, TabPanel_excluded);
+
+    return /*#__PURE__*/external_react_["default"].createElement("div", TabPanel_extends({}, attributes, {
+      className: (0,clsx_m/* default */.A)(className, (_cx = {}, _cx[selectedClassName] = selected, _cx)),
+      role: "tabpanel",
+      id: id,
+      "aria-labelledby": tabId
+    }), forceRender || selected ? children : null);
+  };
+
+  return TabPanel;
+}(external_react_.Component);
 
-  return /*#__PURE__*/external_react_["default"].createElement("div", TabPanel_extends({}, attributes, {
-    className: (0,clsx_m/* default */.A)(className, (_cx = {}, _cx[selectedClassName] = selected, _cx)),
-    role: "tabpanel",
-    id: id,
-    "aria-labelledby": tabId
-  }), forceRender || selected ? children : null);
+TabPanel.defaultProps = {
+  className: TabPanel_DEFAULT_CLASS,
+  forceRender: false,
+  selectedClassName: TabPanel_DEFAULT_CLASS + "--selected"
 };
 
-TabPanel.tabsRole = 'TabPanel';
 TabPanel.propTypes =  false ? 0 : {};
-TabPanel.defaultProps = TabPanel_defaultProps;
-/* harmony default export */ const components_TabPanel = (TabPanel);
+TabPanel.tabsRole = 'TabPanel';
 ;// ./node_modules/react-tabs/esm/index.js
 
 
@@ -369736,7 +369824,9 @@ const resolveAbsolutePath = (importPath, basePath) => {
     // Handle relative imports (./ or ../)
     if (basePath &&
         (importPath.startsWith("./") || importPath.startsWith("../"))) {
-        return path_1.default.normalize(path_1.default.join(path_1.default.dirname(basePath), importPath));
+        // Project paths are virtual POSIX paths — use posix semantics explicitly,
+        // for same behavior of tests on all of the OS
+        return path_1.default.posix.normalize(path_1.default.posix.join(path_1.default.posix.dirname(basePath), importPath));
     }
     // Bare imports (can be handled as external packages in future)
     console.error(`Could not resolve import path: ${importPath}. Bare imports are not supported. Use relative ('./' or '../') or absolute ('/') paths.`);
@@ -370317,6 +370407,16 @@ const useHtmlRunner = () => {
     // Using BroadcastChannel to communicate between the main app and the preview tab
     const broadcastChannel = (0, react_1.useRef)(null);
     const shouldUseBrowserHistoryRef = (0, react_1.useRef)(false);
+    // True once runCode has written preview content into the current iframe;
+    // reset at the start of every run. Let's iframeReload tell an expected
+    // about:blank load (fresh iframe) apart from a history-restored blank.
+    const hasWrittenContentRef = (0, react_1.useRef)(false);
+    // Set when the next run is caused by a browser history traversal (Back /
+    // Forward): it must write into the existing iframe instead of recreating
+    // it, because replacing the iframe drops its session history entries and
+    // the Forward button would lose e.g. an external page visited from the
+    // preview.
+    const restoreInPlaceRef = (0, react_1.useRef)(false);
     const currentPageParam = searchParams.get("page");
     const isPreviewUrl = isPreviewSearch(searchParams);
     // In the standalone preview tab (and any ?preview=1 URL) the browser's
@@ -370395,6 +370495,9 @@ const useHtmlRunner = () => {
             if (!pageFromUrl)
                 return;
             const normalizedPage = (0, projectPath_1.normalizePath)(pageFromUrl);
+            // History traversal: render into the existing iframe so its own
+            // history entries (e.g. an external page ahead of us) survive.
+            restoreInPlaceRef.current = true;
             dispatch((0, EditorSlice_1.setPage)(normalizedPage));
             dispatch((0, EditorSlice_1.triggerCodeRun)());
         };
@@ -370440,6 +370543,17 @@ const useHtmlRunner = () => {
     const iframeReload = () => {
         const iframe = output.current?.contentDocument;
         const filePath = (0, helpers_1.getFilenameFromIFrame)(iframe);
+        // The iframe navigated away (e.g. an external link) and came back via the
+        // browser Back button: the browser restores about:blank, not the
+        // doc.write() content. Re-run the current page. Written preview
+        // content always carries meta[filename], so a same-origin document without
+        // it after a completed run can only be a restored blank.
+        if (iframe && !filePath && hasWrittenContentRef.current) {
+            hasWrittenContentRef.current = false;
+            restoreInPlaceRef.current = true;
+            dispatch((0, EditorSlice_1.triggerCodeRun)());
+            return;
+        }
         if (runningFilePath !== filePath) {
             setRunningFilePath(filePath);
         }
@@ -370456,7 +370570,9 @@ const useHtmlRunner = () => {
                     if (href?.includes(".html")) {
                         e.preventDefault();
                         e.stopImmediatePropagation();
-                        openPreview(`/${href}`);
+                        // normalizePath avoids "//about.html" for hrefs that already
+                        // start with "/" and adds the leading slash for relative ones
+                        openPreview((0, projectPath_1.normalizePath)(href));
                     }
                 }, true);
             });
@@ -370469,8 +370585,17 @@ const useHtmlRunner = () => {
     (0, react_1.useEffect)(() => {
         if (!codeRunTriggered)
             return;
-        // Fresh iframe for each run (clean slate); it persists across view switches
-        createIframe();
+        hasWrittenContentRef.current = false;
+        if (restoreInPlaceRef.current) {
+            // Restoring after browser Back from an external page: write into the
+            // restored (already blank, fresh-window) document so the iframe's
+            // forward history entry survives and the Forward button still works.
+            restoreInPlaceRef.current = false;
+        }
+        else {
+            // Fresh iframe for each run (clean slate); it persists across view switches
+            createIframe();
+        }
         runCode();
         if (!isPreviewMode) {
             broadcastChannel.current?.postMessage({
@@ -370518,6 +370643,7 @@ const useHtmlRunner = () => {
             doc.open();
             doc.write(content);
             doc.close();
+            hasWrittenContentRef.current = true;
         }
         if (codeRunTriggered) {
             dispatch((0, EditorSlice_1.codeRunHandled)());
@@ -374158,28 +374284,54 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.ViewSwitcher = void 0;
 const jsx_runtime_1 = __webpack_require__(74848);
-const classnames_1 = __importDefault(__webpack_require__(46942));
-const Button_1 = __importDefault(__webpack_require__(79428));
-const SvgIcon_1 = __webpack_require__(82917);
 const layout_2_svg_1 = __importDefault(__webpack_require__(43064));
 const layout_3_svg_1 = __importDefault(__webpack_require__(47305));
 const layout_svg_1 = __importDefault(__webpack_require__(60497));
+const SvgIcon_1 = __webpack_require__(82917);
+const react_1 = __webpack_require__(51649);
 const react_redux_1 = __webpack_require__(14062);
-const stores_1 = __webpack_require__(32132);
 const EditorSlice_1 = __webpack_require__(68512);
+const stores_1 = __webpack_require__(32132);
 const types_1 = __webpack_require__(92932);
+const ViewSwitcherButton_1 = __webpack_require__(62719);
 const styles_module_scss_1 = __importDefault(__webpack_require__(10866));
 const ViewSwitcher = () => {
     const dispatch = (0, react_redux_1.useDispatch)();
     const viewMode = (0, stores_1.useAppSelector)((state) => state.editor.viewMode);
     const isCodeVisible = (0, stores_1.useAppSelector)((state) => state.editor.isCodeVisible);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.viewSwitcher, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { className: (0, classnames_1.default)(styles_module_scss_1.default.viewSwitcherBtn, viewMode !== types_1.ViewMode.FULL_WINDOW && styles_module_scss_1.default.viewSwitcherBtnActive), ButtonIcon: isCodeVisible
+    const handleSplitViewClick = (0, react_1.useCallback)(() => dispatch((0, EditorSlice_1.setViewMode)(isCodeVisible ? types_1.ViewMode.THREE_WINDOW : types_1.ViewMode.TWO_WINDOW)), [dispatch, isCodeVisible]);
+    const handleFullWindowClick = (0, react_1.useCallback)(() => dispatch((0, EditorSlice_1.setViewMode)(types_1.ViewMode.FULL_WINDOW)), [dispatch]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.viewSwitcher, children: [(0, jsx_runtime_1.jsx)(ViewSwitcherButton_1.ViewSwitcherButton, { label: "Split view", tooltip: "Switch to Split View", isActive: viewMode !== types_1.ViewMode.FULL_WINDOW, ButtonIcon: isCodeVisible
                     ? () => (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: layout_3_svg_1.default, size: 24 })
-                    : () => (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: layout_2_svg_1.default, size: 24 }), label: "Split view", variant: "tertiary", onClickHandler: () => dispatch((0, EditorSlice_1.setViewMode)(isCodeVisible ? types_1.ViewMode.THREE_WINDOW : types_1.ViewMode.TWO_WINDOW)) }), (0, jsx_runtime_1.jsx)(Button_1.default, { className: (0, classnames_1.default)(styles_module_scss_1.default.viewSwitcherBtn, viewMode === types_1.ViewMode.FULL_WINDOW && styles_module_scss_1.default.viewSwitcherBtnActive), ButtonIcon: () => (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: layout_svg_1.default, size: 24 }), label: "Full window view", variant: "tertiary", onClickHandler: () => dispatch((0, EditorSlice_1.setViewMode)(types_1.ViewMode.FULL_WINDOW)) })] }));
+                    : () => (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: layout_2_svg_1.default, size: 24 }), onClick: handleSplitViewClick }), (0, jsx_runtime_1.jsx)(ViewSwitcherButton_1.ViewSwitcherButton, { label: "Full window view", tooltip: "Switch to Full Screen", isActive: viewMode === types_1.ViewMode.FULL_WINDOW, ButtonIcon: () => (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: layout_svg_1.default, size: 24 }), onClick: handleFullWindowClick })] }));
 };
 exports.ViewSwitcher = ViewSwitcher;
 
 
+/***/ }),
+
+/***/ 62719:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.ViewSwitcherButton = void 0;
+const jsx_runtime_1 = __webpack_require__(74848);
+const classnames_1 = __importDefault(__webpack_require__(46942));
+const Button_1 = __importDefault(__webpack_require__(79428));
+const Tooltip_1 = __importDefault(__webpack_require__(26982));
+const useHover_1 = __webpack_require__(78556);
+const styles_module_scss_1 = __importDefault(__webpack_require__(10866));
+const ViewSwitcherButton = ({ ButtonIcon, label, tooltip, isActive, onClick, }) => {
+    const { hovered, hoverProps } = (0, useHover_1.useHover)();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.viewSwitcherBtnWrapper, ...hoverProps, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { className: (0, classnames_1.default)(styles_module_scss_1.default.viewSwitcherBtn, isActive && styles_module_scss_1.default.viewSwitcherBtnActive), ButtonIcon: ButtonIcon, label: label, variant: "tertiary", onClickHandler: onClick }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: tooltip, visible: hovered, position: "bottom", size: "fit" })] }));
+};
+exports.ViewSwitcherButton = ViewSwitcherButton;
+
+
 /***/ }),
 
 /***/ 15591: