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

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

@@ -34,14 +34,20 @@ var Tab = (0, _react.forwardRef)(function (_ref, ref) {
       disabled = _ref.disabled,
       rest = _objectWithoutProperties(_ref, ["id", "children", "icon", "title", "onClick", "disabled"]);
 
-  var tabs = (0, _context.useTabs)();
+  var _useTabs = (0, _context.useTabs)(),
+      register = _useTabs.register,
+      activate = _useTabs.activate,
+      activeId = _useTabs.activeId,
+      onKeyDown = _useTabs.onKeyDown,
+      size = _useTabs.size;
+
   var Icon = icon;
-  var isActive = id === tabs.activeId;
+  var isActive = id === activeId;
   var internalRef = (0, _react.useRef)(null);
   var handleClick = (0, _react.useCallback)(function (e) {
-    !disabled && tabs.activate(id);
+    !disabled && activate(id);
     onClick && onClick(e);
-  }, [id, tabs, disabled, onClick]);
+  }, [id, activate, disabled, onClick]);
 
   var assignRefs = function assignRefs(node) {
     (0, _assignRef.default)(ref, node);
@@ -49,23 +55,23 @@ var Tab = (0, _react.forwardRef)(function (_ref, ref) {
   };
 
   (0, _react.useEffect)(function () {
-    var unregister = tabs.register(id, {
+    var unregister = register(id, {
       isDisabled: !!disabled,
       content: children,
       ref: internalRef
     });
     return unregister;
-  }, [id, disabled, children, internalRef, tabs]);
+  }, [id, disabled, children, internalRef, register]);
   return _react.default.createElement(_styles.TabContainer, _extends({}, rest, {
     "aria-controls": "tab-panel-".concat(id),
     "aria-selected": isActive,
     disabled: !!disabled,
     id: "tab-".concat(id),
     onClick: handleClick,
-    onKeyDown: tabs.onKeyDown,
+    onKeyDown: onKeyDown,
     ref: assignRefs,
     role: "tab",
-    size: tabs.size || 'normal',
+    size: size || 'normal',
     tabIndex: isActive ? 0 : -1,
     type: "button"
   }), Icon && _react.default.createElement(Icon, {

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.162+1633819",
+  "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": "1633819ff8ff705affe08c74759c902d34ff00b6"
+  "gitHead": "7cbb87f937aaf8d30f932d2efd8bd0713a3c0500"
 }