@synerise/ds-tabs 1.1.23 → 1.1.24

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.24](https://github.com/synerise/synerise-design/compare/@synerise/ds-tabs@1.1.23...@synerise/ds-tabs@1.1.24) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-tabs
+
 ## [1.1.23](https://github.com/synerise/synerise-design/compare/@synerise/ds-tabs@1.1.22...@synerise/ds-tabs@1.1.23) (2026-03-20)
 
 **Note:** Version bump only for package @synerise/ds-tabs

package/dist/Tab/Tab.d.ts

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

package/dist/Tab/Tab.js

@@ -1,75 +1,55 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import classNames from 'classnames';
-import React, { useState } from 'react';
-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;
-  var _useState = useState(false),
-    isPressed = _useState[0],
-    setPressed = _useState[1];
-  var handleClick = function handleClick() {
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useState } from "react";
+import Icon from "@synerise/ds-icon";
+import Tooltip from "@synerise/ds-tooltip";
+import { TabContainer, BlockContentWrapper, TabContent, TabLabel, SuffixWrapper, DefaultSuffixWrapper } from "./Tab.styles.js";
+const Tab = ({
+  index,
+  label,
+  icon,
+  isActive,
+  disabled,
+  onClick,
+  forwardedRef,
+  underscore,
+  className,
+  block,
+  suffixel,
+  tooltip,
+  tooltipProps
+}) => {
+  const [isPressed, setPressed] = useState(false);
+  const handleClick = () => {
     onClick(index);
   };
-  var handleMouseDown = function handleMouseDown() {
+  const handleMouseDown = () => {
     setPressed(true);
   };
-  var handleMouseUp = function handleMouseUp() {
+  const handleMouseUp = () => {
     setPressed(false);
   };
-  var containerClasses = classNames(className, {
-    underscore: underscore,
+  const containerClasses = classNames(className, {
+    underscore,
     active: isActive,
     pressed: isPressed
   });
-  var renderSuffixel = function renderSuffixel() {
-    if (typeof suffixel === 'string' || typeof suffixel === 'number') {
-      return /*#__PURE__*/React.createElement(S.SuffixWrapper, null, suffixel);
+  const renderSuffixel = () => {
+    if (typeof suffixel === "string" || typeof suffixel === "number") {
+      return /* @__PURE__ */ jsx(SuffixWrapper, { children: suffixel });
     }
-    return /*#__PURE__*/React.createElement(S.DefaultSuffixWrapper, null, suffixel);
+    return /* @__PURE__ */ jsx(DefaultSuffixWrapper, { children: suffixel });
   };
-  var tabContent = /*#__PURE__*/React.createElement(S.BlockContentWrapper, {
-    block: block
-  }, /*#__PURE__*/React.createElement(S.TabContent, {
-    className: "tab-content",
-    "data-testid": "ds-tabs-tab-content"
-  }, icon && /*#__PURE__*/React.createElement(Icon, {
-    "data-testid": "ds-tabs-tab-icon",
-    component: icon,
-    size: 24
-  }), label && /*#__PURE__*/React.createElement(S.TabLabel, {
-    "data-testid": "ds-tabs-tab-label"
-  }, label), !!suffixel && renderSuffixel()));
-  return /*#__PURE__*/React.createElement(S.TabContainer, {
-    className: containerClasses,
-    onClick: handleClick,
-    onMouseDown: handleMouseDown,
-    onMouseUp: handleMouseUp,
-    onMouseOut: handleMouseUp,
-    onBlur: handleMouseUp,
-    disabled: disabled,
-    ref: forwardedRef,
-    type: "button",
-    "data-testid": "tab-container",
-    block: block
-  }, tooltip ? /*#__PURE__*/React.createElement(Tooltip, _extends({
-    title: tooltip
-  }, tooltipProps), tabContent) : tabContent);
+  const tabContent = /* @__PURE__ */ jsx(BlockContentWrapper, { block, children: /* @__PURE__ */ jsxs(TabContent, { className: "tab-content", "data-testid": "ds-tabs-tab-content", children: [
+    icon && /* @__PURE__ */ jsx(Icon, { "data-testid": "ds-tabs-tab-icon", component: icon, size: 24 }),
+    label && /* @__PURE__ */ jsx(TabLabel, { "data-testid": "ds-tabs-tab-label", children: label }),
+    !!suffixel && renderSuffixel()
+  ] }) });
+  return /* @__PURE__ */ jsx(TabContainer, { className: containerClasses, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseOut: handleMouseUp, onBlur: handleMouseUp, disabled, ref: forwardedRef, type: "button", "data-testid": "tab-container", block, children: tooltip ? /* @__PURE__ */ jsx(Tooltip, { title: tooltip, ...tooltipProps, children: tabContent }) : tabContent });
 };
 Tab.defaultProps = {
   underscore: true
 };
-export default Tab;
+export {
+  Tab as default
+};

package/dist/Tab/Tab.styles.d.ts

@@ -1,10 +1,10 @@
-export declare const TabLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const BlockContentWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const TabLabel: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const BlockContentWrapper: import('styled-components').StyledComponent<"div", any, {
     block?: boolean;
 }, never>;
-export declare const TabContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TabContainer: import("styled-components").StyledComponent<"button", any, {
+export declare const TabContent: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const TabContainer: import('styled-components').StyledComponent<"button", any, {
     block?: boolean;
 }, never>;
-export declare const SuffixWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DefaultSuffixWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SuffixWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const DefaultSuffixWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/Tab/Tab.styles.js

@@ -1,109 +1,124 @@
-import styled from 'styled-components';
-import { IconContainer } from '@synerise/ds-icon';
-import { macro } from '@synerise/ds-typography';
-export var TabLabel = styled.span.withConfig({
+import styled from "styled-components";
+import { IconContainer } from "@synerise/ds-icon";
+import { macro } from "@synerise/ds-typography";
+const TabLabel = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Tabstyles__TabLabel",
   componentId: "sc-8a5swe-0"
-})(["", " line-height:20px;white-space:nowrap;color:", ";"], macro.h300, function (_ref) {
-  var theme = _ref.theme;
-  return theme.palette['grey-700'];
-});
-export var BlockContentWrapper = styled.div.withConfig({
+})(["", " line-height:20px;white-space:nowrap;color:", ";"], macro.h300, ({
+  theme
+}) => theme.palette["grey-700"]);
+const BlockContentWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Tabstyles__BlockContentWrapper",
   componentId: "sc-8a5swe-1"
-})(["", ""], function (props) {
-  return props.block ? "display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  width: 100%;\n  left: 0;\n  top: 0;\n  " : "";
-});
-export var TabContent = styled.div.withConfig({
+})(["", ""], (props) => props.block ? `display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 0;
+  ` : ``);
+const TabContent = /* @__PURE__ */ 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({
+const applyBlockStyles = (props) => `
+  margin-right: 0;
+  flex: 1;
+  ${TabContent} {
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+  }
+  &: after {
+    background-color:${props.theme.palette["grey-200"]};
+    height:1px;
+  }
+  &: hover {
+    &::after {
+      background-color:${props.theme.palette["grey-300"]};
+      height: 1px;
+    }
+  }
+  &:focus:active:not(:hover) {
+  &::after {
+      background-color:${props.theme.palette["blue-600"]};
+      background-image:none;
+      height: 1px;
+    }
+  }
+  &.pressed {
+    && {
+      &::after {
+        height: 1px;
+      }
+    }
+  }
+`;
+const TabContainer = /* @__PURE__ */ styled.button.withConfig({
   displayName: "Tabstyles__TabContainer",
   componentId: "sc-8a5swe-3"
-})(["display:flex;height:34px;flex-direction:column;align-items:flex-start;justify-content:center;margin-right:24px;cursor:pointer;box-sizing:content-box;user-select:none;position:relative;background-color:transparent;background-image:none;border:0;outline:0;padding:0;pointer-events:", ";opacity:", ";margin-top:4px;", "{margin-right:4px;}&::after{content:'';display:flex;position:absolute;transition:background-color 0.15s ease-in-out;bottom:0;left:1px;width:100%;height:1px;background-color:transparent;background-image:none;}&:hover{", "{color:", ";}&:focus:active{", "{color:", ";}}svg{color:", ";fill:", ";}&::after{height:0;}}svg{color:", ";fill:", ";}&:focus{", "{color:", ";}svg{color:", ";fill:", ";}&:active{", "{color:", ";}svg{color:", ";fill:", ";}}&::after{height:1px;background-color:transparent;background-image:linear-gradient( to right,", " 66%,", " 34% );background-position:top;background-size:5px 1px;background-repeat:repeat-x;}}", "{color:", ";}&.active{svg{color:", ";fill:", ";}", "{color:", ";}&&{&.underscore::after{height:1px;background-color:", ";background-image:none;}}&::after{background-color:transparent;background-image:none;}}&.pressed{svg{color:", ";fill:", ";}", "{color:", ";}&&{&::after{height:0;}}&::after{background-color:transparent;background-image:none;}}", ""], function (_ref2) {
-  var disabled = _ref2.disabled;
-  return disabled ? 'none' : 'all';
-}, function (_ref3) {
-  var disabled = _ref3.disabled;
-  return disabled ? '0.4' : '1';
-}, IconContainer, TabLabel, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.palette['grey-800'];
-}, TabLabel, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.palette['blue-700'];
-}, function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.palette['grey-800'];
-}, function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.palette['grey-800'];
-}, function (_ref8) {
-  var theme = _ref8.theme;
-  return theme.palette['grey-600'];
-}, function (_ref9) {
-  var theme = _ref9.theme;
-  return theme.palette['grey-600'];
-}, TabLabel, function (_ref0) {
-  var theme = _ref0.theme;
-  return theme.palette['blue-500'];
-}, function (_ref1) {
-  var theme = _ref1.theme;
-  return theme.palette['blue-500'];
-}, function (_ref10) {
-  var theme = _ref10.theme;
-  return theme.palette['blue-500'];
-}, TabLabel, function (_ref11) {
-  var theme = _ref11.theme;
-  return theme.palette['blue-600'];
-}, function (_ref12) {
-  var theme = _ref12.theme;
-  return theme.palette['blue-600'];
-}, function (_ref13) {
-  var theme = _ref13.theme;
-  return theme.palette['blue-600'];
-}, function (_ref14) {
-  var theme = _ref14.theme;
-  return theme.palette.white;
-}, function (_ref15) {
-  var theme = _ref15.theme;
-  return theme.palette['blue-600'];
-}, TabLabel, function (_ref16) {
-  var theme = _ref16.theme;
-  return theme.palette['grey-700'];
-}, function (_ref17) {
-  var theme = _ref17.theme;
-  return theme.palette['blue-600'];
-}, function (_ref18) {
-  var theme = _ref18.theme;
-  return theme.palette['blue-600'];
-}, TabLabel, function (_ref19) {
-  var theme = _ref19.theme;
-  return theme.palette['blue-600'];
-}, function (_ref20) {
-  var theme = _ref20.theme;
-  return theme.palette['blue-600'];
-}, function (_ref21) {
-  var theme = _ref21.theme;
-  return theme.palette['blue-700'];
-}, function (_ref22) {
-  var theme = _ref22.theme;
-  return theme.palette['blue-700'];
-}, TabLabel, function (_ref23) {
-  var theme = _ref23.theme;
-  return theme.palette['blue-700'];
-}, function (props) {
-  return !!props.block && applyBlockStyles(props);
-});
-export var SuffixWrapper = styled.div.withConfig({
+})(["display:flex;height:34px;flex-direction:column;align-items:flex-start;justify-content:center;margin-right:24px;cursor:pointer;box-sizing:content-box;user-select:none;position:relative;background-color:transparent;background-image:none;border:0;outline:0;padding:0;pointer-events:", ";opacity:", ";margin-top:4px;", "{margin-right:4px;}&::after{content:'';display:flex;position:absolute;transition:background-color 0.15s ease-in-out;bottom:0;left:1px;width:100%;height:1px;background-color:transparent;background-image:none;}&:hover{", "{color:", ";}&:focus:active{", "{color:", ";}}svg{color:", ";fill:", ";}&::after{height:0;}}svg{color:", ";fill:", ";}&:focus{", "{color:", ";}svg{color:", ";fill:", ";}&:active{", "{color:", ";}svg{color:", ";fill:", ";}}&::after{height:1px;background-color:transparent;background-image:linear-gradient( to right,", " 66%,", " 34% );background-position:top;background-size:5px 1px;background-repeat:repeat-x;}}", "{color:", ";}&.active{svg{color:", ";fill:", ";}", "{color:", ";}&&{&.underscore::after{height:1px;background-color:", ";background-image:none;}}&::after{background-color:transparent;background-image:none;}}&.pressed{svg{color:", ";fill:", ";}", "{color:", ";}&&{&::after{height:0;}}&::after{background-color:transparent;background-image:none;}}", ""], ({
+  disabled
+}) => disabled ? "none" : "all", ({
+  disabled
+}) => disabled ? "0.4" : "1", IconContainer, TabLabel, ({
+  theme
+}) => theme.palette["grey-800"], TabLabel, ({
+  theme
+}) => theme.palette["blue-700"], ({
+  theme
+}) => theme.palette["grey-800"], ({
+  theme
+}) => theme.palette["grey-800"], ({
+  theme
+}) => theme.palette["grey-600"], ({
+  theme
+}) => theme.palette["grey-600"], TabLabel, ({
+  theme
+}) => theme.palette["blue-500"], ({
+  theme
+}) => theme.palette["blue-500"], ({
+  theme
+}) => theme.palette["blue-500"], TabLabel, ({
+  theme
+}) => theme.palette["blue-600"], ({
+  theme
+}) => theme.palette["blue-600"], ({
+  theme
+}) => theme.palette["blue-600"], ({
+  theme
+}) => theme.palette.white, ({
+  theme
+}) => theme.palette["blue-600"], TabLabel, ({
+  theme
+}) => theme.palette["grey-700"], ({
+  theme
+}) => theme.palette["blue-600"], ({
+  theme
+}) => theme.palette["blue-600"], TabLabel, ({
+  theme
+}) => theme.palette["blue-600"], ({
+  theme
+}) => theme.palette["blue-600"], ({
+  theme
+}) => theme.palette["blue-700"], ({
+  theme
+}) => theme.palette["blue-700"], TabLabel, ({
+  theme
+}) => theme.palette["blue-700"], (props) => !!props.block && applyBlockStyles(props));
+const SuffixWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Tabstyles__SuffixWrapper",
   componentId: "sc-8a5swe-4"
 })([""]);
-export var DefaultSuffixWrapper = styled.div.withConfig({
+const DefaultSuffixWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Tabstyles__DefaultSuffixWrapper",
   componentId: "sc-8a5swe-5"
-})(["font-size:13px;line-height:10px;text-align:center;&& .ant-badge-count{padding:0 0 0 3px;}"]);
+})(["font-size:13px;line-height:10px;text-align:center;&& .ant-badge-count{padding:0 0 0 3px;}"]);
+export {
+  BlockContentWrapper,
+  DefaultSuffixWrapper,
+  SuffixWrapper,
+  TabContainer,
+  TabContent,
+  TabLabel
+};

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

