@synerise/ds-tabs 1.1.22 → 1.1.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/README.md +27 -26
  3. package/dist/Tab/Tab.d.ts +2 -2
  4. package/dist/Tab/Tab.js +40 -60
  5. package/dist/Tab/Tab.styles.d.ts +6 -6
  6. package/dist/Tab/Tab.styles.js +110 -95
  7. package/dist/Tab/Tab.types.d.ts +2 -2
  8. package/dist/Tab/Tab.types.js +1 -1
  9. package/dist/Tabs.d.ts +2 -2
  10. package/dist/Tabs.js +106 -160
  11. package/dist/Tabs.styles.d.ts +7 -7
  12. package/dist/Tabs.styles.js +27 -24
  13. package/dist/Tabs.types.d.ts +2 -2
  14. package/dist/Tabs.types.js +1 -1
  15. package/dist/index.js +4 -1
  16. package/dist/modules.d.js +1 -1
  17. package/dist/modules.d.ts +0 -0
  18. package/package.json +11 -11
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [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)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-tabs
9
+
10
+ ## [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)
11
+
12
+ **Note:** Version bump only for package @synerise/ds-tabs
13
+
6
14
  ## [1.1.22](https://github.com/synerise/synerise-design/compare/@synerise/ds-tabs@1.1.21...@synerise/ds-tabs@1.1.22) (2026-03-09)
7
15
 
8
16
  **Note:** Version bump only for package @synerise/ds-tabs
package/README.md CHANGED
@@ -30,29 +30,30 @@ import Tabs from '@synerise/ds-tabs'
30
30
 
31
31
  ### Tabs
32
32
 
