@decisiv/ui-components 2.0.1-alpha.163 → 2.0.1-alpha.164

package/lib/components/Tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,GAAG,EAIH,cAAc,EACd,SAAS,EACT,SAAS,EACV,MAAM,OAAO,CAAC;AAOf,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACxD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,MAAM,WAAW,OAAO;IACtB,GAAG,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAClC,OAAO,EAAE,SAAS,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,IAAI,koJAoIT,CAAC;AAqBF,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC1D,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,GAAG,EAIH,cAAc,EACd,SAAS,EACT,SAAS,EACV,MAAM,OAAO,CAAC;AAOf,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACxD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,MAAM,WAAW,OAAO;IACtB,GAAG,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAClC,OAAO,EAAE,SAAS,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,IAAI,koJA+IT,CAAC;AAqBF,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC1D,eAAe,IAAI,CAAC"}

package/lib/components/Tabs/index.js

@@ -62,10 +62,17 @@ var Tabs = (0, _react.forwardRef)(function (_ref, ref) {
       renderHiddenTabsContent = _ref$renderHiddenTabs === void 0 ? true : _ref$renderHiddenTabs,
       rest = _objectWithoutProperties(_ref, ["size", "children", "onChange", "selectedId", "defaultSelectedId", "renderHiddenTabsContent"]);
 
-  var _useState = (0, _react.useState)(new Map()),
+  // This is a ref to store the first tab id. It is used to store the value if
+  // some state changes and the tab gets remounted.
+  var _useState = (0, _react.useState)(),
       _useState2 = _slicedToArray(_useState, 2),
-      registeredTabs = _useState2[0],
-      setRegisteredTabs = _useState2[1];
+      firstRegisteredId = _useState2[0],
+      setFirstRegisteredId = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(new Map()),
+      _useState4 = _slicedToArray(_useState3, 2),
+      registeredTabs = _useState4[0],
+      setRegisteredTabs = _useState4[1];
 
   var enabledIds = (0, _react.useMemo)(function () {
     return Array.from(registeredTabs).filter(function (_ref2) {
@@ -88,15 +95,18 @@ var Tabs = (0, _react.forwardRef)(function (_ref, ref) {
       _useMemo2 = _slicedToArray(_useMemo, 1),
       firstTabId = _useMemo2[0];
 
-  var _useState3 = (0, _react.useState)(defaultSelectedId),
-      _useState4 = _slicedToArray(_useState3, 2),
-      uncontrolledActiveId = _useState4[0],
-      setUncontrolledActiveId = _useState4[1];
+  var _useState5 = (0, _react.useState)(defaultSelectedId),
+      _useState6 = _slicedToArray(_useState5, 2),
+      uncontrolledActiveId = _useState6[0],
+      setUncontrolledActiveId = _useState6[1];
 
   var activeId = (0, _react.useMemo)(function () {
-    return selectedId || uncontrolledActiveId || firstTabId;
-  }, [selectedId, uncontrolledActiveId, firstTabId]);
+    return selectedId || uncontrolledActiveId || firstRegisteredId || firstTabId;
+  }, [selectedId, uncontrolledActiveId, firstRegisteredId]);
   var register = (0, _react.useCallback)(function (id, data) {
+    setFirstRegisteredId(function (oldState) {
+      return !oldState && !data.isDisabled ? id : undefined;
+    });
     setRegisteredTabs(function (oldState) {
       var newMap = new Map(oldState);
       newMap.set(id, data);

package/lib/components/Tabs/index.test.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@testing-library/react");
 
@@ -8,7 +8,17 @@ var _ = _interopRequireWildcard(require("."));
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
 var getVisibleTextContents = function getVisibleTextContents(container) {
   var selectedButton = container.querySelector('[aria-selected="true"]');
@@ -339,4 +349,46 @@ describe('Tabs', function () {
 
     expect(onClick).toBeCalled();
   });
+  it('keeps selected tab when the tab gets re-rendered', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var TestCase, _render14, container;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            TestCase = function TestCase() {
+              var _useState = (0, _react.useState)('Tab 1'),
+                  _useState2 = _slicedToArray(_useState, 2),
+                  title = _useState2[0],
+                  setTitle = _useState2[1];
+
+              return _react.default.createElement(_react.default.StrictMode, null, _react.default.createElement("button", {
+                onClick: function onClick() {
+                  return setTitle('Tab 1 - Updated');
+                },
+                type: "button"
+              }, "update title"), _react.default.createElement(_.default, {
+                renderHiddenTabsContent: false
+              }, _react.default.createElement(_.Tab, {
+                id: "1",
+                title: title
+              }, _react.default.createElement("div", null, "This is the first tab content."), _react.default.createElement("div", null, "This is the title", title)), _react.default.createElement(_.Tab, {
+                id: "2",
+                title: "Tab 2"
+              }, "This is the second tab content.")));
+            };
+
+            _render14 = (0, _react2.render)(_react.default.createElement(TestCase, null)), container = _render14.container;
+
+            _react2.fireEvent.click((0, _react2.getByText)(container, /update title/i));
+
+            expect((0, _react2.getByText)(container, /this is the first tab content/i)).toBeInTheDocument();
+
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.163+3f12471",
+  "version": "2.0.1-alpha.164+7cbb87f",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "3f12471f57335fdd25a3860b1f1d6a3fa9eb8a33"
+  "gitHead": "7cbb87f937aaf8d30f932d2efd8bd0713a3c0500"
 }