@synerise/ds-tabs 0.13.101 → 0.13.103

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.13.103](https://github.com/synerise/synerise-design/compare/@synerise/ds-tabs@0.13.102...@synerise/ds-tabs@0.13.103) (2024-04-03)
+
+
+### Bug Fixes
+
+* **tabs:** fixed calculating tabs width ([1c5397f](https://github.com/synerise/synerise-design/commit/1c5397fd0c935726046247a584ab8f58ec766773))
+
+
+
+
+
+## [0.13.102](https://github.com/synerise/synerise-design/compare/@synerise/ds-tabs@0.13.101...@synerise/ds-tabs@0.13.102) (2024-04-02)
+
+**Note:** Version bump only for package @synerise/ds-tabs
+
+
+
+
+
 ## [0.13.101](https://github.com/synerise/synerise-design/compare/@synerise/ds-tabs@0.13.100...@synerise/ds-tabs@0.13.101) (2024-03-29)
 
 **Note:** Version bump only for package @synerise/ds-tabs

package/dist/Tab/Tab.d.ts

@@ -1,4 +1,8 @@
-import * as React from 'react';
 import { TabProps } from './Tab.types';
-declare const Tab: React.FC<TabProps>;
+declare const Tab: {
+    ({ index, label, icon, isActive, disabled, onClick, forwardedRef, underscore, className, block, suffixel, }: TabProps): JSX.Element;
+    defaultProps: {
+        underscore: boolean;
+    };
+};
 export default Tab;

package/dist/Tab/Tab.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useState } from 'react';
 import Icon from '@synerise/ds-icon';
 import classNames from 'classnames';
 import * as S from './Tab.styles';
@@ -16,9 +16,9 @@ var Tab = function Tab(_ref) {
       block = _ref.block,
       suffixel = _ref.suffixel;
 
-  var _React$useState = React.useState(false),
-      isPressed = _React$useState[0],
-      setPressed = _React$useState[1];
+  var _useState = useState(false),
+      isPressed = _useState[0],
+      setPressed = _useState[1];
 
   var handleClick = function handleClick() {
     onClick(index);

package/dist/Tab/Tab.types.d.ts

@@ -1,14 +1,14 @@
-import * as React from 'react';
+import { ReactNode, RefObject } from 'react';
 export type TabProps = {
     index: number;
-    label?: string | React.ReactNode;
-    icon?: React.ReactNode;
+    label?: ReactNode;
+    icon?: ReactNode;
     underscore?: boolean;
     isActive?: boolean;
     disabled?: boolean;
     className?: string;
     onClick: (index: number) => void;
-    forwardedRef: React.RefObject<HTMLButtonElement>;
+    forwardedRef: RefObject<HTMLButtonElement>;
     block?: boolean;
-    suffixel?: React.ReactNode | React.ReactText;
+    suffixel?: ReactNode;
 };

package/dist/Tabs.d.ts

@@ -1,4 +1,8 @@
-import * as React from 'react';
 import { TabsProps } from './Tabs.types';
-declare const Tabs: React.FC<TabsProps>;
+declare const Tabs: {
+    ({ activeTab, tabs, handleTabClick, configuration, underscore, block }: TabsProps): JSX.Element;
+    defaultProps: {
+        underscore: boolean;
+    };
+};
 export default Tabs;

package/dist/Tabs.js

@@ -4,16 +4,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import * as React from 'react';
+import React, { useCallback, createRef, useMemo, useState, useRef, useEffect } from 'react';
+import { debounce } from 'lodash';
 import Dropdown from '@synerise/ds-dropdown';
 import Icon, { OptionHorizontalM } from '@synerise/ds-icon';
-import { useResize } from '@synerise/ds-utils';
+import { useResizeObserver, NOOP } from '@synerise/ds-utils';
 import * as S from './Tabs.styles';
 import Tab from './Tab/Tab';
-
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-var NOOP = function NOOP() {};
-
 var MARGIN_BETWEEN_TABS = 24;
 var DROPDOWN_TRIGGER_SIZE = 32;
 
@@ -23,53 +20,64 @@ var Tabs = function Tabs(_ref) {
       handleTabClick = _ref.handleTabClick,
       configuration = _ref.configuration,
       underscore = _ref.underscore,
-      block = _ref.block,
-      _ref$visible = _ref.visible,
-      visible = _ref$visible === void 0 ? true : _ref$visible;
-  var containerRef = React.useRef();
-
-  var _useResize = useResize(containerRef, visible),
-      width = _useResize.width;
-
-  var _React$useState = React.useState(true),
-      renderHelperTabs = _React$useState[0],
-      setRenderHelperTabs = _React$useState[1];
-
-  var _React$useState2 = React.useState([]),
-      items = _React$useState2[0],
-      setItems = _React$useState2[1];
-
-  var _React$useState3 = React.useState([]),
-      itemsWidths = _React$useState3[0],
-      setItemsWidths = _React$useState3[1];
-
-  var _React$useState4 = React.useState([]),
-      visibleTabs = _React$useState4[0],
-      setVisibleTabs = _React$useState4[1];
-
-  var _React$useState5 = React.useState([]),
-      hiddenTabs = _React$useState5[0],
-      setHiddenTabs = _React$useState5[1];
-
-  React.useEffect(function () {
+      block = _ref.block;
+
+  var _useState = useState(0),
+      containerWidth = _useState[0],
+      setContainerWidth = _useState[1];
+
+  var containerRef = useRef(null);
+  var helperContainerRef = useRef(null);
+
+  var _useResizeObserver = useResizeObserver(containerRef),
+      width = _useResizeObserver.width;
+
+  var _useResizeObserver2 = useResizeObserver(helperContainerRef),
+      helperWidth = _useResizeObserver2.width;
+
+  var _useState2 = useState([]),
+      items = _useState2[0],
+      setItems = _useState2[1];
+
+  var _useState3 = useState([]),
+      itemsWidths = _useState3[0],
+      setItemsWidths = _useState3[1];
+
+  var _useState4 = useState([]),
+      visibleTabs = _useState4[0],
+      setVisibleTabs = _useState4[1];
+
+  var _useState5 = useState([]),
+      hiddenTabs = _useState5[0],
+      setHiddenTabs = _useState5[1];
+
+  var debouncedEventHandler = useMemo(function () {
+    return debounce(function (newWidth) {
+      return setContainerWidth(newWidth);
+    }, 200);
+  }, []);
+  useEffect(function () {
+    debouncedEventHandler(width);
+  }, [width, debouncedEventHandler]);
+  useEffect(function () {
     var newTabs = tabs.map(function (tab) {
       return _objectSpread({}, tab, {
-        ref: React.createRef()
+        ref: createRef()
       });
     });
-    setRenderHelperTabs(true);
     setItems(newTabs);
   }, [tabs]);
-  React.useEffect(function () {
-    var itemsWithWidths = [];
-    items.forEach(function (item, index) {
-      itemsWithWidths[index] = item.ref.current !== null ? item.ref.current.offsetWidth + MARGIN_BETWEEN_TABS : 0;
-    });
-    setItemsWidths(itemsWithWidths);
-    setRenderHelperTabs(false);
-  }, [items]); // eslint-disable-line react-hooks/exhaustive-deps
+  useEffect(function () {
+    if (helperWidth > 0 && containerWidth > 0) {
+      var itemsWithWidths = [];
+      items.forEach(function (item, index) {
+        itemsWithWidths[index] = item.ref.current !== null ? item.ref.current.offsetWidth + MARGIN_BETWEEN_TABS : 0;
+      });
+      setItemsWidths(itemsWithWidths);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  React.useEffect(function () {
+  }, [items, helperWidth, containerWidth > 0]);
+  useEffect(function () {
     if (block) {
       setVisibleTabs(items);
       setHiddenTabs([]);
@@ -78,7 +86,7 @@ var Tabs = function Tabs(_ref) {
       var visibleItems = [];
       var hiddenItems = [];
       itemsWidths.forEach(function (itemWidth, index) {
-        if (containerRef && tabsWidth + itemWidth < width) {
+        if (containerRef && tabsWidth + itemWidth < containerWidth) {
           visibleItems.push(items[index]);
         } else {
           hiddenItems.push(items[index]);
@@ -90,11 +98,11 @@ var Tabs = function Tabs(_ref) {
       setHiddenTabs(hiddenItems);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [itemsWidths, width]);
-  var handleConfigurationAction = React.useCallback(function () {
+  }, [itemsWidths, containerWidth]);
+  var handleConfigurationAction = useCallback(function () {
     configuration && configuration.action();
   }, [configuration]);
-  var renderHiddenTabs = React.useMemo(function () {
+  var renderHiddenTabs = useMemo(function () {
     return /*#__PURE__*/React.createElement(S.TabsDropdownContainer, {
       "data-testid": "tabs-dropdown-container"
     }, hiddenTabs.length > 0 && /*#__PURE__*/React.createElement(S.DropdownMenu, null, hiddenTabs.map(function (item, index) {
@@ -131,7 +139,7 @@ var Tabs = function Tabs(_ref) {
     }))));
   };
 
-  var renderVisibleTabs = React.useMemo(function () {
+  var renderVisibleTabs = useMemo(function () {
     return /*#__PURE__*/React.createElement(React.Fragment, null, visibleTabs.filter(function (tab) {
       return Boolean(tab);
     }).map(function (tab, index) {
@@ -151,8 +159,9 @@ var Tabs = function Tabs(_ref) {
       });
     }));
   }, [visibleTabs, activeTab, handleTabClick, underscore, block]);
-  var renderHelpers = React.useMemo(function () {
+  var renderHelpers = useMemo(function () {
     return /*#__PURE__*/React.createElement(S.HiddenTabs, {
+      ref: helperContainerRef,
       className: "ds-hidden-helper"
     }, items.map(function (tab, index) {
       var key = "tabs-tab-helper-" + index;
@@ -170,12 +179,12 @@ var Tabs = function Tabs(_ref) {
       });
     }));
   }, [items, underscore, block]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.TabsContainer, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, tabs.length && /*#__PURE__*/React.createElement(S.TabsContainer, {
     className: "ds-tabs",
     ref: containerRef,
     "data-testid": "tabs-container",
     block: block
-  }, renderVisibleTabs, renderDropdown()), !block && renderHelperTabs && renderHelpers);
+  }, renderVisibleTabs, renderDropdown()), !block && renderHelpers);
 };
 
 Tabs.defaultProps = {

package/dist/Tabs.styles.js

@@ -4,7 +4,7 @@ import Menu from '@synerise/ds-menu';
 export var TabsContainer = styled.div.withConfig({
   displayName: "Tabsstyles__TabsContainer",
   componentId: "sc-16x3i3b-0"
-})(["padding-top:5px;display:flex;flex-direction:row;align-items:", ";justify-content:flex-start;max-width:100%;overflow-x:hidden;margin-bottom:-1px;"], function (props) {
+})(["padding-top:5px;display:flex;flex-direction:row;align-items:", ";justify-content:flex-start;max-width:100%;overflow-x:hidden;margin-bottom:-1px;height:38px;"], function (props) {
   return props.block ? "center" : "flex-end";
 });
 export var TabsDropdownContainer = styled.div.withConfig({
@@ -31,7 +31,7 @@ export var ShowHiddenTabsTrigger = styled(Button).withConfig({
 export var HiddenTabs = styled.div.withConfig({
   displayName: "Tabsstyles__HiddenTabs",
   componentId: "sc-16x3i3b-4"
-})(["position:absolute;width:0;visibility:hidden;"]);
+})(["position:absolute;display:flex;visibility:hidden;pointer-events:none;"]);
 export var DropdownMenu = styled(Menu).withConfig({
   displayName: "Tabsstyles__DropdownMenu",
   componentId: "sc-16x3i3b-5"

package/dist/Tabs.types.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { ReactNode, RefObject } from 'react';
 export type TabsProps = {
     activeTab: number;
     tabs: TabItem[];
@@ -14,11 +14,11 @@ export type Configuration = {
     disabled?: boolean;
 };
 export type TabItem = {
-    label?: string | React.ReactNode;
-    icon?: React.ReactNode;
+    label?: ReactNode;
+    icon?: ReactNode;
     disabled?: boolean;
-    suffixel?: React.ReactNode | React.ReactText;
+    suffixel?: ReactNode;
 };
 export type TabWithRef = TabItem & {
-    ref: React.RefObject<HTMLButtonElement>;
+    ref: RefObject<HTMLButtonElement>;
 };

package/dist/index.d.ts

@@ -1 +1,2 @@
 export { default } from './Tabs';
+export type { TabItem } from './Tabs.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-tabs",
-  "version": "0.13.101",
+  "version": "0.13.103",
   "description": "Tabs UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -33,12 +33,12 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.19.5",
-    "@synerise/ds-dropdown": "^0.17.102",
-    "@synerise/ds-icon": "^0.60.5",
-    "@synerise/ds-menu": "^0.18.17",
+    "@synerise/ds-button": "^0.19.6",
+    "@synerise/ds-dropdown": "^0.17.103",
+    "@synerise/ds-icon": "^0.60.6",
+    "@synerise/ds-menu": "^0.18.18",
     "@synerise/ds-typography": "^0.14.3",
-    "@synerise/ds-utils": "^0.26.1",
+    "@synerise/ds-utils": "^0.26.2",
     "classnames": "2.3.2"
   },
   "peerDependencies": {
@@ -50,5 +50,5 @@
   "devDependencies": {
     "@testing-library/jest-dom": "5.1.1"
   },
-  "gitHead": "07304b7bf03826701df904c7be058d93588a9611"
+  "gitHead": "7506652551b234c2e30e3bb492d56ab822bdb5a1"
 }