33
- | Property | Description | Type | Default |
34
- | -------------- | ------------------------------------------ | ----------------------- | ------- |
35
- | activeTab | Active tab index | number | - |
36
- | configuration | Shows additional position in tabs dropdown | Configuration | - |
37
- | handleTabClick | Callback fired when user clicks on the tab | (index: number) => void | - |
38
- | tabs | Array of tabs | Tab[] | [] |
39
- | underscore | Underscore active item | boolean | `true` |
40
-
41
- ### Tab
42
-
43
- | Property | Description | Type | Default |
44
- | ------------ | ------------------------------ | ------------ | ------- |
45
- | disabled | Flag of disabled tabs | boolean | `false` |
46
- | icon | tab icon | Icon | - |
47
- | label | Label of tab | ReactNode | - |
48
- | tooltip | Tab tooltip text | ReactNode | - |
49
- | tooltipProps | Tooltip props (see ds-tooltip) | TooltipProps | - |
50
- | underscore | Underscore active item | boolean | `true` |
51
-
52
- #### Configuration
53
-
54
- | Property | Description | Type | Default |
55
- | -------- | ----------------------------------------------------------- | ------- | ------- |
56
- | action | Callback fired when user clicks on the configuration button | Icon | - |
57
- | disabled | Flag of disabled configuration button | boolean | - |
58
- | label | Label of configuration button | string | - |
33
+ | Property | Description | Type | Default |
34
+ | -------------- | ------------------------------------------------------------- | ----------------------- | ------- |
35
+ | activeTab | Active tab index | number | - |
36
+ | block | Stretch tabs to fill the container width (disables overflow) | boolean | - |
37
+ | configuration | Appends a configurable action item to the overflow dropdown | TabsConfiguration | - |
38
+ | handleTabClick | Callback fired when user clicks on the tab | (index: number) => void | - |
39
+ | tabs | Array of tabs | TabItem[] | - |
40
+ | underscore | Show active-indicator line below the active tab | boolean | `true` |
41
+
42
+ ### Tab (TabItem)
43
+
44
+ | Property | Description | Type | Default |
45
+ | ------------ | -------------------------------------------------------- | ------------ | ------- |
46
+ | disabled | Disables pointer events and reduces opacity | boolean | - |
47
+ | icon | Icon rendered before the label (sized 24 px) | ReactNode | - |
48
+ | label | Label of tab | ReactNode | - |
49
+ | suffixel | Element rendered after the label (supports Badge nodes) | ReactNode | - |
50
+ | tooltip | Tab tooltip content | ReactNode | - |
51
+ | tooltipProps | Additional props forwarded to ds-tooltip | TooltipProps | - |
52
+
53
+ #### TabsConfiguration
54
+
55
+ | Property | Description | Type | Default |
56
+ | -------- | ------------------------------------------------------------- | ----------- | ------- |
57
+ | action | Callback fired when user clicks on the configuration button | () => void | - |
58
+ | disabled | Disables the dropdown trigger when no tabs are hidden | boolean | - |
59
+ | label | Label of configuration button | string | - |
package/dist/Tab/Tab.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import React from 'react';
2
- import { type TabProps } from './Tab.types';
1
+ import { default as React } from 'react';
2
+ import { TabProps } from './Tab.types';
3
3
  declare const Tab: {
4
4
  ({ index, label, icon, isActive, disabled, onClick, forwardedRef, underscore, className, block, suffixel, tooltip, tooltipProps, }: TabProps): React.JSX.Element;
5
5
  defaultProps: {
package/dist/Tab/Tab.js CHANGED
@@ -1,75 +1,55 @@
1
- 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); }
2
- import classNames from 'classnames';
3
- import React, { useState } from 'react';
4
- import Icon from '@synerise/ds-icon';
5
- import Tooltip from '@synerise/ds-tooltip';
6
- import * as S from './Tab.styles';
7
- var Tab = function Tab(_ref) {
8
- var index = _ref.index,
9
- label = _ref.label,
10
- icon = _ref.icon,
11
- isActive = _ref.isActive,
12
- disabled = _ref.disabled,
13
- onClick = _ref.onClick,
14
- forwardedRef = _ref.forwardedRef,
15
- underscore = _ref.underscore,
16
- className = _ref.className,
17
- block = _ref.block,
18
- suffixel = _ref.suffixel,
19
- tooltip = _ref.tooltip,
20
- tooltipProps = _ref.tooltipProps;
21
- var _useState = useState(false),
22
- isPressed = _useState[0],
23
- setPressed = _useState[1];
24
- var handleClick = function handleClick() {
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import classNames from "classnames";
3
+ import { useState } from "react";
4
+ import Icon from "@synerise/ds-icon";
5
+ import Tooltip from "@synerise/ds-tooltip";
6
+ import { TabContainer, BlockContentWrapper, TabContent, TabLabel, SuffixWrapper, DefaultSuffixWrapper } from "./Tab.styles.js";
7
+ const Tab = ({
8
+ index,
9
+ label,
10
+ icon,
11
+ isActive,
12
+ disabled,
13
+ onClick,
14
+ forwardedRef,
15
+ underscore,
16
+ className,
17
+ block,
18
+ suffixel,
19
+ tooltip,
20
+ tooltipProps
21
+ }) => {
22
+ const [isPressed, setPressed] = useState(false);
23
+ const handleClick = () => {
25
24
  onClick(index);
26
25
  };
27
- var handleMouseDown = function handleMouseDown() {
26
+ const handleMouseDown = () => {
28
27
  setPressed(true);
29
28
  };
30
- var handleMouseUp = function handleMouseUp() {
29
+ const handleMouseUp = () => {
31
30
  setPressed(false);
32
31
  };
33
- var containerClasses = classNames(className, {
34
- underscore: underscore,
32
+ const containerClasses = classNames(className, {
33
+ underscore,
35
34
  active: isActive,
36
35
  pressed: isPressed
37
36
  });
38
- var renderSuffixel = function renderSuffixel() {
39
- if (typeof suffixel === 'string' || typeof suffixel === 'number') {
40
- return /*#__PURE__*/React.createElement(S.SuffixWrapper, null, suffixel);
37
+ const renderSuffixel = () => {
38
+ if (typeof suffixel === "string" || typeof suffixel === "number") {
39
+ return /* @__PURE__ */ jsx(SuffixWrapper, { children: suffixel });
41
40
  }
42
- return /*#__PURE__*/React.createElement(S.DefaultSuffixWrapper, null, suffixel);
41
+ return /* @__PURE__ */ jsx(DefaultSuffixWrapper, { children: suffixel });
43
42
  };
44
- var tabContent = /*#__PURE__*/React.createElement(S.BlockContentWrapper, {
45
- block: block
46
- }, /*#__PURE__*/React.createElement(S.TabContent, {
47
- className: "tab-content",
48
- "data-testid": "ds-tabs-tab-content"
49
- }, icon && /*#__PURE__*/React.createElement(Icon, {
50
- "data-testid": "ds-tabs-tab-icon",
51
- component: icon,
52
- size: 24
53
- }), label && /*#__PURE__*/React.createElement(S.TabLabel, {
54
- "data-testid": "ds-tabs-tab-label"
55
- }, label), !!suffixel && renderSuffixel()));
56
- return /*#__PURE__*/React.createElement(S.TabContainer, {
57
- className: containerClasses,
58
- onClick: handleClick,
59
- onMouseDown: handleMouseDown,
60
- onMouseUp: handleMouseUp,
61
- onMouseOut: handleMouseUp,
62
- onBlur: handleMouseUp,
63
- disabled: disabled,
64
- ref: forwardedRef,
65
- type: "button",
66
- "data-testid": "tab-container",
67
- block: block
68
- }, tooltip ? /*#__PURE__*/React.createElement(Tooltip, _extends({
69
- title: tooltip
70
- }, tooltipProps), tabContent) : tabContent);
43
+ const tabContent = /* @__PURE__ */ jsx(BlockContentWrapper, { block, children: /* @__PURE__ */ jsxs(TabContent, { className: "tab-content", "data-testid": "ds-tabs-tab-content", children: [
44
+ icon && /* @__PURE__ */ jsx(Icon, { "data-testid": "ds-tabs-tab-icon", component: icon, size: 24 }),
45
+ label && /* @__PURE__ */ jsx(TabLabel, { "data-testid": "ds-tabs-tab-label", children: label }),
46
+ !!suffixel && renderSuffixel()
47
+ ] }) });
48
+ 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 });
71
49
  };
72
50
  Tab.defaultProps = {
73
51
  underscore: true
74
52
  };
75
- export default Tab;
53
+ export {
54
+ Tab as default
55
+ };
package/dist/Tab/Tab.styles.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- export declare const TabLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
2
- export declare const BlockContentWrapper: import("styled-components").StyledComponent<"div", any, {
1
+ export declare const TabLabel: import('styled-components').StyledComponent<"span", any, {}, never>;
2
+ export declare const BlockContentWrapper: import('styled-components').StyledComponent<"div", any, {
3
3
  block?: boolean;
4
4
  }, never>;
5
- export declare const TabContent: import("styled-components").StyledComponent<"div", any, {}, never>;
6
- export declare const TabContainer: import("styled-components").StyledComponent<"button", any, {
5
+ export declare const TabContent: import('styled-components').StyledComponent<"div", any, {}, never>;
6
+ export declare const TabContainer: import('styled-components').StyledComponent<"button", any, {
7
7
  block?: boolean;
8
8
  }, never>;
9
- export declare const SuffixWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
10
- export declare const DefaultSuffixWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
9
+ export declare const SuffixWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
10
+ export declare const DefaultSuffixWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
package/dist/Tab/Tab.styles.js CHANGED
@@ -1,109 +1,124 @@
1
- import styled from 'styled-components';
2
- import { IconContainer } from '@synerise/ds-icon';
3
- import { macro } from '@synerise/ds-typography';
4
- export var TabLabel = styled.span.withConfig({
1
+ import styled from "styled-components";
2
+ import { IconContainer } from "@synerise/ds-icon";
3
+ import { macro } from "@synerise/ds-typography";
4
+ const TabLabel = /* @__PURE__ */ styled.span.withConfig({
5
5
  displayName: "Tabstyles__TabLabel",
6
6
  componentId: "sc-8a5swe-0"
7
- })(["", " line-height:20px;white-space:nowrap;color:", ";"], macro.h300, function (_ref) {
8
- var theme = _ref.theme;
9
- return theme.palette['grey-700'];
10
- });
11
- export var BlockContentWrapper = styled.div.withConfig({
7
+ })(["", " line-height:20px;white-space:nowrap;color:", ";"], macro.h300, ({
8
+ theme
9
+ }) => theme.palette["grey-700"]);
10
+ const BlockContentWrapper = /* @__PURE__ */ styled.div.withConfig({
12
11
  displayName: "Tabstyles__BlockContentWrapper",
13
12
  componentId: "sc-8a5swe-1"
14
- })(["", ""], function (props) {
15
- 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 " : "";
16
- });
17
- export var TabContent = styled.div.withConfig({
13
+ })(["", ""], (props) => props.block ? `display: flex;
14
+ justify-content: center;
15
+ align-items: center;
16
+ position: absolute;
17
+ width: 100%;
18
+ left: 0;
19
+ top: 0;
20
+ ` : ``);
21
+ const TabContent = /* @__PURE__ */ styled.div.withConfig({
18
22
  displayName: "Tabstyles__TabContent",
19
23
  componentId: "sc-8a5swe-2"
20
24
  })(["display:flex;flex-direction:row;align-self:center;align-items:center;justify-content:flex-start;height:24px;overflow:hidden;text-overflow:ellipsis;"]);
21
- var applyBlockStyles = function applyBlockStyles(props) {
22
- 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";
23
- };
24
- export var TabContainer = styled.button.withConfig({
25
+ const applyBlockStyles = (props) => `
26
+ margin-right: 0;
27
+ flex: 1;
28
+ ${TabContent} {
29
+ border-left: 5px solid transparent;
30
+ border-right: 5px solid transparent;
31
+ }
32
+ &: after {
33
+ background-color:${props.theme.palette["grey-200"]};
34
+ height:1px;
35
+ }
36
+ &: hover {
37
+ &::after {
38
+ background-color:${props.theme.palette["grey-300"]};
39
+ height: 1px;
40
+ }
41
+ }
42
+ &:focus:active:not(:hover) {
43
+ &::after {
44
+ background-color:${props.theme.palette["blue-600"]};
45
+ background-image:none;
46
+ height: 1px;
47
+ }
48
+ }
49
+ &.pressed {
50
+ && {
51
+ &::after {
52
+ height: 1px;
53
+ }
54
+ }
55
+ }
56
+ `;
57
+ const TabContainer = /* @__PURE__ */ styled.button.withConfig({
25
58
  displayName: "Tabstyles__TabContainer",
26
59
  componentId: "sc-8a5swe-3"
27
- })(["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) {
28
- var disabled = _ref2.disabled;
29
- return disabled ? 'none' : 'all';
30
- }, function (_ref3) {
31
- var disabled = _ref3.disabled;
32
- return disabled ? '0.4' : '1';
33
- }, IconContainer, TabLabel, function (_ref4) {
34
- var theme = _ref4.theme;
35
- return theme.palette['grey-800'];
36
- }, TabLabel, function (_ref5) {
37
- var theme = _ref5.theme;
38
- return theme.palette['blue-700'];
39
- }, function (_ref6) {
40
- var theme = _ref6.theme;
41
- return theme.palette['grey-800'];
42
- }, function (_ref7) {
43
- var theme = _ref7.theme;
44
- return theme.palette['grey-800'];
45
- }, function (_ref8) {
46
- var theme = _ref8.theme;
47
- return theme.palette['grey-600'];
48
- }, function (_ref9) {
49
- var theme = _ref9.theme;
50
- return theme.palette['grey-600'];
51
- }, TabLabel, function (_ref0) {
52
- var theme = _ref0.theme;
53
- return theme.palette['blue-500'];
54
- }, function (_ref1) {
55
- var theme = _ref1.theme;
56
- return theme.palette['blue-500'];
57
- }, function (_ref10) {
58
- var theme = _ref10.theme;
59
- return theme.palette['blue-500'];
60
- }, TabLabel, function (_ref11) {
61
- var theme = _ref11.theme;
62
- return theme.palette['blue-600'];
63
- }, function (_ref12) {
64
- var theme = _ref12.theme;
65
- return theme.palette['blue-600'];
66
- }, function (_ref13) {
67
- var theme = _ref13.theme;
68
- return theme.palette['blue-600'];
69
- }, function (_ref14) {
70
- var theme = _ref14.theme;
71
- return theme.palette.white;
72
- }, function (_ref15) {
73
- var theme = _ref15.theme;
74
- return theme.palette['blue-600'];
75
- }, TabLabel, function (_ref16) {
76
- var theme = _ref16.theme;
77
- return theme.palette['grey-700'];
78
- }, function (_ref17) {
79
- var theme = _ref17.theme;
80
- return theme.palette['blue-600'];
81
- }, function (_ref18) {
82
- var theme = _ref18.theme;
83
- return theme.palette['blue-600'];
84
- }, TabLabel, function (_ref19) {
85
- var theme = _ref19.theme;
86
- return theme.palette['blue-600'];
87
- }, function (_ref20) {
88
- var theme = _ref20.theme;
89
- return theme.palette['blue-600'];
90
- }, function (_ref21) {
91
- var theme = _ref21.theme;
92
- return theme.palette['blue-700'];
93
- }, function (_ref22) {
94
- var theme = _ref22.theme;
95
- return theme.palette['blue-700'];
96
- }, TabLabel, function (_ref23) {
97
- var theme = _ref23.theme;
98
- return theme.palette['blue-700'];
99
- }, function (props) {
100
- return !!props.block && applyBlockStyles(props);
101
- });
102
- export var SuffixWrapper = styled.div.withConfig({
60
+ })(["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;}}", ""], ({
61
+ disabled
62
+ }) => disabled ? "none" : "all", ({
63
+ disabled
64
+ }) => disabled ? "0.4" : "1", IconContainer, TabLabel, ({
65
+ theme
66
+ }) => theme.palette["grey-800"], TabLabel, ({
67
+ theme
68
+ }) => theme.palette["blue-700"], ({
69
+ theme
70
+ }) => theme.palette["grey-800"], ({
71
+ theme
72
+ }) => theme.palette["grey-800"], ({
73
+ theme
74
+ }) => theme.palette["grey-600"], ({
75
+ theme
76
+ }) => theme.palette["grey-600"], TabLabel, ({
77
+ theme
78
+ }) => theme.palette["blue-500"], ({
79
+ theme
80
+ }) => theme.palette["blue-500"], ({
81
+ theme
82
+ }) => theme.palette["blue-500"], TabLabel, ({
83
+ theme
84
+ }) => theme.palette["blue-600"], ({
85
+ theme
86
+ }) => theme.palette["blue-600"], ({
87
+ theme
88
+ }) => theme.palette["blue-600"], ({
89
+ theme
90
+ }) => theme.palette.white, ({
91
+ theme
92
+ }) => theme.palette["blue-600"], TabLabel, ({
93
+ theme
94
+ }) => theme.palette["grey-700"], ({
95
+ theme
96
+ }) => theme.palette["blue-600"], ({
97
+ theme
98
+ }) => theme.palette["blue-600"], TabLabel, ({
99
+ theme
100
+ }) => theme.palette["blue-600"], ({
101
+ theme
102
+ }) => theme.palette["blue-600"], ({
103
+ theme
104
+ }) => theme.palette["blue-700"], ({
105
+ theme
106
+ }) => theme.palette["blue-700"], TabLabel, ({
107
+ theme
108
+ }) => theme.palette["blue-700"], (props) => !!props.block && applyBlockStyles(props));
109
+ const SuffixWrapper = /* @__PURE__ */ styled.div.withConfig({
103
110
  displayName: "Tabstyles__SuffixWrapper",
104
111
  componentId: "sc-8a5swe-4"
105
112
  })([""]);
106
- export var DefaultSuffixWrapper = styled.div.withConfig({
113
+ const DefaultSuffixWrapper = /* @__PURE__ */ styled.div.withConfig({
107
114
  displayName: "Tabstyles__DefaultSuffixWrapper",
108
115
  componentId: "sc-8a5swe-5"
109
- })(["font-size:13px;line-height:10px;text-align:center;&& .ant-badge-count{padding:0 0 0 3px;}"]);
116
+ })(["font-size:13px;line-height:10px;text-align:center;&& .ant-badge-count{padding:0 0 0 3px;}"]);
117
+ export {
118
+ BlockContentWrapper,
119
+ DefaultSuffixWrapper,
120
+ SuffixWrapper,
121
+ TabContainer,
122
+ TabContent,
123
+ TabLabel
124
+ };
package/dist/Tab/Tab.types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import type { RefObject } from 'react';
2
- import type { TabItem } from '../Tabs.types';
1
+ import { RefObject } from 'react';
2
+ import { TabItem } from '../Tabs.types';
3
3
  export type TabProps = TabItem & {
4
4
  index: number;
5
5
  underscore?: boolean;
package/dist/Tab/Tab.types.js CHANGED
@@ -1 +1 @@
1
- export {};
1
+
package/dist/Tabs.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import React from 'react';
2
- import { type TabsProps } from './Tabs.types';
1
+ import { default as React } from 'react';
2
+ import { TabsProps } from './Tabs.types';
3
3
  declare const Tabs: {
4
4
  ({ activeTab, tabs, handleTabClick, configuration, underscore, block, }: TabsProps): React.JSX.Element;
5
5
  defaultProps: {
package/dist/Tabs.js CHANGED
@@ -1,94 +1,77 @@
1
- var _excluded = ["ref"],
2
- _excluded2 = ["ref"];
3
- 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; }
4
- 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); }
5
- import debounce from 'lodash.debounce';
6
- import React, { createRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
7
- import { theme } from '@synerise/ds-core';
8
- import { DropdownMenu } from '@synerise/ds-dropdown';
9
- import Icon, { OptionHorizontalM } from '@synerise/ds-icon';
10
- import { NOOP, useResizeObserver } from '@synerise/ds-utils';
11
- import Tab from './Tab/Tab';
12
- import * as S from './Tabs.styles';
13
- var MARGIN_BETWEEN_TABS = 24;
14
- var DROPDOWN_TRIGGER_SIZE = 32;
15
- var DROPDOWN_OVERLAY_STYLE = {
16
- zIndex: parseInt(theme.variables['zindex-modal'], 10) - 1
1
+ import { jsx, Fragment, jsxs } from "react/jsx-runtime";
2
+ import debounce from "lodash.debounce";
3
+ import { useState, useRef, useMemo, useEffect, createRef, useCallback } from "react";
4
+ import { theme } from "@synerise/ds-core";
5
+ import { DropdownMenu } from "@synerise/ds-dropdown";
6
+ import Icon, { OptionHorizontalM } from "@synerise/ds-icon";
7
+ import { useResizeObserver, NOOP } from "@synerise/ds-utils";
8
+ import Tab from "./Tab/Tab.js";
9
+ import { HiddenTabs, TabsContainer, ShowHiddenTabsTrigger } from "./Tabs.styles.js";
10
+ const MARGIN_BETWEEN_TABS = 24;
11
+ const DROPDOWN_TRIGGER_SIZE = 32;
12
+ const DROPDOWN_OVERLAY_STYLE = {
13
+ zIndex: parseInt(theme.variables["zindex-modal"], 10) - 1
17
14
  };
18
- var Tabs = function Tabs(_ref) {
19
- var activeTab = _ref.activeTab,
20
- tabs = _ref.tabs,
21
- handleTabClick = _ref.handleTabClick,
22
- configuration = _ref.configuration,
23
- underscore = _ref.underscore,
24
- block = _ref.block;
25
- var _useState = useState(0),
26
- containerWidth = _useState[0],
27
- setContainerWidth = _useState[1];
28
- var containerRef = useRef(null);
29
- var helperContainerRef = useRef(null);
30
- var _useResizeObserver = useResizeObserver(containerRef),
31
- width = _useResizeObserver.width;
32
- var _useResizeObserver2 = useResizeObserver(helperContainerRef),
33
- helperWidth = _useResizeObserver2.width;
34
- var _useState2 = useState([]),
35
- items = _useState2[0],
36
- setItems = _useState2[1];
37
- var _useState3 = useState([]),
38
- itemsWidths = _useState3[0],
39
- setItemsWidths = _useState3[1];
40
- var _useState4 = useState([]),
41
- visibleTabs = _useState4[0],
42
- setVisibleTabs = _useState4[1];
43
- var _useState5 = useState(false),
44
- isDropdownVisible = _useState5[0],
45
- setIsDropdownVisible = _useState5[1];
46
- var _useState6 = useState([]),
47
- hiddenTabs = _useState6[0],
48
- setHiddenTabs = _useState6[1];
49
- var debouncedEventHandler = useMemo(function () {
50
- return debounce(function (newWidth) {
51
- return setContainerWidth(newWidth);
52
- }, 200);
53
- }, []);
54
- useEffect(function () {
15
+ const Tabs = ({
16
+ activeTab,
17
+ tabs,
18
+ handleTabClick,
19
+ configuration,
20
+ underscore,
21
+ block
22
+ }) => {
23
+ const [containerWidth, setContainerWidth] = useState(0);
24
+ const containerRef = useRef(null);
25
+ const helperContainerRef = useRef(null);
26
+ const {
27
+ width
28
+ } = useResizeObserver(containerRef);
29
+ const {
30
+ width: helperWidth
31
+ } = useResizeObserver(helperContainerRef);
32
+ const [items, setItems] = useState([]);
33
+ const [itemsWidths, setItemsWidths] = useState([]);
34
+ const [visibleTabs, setVisibleTabs] = useState([]);
35
+ const [isDropdownVisible, setIsDropdownVisible] = useState(false);
36
+ const [hiddenTabs, setHiddenTabs] = useState([]);
37
+ const debouncedEventHandler = useMemo(() => debounce((newWidth) => setContainerWidth(newWidth), 200), []);
38
+ useEffect(() => {
55
39
  debouncedEventHandler(width);
56
40
  }, [width, debouncedEventHandler]);
57
- useEffect(function () {
58
- var _containerRef$current;
59
- containerRef.current && setContainerWidth((_containerRef$current = containerRef.current) == null ? void 0 : _containerRef$current.offsetWidth);
60
- // eslint-disable-next-line react-hooks/exhaustive-deps
41
+ useEffect(() => {
42
+ containerRef.current && setContainerWidth(containerRef.current?.offsetWidth);
61
43
  }, [containerRef.current]);
62
- useEffect(function () {
63
- var newTabs = tabs.map(function (tab) {
64
- return _extends({}, tab, {
65
- ref: /*#__PURE__*/createRef()
66
- });
44
+ useEffect(() => {
45
+ const newTabs = tabs.map((tab) => {
46
+ return {
47
+ ...tab,
48
+ ref: createRef()
49
+ };
67
50
  });
68
51
  setItems(newTabs);
69
52
  }, [tabs]);
70
- var widthsAreNonZero = containerWidth > 0 && helperWidth > 0;
71
- useEffect(function () {
53
+ const widthsAreNonZero = containerWidth > 0 && helperWidth > 0;
54
+ useEffect(() => {
72
55
  if (widthsAreNonZero) {
73
- var itemsWithWidths = [];
74
- items.forEach(function (item, index) {
56
+ const itemsWithWidths = [];
57
+ items.forEach((item, index) => {
75
58
  itemsWithWidths[index] = item.ref.current !== null ? item.ref.current.offsetWidth + MARGIN_BETWEEN_TABS : 0;
76
59
  });
77
60
  setItemsWidths(itemsWithWidths);
78
61
  }
79
62
  }, [items, widthsAreNonZero]);
80
- useEffect(function () {
63
+ useEffect(() => {
81
64
  if (block) {
82
65
  setVisibleTabs(items);
83
66
  setHiddenTabs([]);
84
67
  }
85
68
  }, [items, block]);
86
- useEffect(function () {
69
+ useEffect(() => {
87
70
  if (!block) {
88
- var tabsWidth = DROPDOWN_TRIGGER_SIZE + MARGIN_BETWEEN_TABS;
89
- var visibleItems = [];
90
- var hiddenItems = [];
91
- itemsWidths.forEach(function (itemWidth, index) {
71
+ let tabsWidth = DROPDOWN_TRIGGER_SIZE + MARGIN_BETWEEN_TABS;
72
+ const visibleItems = [];
73
+ const hiddenItems = [];
74
+ itemsWidths.forEach((itemWidth, index) => {
92
75
  if (containerRef && tabsWidth + itemWidth < containerWidth) {
93
76
  visibleItems.push(items[index]);
94
77
  } else {
@@ -99,118 +82,81 @@ var Tabs = function Tabs(_ref) {
99
82
  setVisibleTabs(visibleItems);
100
83
  setHiddenTabs(hiddenItems);
101
84
  }
102
- // eslint-disable-next-line react-hooks/exhaustive-deps
103
85
  }, [block, itemsWidths, containerWidth]);
104
- var handleConfigurationAction = useCallback(function () {
86
+ const handleConfigurationAction = useCallback(() => {
105
87
  configuration && configuration.action();
106
88
  setIsDropdownVisible(false);
107
89
  }, [configuration]);
108
- var handleHiddenTabClick = useCallback(function (index) {
90
+ const handleHiddenTabClick = useCallback((index) => {
109
91
  setIsDropdownVisible(false);
110
92
  handleTabClick(index);
111
93
  }, [handleTabClick]);
112
- var dropdownMenuItems = hiddenTabs.map(function (item, index) {
113
- return {
114
- key: item.label + "-dropdown-" + index,
115
- onClick: function onClick() {
116
- return handleHiddenTabClick(visibleTabs.length + index);
117
- },
118
- disabled: item.disabled,
119
- text: item.label
120
- };
121
- });
122
- var hiddenTabsItems = useMemo(function () {
123
- var temp = hiddenTabs.length > 0 ? [].concat(dropdownMenuItems) : [];
94
+ const dropdownMenuItems = hiddenTabs.map((item, index) => ({
95
+ key: `${item.label}-dropdown-${index}`,
96
+ onClick: () => handleHiddenTabClick(visibleTabs.length + index),
97
+ disabled: item.disabled,
98
+ text: item.label
99
+ }));
100
+ const hiddenTabsItems = useMemo(() => {
101
+ const temp = hiddenTabs.length > 0 ? [...dropdownMenuItems] : [];
124
102
  if (hiddenTabs.length > 0 && configuration) {
125
103
  temp.push({
126
- type: 'divider'
104
+ type: "divider"
127
105
  });
128
106
  }
129
107
  if (configuration) {
130
108
  temp.push({
131
- key: 'configuration-btn',
109
+ key: "configuration-btn",
132
110
  onClick: handleConfigurationAction,
133
- disabled: !!(configuration != null && configuration.disabled),
111
+ disabled: !!configuration?.disabled,
134
112
  text: configuration.label
135
113
  });
136
114
  }
137
115
  return temp;
138
116
  }, [hiddenTabs.length, dropdownMenuItems, configuration, handleConfigurationAction]);
139
- var renderDropdown = function renderDropdown() {
140
- return /*#__PURE__*/React.createElement(React.Fragment, null, (hiddenTabs.length || configuration) && /*#__PURE__*/React.createElement(DropdownMenu, {
141
- trigger: "click",
142
- dataSource: hiddenTabsItems,
143
- open: isDropdownVisible,
144
- onOpenChange: setIsDropdownVisible,
145
- disabled: !!(configuration != null && configuration.disabled) && !hiddenTabs.length,
146
- overlayStyle: DROPDOWN_OVERLAY_STYLE,
147
- placement: "bottomLeft",
148
- popoverProps: {
149
- testId: 'tabs-hidden',
150
- autoUpdate: {
151
- ancestorScroll: true,
152
- ancestorResize: true,
153
- elementResize: true,
154
- layoutShift: true,
155
- animationFrame: true
156
- }
117
+ const renderDropdown = () => {
118
+ 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: {
119
+ testId: "tabs-hidden",
120
+ autoUpdate: {
121
+ ancestorScroll: true,
122
+ ancestorResize: true,
123
+ elementResize: true,
124
+ layoutShift: true,
125
+ animationFrame: true
157
126
  }
158
- }, /*#__PURE__*/React.createElement(S.ShowHiddenTabsTrigger, {
159
- "data-testid": "tabs-dropdown-trigger",
160
- type: "ghost",
161
- mode: "single-icon",
162
- disabled: !!(configuration != null && configuration.disabled) && !hiddenTabs.length
163
- }, /*#__PURE__*/React.createElement(Icon, {
164
- component: /*#__PURE__*/React.createElement(OptionHorizontalM, null)
165
- }))));
127
+ }, 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, {}) }) }) }) });
166
128
  };
167
- var renderVisibleTabs = useMemo(function () {
168
- return /*#__PURE__*/React.createElement(React.Fragment, null, visibleTabs.filter(function (tab) {
169
- return Boolean(tab);
170
- }).map(function (tab, index) {
171
- var key = "tabs-tab-" + index;
172
- var ref = tab.ref,
173
- tabProps = _objectWithoutPropertiesLoose(tab, _excluded);
174
- return /*#__PURE__*/React.createElement(Tab, _extends({
175
- underscore: underscore,
176
- forwardedRef: ref,
177
- key: key,
178
- index: index,
179
- block: block,
180
- onClick: handleTabClick,
181
- isActive: index === activeTab
182
- }, tabProps));
183
- }));
129
+ const renderVisibleTabs = useMemo(() => {
130
+ return /* @__PURE__ */ jsx(Fragment, { children: visibleTabs.filter((tab) => Boolean(tab)).map((tab, index) => {
131
+ const key = `tabs-tab-${index}`;
132
+ const {
133
+ ref,
134
+ ...tabProps
135
+ } = tab;
136
+ return /* @__PURE__ */ jsx(Tab, { underscore, forwardedRef: ref, index, block, onClick: handleTabClick, isActive: index === activeTab, ...tabProps }, key);
137
+ }) });
184
138
  }, [visibleTabs, activeTab, handleTabClick, underscore, block]);
185
- var renderHelpers = useMemo(function () {
186
- return /*#__PURE__*/React.createElement(S.HiddenTabs, {
187
- ref: helperContainerRef,
188
- "data-testid": "ds-tabs-hidden-helper",
189
- className: "ds-hidden-helper"
190
- }, items.map(function (tab, index) {
191
- var key = "tabs-tab-helper-" + index;
192
- var ref = tab.ref,
193
- tabProps = _objectWithoutPropertiesLoose(tab, _excluded2);
194
- return /*#__PURE__*/React.createElement(Tab, _extends({
195
- className: "hidden",
196
- underscore: underscore,
197
- forwardedRef: ref,
198
- key: key,
199
- index: index,
200
- onClick: NOOP,
201
- block: block
202
- }, tabProps));
203
- }));
139
+ const renderHelpers = useMemo(() => {
140
+ return /* @__PURE__ */ jsx(HiddenTabs, { ref: helperContainerRef, "data-testid": "ds-tabs-hidden-helper", className: "ds-hidden-helper", children: items.map((tab, index) => {
141
+ const key = `tabs-tab-helper-${index}`;
142
+ const {
143
+ ref,
144
+ ...tabProps
145
+ } = tab;
146
+ return /* @__PURE__ */ jsx(Tab, { className: "hidden", underscore, forwardedRef: ref, index, onClick: NOOP, block, ...tabProps }, key);
147
+ }) });
204
148
  }, [items, underscore, block]);
205
- return /*#__PURE__*/React.createElement(React.Fragment, null, tabs.length > 0 || configuration ? /*#__PURE__*/React.createElement(S.TabsContainer, {
206
- className: "ds-tabs",
207
- ref: containerRef,
208
- "data-testid": "tabs-container",
209
- block: block,
210
- "data-popup-container": true
211
- }, renderVisibleTabs, renderDropdown()) : null, !block && renderHelpers);
149
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
150
+ tabs.length > 0 || configuration ? /* @__PURE__ */ jsxs(TabsContainer, { className: "ds-tabs", ref: containerRef, "data-testid": "tabs-container", block, "data-popup-container": true, children: [
151
+ renderVisibleTabs,
152
+ renderDropdown()
153
+ ] }) : null,
154
+ !block && renderHelpers
155
+ ] });
212
156
  };
213
157
  Tabs.defaultProps = {
214
158
  underscore: true
215
159
  };
216
- export default Tabs;
160
+ export {
161
+ Tabs as default
162
+ };
package/dist/Tabs.styles.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- import { type StyledButton } from '@synerise/ds-button';
2
- import Menu, { type AntdMenuProps } from '@synerise/ds-menu';
3
- export declare const TabsContainer: import("styled-components").StyledComponent<"div", any, {
1
+ import { StyledButton } from '@synerise/ds-button';
2
+ import { default as Menu, AntdMenuProps } from '@synerise/ds-menu';
3
+ export declare const TabsContainer: import('styled-components').StyledComponent<"div", any, {
4
4
  block?: boolean;
5
5
  }, never>;
6
- export declare const TabsDropdownContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
7
- export declare const TabsDropdownDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
6
+ export declare const TabsDropdownContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
7
+ export declare const TabsDropdownDivider: import('styled-components').StyledComponent<"div", any, {}, never>;
8
8
  export declare const ShowHiddenTabsTrigger: StyledButton;
9
- export declare const HiddenTabs: import("styled-components").StyledComponent<"div", any, {}, never>;
10
- export declare const DropdownMenu: import("styled-components").StyledComponent<typeof Menu, any, AntdMenuProps, never>;
9
+ export declare const HiddenTabs: import('styled-components').StyledComponent<"div", any, {}, never>;
10
+ export declare const DropdownMenu: import('styled-components').StyledComponent<typeof Menu, any, AntdMenuProps, never>;
package/dist/Tabs.styles.js CHANGED
@@ -1,38 +1,41 @@
1
- import styled from 'styled-components';
2
- import Button from '@synerise/ds-button';
3
- import Menu from '@synerise/ds-menu';
4
- export var TabsContainer = styled.div.withConfig({
1
+ import styled from "styled-components";
2
+ import Button from "@synerise/ds-button";
3
+ import Menu from "@synerise/ds-menu";
4
+ const TabsContainer = /* @__PURE__ */ styled.div.withConfig({
5
5
  displayName: "Tabsstyles__TabsContainer",
6
6
  componentId: "sc-16x3i3b-0"
7
- })(["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) {
8
- return props.block ? "center" : "flex-end";
9
- });
10
- export var TabsDropdownContainer = styled.div.withConfig({
7
+ })(["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`);
8
+ const TabsDropdownContainer = /* @__PURE__ */ styled.div.withConfig({
11
9
  displayName: "Tabsstyles__TabsDropdownContainer",
12
10
  componentId: "sc-16x3i3b-1"
13
- })(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:", ";opacity:1;padding:8px;"], function (_ref) {
14
- var theme = _ref.theme;
15
- return theme.palette.white;
16
- });
17
- export var TabsDropdownDivider = styled.div.withConfig({
11
+ })(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:", ";opacity:1;padding:8px;"], ({
12
+ theme
13
+ }) => theme.palette.white);
14
+ const TabsDropdownDivider = /* @__PURE__ */ styled.div.withConfig({
18
15
  displayName: "Tabsstyles__TabsDropdownDivider",
19
16
  componentId: "sc-16x3i3b-2"
20
- })(["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) {
21
- var theme = _ref2.theme;
22
- return theme.palette.white;
23
- }, function (_ref3) {
24
- var theme = _ref3.theme;
25
- return theme.palette['grey-300'];
26
- });
27
- export var ShowHiddenTabsTrigger = styled(Button).withConfig({
17
+ })(["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;"], ({
18
+ theme
19
+ }) => theme.palette.white, ({
20
+ theme
21
+ }) => theme.palette["grey-300"]);
22
+ const ShowHiddenTabsTrigger = /* @__PURE__ */ styled(Button).withConfig({
28
23
  displayName: "Tabsstyles__ShowHiddenTabsTrigger",
29
24
  componentId: "sc-16x3i3b-3"
30
25
  })(["margin-bottom:4px;"]);
31
- export var HiddenTabs = styled.div.withConfig({
26
+ const HiddenTabs = /* @__PURE__ */ styled.div.withConfig({
32
27
  displayName: "Tabsstyles__HiddenTabs",
33
28
  componentId: "sc-16x3i3b-4"
34
29
  })(["position:absolute;display:flex;visibility:hidden;pointer-events:none;"]);
35
- export var DropdownMenu = styled(Menu).withConfig({
30
+ const DropdownMenu = /* @__PURE__ */ styled(Menu).withConfig({
36
31
  displayName: "Tabsstyles__DropdownMenu",
37
32
  componentId: "sc-16x3i3b-5"
38
- })([""]);
33
+ })([""]);
34
+ export {
35
+ DropdownMenu,
36
+ HiddenTabs,
37
+ ShowHiddenTabsTrigger,
38
+ TabsContainer,
39
+ TabsDropdownContainer,
40
+ TabsDropdownDivider
41
+ };
package/dist/Tabs.types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import type { ReactNode, RefObject } from 'react';
2
- import type { TooltipProps } from '@synerise/ds-tooltip';
1
+ import { ReactNode, RefObject } from 'react';
2
+ import { TooltipProps } from '@synerise/ds-tooltip';
3
3
  export type TabsProps = {
4
4
  activeTab: number;
5
5
  tabs: TabItem[];
package/dist/Tabs.types.js CHANGED
@@ -1 +1 @@
1
- export {};
1
+
package/dist/index.js CHANGED
@@ -1 +1,4 @@
1
- export { default } from './Tabs';
1
+ import { default as default2 } from "./Tabs.js";
2
+ export {
3
+ default2 as default
4
+ };
package/dist/modules.d.js CHANGED
@@ -1 +1 @@
1
- import '@testing-library/jest-dom';
1
+ import "@testing-library/jest-dom";
package/dist/modules.d.ts ADDED
File without changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-tabs",
3
- "version": "1.1.22",
3
+ "version": "1.1.24",
4
4
  "description": "Tabs UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "synerise/synerise-design",
@@ -16,10 +16,10 @@
16
16
  "access": "public"
17
17
  },
18
18
  "scripts": {
19
- "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
19
+ "build": "vite build",
20
20
  "build:css": "node ../../../scripts/style/less.js",
21
21
  "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
22
- "build:watch": "pnpm run build:js -- --watch",
22
+ "build:watch": "vite build --watch",
23
23
  "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
24
24
  "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
25
25
  "prepublish": "pnpm run build",
@@ -35,13 +35,13 @@
35
35
  ],
36
36
  "types": "dist/index.d.ts",
37
37
  "dependencies": {
38
- "@synerise/ds-button": "^1.5.16",
39
- "@synerise/ds-dropdown": "^1.3.0",
40
- "@synerise/ds-icon": "^1.14.1",
41
- "@synerise/ds-menu": "^1.4.11",
42
- "@synerise/ds-tooltip": "^1.4.8",
43
- "@synerise/ds-typography": "^1.1.11",
44
- "@synerise/ds-utils": "^1.6.0",
38
+ "@synerise/ds-button": "^1.5.18",
39
+ "@synerise/ds-dropdown": "^1.3.2",
40
+ "@synerise/ds-icon": "^1.15.1",
41
+ "@synerise/ds-menu": "^1.4.13",
42
+ "@synerise/ds-tooltip": "^1.4.10",
43
+ "@synerise/ds-typography": "^1.1.13",
44
+ "@synerise/ds-utils": "^1.7.1",
45
45
  "classnames": "^2.5.1",
46
46
  "lodash.debounce": "^4.0.8"
47
47
  },
@@ -54,5 +54,5 @@
54
54
  "react": ">=16.9.0 <= 18.3.1",
55
55
  "styled-components": "^5.3.3"
56
56
  },
57
- "gitHead": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
57
+ "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
58
58
  }