@decisiv/ui-components 2.0.1-alpha.17 → 2.0.1-alpha.174

package/lib/components/Tabs/context.d.ts

@@ -1,10 +1,10 @@
 import { KeyboardEvent } from 'react';
-import { TabData } from './types';
+import { TabData } from '.';
 declare const defaultCtxValue: {
     activeId: string;
     register(id: string, data: TabData): void;
     onKeyDown(e: KeyboardEvent<HTMLButtonElement>): void;
-    activateById(id: string): void;
+    activate(id: string): void;
 };
 export declare type CtxValue = typeof defaultCtxValue & {
     size?: 'normal' | 'large';

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

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,aAAa,EAAc,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAGlC,QAAA,MAAM,eAAe;;;;;CAKpB,CAAC;AAEF,oBAAY,QAAQ,GAAG,OAAO,eAAe,GAAG;IAC9C,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC3B,CAAC;AAGF,QAAA,MAAM,mBAAmB,kFAAuB,CAAC;AAEjD,QAAA,MAAM,OAAO,gBAAiE,CAAC;AAE/E,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,aAAa,EAAc,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAE,OAAO,EAAE,MAAM,GAAG,CAAC;AAG5B,QAAA,MAAM,eAAe;;;;;CAKpB,CAAC;AAEF,oBAAY,QAAQ,GAAG,OAAO,eAAe,GAAG;IAC9C,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC3B,CAAC;AAGF,QAAA,MAAM,mBAAmB,kFAAuB,CAAC;AAEjD,QAAA,MAAM,OAAO,gBAAiE,CAAC;AAE/E,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/lib/components/Tabs/context.js

@@ -12,7 +12,7 @@ var defaultCtxValue = {
   activeId: '',
   register: function register(id, data) {},
   onKeyDown: function onKeyDown(e) {},
-  activateById: function activateById(id) {}
+  activate: function activate(id) {}
 };
 var TabsContext = (0, _react.createContext)(defaultCtxValue);
 var TabsContextProvider = TabsContext.Provider;

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

@@ -1,7 +1,18 @@
-import { RefForwardingComponent } from 'react';
-import { Props, TabsRef } from './types';
-export * from './types';
-export { default as Tab } from './Tab';
-declare const TabsWithRef: RefForwardingComponent<TabsRef, Props>;
-export default TabsWithRef;
+import React, { Ref, HTMLAttributes, RefObject, ReactNode } from 'react';
+export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    ref?: Ref<HTMLDivElement>;
+    size?: 'normal' | 'large';
+    onChange?: (id: string) => void;
+    selectedId?: string;
+    defaultSelectedId?: string;
+    renderHiddenTabsContent?: boolean;
+}
+export interface TabData {
+    ref: RefObject<HTMLButtonElement>;
+    content: ReactNode;
+    isDisabled: boolean;
+}
+declare const Tabs: React.ForwardRefExoticComponent<Pick<TabsProps, "title" | "style" | "onDragEnd" | "size" | "id" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "selectedId" | "defaultSelectedId" | "renderHiddenTabsContent"> & React.RefAttributes<HTMLDivElement>>;
+export { default as Tab, TabProps, TabIcon } from './Tab';
+export default Tabs;
 //# sourceMappingURL=index.d.ts.map

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,OAAc,EAIZ,sBAAsB,EAMvB,MAAM,OAAO,CAAC;AAUf,OAAO,EAAE,KAAK,EAAW,OAAO,EAAE,MAAM,SAAS,CAAC;AAElD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AAmLvC,QAAA,MAAM,WAAW,EAAE,sBAAsB,CAAC,OAAO,EAAE,KAAK,CAAoB,CAAC;AAkB7E,eAAe,WAAW,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

@@ -3,45 +3,35 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  Tab: true
-};
 Object.defineProperty(exports, "Tab", {
   enumerable: true,
   get: function get() {
     return _Tab.default;
   }
 });
+Object.defineProperty(exports, "TabProps", {
+  enumerable: true,
+  get: function get() {
+    return _Tab.TabProps;
+  }
+});
+Object.defineProperty(exports, "TabIcon", {
+  enumerable: true,
+  get: function get() {
+    return _Tab.TabIcon;
+  }
+});
 exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
-
-var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
-
-var _usePrevious = _interopRequireDefault(require("../../utils/usePrevious"));
-
 var _context = require("./context");
 
