@synerise/ds-tabs 0.17.7 → 0.17.9

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.17.9](https://github.com/synerise/synerise-design/compare/@synerise/ds-tabs@0.17.8...@synerise/ds-tabs@0.17.9) (2024-11-29)
+
+**Note:** Version bump only for package @synerise/ds-tabs
+
+
+
+
+
+## [0.17.8](https://github.com/synerise/synerise-design/compare/@synerise/ds-tabs@0.17.7...@synerise/ds-tabs@0.17.8) (2024-11-28)
+
+**Note:** Version bump only for package @synerise/ds-tabs
+
+
+
+
+
 ## [0.17.7](https://github.com/synerise/synerise-design/compare/@synerise/ds-tabs@0.17.6...@synerise/ds-tabs@0.17.7) (2024-11-21)
 
 **Note:** Version bump only for package @synerise/ds-tabs

package/dist/Tab/Tab.js

@@ -1,56 +1,46 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-
 import React, { useState } from 'react';
 import classNames from 'classnames';
 import Icon from '@synerise/ds-icon';
 import Tooltip from '@synerise/ds-tooltip';
 import * as S from './Tab.styles';
-
 var Tab = function Tab(_ref) {
   var index = _ref.index,
-      label = _ref.label,
-      icon = _ref.icon,
-      isActive = _ref.isActive,
-      disabled = _ref.disabled,
-      onClick = _ref.onClick,
-      forwardedRef = _ref.forwardedRef,
-      underscore = _ref.underscore,
-      className = _ref.className,
-      block = _ref.block,
-      suffixel = _ref.suffixel,
-      tooltip = _ref.tooltip,
-      tooltipProps = _ref.tooltipProps;
-
+    label = _ref.label,
+    icon = _ref.icon,
+    isActive = _ref.isActive,
+    disabled = _ref.disabled,
+    onClick = _ref.onClick,
+    forwardedRef = _ref.forwardedRef,
+    underscore = _ref.underscore,
+    className = _ref.className,
+    block = _ref.block,
+    suffixel = _ref.suffixel,
+    tooltip = _ref.tooltip,
+    tooltipProps = _ref.tooltipProps;
   var _useState = useState(false),
-      isPressed = _useState[0],
-      setPressed = _useState[1];
-
+    isPressed = _useState[0],
+    setPressed = _useState[1];
   var handleClick = function handleClick() {
     onClick(index);
   };
-
   var handleMouseDown = function handleMouseDown() {
     setPressed(true);
   };
-
   var handleMouseUp = function handleMouseUp() {
     setPressed(false);
   };
-
   var containerClasses = classNames(className, {
     underscore: underscore,
     active: isActive,
     pressed: isPressed
   });
-
   var renderSuffixel = function renderSuffixel() {
     if (typeof suffixel === 'string' || typeof suffixel === 'number') {
       return /*#__PURE__*/React.createElement(S.SuffixWrapper, null, suffixel);
     }
-
     return /*#__PURE__*/React.createElement(S.DefaultSuffixWrapper, null, suffixel);
   };
-
   var tabContent = /*#__PURE__*/React.createElement(S.BlockContentWrapper, {
     block: block
   }, /*#__PURE__*/React.createElement(S.TabContent, {
@@ -79,7 +69,6 @@ var Tab = function Tab(_ref) {
     title: tooltip
   }, tooltipProps), tabContent) : tabContent);
 };
-
 Tab.defaultProps = {
   underscore: true
 };

package/dist/Tab/Tab.styles.js

@@ -18,11 +18,9 @@ export var TabContent = styled.div.withConfig({
   displayName: "Tabstyles__TabContent",
   componentId: "sc-8a5swe-2"
 })(["display:flex;flex-direction:row;align-self:center;align-items:center;justify-content:flex-start;height:24px;overflow:hidden;text-overflow:ellipsis;"]);
-
 var applyBlockStyles = function applyBlockStyles(props) {
   return "\n  margin-right: 0;\n  flex: 1;\n  " + TabContent + " {\n    border-left: 5px solid transparent;\n    border-right: 5px solid transparent;\n  }\n  &: after {\n    background-color:" + props.theme.palette['grey-200'] + ";\n    height:1px;\n  }\n  &: hover {\n    &::after {\n      background-color:" + props.theme.palette['grey-300'] + ";\n      height: 1px;\n    }\n  }\n  &:focus:active:not(:hover) {\n  &::after {\n      background-color:" + props.theme.palette['blue-600'] + ";\n      background-image:none;\n      height: 1px;\n    }\n  }\n  &.pressed {\n    && {\n      &::after {\n        height: 1px;\n      }\n    }\n  }\n";
 };
-
 export var TabContainer = styled.button.withConfig({
   displayName: "Tabstyles__TabContainer",
   componentId: "sc-8a5swe-3"

package/dist/Tabs.js

@@ -1,20 +1,12 @@
 var _excluded = ["ref"],
-    _excluded2 = ["ref"];
-
+  _excluded2 = ["ref"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _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; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-
 import React, { useCallback, createRef, useMemo, useState, useRef, useEffect } from 'react';
 import { debounce } from 'lodash';
 import { theme } from '@synerise/ds-core';
@@ -29,48 +21,37 @@ 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,
-      tabs = _ref.tabs,
-      handleTabClick = _ref.handleTabClick,
-      configuration = _ref.configuration,
-      underscore = _ref.underscore,
-      block = _ref.block;
-
+    tabs = _ref.tabs,
+    handleTabClick = _ref.handleTabClick,
+    configuration = _ref.configuration,
+    underscore = _ref.underscore,
+    block = _ref.block;
   var _useState = useState(0),
-      containerWidth = _useState[0],
-      setContainerWidth = _useState[1];
-
+    containerWidth = _useState[0],
+    setContainerWidth = _useState[1];
   var containerRef = useRef(null);
   var helperContainerRef = useRef(null);
-
   var _useResizeObserver = useResizeObserver(containerRef),
-      width = _useResizeObserver.width;
-
+    width = _useResizeObserver.width;
   var _useResizeObserver2 = useResizeObserver(helperContainerRef),
-      helperWidth = _useResizeObserver2.width;
-
+    helperWidth = _useResizeObserver2.width;
   var _useState2 = useState([]),
-      items = _useState2[0],
-      setItems = _useState2[1];
-
+    items = _useState2[0],
+    setItems = _useState2[1];
   var _useState3 = useState([]),
-      itemsWidths = _useState3[0],
-      setItemsWidths = _useState3[1];
-
+    itemsWidths = _useState3[0],
+    setItemsWidths = _useState3[1];
   var _useState4 = useState([]),
-      visibleTabs = _useState4[0],
-      setVisibleTabs = _useState4[1];
-
+    visibleTabs = _useState4[0],
+    setVisibleTabs = _useState4[1];
   var _useState5 = useState(false),
-      isDropdownVisible = _useState5[0],
-      setIsDropdownVisible = _useState5[1];
-
+    isDropdownVisible = _useState5[0],
+    setIsDropdownVisible = _useState5[1];
   var _useState6 = useState([]),
-      hiddenTabs = _useState6[0],
-      setHiddenTabs = _useState6[1];
-
+    hiddenTabs = _useState6[0],
+    setHiddenTabs = _useState6[1];
   var debouncedEventHandler = useMemo(function () {
     return debounce(function (newWidth) {
       return setContainerWidth(newWidth);
@@ -81,8 +62,8 @@ var Tabs = function Tabs(_ref) {
   }, [width, debouncedEventHandler]);
   useEffect(function () {
     var _containerRef$current;
-
-    containerRef.current && setContainerWidth((_containerRef$current = containerRef.current) == null ? void 0 : _containerRef$current.offsetWidth); // eslint-disable-next-line react-hooks/exhaustive-deps
+    containerRef.current && setContainerWidth((_containerRef$current = containerRef.current) == null ? void 0 : _containerRef$current.offsetWidth);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [containerRef.current]);
   useEffect(function () {
     var newTabs = tabs.map(function (tab) {
@@ -119,13 +100,12 @@ var Tabs = function Tabs(_ref) {
         } else {
           hiddenItems.push(items[index]);
         }
-
         tabsWidth += itemWidth;
       });
       setVisibleTabs(visibleItems);
       setHiddenTabs(hiddenItems);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [block, itemsWidths, containerWidth]);
   var handleConfigurationAction = useCallback(function () {
     configuration && configuration.action();
@@ -135,25 +115,30 @@ var Tabs = function Tabs(_ref) {
     setIsDropdownVisible(false);
     handleTabClick(index);
   }, [handleTabClick]);
+  var dropdownMenuItems = hiddenTabs.map(function (item, index) {
+    return {
+      key: item.label + "-dropdown-" + index,
+      onClick: function onClick() {
+        return handleHiddenTabClick(visibleTabs.length + index);
+      },
+      disabled: item.disabled,
+      text: item.label
+    };
+  });
   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) {
-      return /*#__PURE__*/React.createElement(S.DropdownMenuItem, {
-        // eslint-disable-next-line react/no-array-index-key
-        key: item.label + "-dropdown-" + index,
-        onClick: function onClick() {
-          return handleHiddenTabClick(visibleTabs.length + index);
-        },
-        disabled: item.disabled
-      }, item.label);
-    })), hiddenTabs.length > 0 && configuration && /*#__PURE__*/React.createElement(S.TabsDropdownDivider, null), configuration && /*#__PURE__*/React.createElement(S.DropdownMenu, null, /*#__PURE__*/React.createElement(S.DropdownMenuItem, {
-      key: "configuration-btn",
-      onClick: handleConfigurationAction,
-      disabled: !!(configuration != null && configuration.disabled)
-    }, configuration.label)));
-  }, [hiddenTabs, configuration, handleConfigurationAction, handleHiddenTabClick, visibleTabs.length]);
-
+    }, hiddenTabs.length > 0 && /*#__PURE__*/React.createElement(S.DropdownMenu, {
+      dataSource: dropdownMenuItems
+    }), hiddenTabs.length > 0 && configuration && /*#__PURE__*/React.createElement(S.TabsDropdownDivider, null), configuration && /*#__PURE__*/React.createElement(S.DropdownMenu, {
+      dataSource: [{
+        key: 'configuration-btn',
+        onClick: handleConfigurationAction,
+        disabled: !!(configuration != null && configuration.disabled),
+        text: configuration.label
+      }]
+    }));
+  }, [hiddenTabs.length, dropdownMenuItems, configuration, handleConfigurationAction]);
   var renderDropdown = function renderDropdown() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, (hiddenTabs.length || configuration) && /*#__PURE__*/React.createElement(Dropdown, {
       trigger: ['click'],
@@ -172,16 +157,13 @@ var Tabs = function Tabs(_ref) {
       component: /*#__PURE__*/React.createElement(OptionHorizontalM, null)
     }))));
   };
