@decisiv/ui-components 2.0.1-alpha.21 → 2.0.1-alpha.211

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

@@ -0,0 +1,13 @@
+import React, { Ref, HTMLAttributes } from 'react';
+import { IconProps } from '@decisiv/iconix';
+export declare type TabIcon = (props: IconProps) => JSX.Element;
+export interface TabProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'size'> {
+    id: string;
+    ref?: Ref<HTMLButtonElement>;
+    icon?: TabIcon;
+    title: string;
+    disabled?: boolean;
+}
+declare const Tab: React.ForwardRefExoticComponent<Pick<TabProps, "title" | "style" | "onDragEnd" | "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" | "icon" | "disabled"> & React.RefAttributes<HTMLButtonElement>>;
+export default Tab;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tab/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAEZ,GAAG,EAKH,cAAc,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAQ5C,oBAAY,OAAO,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAExD,MAAM,WAAW,QACf,SAAQ,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IACvD,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,GAAG,glJAsDR,CAAC;AAiBF,eAAe,GAAG,CAAC"}

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

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _assignRef = _interopRequireDefault(require("../../../utils/assignRef"));
+
+var _context = require("../context");
+
+var _styles = require("./styles");
+
+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 _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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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 Tab = (0, _react.forwardRef)(function (_ref, ref) {
+  var id = _ref.id,
+      children = _ref.children,
+      icon = _ref.icon,
+      title = _ref.title,
+      onClick = _ref.onClick,
+      disabled = _ref.disabled,
+      rest = _objectWithoutProperties(_ref, ["id", "children", "icon", "title", "onClick", "disabled"]);
+
+  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 === activeId;
+  var internalRef = (0, _react.useRef)(null);
+  var handleClick = (0, _react.useCallback)(function (e) {
+    !disabled && activate(id);
+    onClick && onClick(e);
+  }, [id, activate, disabled, onClick]);
+
+  var assignRefs = function assignRefs(node) {
+    (0, _assignRef.default)(ref, node);
+    (0, _assignRef.default)(internalRef, node);
+  };
+
+  (0, _react.useEffect)(function () {
+    var unregister = register(id, {
+      isDisabled: !!disabled,
+      content: children,
+      ref: internalRef
+    });
+    return unregister;
+  }, [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: onKeyDown,
+    ref: assignRefs,
+    role: "tab",
+    size: size || 'normal',
+    tabIndex: isActive ? 0 : -1,
+    type: "button"
+  }), Icon && _react.default.createElement(Icon, {
+    size: "medium"
+  }), _react.default.createElement("span", null, title));
+}); // @ts-ignore
+
+Tab.propTypes = {
+  id: _propTypes.default.string.isRequired,
+  title: _propTypes.default.string.isRequired,
+  icon: _propTypes.default.elementType,
+  disabled: _propTypes.default.bool
+};
+Tab.displayName = 'Tab';
+Tab.defaultProps = {
+  icon: undefined,
+  disabled: false
+};
+var _default = Tab;
+exports.default = _default;

package/lib/components/Tabs/Tab/schema.d.ts

@@ -0,0 +1,3 @@
+declare const schema: any;
+export default schema;
+//# sourceMappingURL=schema.d.ts.map

package/lib/components/Tabs/Tab/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tab/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAmC,CAAC;AAqBhD,eAAe,MAAM,CAAC"}

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

@@ -0,0 +1,7 @@
+import { TabProps } from '.';
+interface StyledTabProps extends Omit<TabProps, 'title'> {
+    size: 'normal' | 'large';
+}
+export declare const TabContainer: import("styled-components").StyledComponent<"button", any, StyledTabProps, never>;
+export {};
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tab/styles.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC;AAE7B,UAAU,cAAe,SAAQ,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC;IACtD,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC1B;AAMD,eAAO,MAAM,YAAY,mFAgFxB,CAAC"}

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabContainer = 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 = require("@decisiv/design-tokens");
+
+var _BaseButton = _interopRequireDefault(require("../../../atoms/BaseButton"));
+
+var _styleModifiers = require("../../../utils/styleModifiers");
+
+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; } }
+
+/* eslint-disable import/prefer-default-export */
+var base = _designTokens.color.base,
+    interaction = _designTokens.color.interaction,
+    opacity = _designTokens.color.opacity;
+var shadowColor = (0, _toColorString.default)(interaction.pacificOcean40);
+var yPaddingBySize = {
+  normal: 5,
+  large: 10
+};
+var TabContainer = (0, _styledComponents.default)(_BaseButton.default).withConfig({
+  displayName: "styles__TabContainer",
+  componentId: "sc-3l38e9-0"
+})(["color:", ";align-items:center;background:", ";border-radius:2px 2px 0 0;border:1px solid transparent;cursor:default;display:flex;font-size:", ";line-height:1.4;margin:0;outline:none;padding-top:", ";padding-right:", ";padding-bottom:", ";padding-left:", ";position:relative;font-weight:", ";&::after{background:", ";bottom:-1px;content:'';height:3px;left:2px;opacity:0;position:absolute;right:2px;}&:hover{color:", ";}&[aria-selected='true']{border-color:", ";border-bottom-color:transparent;color:", ";margin-bottom:-1px;padding-bottom:", ";&:focus{border-color:", ";border-bottom-color:", ";box-shadow:inset 0 0 0 2px ", ";&::after{opacity:1;}}}&:disabled{color:", ";cursor:not-allowed;}> *:not(span){margin-top:-1px;}> * + span{margin-left:", ";}", ";"], (0, _toColorString.default)(interaction.pacificOcean), (0, _toColorString.default)(base.snowWhite), (0, _rem.default)(_designTokens.typography.size.scale[1]), (0, _rem.default)(yPaddingBySize.normal + 3), (0, _rem.default)(15), (0, _rem.default)(yPaddingBySize.normal - 1), (0, _rem.default)(15), _designTokens.typography.weight.alias.medium, (0, _toColorString.default)(base.snowWhite), (0, _toColorString.default)(interaction.indianOcean), (0, _toColorString.default)(base.quarterMoon), (0, _toColorString.default)(base.alaskanHusky), (0, _rem.default)(yPaddingBySize.normal), (0, _toColorString.default)(interaction.pacificOcean), shadowColor, shadowColor, (0, _toColorString.default)(opacity.charcoal40), (0, _rem.default)(8), (0, _styleModifiers.when)('size', 'large', (0, _styledComponents.css)(["font-size:", ";line-height:1.2;padding-bottom:", ";padding-top:", ";&[aria-selected='true']{padding-bottom:", ";}"], (0, _rem.default)(_designTokens.typography.size.scale[2]), (0, _rem.default)(yPaddingBySize.large - 1), (0, _rem.default)(yPaddingBySize.large + 3), (0, _rem.default)(yPaddingBySize.large))));
+exports.TabContainer = TabContainer;

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;