@@ -1,5 +1,5 @@
-import type { RefObject } from 'react';
-import type { TabItem } from '../Tabs.types';
+import { RefObject } from 'react';
+import { TabItem } from '../Tabs.types';
 export type TabProps = TabItem & {
     index: number;
     underscore?: boolean;

package/dist/Tab/Tab.types.js

@@ -1 +1 @@
-export {};
+

package/dist/Tabs.d.ts

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

package/dist/Tabs.js

@@ -1,94 +1,77 @@
-var _excluded = ["ref"],
-  _excluded2 = ["ref"];
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import debounce from 'lodash.debounce';
-import React, { createRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { theme } from '@synerise/ds-core';
-import { DropdownMenu } from '@synerise/ds-dropdown';
-import Icon, { OptionHorizontalM } from '@synerise/ds-icon';
-import { NOOP, useResizeObserver } from '@synerise/ds-utils';
-import Tab from './Tab/Tab';
-import * as S from './Tabs.styles';
-var MARGIN_BETWEEN_TABS = 24;
-var DROPDOWN_TRIGGER_SIZE = 32;
-var DROPDOWN_OVERLAY_STYLE = {
-  zIndex: parseInt(theme.variables['zindex-modal'], 10) - 1
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import debounce from "lodash.debounce";
+import { useState, useRef, useMemo, useEffect, createRef, useCallback } from "react";
+import { theme } from "@synerise/ds-core";
+import { DropdownMenu } from "@synerise/ds-dropdown";
+import Icon, { OptionHorizontalM } from "@synerise/ds-icon";
+import { useResizeObserver, NOOP } from "@synerise/ds-utils";
+import Tab from "./Tab/Tab.js";
+import { HiddenTabs, TabsContainer, ShowHiddenTabsTrigger } from "./Tabs.styles.js";
+const MARGIN_BETWEEN_TABS = 24;
+const DROPDOWN_TRIGGER_SIZE = 32;
+const DROPDOWN_OVERLAY_STYLE = {
+  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;
-  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(false),
-    isDropdownVisible = _useState5[0],
-    setIsDropdownVisible = _useState5[1];
-  var _useState6 = useState([]),
-    hiddenTabs = _useState6[0],
-    setHiddenTabs = _useState6[1];
-  var debouncedEventHandler = useMemo(function () {
-    return debounce(function (newWidth) {
-      return setContainerWidth(newWidth);
-    }, 200);
-  }, []);
-  useEffect(function () {
+const Tabs = ({
+  activeTab,
+  tabs,
+  handleTabClick,
+  configuration,
+  underscore,
+  block
+}) => {
+  const [containerWidth, setContainerWidth] = useState(0);
+  const containerRef = useRef(null);
+  const helperContainerRef = useRef(null);
+  const {
+    width
+  } = useResizeObserver(containerRef);
+  const {
+    width: helperWidth
+  } = useResizeObserver(helperContainerRef);
+  const [items, setItems] = useState([]);
+  const [itemsWidths, setItemsWidths] = useState([]);
+  const [visibleTabs, setVisibleTabs] = useState([]);
+  const [isDropdownVisible, setIsDropdownVisible] = useState(false);
+  const [hiddenTabs, setHiddenTabs] = useState([]);
+  const debouncedEventHandler = useMemo(() => debounce((newWidth) => setContainerWidth(newWidth), 200), []);
+  useEffect(() => {
     debouncedEventHandler(width);
   }, [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
+  useEffect(() => {
+    containerRef.current && setContainerWidth(containerRef.current?.offsetWidth);
   }, [containerRef.current]);
-  useEffect(function () {
-    var newTabs = tabs.map(function (tab) {
-      return _extends({}, tab, {
-        ref: /*#__PURE__*/createRef()
-      });
+  useEffect(() => {
+    const newTabs = tabs.map((tab) => {
+      return {
+        ...tab,
+        ref: createRef()
+      };
     });
     setItems(newTabs);
   }, [tabs]);
-  var widthsAreNonZero = containerWidth > 0 && helperWidth > 0;
-  useEffect(function () {
+  const widthsAreNonZero = containerWidth > 0 && helperWidth > 0;
+  useEffect(() => {
     if (widthsAreNonZero) {
-      var itemsWithWidths = [];
-      items.forEach(function (item, index) {
+      const itemsWithWidths = [];
+      items.forEach((item, index) => {
         itemsWithWidths[index] = item.ref.current !== null ? item.ref.current.offsetWidth + MARGIN_BETWEEN_TABS : 0;
       });
       setItemsWidths(itemsWithWidths);
     }
   }, [items, widthsAreNonZero]);
-  useEffect(function () {
+  useEffect(() => {
     if (block) {
       setVisibleTabs(items);
       setHiddenTabs([]);
     }
   }, [items, block]);
-  useEffect(function () {
+  useEffect(() => {
     if (!block) {
-      var tabsWidth = DROPDOWN_TRIGGER_SIZE + MARGIN_BETWEEN_TABS;
-      var visibleItems = [];
-      var hiddenItems = [];
-      itemsWidths.forEach(function (itemWidth, index) {
+      let tabsWidth = DROPDOWN_TRIGGER_SIZE + MARGIN_BETWEEN_TABS;
+      const visibleItems = [];
+      const hiddenItems = [];
+      itemsWidths.forEach((itemWidth, index) => {
         if (containerRef && tabsWidth + itemWidth < containerWidth) {
           visibleItems.push(items[index]);
         } else {
@@ -99,118 +82,81 @@ var Tabs = function Tabs(_ref) {
       setVisibleTabs(visibleItems);
       setHiddenTabs(hiddenItems);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [block, itemsWidths, containerWidth]);
-  var handleConfigurationAction = useCallback(function () {
+  const handleConfigurationAction = useCallback(() => {
     configuration && configuration.action();
     setIsDropdownVisible(false);
   }, [configuration]);
-  var handleHiddenTabClick = useCallback(function (index) {
+  const handleHiddenTabClick = useCallback((index) => {
     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 hiddenTabsItems = useMemo(function () {
-    var temp = hiddenTabs.length > 0 ? [].concat(dropdownMenuItems) : [];
+  const dropdownMenuItems = hiddenTabs.map((item, index) => ({
+    key: `${item.label}-dropdown-${index}`,
+    onClick: () => handleHiddenTabClick(visibleTabs.length + index),
+    disabled: item.disabled,
+    text: item.label
+  }));
+  const hiddenTabsItems = useMemo(() => {
+    const temp = hiddenTabs.length > 0 ? [...dropdownMenuItems] : [];
     if (hiddenTabs.length > 0 && configuration) {
       temp.push({
-        type: 'divider'
+        type: "divider"
       });
     }
     if (configuration) {
       temp.push({
-        key: 'configuration-btn',
+        key: "configuration-btn",
         onClick: handleConfigurationAction,
-        disabled: !!(configuration != null && configuration.disabled),
+        disabled: !!configuration?.disabled,
         text: configuration.label
       });
     }
     return temp;
   }, [hiddenTabs.length, dropdownMenuItems, configuration, handleConfigurationAction]);
-  var renderDropdown = function renderDropdown() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, (hiddenTabs.length || configuration) && /*#__PURE__*/React.createElement(DropdownMenu, {
-      trigger: "click",
-      dataSource: hiddenTabsItems,
-      open: isDropdownVisible,
-      onOpenChange: setIsDropdownVisible,
-      disabled: !!(configuration != null && configuration.disabled) && !hiddenTabs.length,
-      overlayStyle: DROPDOWN_OVERLAY_STYLE,
-      placement: "bottomLeft",
-      popoverProps: {
-        testId: 'tabs-hidden',
-        autoUpdate: {
-          ancestorScroll: true,
-          ancestorResize: true,
-          elementResize: true,
-          layoutShift: true,
-          animationFrame: true
-        }
+  const renderDropdown = () => {
+    return /* @__PURE__ */ jsx(Fragment, { children: (hiddenTabs.length || configuration) && /* @__PURE__ */ jsx(DropdownMenu, { trigger: "click", dataSource: hiddenTabsItems, open: isDropdownVisible, onOpenChange: setIsDropdownVisible, disabled: !!configuration?.disabled && !hiddenTabs.length, overlayStyle: DROPDOWN_OVERLAY_STYLE, placement: "bottomLeft", popoverProps: {
+      testId: "tabs-hidden",
+      autoUpdate: {
+        ancestorScroll: true,
+        ancestorResize: true,
+        elementResize: true,
+        layoutShift: true,
+        animationFrame: true
       }
-    }, /*#__PURE__*/React.createElement(S.ShowHiddenTabsTrigger, {
-      "data-testid": "tabs-dropdown-trigger",
-      type: "ghost",
-      mode: "single-icon",
-      disabled: !!(configuration != null && configuration.disabled) && !hiddenTabs.length
-    }, /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(OptionHorizontalM, null)
-    }))));
+    }, children: /* @__PURE__ */ jsx(ShowHiddenTabsTrigger, { "data-testid": "tabs-dropdown-trigger", type: "ghost", mode: "single-icon", disabled: !!configuration?.disabled && !hiddenTabs.length, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(OptionHorizontalM, {}) }) }) }) });
   };
-  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);
-      return /*#__PURE__*/React.createElement(Tab, _extends({
-        underscore: underscore,
-        forwardedRef: ref,
-        key: key,
-        index: index,
-        block: block,
-        onClick: handleTabClick,
-        isActive: index === activeTab
-      }, tabProps));
-    }));
+  const renderVisibleTabs = useMemo(() => {
+    return /* @__PURE__ */ jsx(Fragment, { children: visibleTabs.filter((tab) => Boolean(tab)).map((tab, index) => {
+      const key = `tabs-tab-${index}`;
+      const {
+        ref,
+        ...tabProps
+      } = tab;
+      return /* @__PURE__ */ jsx(Tab, { underscore, forwardedRef: ref, index, block, onClick: handleTabClick, isActive: index === activeTab, ...tabProps }, key);
+    }) });
   }, [visibleTabs, activeTab, handleTabClick, underscore, block]);
-  var renderHelpers = useMemo(function () {
-    return /*#__PURE__*/React.createElement(S.HiddenTabs, {
-      ref: helperContainerRef,
-      "data-testid": "ds-tabs-hidden-helper",
-      className: "ds-hidden-helper"
-    }, items.map(function (tab, index) {
-      var key = "tabs-tab-helper-" + index;
-      var ref = tab.ref,
-        tabProps = _objectWithoutPropertiesLoose(tab, _excluded2);
-      return /*#__PURE__*/React.createElement(Tab, _extends({
-        className: "hidden",
-        underscore: underscore,
-        forwardedRef: ref,
-        key: key,
-        index: index,
-        onClick: NOOP,
-        block: block
-      }, tabProps));
-    }));
+  const renderHelpers = useMemo(() => {
+    return /* @__PURE__ */ jsx(HiddenTabs, { ref: helperContainerRef, "data-testid": "ds-tabs-hidden-helper", className: "ds-hidden-helper", children: items.map((tab, index) => {
+      const key = `tabs-tab-helper-${index}`;
+      const {
+        ref,
+        ...tabProps
+      } = tab;
+      return /* @__PURE__ */ jsx(Tab, { className: "hidden", underscore, forwardedRef: ref, index, onClick: NOOP, block, ...tabProps }, key);
+    }) });
   }, [items, underscore, block]);
-  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,
-    "data-popup-container": true
-  }, renderVisibleTabs, renderDropdown()) : null, !block && renderHelpers);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    tabs.length > 0 || configuration ? /* @__PURE__ */ jsxs(TabsContainer, { className: "ds-tabs", ref: containerRef, "data-testid": "tabs-container", block, "data-popup-container": true, children: [
+      renderVisibleTabs,
+      renderDropdown()
+    ] }) : null,
+    !block && renderHelpers
+  ] });
 };
 Tabs.defaultProps = {
   underscore: true
 };
-export default Tabs;
+export {
+  Tabs as default
+};

package/dist/Tabs.styles.d.ts

@@ -1,10 +1,10 @@
-import { type StyledButton } from '@synerise/ds-button';
-import Menu, { type AntdMenuProps } from '@synerise/ds-menu';
-export declare const TabsContainer: import("styled-components").StyledComponent<"div", any, {
+import { StyledButton } from '@synerise/ds-button';
+import { default as Menu, AntdMenuProps } from '@synerise/ds-menu';
+export declare const TabsContainer: import('styled-components').StyledComponent<"div", any, {
     block?: boolean;
 }, never>;
-export declare const TabsDropdownContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TabsDropdownDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TabsDropdownContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const TabsDropdownDivider: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const ShowHiddenTabsTrigger: StyledButton;
-export declare const HiddenTabs: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DropdownMenu: import("styled-components").StyledComponent<typeof Menu, any, AntdMenuProps, never>;
+export declare const HiddenTabs: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const DropdownMenu: import('styled-components').StyledComponent<typeof Menu, any, AntdMenuProps, never>;

package/dist/Tabs.styles.js

@@ -1,38 +1,41 @@
-import styled from 'styled-components';
-import Button from '@synerise/ds-button';
-import Menu from '@synerise/ds-menu';
-export var TabsContainer = styled.div.withConfig({
+import styled from "styled-components";
+import Button from "@synerise/ds-button";
+import Menu from "@synerise/ds-menu";
+const TabsContainer = /* @__PURE__ */ 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;height:43px;"], function (props) {
-  return props.block ? "center" : "flex-end";
-});
-export var TabsDropdownContainer = styled.div.withConfig({
+})(["padding-top:5px;display:flex;flex-direction:row;align-items:", ";justify-content:flex-start;max-width:100%;overflow-x:hidden;margin-bottom:-1px;height:43px;"], (props) => props.block ? `center` : `flex-end`);
+const TabsDropdownContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Tabsstyles__TabsDropdownContainer",
   componentId: "sc-16x3i3b-1"
-})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:", ";opacity:1;padding:8px;"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.palette.white;
-});
-export var TabsDropdownDivider = styled.div.withConfig({
+})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:", ";opacity:1;padding:8px;"], ({
+  theme
+}) => theme.palette.white);
+const TabsDropdownDivider = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Tabsstyles__TabsDropdownDivider",
   componentId: "sc-16x3i3b-2"
-})(["margin:7.5px 0;height:1px;width:100%;box-sizing:content-box;background-image:linear-gradient( to right,", " 66%,", " 34% );background-position:top;background-size:5px 1px;background-repeat:repeat-x;"], function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.palette.white;
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.palette['grey-300'];
-});
-export var ShowHiddenTabsTrigger = styled(Button).withConfig({
+})(["margin:7.5px 0;height:1px;width:100%;box-sizing:content-box;background-image:linear-gradient( to right,", " 66%,", " 34% );background-position:top;background-size:5px 1px;background-repeat:repeat-x;"], ({
+  theme
+}) => theme.palette.white, ({
+  theme
+}) => theme.palette["grey-300"]);
+const ShowHiddenTabsTrigger = /* @__PURE__ */ styled(Button).withConfig({
   displayName: "Tabsstyles__ShowHiddenTabsTrigger",
   componentId: "sc-16x3i3b-3"
 })(["margin-bottom:4px;"]);
-export var HiddenTabs = styled.div.withConfig({
+const HiddenTabs = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Tabsstyles__HiddenTabs",
   componentId: "sc-16x3i3b-4"
 })(["position:absolute;display:flex;visibility:hidden;pointer-events:none;"]);
-export var DropdownMenu = styled(Menu).withConfig({
+const DropdownMenu = /* @__PURE__ */ styled(Menu).withConfig({
   displayName: "Tabsstyles__DropdownMenu",
   componentId: "sc-16x3i3b-5"
-})([""]);
+})([""]);
+export {
+  DropdownMenu,
+  HiddenTabs,
+  ShowHiddenTabsTrigger,
+  TabsContainer,
+  TabsDropdownContainer,
+  TabsDropdownDivider
+};

package/dist/Tabs.types.d.ts

@@ -1,5 +1,5 @@
-import type { ReactNode, RefObject } from 'react';
-import type { TooltipProps } from '@synerise/ds-tooltip';
+import { ReactNode, RefObject } from 'react';
+import { TooltipProps } from '@synerise/ds-tooltip';
 export type TabsProps = {
     activeTab: number;
     tabs: TabItem[];

package/dist/Tabs.types.js

@@ -1 +1 @@
-export {};
+

package/dist/index.js

@@ -1 +1,4 @@
-export { default } from './Tabs';
+import { default as default2 } from "./Tabs.js";
+export {
+  default2 as default
+};

package/dist/modules.d.js

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-tabs",
-  "version": "1.1.23",
+  "version": "1.1.24",
   "description": "Tabs UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
@@ -35,13 +35,13 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.5.17",
-    "@synerise/ds-dropdown": "^1.3.1",
-    "@synerise/ds-icon": "^1.15.0",
-    "@synerise/ds-menu": "^1.4.12",
-    "@synerise/ds-tooltip": "^1.4.9",
-    "@synerise/ds-typography": "^1.1.12",
-    "@synerise/ds-utils": "^1.7.0",
+    "@synerise/ds-button": "^1.5.18",
+    "@synerise/ds-dropdown": "^1.3.2",
+    "@synerise/ds-icon": "^1.15.1",
+    "@synerise/ds-menu": "^1.4.13",
+    "@synerise/ds-tooltip": "^1.4.10",
+    "@synerise/ds-typography": "^1.1.13",
+    "@synerise/ds-utils": "^1.7.1",
     "classnames": "^2.5.1",
     "lodash.debounce": "^4.0.8"
   },
@@ -54,5 +54,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }