@synerise/ds-tabs 0.14.2 → 0.14.4

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.14.4](https://github.com/synerise/synerise-design/compare/@synerise/ds-tabs@0.14.3...@synerise/ds-tabs@0.14.4) (2024-06-05)
+
+
+### Bug Fixes
+
+* **tabs:** fixed displaying configuration ([7ac150a](https://github.com/synerise/synerise-design/commit/7ac150a157cf0fd24ee2fc34c186612c121414a5))
+
+
+
+
+
+## [0.14.3](https://github.com/synerise/synerise-design/compare/@synerise/ds-tabs@0.14.2...@synerise/ds-tabs@0.14.3) (2024-05-29)
+
+**Note:** Version bump only for package @synerise/ds-tabs
+
+
+
+
+
 ## [0.14.2](https://github.com/synerise/synerise-design/compare/@synerise/ds-tabs@0.14.1...@synerise/ds-tabs@0.14.2) (2024-05-23)
 
 **Note:** Version bump only for package @synerise/ds-tabs

package/dist/Tab/Tab.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import { TabProps } from './Tab.types';
 declare const Tab: {
-    ({ index, label, icon, isActive, disabled, onClick, forwardedRef, underscore, className, block, suffixel, }: TabProps): JSX.Element;
+    ({ index, label, icon, isActive, disabled, onClick, forwardedRef, underscore, className, block, suffixel, }: TabProps): React.JSX.Element;
     defaultProps: {
         underscore: boolean;
     };

package/dist/Tabs.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import { TabsProps } from './Tabs.types';
 declare const Tabs: {
-    ({ activeTab, tabs, handleTabClick, configuration, underscore, block }: TabsProps): JSX.Element;
+    ({ activeTab, tabs, handleTabClick, configuration, underscore, block }: TabsProps): React.JSX.Element;
     defaultProps: {
         underscore: boolean;
     };

package/dist/Tabs.js

@@ -6,6 +6,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 import React, { useCallback, createRef, useMemo, useState, useRef, useEffect } from 'react';
 import { debounce } from 'lodash';
+import { theme } from '@synerise/ds-core';
 import Dropdown from '@synerise/ds-dropdown';
 import Icon, { OptionHorizontalM } from '@synerise/ds-icon';
 import { useResizeObserver, NOOP } from '@synerise/ds-utils';
@@ -13,6 +14,10 @@ import * as S from './Tabs.styles';
 import Tab from './Tab/Tab';
 var MARGIN_BETWEEN_TABS = 24;
 var DROPDOWN_TRIGGER_SIZE = 32;
+var DROPDOWN_OVERLAY_STYLE = {
+  boxShadow: '0 4px 12px 0 rgba(35, 41, 54, 0.07)',
+  zIndex: parseInt(theme.variables['zindex-modal'], 10) - 1
+};
 
 var Tabs = function Tabs(_ref) {
   var activeTab = _ref.activeTab,
@@ -47,9 +52,13 @@ var Tabs = function Tabs(_ref) {
       visibleTabs = _useState4[0],
       setVisibleTabs = _useState4[1];
 
-  var _useState5 = useState([]),
-      hiddenTabs = _useState5[0],
-      setHiddenTabs = _useState5[1];
+  var _useState5 = useState(false),
+      isDropdownVisible = _useState5[0],
+      setIsDropdownVisible = _useState5[1];
+
+  var _useState6 = useState([]),
+      hiddenTabs = _useState6[0],
+      setHiddenTabs = _useState6[1];
 
   var debouncedEventHandler = useMemo(function () {
     return debounce(function (newWidth) {
@@ -109,7 +118,12 @@ var Tabs = function Tabs(_ref) {
   }, [block, itemsWidths, containerWidth]);
   var handleConfigurationAction = useCallback(function () {
     configuration && configuration.action();
+    setIsDropdownVisible(false);
   }, [configuration]);
+  var handleHiddenTabClick = useCallback(function (index) {
+    setIsDropdownVisible(false);
+    handleTabClick(index);
+  }, [handleTabClick]);
   var renderHiddenTabs = useMemo(function () {
     return /*#__PURE__*/React.createElement(S.TabsDropdownContainer, {
       "data-testid": "tabs-dropdown-container"
@@ -118,7 +132,7 @@ var Tabs = function Tabs(_ref) {
         // eslint-disable-next-line react/no-array-index-key
         key: item.label + "-dropdown-" + index,
         onClick: function onClick() {
-          return handleTabClick(visibleTabs.length + index);
+          return handleHiddenTabClick(visibleTabs.length + index);
         },
         disabled: item.disabled
       }, item.label);
@@ -127,21 +141,22 @@ var Tabs = function Tabs(_ref) {
       onClick: handleConfigurationAction,
       disabled: !!(configuration != null && configuration.disabled)
     }, configuration.label)));
-  }, [hiddenTabs, configuration, handleConfigurationAction, handleTabClick, visibleTabs.length]);
+  }, [hiddenTabs, configuration, handleConfigurationAction, handleHiddenTabClick, visibleTabs.length]);
 
   var renderDropdown = function renderDropdown() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, (hiddenTabs.length || configuration) && /*#__PURE__*/React.createElement(Dropdown, {
       trigger: ['click'],
       "data-testid": "tabs-dropdown",
+      visible: isDropdownVisible,
+      onVisibleChange: setIsDropdownVisible,
       overlay: renderHiddenTabs,
-      disabled: !!(configuration != null && configuration.disabled),
-      overlayStyle: {
-        boxShadow: '0 4px 12px 0 rgba(35, 41, 54, 0.07)'
-      }
+      disabled: !!(configuration != null && configuration.disabled) && !hiddenTabs.length,
+      overlayStyle: DROPDOWN_OVERLAY_STYLE
     }, /*#__PURE__*/React.createElement(S.ShowHiddenTabsTrigger, {
+      "data-testid": "tabs-dropdown-trigger",
       type: "ghost",
       mode: "single-icon",
-      disabled: !!(configuration != null && configuration.disabled)
+      disabled: !!(configuration != null && configuration.disabled) && !hiddenTabs.length
     }, /*#__PURE__*/React.createElement(Icon, {
       component: /*#__PURE__*/React.createElement(OptionHorizontalM, null)
     }))));
@@ -187,11 +202,12 @@ var Tabs = function Tabs(_ref) {
       });
     }));
   }, [items, underscore, block]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, tabs.length > 0 ? /*#__PURE__*/React.createElement(S.TabsContainer, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, tabs.length > 0 || configuration ? /*#__PURE__*/React.createElement(S.TabsContainer, {
     className: "ds-tabs",
     ref: containerRef,
     "data-testid": "tabs-container",
-    block: block
+    block: block,
+    "data-popup-container": true
   }, renderVisibleTabs, renderDropdown()) : null, !block && renderHelpers);
 };
 

package/dist/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-tabs",
-  "version": "0.14.2",
+  "version": "0.14.4",
   "description": "Tabs UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -33,13 +33,14 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.20.0",
-    "@synerise/ds-dropdown": "^0.17.111",
-    "@synerise/ds-icon": "^0.61.0",
-    "@synerise/ds-menu": "^0.18.23",
+    "@synerise/ds-button": "^0.20.1",
+    "@synerise/ds-dropdown": "^0.18.0",
+    "@synerise/ds-icon": "^0.62.0",
+    "@synerise/ds-menu": "^0.19.1",
     "@synerise/ds-typography": "^0.15.0",
-    "@synerise/ds-utils": "^0.26.6",
-    "classnames": "2.3.2"
+    "@synerise/ds-utils": "^0.27.0",
+    "classnames": "2.3.2",
+    "lodash": "4.17.15"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -48,7 +49,8 @@
     "styled-components": "5.0.1"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "5.1.1"
+    "@testing-library/jest-dom": "5.1.1",
+    "@testing-library/react": "10.0.1"
   },
-  "gitHead": "357031f4340eb9a2835f7b0cabffb5b1ad231db8"
+  "gitHead": "81acd8bf6b5fb04a22647e43d2c9289dcceb61a2"
 }