-var _types = require("./types");
-
-Object.keys(_types).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _types[key];
-    }
-  });
-});
+var _styles = require("./styles");
 
-var _Tab = _interopRequireDefault(require("./Tab"));
+var _Tab = _interopRequireWildcard(require("./Tab"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -49,14 +39,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _extends() { _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 _extends.apply(this, arguments); }
 
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
-
-function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
@@ -69,110 +51,87 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
-var Container = _styledComponents.default.div.withConfig({
-  displayName: "Tabs__Container",
-  componentId: "tlr0dr-0"
-})(["display:flex;flex-direction:column;"]);
-
-var TabList = _styledComponents.default.div.withConfig({
-  displayName: "Tabs__TabList",
-  componentId: "tlr0dr-1"
-})(["align-items:flex-end;border-bottom:1px solid ", ";display:flex;"], (0, _toColorString.default)(_color.default.base.quarterMoon));
-
-var TabContent = _styledComponents.default.div.withConfig({
-  displayName: "Tabs__TabContent",
-  componentId: "tlr0dr-2"
-})(["&:active,&:focus{outline:none;}"]);
-
-var Tabs = function Tabs(props, ref) {
-  var _props$size = props.size,
-      size = _props$size === void 0 ? 'normal' : _props$size,
-      children = props.children,
-      onChange = props.onChange,
-      selectedId = props.selectedId,
-      defaultSelectedId = props.defaultSelectedId,
-      _props$renderHiddenTa = props.renderHiddenTabsContent,
-      renderHiddenTabsContent = _props$renderHiddenTa === void 0 ? true : _props$renderHiddenTa,
-      rest = _objectWithoutProperties(props, ["size", "children", "onChange", "selectedId", "defaultSelectedId", "renderHiddenTabsContent"]);
-
-  var prevChildren = (0, _usePrevious.default)(children);
-  var prevSelectedId = (0, _usePrevious.default)(selectedId);
-  var initialActiveId = selectedId || defaultSelectedId || '';
-  var autoSelectActiveId = (0, _react.useRef)(!initialActiveId);
-
-  var _useState = (0, _react.useState)(new Map()),
-      _useState2 = _slicedToArray(_useState, 1),
-      tabs = _useState2[0];
-
-  var _useState3 = (0, _react.useState)(initialActiveId),
+var Tabs = (0, _react.forwardRef)(function (_ref, ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'normal' : _ref$size,
+      children = _ref.children,
+      onChange = _ref.onChange,
+      selectedId = _ref.selectedId,
+      defaultSelectedId = _ref.defaultSelectedId,
+      _ref$renderHiddenTabs = _ref.renderHiddenTabsContent,
+      renderHiddenTabsContent = _ref$renderHiddenTabs === void 0 ? true : _ref$renderHiddenTabs,
+      rest = _objectWithoutProperties(_ref, ["size", "children", "onChange", "selectedId", "defaultSelectedId", "renderHiddenTabsContent"]);
+
+  // 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),
+      firstRegisteredId = _useState2[0],
+      setFirstRegisteredId = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(new Map()),
       _useState4 = _slicedToArray(_useState3, 2),
-      activeId = _useState4[0],
-      setActiveId = _useState4[1];
-
-  var _useState5 = (0, _react.useState)([]),
+      registeredTabs = _useState4[0],
+      setRegisteredTabs = _useState4[1];
+
+  var enabledIds = (0, _react.useMemo)(function () {
+    return Array.from(registeredTabs).filter(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+          _id = _ref3[0],
+          data = _ref3[1];
+
+      return data.isDisabled === false;
+    }).map(function (_ref4) {
+      var _ref5 = _slicedToArray(_ref4, 1),
+          id = _ref5[0];
+
+      return id;
+    });
+  }, [registeredTabs]);
+
+  var _useMemo = (0, _react.useMemo)(function () {
+    return enabledIds;
+  }, [enabledIds]),
+      _useMemo2 = _slicedToArray(_useMemo, 1),
+      firstTabId = _useMemo2[0];
+
+  var _useState5 = (0, _react.useState)(defaultSelectedId),
       _useState6 = _slicedToArray(_useState5, 2),
-      tabsOrder = _useState6[0],
-      setTabsOrder = _useState6[1];
-
-  var _useState7 = (0, _react.useState)([]),
-      _useState8 = _slicedToArray(_useState7, 2),
-      enabledIds = _useState8[0],
-      setEnabledIds = _useState8[1]; // If "children" changes, we start all over
+      uncontrolledActiveId = _useState6[0],
+      setUncontrolledActiveId = _useState6[1];
 
-
-  (0, _react.useEffect)(function () {
-    if (prevChildren && children !== prevChildren) {
-      autoSelectActiveId.current = !initialActiveId;
-      setActiveId(initialActiveId);
-      setTabsOrder([]);
-      setEnabledIds([]);
-    }
-  }, [initialActiveId, prevChildren, children]);
-  (0, _react.useEffect)(function () {
-    if (selectedId !== prevSelectedId) {
-      setActiveId(selectedId || '');
-    }
-  }, [tabs, prevSelectedId, selectedId]);
+  var activeId = (0, _react.useMemo)(function () {
+    return selectedId || uncontrolledActiveId || firstRegisteredId || firstTabId;
+  }, [selectedId, uncontrolledActiveId, firstRegisteredId]);
   var register = (0, _react.useCallback)(function (id, data) {
-    // This prevents and infinite loop, by only re-rendering for new IDs
-    if (!tabsOrder.includes(id)) {
-      // Auto select the first non-disabled tab id,
-      // if we were not told which one should be active.
-      if (autoSelectActiveId.current && !activeId && !data.isDisabled) {
-        setActiveId(id);
-        autoSelectActiveId.current = false;
-      }
-
-      tabs.set(id, data);
-      !data.isDisabled && setEnabledIds(function (ids) {
-        return [].concat(_toConsumableArray(ids), [id]);
+    setFirstRegisteredId(function (oldState) {
+      return !oldState && !data.isDisabled ? id : undefined;
+    });
+    setRegisteredTabs(function (oldState) {
+      var newMap = new Map(oldState);
+      newMap.set(id, data);
+      return newMap;
+    });
+    return function () {
+      setRegisteredTabs(function (oldState) {
+        var newMap = new Map(oldState);
+        newMap.delete(id);
+        return newMap;
       });
-      setTabsOrder(function (ids) {
-        return [].concat(_toConsumableArray(ids), [id]);
-      });
-    }
-  }, [activeId, tabs, tabsOrder]);
-  var activateById = (0, _react.useCallback)(function (id) {
-    var tabData = tabs.get(id);
-    /* istanbul ignore else */
+    };
+  }, []);
+  var activate = (0, _react.useCallback)(function (id) {
+    onChange && onChange(id);
+    var tabData = registeredTabs.get(id);
 
     if (tabData && tabData.ref.current) {
       tabData.ref.current.focus();
     }
-    /* istanbul ignore else */
 
-
-    if (id !== activeId) {
-      // Only activate if we are not a controlled component
-      if (selectedId !== undefined) {
-        onChange && onChange(id);
-        return;
-      }
-
-      setActiveId(id);
-      onChange && onChange(id);
+    if (!selectedId) {
+      setUncontrolledActiveId(id);
     }
-  }, [tabs, activeId, selectedId, setActiveId, onChange]);
+  }, [selectedId, registeredTabs, onChange]);
   var onKeyDown = (0, _react.useCallback)(function (event) {
     var totalIds = enabledIds.length;
     var activeIdx = enabledIds.indexOf(activeId);
@@ -195,49 +154,31 @@ var Tabs = function Tabs(props, ref) {
         newActiveIdx = totalIds - 1;
         break;
     }
-    /* istanbul ignore else */
-
 
     if (newActiveIdx !== activeIdx) {
-      var newActiveId = enabledIds[newActiveIdx];
-      var tabData = tabs.get(newActiveId);
-
-      if (selectedId !== undefined) {
-        onChange && onChange(newActiveId);
-        return;
-      }
-      /* istanbul ignore else */
-
-
-      if (tabData && tabData.ref.current) {
-        tabData.ref.current.focus();
-      }
-      /* istanbul ignore else */
-
-
-      if (newActiveId !== activeId) {
-        setActiveId(newActiveId);
-        onChange && onChange(newActiveId);
-      }
+      activate(enabledIds[newActiveIdx]);
     }
-  }, [selectedId, activeId, enabledIds, tabs, onChange]);
-  var ctxValue = (0, _react.useMemo)(function () {
+  }, [activeId, enabledIds, activate]);
+  var values = (0, _react.useMemo)(function () {
     return {
-      size: size,
-      activeId: activeId,
       register: register,
-      activateById: activateById,
+      activeId: activeId,
+      activate: activate,
+      size: size,
       onKeyDown: onKeyDown
     };
-  }, [size, activeId, register, activateById, onKeyDown]);
+  }, [register, activeId, activate, size, onKeyDown]);
   return _react.default.createElement(_context.TabsContextProvider, {
-    value: ctxValue
-  }, _react.default.createElement(Container, _extends({}, rest, {
+    value: values
+  }, _react.default.createElement(_styles.Container, _extends({}, rest, {
     ref: ref
-  }), _react.default.createElement(TabList, null, children), tabsOrder.map(function (id, index) {
-    var data = tabs.get(id);
+  }), _react.default.createElement(_styles.TabList, null, children), Array.from(registeredTabs, function (_ref6, index) {
+    var _ref7 = _slicedToArray(_ref6, 2),
+        id = _ref7[0],
+        data = _ref7[1];
+
     var isActive = id === activeId || !activeId && index === 0;
-    return _react.default.createElement(TabContent, {
+    return _react.default.createElement(_styles.TabContent, {
       key: id,
       id: "tab-panel-".concat(id),
       "aria-hidden": !isActive || !data,
@@ -247,22 +188,22 @@ var Tabs = function Tabs(props, ref) {
       tabIndex: isActive ? 0 : -1
     }, (isActive || renderHiddenTabsContent) && data && data.content);
   })));
-};
+});
+Tabs.displayName = 'Tabs'; // @ts-ignore
 
-var TabsWithRef = (0, _react.forwardRef)(Tabs);
-TabsWithRef.propTypes = {
+Tabs.propTypes = {
   size: _propTypes.default.oneOf(['normal', 'large']),
   selectedId: _propTypes.default.string,
   defaultSelectedId: _propTypes.default.string,
   renderHiddenTabsContent: _propTypes.default.bool,
   onChange: _propTypes.default.func
 };
-TabsWithRef.defaultProps = {
+Tabs.defaultProps = {
   size: 'normal',
   selectedId: undefined,
   defaultSelectedId: undefined,
   renderHiddenTabsContent: true,
   onChange: undefined
 };
-var _default = TabsWithRef;
+var _default = Tabs;
 exports.default = _default;

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/lib/components/Tabs/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TabList: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TabContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS,oEAGrB,CAAC;AAEF,eAAO,MAAM,OAAO,oEAInB,CAAC;AAEF,eAAO,MAAM,UAAU,oEAKtB,CAAC"}

package/lib/components/Tabs/styles.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabContent = exports.TabList = exports.Container = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Container = _styledComponents.default.div.withConfig({
+  displayName: "styles__Container",
+  componentId: "sc-1o82gsh-0"
+})(["display:flex;flex-direction:column;"]);
+
+exports.Container = Container;
+
+var TabList = _styledComponents.default.div.withConfig({
+  displayName: "styles__TabList",
+  componentId: "sc-1o82gsh-1"
+})(["align-items:flex-end;border-bottom:1px solid ", ";display:flex;"], (0, _toColorString.default)(_color.default.base.quarterMoon));
+
+exports.TabList = TabList;
+
+var TabContent = _styledComponents.default.div.withConfig({
+  displayName: "styles__TabContent",
+  componentId: "sc-1o82gsh-2"
+})(["&:active,&:focus{outline:none;}"]);
+
+exports.TabContent = TabContent;

package/lib/components/Tag/Action.d.ts

@@ -0,0 +1,4 @@
+declare const Action: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ActionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default Action;
+//# sourceMappingURL=Action.d.ts.map

package/lib/components/Tag/Action.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Action.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Action.tsx"],"names":[],"mappings":"AAgBA,QAAA,MAAM,MAAM,oEAYX,CAAC;AAEF,eAAO,MAAM,eAAe,oEAK3B,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Tag/Action.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ActionContainer = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _designTokens = _interopRequireDefault(require("@decisiv/design-tokens"));
+
+var _constants = require("./constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; } }
+
+var _designTokens$color = _designTokens.default.color,
+    baseColors = _designTokens$color.base,
+    interactionColors = _designTokens$color.interaction;
+var borderRadius = (0, _styledComponents.css)(["border-radius:0 ", " ", " 0;"], (0, _rem.default)(10), (0, _rem.default)(10));
+
+var Action = _styledComponents.default.div.withConfig({
+  displayName: "Action",
+  componentId: "sc-53eucd-0"
+})(["align-items:center;justify-content:center;border:0;color:", ";display:flex;height:100%;width:", ";padding-right:", ";outline:none;", ""], (0, _toColorString.default)(interactionColors.pacificOcean), (0, _rem.default)(_constants.ACTION_WIDTH), (0, _rem.default)(1), borderRadius);
+
+var ActionContainer = _styledComponents.default.div.withConfig({
+  displayName: "Action__ActionContainer",
+  componentId: "sc-53eucd-1"
+})(["height:100%;background-color:", ";", ";"], (0, _toColorString.default)(baseColors.snowWhite), borderRadius);
+
+exports.ActionContainer = ActionContainer;
+var _default = Action;
+exports.default = _default;

package/lib/components/Tag/constants.d.ts

@@ -1,5 +1,5 @@
-export declare const ACTION_BUTTON_WIDTH = 22;
-export declare const CONTAINER_X_PADDING = 14;
+export declare const ACTION_WIDTH = 22;
+export declare const CONTAINER_X_PADDING = 8;
 export declare const ICON_CONTENT_MARGIN = 5;
 export declare const MAX_CONTAINER_WIDTH = 300;
 //# sourceMappingURL=constants.d.ts.map

package/lib/components/Tag/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,eAAO,MAAM,mBAAmB,MAAM,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,eAAO,MAAM,mBAAmB,MAAM,CAAC"}

package/lib/components/Tag/constants.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MAX_CONTAINER_WIDTH = exports.ICON_CONTENT_MARGIN = exports.CONTAINER_X_PADDING = exports.ACTION_BUTTON_WIDTH = void 0;
-var ACTION_BUTTON_WIDTH = 22;
-exports.ACTION_BUTTON_WIDTH = ACTION_BUTTON_WIDTH;
-var CONTAINER_X_PADDING = 14;
+exports.MAX_CONTAINER_WIDTH = exports.ICON_CONTENT_MARGIN = exports.CONTAINER_X_PADDING = exports.ACTION_WIDTH = void 0;
+var ACTION_WIDTH = 22;
+exports.ACTION_WIDTH = ACTION_WIDTH;
+var CONTAINER_X_PADDING = 8;
 exports.CONTAINER_X_PADDING = CONTAINER_X_PADDING;
 var ICON_CONTENT_MARGIN = 5;
 exports.ICON_CONTENT_MARGIN = ICON_CONTENT_MARGIN;

package/lib/components/Tag/index.d.ts

@@ -1,8 +1,6 @@
 import { RefForwardingComponent } from 'react';
-import { CommonUIColors } from '../../utils/commonUIColors';
 import { TagProps, TagRef } from './types';
-export { TagProps, TagRef, TagActionButtonRef } from './types';
-export declare type ColorKeys = keyof CommonUIColors;
 declare const TagWithRef: RefForwardingComponent<TagRef, TagProps>;
+export { TagProps, TagRef, TagActionRef as TagActionButtonRef, IconComponent, } from './types';
 export default TagWithRef;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":"AAEA,OAAc,EAIZ,sBAAsB,EAIvB,MAAM,OAAO,CAAC;AAMf,OAAO,EAAkB,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAY5E,OAAO,EAA4B,QAAQ,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAErE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE/D,oBAAY,SAAS,GAAG,MAAM,cAAc,CAAC;AA6L7C,QAAA,MAAM,UAAU,EAAE,sBAAsB,CAAC,MAAM,EAAE,QAAQ,CAAmB,CAAC;AAS7E,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAIZ,sBAAsB,EAIvB,MAAM,OAAO,CAAC;AAQf,OAAO,EAAiB,QAAQ,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAqG1D,QAAA,MAAM,UAAU,EAAE,sBAAsB,CAAC,MAAM,EAAE,QAAQ,CAAmB,CAAC;AAS7E,OAAO,EACL,QAAQ,EACR,MAAM,EACN,YAAY,IAAI,kBAAkB,EAClC,aAAa,GACd,MAAM,SAAS,CAAC;AAEjB,eAAe,UAAU,CAAC"}