-
   var renderVisibleTabs = useMemo(function () {
     return /*#__PURE__*/React.createElement(React.Fragment, null, visibleTabs.filter(function (tab) {
       return Boolean(tab);
     }).map(function (tab, index) {
       var key = "tabs-tab-" + index;
-
       var ref = tab.ref,
-          tabProps = _objectWithoutPropertiesLoose(tab, _excluded);
-
+        tabProps = _objectWithoutPropertiesLoose(tab, _excluded);
       return /*#__PURE__*/React.createElement(Tab, _extends({
         underscore: underscore,
         forwardedRef: ref,
@@ -200,10 +182,8 @@ var Tabs = function Tabs(_ref) {
       className: "ds-hidden-helper"
     }, items.map(function (tab, index) {
       var key = "tabs-tab-helper-" + index;
-
       var ref = tab.ref,
-          tabProps = _objectWithoutPropertiesLoose(tab, _excluded2);
-
+        tabProps = _objectWithoutPropertiesLoose(tab, _excluded2);
       return /*#__PURE__*/React.createElement(Tab, _extends({
         className: "hidden",
         underscore: underscore,
@@ -223,7 +203,6 @@ var Tabs = function Tabs(_ref) {
     "data-popup-container": true
   }, renderVisibleTabs, renderDropdown()) : null, !block && renderHelpers);
 };
-
 Tabs.defaultProps = {
   underscore: true
 };

package/dist/Tabs.styles.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import Button from '@synerise/ds-button';
-import Menu, { MenuItemProps } from '@synerise/ds-menu';
+import Menu from '@synerise/ds-menu';
 export declare const TabsContainer: import("styled-components").StyledComponent<"div", any, {
     block?: boolean | undefined;
 }, never>;
@@ -30,7 +30,7 @@ export declare const ShowHiddenTabsTrigger: import("styled-components").StyledCo
 }, never>;
 export declare const HiddenTabs: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DropdownMenu: import("styled-components").StyledComponent<typeof Menu, any, Omit<import("antd/lib/menu").MenuProps, "footer" | "dataSource"> & {
-    dataSource?: MenuItemProps[] | undefined;
+    dataSource?: import("@synerise/ds-menu").MenuItemProps[] | undefined;
     ordered?: boolean | undefined;
     asDropdownMenu?: boolean | undefined;
     showTextTooltip?: boolean | undefined;
@@ -38,4 +38,3 @@ export declare const DropdownMenu: import("styled-components").StyledComponent<t
     maxToShowItems?: number | undefined;
     texts?: Partial<import("@synerise/ds-menu").MenuTexts> | undefined;
 }, never>;
-export declare const DropdownMenuItem: import("styled-components").StyledComponent<import("react").FC<import("@synerise/ds-menu/dist/Elements/SubMenu/SubMenu.types").SubMenuProps & MenuItemProps>, any, MenuItemProps, never>;

package/dist/Tabs.styles.js

@@ -35,8 +35,4 @@ export var HiddenTabs = styled.div.withConfig({
 export var DropdownMenu = styled(Menu).withConfig({
   displayName: "Tabsstyles__DropdownMenu",
   componentId: "sc-16x3i3b-5"
-})([""]);
-export var DropdownMenuItem = styled(Menu.Item).withConfig({
-  displayName: "Tabsstyles__DropdownMenuItem",
-  componentId: "sc-16x3i3b-6"
-})(["&&&{border:none;}"]);
+})([""]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-tabs",
-  "version": "0.17.7",
+  "version": "0.17.9",
   "description": "Tabs UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -34,11 +34,11 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.21.19",
-    "@synerise/ds-dropdown": "^0.18.24",
-    "@synerise/ds-icon": "^0.67.0",
-    "@synerise/ds-menu": "^0.20.6",
-    "@synerise/ds-typography": "^0.16.6",
+    "@synerise/ds-button": "^0.21.21",
+    "@synerise/ds-dropdown": "^0.18.26",
+    "@synerise/ds-icon": "^0.68.0",
+    "@synerise/ds-menu": "^0.20.8",
+    "@synerise/ds-typography": "^0.16.8",
     "@synerise/ds-utils": "^0.31.2",
     "classnames": "2.3.2",
     "lodash": "^4.17.21"
@@ -49,5 +49,5 @@
     "react": ">=16.9.0 <= 17.0.2",
     "styled-components": "5.0.1"
   },
-  "gitHead": "05f083c767e2cec3c2f91c9475aee89852a77d6c"
+  "gitHead": "9ebd107163650754a5f55680d62d30812d740084"
 }